228 lines
7.6 KiB
Vue
228 lines
7.6 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="邀请" :visible="true" width="600px" append-to-body :close-on-click-modal="false"
|
|
@close="handleClose">
|
|
<div class="dialog-content dialog-office-batch">
|
|
<div class="pt-8">
|
|
<el-form ref="ruleFormRepayment"
|
|
:model="repaymentObj"
|
|
:rules="rulesClientRule"
|
|
label-width="130px">
|
|
<el-row :gutter="56">
|
|
<el-col :span="24">
|
|
<el-form-item label="当事人">
|
|
<el-select v-model="repaymentObj.litigants" multiple collapse-tags filterable
|
|
placeholder="请选择" class="width100">
|
|
<el-option
|
|
v-for="(item,index) in litigantsOptions"
|
|
:key="index"
|
|
:label="item.name+ ' ' +'('+ item.phone +')'"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="邀请其他人" prop="members">
|
|
<el-button
|
|
icon="el-icon-plus"
|
|
size="small"
|
|
type="text"
|
|
@click="addForm">邀请其他人
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" v-for="(item,index) in repaymentObj.members" :key="index">
|
|
<el-form-item label="" prop="" label-width="0">
|
|
<el-row :gutter="20" style="background-color: rgb(245, 246, 250);margin-bottom: 5px;">
|
|
<el-col :span="7">
|
|
<div>身份</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<div>姓名</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<div>电话</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="7">
|
|
<el-form-item
|
|
:prop="`members[${index}].identity`"
|
|
:rules="[
|
|
{ required: true, message: '请选择', trigger: ['blur','change'],},
|
|
]">
|
|
<el-select v-model="item.identity" placeholder="请选择">
|
|
<el-option
|
|
v-for="(item,index) in identityOptions"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-form-item
|
|
:prop="`members[${index}].name`"
|
|
:rules="{ required: true, message: '请输入', trigger: ['blur','change'] }">
|
|
<el-input
|
|
v-model="item.name"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-form-item
|
|
:prop="`members[${index}].phone`"
|
|
:rules="[
|
|
{ required: true, message: '请输入', trigger: ['blur','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']}
|
|
]">
|
|
<el-input
|
|
v-model="item.phone"
|
|
placeholder="请输入"
|
|
maxlength="11"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="">
|
|
<el-button
|
|
icon="el-icon-delete"
|
|
size="small"
|
|
type="text"
|
|
@click="deleteForm(index)">删除
|
|
</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</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 videoTelephone from "@/services/videoTelephone";
|
|
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
eventDialog: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
litigantsOptions: [],
|
|
identityOptions: [
|
|
{ label: '法官', value: 'JUDGE' },
|
|
{ label: '调解专家', value: 'SPECIALISTS' },
|
|
{ label: '律师', value: 'LAWYER' },
|
|
{ label: '民警', value: 'POLICE' },
|
|
{ label: '其他', value: 'OTHER' }
|
|
],
|
|
repaymentObj: {
|
|
litigants: [], //{name: xx, phone: xx, identity: xx} 当事人
|
|
members: [], //{name: xx, phone: xx, identity: xx} 邀请人
|
|
id: '', // 案件ID
|
|
},
|
|
rulesClientRule: {
|
|
litigants: [
|
|
{ type: 'array', required: false, message: '请选择', trigger: 'change' }
|
|
],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.repaymentObj.id = this.eventDialog.id
|
|
this.getLitigantByCaseId();
|
|
},
|
|
methods: {
|
|
getLitigantByCaseId() {
|
|
videoTelephone.getLitigantByCaseId(this.eventDialog.caseId).then(res => {
|
|
if (!res.code) {
|
|
this.litigantsOptions = res;
|
|
}
|
|
})
|
|
},
|
|
addForm() {
|
|
this.repaymentObj.members.push({ identity: '', name: '', phone: ''})
|
|
},
|
|
deleteForm(index) {
|
|
this.repaymentObj.members.splice(index, 1)
|
|
},
|
|
handleClose() {
|
|
this.$emit('update:eventDialog', null)
|
|
},
|
|
handleSubmit() {
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
const resultArr = this.litigantsOptions
|
|
.filter(item => this.repaymentObj.litigants.includes(item.id))
|
|
.map(({name, phone, identity}) => ({name, phone, identity}));
|
|
|
|
if(resultArr.length == 0 && this.repaymentObj.members.length == 0){
|
|
this.$message.warning("请添加或选择需要邀请的人员！");
|
|
return false
|
|
}
|
|
this.$refs.ruleFormRepayment.validate((valid) => {
|
|
if (valid) {
|
|
// identity ,name ,phone
|
|
|
|
videoTelephone.videoInvite({...this.repaymentObj, litigants: resultArr}).then(res => {
|
|
this.handleClose()
|
|
this.$message.success("邀请成功");
|
|
this.$emit('submitHand', null)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog-office-batch {
|
|
padding: 16px 30px;
|
|
|
|
.tabs__search-criteria-title {
|
|
width: 100%;
|
|
}
|
|
|
|
.case-batch-num {
|
|
background-color: rgba(236, 238, 241, 0.8196078431);
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
|
|
a {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #C66A5B;
|
|
}
|
|
}
|
|
|
|
.officelist {
|
|
background-color: rgba(236, 238, 241, 0.8196078431);
|
|
padding: 20px 20px;
|
|
|
|
.el-checkbox {
|
|
width: 230px;
|
|
margin: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |