343 lines
12 KiB
Vue
343 lines
12 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="预约视频名称" prop="name">
|
|
<el-input
|
|
v-model="repaymentObj.name"
|
|
clearable
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<!-- <el-col :span="24">
|
|
<el-form-item label="预约视频内容" prop="content">
|
|
<el-input
|
|
v-model="repaymentObj.content"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="24">
|
|
<el-form-item label="开始时间" prop="bookingTime">
|
|
<!-- format="yyyy-MM-dd HH:mm"-->
|
|
<el-date-picker
|
|
v-model="repaymentObj.bookingTime"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
type="datetime"
|
|
placeholder="请选择"
|
|
:picker-options="pickerOptions"
|
|
class="width100">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="持续时间" prop="bookingDuration">
|
|
<el-select v-model="repaymentObj.bookingDuration" placeholder="请选择" class="width100">
|
|
<el-option
|
|
v-for="(item,index) in bookingDurationOptions"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="当事人" prop="litigants">
|
|
<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.identity"
|
|
:disabled="(item.identity == '' || item.identity == null) ? true :false"
|
|
:title="(item.identity == '' || item.identity == null) ? '没有证件号码不能选择' :false">
|
|
</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 {
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
const today = new Date();
|
|
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
return time.getTime() < start.getTime();
|
|
}
|
|
},
|
|
bookingDurationOptions: [
|
|
{ label: '10分钟', value: 10 },
|
|
{ label: '20分钟', value: 20 },
|
|
{ label: '30分钟', value: 30 },
|
|
{ label: '40分钟', value: 40 },
|
|
{ label: '50分钟', value: 50 },
|
|
{ label: '60分钟', value: 60 },
|
|
{ label: '70分钟', value: 70 },
|
|
{ label: '80分钟', value: 80 },
|
|
{ label: '90分钟', value: 90 },
|
|
{ label: '100分钟', value: 100 },
|
|
{ label: '110分钟', value: 110 },
|
|
{ label: '120分钟', value: 120 }
|
|
],
|
|
litigantsOptions: [],
|
|
identityOptions: [
|
|
{ label: '法官', value: '法官' },
|
|
{ label: '调解专家', value: '调解专家' },
|
|
{ label: '律师', value: '律师' },
|
|
{ label: '民警', value: '民警' },
|
|
{ label: '其他', value: '其他' }
|
|
],
|
|
repaymentObj: {
|
|
name: '',
|
|
content: '',
|
|
litigants: [], //{name: xx, phone: xx, identity: xx} 当事人
|
|
members: [], //{name: xx, phone: xx, identity: xx} 邀请人
|
|
bookingTime: '',
|
|
bookingDuration: '',
|
|
caseId: '', // 案件ID
|
|
},
|
|
rulesClientRule: {
|
|
// name: [
|
|
// { required: true, message: '请输入', trigger: 'change',},
|
|
// ],
|
|
// content: [
|
|
// { required: true, message: '请输入', trigger: 'change',},
|
|
// ],
|
|
litigants: [
|
|
{ type: 'array', required: true, message: '请选择', trigger: 'change' }
|
|
],
|
|
bookingTime: [
|
|
{required: true, message: '请选择', trigger: 'change',},
|
|
],
|
|
bookingDuration: [
|
|
{required: true, message: '请选择', trigger: 'change',},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
// console.log(1231)
|
|
this.getLitigantByCaseId();
|
|
},
|
|
methods: {
|
|
// smsChange() {
|
|
// let jsonData = this.smsOptions.find(item => {
|
|
// return this.ObjectInfo.methodId == item.value
|
|
// })
|
|
// this.ObjectInfo.users = jsonData.users
|
|
// this.ObjectInfo.content = jsonData.content
|
|
// },
|
|
getLitigantByCaseId() {
|
|
videoTelephone.getLitigantByCaseId(this.eventDialog.caseId).then(res => {
|
|
if (!res.code) {
|
|
console.log(res, '---getLitigantByCaseId')
|
|
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 }//防止重复点击
|
|
this.$refs.ruleFormRepayment.validate((valid) => {
|
|
if (valid) {
|
|
const resultArr = this.litigantsOptions
|
|
.filter(item => this.repaymentObj.litigants.includes(item.identity))
|
|
.map(({name, phone, identity}) => ({name, phone, identity}));
|
|
this.repaymentObj.caseId = this.eventDialog.caseId;
|
|
// console.log(resultArr, '---resultArr' , this.repaymentObj)
|
|
let videotitle = ''
|
|
if(resultArr.length>0){
|
|
resultArr.forEach((item,index)=>{
|
|
if(index == 0){videotitle+=item.name}
|
|
else{videotitle+='、'+item.name}
|
|
})
|
|
}
|
|
if(this.repaymentObj.members.length>0){
|
|
this.repaymentObj.members.forEach((item,index)=>{
|
|
if(index == 0 && videotitle == ''){videotitle+=item.name}
|
|
else{videotitle+='、'+item.name}
|
|
})
|
|
}
|
|
videotitle+='的视频预约'
|
|
this.repaymentObj.name = videotitle
|
|
this.repaymentObj.content = videotitle
|
|
|
|
videoTelephone.videoTelephoneBooking({...this.repaymentObj, litigants: resultArr}).then(res => {
|
|
this.$parent.getList()
|
|
this.handleClose()
|
|
this.$message.success("预约成功");
|
|
})
|
|
// if (this.editObj.id != '') {
|
|
// api.update(this.editObj).then(res => {
|
|
// // this.$parent.getDataList()
|
|
// this.handleClose()
|
|
// this.$message.success("保存成功");
|
|
// })
|
|
// } else {
|
|
// api.create(this.editObj).then(res => {
|
|
// // this.$parent.getDataList(1)
|
|
// this.handleClose()
|
|
// this.$message.success("保存成功");
|
|
// })
|
|
// }
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</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> |