epmet pc工作端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

494 lines
19 KiB

<template>
<div class="">
<el-form ref="ref_form" :inline="false" :model="formData" :rules="dataRule" label-width="118px">
<el-form-item label="办理情况" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="content">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入办理情况"
v-model.trim="formData.content" :disabled="pageType === 'check'">
</el-input>
</div>
</el-form-item>
1 year ago
<el-form-item label="上传录音" label-width="118px" :class="{ 'form-item': source === 'visiual' }">
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr" accept=".mp3"
:data="{ customerId: customerId }" :show-file-list="true" :on-success="handleAudioSuccess"
:on-remove="handleAudioRemove" :before-upload="beforeAudioUpload" :file-list="audioList">
1 year ago
<el-button type="primary" :disabled="pageType === 'check'">上传音频<i
class="el-icon-upload el-icon--right"></i></el-button>
</el-upload>
</el-form-item>
<el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="files">
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
1 year ago
accept=".jpg,.png,.jpeg"
:data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
:on-remove="handleImgRemove" :before-upload="beforeImgUpload" :file-list="imgList">
1 year ago
<el-button type="primary" :disabled="pageType === 'check'">上传图片<i
class="el-icon-upload el-icon--right"></i></el-button>
</el-upload>
</el-form-item>
<el-divider></el-divider>
<div class="flex">
<div class="item">
1 year ago
<el-form-item label="答复人" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="respondent">
<div :class="{ 'visiual-form': source === 'visiual' }">
1 year ago
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入"
v-model.trim="formData.respondent">
</el-input>
</div>
</el-form-item>
</div>
<div class="item">
1 year ago
<el-form-item label="答复电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="respondentPhone">
<div :class="{ 'visiual-form': source === 'visiual' }">
1 year ago
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入"
v-model.trim="formData.respondentPhone">
</el-input>
</div>
</el-form-item>
</div>
<div class="item">
<el-form-item label="联系人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="contacts">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入" v-model.trim="formData.contacts">
</el-input>
</div>
</el-form-item>
</div>
<div class="item">
1 year ago
<el-form-item label="联系电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="contactsPhone">
<div :class="{ 'visiual-form': source === 'visiual' }">
1 year ago
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入"
v-model.trim="formData.contactsPhone">
</el-input>
</div>
</el-form-item>
</div>
<div class="item">
<el-form-item label-width="118px" label="填报不合规诉求">
<el-select v-model.trim="formData.irregularity" clearable class="item_width_4">
1 year ago
<el-option v-for="item in binaryOptionListReverse" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
1 year ago
<!-- <div class="item" v-if="formData.irregularity === 0">
<el-form-item label-width="118px" label="不合规诉求类型">
<el-select v-model.trim="formData.irregularity" clearable class="item_width_4">
<el-option v-for="item in nonComplianceType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
1 year ago
</div> -->
<div class="item">
<el-form-item label="办理真实度" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="verified">
<el-select v-model.trim="formData.verified" clearable class="item_width_4">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<el-divider></el-divider>
<div class="flex">
<div class="item">
<el-form-item label="回访人" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="returnVisitor">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入"
v-model.trim="formData.returnVisitor">
</el-input>
</div>
</el-form-item>
</div>
<div class="item">
<el-form-item label="回访时间" prop="returnTime" label-width="118px"
:class="{ 'form-item': source === 'visiual' }" style="display: block">
<div :class="{ 'visiual-form': source === 'visiual' }">
1 year ago
<el-date-picker v-model.trim="formData.returnTime" class="cell-width-1" type="datetime" placeholder="请选择"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
</el-form-item>
</div>
<div class="item">
1 year ago
<el-form-item label="联系当事人" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="loseContact">
<el-select v-model.trim="formData.loseContact" clearable class="item_width_4">
<el-option v-for="item in contactList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="item">
<el-form-item label="未接通电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="putThrough">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-select v-model.trim="formData.putThrough" clearable class="item_width_4">
<el-option v-for="item in contactFailureList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="item">
<el-form-item label="是否配合回访" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="cooperate">
<el-select v-model.trim="formData.cooperate" clearable class="item_width_4">
<el-option v-for="item in coordinateList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="item">
<el-form-item label="服务满意度" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="satisfaction">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-select v-model.trim="formData.satisfaction" clearable class="item_width_4">
<el-option v-for="item in satisfactionType" :key="item.value" :label="item.label" :value="item.value"
@click.native="handelChangeSatisfaction(item.value)">
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="item">
1 year ago
<el-form-item label="不满意原因" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="dissatisfyReason">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-select v-model.trim="formData.dissatisfyReason" clearable class="item_width_4">
<el-option v-for="item in noSatisfactionType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="item">
<el-form-item label="回访意见" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="visitComments">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入"
v-model.trim="formData.visitComments">
</el-input>
</div>
</el-form-item>
</div>
</div>
<el-divider></el-divider>
1 year ago
<section v-if="pageType === 'check'">
<div :class="['process-title', { 'process-title-vis': source === 'visiual' },]">
<img src="../../../../../assets/images/index/title-icon-chuli.png" width="30px" height="30px" alt="">
审核
</div>
1 year ago
<div class="flex">
<div class="item">
<el-form-item label="审核结果" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="examine">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-select v-model.trim="formData.examine" clearable class="item_width_4">
<el-option v-for="item in examineList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="item">
<el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="files">
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
:data="{ customerId: customerId }" :show-file-list="true" :on-success="handleExamineImgSuccess"
:on-remove="handleExamineImgRemove" :before-upload="beforeImgUpload" accept=".jpg,.png,.jpeg">
<el-button type="primary" >上传图片<i
class="el-icon-upload el-icon--right"></i></el-button>
1 year ago
</el-upload>
</el-form-item>
</div>
<div :span="24">
<el-form-item label="审核结果说明" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
prop="examineContent">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入审核结果说明"
v-model.trim="formData.examineContent">
</el-input>
</div>
</el-form-item>
</div>
</div>
1 year ago
</section>
</el-form>
</div>
</template>
<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
1 year ago
import { binaryOptionList, nonComplianceType, satisfactionType, noSatisfactionType, binaryOptionListReverse } from "@/js/columns/constants";
let loading; // 加载动画
function iniFmData() {
return {
operationType: "11", //处理方式[11已办结,10办理中,9联系当事人]
content: '',//办理情况
files: [],//附件
1 year ago
respondent: '',//答复人
respondentPhone: '',//答复人电话
contacts: '',//联系人
contactsPhone: '',//联系人电话
irregularity: '',//填报不合规诉求 0:是 1:否
//不合规诉求类型
verified: '', //办理真实度是否属实 0:属实 1:不属实
returnVisitor: '',//回访人
returnTime: '',//回访时间
1 year ago
loseContact: '',//联系当事人0:已联系 1:未取得联系
1 year ago
putThrough: '',//接通电话 0:接通 1:未接通
cooperate: '',//是否配合回访0:配合 1:不配合
satisfaction: '',//0:满意 1:非常满意 2:不满意
dissatisfyReason: '',//不满意原因
visitComments: '',//回访意见
1 year ago
examine: null,//审核结果
examineContent: ''//审核说明
};
}
export default {
data() {
return {
binaryOptionList,
nonComplianceType,
satisfactionType,
noSatisfactionType,
binaryOptionListReverse,
customerId: localStorage.getItem("customerId"),
assistanceUnitList: [], //协办单位数组
formData: iniFmData(),
okflag: false,
1 year ago
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
eventDetailCopy: {},
selectList: [{ label: '属实', value: 0 }, { label: '不属实', value: 1 }],
contactList: [{ label: '已联系', value: 0 }, { label: '未联系', value: 1 }],
contactFailureList: [{ label: '已接通', value: 1 }, { label: '未接通', value: 0 }],
coordinateList: [{ label: '配合', value: 0 }, { label: '未配合', value: 1 }],
examineList: [{ label: '合格', value: 0 }, { label: '不合格', value: 1 }],
dataRule: {
content: [
{ required: true, message: "办理情况不能为空", trigger: "blur" },
],
verified: [
{ required: true, message: "办理真实度不能为空", trigger: "blur" },
],
returnVisitor: [
{ required: true, message: "回访人不能为空", trigger: "blur" },
],
returnTime: [
{ required: true, message: "回访时间不能为空", trigger: "blur" },
],
loseContact: [
1 year ago
{ required: true, message: "请选择联系当事人", trigger: "blur" },
],
putThrough: [
{ required: true, message: "请选择未接通电话", trigger: "blur" },
],
visitComments: [
{ required: true, message: "回访意见不能为空", trigger: "blur" },
],
cooperate: [
{ required: true, message: "请选择是否配合回访", trigger: "blur" },
],
satisfaction: [
1 year ago
{ required: true, message: "请选择服务满意度", trigger: "blur" },
],
1 year ago
},
imgList: [],
audioList: [],
examineImgList:[]
};
},
components: {},
computed: {
},
props: {
eventId: {
type: String,
default: "",
},
eventDetailData: {
type: Object,
default() {
return {};
},
},
pageType: {
type: String,
default: "",
},
source: {
//展示来源:manage 管理平台 visiual 可视化平台
type: String,
default: "manage",
},
replayDetailObj:{
type: Object,
default() {
return {};
},
}
},
watch: {
"replayDetailObj": function (newVal,oldVal) {
console.log(newVal,'bianle');
if(this.pageType === 'check'){
this.formData = newVal;
if(this.formData.internalFile){
this.imgList = this.formData.internalFile.filter(item=>item.type==='image')
this.audioList = this.formData.internalFile.filter(item=>item.type==='voice')
}
}
},
},
created() { },
mounted() {
const { user } = this.$store.state;
this.agencyId = user.agencyId;
},
methods: {
handelChangeSatisfaction(val) {
console.log(val);
if (val === 2) {
this.$set(this.dataRule, 'dissatisfyReason', [{ required: true, message: "请选择不满意原因", trigger: "blur" }]);
} else {
this.$delete(this.dataRule, 'dissatisfyReason');
}
},
1 year ago
beforeAudioUpload(file) {
const isLt1M = file.size / 1024 / 1024 < 10;
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 10MB!");
}
return isLt1M;
},
handleAudioSuccess(res, file, fileList) {
console.log("res.data.url", file);
if (res.code === 0 && res.msg === "success") {
console.log("res.data.url", res.data.url);
1 year ago
this.audioList.push({
format: file.name.split(".").pop(),
name: file.name,
size: file.size,
type: file.raw.type,
url: res.data.url,
});
console.log(this.formData.files);
} else {
this.$message.error(res.msg);
}
},
handleAudioRemove(file) {
1 year ago
let index = this.audioList.findIndex(
(item) => item.url == file.response.data.url
);
1 year ago
this.audioList.splice(index, 1);
console.log(this.audioList);
},
beforeImgUpload(file) {
const isLt1M = file.size / 1024 / 1024 < 10;
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 10MB!");
}
return isLt1M;
},
handleImgSuccess(res, file, fileList) {
console.log("res.data.url", file);
if (res.code === 0 && res.msg === "success") {
console.log("res.data.url", res.data.url);
1 year ago
this.imgList.push({
format: file.name.split(".").pop(),
name: file.name,
size: file.size,
type: file.raw.type,
url: res.data.url,
});
console.log(this.formData.files);
} else {
this.$message.error(res.msg);
}
},
handleExamineImgRemove(file) {
console.log(file);
let index = this.examineImgList.findIndex(
(item) => item.url == file.response.data.url
);
this.examineImgList.splice(index, 1);
console.log(this.examineImgList);
},
handleExamineImgSuccess(res, file, fileList) {
console.log("res.data.url", file);
if (res.code === 0 && res.msg === "success") {
console.log("res.data.url", res.data.url);
this.examineImgList.push({
format: file.name.split(".").pop(),
name: file.name,
size: file.size,
type: file.raw.type,
url: res.data.url,
});
console.log(this.formData.files);
} else {
this.$message.error(res.msg);
}
},
handleImgRemove(file) {
1 year ago
let index = this.imgList.findIndex(
(item) => item.url == file.response.data.url
);
1 year ago
this.imgList.splice(index, 1);
console.log(this.imgList);
},
async getReplayInfo() {
this.okflag = false;
this.$refs["ref_form"].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj);
} else {
this.okflag = true;
}
});
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字
background: "rgba(0,0,0,.7)", // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close();
}
},
},
};
</script>
<style lang="scss" src="@/assets/scss/modules/shequzhili/project-info.scss" scoped></style>
<style lang='scss' scoped>
@import "@/assets/scss/modules/visual/a_customize.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss";
</style>
<style scoped>
.el-dialog__body {
padding: 0 10px 20px !important;
}
</style>