Mediation-Frontend/src/views/caseManagement/components/confirmMediator.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({caseAppliId:this.confirmData.id}).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>