视频预约
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="navigation-bar flex-row mb-16">
|
||||
|
||||
@ -1,162 +1,279 @@
|
||||
<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">
|
||||
<!-- <div class="flex-row align-items-center justify-content-between mb-16 case-batch-num">
|
||||
<span>选中<a>{{eventDialog.caseids.length}}</a>个案件，系统将对您选择的案件进行批量电子短信送达！</span>
|
||||
</div> -->
|
||||
<el-form ref="ruleFormRepayment"
|
||||
:model="repaymentObj"
|
||||
:rules="rulesClientRule"
|
||||
label-width="130px">
|
||||
<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="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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
|
||||
<!-- <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">
|
||||
</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>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/services/caseManagement";
|
||||
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
|
||||
},
|
||||
import videoTelephone from "@/services/videoTelephone";
|
||||
|
||||
handleClose() {
|
||||
this.$emit('update:eventDialog', null)
|
||||
},
|
||||
}
|
||||
export default {
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-office-batch{
|
||||
padding: 16px 30px;
|
||||
max-height:500px;
|
||||
.tabs__search-criteria-title{
|
||||
width: 100%;
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.officelist {
|
||||
background-color: rgba(236, 238, 241, 0.8196078431);
|
||||
padding: 20px 20px;
|
||||
|
||||
.el-checkbox {
|
||||
width: 230px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</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