ops-web/src/modules/admin/components/AppDeployManage.vue

<template>
  <div class="app-deploy-manage">
    <el-dialog
      class="page-dialog"
      :visible.sync="modalIsShow"
      title="应用部署管理"
      top="10px"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @opened="visibleChange"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="80px"
          inline
        >
          <el-form-item label="模糊查询">
            <el-input
              v-model="filter.nameStartWith"
              placeholder="名称前缀"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary" icon="ios-search" @click="getList"
              >查询</el-button
            >
            <el-button
              v-if="checkPrivilege('DEPLOY_INSERT')"
              type="success"
              icon="md-add"
              @click="toAdd"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="part-box part-box-pad">
        <el-table ref="TableList" :data="dataList">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="名称" min-width="200">
          </el-table-column>
          <el-table-column
            prop="modeName"
            label="部署方式"
            min-width="80"
          ></el-table-column>
          <el-table-column label="操作" width="200" class-name="action-column">
            <template slot-scope="scope">
              <el-button
                v-if="checkPrivilege('DEPLOY_EDIT', scope.row.id)"
                class="btn-primary"
                type="text"
                @click="toEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                v-if="checkPrivilege('DEPLOY_ORG_EDIT', scope.row.id)"
                class="btn-primary"
                type="text"
                @click="toBindOrg(scope.row)"
                >关联机构</el-button
              >
              <el-button
                v-if="checkPrivilege('DEPLOY_DEVICE_EDIT', scope.row.id)"
                class="btn-primary"
                type="text"
                @click="toBindDevice(scope.row)"
                >关联设备</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="part-page">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :current-page="current"
            :total="total"
            :page-size="size"
            @current-change="toPage"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- ModifyAppDeploy -->
    <modify-app-deploy
      v-if="
        checkPrivilege('DEPLOY_INSERT') || checkPrivilege('app_deploy_edit')
      "
      ref="ModifyAppDeploy"
      :instance="curRow"
      :deploy-modes="deployModes"
      @modified="getList"
    ></modify-app-deploy>
    <!-- AppDeployBindOrg -->
    <app-deploy-bind-org
      v-if="checkPrivilege('DEPLOY_ORG_EDIT', scope.row.id)"
      ref="AppDeployBindOrg"
      :instance="curRow"
    ></app-deploy-bind-org>
    <!-- AppDeployBindDevice -->
    <app-deploy-bind-device
      v-if="checkPrivilege('DEPLOY_DEVICE_EDIT', scope.row.id)"
      ref="AppDeployBindDevice"
      :instance="curRow"
    ></app-deploy-bind-device>
  </div>
</template>

<script>
import { appDeployList, appDeployModes } from "../api";
import ModifyAppDeploy from "./ModifyAppDeploy.vue";
import AppDeployBindOrg from "./AppDeployBindOrg.vue";
import AppDeployBindDevice from "./AppDeployBindDevice.vue";

export default {
  name: "app-deploy-manage",
  components: { ModifyAppDeploy, AppDeployBindOrg, AppDeployBindDevice },
  props: {
    app: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        nameStartWith: "",
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      deployModes: [],
      deployModeMap: {},
    };
  },
  methods: {
    async visibleChange() {
      await this.getDeployModes();
      this.getList();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getDeployModes() {
      if (this.deployModes.length) return;

      const res = await appDeployModes();
      this.deployModes = res || [];
      let deployModeMap = {};
      this.deployModes.forEach(({ code, name }) => {
        deployModeMap[code] = name;
      });
      this.deployModeMap = deployModeMap;
    },
    async getList() {
      const datas = {
        ...this.filter,
        appId: this.app.id,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await appDeployList(datas);
      this.dataList = data.records.map((item) => {
        item.modeName = this.deployModeMap[item.mode];
        return item;
      });
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.curRow = { appId: this.app.id };
      this.$refs.ModifyAppDeploy.open();
    },
    toEdit(row) {
      this.curRow = { ...row, appId: this.app.id };
      this.$refs.ModifyAppDeploy.open();
    },
    toBindOrg(row) {
      this.curRow = { ...row, appId: this.app.id };
      this.$refs.AppDeployBindOrg.open();
    },
    toBindDevice(row) {
      this.curRow = { ...row, appId: this.app.id };
      this.$refs.AppDeployBindDevice.open();
    },
  },
};
</script>