<template>
|
<div>
|
<el-dialog title=""
|
@close="close"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal='false'
|
append-to-body
|
center
|
width="850px">
|
<div class="upload-care">
|
<p data-v-41d76e61=""
|
class="section-title">影像配置</p>
|
<div class="image-data">
|
<!-- 图片上传 -->
|
<p style="margin-bottom: 10px;">上传家电包影像</p>
|
<el-upload action=""
|
list-type="picture-card"
|
multiple
|
class="img-upload"
|
:disabled="!powerControl.addControl"
|
:headers="uploadHeader"
|
:http-request="function (file){return handleUpload(file, 1)}"
|
:before-upload="function (file){return beforeUpload(file, 1)}"
|
:on-remove="function (file, fileList){return handleRemove(file, fileList, 1)}"
|
:on-preview="function (file){return handlePreview(file, 1)}"
|
:file-list="fileList1">
|
<i class="el-icon-plus"></i>
|
<!-- <div slot="file"
|
slot-scope="{file, fileList}">
|
<img class="el-upload-list__item-thumbnail"
|
:src="file.url"
|
alt="">
|
<span class="el-upload-list__item-actions">
|
<span class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)">
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span class="el-upload-list__item-delete"
|
@click="handleRemove(file, fileList1, 1)">
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</div> -->
|
</el-upload>
|
</div>
|
</div>
|
<div>
|
<p data-v-41d76e61=""
|
class="section-title">协议配置</p>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="inp-box w5">
|
<label class="title">合同名称</label>
|
<div class="edit">
|
<el-input v-model="contactName"
|
placeholder="请输入"
|
:disabled="!powerControl.addControl"></el-input>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="inp-box">
|
<label class="title">公司签章机构</label>
|
<div class="edit">
|
<el-select v-model="signOrg" filterable placeholder="请选择" :disabled="!powerControl.addControl">
|
<el-option v-for="(item, index) in signOrgOptions" :key="index" :label="item.itemname" :value="item.itemno">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div class="inp-box">
|
<label class="title">模板/样例文件</label>
|
<div class="edit">
|
<el-upload class="upload-demo"
|
action=""
|
list-type="text"
|
:disabled="fileList2.length !=0"
|
:file-list="fileList2"
|
:headers="uploadHeader"
|
:http-request="function (file){return handleUpload(file, 2)}"
|
:before-upload="function (file){return beforeUpload(file, 2)}"
|
:on-remove="function (file, fileList){return handleRemove(file, fileList, 2)}"
|
:on-preview="function (file){return handlePreview(file, 2)}">
|
<el-button size="small"
|
type="primary"
|
v-if="powerControl.addControl"
|
:disabled="fileList2.length !=0">点击上传</el-button>
|
<div slot="tip"
|
class="el-upload__tip">只能上传word文件</div>
|
<div slot="file"
|
slot-scope="{file}">
|
<ul class="el-upload-list">
|
<li class="el-upload-list__item is-success">
|
<a class="el-upload-list__item-name"
|
@click="handlePreview(file, 2)"><i class="el-icon-document"></i>{{file.name}}
|
</a>
|
<label class="el-upload-list__item-status-label" v-if="powerControl.addControl"><i class="el-icon-upload-success el-icon-circle-check"></i> <i class="el-icon-delete"
|
@click="handleRemove(file, [], 2)"></i></label>
|
</li>
|
</ul>
|
</div>
|
</el-upload>
|
</div>
|
</div>
|
</div>
|
<span slot="footer"
|
class="dialog-footer">
|
<el-button class="comm-button"
|
@click="close()">{{powerControl.addControl? '取消' : '关闭'}}</el-button>
|
<el-button type="primary"
|
class="comm-button"
|
v-if="powerControl.addControl"
|
@click="handleSaveSubmit()">确定</el-button>
|
|
</span>
|
</el-dialog>
|
<!-- 预览 -->
|
<el-dialog :visible.sync="centerDialogVisible"
|
@close="centerDialogVisible = false"
|
width="50%"
|
center>
|
<img :src="dialogImageUrl"
|
class="avatar">
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { ossUpload } from '@comprehensive/serve/public';
|
import {
|
qryHouseholdBagServiceConfigImg,
|
saveHouseholdBagServiceConfigImg,
|
getSignOrgList
|
} from '@/api/comprehensiveTransaction';
|
export default {
|
props: ['visible', 'serviceInfo', 'powerControl'],
|
data() {
|
return {
|
dialogImageUrl: '',
|
centerDialogVisible: false,
|
uploadHeader: {
|
'Content-Type': 'multipart/form-data; boundary=ReaquestHeader',
|
},
|
serialno: '',
|
state: false, // 图片请求是否请求回来的状态
|
uploadIndex: 0,
|
staticGoodsPage: [],
|
isUpload: false,
|
contactName: null,
|
signOrg: null,
|
fileList1: [],
|
fileList2: [],
|
signOrgOptions: [],
|
};
|
},
|
computed: {
|
dialogVisible: {
|
get() {
|
return this.visible;
|
},
|
set() {},
|
},
|
},
|
watch: {
|
dialogVisible(newV) {
|
if (newV) {
|
this.getForm();
|
this.getSignOrgList();
|
} else {
|
this.contactName = null;
|
this.signOrg = null;
|
this.fileList1 = [];
|
this.fileList2 = [];
|
this.centerDialogVisible = false;
|
}
|
},
|
},
|
methods: {
|
// 初始化图片列表
|
getForm() {
|
let params = {
|
serialno: this.serviceInfo.serialno,
|
};
|
qryHouseholdBagServiceConfigImg(params).then((res) => {
|
if (res.code == '00') {
|
let items1 = res.result.staticGoodsPage;
|
let items2 = res.result.contactTemplate;
|
if (items1) {
|
items1 = items1.split(',');
|
let arr = [];
|
let fileList = [];
|
items1.map((item) => {
|
const imgUrl = `${process.env.VUE_APP_API_HOST}server/oss?ossKey=${item}`;
|
arr.push(imgUrl);
|
fileList.push({ name: item, url: imgUrl });
|
});
|
this.fileList1 = fileList;
|
}
|
if (items2) {
|
items2 = items2.split('|');
|
this.contactName = items2[0];
|
this.signOrg = items2[2];
|
const imgUrl = `${process.env.VUE_APP_API_HOST}server/oss?ossKey=${items2[1]}`;
|
this.fileList2.push({ name: items2[1], url: imgUrl });
|
}
|
}
|
this.state = true;
|
});
|
},
|
async getSignOrgList() {
|
const res = await getSignOrgList()
|
if(res.code == '00') {
|
this.signOrgOptions = res.result;
|
}
|
},
|
beforeUpload(file, type) {
|
const isImage = file.type.indexOf('image') != -1;
|
const isWord = file.type.indexOf('document') != -1;
|
|
if (!isImage && type == 1) {
|
this.$message.error('只能上传图片格式png、jpg、gif!');
|
return false;
|
}
|
if (!isWord && type == 2) {
|
this.$message.error('只能上传Word文件!');
|
return false;
|
}
|
if (type == 2 && this.fileList2.length) {
|
this.$message.error('只能上传一份文件，请先删除！');
|
return false;
|
}
|
},
|
// 上传影像
|
handleUpload(files, type) {
|
const file = files.file;
|
let formData = new FormData();
|
formData.append('file', file);
|
ossUpload(formData).then((res) => {
|
if (res.code === '00') {
|
if (type == 1) {
|
const imgUrl = `${process.env.VUE_APP_API_HOST}server/oss?ossKey=${res.result.filekey}`;
|
this.fileList1.push({ name: res.result.filekey, url: imgUrl });
|
}
|
if (type == 2) {
|
const imgUrl = `${process.env.VUE_APP_API_HOST}server/oss?ossKey=${res.result.filekey}`;
|
this.fileList2.push({ name: res.result.filekey, url: imgUrl });
|
}
|
}
|
});
|
},
|
handleSaveSubmit() {
|
const { fileList1, fileList2, contactName, signOrg } = this;
|
console.log(typeof contactName, contactName)
|
if (!contactName) {
|
this.$message.error('请输入合同名称');
|
return false;
|
}
|
if (!signOrg) {
|
this.$message.error('请选择公司签章机构');
|
return false;
|
}
|
if (!fileList1.length) {
|
this.$message.error('家电包影像必须上传');
|
return false;
|
}
|
if (!fileList2.length) {
|
this.$message.error('模板/样例文件必须上传');
|
return false;
|
}
|
let staticGoodsPage = [];
|
fileList1.map((item) => {
|
staticGoodsPage.push(item.name);
|
});
|
const contactTemplate = `${contactName}|${fileList2[0].name}|${signOrg}`;
|
saveHouseholdBagServiceConfigImg({
|
serialno: this.serviceInfo.serialno,
|
staticGoodsPage: staticGoodsPage.toString(), // 影像资料
|
contactTemplate, // 合同资料
|
}).then((res) => {
|
if (res.code === '00') {
|
this.close();
|
} else {
|
this.$message.error(res.msg);
|
}
|
});
|
},
|
close() {
|
this.$emit('close');
|
},
|
handleRemove(file, fileList, type) {
|
if (type == 1) {
|
this.fileList1 = fileList;
|
} else {
|
this.fileList2 = fileList;
|
}
|
},
|
handlePreview(file, type) {
|
switch (type) {
|
case 1:
|
this.dialogImageUrl = file.url;
|
this.centerDialogVisible = true;
|
break;
|
case 2:
|
window.open(file.url, '_blank');
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
|
<style lang="postcss" scoped>
|
>>>.is-disabled+.el-upload{
|
display: none;
|
}
|
.el-dialog {
|
width: auto;
|
max-width: calc(100% - 180px);
|
min-width: 500px;
|
max-height: 100%;
|
overflow: hidden;
|
margin: 0 !important;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
& .el-upload-list--picture-card {
|
& .el-upload-list__item {
|
width: 100px;
|
height: 100px;
|
}
|
}
|
& .el-icon-delete {
|
cursor: pointer;
|
}
|
& .image-data {
|
& .box-card {
|
& .images {
|
width: 80px;
|
height: 80px;
|
& img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
& .el-upload-list {
|
margin: 0;
|
display: inline;
|
vertical-align: top;
|
& img {
|
width: 100%;
|
}
|
}
|
& .avatar {
|
width: 100%;
|
}
|
& .m-20 {
|
margin: 20px 0;
|
}
|
& .inp-box {
|
display: flex;
|
margin-top: 20px;
|
& .title {
|
width: 120px;
|
line-height: 40px;
|
}
|
& .edit {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
