联系人
This commit is contained in:
parent
98f7d6e449
commit
0cb4cdd854
@ -111,6 +111,9 @@ html{
|
|||||||
.color-274ea4{
|
.color-274ea4{
|
||||||
color: #274ea4;
|
color: #274ea4;
|
||||||
}
|
}
|
||||||
|
.color-274ea4{
|
||||||
|
color: rgb(188, 111, 96);
|
||||||
|
}
|
||||||
|
|
||||||
.color-text-primary{
|
.color-text-primary{
|
||||||
color: $color-text-primary;
|
color: $color-text-primary;
|
||||||
|
|||||||
@ -33,27 +33,52 @@
|
|||||||
<img src="../../../assets/image/mediate/m-info-robot.png"/>
|
<img src="../../../assets/image/mediate/m-info-robot.png"/>
|
||||||
</span>
|
</span>
|
||||||
<span class="separation"></span>
|
<span class="separation"></span>
|
||||||
<span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">
|
<!-- <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">-->
|
||||||
|
<!-- <img src="../../../assets/image/mediate/m-info1.png"/>-->
|
||||||
|
<!-- <a>案件信息</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">-->
|
||||||
|
<!-- <img src="../../../assets/image/mediate/m-info2.png"/>-->
|
||||||
|
<!-- <a>联系人</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">-->
|
||||||
|
<!-- <img src="../../../assets/image/mediate/m-info3.png"/>-->
|
||||||
|
<!-- <a>案件材料</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">-->
|
||||||
|
<!-- <img src="../../../assets/image/mediate/m-info4.png"/>-->
|
||||||
|
<!-- <a>案件文书</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">-->
|
||||||
|
<!-- <img src="../../../assets/image/mediate/m-info5.png"/>-->
|
||||||
|
<!-- <a>还款计划</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6">-->
|
||||||
|
<!-- <img src="../../../assets/image/mediate/m-info6.png"/>-->
|
||||||
|
<!-- <a>还款凭证</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
|
||||||
|
<span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @click="leftActive = 1">
|
||||||
<img src="../../../assets/image/mediate/m-info1.png"/>
|
<img src="../../../assets/image/mediate/m-info1.png"/>
|
||||||
<a>案件信息</a>
|
<a>案件信息</a>
|
||||||
</span>
|
</span>
|
||||||
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">
|
<span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @click="leftActive = 2">
|
||||||
<img src="../../../assets/image/mediate/m-info2.png"/>
|
<img src="../../../assets/image/mediate/m-info2.png"/>
|
||||||
<a>联系人</a>
|
<a>联系人</a>
|
||||||
</span>
|
</span>
|
||||||
<span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">
|
<span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @click="leftActive = 3">
|
||||||
<img src="../../../assets/image/mediate/m-info3.png"/>
|
<img src="../../../assets/image/mediate/m-info3.png"/>
|
||||||
<a>案件材料</a>
|
<a>案件材料</a>
|
||||||
</span>
|
</span>
|
||||||
<span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">
|
<span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @click="leftActive = 4">
|
||||||
<img src="../../../assets/image/mediate/m-info4.png"/>
|
<img src="../../../assets/image/mediate/m-info4.png"/>
|
||||||
<a>案件文书</a>
|
<a>案件文书</a>
|
||||||
</span>
|
</span>
|
||||||
<span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">
|
<span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @click="leftActive = 5">
|
||||||
<img src="../../../assets/image/mediate/m-info5.png"/>
|
<img src="../../../assets/image/mediate/m-info5.png"/>
|
||||||
<a>还款计划</a>
|
<a>还款计划</a>
|
||||||
</span>
|
</span>
|
||||||
<span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6">
|
<span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @click="leftActive = 6">
|
||||||
<img src="../../../assets/image/mediate/m-info6.png"/>
|
<img src="../../../assets/image/mediate/m-info6.png"/>
|
||||||
<a>还款凭证</a>
|
<a>还款凭证</a>
|
||||||
</span>
|
</span>
|
||||||
@ -118,97 +143,98 @@
|
|||||||
|
|
||||||
<!-- 联系人信息 -->
|
<!-- 联系人信息 -->
|
||||||
<div v-if="leftActive == 2" class="case-contact-person">
|
<div v-if="leftActive == 2" class="case-contact-person">
|
||||||
<div class="mb-16 flex-row justify-content-between">
|
<contactPerson :caseId="caseId" />
|
||||||
<span class="f-weight500 f18">联系人信息</span>
|
<!-- <div class="mb-16 flex-row justify-content-between">-->
|
||||||
<span class="cursor-pointer" @click="contactAddFlag = true"><i
|
<!-- <span class="f-weight500 f18">联系人信息</span>-->
|
||||||
class="el-icon-plus"></i> 添加联系人</span>
|
<!-- <span class="cursor-pointer" @click="contactAddFlag = true"><i-->
|
||||||
</div>
|
<!-- class="el-icon-plus"></i> 添加联系人</span>-->
|
||||||
<div class="mb-16 flex-row justify-content-between">
|
<!-- </div>-->
|
||||||
<span class="f14 contact-person-type">被申请人</span>
|
<!-- <div class="mb-16 flex-row justify-content-between">-->
|
||||||
<span class="f14 contact-person-type">申请人</span>
|
<!-- <span class="f14 contact-person-type">被申请人</span>-->
|
||||||
<span class="f14 contact-person-type">申请人代理人</span>
|
<!-- <span class="f14 contact-person-type">申请人</span>-->
|
||||||
</div>
|
<!-- <span class="f14 contact-person-type">申请人代理人</span>-->
|
||||||
<div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">
|
<!-- </div>-->
|
||||||
<div class="flex-row justify-content-between">
|
<!-- <div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">-->
|
||||||
<div class="flex-row mb-8">
|
<!-- <div class="flex-row justify-content-between">-->
|
||||||
<a class="f16" style="width: 130px;">
|
<!-- <div class="flex-row mb-8">-->
|
||||||
<el-input v-model.trim="contactAddObj.Name"
|
<!-- <a class="f16" style="width: 130px;">-->
|
||||||
clearable placeholder="请输入姓名" size="small">
|
<!-- <el-input v-model.trim="contactAddObj.Name"-->
|
||||||
</el-input>
|
<!-- clearable placeholder="请输入姓名" size="small">-->
|
||||||
</a>
|
<!-- </el-input>-->
|
||||||
<a style="width: 140px;margin-left: 5px">
|
<!-- </a>-->
|
||||||
<el-select v-model="contactAddObj.relation"
|
<!-- <a style="width: 140px;margin-left: 5px">-->
|
||||||
placeholder="与债务人关系" size="small"
|
<!-- <el-select v-model="contactAddObj.relation"-->
|
||||||
class="width100">
|
<!-- placeholder="与债务人关系" size="small"-->
|
||||||
<el-option
|
<!-- class="width100">-->
|
||||||
v-for="(item,index) in relationOptions"
|
<!-- <el-option-->
|
||||||
:key="index"
|
<!-- v-for="(item,index) in relationOptions"-->
|
||||||
:label="item.label"
|
<!-- :key="index"-->
|
||||||
:value="item.value">
|
<!-- :label="item.label"-->
|
||||||
</el-option>
|
<!-- :value="item.value">-->
|
||||||
</el-select>
|
<!-- </el-option>-->
|
||||||
</a>
|
<!-- </el-select>-->
|
||||||
</div>
|
<!-- </a>-->
|
||||||
<div class="flex-row">
|
<!-- </div>-->
|
||||||
<a class="cursor-pointer pt-6">添加</a>
|
<!-- <div class="flex-row">-->
|
||||||
<a class="cursor-pointer ml-8 pt-6" @click="contactAddFlag = false;contactAddObj = {}">取消</a>
|
<!-- <a class="cursor-pointer pt-6">添加</a>-->
|
||||||
</div>
|
<!-- <a class="cursor-pointer ml-8 pt-6" @click="contactAddFlag = false;contactAddObj = {}">取消</a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="flex-row">
|
<!-- </div>-->
|
||||||
<a style="width: 180px;">
|
<!-- <div class="flex-row">-->
|
||||||
<el-input v-model.trim="contactAddObj.Phone" size="small"
|
<!-- <a style="width: 180px;">-->
|
||||||
clearable placeholder="请输入手机号码" maxlength="11">
|
<!-- <el-input v-model.trim="contactAddObj.Phone" size="small"-->
|
||||||
</el-input>
|
<!-- clearable placeholder="请输入手机号码" maxlength="11">-->
|
||||||
</a>
|
<!-- </el-input>-->
|
||||||
</div>
|
<!-- </a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
<div class="case-detail-des flex-column mb-16">
|
<!-- <div class="case-detail-des flex-column mb-16">-->
|
||||||
<div class="flex-row justify-content-between">
|
<!-- <div class="flex-row justify-content-between">-->
|
||||||
<div v-if="!contactUpdate" class="flex-row mb-8">
|
<!-- <div v-if="!contactUpdate" class="flex-row mb-8">-->
|
||||||
<a class="f16">张三</a>
|
<!-- <a class="f16">张三</a>-->
|
||||||
<div class="case-lable">
|
<!-- <div class="case-lable">-->
|
||||||
<a class="case-status0">本人</a>
|
<!-- <a class="case-status0">本人</a>-->
|
||||||
<a class="case-status1">空号</a>
|
<!-- <a class="case-status1">空号</a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div v-if="contactUpdate" class="flex-row mb-8">
|
<!-- <div v-if="contactUpdate" class="flex-row mb-8">-->
|
||||||
<a class="f16" style="width: 130px;">
|
<!-- <a class="f16" style="width: 130px;">-->
|
||||||
<el-input v-model.trim="contactObj.Name"
|
<!-- <el-input v-model.trim="contactObj.Name"-->
|
||||||
clearable placeholder="请输入姓名" size="small">
|
<!-- clearable placeholder="请输入姓名" size="small">-->
|
||||||
</el-input>
|
<!-- </el-input>-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
<a style="width: 140px;margin-left: 5px">
|
<!-- <a style="width: 140px;margin-left: 5px">-->
|
||||||
<el-select v-model="contactObj.relation"
|
<!-- <el-select v-model="contactObj.relation"-->
|
||||||
placeholder="请选择与债务人关系" size="small"
|
<!-- placeholder="请选择与债务人关系" size="small"-->
|
||||||
class="width100">
|
<!-- class="width100">-->
|
||||||
<el-option
|
<!-- <el-option-->
|
||||||
v-for="(item,index) in relationOptions"
|
<!-- v-for="(item,index) in relationOptions"-->
|
||||||
:key="index"
|
<!-- :key="index"-->
|
||||||
:label="item.label"
|
<!-- :label="item.label"-->
|
||||||
:value="item.value">
|
<!-- :value="item.value">-->
|
||||||
</el-option>
|
<!-- </el-option>-->
|
||||||
</el-select>
|
<!-- </el-select>-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="flex-row">
|
<!-- <div class="flex-row">-->
|
||||||
<a v-if="contactUpdate" class="cursor-pointer pt-6">保存</a>
|
<!-- <a v-if="contactUpdate" class="cursor-pointer pt-6">保存</a>-->
|
||||||
<a v-if="contactUpdate" @click="contactUpdate = false" class="cursor-pointer ml-8 pt-6">取消</a>
|
<!-- <a v-if="contactUpdate" @click="contactUpdate = false" class="cursor-pointer ml-8 pt-6">取消</a>-->
|
||||||
<a v-if="!contactUpdate" @click="contactUpdate = true" class="cursor-pointer">编辑</a>
|
<!-- <a v-if="!contactUpdate" @click="contactUpdate = true" class="cursor-pointer">编辑</a>-->
|
||||||
<a v-if="!contactUpdate" class="cursor-pointer ml-8">删除</a>
|
<!-- <a v-if="!contactUpdate" class="cursor-pointer ml-8">删除</a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div v-if="!contactUpdate">
|
<!-- <div v-if="!contactUpdate">-->
|
||||||
<a>手机号码:</a><a class="ml-8">13333333333</a>
|
<!-- <a>手机号码:</a><a class="ml-8">13333333333</a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div v-if="contactUpdate" class="flex-row">
|
<!-- <div v-if="contactUpdate" class="flex-row">-->
|
||||||
<a style="width: 180px;">
|
<!-- <a style="width: 180px;">-->
|
||||||
<el-input v-model.trim="contactObj.Phone" size="small"
|
<!-- <el-input v-model.trim="contactObj.Phone" size="small"-->
|
||||||
clearable placeholder="请输入手机号码" maxlength="11">
|
<!-- clearable placeholder="请输入手机号码" maxlength="11">-->
|
||||||
</el-input>
|
<!-- </el-input>-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 案件材料 -->
|
<!-- 案件材料 -->
|
||||||
@ -413,6 +439,7 @@ export default {
|
|||||||
VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
|
VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
|
||||||
caseMaterial: () => import('./caseMaterial'),//
|
caseMaterial: () => import('./caseMaterial'),//
|
||||||
caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
|
caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
|
||||||
|
contactPerson: () => import('./contactPerson'),//联系人左
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
185
src/pages/mediation-page/components/contactPerson.vue
Normal file
185
src/pages/mediation-page/components/contactPerson.vue
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="mb-16 flex-row justify-content-between">
|
||||||
|
<span class="f-weight500 f18">联系人信息</span>
|
||||||
|
<span class="cursor-pointer color-274ea4" @click="handleContactAdd">
|
||||||
|
<i class="el-icon-plus"></i> 添加联系人
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-16 f14 flex-row">
|
||||||
|
<span class="contact-person-type"
|
||||||
|
v-for="(item, index) in personnelType" :key="index"
|
||||||
|
:class="{'contact-person-active' : item === personnelTypeActive}"
|
||||||
|
@click="personnelTypeActive = item">{{item}}</span>
|
||||||
|
</div>
|
||||||
|
<el-card class="mb-16">
|
||||||
|
<div class="personnel-list">
|
||||||
|
<div class="flex-row justify-content-between">
|
||||||
|
<div class="personnel-surname">李</div>
|
||||||
|
<div class="personnel-info">
|
||||||
|
<div class="f16"><span class="f20 f-weight600">李四</span> 18336524833</div>
|
||||||
|
<div class="case-lable">
|
||||||
|
<a class="case-status0">本人</a>
|
||||||
|
<a class="case-status1">空号</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row personnel-btn">
|
||||||
|
<a class="cursor-pointer" @click="handleEdit">编辑</a>
|
||||||
|
<a class="cursor-pointer ml-8" @click="handleDelete">删除</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-86909C mt-8 ml-8 f16">
|
||||||
|
<a class="mr-24 cursor-pointer"><i class="el-icon-phone"></i> 电话</a>
|
||||||
|
<a class="ml-8 cursor-pointer"><i class="el-icon-message"></i> 短信</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="mb-16">
|
||||||
|
<div class="personnel-list">
|
||||||
|
<div class="flex-row justify-content-between">
|
||||||
|
<div class="personnel-surname">李</div>
|
||||||
|
<div class="personnel-info">
|
||||||
|
<div class="f16"><span class="f20 f-weight600">李四</span> 18336524833</div>
|
||||||
|
<div class="case-lable">
|
||||||
|
<a class="case-status0">本人</a>
|
||||||
|
<a class="case-status1">空号</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row personnel-btn">
|
||||||
|
<a class="cursor-pointer">编辑</a>
|
||||||
|
<a class="cursor-pointer ml-8">删除</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-86909C mt-8 ml-8 f16">
|
||||||
|
<a class="mr-24 cursor-pointer"><i class="el-icon-phone"></i> 电话</a>
|
||||||
|
<a class="ml-8 cursor-pointer"><i class="el-icon-message"></i> 短信</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<contactPersonDialog v-if="contactAddObj" :eventDialog.sync="contactAddObj" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
contactPersonDialog: () => import('./contactPersonDialog.vue'),//联系人弹窗
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
caseId: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
personnelType: ['申请人', '被申请人' , '申请人代理人'],
|
||||||
|
personnelTypeActive: '申请人',
|
||||||
|
// 联系人
|
||||||
|
contactAddObj: null,
|
||||||
|
tableData: [],
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 列表数据
|
||||||
|
getList() {
|
||||||
|
// let dataJson = {
|
||||||
|
// size: 9999,
|
||||||
|
// current: 1,
|
||||||
|
// caseId: this.caseId
|
||||||
|
// }
|
||||||
|
// caseMaterial.getCaseFileList(dataJson).then(res => {
|
||||||
|
// if (!res.code) {
|
||||||
|
// this.tableData = res.records;
|
||||||
|
// this.total = res.total;
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
handleContactAdd() {
|
||||||
|
if (this.personnelTypeActive === '申请人'){
|
||||||
|
this.$message.warning('无法添加申请人!')
|
||||||
|
}else {
|
||||||
|
this.contactAddObj = {
|
||||||
|
caseId: this.caseId,
|
||||||
|
personId: '',
|
||||||
|
type: this.personnelTypeActive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleEdit(item) {
|
||||||
|
// this.contactAddObj = {
|
||||||
|
// caseId: this.caseId,
|
||||||
|
// personId: item.id,
|
||||||
|
// type: this.personnelTypeActive
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm("确定删除?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(() => {
|
||||||
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||||
|
// basicManage.deleteDictById({ id: scope.row.id }).then((res) => {
|
||||||
|
// this.$message.success("成功");
|
||||||
|
// this.getDictList(1)
|
||||||
|
// });
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
makeCall(item) {},
|
||||||
|
sendMessages(item) {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.contact-person-active{
|
||||||
|
background-color: #F2F3F5;
|
||||||
|
color: rgb(188, 111, 96);
|
||||||
|
}
|
||||||
|
.contact-person-type{
|
||||||
|
padding:8px 15px;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.personnel-list{
|
||||||
|
.ml-0{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.el-icon-phone{
|
||||||
|
color: #2F6AF5;
|
||||||
|
}
|
||||||
|
.el-icon-message{
|
||||||
|
color: rgb(240, 180, 113);
|
||||||
|
}
|
||||||
|
.personnel-surname{
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border-radius: 35px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: rgb(188, 111, 96);
|
||||||
|
font-size: 32px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
.personnel-info{
|
||||||
|
width: 50%;
|
||||||
|
.case-lable{
|
||||||
|
margin-top: 12px;
|
||||||
|
.case-status0{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.personnel-btn{
|
||||||
|
line-height: 26px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
255
src/pages/mediation-page/components/contactPersonDialog.vue
Normal file
255
src/pages/mediation-page/components/contactPersonDialog.vue
Normal file
@ -0,0 +1,255 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog title="联系人" :visible="true" width="800px" append-to-body :close-on-click-modal="false"
|
||||||
|
@close="handleClose">
|
||||||
|
<div class="dialog-content dialog-office-batch">
|
||||||
|
<div class="p-16 pr-40" v-if="diglogType === '被申请人'">
|
||||||
|
<el-form ref="ruleFormRespondent"
|
||||||
|
:model="respondentObj"
|
||||||
|
:rules="rulesRespondent"
|
||||||
|
label-width="110px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="姓名:" prop="name">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="respondentObj.name"
|
||||||
|
placeholder="请输入" maxlength="20"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="与债务人关系:" prop="relation">
|
||||||
|
<el-select v-model="respondentObj.relation" placeholder="请选择" class="width100">
|
||||||
|
<el-option
|
||||||
|
v-for="(item,index) in relationOptions"
|
||||||
|
:key="index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="电话:" prop="phone">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="respondentObj.phone"
|
||||||
|
placeholder="请输入" maxlength="20"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="p-16 pr-40" v-else>
|
||||||
|
<el-form ref="ruleFormAgent"
|
||||||
|
:model="agentObj"
|
||||||
|
:rules="rulesRespondent"
|
||||||
|
label-width="110px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="代理权限:" prop="authority">
|
||||||
|
<el-select v-model="agentObj.authority" placeholder="请选择" class="width100">
|
||||||
|
<el-option
|
||||||
|
v-for="(item,index) in authorityOptions"
|
||||||
|
:key="index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="姓名:" prop="name">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="agentObj.name"
|
||||||
|
placeholder="请输入" maxlength="20"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="身份证号:" prop="identityCard">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="agentObj.identityCard"
|
||||||
|
placeholder="请输入" maxlength="18"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="电话:" prop="phone">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="agentObj.phone"
|
||||||
|
placeholder="请输入" maxlength="11"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="单位电话:" prop="workPhone">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="agentObj.workPhone"
|
||||||
|
placeholder="请输入" maxlength="11"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="邮箱:" prop="email">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="agentObj.email"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="地址:" prop="address">
|
||||||
|
<el-input
|
||||||
|
v-model.trim="agentObj.address"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="代理人类型:" prop="agentType">
|
||||||
|
<el-select v-model="agentObj.agentType" placeholder="请选择" class="width100">
|
||||||
|
<el-option
|
||||||
|
v-for="(item,index) in agentTypeOptions"
|
||||||
|
:key="index"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</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 caseMaterial from "@/services/caseMaterial";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
eventDialog: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
diglogType: '',
|
||||||
|
relationOptions: [
|
||||||
|
{label: '本人', value: '本人'},
|
||||||
|
{label: '父母', value: '父母'},
|
||||||
|
{label: '配偶', value: '配偶'},
|
||||||
|
{label: '子女', value: '子女'},
|
||||||
|
{label: '其他', value: '其他'},
|
||||||
|
{label: '朋友', value: '朋友'},
|
||||||
|
{label: '兄弟', value: '兄弟'},
|
||||||
|
{label: '同事', value: '同事'},
|
||||||
|
{label: '同学', value: '同学'}
|
||||||
|
],
|
||||||
|
respondentObj: {
|
||||||
|
caseId: '',
|
||||||
|
name: '',
|
||||||
|
relation: '',
|
||||||
|
phone: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
authorityOptions: [
|
||||||
|
{label: '一般代理', value: 1}
|
||||||
|
],
|
||||||
|
agentTypeOptions: [
|
||||||
|
{label: '执业律师', value: 1},
|
||||||
|
{label: '基层法律服务工作者', value: 2},
|
||||||
|
{label: '当事人的近亲属或工作人员', value: 3},
|
||||||
|
{label: '当事人所在社区,单位以及有关社会团体推荐的公民', value: 4},
|
||||||
|
{label: '经赔委员会许可的其他公民', value: 5}
|
||||||
|
],
|
||||||
|
agentObj: {
|
||||||
|
authority: '',
|
||||||
|
name: '',
|
||||||
|
identityCard: '',
|
||||||
|
phone: '',
|
||||||
|
workPhone: '',
|
||||||
|
email: '',
|
||||||
|
address: '',
|
||||||
|
agentType: '',
|
||||||
|
},
|
||||||
|
rulesRespondent: {
|
||||||
|
name: [
|
||||||
|
{required: true, message: '请输入', trigger: ['blur', 'change'],},
|
||||||
|
],
|
||||||
|
relation: [
|
||||||
|
{required: true, message: '请选择', trigger: 'change',},
|
||||||
|
],
|
||||||
|
phone: [
|
||||||
|
{ required: true, message: '请输入', trigger: 'change',},
|
||||||
|
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
|
||||||
|
],
|
||||||
|
|
||||||
|
authority: [
|
||||||
|
{required: true, message: '请选择', trigger: 'change',},
|
||||||
|
],
|
||||||
|
identityCard: [
|
||||||
|
{ required: true, message: '请输入', trigger: 'change',},
|
||||||
|
{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(1231)
|
||||||
|
this.diglogType = this.eventDialog?.type;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClose() {
|
||||||
|
this.$emit('update:eventDialog', null)
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||||
|
if (this.diglogType === '被申请人'){
|
||||||
|
this.$refs.ruleFormRespondent.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.respondentObj.caseId = this.eventDialog.caseId;
|
||||||
|
// caseMaterial.addCaseFile(this.respondentObj).then(res => {
|
||||||
|
// this.$parent.getList()
|
||||||
|
// this.handleClose()
|
||||||
|
// this.$message.success("操作成功");
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else {
|
||||||
|
this.$refs.ruleFormAgent.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.respondentObj.caseId = this.eventDialog.caseId;
|
||||||
|
// caseMaterial.addCaseFile(this.respondentObj).then(res => {
|
||||||
|
// this.$parent.getList()
|
||||||
|
// this.handleClose()
|
||||||
|
// this.$message.success("操作成功");
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user