715 行
31 KiB
JavaScript
可执行文件
715 行
31 KiB
JavaScript
可执行文件
/**
|
||
* 管理图片、选择图片
|
||
*/
|
||
Vue.component('template-select-image', {
|
||
template: `<div v-cloak>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="图库图片">
|
||
<div class="select-image-top-select">
|
||
<el-select v-if="selectTypeListC" @change="changeSelectTypeC($event)"
|
||
clearable filterable size="small"
|
||
v-model="selectTypeC" placeholder="请选择文件类目">
|
||
<el-option v-for="item in selectTypeListC"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-if="selectTypeListD.length" filterable @change="refresh"
|
||
clearable size="small"
|
||
v-model="selectTypeD" placeholder="请选择文件类目">
|
||
<el-option v-for="item in selectTypeListD"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select size="small" v-model="fileType" placeholder="请选择文件类型" @change="refresh">
|
||
<el-option label="图片" :value="1"></el-option>
|
||
<el-option label="视频" :value="2"></el-option>
|
||
</el-select>
|
||
<div class="select-image-search-box">
|
||
<el-input type="text" size="small" placeholder="搜索图片名称" clearable v-model="searchKey"></el-input>
|
||
</div>
|
||
<el-button type="primary" @click="refresh" size="small">查询</el-button>
|
||
|
||
<template v-if="!isCheckDelete">
|
||
<el-button type="primary" v-if="uploadFile" plain
|
||
@click="toUpload" size="small" icon="el-icon-upload el-icon--right">上传图片</el-button>
|
||
<el-button v-if="deleteMoreFile" @click="isCheckDelete=true"
|
||
size="small">批量删除
|
||
</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-button @click="isCheckDelete=false" size="small">取消</el-button>
|
||
<el-button type="primary" @click="toDeleteMore" :disabled="checkedLength>0?false:true"
|
||
size="small" icon="el-icon-delete">确认删除
|
||
</el-button>
|
||
</template>
|
||
</div>
|
||
<div class="select-image-flex">
|
||
<template v-if="openType==1 && isCheckDelete">
|
||
<div class="del-image-check-box" @click="checkAll">
|
||
<div class="del-image-check-all"
|
||
:class="isCheckedAll?'select-image-isChecked':(checkedLength?'select-image-someChecked':'')"></div>
|
||
<span>{{isCheckedAll?'取消多选':(checkedLength>0?'部分选中':'多选')}}<span
|
||
style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{can_select_num}}</span></span>
|
||
</div>
|
||
</template>
|
||
<template v-if="openType==2">
|
||
<span>可选<span style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{can_select_num}}</span></span>
|
||
<span @click="getData" style="color: #409EFF;cursor: pointer">刷新</span>
|
||
</template>
|
||
</div>
|
||
<el-scrollbar class="select-image-content" :style="'max-height:calc(100vh - '+(openType==1?'370':'380')+'px)'"
|
||
v-loading="loading"
|
||
element-loading-spinner="el-icon-loading">
|
||
<div>
|
||
<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 v-if="openType == 1 && isCheckDelete || openType == 2" class="select-image-check" :class="item.checked?'select-image-isChecked':''"></div>
|
||
<el-button type="text"
|
||
size="mini"
|
||
class="select-image-see-big el-icon-full-screen"
|
||
@click="seeBig(item)"></el-button>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
<el-pagination
|
||
@size-change="refresh"
|
||
@current-change="getData"
|
||
:current-page.sync="page"
|
||
:page-sizes="[25,30,35,40,45,50,60,70,80,90,100]"
|
||
:page-size.sync="limit"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="currentLen">
|
||
</el-pagination>
|
||
<div class="select-image-center" v-if="openType==2">
|
||
<el-button type="primary" :disabled="isDisabled" @click="selectImage" size="medium">确定选择</el-button>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-dialog :title="bigImgName" :visible.sync="showBigImage" :append-to-body="true" :width="'80%'" :top="bigImgNameTop">
|
||
<div class="select-image-big-box" ref="bigFileBox">
|
||
<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" :append-to-body="true"
|
||
:modal="false" :width="'600px'" :before-close="closeUpload">
|
||
<el-form label-width="170px" size="mini" style="margin-bottom: 10px">
|
||
<el-form-item label="上传目录">
|
||
<el-select v-if="selectTypeListC" @change="changeUploadSelectTypeC($event)"
|
||
clearable filterable size="small"
|
||
v-model="uploadSelectTypeC" placeholder="请选择文件类目">
|
||
<el-option v-for="item in selectTypeListC"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-if="selectUploadTypeListD.length" filterable
|
||
clearable size="small"
|
||
v-model="uploadSelectTypeD" placeholder="请选择文件类目">
|
||
<el-option v-for="item in selectUploadTypeListD"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="文件类型">
|
||
<el-select size="small" v-model="uploadFileType" placeholder="请选择文件类型">
|
||
<el-option label="图片" :value="1"></el-option>
|
||
<el-option label="视频" :value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: center">
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action="/index.php/Retail/Component/uploadFile"
|
||
show-file-list
|
||
:accept="uploadFileType==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,
|
||
},
|
||
'userType': {
|
||
type: Number,
|
||
default: 3,
|
||
},
|
||
'uploadFile': {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
'deleteMoreFile': {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
'openType': {
|
||
type: Number,
|
||
default: 2,
|
||
},//1管理 2选择
|
||
},
|
||
data() {
|
||
return {
|
||
can_select_num: 0,
|
||
selectTypeListC: [],
|
||
selectTypeListD: [],
|
||
selectUploadTypeListD: [],
|
||
tempMerchantClass: [],
|
||
tempStoreClass: [],
|
||
showUpload: false,
|
||
searchKey: '',
|
||
selectTypeC: '',
|
||
selectTypeD: '',
|
||
selectUploadTypeD: '',
|
||
fileType: 1,
|
||
uploadSelectTypeC: '',
|
||
uploadSelectTypeD: '',
|
||
uploadFileType: 1,
|
||
bigImgName: '图片名称',
|
||
showBigImage: false,
|
||
bigImg: '',
|
||
bigType: 1,
|
||
page: 1,
|
||
limit: 25,
|
||
currentLen: 0,
|
||
checkedLength: 0,
|
||
bigImgNameTop: '0px',
|
||
allFileList: [],
|
||
isDisabled: true,
|
||
bigImgOriginalName: '',
|
||
allSuccess: '',
|
||
fileList: [],
|
||
isUploading: false,
|
||
loading: false,
|
||
isCheckDelete: false,
|
||
isCheckedAll: false,
|
||
delUrl: {
|
||
3: '/index.php/Retail/MerchantImage/deleteMoreFile',
|
||
4: '/index.php/Retail/StoreImage/deleteMoreFile',
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//批量删除
|
||
toDeleteMore() {
|
||
let allFileList = [...this.allFileList];
|
||
let delData = [];
|
||
let len = allFileList.length;
|
||
for (let i = 0; i < len; i++) {
|
||
if (allFileList[i].checked || this.isCheckedAll) {
|
||
delData.push(allFileList[i].id);
|
||
}
|
||
}
|
||
if (delData.length) {
|
||
this.$confirm('图片删除后将无法恢复，若该图片在使用中将导致显示错误，请谨慎操作！', '确认从图库服务器删除选中图片？', {
|
||
confirmButtonText: '确认删除',
|
||
cancelButtonText: '取消',
|
||
type: 'warning '
|
||
}).then(() => {
|
||
this.$loading({
|
||
lock: true,
|
||
text: '删除中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: this.delUrl[this.userType],
|
||
type: 'post',
|
||
data: {
|
||
id: delData.join(',')
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message.success(res.msg);
|
||
this.isCheckedAll = false;
|
||
this.isCheckDelete = false;
|
||
this.checkedLength = 0;
|
||
this.$loading().close();
|
||
this.refresh();
|
||
} else {
|
||
this.$loading().close();
|
||
this.$message.error(res.msg);
|
||
}
|
||
},
|
||
error: (res) => {
|
||
console.log(res);
|
||
this.$message.error('请求发生错误，请稍后重试');
|
||
this.$loading().close();
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$loading().close();
|
||
});
|
||
} else {
|
||
this.$message.warning('未选择图片');
|
||
}
|
||
},
|
||
//上传文件
|
||
toUpload() {
|
||
// if ((this.tempMerchantClass.length && !this.selectTypeD) || (!this.tempMerchantClass.length && !this.selectTypeC)) {
|
||
// this.$message({
|
||
// message: '请指定详细的上传类目',
|
||
// type: 'warning',
|
||
// });
|
||
// return;
|
||
// }
|
||
if (!this.uploadFileType) {
|
||
this.$message({
|
||
message: '请指定上传文件类型',
|
||
type: 'warning',
|
||
});
|
||
return;
|
||
}
|
||
this.showUpload = true;
|
||
},
|
||
//获取上传文件携带的其他参数
|
||
getUploadPostData() {
|
||
return {
|
||
selectTypeC: this.uploadSelectTypeC,
|
||
selectTypeD: this.uploadSelectTypeD,
|
||
fileType: this.uploadFileType,
|
||
};
|
||
},
|
||
//上传文件前验证文件
|
||
beforeFileUpload(file) {
|
||
// console.log(file);
|
||
if (this.uploadFileType == 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.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;
|
||
} else {
|
||
this.$message.warning('当前存在文件正在上传，不可关闭')
|
||
}
|
||
},
|
||
//全选图片
|
||
checkAll() {
|
||
let allFileList = [...this.allFileList];
|
||
this.isCheckedAll = !this.isCheckedAll;
|
||
if (this.isCheckedAll) {
|
||
this.checkedLength = allFileList.length;
|
||
} else {
|
||
this.checkedLength = 0;
|
||
}
|
||
let len = allFileList.length <= this.limit ? allFileList.length : this.limit;
|
||
|
||
for (let i = 0; i < len; i++) {
|
||
allFileList[i].checked = this.isCheckedAll;
|
||
}
|
||
this.allFileList = [];
|
||
this.allFileList = allFileList;
|
||
},
|
||
//单选图片
|
||
useIt(index) {
|
||
if (this.openType == 1 && !this.isCheckDelete) return;
|
||
let allFileList = [...this.allFileList];
|
||
if (allFileList[index].checked) {
|
||
allFileList[index].checked = false;
|
||
this.checkedLength = this.checkedLength - 1;
|
||
this.isCheckedAll = false;
|
||
} else {
|
||
if (this.checkedLength < this.can_select_num) {
|
||
allFileList[index].checked = true;
|
||
this.checkedLength = this.checkedLength + 1;
|
||
}
|
||
}
|
||
if (this.checkedLength == allFileList.length && this.checkedLength == this.can_select_num) {
|
||
this.isCheckedAll = true;
|
||
}
|
||
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);
|
||
})
|
||
},
|
||
//选择搜索的文件类型
|
||
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 = '';
|
||
}
|
||
this.$nextTick(() => {
|
||
this.refresh()
|
||
})
|
||
},
|
||
//选择上传的的文件类型
|
||
changeUploadSelectTypeC(val) {
|
||
if (val == -1 && this.tempMerchantClass.length) {
|
||
this.selectUploadTypeListD = [];
|
||
this.selectUploadTypeD = '';
|
||
this.selectUploadTypeListD = JSON.parse(JSON.stringify(this.tempMerchantClass));
|
||
} else if (val > 0 && this.tempStoreClass.length) {
|
||
this.selectUploadTypeListD = [];
|
||
this.selectUploadTypeD = '';
|
||
this.selectUploadTypeListD = JSON.parse(JSON.stringify(this.tempStoreClass));
|
||
} else {
|
||
this.selectUploadTypeListD = [];
|
||
this.selectUploadTypeD = '';
|
||
}
|
||
this.$nextTick(() => {
|
||
this.refresh()
|
||
})
|
||
},
|
||
//查看大图
|
||
seeBig(item) {
|
||
this.showBigImage = true;
|
||
this.bigImgName = item.name + '（大小：' + item.size + '）';
|
||
this.bigImgOriginalName = item.original_name;
|
||
this.bigImg = item.path;
|
||
this.bigType = item.type;
|
||
let height = document.body.clientHeight | document.documentElement.clientHeight;
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
// console.log(height, this.$refs.bigFileBox.offsetHeight);
|
||
let _height = (this.$refs.bigFileBox.offsetHeight + 130) / 2;
|
||
if (height > _height) {
|
||
this.bigImgNameTop = 'calc(50vh - ' + _height + 'px)';
|
||
} else {
|
||
this.bigImgNameTop = '0px';
|
||
}
|
||
}, 100)
|
||
})
|
||
},
|
||
//重载列表
|
||
refresh() {
|
||
this.page = 1;
|
||
this.getData();
|
||
},
|
||
//获取列表数据
|
||
getData() {
|
||
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;
|
||
this.currentLen = res.count;
|
||
this.isCheckedAll = false;
|
||
this.can_select_num = this.openType == 1 ? res.list.length : this.can_select_num;
|
||
this.checkedLength = 0;
|
||
this.$nextTick(() => {
|
||
this.loading = false;
|
||
})
|
||
} 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.refresh();
|
||
},
|
||
canSelectNum(n) {
|
||
this.can_select_num = n < this.limit ? n : this.limit
|
||
},
|
||
limit(n) {
|
||
this.openType == 1 && (this.can_select_num = n)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.can_select_num = this.openType == 2 ? this.canSelectNum : this.limit
|
||
},
|
||
created() {
|
||
this.fileType = this.selectFileType;
|
||
this.uploadFileType = this.selectFileType;
|
||
$.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();
|
||
},
|
||
});
|
||
|
||
/**
|
||
* 选择图片的样式
|
||
*/
|
||
Vue.component('choose-image', {
|
||
template: `<div class="el-upload el-upload--picture-card el-upload-list--picture-card"
|
||
:class="'upload-img-'+size+'-auto'"
|
||
@click="selectImage()">
|
||
<i v-if="!imageUrl" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto"
|
||
:src="imageUrl">
|
||
</div>`,
|
||
props: {
|
||
'imageUrl': {
|
||
type: String,
|
||
default: '',
|
||
},//图片地址
|
||
'imageId': {
|
||
type: String,
|
||
default: '',
|
||
},//图片ID
|
||
'size': {
|
||
type: String,
|
||
default: 'small',
|
||
},
|
||
'isDisabled': {
|
||
type: Boolean,
|
||
default: false,
|
||
},//是否禁止修改
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
methods: {
|
||
selectImage() {
|
||
if (!this.isDisabled) this.$emit('choose');
|
||
},
|
||
},
|
||
watch: {
|
||
size(n) {
|
||
if (['small', 'mini', 'micro', ''].indexOf(n) == -1) {
|
||
this.size = 'small';
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
/**
|
||
* 选择一个文件
|
||
*/
|
||
Vue.component('choose-one-file', {
|
||
template: `<div style="display: inline-block;vertical-align: top">
|
||
<choose-image :image-url="fileUrl"
|
||
:image-id="fileId"
|
||
:is-disabled="isDisabled"
|
||
:size="size" @choose="chooseFileBefore"></choose-image>
|
||
<el-dialog title="选择图片" :append-to-body="true" :visible.sync="showSelectFile"
|
||
custom-class="select-image-el-dialog" :top="'40px'" :close-on-click-modal="false">
|
||
<template-select-image :can-select-num="1" :used-image-list="usedFileList"
|
||
:select-file-type="selectFileType" @selectfile="selectFile"></template-select-image>
|
||
</el-dialog>
|
||
</div>`,
|
||
props: {
|
||
'fileUrl': {
|
||
type: String,
|
||
default: '',
|
||
},//图片地址
|
||
'fileId': {
|
||
type: String,
|
||
default: '',
|
||
},//图片ID
|
||
'usedFileList': {
|
||
type: Array,
|
||
default() {
|
||
return []
|
||
}
|
||
},//已选文件列表
|
||
'selectFileType': {
|
||
type: Number,
|
||
default: 1
|
||
},//选择文件类型 1图片 2视频
|
||
'size': {
|
||
type: String,
|
||
default: 'small',
|
||
},
|
||
'isDisabled': {
|
||
type: Boolean,
|
||
default: false,
|
||
},//是否禁止修改
|
||
},
|
||
data() {
|
||
return {
|
||
showSelectFile: false,
|
||
};
|
||
},
|
||
methods: {
|
||
chooseFileBefore() {
|
||
if (!this.isDisabled) this.showSelectFile = true;
|
||
},
|
||
selectFile(data) {
|
||
this.$emit('update:fileUrl', data[0] ? data[0].path : '');
|
||
this.$emit('update:fileId', data[0] ? data[0].id : '');
|
||
this.$emit('change', data);
|
||
this.showSelectFile = false;
|
||
},
|
||
},
|
||
watch: {
|
||
size(n) {
|
||
if (['small', 'mini', 'micro', ''].indexOf(n) == -1) {
|
||
this.size = 'small';
|
||
}
|
||
}
|
||
}
|
||
}) |