402 行
17 KiB
JavaScript
可执行文件
402 行
17 KiB
JavaScript
可执行文件
Vue.component('template-select-image', {
|
||
template: `<div v-cloak>
|
||
<el-container>
|
||
<el-aside width="150px" style="background-color: #e9eef3">
|
||
<el-menu background-color="#e9eef3"
|
||
text-color="#666"
|
||
:default-active="String(actMenuIndex)"
|
||
@select="selectMenu"
|
||
active-text-color="#333">
|
||
<template v-for="(item,index) in selectTypeListC">
|
||
<el-menu-item :index="item.id">{{item.name}}</el-menu-item>
|
||
</template>
|
||
</el-menu>
|
||
</el-aside>
|
||
|
||
<el-container>
|
||
<div style="width: 100%;box-sizing: border-box;padding-left: 20px;border-left: 1px solid #e9eef3">
|
||
<div>
|
||
<el-radio-group v-model="fileType"
|
||
style="margin-top: 10px"
|
||
size="small" @change="doSearch">
|
||
<el-radio-button :label="1">图片</el-radio-button>
|
||
<el-radio-button :label="2">视频</el-radio-button>
|
||
</el-radio-group>
|
||
<div class="select-image-search-box">
|
||
<el-input type="text" size="small" placeholder="搜索名称" clearable v-model="searchKey"></el-input>
|
||
|
||
<el-button type="primary" @click="doSearch" size="small">查询</el-button>
|
||
<el-button type="primary" plain @click="toUpload" size="small" icon="el-icon-upload el-icon--right">上传图片</el-button>
|
||
</div>
|
||
</div>
|
||
<span>可选<span style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{canSelectNum}}</span></span>
|
||
<div class="select-image-content"
|
||
v-loading="loading"
|
||
element-loading-spinner="el-icon-loading"
|
||
:style="'height: calc(100vh - '+((lessHeight?lessHeight:0)+340)+'px);'">
|
||
<div class="select-image-list-box">
|
||
<div class="select-image-list" v-for="(item,index) in allFileList" :class="item.checked?'select-image-list-check':''" :key="index" @click.stop="useIt(index)">
|
||
<img v-if="item.type == 1" v-cloak class="select-image-list-img" :src="item.path">
|
||
<video v-if="item.type == 2" :src="item.path" class="select-image-list-img"></video>
|
||
<div class="select-image-check el-icon-check" v-if="item.checked"></div>
|
||
<el-button type="text"
|
||
size="mini"
|
||
class="select-image-see-big el-icon-full-screen"
|
||
@click="seeBig(item)"></el-button>
|
||
</div>
|
||
</div>
|
||
<el-pagination layout="total, prev, pager, next, jumper"
|
||
@current-change="handleCurrentChange"
|
||
:current-page.sync="page"
|
||
:page-size="limit"
|
||
:total="imgTotal">
|
||
</el-pagination>
|
||
<div v-if="showGetMore&&canLoad" class="select-image-tip select-image-cursor" @click="getData">获取更多</div>
|
||
</div>
|
||
<div class="select-image-center">
|
||
<el-button type="primary" :disabled="isDisabled" @click="selectImage" size="medium">确定选择</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
</el-container>
|
||
</el-container>
|
||
|
||
<el-dialog :title="bigImgName" :visible.sync="showBigImage" :width="'80%'" :top="bigImgNameTop" :modal="false">
|
||
<div class="select-image-big-box" ref="bigImgName">
|
||
<div class="select-image-original-name">原名：{{bigImgOriginalName}}</div>
|
||
<img v-if="bigType==1" class="select-image-big-image" :src="bigImg">
|
||
<video v-if="bigType == 2" :src="bigImg" class="select-image-big-image" controls="controls"></video>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="上传文件到服务器" :visible.sync="showUpload" :modal="false" :width="'600px'" :before-close="closeUpload">
|
||
<div style="text-align: center">
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action="/index.php/Retail/Component/uploadFile"
|
||
show-file-list
|
||
:accept="fileType==1?'image/jpeg,image/jpg,image/png,image/gif,image/image/vnd.microsoft.icon,image/x-icon':'video/*'"
|
||
:on-progress="uploadFileIng"
|
||
:on-success="uploadFileSuccess"
|
||
:before-remove="beforeRemove"
|
||
:before-upload="beforeFileUpload"
|
||
:on-error="uploadFileError"
|
||
:limit="100"
|
||
:file-list="fileList"
|
||
:data="getUploadPostData()"
|
||
multiple>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将图片拖到此处上传，或<em>点击选择上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png/gif/ico及视频文件，每次最多选择100个</div>
|
||
<div class="el-upload__tip" slot="tip">图片不得大于1MB，视频不得大于10MB</div>
|
||
</el-upload>
|
||
</div>
|
||
</el-dialog>
|
||
</div>`,
|
||
props: {
|
||
'canSelectNum': {
|
||
type: Number
|
||
},
|
||
'lessHeight': {
|
||
type: Number
|
||
},
|
||
'usedImageList': {
|
||
type: Array
|
||
},
|
||
'selectFileType': {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
selectTypeListC: [],
|
||
selectTypeListD: [],
|
||
tempMerchantClass: [],
|
||
tempStoreClass: [],
|
||
showUpload: false,
|
||
searchKey: '',
|
||
selectTypeC: '',
|
||
selectTypeD: '',
|
||
fileType: 1,
|
||
bigImgName: '图片名称',
|
||
showBigImage: false,
|
||
bigImg: '',
|
||
bigType: 1,
|
||
page: 1,
|
||
limit: 15,
|
||
imgTotal: 0,
|
||
canLoad: true,
|
||
checkedLength: 0,
|
||
bigImgNameTop: '0px',
|
||
allFileList: [],
|
||
isDisabled: true,
|
||
bigImgOriginalName: '',
|
||
showGetMore: false,
|
||
allSuccess: '',
|
||
fileList: [],
|
||
isUploading: false,
|
||
loading: false,
|
||
actMenuIndex: 1,
|
||
}
|
||
},
|
||
methods: {
|
||
toUpload() {
|
||
if (!this.fileType) {
|
||
this.$message({
|
||
message: '请指定上传文件类型',
|
||
type: 'warning',
|
||
});
|
||
return;
|
||
}
|
||
this.showUpload = true;
|
||
},
|
||
getUploadPostData() {
|
||
return {
|
||
selectTypeC: this.selectTypeC,
|
||
selectTypeD: this.selectTypeD,
|
||
fileType: this.fileType,
|
||
};
|
||
},
|
||
beforeFileUpload(file) {
|
||
console.log(file);
|
||
if (this.fileType == 1) {
|
||
//上传图片
|
||
let imgExt = ['image/jpeg', 'image/png', 'image/gif', 'image/vnd.microsoft.icon', 'image/x-icon'];
|
||
if (imgExt.indexOf(file.type) == -1) {
|
||
this.$message.error('上传图片只能是 JPG、PNG、ico格式!');
|
||
return false;
|
||
}
|
||
if ((file.size / 1024 / 1024) > 1) {
|
||
this.$message.error('上传图片大小不能超过 1MB!');
|
||
return false;
|
||
}
|
||
} else {
|
||
//视频
|
||
if (file.type.split('/')[0] != 'video') {
|
||
this.$message.error('请上传视频文件');
|
||
return false;
|
||
}
|
||
if ((file.size / 1024 / 1024) > 10) {
|
||
this.$message.error('上传视频大小不能超过 10MB!');
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
},
|
||
uploadFileIng(event, file, fileList) {
|
||
this.isUploading = true;
|
||
},
|
||
uploadFileSuccess(response, file, fileList) {
|
||
this.isUploading = false;
|
||
if (response.status == 1) {
|
||
this.allSuccess++;
|
||
if (this.allSuccess == Object.keys(fileList).length) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '上传成功'
|
||
});
|
||
this.page = 1;
|
||
this.limit = 25;
|
||
this.$nextTick(() => {
|
||
this.canLoad = true;
|
||
this.getData();
|
||
})
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: response.msg,
|
||
type: 'error',
|
||
duration: 1500
|
||
});
|
||
}
|
||
},
|
||
uploadFileError(event, file, fileList) {
|
||
this.isUploading = false;
|
||
this.$message({
|
||
message: '上传失败，请重试',
|
||
type: 'error',
|
||
duration: 1500
|
||
});
|
||
},
|
||
beforeRemove() {
|
||
this.allSuccess--;
|
||
},
|
||
closeUpload() {
|
||
if (!this.isUploading) {
|
||
this.fileList = [];
|
||
this.allSuccess = '';
|
||
this.showUpload = false;
|
||
}
|
||
},
|
||
//选择图片
|
||
useIt(index) {
|
||
var allFileList = JSON.parse(JSON.stringify(this.allFileList));
|
||
if (allFileList[index].checked) {
|
||
allFileList[index].checked = false;
|
||
this.checkedLength = this.checkedLength - 1;
|
||
} else {
|
||
if (this.checkedLength < this.canSelectNum) {
|
||
allFileList[index].checked = true;
|
||
this.checkedLength = this.checkedLength + 1;
|
||
}
|
||
}
|
||
this.allFileList = [];
|
||
this.allFileList = allFileList;
|
||
},
|
||
//确认选择图片并提交
|
||
selectImage() {
|
||
var item = [];
|
||
// console.log(this.usedImageList);
|
||
var allFileList = JSON.parse(JSON.stringify(this.allFileList));
|
||
for (var i = 0; i < allFileList.length; i++) {
|
||
if (allFileList[i].checked) {
|
||
if (typeof this.usedImageList == "object") {
|
||
if (this.usedImageList.indexOf(allFileList[i].id) == -1) {
|
||
item.push(JSON.parse(JSON.stringify(allFileList[i])));
|
||
}
|
||
} else {
|
||
item.push(JSON.parse(JSON.stringify(allFileList[i])));
|
||
}
|
||
}
|
||
allFileList[i].checked = false;
|
||
}
|
||
this.allFileList = [];
|
||
this.allFileList = allFileList;
|
||
this.checkindex = [];
|
||
this.checkedLength = 0;
|
||
this.isDataTable = false;
|
||
this.$nextTick(() => {
|
||
this.$emit('selectfile', item);
|
||
})
|
||
},
|
||
//搜索图片
|
||
doSearch() {
|
||
this.page = 1;
|
||
this.canLoad = true;
|
||
this.$nextTick(() => {
|
||
this.getData();
|
||
});
|
||
},
|
||
changeSelectTypeC(val) {
|
||
if (val == -1 && this.tempMerchantClass.length) {
|
||
this.selectTypeListD = [];
|
||
this.selectTypeD = '';
|
||
this.selectTypeListD = JSON.parse(JSON.stringify(this.tempMerchantClass));
|
||
} else if (val > 0 && this.tempStoreClass.length) {
|
||
this.selectTypeListD = [];
|
||
this.selectTypeD = '';
|
||
this.selectTypeListD = JSON.parse(JSON.stringify(this.tempStoreClass));
|
||
} else {
|
||
this.selectTypeListD = [];
|
||
this.selectTypeD = '';
|
||
}
|
||
},
|
||
//查看大图
|
||
seeBig(item) {
|
||
this.bigImgName = item.name + '（大小：' + item.size + '）';
|
||
this.bigImgOriginalName = item.original_name;
|
||
this.bigImg = item.path;
|
||
this.bigType = item.type;
|
||
this.showBigImage = true;
|
||
var height = document.body.clientHeight | document.documentElement.clientHeight;
|
||
this.$nextTick(() => {
|
||
// console.log(height, this.$refs.bigImgName.offsetHeight)
|
||
var _height = (this.$refs.bigImgName.offsetHeight + 130) / 2;
|
||
console.log(_height, height)
|
||
if (height > _height) {
|
||
this.bigImgNameTop = 'calc(50vh - ' + _height + 'px)';
|
||
} else {
|
||
this.bigImgNameTop = '0px';
|
||
}
|
||
})
|
||
},
|
||
//修改页数
|
||
handleCurrentChange(val) {
|
||
this.page = val;
|
||
this.getData();
|
||
},
|
||
getData() {
|
||
if (!this.canLoad) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
$.ajax({
|
||
url: "/index.php/Retail/Component/getGalleryImages",
|
||
type: 'post',
|
||
data: {
|
||
page: this.page,
|
||
limit: this.limit,
|
||
selectTypeC: this.selectTypeC,
|
||
selectTypeD: this.selectTypeD,
|
||
key: this.searchKey,
|
||
fileType: this.fileType,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.allFileList = [];
|
||
this.allFileList = res.list;
|
||
if (this.page == 1) {
|
||
this.imgTotal = res.count;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.loading = false;
|
||
this.canLoad = true;
|
||
})
|
||
} else {
|
||
this.$confirm(res.msg, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'error'
|
||
}).then(() => {
|
||
this.loading = false;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
},
|
||
watch: {
|
||
checkedLength() {
|
||
if (this.checkedLength > 0) {
|
||
this.isDisabled = false;
|
||
} else {
|
||
this.isDisabled = true;
|
||
}
|
||
},
|
||
usedImageList() {
|
||
this.checkedLength = 0;
|
||
for (var i = 0; i < this.allFileList.length; i++) {
|
||
if (this.usedImageList.indexOf(this.allFileList[i].id) != -1) {
|
||
this.allFileList[i].checked = true;
|
||
// this.checkedLength++;
|
||
} else {
|
||
this.allFileList[i].checked = false;
|
||
}
|
||
}
|
||
},
|
||
selectFileType(n) {
|
||
this.fileType = n;
|
||
this.doSearch();
|
||
}
|
||
},
|
||
mounted() {
|
||
},
|
||
created() {
|
||
$.ajax({
|
||
url: "/index.php/Retail/Component/getSelectClass",
|
||
type: 'post',
|
||
data: {},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.selectTypeListC = res.from_class;
|
||
this.tempMerchantClass = res.merchant_class;
|
||
this.tempStoreClass = res.store_class;
|
||
}
|
||
}
|
||
});
|
||
this.getData();
|
||
},
|
||
}); |