kd-aiot-frontend-mes/src/views/produceOrder/components/scheduleDialog.vue

<template>
    <el-dialog :title="title" :visible.sync="visible" v-if="visible" :before-close="handleClose"
        :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="75%">
        <el-card shadow="never">

            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" row-key="id" height="calc(100vh - 350px)"
                class="dict-table" @cell-click="cellClick">
                <!-- 表头工具栏 -->
                <template v-slot:action="{ row }">
                    <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
                </template>
            </ele-pro-table>
        </el-card>
        <div class="btns">
            <el-button type="primary" size="small" @click="selected">选择</el-button>
            <el-button size="small" @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>
  
<script>

import {
    teamqueuepage,
} from '@/api/workforceManagement/schedule';
export default {
    components: {},
    data() {
        return {
            visible: false,

            // 表格列配置
            columns: [
                {
                    columnKey: 'index',
                    type: 'index',
                    width: 45,
                    align: 'center',
                    reserveSelection: true
                },
                {
                    prop: 'name',
                    label: '排班组名称'
                },
                {
                    label: '总人数',
                    prop: 'totalPersonNumber'
                },
                {
                    label: '创建人',
                    prop: 'createUserName'
                },
                {
                    label: '状态',
                    prop: 'status',
                    slot: 'status',
                },

                {
                    action: 'action',
                    slot: 'action',
                    align: 'center',
                    label: '选择'
                }
            ],
            title: null,
            categoryLevelId: null,
            radio: null,
            idx: null,


        }
    },

    watch: {

    },
    methods: {
        /* 表格数据源 */
        datasource({ page, where, limit }) {
            let data = teamqueuepage({
                ...where,
                pageNum: page,
                size: limit
            });

            return data;
        },

        /* 刷新表格 */
        reload(where) {
            this.isCategory = false
            this.$refs.table.reload({ pageNum: 1, where: where });
        },
        open(item, type, idx) {
            this.visible = true
        },





        // 单击获取id
        cellClick(row) {
            this.current = row
            this.radio = row.id
        },
        handleClose() {
            this.visible = false
            this.current = null
            this.radio = ''
        },
        selected() {
            if (!this.current) {
                return this.$message.warning('请选择排班组')
            }
            this.$emit('changeProduct', this.title, this.current, this.idx)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>
.tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
}

.table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
        background: #f2f2f2;
    }
}

.pagination {
    text-align: right;
    padding: 10px 0;
}

.btns {
    text-align: center;
    padding: 10px 0;
}

.topsearch {
    margin-bottom: 15px;
}
</style>