great_service/src/views/windowTicketSales/model/batchLock.vue

<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" custom-class="custom-dialog" width="75%"
        :before-close="handleClose">
        <div class="dialog-content">
            <div>
                <span class="demonstration">选择月份：</span>
                <el-date-picker v-model="performMonth" type="month" value-format="yyyy-MM" placeholder="选择月"
                    @change="hanldeChange">
                </el-date-picker>
            </div>
            <div style="display: flex;justify-content: flex-end;margin-bottom: 20px;">
                <el-button type="primary" icon="el-icon-finished" @click="handleCheckAllChange">{{ checkAll ?
                    '取消全选' : '全选' }}</el-button>
            </div>
            <div v-loading="loading" style="margin: 0 20px;height: 430px;overflow-y: auto;">
                <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                @change="handleCheckAllChange">全选</el-checkbox> -->
                <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
                    <el-checkbox v-for="item in performTimeList" :label="item.id" :key="item.id" :value="item.id">
                        <span>{{ item.performDate + ' (' +
                            item.performTimeStart + '-' + item.performTimeEnd + ')' }}</span>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div v-loading="loading" style="margin-top: 20px;">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="锁定原因" prop="remark">
                        <el-input type="textarea" :rows="4" placeholder="请输入锁定原因" maxlength="250"
                            v-model="ruleForm.remark" style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button :loading="loading" type="primary" @click="lockOrUnLockFun">提交</el-button>
        </span>
    </el-dialog>
</template>
<script>
import {
    batchLockApi,
    merchantPerformTimeListNew
} from "@/api/windowTicketSales/ticketingSales"
import moment from "moment"

export default {
    name: "LockSeat",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            list: [],
            title: '',
            auditoriumId: '',
            timeId: '',
            ruleForm: {
                remark: null
            },
            rules: {
                remark: [
                    { required: true, message: '请输入锁定原因', trigger: ['blur', 'change'] },
                ]
            },
            checkAll: false,
            checkedList: [],
            performTimeList: [], // 场次
            isIndeterminate: true,
            performMonth: '',
        }
    },
    methods: {
        /**
         * @param list 解锁列表
         * @param list1 上锁列表
         */
        async openDialog(list = [], list1 = [], auditoriumId = null, timeId = null) {
            this.auditoriumId = auditoriumId
            // this.timeId = timeId
            this.performMonth = moment().format("yyyy-MM")
            this.merchantPerformTimeListFun();
            this.list = list.length > 0 ? list : list1
            this.title = '批量锁定座位'
            // console.log(list, list1)
            this.dialogVisible = true
            this.$nextTick(() => {
                if (list.length == 0) {
                    this.$refs.ruleForm.clearValidate()
                }
            })
        },
        // 全选
        handleCheckAllChange() {
            this.checkAll = !this.checkAll
            let ids = this.performTimeList.map(ele => ele.id)
            this.isIndeterminate = false;
            this.checkedList = this.checkAll ? ids : [];
        },
        handleCheckedChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.performTimeList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.performTimeList.length;
        },
        // 选月份
        hanldeChange() {
            if (!this.performMonth) {
                this.$message.info(`请选择月份查询场次！`);
                return
            }
            // console.log(this.performMonth, 'this.performMonth');
            this.merchantPerformTimeListFun();
        },
        /**  获取场次  */
        async merchantPerformTimeListFun() {
            try {
                let param = {
                    auditoriumId: this.auditoriumId,
                    performMonth: this.performMonth,
                    status: 1,
                };
                let res = await merchantPerformTimeListNew(param)
                if (res.code == 200) {
                    this.performTimeList = res.data.list

                }
            } catch (error) {

            }
        },
        handleClose() {
            this.ruleForm = {}
            this.dialogVisible = false
            this.checkAll = false
            this.isIndeterminate = false;
            this.checkedList = []
        },
        /**  批量座位锁定  */
        async lockOrUnLockFun(type) {
            try {
                if (this.checkedList.length <= 0) {
                    this.$message.info(`请勾选需要批量锁定座位的场次`);
                    return
                }
                if (!this.ruleForm.remark) {
                    this.$message.info(`请输入锁定原因`);
                    return
                }
                this.loading = true
                let list = []
                this.list.forEach((item, index) => {
                    list.push({
                        "auditoriumId": this.auditoriumId,
                        "seatId": item.id,
                    })
                })
                let res = await batchLockApi({
                    type: 0, // 类型 0锁定，1解锁
                    seatList: list,
                    remark: this.ruleForm.remark,
                    timeIds: this.checkedList
                })
                this.loading = false
                if (res.code) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'success'
                    });
                    this.$emit('querySeatListFun', true)
                    this.handleClose()
                }

            } catch (error) {
                this.loading = false
                this.$message({
                    showClose: true,
                    message: "操作失败!!!",
                    type: 'error'
                });
                console.error('error===', error)
            }

        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 20px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #dcdada;
    border-radius: 6px;
}

.dialog-content {
    height: 660px;
    overflow-y: auto;
}
</style>