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.
389 lines
16 KiB
389 lines
16 KiB
1 year ago
|
<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="publicReply">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入办理情况"
|
||
|
|
v-model.trim="formData.publicReply">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="上传录音" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="luyin">
|
||
|
|
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
|
||
|
|
:data="{ customerId: customerId }" :show-file-list="true" :on-success="handleAudioSuccess"
|
||
|
|
:on-remove="handleAudioRemove" :before-upload="beforeAudioUpload">
|
||
|
|
<i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
|
||
|
|
<img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
|
||
|
|
</el-upload>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="internalFile">
|
||
|
|
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
|
||
|
|
:data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
|
||
|
|
:on-remove="handleImgRemove" :before-upload="beforeImgUpload">
|
||
|
|
<i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
|
||
|
|
<img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
|
||
|
|
</el-upload>
|
||
|
|
</el-form-item>
|
||
|
|
<el-divider></el-divider>
|
||
|
|
<div class="flex">
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="答复人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入答复人" v-model.trim="title">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="答复电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入答复电话" v-model.trim="formData.title">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="联系人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入联系人" v-model.trim="formData.title">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="联系电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入联系电话" v-model.trim="formData.title">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label-width="118px" label="填报不合规诉求" >
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" clearable class="item_width_4">
|
||
|
|
<el-option v-for="item in binaryOptionList" :key="item.value" :label="item.label" :value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item" v-if="formData.localResidenceFlag === 1">
|
||
|
|
<el-form-item label-width="118px" label="不合规诉求类型" >
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" 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>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="办理真实度" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" 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="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="input" class="item_width_4" :rows="2" placeholder="请输入回访人" v-model.trim="title">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="回访时间" prop="timeLimit" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
|
||
|
|
style="display: block">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-date-picker v-model.trim="formData.timeLimit" 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">
|
||
|
|
<el-form-item label="当事人联系不上" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" 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="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" 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="">
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" 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="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" clearable class="item_width_4">
|
||
|
|
<el-option v-for="item in satisfactionType" :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="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-select v-model.trim="formData.localResidenceFlag" 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="internalRemark">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入回访意见"
|
||
|
|
v-model.trim="formData.internalRemark">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-divider></el-divider>
|
||
|
|
<div :class="['process-title', { 'process-title-vis': source === 'visiual' },]">
|
||
|
|
<img src="../../../../../assets/images/index/title-icon-chuli.png" width="30px" height="30px" alt="">
|
||
|
|
审核
|
||
|
|
</div>
|
||
|
|
<div class="flex">
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="审核结果" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="input" class="item_width_4" :rows="2" placeholder="答复人" v-model.trim="title">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
|
||
|
|
prop="internalFile">
|
||
|
|
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
|
||
|
|
:data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
|
||
|
|
:on-remove="handleImgRemove" :before-upload="beforeImgUpload">
|
||
|
|
<i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
|
||
|
|
<img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
|
||
|
|
</el-upload>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div :span="24">
|
||
|
|
<el-form-item label="审核结果说明" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
|
||
|
|
prop="internalRemark">
|
||
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
||
|
|
<el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入审核结果说明"
|
||
|
|
v-model.trim="formData.internalRemark">
|
||
|
|
</el-input>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
||
|
|
import { requestPost } from "@/js/dai/request";
|
||
|
|
import { binaryOptionList,nonComplianceType,satisfactionType,noSatisfactionType} from "@/js/columns/constants";
|
||
|
|
let loading; // 加载动画
|
||
|
|
function iniFmData() {
|
||
|
|
return {
|
||
|
|
operationType: "1", //处理方式[0:已回复 1:已转项目 2:已转需求]
|
||
|
|
gridId: "", //
|
||
|
|
assistanceUnitIndex: "",
|
||
|
|
assistanceUnitType: "", // 协办单位类型，1社区自组织，2联建单位
|
||
|
|
staffList: [], // 勾选人员信息
|
||
|
|
categoryList: [], //
|
||
|
|
internalFile: [],
|
||
|
|
luyin: [],
|
||
|
|
title: "",
|
||
|
|
timeLimit: "",
|
||
|
|
eventId: "",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
binaryOptionList,
|
||
|
|
nonComplianceType,
|
||
|
|
satisfactionType,
|
||
|
|
noSatisfactionType,
|
||
|
|
customerId: localStorage.getItem("customerId"),
|
||
|
|
assistanceUnitList: [], //协办单位数组
|
||
|
|
formData: iniFmData(),
|
||
|
|
okflag: false,
|
||
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
|
||
|
|
eventDetailCopy: {},
|
||
|
|
selectList:[{label:'属实',value:1},{label:'不属实',value:0}],
|
||
|
|
contactList:[{label:'已联系',value:1},{label:'未联系',value:0}],
|
||
|
|
contactFailureList:[{label:'已接通',value:1},{label:'未接通',value:0}],
|
||
|
|
coordinateList:[{label:'配合',value:1},{label:'未配合',value:0}],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
computed: {
|
||
|
|
dataRule() {
|
||
|
|
return {
|
||
|
|
categoryList: [
|
||
|
|
{ required: true, message: "事件分类不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
eventId: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
eventDetailData: {
|
||
|
|
type: Object,
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
source: {
|
||
|
|
//展示来源：manage 管理平台 visiual 可视化平台
|
||
|
|
type: String,
|
||
|
|
default: "manage",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
created() { },
|
||
|
|
|
||
|
|
async mounted() {
|
||
|
|
const { user } = this.$store.state;
|
||
|
|
this.agencyId = user.agencyId;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleTagChange(val) {
|
||
|
|
console.log(val);
|
||
|
|
},
|
||
|
|
async getProjectInfo() {
|
||
|
|
this.okflag = false;
|
||
|
|
this.$refs["ref_form"].validate((valid, messageObj) => {
|
||
|
|
if (!valid) {
|
||
|
|
app.util.validateRule(messageObj);
|
||
|
|
} else {
|
||
|
|
this.okflag = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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);
|
||
|
|
this.formData.yinpin.push({
|
||
|
|
format: file.name.split(".").pop(),
|
||
|
|
name: file.name,
|
||
|
|
size: file.size,
|
||
|
|
type: file.raw.type,
|
||
|
|
url: res.data.url,
|
||
|
|
});
|
||
|
|
console.log(this.formData.internalFile);
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handleAudioRemove(file) {
|
||
|
|
let index = this.formData.yinpin.findIndex(
|
||
|
|
(item) => item.url == file.response.data.url
|
||
|
|
);
|
||
|
|
this.formData.internalFile.splice(index, 1);
|
||
|
|
console.log(this.formData.internalFile);
|
||
|
|
},
|
||
|
|
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);
|
||
|
|
this.formData.internalFile.push({
|
||
|
|
format: file.name.split(".").pop(),
|
||
|
|
name: file.name,
|
||
|
|
size: file.size,
|
||
|
|
type: file.raw.type,
|
||
|
|
url: res.data.url,
|
||
|
|
});
|
||
|
|
console.log(this.formData.internalFile);
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handleImgRemove(file) {
|
||
|
|
let index = this.formData.internalFile.findIndex(
|
||
|
|
(item) => item.url == file.response.data.url
|
||
|
|
);
|
||
|
|
this.formData.internalFile.splice(index, 1);
|
||
|
|
console.log(this.formData.internalFile);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 开启加载动画
|
||
|
|
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>
|