great_service/src/views/ticket/schedulingConfiguration/dialog/perFormListBox.vue

<template>
    <el-dialog :title="title" :visible.sync="open" width="90%" class="text-dia-log-class" append-to-body center
        :close-on-click-modal="false" @close="cancel">
        <div class="dialog">
            <div style="padding-bottom: 10px;">
                <el-button type="primary" v-hasPermi="['ticketMr:schedulingConfiguration:add']" @click="handleAdd('ADD')">新增</el-button>
            </div>
            <el-table ref="tables" v-loading="loading" :data="timeList" border>
                <el-table-column label="序号" align="center" type="index" />
                <el-table-column label="编号ID" align="center" prop="planNo" />
                <el-table-column label="日期范围" align="center" prop="dateStart">
                    <template slot-scope="scope">
                        {{ moment(scope.row.dateStart).format('YYYY年MM月DD日') }} - {{ moment(scope.row.dateEnd).format('YYYY年MM月DD日') }}
                    </template>
                </el-table-column>
                <el-table-column label="星期" align="center" prop="weekDay">
                    <template slot-scope="scope">
                        <div v-if="scope.row.weekDay">
                            <span :key="item" v-for="(item,index) in scope.row.weekDay.split(',')">{{ weekList[item] }}{{ index == scope.row.weekDay.split(',').length-1?'':', '}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="票务" align="center" prop="goodsNames" />
                <el-table-column label="场次信息" align="center" prop="planSessionList">
                    <template slot-scope="scope">
                        <div v-if="scope.row.planSessionList">
                            <span 
                            v-for="(item,index) in scope.row.planSessionList"
                            :key="index"
                            style="margin-right: 10px;"
                            >{{ item.startInterval }} - {{ item.endInterval }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="最后修改时间" align="center" prop="updateTime" />
                <el-table-column label="最后修改人" align="center" prop="updateBy" />
                <el-table-column label="操作" align="center" prop="name">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="copyAdd(scope.row)"
                             v-hasPermi="['ticketMr:schedulingConfiguration:add']"
                        >复制</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            style="margin-left: 10px;"
                            @click="deleteFun(scope.row)"
                             v-hasPermi="['ticketMr:schedulingConfiguration:delect']"
                            >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getPerformTimeByIdFun"
            />
        </span>
        <!-- 新增/编辑弹框 -->
        <add-and-edit
        ref="addAndEdit"
        @getList="getPerformTimeByIdFun"
        />
    </el-dialog>
</template>

<script>
import { deleteById,pageList, getPerformTimeById } from "@/api/ticketMr/schedulingConfiguration";
import addAndEdit from "./addAndEdit";
import moment from "moment"
export default {
    name: "PerFormListBox",
    components: { addAndEdit },
    data() {
        return {
            title: "编辑",
            model: "EDIT",
            open: false,
            loading: false,
            timeList: [],
            weekList: ["","星期一","星期二","星期三","星期四","星期五","星期六","星期天"],
            form: {
                id: undefined,
                timeList: [],
                insertType: '1',
                useStock: 0
            },
            radio1: 1,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    methods: {
        moment,
        /**
         * 打开弹框
         * @date 2023-11-22
         * @param {any} obj
         * @returns {any}
         */
        async openDialog(title, obj, type) {
            this.open = true;
            this.title = title
            this.form = {}
            this.queryParams.pageNum = 1
            this.getPerformTimeByIdFun()
        },
        /**  票务信息  */
        async getPerformTimeByIdFun() {
            try {
                this.loading = true
                let res = await pageList({
                    ...this.queryParams
                })
                if (res.code == 200) {
                    this.timeList = res.data.rows
                    this.total = res.data.total
                }
                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error====", error)
            }
        },
        /** 新增按钮操作 */
        handleAdd(type) {
            this.$refs["addAndEdit"].openDialog("新增数据", null, type);
        },
        /** 复刻 */
        copyAdd(row) {
            this.$refs["addAndEdit"].openDialog("新增数据", row, "ADD");
        },
        /**
         * 保存
         * @date 2023-11-22
         * @returns {any}
         */
        async submitForm() {
            try {
                this.loading = true
                let res = await releaseById({
                    id: this.form.id,
                    status: this.form.status == 1 ? 2 : 1
                })
                if (res.code == 200) {
                    this.$message.success("操作成功!");
                    this.$emit("getList")
                    this.cancel()
                }
                this.loading = false
            } catch (error) {
                console.error("error===", error)
                this.loading = false
            }
        },
        /**
         * 关闭弹框
         * @date 2023-11-22
         * @returns {any}
         */
        cancel() {
            this.$emit("getList")
            this.open = false;
        },
        deleteFun(row){
            this.$modal.confirm(`您确定要删除此次排期计划吗？`).then(()=> {
                this.handleDelete(row)
            }).catch(() => {});
        },
        /**  删除  */
        async handleDelete(row) {
            try {
                this.loading = true
                let res = await deleteById({
                    id: row.id
                })
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.getPerformTimeByIdFun()
                }
                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error====", error)
            }
        },
        openDetails() {

        }
    },
};
</script>

<style lang="scss" scoped>
.dialog {
    height: 65vh;
    overflow-y: auto;

    .upload-btn {
        width: 100px;
        height: 100px;
        background-color: #fbfdff;
        border: dashed 1px #c0ccda;
        border-radius: 5px;

        i {
            font-size: 30px;
            margin-top: 20px;
        }

        &-text {
            margin-top: -10px;
        }
    }

    .avatar {
        cursor: pointer;
    }
}
</style>