327 lines
12 KiB
Vue
327 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog :title="visiblemediatRecordObj == null ?'新增调解记录':'编辑调解记录'" :visible="true" class="kk-dialog-class"
|
||
:modal="false" width="880px" append-to-body :close-on-click-modal="false"
|
||
@close="handleClose" v-drag>
|
||
<div class="dialog-content dialog-mr-batch">
|
||
<div class="p-16">
|
||
<div class="flex-column">
|
||
<span class="f16 f-weight500" v-if="mrObj.linkedType == 2">沟通类型</span>
|
||
<div class="mt-8" v-if="mrObj.linkedType == 2">
|
||
<el-radio-group v-model="mrObj.linkedWay">
|
||
<el-radio :label="1">电话</el-radio>
|
||
<el-radio :label="2">视频</el-radio>
|
||
<el-radio :label="3">微信</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<span v-if="mrObj.linkedType == 2" class="f16 f-weight500 mt-8">沟通时间</span>
|
||
<div v-if="mrObj.linkedType == 2" class="mt-8 flex-row">
|
||
<el-date-picker size="small" style="width: 200px;"
|
||
:clearable="false"
|
||
v-model="mrObj.linkedTime"
|
||
type="datetime"
|
||
placeholder="选择沟通时间"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd HH:mm:ss">
|
||
</el-date-picker>
|
||
<!-- <el-date-picker
|
||
v-model="value1"
|
||
type="datetime"
|
||
placeholder="选择日期时间">
|
||
</el-date-picker> -->
|
||
|
||
</div>
|
||
<span v-if="mrObj.linkedWay == 1" class="f16 f-weight500 mt-8">电话情况</span>
|
||
<div v-if="mrObj.linkedWay == 1" class="mt-8">
|
||
<el-radio-group v-model="mrObj.linkedSituation">
|
||
<el-radio :label="0">已接</el-radio>
|
||
<el-radio :label="1">未接</el-radio>
|
||
<el-radio :label="2">拒接</el-radio>
|
||
<el-radio :label="3">关机</el-radio>
|
||
<el-radio :label="8">空号</el-radio>
|
||
<el-radio :label="4">停机</el-radio>
|
||
<el-radio :label="9">设置</el-radio>
|
||
<el-radio :label="10">正在通话中</el-radio>
|
||
<el-radio :label="5">暂时无法接通</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<span v-if="mrObj.linkedType == 2" class="f16 f-weight500 mt-8">沟通对象</span>
|
||
<div v-if="mrObj.linkedType == 2" class="mt-8">
|
||
<el-select size="small" v-model="mrObj.linkedPerson" multiple :multiple-limit="(mrObj.linkedWay==1||mrObj.linkedWay==3) ? 1:6" placeholder="请选择沟通对象" class="width100">
|
||
<el-option
|
||
v-for="item in PersonData"
|
||
:key="item.id"
|
||
:label="item.name+'-'+item.phone"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<span class="f16 f-weight500 mt-8">沟通情况</span>
|
||
<div class="mt-8">
|
||
<el-radio-group v-model="mrObj.communicationSituation">
|
||
<el-radio v-for="(item,index) in CommunicationOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="mt-8">
|
||
<el-input type="textarea" :rows="2"
|
||
placeholder="请输入内容" v-model="mrObj.communicationRemarks" maxlength="100">
|
||
</el-input>
|
||
</div>
|
||
<span class="f16 f-weight500 mt-8">调解进度</span>
|
||
<div class="mt-8 mr—schedule">
|
||
<span :class="mrObj.mediateStatus == item.value ? 'active':''" v-for="(item,index) in materialTypeOptions" :key="index" @click="mrObj.mediateStatus = item.value">{{item.label}}</span>
|
||
</div>
|
||
<span class="f16 f-weight500 mt-8">下次跟进时间</span>
|
||
<div class="mt-8 flex-row">
|
||
<el-radio-group v-model="mrObj.timeType" class="pt-8 mr-16" @change="daysAfterDate" >
|
||
<el-radio :label="0">自定义</el-radio>
|
||
<el-radio :label="1">1天后</el-radio>
|
||
<el-radio :label="2">2天后</el-radio>
|
||
<el-radio :label="3">3天后</el-radio>
|
||
<el-radio :label="5">5天后</el-radio>
|
||
<el-radio :label="7">7天后</el-radio>
|
||
</el-radio-group>
|
||
<!-- <el-date-picker v-if="this.mrObj.timeType == 0" size="small" style="width: 150px;"
|
||
v-model="mrObj.nextFollowDate"
|
||
type="date"
|
||
placeholder="选择下次跟进时间"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd">
|
||
</el-date-picker> -->
|
||
<el-input-number v-if="this.mrObj.timeType == 0" v-model="mrObj.nextFollowDate" controls-position="right" size="small" :min="1" :max="100"></el-input-number>
|
||
</div>
|
||
<span class="f16 f-weight500 mt-8">录音或录像文件</span>
|
||
<div class="mt-8">
|
||
<upload-file :file-list="fileList" :max-count="5"
|
||
:show-file-name="false"
|
||
uploadName=""
|
||
accept=".mp3,.mp4,.jpg,.jpeg,.png"
|
||
:span="6"
|
||
:fileSize="50"
|
||
@handleUploadFile="handleUploadFile">
|
||
</upload-file>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleClose()">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmit()">完成</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
import contactPerson from "@/services/contactPerson";
|
||
export default {
|
||
components: {
|
||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||
},
|
||
props: {
|
||
visiblemediatRecordObj: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
},
|
||
},
|
||
caseId: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
CommunicationOptions:[{ label: '继续沟通', value: 4 },{ label: '一次性全部回款', value: 1 },{ label: '全部分期', value: 2 },
|
||
{ label: '部分还款', value: 3 },{ label: '拒绝沟通', value: 5 }],
|
||
materialTypeOptions: this.$util.getMediationprogress(),
|
||
mrObj: {
|
||
id:'',
|
||
timeType:0,
|
||
caseId:'',//案件id
|
||
linkedWay:1,//联系方式：1：电话 2：视频 3：微信
|
||
linkedType:2,//联系类型：1：线上 2：线下
|
||
linkedPerson:[],//联系人
|
||
linkedSituation:0,//联系情况
|
||
communicationSituation:4,//沟通情况
|
||
communicationRemarks:'',//沟通备注
|
||
mediateStatus:'',//调解状态
|
||
linkedTime:'',//联系时间
|
||
linkedDuration:'',//时长
|
||
callWay:'',//拨打方式 0 呼入 1 呼出
|
||
callStartTime:'',//拨打开始时间
|
||
callEndTime:'',//拨打结束时间
|
||
nextFollowDate:1,//下次跟进时间
|
||
files:[],//文件
|
||
},
|
||
fileList: [],
|
||
PersonData:[],
|
||
};
|
||
},
|
||
mounted() {
|
||
if(this.visiblemediatRecordObj != null)
|
||
{
|
||
this.mrObj.id = this.visiblemediatRecordObj.id
|
||
this.mrObj.linkedWay = this.visiblemediatRecordObj.linkedWay
|
||
this.mrObj.linkedType = this.visiblemediatRecordObj.linkedType
|
||
this.mrObj.linkedSituation = this.visiblemediatRecordObj.linkedSituation
|
||
if(this.visiblemediatRecordObj.communicationSituation!=null)
|
||
{
|
||
this.mrObj.communicationSituation = this.visiblemediatRecordObj.communicationSituation
|
||
}
|
||
this.mrObj.communicationRemarks = this.visiblemediatRecordObj.communicationRemarks
|
||
this.mrObj.mediateStatus = this.visiblemediatRecordObj.mediateStatus
|
||
this.mrObj.linkedTime = this.visiblemediatRecordObj.linkedTime
|
||
this.mrObj.linkedDuration = this.visiblemediatRecordObj.linkedDuration
|
||
this.mrObj.callWay = this.visiblemediatRecordObj.callWay
|
||
this.mrObj.callStartTime = this.visiblemediatRecordObj.callStartTime
|
||
this.mrObj.callEndTime = this.visiblemediatRecordObj.callEndTime
|
||
this.mrObj.nextFollowDate = this.visiblemediatRecordObj.nextFollowDate
|
||
this.mrObj.linkedPerson = this.visiblemediatRecordObj.linkedPerson
|
||
// console.log(this.visiblemediatRecordObj,'this.visiblemediatRecordObj')
|
||
this.visiblemediatRecordObj.files.forEach(item =>{
|
||
this.fileList.push({
|
||
url: item,
|
||
fileName: '文件',
|
||
})
|
||
})
|
||
}
|
||
if(this.mrObj.id == ''){
|
||
// 获取当前日期
|
||
let currentDate = new Date();
|
||
this.mrObj.linkedTime = this.$util.getDatetimeValue(currentDate);
|
||
}
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
// 列表数据
|
||
getList() {
|
||
let dataJson = {
|
||
size: 9999,
|
||
current: 1,
|
||
caseId: this.caseId
|
||
}
|
||
contactPerson.debtorPage(dataJson).then(res => {
|
||
if (!res.code) {
|
||
this.PersonData = res.records.map((item) => {
|
||
let surname = item.name.split('')[0];
|
||
return {
|
||
...item,
|
||
surname: surname
|
||
}
|
||
});
|
||
}
|
||
|
||
contactPerson.agentPage(dataJson).then(res => {
|
||
if (!res.code) {
|
||
let PersonAgent = res.records.map((item) => {
|
||
let surname = item.name.split('')[0];
|
||
return {
|
||
...item,
|
||
surname: surname
|
||
}
|
||
});
|
||
if(PersonAgent.length > 0)
|
||
{
|
||
PersonAgent.forEach(item => {
|
||
this.PersonData.push(item)
|
||
});
|
||
}
|
||
}
|
||
})
|
||
|
||
})
|
||
|
||
|
||
|
||
},
|
||
daysAfterDate() {
|
||
if(this.mrObj.timeType == 0){this.mrObj.nextFollowDate = 1 ;}
|
||
else{this.mrObj.nextFollowDate = this.mrObj.timeType ;}
|
||
|
||
// 获取当前日期
|
||
// let currentDate = new Date();
|
||
// // 获取昨天的日期
|
||
// const nextDate = currentDate
|
||
// currentDate.setDate(currentDate.getDate() + this.mrObj.timeType)
|
||
// const year = nextDate.getFullYear();
|
||
// const month = (nextDate.getMonth() + 1).toString().padStart(2, '0');
|
||
// const day = nextDate.getDate().toString().padStart(2, '0');
|
||
// this.mrObj.nextFollowDate = year +'-'+ month +'-'+ day;
|
||
},
|
||
handleUploadFile(fileList){
|
||
console.log('获取上传文件信息',fileList)
|
||
fileList = JSON.parse(JSON.stringify(fileList))
|
||
|
||
this.fileList = fileList.map((item,i) => {
|
||
return {
|
||
url: item.url,
|
||
fileName: item.fileName,
|
||
previewUrl:item.previewUrl,
|
||
objectName: item.objectName
|
||
}
|
||
})
|
||
console.log(this.fileList ,'fileListfileListfileList')
|
||
|
||
},
|
||
handleClose() {
|
||
this.$emit('update:visiblemediatRecord', false)
|
||
},
|
||
handleSubmit() {
|
||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||
|
||
if(this.mrObj.linkedPerson.length == 0)
|
||
{
|
||
this.$message.warning("请选择沟通对象");
|
||
return false
|
||
}
|
||
this.mrObj.caseId = this.caseId
|
||
this.fileList.forEach(item =>{
|
||
this.mrObj.files.push(item.url)
|
||
})
|
||
api.mediate_record_save(this.mrObj).then(res => {
|
||
this.$parent.getmediate_record()
|
||
this.handleClose()
|
||
this.$message.success("新增调解记录成功");
|
||
})
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.dialog-mr-batch{
|
||
.mr—schedule{
|
||
span{
|
||
border: solid 1px #E5E6EB;
|
||
padding: 5px 15px;
|
||
margin-right: 10px;
|
||
border-radius: 2px;
|
||
margin-top: 5px;
|
||
margin-bottom: 5px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
}
|
||
span.active{
|
||
color: #BC6F60;
|
||
border: solid 1px #BC6F60;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.kk-dialog-class {
|
||
pointer-events: none;
|
||
.el-dialog {
|
||
pointer-events: auto;
|
||
}
|
||
}
|
||
|
||
|
||
</style> |