rt-sim-training-client/src/views/system/commandDictionary/index.vue

<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <show-condition ref="showCondition" />
  </div>
</template>

<script>
import { getCommandList, delCommand } from '@/api/management/dictionary';
import { getLineCodeList } from '@/api/management/mapline';
import ShowCondition from './showCondition';
import Commands from '@/scripts/plugin/Commands';

export default {
    name: 'CommandDictionary',
    components: {
        ShowCondition
    },
    data() {
        return {
            taskStatusList: [],
            operateList: [],
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '80px',
                reset: true,
                queryObject: {
                    lineCode: {
                        type: 'select',
                        label: this.$t('system.lineCode'),
                        config: {
                            data: []
                        }
                    },
                    operateObject: {
                        type: 'select',
                        label: this.$t('system.deviceType'),
                        config: {
                            data: []
                        }
                    }
                }
            },
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('system.lineCode'), // 线路编号
                        prop: 'lineCode',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.lineCode, this.taskStatusList, ['code', 'name']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('system.controlMode'), // 控制模式
                        prop: 'controlMode',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.controlMode, this.$ConstSelect.controlMode, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('system.simulationRole'), // 仿真角色
                        prop: 'simulationRole',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.simulationRole, this.$ConstSelect.simulationRole, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('system.deviceType'), // 操作对象
                        prop: 'operateObject',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.operateObject, this.$ConstSelect.deviceTypeList, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('system.instructionType'), // 指令类型
                        prop: 'operate',
                        type: 'tag',
                        columnValue: (row) => { return this.convertField(row.operate, row.operateObject, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('system.parameterName'), // 指令参数名称
                        prop: 'paramList',
                        type: 'tagMore',
                        columnValue: (row) => { return this.replace(row.paramList); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '350',
                        buttons: [
                            {
                                name: '查看条件参数',
                                handleClick: this.showCondition
                            },
                            {
                                name: this.$t('global.edit'),
                                handleClick: this.handleEdit
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.handleDelete,
                                type: 'danger'
                            }
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('global.add'), handler: this.handleAdd }
                ]
            },

            currentModel: {}
        };
    },

    mounted () {
        this.loadInitData();
    },
    methods: {
        async loadInitData() {
            try {
                this.taskStatusList = [];
                this.mapList = [];
                const list = await getLineCodeList();
                this.taskStatusList = list.data;
                list.data.forEach(elem => {
                    this.queryForm.queryObject.lineCode.config.data.push({ value: elem.code, label: elem.name });
                });
                this.$ConstSelect.deviceTypeList.forEach(elem => {
                    this.queryForm.queryObject.operateObject.config.data.push(elem);
                });
            } catch (error) {
                console.log(error);
            }
        },

        queryFunction(params) {
            if (!params['lineCode']) {
                params['lineCode'] = '';
            }
            return getCommandList(params);
        },
        convertField(fieldValue, operateObject, converFormat) {
            if (Commands) {
                // debugger;
                const enumList = Object.values(Commands[operateObject]);
                if (enumList && converFormat && converFormat.length >= 2) {
                    const value = converFormat[0];
                    const label = converFormat[1];
                    for (let i = 0; i < enumList.length; i++) {
                        if (fieldValue == enumList[i][value]) {
                            return enumList[i][label];
                        }
                    }
                }
            }
        },
        replace(fieldValue) {
            const arr = [];
            if (fieldValue && fieldValue.length) {
                fieldValue.forEach((v, j) => {
                    if (v.name) {
                        arr.push(v.name);
                    }
                });
            }
            return arr;
        },
        // 显示条件参数
        showCondition(index, row) {
            this.$refs.showCondition.doShow(row.conditionList);
        },
        // 编辑
        handleEdit(index, row) {
            this.$router.push({ path: `/system/commands/Detail`, query: { type: 'edit', id: row.id } });
        },
        // 新增指令
        handleAdd() {
            this.$router.push({ path: `/system/commands/Detail`, query: { type: 'add' } });
        },
        handleDelete(index, row) {
            this.$confirm(this.$t('system.wellDelType'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                delCommand(row.id).then(response => {
                    this.$message.success(this.$t('system.deleteSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.deleteFailed'));
                });
            });
        },
        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>