视频预约
This commit is contained in:
tdg930622
parent
81f5abdabe
commit
cb52e7d51b
4559
package-lock.json
generated
4559
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-content-wrap">
|
<div class="layout-content-wrap">
|
||||||
|
|
||||||
<div class="navigation-bar flex-row mb-16">
|
<div class="navigation-bar flex-row mb-16">
|
||||||
|
|||||||
@ -1,162 +1,279 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-dialog title="视频预约" :visible="true" width="600px" append-to-body :close-on-click-modal="false"
|
<el-dialog title="视频预约" :visible="true" width="600px" append-to-body :close-on-click-modal="false"
|
||||||
@close="handleClose">
|
@close="handleClose">
|
||||||
<div class="dialog-content dialog-office-batch">
|
<div class="dialog-content dialog-office-batch">
|
||||||
<div class="pt-8">
|
<div class="pt-8">
|
||||||
<!-- <div class="flex-row align-items-center justify-content-between mb-16 case-batch-num">
|
<el-form ref="ruleFormRepayment"
|
||||||
<span>选中<a>{{eventDialog.caseids.length}}</a>个案件，系统将对您选择的案件进行批量电子短信送达！</span>
|
:model="repaymentObj"
|
||||||
</div> -->
|
:rules="rulesClientRule"
|
||||||
<el-form ref="ruleFormRepayment"
|
label-width="130px">
|
||||||
:model="repaymentObj"
|
<el-row :gutter="56">
|
||||||
:rules="rulesClientRule"
|
<el-col :span="24">
|
||||||
label-width="130px">
|
<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="请选择"
|
||||||
|
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">
|
||||||
|
</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="10">
|
||||||
|
<el-col :span="7">
|
||||||
|
<div>姓名</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="7">
|
||||||
|
<div>电话</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div>身份证</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<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="请输入"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item
|
||||||
|
:prop="`members[${index}].identity`"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入', trigger: ['blur','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']}
|
||||||
|
]">
|
||||||
|
<el-input
|
||||||
|
v-model="item.identity"
|
||||||
|
placeholder="请输入"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<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>
|
||||||
|
|
||||||
<el-row :gutter="56">
|
</div>
|
||||||
<el-col :span="24">
|
|
||||||
<el-form-item label="开始时间" prop="type">
|
|
||||||
<el-select v-model="repaymentObj.type" class="width100" disabled
|
|
||||||
placeholder="请选择还款方式" size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="(item,index) in RepaymentOptions"
|
|
||||||
: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="type">
|
|
||||||
<el-select v-model="repaymentObj.type" class="width100" disabled
|
|
||||||
placeholder="请选择还款方式" size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="(item,index) in RepaymentOptions"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
</el-form>
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
<!-- <el-collapse-transition>
|
|
||||||
<el-row :gutter="56">
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-form-item label="" prop="type">
|
|
||||||
<el-select v-model="repaymentObj.type" class="width100" disabled
|
|
||||||
placeholder="请选择还款方式" size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="(item,index) in RepaymentOptions"
|
|
||||||
:key="index"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
</el-row>
|
|
||||||
</el-collapse-transition> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="handleClose()">取消</el-button>
|
<el-button @click="handleClose()">取消</el-button>
|
||||||
<el-button type="primary" @click="handleSubmit()">立即预约</el-button>
|
<el-button type="primary" @click="handleSubmit()">立即预约</el-button>
|
||||||
</span>
|
</span>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import api from "@/services/caseManagement";
|
import videoTelephone from "@/services/videoTelephone";
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
eventDialog: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
repaymentObj:{},
|
|
||||||
rulesClientRule:{
|
|
||||||
type: [
|
|
||||||
{ required: true, message: '请选择还款方式', trigger: 'change',},
|
|
||||||
],
|
|
||||||
totalAmount: [
|
|
||||||
{ required: true, message: '请输入还款金额', trigger: 'change',},
|
|
||||||
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
|
|
||||||
],
|
|
||||||
paybackDate: [
|
|
||||||
{ required: true, message: '请选择还款截止日期', trigger: 'change',},
|
|
||||||
],
|
|
||||||
stagesDay: [
|
|
||||||
{ required: true, message: '请选择每期还款日期', trigger: 'change',},
|
|
||||||
],
|
|
||||||
partAmount: [
|
|
||||||
{ required: true, message: '请输入分期前偿还金额 ', trigger: 'change',},
|
|
||||||
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
|
|
||||||
],
|
|
||||||
partDate: [
|
|
||||||
{ required: true, message: '请选择分期前偿还日期', trigger: 'change',},
|
|
||||||
],
|
|
||||||
stagesNum: [
|
|
||||||
{ required: true, message: '请输入分期期数', trigger: 'change',},
|
|
||||||
{ pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
console.log(1231)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
smsChange(){
|
|
||||||
let jsonData = this.smsOptions.find(item=>{
|
|
||||||
return this.ObjectInfo.methodId == item.value
|
|
||||||
})
|
|
||||||
this.ObjectInfo.users = jsonData.users
|
|
||||||
this.ObjectInfo.content = jsonData.content
|
|
||||||
},
|
|
||||||
|
|
||||||
handleClose() {
|
export default {
|
||||||
this.$emit('update:eventDialog', null)
|
components: {},
|
||||||
},
|
props: {
|
||||||
}
|
eventDialog: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
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: [],
|
||||||
|
repaymentObj: {
|
||||||
|
litigants: [], //{name: xx, phone: xx, identity: xx} 当事人
|
||||||
|
members: [], //{name: xx, phone: xx, identity: xx} 邀请人
|
||||||
|
bookingTime: '',
|
||||||
|
bookingDuration: '',
|
||||||
|
caseId: '', // 案件ID
|
||||||
|
},
|
||||||
|
rulesClientRule: {
|
||||||
|
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({name: '', phone: '', identity: ''})
|
||||||
|
},
|
||||||
|
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)
|
||||||
|
videoTelephone.videoTelephoneBooking({...this.repaymentObj, litigants: resultArr}).then(res => {
|
||||||
|
// this.$parent.getDataList(1)
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.dialog-office-batch{
|
.dialog-office-batch {
|
||||||
padding: 16px 30px;
|
padding: 16px 30px;
|
||||||
max-height:500px;
|
|
||||||
.tabs__search-criteria-title{
|
.tabs__search-criteria-title {
|
||||||
width: 100%;
|
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;
|
||||||
}
|
}
|
||||||
.case-batch-num{
|
}
|
||||||
background-color: rgba(236, 238, 241, 0.8196078431);
|
|
||||||
padding: 15px 20px;
|
.officelist {
|
||||||
border-radius: 4px;
|
background-color: rgba(236, 238, 241, 0.8196078431);
|
||||||
a{font-size: 16px;font-weight: 500;color: #C66A5B;}
|
padding: 20px 20px;
|
||||||
|
|
||||||
|
.el-checkbox {
|
||||||
|
width: 230px;
|
||||||
|
margin: 10px;
|
||||||
}
|
}
|
||||||
.officelist{
|
}
|
||||||
background-color: rgba(236, 238, 241, 0.8196078431);
|
|
||||||
padding: 20px 20px;
|
|
||||||
.el-checkbox
|
|
||||||
{
|
|
||||||
width: 230px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
27
src/services/videoTelephone.js
Normal file
27
src/services/videoTelephone.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import service from "./index";
|
||||||
|
const api = '/mediate/api/trace/video/'
|
||||||
|
// videoTelephone
|
||||||
|
const apiVideoTelephone = {
|
||||||
|
// 当事人
|
||||||
|
getLitigantByCaseId: data => {
|
||||||
|
return service.service.get(`/mediate/cases/litigant/getLitigantByCaseId?id=${data}`)
|
||||||
|
},
|
||||||
|
// 预约
|
||||||
|
videoTelephoneBooking: data => {
|
||||||
|
return service.service.post(`${api}booking`, data)
|
||||||
|
},
|
||||||
|
// 修改
|
||||||
|
videoTelephoneModify: data => {
|
||||||
|
return service.service.post(`${api}modify`, data)
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
videoTelephoneCancel: data => {
|
||||||
|
return service.service.post(`${api}cancel`, data)
|
||||||
|
},
|
||||||
|
// 录像
|
||||||
|
// 进入房间回调
|
||||||
|
// 停止调解
|
||||||
|
// 开始录像
|
||||||
|
// 停止录像
|
||||||
|
}
|
||||||
|
export default apiVideoTelephone;
|
||||||
Loading…
x
Reference in New Issue
Block a user