rt-sim-training-client/src/views/planMonitor/editTool/menus/openRunPlan.vue

<template>
  <div>
    <el-dialog
      v-dialogDrag
      class="planEdit__tool open-runplan"
      :title="title"
      :visible.sync="show"
      width="800px"
      :before-close="doClose"
      :z-index="2000"
      :modal="true"
      :close-on-click-modal="false"
    >
      <el-table :data="runPlanList" height="350" border style="width: 100%">
        <el-table-column prop="name" label="运行图名称" />
        <el-table-column prop="createTime" label="创建日期" width="180" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" class="button_box" @click="handleConfirm(scope.row)">加载</el-button>
            <el-button size="mini" class="button_box" @click="handleEdit(scope.row)">修改名称</el-button>
            <el-button size="mini" class="button_box" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height+'px'}">
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="runPlanList"
          :props="defaultProps"
          highlight-current
          default-expand-all
          :style="{height: height-20+'px'}"
          @node-click="handleNodeClick"
        />
      </el-scrollbar> -->
      <!-- <el-row type="flex" justify="center" class="button-group">
        <el-button v-if="type == 'add'" type="primary" @click="handleConfirm">选择运行图</el-button>
        <el-button v-if="type == 'delete'" type="primary" @click="handleDelete">删除</el-button>
        <el-button v-if="type == 'edit'" type="primary" @click="handleEdit">修改</el-button>
        <el-button @click="dialogShow = false">取 消</el-button>
      </el-row> -->
    </el-dialog>
    <edit-plan-name ref="editPlan" @renewal="getRunPlanList" />
  </div>
</template>
<script>
import { getRpListByMapId, deleteRunPlan } from '@/api/runplan';
import { UrlConfig } from '@/scripts/ConstDic';
import EditPlanName from './editPlanName';

export default {
    name: 'OpenRunPlan',
    components: {
        EditPlanName
    },
    props: {
        skinCode: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            height: 260,
            // planId: '',
            // planName: '',
            type: 'add',
            // defaultShowKeys: [],
            runPlanList: [],
            runPlanDict: {}
            // defaultProps: {
            // 	label: 'name'
            // }
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return this.$t('planMonitor.openRunPlan.runPlanList');
        }
    },
    mounted() {
        this.loadRunPlanData({
            planId: this.$route.query.planId,
            skinCode: this.$route.query.skinCode,
            planName: this.$route.query.planName
        });
    },
    methods: {
        // handleNodeClick(data) {
        // 	this.planId = data.id;
        // 	this.planName = data.name;
        // },
        loadRunPlanData({ refresh, planId, skinCode, planName }) {
            if (refresh) {
                this.$store.dispatch('runPlan/refresh');
            } else {
                const query = { skinCode: skinCode, mapId: this.$route.query.mapId, planId: planId, planName: planName };
                this.$router.push({ path: `${UrlConfig.plan.tool}`, query: query });
            }
        },
        getRunPlanList() {
            getRpListByMapId(this.$route.query.mapId).then((resp) => {
                this.runPlanList = resp.data;
                this.runPlanList.forEach(elem => {
                    this.runPlanDict[elem.id] = elem.name;
                });
                this.dialogShow = true;
            }).catch(() => {
                this.$messageBox(this.$t('planMonitor.openRunPlan.getRunPlanListFail'));
            });
        },
        doShow(data) {
            this.type = data.type || 'add';
            this.getRunPlanList();
        },
        doClose() {
            this.dialogShow = false;
            // this.planId = '';
            // this.planName = '';
        },
        // 跳转到对应运行图
        handleConfirm(row) {
            this.loadRunPlanData({
                planId: row.id,
                skinCode: this.$route.query.skinCode,
                planName: row.name
            });
            this.doClose();
        },
        // 删除运行图
        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'));
                    if (row.id === this.$route.query.planId) {
                        const query = { skinCode: this.$route.query.skinCode, mapId: this.$route.query.mapId };
                        this.$router.push({ path: `${UrlConfig.plan.tool}`, query: query });
                    }
                    this.doClose();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
                });
            }).catch(() => { });
        },
        // 修改运行图名称
        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'));
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ {
        .el-button {
            margin-left: 40px !important;
            margin-right: 40px !important;
        }

        .el-tree {
            margin: 10px !important;
            // background: #ECE9D8 !important;
        }
    }
	.button_box{
		float: left;
		margin: 0 2px!important;
	}
</style>