Mediation-Frontend/src/views/caseManagement/components/selectMediator.vue

<template>
    <div>
        <el-dialog title="预约时间/调解员" :visible="mediatorVisable" v-if="mediatorVisable" @close="cancel" center :distroy-on-close="true">
            <div>
                <div>
                    <div style="margin-bottom: 20px;">预约调解员</div>
                </div>
                <el-table 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-top: 20px;margin-bottom: 20px;">预约时间</div>
                    <el-form label-position="right" label-width="80px" :model="formLabelAlign">
                        <el-form-item label="时间1">
                            <el-date-picker v-model="formLabelAlign.time[0]" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <!-- 后期需要三个时间 -->
                        <!-- <el-form-item label="时间2">
                            <el-date-picker v-model="formLabelAlign.time[1]" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="时间3">
                            <el-date-picker v-model="formLabelAlign.time[2]" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item> -->
                    </el-form>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" class="endbutton1" round><span>取 消</span></el-button>
                <el-button @click="submitMediator" class="endbutton1" type="primary" round><span>确 认</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { Message } from 'element-ui'
import { listMediator,updateBooking } from '@/api/caseManagement/caseManagement.js'
import { createRoomId } from '@/api/metting/metting.js'
import moment from "moment";
export default {
    props: ["mediatorVisable", "mediatorData","queryParams"],
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            formLabelAlign: {
                time:[]
            },
            formTimeArr:[],
            mediatorArr:[]
        };
    },
    watch: {
        mediatorVisable(val) {
            if (val) {
                // this.this.multipleSelection = [];
                // this.formLabelAlign.time = [];
                this.mediatorArr = [];
                this.formTimeArr = [];
                listMediator().then(res=>{
                    this.tableData = res.data;
                })
            }
        }
    },
    methods: {
        cancel() {
            this.$emit("cancelMediator");
        },
        /**提交选择结果*/
        async submitMediator() {
            if (this.multipleSelection.length > 1) {
                Message.error('最多选择一名调解员');
                return
            }else if(this.multipleSelection.length < 1){
                Message.error('至少选择一名调解员');
                return
            }
            if(this.formLabelAlign.time.length < 1){
                Message.error('至少选择一个时间');
                return
            }
            this.formLabelAlign.time.forEach(item=>{
                item = moment(
                    item
                ).format("YYYY-MM-DD HH:mm:ss");
                this.formTimeArr.push(item)
            })
            this.multipleSelection.forEach(item=>{
                this.mediatorArr.push({
                    userId:item.mediatorId,
                    userName:item.mediatorName
                })
            })
            // await this.createRoomIdFn({
            //     caseId:this.mediatorData.id
            // })
            await this.updateBookingFn({
                id:this.mediatorData.id,
                caseFlowId:this.mediatorData.caseFlowId,
                userList:this.mediatorArr,
                herDates:this.formTimeArr
            })
        },
        async updateBookingFn(data){
            await updateBooking(data).then(res=>{
                this.$modal.msgSuccess("成功");
                this.$emit("cancelMediator");
                this.$emit('getList', this.queryParams);
            })
        },
        // 生成会议房间号
        async createRoomIdFn(data){
            await createRoomId(data).then(res=>{
                console.log(res,"房间号");
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(this.multipleSelection,"LLLLLLLLLLLLLLLLL");
        }
    },
};
</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>