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

<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    <device-add ref="add" :project-code="projectCode" @reloadTable="reloadTable" />
    <edit-config-gateway ref="editConfigGateway" @reloadTable="reloadTable" />
    <edit-config ref="editConfig" @reloadTable="reloadTable" />
    <edit-config-screen ref="editConfigScreen" @reloadTable="reloadTable" />
    <input id="device-manage-url" v-model="url" style="opacity: 0;">
  </div>
</template>

<script>
import { getProjectDeviceList, deleteProjectDevice } from '@/api/project';
import DeviceAdd from './add';
import EditConfigGateway from './editConfigGateway';
import EditConfig from './editConfig';
import EditConfigScreen from './editConfigScreen';
import { getSessionStorage } from '@/utils/auth';
import ConstConfig from '@/scripts/ConstConfig';
export default {
    name: 'DeviceManage',
    components: {
        DeviceAdd,
        EditConfigGateway,
        EditConfig,
        EditConfigScreen
    },
    data() {
        return {
            examResultList: [],
            url: '',
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            deviceTypeList:ConstConfig.ConstSelect.projectDeviceTypeList,
            projectList: [{label:'西铁院', value: 'XTY'}, {label: '贵州装备', value:'GZB'}, {label: '盈达科技', value:'HYD'}],
            projectMap: {
                designxty: 'XTY',
                designgzb: 'GZB',
                designhyd: 'HYD'
            },
            queryForm: {
                labelWidth: '120px',
                reset: true,
                beforeQuery: this.beforeQuery,
                queryObject: {
                    code: {
                        type: 'text',
                        label: '设备编号'
                    },
                    type: {
                        type: 'select',
                        label: '设备类型',
                        config: {
                            data: ConstConfig.ConstSelect.projectDeviceTypeList
                        }
                    }
                }

            },
            queryList: {
                query: getProjectDeviceList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: '设备编号',
                        prop: 'code'
                    },
                    {
                        title: '项目名称',
                        prop: 'projectCode',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.project, this.projectList, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: '设备类型',
                        prop: 'type',
                        type: 'tag',
                        columnValue: (row) => { return this.$convertField(row.type, this.deviceTypeList, ['value', 'label']); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: '创建时间',
                        prop: 'createTime',
                        type: 'tag',
                        columnValue: (row) => { return this.handleTime(row.createTime); },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '300',
                        buttons: [
                            {
                                name: '编辑配置',
                                handleClick: this.editConfig
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.handleDelete,
                                type: 'danger'
                            },
                            {
                                name: '登录路径',
                                handleClick: this.getPath,
                                showControl: (row) => { return row.type !== 'SWITCH' && row.type !== 'SIGNAL' && row.type !== 'PSD'; }
                            }
                        ]
                    }
                ],
                actions: [
                    { text: this.$t('global.add'), handler: this.createProjectDevice}
                ]
            },
            currentModel: {}
        };
    },
    computed: {
        projectCode() {
            return this.projectMap[getSessionStorage('project')];
        }
    },
    created() {
    },
    methods: {
        beforeQuery(params) {
            params.projectCode = this.projectCode;
            return params;
        },
        createProjectDevice() {
            this.$refs.add.show();
        },
        computation(fieldValue, type) {
            let list = [];
            if (type === 'projectType') {
                list = this.projectList;
            } else if ( type === 'deviceType' ) {
                list = this.deviceTypeList;
            }
            let value = '';
            list.forEach((elem) => {
                elem.label = fieldValue;
                value = elem.value;
            });
            console.log(value, fieldValue, type);
            return value;
        },
        handleTime(time) {
            const timeList = time.split('T');
            let newTime = '';
            if (timeList.length > 1) {
                newTime = timeList[0] + ' ' + timeList[1];
            } else {
                newTime = time;
            }
            return newTime;
        },
        // 删除
        handleDelete(index, row) {
            this.$confirm('此操作将删除该项目设备！', this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                deleteProjectDevice(row.id).then(response => {
                    this.$message.success(this.$t('system.deleteSuccess'));
                    this.reloadTable();
                }).catch(() => {
                    this.reloadTable();
                    this.$messageBox(this.$t('error.deleteFailed'));
                });
            });
        },
        editConfig(index, row) {
            if (row.type === 'LW' || row.type === 'IBP' || row.type === 'ISCS_LW' || row.type === 'ISCS_CW') {
                this.$refs.editConfig.doShow(row);
            } else if (row.type === 'SWITCH' || row.type === 'SIGNAL' || row.type === 'PSD') {
                this.$refs.editConfigGateway.doShow(row);
            } else if (row.type == 'LSW' || row.type == 'CCTV') {
                this.$refs.editConfigScreen.doShow(row);
            } else {
                this.$messageBox('暂无配置内容');
            }
        },
        reloadTable() {
            this.queryList.reload();
        },
        getPath(index, row) {
            let url = '';
            url = `${window.location.protocol}//${window.location.host}/login?project=${this.projectCode.toLowerCase()}&projectDevice=${row.code}&type=${row.type}`;
            this.url = url;
            this.$messageBox();
            this.$confirm(`登录路径：${url}`, '登录路径', {
                confirmButtonText: '复制路径',
                cancelButtonText: '关闭',
                type: 'success'
            }).then(() => {
                const inputText = document.getElementById('device-manage-url');
                inputText.select(); // 选择对象
                document.execCommand('Copy'); // 执行浏览器复制命令
                this.$message.success('登录路径已经复制到粘贴板');
            });
        }
    }
};
</script>