rt-sim-training-client/src/views/ibp/home.vue

<template>
  <div class="joylink-card">
    <div class="scriptHeader">
      <div class="scriptList">IBP盘列表</div>
      <el-button size="small" type="primary" class="createScript" @click="handleCreate">{{ $t('scriptRecord.scriptCreate') }}</el-button>
    </div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" style="width: 91%;margin-left:4%;margin-top:20px;" />
    <create-ibp ref="createScript" :title="'创建数据'" @reloadTable="reloadTable" />
    <create-ibp ref="modifyScript" :title="'修改数据'" @reloadTable="reloadTable" @create="handleConfirmModify" />
  </div>
</template>

<script>
// import Cookies from 'js-cookie';
import { getStationList } from '@/api/runplan';
// import ConstConfig from '@/scripts/ConstConfig';
import { postIbpPublish, getIbpAllList, deleteIbpInfo } from '@/api/ibp';
import CreateIbp from './create';

export default {
    name: 'ScriptDraft',
    components: {
        CreateIbp
    },
    data() {
        return {
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                labelWidth: '100px',
                reset: true,
                show:false
            },
            stationList: [],
            queryList: {
                query: this.queryFunction,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: '关联站台',
                        prop: 'stationCode',
                        type: 'tag',
                        columnValue: (row) => { return this.covertData(row); },
                        tagType: (row) => { return ''; }
                    },
                    {
                        title: '创建时间',
                        prop: 'createTime'
                    },
                    {
                        type: 'button',
                        title: this.$t('scriptRecord.operate'),
                        width: '400',
                        buttons: [
                            {
                                name: '修改基础信息',
                                handleClick: this.editInfo,
                                type: 'primary'
                            },
                            {
                                name: '绘图',
                                handleClick: this.handleModify,
                                type: 'primary'
                            },
                            {
                                name: '删除',
                                handleClick: this.deleteScript,
                                type: 'danger'
                            },
                            {
                                name: '发布',
                                handleClick: this.publishScript,
                                type: 'primary'
                            }
                        ]
                    }
                ]
            }
        };
    },
    watch: {
        '$route' () {
            this.reloadTable();
        }
    },
    async created () {
        try {
            const res = await getStationList(this.$route.params.mapId);
            this.stationList = [];
            if (res.code == 200) {
                res.data.forEach(station => {
                    const param = {
                        name: station.name,
                        code: station.code
                    };
                    this.stationList.push(param);
                });
            }
        } catch (error) {
            console.log(error);
        }
    },
    methods: {
        queryFunction(params) {
            const param = {
                ...params,
                mapId: this.$route.params.mapId,
                stationCode: ''
            };
            return getIbpAllList(param);
        },
        reloadTable() {
            if (this.queryList && this.queryList.reload) {
                this.queryList.reload();
            }
        },
        covertData(row) {
            const staitonlist = this.stationList.filter(element => {
                return row.stationCode == element.code;
            });
            if (staitonlist.length) {
                return staitonlist[0].name;
            } else {
                return '';
            }
        },
        // 进入绘图数据
        handleModify(index, row) {
            const query = { mapId: this.$route.params.mapId, stationCode: row.stationCode, ibpId: row.id };
            this.$router.push({ path: `/design/ibp/edit`, query: query });
        },
        // 更新
        editInfo(index, row) {
            this.$refs.modifyScript.doShow(row);
        },
        // 创建
        handleCreate() {
            this.$refs.createScript.doShow(null);
        },
        // 发布
        publishScript(index, row) {
            this.$confirm('您确定发布，此条IBP盘数据', this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                postIbpPublish(row.id).then(response => {
                    this.$message.success('发布成功');
                    this.reloadTable();
                }).catch(() => {
                    this.$messageBox('发布失败');
                });
            }).catch(() => { });
        },
        // 删除此条数据
        deleteScript(index, row) {
            this.$confirm('您确定是否删除，此条IBP盘数据', this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                deleteIbpInfo(row.id).then(response => {
                    this.$message.success('删除成功');
                    this.reloadTable();
                }).catch(() => {
                    this.$messageBox('删除失败');
                });
            }).catch(() => { });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .joylink-card{
        height: 100%;
        overflow: auto;
    }
	.createScript{
        float: right;
        margin-right:20px;
	}
	.scriptHeader{
		display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
	}
	.scriptList{
		display:inline-block;padding:7px 0px
	}
	/deep/.el-button+.el-button {
		margin-left: 5px;
		margin-top: 5px;
	}
</style>