kd-aiot-frontend/src/views/technology/route/components/historyModal.vue

<template>
    <el-dialog title="历史版本" :visible.sync="visible" v-if="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="60%">

        <el-col :span="8">
            <el-form-item label="工艺路线编码：">
                <span> {{ form.code }} </span>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="工艺路线名称：">
                <span> {{ form.name }} </span>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="产品编码：">
                <span> {{ form.categoryCode }} </span>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="产品名称：">
                <span> {{ form.categoryName }} </span>
            </el-form-item>
        </el-col>



        <ele-pro-table ref="table" :columns="columns" :datasource="datasource" height="calc(100vh - 350px)"
            class="dict-table">
            <!-- 表头工具栏 -->

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

        </ele-pro-table>


    </el-dialog>
</template>
  
<script>
import AssetTree from '@/components/AssetTree';
import route from '@/api/technology/route';
export default {
    components: { AssetTree },
    data() {
        return {
            visible: false,
            // 表格列配置
            columns: [
                {
                    columnKey: 'index',
                    type: 'index',
                    width: 45,
                    align: 'center',
                    reserveSelection: true
                },
                {
                    prop: 'version',
                    label: '版本',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'status',
                    label: '状态',
                    align: 'center',
                    slot: 'status',
                    showOverflowTooltip: true,
                    minWidth: 110
                },

                {
                    prop: 'createTime',
                    label: '创建日期',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },

                {
                    prop: 'releaseTime',
                    label: '发布日期',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },


                {
                    prop: 'downTime',
                    label: '停用时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },









            ],

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

        }
    },

    watch: {

    },
    methods: {
        /* 表格数据源 */
        async datasource({ page, limit }) {
            const res = await route.list({
                code: this.form.code,

                pageNum: page,
                size: limit
            });
            return res;
        },


        open(item) {
            if (item) {
                this.form = item
            }
            this.visible = true
        },


        handleClose() {
            this.visible = false
            this.form = null

        },

        checkStatus(row) {
            let obj = this.statusList.find((it) => it.value == row.status);
            return obj.label;
        },

    }
}
</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>