kd-aiot-frontend/src/views/technology/version/components/routeModal.vue

<template>
    <el-dialog title="选择工艺路线" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="80%">
        <el-card shadow="never">
            <routetSearch @search="reload" />


            <!-- 表格 -->

            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" height="calc(100vh - 350px)"
                :need-page="true" class="dict-table" @cell-click="cellClick">

                <!-- 状态列 -->
                <template v-slot:status="{ row }">
                    {{ checkStatus(row) }}
                </template>
                <!-- 表头工具栏 -->
                <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 AssetTree from '@/components/AssetTree';
import routetSearch from './route-search.vue'
import route from '@/api/technology/route';
export default {
    components: { AssetTree, routetSearch },
    data() {
        return {
            visible: false,
            // 表格列配置
            columns: [

                {
                    prop: 'code',
                    label: '工艺路线组编码',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    prop: 'name',
                    label: '工艺路线名称',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    align: 'center',
                    prop: 'categoryCode',
                    label: '产品编码',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'categoryName',
                    label: '产品名称',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'version',
                    label: '工艺路线版本',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'status',
                    label: '状态',
                    align: 'center',
                    slot: 'status',
                    showOverflowTooltip: true,
                    minWidth: 110
                },

                {
                    action: 'action',
                    slot: 'action',
                    align: 'center',
                    label: '选择'
                }


            ],

            radio: null,

            statusList: [
                { label: '草稿', value: -1 },
                { label: '失效', value: 0 },
                { label: '生效', value: 1 }
            ],
        }
    },

    watch: {

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


        checkStatus(row) {
            let obj = this.statusList.find((it) => it.value == row.status);
            return obj.label;
        },
        /* 刷新表格 */
        reload() {
            this.$refs.table.reload();
        },
        open(item) {
            if (item) {
                this.current = {
                    id: item.routingId,
                    name: item.routingName,
                    code: item.routingCode
                }
                this.radio = item.routingId
            }
            this.visible = true
        },

        // 单击获取id
        cellClick(row) {
            this.current = row
            this.radio = row.id
        },
        handleClose() {
            this.visible = false
            this.current = null
            this.radio = ''
        },
        selected() {
            console.log(this.current)
            if (!this.current) {
                return this.$message.warning('请选择工艺路线')
            }
            this.$emit('changeRoute', this.current)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>

.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;
}

</style>