rt-sim-training-client/src/views/planMonitor/detail.vue

<template>
  <div class="joylink-card">
    <div class="runPlanHeader" style="width: 90%;margin-left:5%;margin-top:40px;display: inline-block;">
      <div class="runPlanList">{{ $t('planMonitor.openRunPlan.runPlanList') }}</div>
      <el-button v-if="isCreate" size="mini" type="primary" class="createRunPlan" @click="handleCreate">{{ $t('planMonitor.createRunningDiagram') }}</el-button>
    </div>
    <!--<QueryListPage ref="queryListPage" :query-form="queryForm" :pager-config="pagerConfig" :query-list="queryList" style="width: 91%;margin-left:4%;margin-top:20px;" />-->
    <el-card v-loading="loading" style="width: 91%;margin-left:4%;margin-top:20px;">
      <el-table
        :data="runPlanList"
        highlight-current-row
        :header-cell-style="headerCellStyle"
        size="medium"
        stripe
        border
      >
        <el-table-column prop="name" :label="this.$t('planMonitor.runGraphName')" />
        <el-table-column v-if="!(/^\/design\/userlist/.test(this.$route.fullPath))" :label="this.$t('global.status')">
          <template slot-scope="scope">
            <el-tag>{{ handlerStatus(scope.row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!(/^\/design\/userlist/.test(this.$route.fullPath))"
          prop="explanation"
          show-overflow-tooltip
          :label="this.$t('planMonitor.explanation')"
        />
        <el-table-column :label="this.$t('planMonitor.creationDate')">
          <template slot-scope="scope">
            <el-tag type="success">{{ handleTime(scope.row.createTime) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="this.$t('global.operate')" width="400">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status !=='1'" size="mini" class="button_box" type="success" @click="handleConfirm(scope.row)">{{ $t('planMonitor.load') }}</el-button>
            <el-button v-if="isCreate && scope.row.status !=='1'" size="mini" class="button_box" type="primary" @click="handleEdit(scope.row)">{{ $t('planMonitor.modifyName') }}</el-button>
            <el-button v-if="isCreate && scope.row.status !=='1'" size="mini" class="button_box" type="danger" @click="handleDelete(scope.row)">{{ $t('global.delete') }}</el-button>
            <el-button v-if="isCreate && scope.row.status ==='0'" size="mini" class="button_box" type="primary" @click="handlePublish(scope.row)">{{ hasRelease?$t('global.release'):$t('planMonitor.applyRelease') }}</el-button>
            <el-button v-if="scope.row.status === '1'" size="mini" class="button_box" type="primary" @click="handlePreview(scope.row)">{{ $t('planMonitor.preview') }}</el-button>
            <el-button v-if="scope.row.status === '1'" size="mini" class="button_box" type="danger" @click="handelRevert(scope.row)">{{ $t('planMonitor.revoke') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <create-empty-plan ref="createEmptyPlan" :plan-convert="PlanConvert" @dispatchDialog="dispatchDialog" @refresh="refresh" />
    <edit-plan-name ref="editPlan" @renewal="getRunPlanList" />
  </div>
</template>
<script>
import EditPlanName from './editTool/menus/editPlanName';
import CreateEmptyPlan from './editTool/menus/createEmptyPlan';
import { getRpListByUserMapId, publishRunPlan, releaseOrCancelRunPlan, previewRunPlan} from '@/api/designPlatform';
import { getRpListByMapId, deleteRunPlan } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/scripts/ConstDic';
export default {
    name: 'UserRunPlanList',
    components: {
        CreateEmptyPlan,
        EditPlanName
    },
    filters: {
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            type: 'add',
            runPlanList: [],
            runPlanDict: {},
            isCreate:false,
            PlanConvert: {},
            headerCellStyle: {
            }
            // pagerConfig: {
            //     pageSize: 'pageSize',
            //     pageIndex: 'pageNum'
            // },
            // queryForm: {
            //     show: false
            // },
            // queryList: {
            //     query: this.queryFunction,
            //     afterQuery: this.afterQuery,
            //     selectCheckShow: false,
            //     indexShow: false,
            //     columns: [
            //         {
            //             title: this.$t('planMonitor.runGraphName'),
            //             prop: 'name'
            //         },
            //         {
            //             title: this.$t('global.status'),
            //             prop: 'status'
            //         },
            //         {
            //             title: this.$t('planMonitor.explanation'),
            //             prop: 'explanation'
            //         },
            //         {
            //             title: this.$t('planMonitor.creationDate'),
            //             prop: 'createTime'
            //         },
            //         {
            //             type: 'button',
            //             title: this.$t('global.operate'),
            //             width: '450',
            //             buttons: [
            //                 {
            //                     name: this.$t('planMonitor.load'),
            //                     handleClick: this.handleConfirm,
            //                     showControl: (row) => {
            //                         return row.status !== '1';
            //                     }
            //                 },
            //                 {
            //                     name: this.$t('planMonitor.modifyName'),
            //                     handleClick: this.handleEdit,
            //                     showControl: (row) => {
            //                         return this.isCreate && row.status !== '1';
            //                     }
            //                 },
            //                 {
            //                     name: this.$t('global.delete'),
            //                     handleClick: this.handleDelete,
            //                     showControl: (row) => {
            //                         return this.isCreate && row.status !== '1';
            //                     }
            //                 },
            //                 {
            //                     name: this.hasRelease ? this.$t('global.release') : this.$t('planMonitor.applyRelease'),
            //                     handleClick: this.handlePublish,
            //                     showControl: (row) => {
            //                         return this.isCreate && row.status === '0';
            //                     }
            //                 },
            //                 {
            //                     name: this.$t('planMonitor.preview'),
            //                     handleClick: this.handlePreview,
            //                     showControl: (row) => {
            //                         return row.status === '1';
            //                     }
            //                 },
            //                 {
            //                     name: this.$t('planMonitor.revoke'),
            //                     handleClick: this.handelRevert,
            //                     showControl: (row) => {
            //                         return row.status === '1';
            //                     }
            //                 }
            //             ]
            //         }
            //     ]
            // }
        };
    },
    computed: {
        height() {
            return this.$store.state.app.height - 60 - 30;
        },
        hasRelease() {
            return this.$store.state.user.roles.includes('04') ||
                this.$store.state.user.roles.includes('05');
        }
    },
    watch: {
        '$route' () {
            this.getRunPlanList();
            this.PlanConvert = this.$theme.loadPlanConvert(this.$route.query.lineCode);
        }
    },
    created() {
        this.PlanConvert = this.$theme.loadPlanConvert(this.$route.query.lineCode);
    },
    mounted() {
        this.getRunPlanList();
    },
    methods:{
        refresh() {
            this.getRunPlanList();
        },
        // queryFunction(params) {
        //     this.isCreate = !/^\/design\/userlist/.test(this.$route.fullPath);
        //     return this.isCreate ? getRpListByMapId(this.$route.params.mapId) : getRpListByUserMapId(this.$route.params.mapId);
        // },
        getRunPlanList() {
            this.loading = true;
            if (/^\/design\/userlist/.test(this.$route.fullPath)) {
                this.isCreate = false;
                getRpListByUserMapId(this.$route.params.mapId).then((resp) => {
                    this.runPlanList = resp.data;
                    this.runPlanList.forEach(elem => {
                        this.runPlanDict[elem.id] = elem.name;
                    });
                    this.loading = false;
                }).catch(() => {
                    this.$messageBox(this.$t('planMonitor.openRunPlan.getRunPlanListFail'));
                    this.loading = false;
                });
            } else {
                this.isCreate = true;
                getRpListByMapId(this.$route.params.mapId).then((resp) => {
                    this.runPlanList = resp.data;
                    this.runPlanList.forEach(elem => {
                        this.runPlanDict[elem.id] = elem.name;
                    });
                    this.loading = false;
                }).catch(() => {
                    this.$messageBox(this.$t('planMonitor.openRunPlan.getRunPlanListFail'));
                    this.loading = false;
                });
            }
        },
        dispatchDialog() {
            this.$refs['createEmptyPlan'].doShow();
        },
        handleCreate() {
            this.$refs['createEmptyPlan'].doShow();
        },
        handleConfirm(row) {
            this.loadRunPlanData({
                planId: row.id,
                lineCode: this.$route.query.lineCode,
                planName: row.name
            });
        },
        // 修改运行图名称
        handleEdit(row) {
            if (row.id && row.name) {
                this.$refs.editPlan.doShow({id: row.id, name: row.name});
            } else {
                this.$message.info(this.$t('planMonitor.openRunPlan.pleaseSelectRunplan'));
            }
        },
        loadRunPlanData({ refresh, planId, lineCode, planName }) {
            if (refresh) {
                this.$store.dispatch('runPlan/refresh');
            } else {
                const query = { lineCode: lineCode, mapId: this.$route.params.mapId, planId: planId, planName: planName };
                if (/^\/design\/userlist/.test(this.$route.fullPath)) {
                    this.$router.push({ path: `/plan/usertool`, query: query });
                } else {
                    this.$router.push({ path: `/plan/tool`, query: query });
                }
            }
        },
        // 删除运行图
        handleDelete(row) {
            this.$confirm(this.$t('planMonitor.openRunPlan.confirmDeleteRunPlan'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('tip.confirm'),
                cancelButtonText: this.$t('tip.cancel'),
                type: 'warning'
            }).then(() => {
                deleteRunPlan(row.id).then(Response => {
                    this.$message.success(this.$t('planMonitor.openRunPlan.deleteSuccess'));
                    this.refresh();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
                });
            }).catch(() => { });
        },
        handlePublish(row) {
            this.$confirm(this.hasRelease ? this.$t('tip.publishRunPlanTips') : this.$t('tip.applyRunPlanTips'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('tip.confirm'),
                cancelButtonText: this.$t('tip.cancel'),
                type: 'warning'
            }).then(() => {
                if (this.hasRelease) {
                    publishRunPlan(row.id, {runPlanName: name}).then(resp => {
                        this.$message.success(this.$t('tip.publishRunPlanSuccess'));
                        this.refresh();
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.publishRunPlanFail'));
                        this.refresh();
                    });
                } else {
                    releaseOrCancelRunPlan(row.id, '1').then(resp => {
                        this.$message.success(this.$t('tip.applyRunPlanSuccess'));
                        this.refresh();
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.applyRunPlanFail'));
                        this.refresh();
                    });
                }
            });
        },
        handelRevert(row) {
            this.$confirm(this.$t('tip.cancelRunPlanTips'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('tip.confirm'),
                cancelButtonText: this.$t('tip.cancel'),
                type:'warning'
            }).then(() => {
                releaseOrCancelRunPlan(row.id, '0').then(resp=> {
                    this.$message.success(this.$t('tip.cancelRunPlanSuccess'));
                    this.refresh();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.cancelRunPlanFail'));
                    this.refresh();
                });
            });
        },
        handlerStatus(row) {
            let lessonStatus = '';
            switch (row.status) {
            case '0':
                lessonStatus = this.$t('lesson.notRelease');
                break;
            case '1':
                lessonStatus = this.$t('lesson.pendingReview');
                break;
            case '2':
                lessonStatus = this.$t('lesson.published');
                break;
            case '3':
                lessonStatus = this.$t('lesson.rejected');
                break;
            }
            return lessonStatus;
        },
        handleTime(time) {
            return time.replace('T', ' ');
        },
        handlePreview(row) {
            previewRunPlan(row.id).then(resp => {
                const query = {
                    prdType: '01', group: resp.data, mapId: row.mapId, planId: row.id, from:''
                };
                this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
                launchFullscreen();
            }).catch(error => {
                this.$messageBox(this.$t('tip.createSimulationFaild') + this.$t('global.colon') + error.message);
            });
        }
    }
};
</script>
<style scoped>
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .joylink-card{
        height: 100%;
        overflow: auto;
    }
	.el-button+.el-button{
		margin-top:5px;
		margin-left: 0px;
	}

	.createRunPlan{
		display:inline-block;float:right;margin-right:20px;
	}
	.runPlanHeader{
		display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
	}
	.runPlanList{
		display:inline-block;padding:7px 0px
	}
</style>