kd-aiot-frontend/src/views/technology/productParam/components/ParamModal.vue

<template>
    <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="70%">

        <el-card shadow="never">
            <user-search @search="reload" />

            <!-- 数据表格 -->
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection"
                row-key="code">


                <template v-slot:status="{ row }">
                    {{ checkType(row.categoryType) }}
                </template>
                <!-- 状态列 -->

                <template v-slot:textType="{ row }">
                    {{ row.textType == 1 ? '数值' : row.textType == 2 ? '选择' : row.textType == 3 ? '产品参数' : row.textType == 4
                        ? '规格' :
                        '' }}
                </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 UserSearch from '@/views/technology/parameter/components/user-search.vue'
import parameter from '@/api/technology/parameter';
export default {
    components: { UserSearch },
    data() {
        return {
            visible: false,
            title: '产品参数',

            // 表格列配置
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    selectable: (row, index) => {
                      return !this.tableData.some((it) => it.id == row.id);
                    },
                    reserveSelection: true,
                    fixed: 'left'
                },
                {
                    prop: 'code',
                    label: '参数编码',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    prop: 'name',
                    label: '参数名称',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },


                {
                    prop: 'textType',
                    label: '参数类型',
                    showOverflowTooltip: true,
                    align: 'center',
                    slot: 'textType',
                    minWidth: 110
                },
                {
                    align: 'center',
                    prop: 'description',
                    label: '文本描述',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'maxValue',
                    label: '参数上限',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'minValue',
                    label: '参数下限',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'defaultValue',
                    label: '默认值',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'categoryType',
                    label: '参数分类',
                    align: 'center',
                    slot: 'status',
                    showOverflowTooltip: true
                },


            ],
            statusList: [
                { label: '工艺', value: 0 },
                { label: '工序', value: 1 },
                { label: '产品', value: 2 },
                { label: '原料', value: 3 },
                { label: '设备', value: 4 },
                { label: '其他', value: 5 }
            ],
            // 表格选中数据
            selection: [],

            tableData: [],
            current: null

        }
    },

    watch: {

    },
    methods: {

        /*回显类型 */
        checkType(id) {
            const obj = this.statusList.find((item) => item.value == id);
            return obj.label;
        },

        /* 表格数据源 */
        async datasource({ page, limit, where, order }) {
            const res = await parameter.list({
                ...where,
                ...order,
                pageNum: page,
                size: limit
            });
            return res;
        },

        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
        },
        open(item, current) {
            if (item) {
                this.tableData = item
            }
            if(current) {
                this.current = current
            }
            this.visible = true
        },






        handleClose() {
            this.visible = false
            this.$refs.table.setSelectedRows([]);
            this.selection = []

        },
        selected() {
            if (!this.selection.length) {
                this.$message.error('请至少选择一条数据');
                return;
            }
            this.$emit('chooseModal', this.selection, this.current)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>
.btns {
    text-align: center;
    padding: 10px 0;
}
</style>