217 lines
8.5 KiB
Vue
217 lines
8.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="秘书确认调解员" :visible="confirmVisable" v-if="confirmVisable" @close="cancel" center
|
|
:distroy-on-close="true">
|
|
<div>
|
|
<div v-if="tableDataFlag">
|
|
<div style="margin-bottom: 20px;">选择调解员</div>
|
|
</div>
|
|
<el-table v-if="tableDataFlag" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55">
|
|
</el-table-column>
|
|
<el-table-column prop="mediatorName" label="调解员">
|
|
</el-table-column>
|
|
<el-table-column prop="specialty" label="专业">
|
|
</el-table-column>
|
|
<el-table-column prop="todoAmount" label="待办数量">
|
|
</el-table-column>
|
|
<el-table-column prop="completeAmount" label="已办数量">
|
|
</el-table-column>
|
|
</el-table>
|
|
<div>
|
|
<div style="margin-bottom: 20px;margin-top: 20px;">当前调解员</div>
|
|
</div>
|
|
<el-table ref="multipleTable" :data="tableDataNow" tooltip-effect="dark" style="width: 100%">
|
|
<el-table-column prop="mediatorName" label="调解员">
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="specialty" label="专业">
|
|
</el-table-column>
|
|
<el-table-column prop="todoAmount" label="待办数量">
|
|
</el-table-column>
|
|
<el-table-column prop="completeAmount" label="已办数量">
|
|
</el-table-column> -->
|
|
</el-table>
|
|
<div>
|
|
<div style="margin-bottom: 20px;margin-top: 20px;">申请人调解员</div>
|
|
</div>
|
|
<el-table ref="multipleTable" :data="applicantTable" tooltip-effect="dark" style="width: 100%">
|
|
<el-table-column prop="mediatorName" label="调解员">
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="specialty" label="专业">
|
|
</el-table-column>
|
|
<el-table-column prop="todoAmount" label="待办数量">
|
|
</el-table-column>
|
|
<el-table-column prop="completeAmount" label="已办数量">
|
|
</el-table-column> -->
|
|
</el-table>
|
|
<div>
|
|
<div style="margin-bottom: 20px;margin-top: 20px;">被申请人调解员</div>
|
|
</div>
|
|
<el-table ref="multipleTable" :data="respondentTable" tooltip-effect="dark" style="width: 100%">
|
|
<el-table-column prop="mediatorName" label="调解员">
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="specialty" label="专业">
|
|
</el-table-column>
|
|
<el-table-column prop="todoAmount" label="待办数量">
|
|
</el-table-column>
|
|
<el-table-column prop="completeAmount" label="已办数量">
|
|
</el-table-column> -->
|
|
</el-table>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
|
|
<el-button @click="submitMediator" class="endbutton1"><span>确 认</span></el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Message } from 'element-ui'
|
|
import { listMediator, updateBooking, selectReservation, verifyMediator } from '@/api/caseManagement/caseManagement.js'
|
|
import moment from "moment";
|
|
export default {
|
|
props: ["confirmVisable", "confirmData", "queryParams"],
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
tableDataNow: [],
|
|
applicantTable: [],
|
|
respondentTable: [],
|
|
multipleSelection: [],
|
|
tableDataFlag: true,
|
|
formLabelAlign: {
|
|
time: []
|
|
},
|
|
mediatorArr: [],
|
|
};
|
|
},
|
|
watch: {
|
|
confirmVisable(val) {
|
|
if (val) {
|
|
this.mediatorArr = [];
|
|
this.selectReservationFn({ id: this.confirmData.id })
|
|
listMediator().then(res => {
|
|
this.tableData = res.data;
|
|
})
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.$emit("cancelConfirm");
|
|
},
|
|
selectReservationFn(data) {
|
|
selectReservation(data).then(res => {
|
|
this.applicantTable = res.data.mediatorList;
|
|
this.respondentTable = res.data.resMediatorList;
|
|
this.tableDataNow = [{ mediatorId: res.data.mediatorId, mediatorName: res.data.mediatorName }];
|
|
|
|
if (this.tableDataNow[0].mediatorId) {
|
|
this.tableDataFlag = false;
|
|
} else {
|
|
this.tableDataFlag = true;
|
|
}
|
|
})
|
|
},
|
|
/**核实调解员 */
|
|
verifyMediatorFn(data) {
|
|
verifyMediator(data).then(res => {
|
|
this.$modal.msgSuccess("成功");
|
|
this.$emit("cancelConfirm");
|
|
this.$emit('getList', this.queryParams);
|
|
})
|
|
},
|
|
/**提交选择结果*/
|
|
async submitMediator() {
|
|
if (this.multipleSelection.length == 0 && this.tableDataNow.length > 0) {
|
|
this.verifyMediatorFn({
|
|
id: this.confirmData.id,
|
|
caseFlowId: this.confirmData.caseFlowId,
|
|
mediatorId: this.tableDataNow[0].mediatorId,
|
|
mediatorName: this.tableDataNow[0].mediatorName,
|
|
})
|
|
} else if (this.multipleSelection.length > 0 && !this.tableDataNow[0].mediatorId) {
|
|
this.verifyMediatorFn({
|
|
id: this.confirmData.id,
|
|
caseFlowId: this.confirmData.caseFlowId,
|
|
mediatorId: this.multipleSelection[0].mediatorId,
|
|
mediatorName: this.multipleSelection[0].mediatorName,
|
|
})
|
|
} else if (this.multipleSelection.length > 1 && !this.tableDataNow[0].mediatorId) {
|
|
Message.error('最多选择一名调解员');
|
|
return
|
|
}
|
|
// if (this.confirmFlag == 1) {
|
|
// let userArr = [];
|
|
// this.tableData.forEach(item => {
|
|
// userArr.push({
|
|
// userId: item.mediatorId,
|
|
// userName: item.mediatorName
|
|
// })
|
|
// })
|
|
// this.verifyMediatorFn({
|
|
// id: this.confirmData.id,
|
|
// caseFlowId: this.confirmData.caseFlowId,
|
|
// userList: userArr,
|
|
// // herDates: this.formLabelAlign.time
|
|
// })
|
|
// } else {
|
|
// if (this.multipleSelection.length > 1) {
|
|
// Message.error('最多选择一名调解员');
|
|
// return
|
|
// } else if (this.multipleSelection.length < 1) {
|
|
// Message.error('至少选择一名调解员');
|
|
// return
|
|
// }
|
|
// this.multipleSelection.forEach(item => {
|
|
// this.mediatorArr.push({
|
|
// userId: item.mediatorId,
|
|
// userName: item.mediatorName
|
|
// })
|
|
// })
|
|
// this.verifyMediatorFn({
|
|
// id: this.confirmData.id,
|
|
// caseFlowId: this.confirmData.caseFlowId,
|
|
// userList: this.mediatorArr,
|
|
// })
|
|
// }
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
console.log(val, "PPPPPPPPPPPPPPPPPPPP");
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.steps {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
::v-deep .el-step {
|
|
// width: 150px;
|
|
flex-basis: 25% !important;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
height: 500px !important;
|
|
overflow: auto !important;
|
|
}
|
|
|
|
::v-deep .el-dialog {
|
|
width: 800px;
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.timeTitle {
|
|
width: 1000%;
|
|
text-align: center;
|
|
}
|
|
</style> |