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

<template>
  <div class="app-version-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-select
              v-model="filter.archived"
              placeholder="是否归档"
              clearable
            >
              <el-option
                v-for="(val, key) in ARCHIVED_TYPE"
                :key="key"
                :value="val"
                :label="val"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary" icon="ios-search" @click="toPage(1)"
              >查询</el-button
            >
            <el-button 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="名称"> </el-table-column>
          <el-table-column prop="archived" label="是否为主干版本" width="80">
            <template slot-scope="scope">
              <span
                :class="{
                  'color-success': scope.row.id === curMasterVersionId
                }"
              ></span>
              {{ scope.row.id === curMasterVersionId ? "主干版本" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="archived" label="状态" width="80">
            <template slot-scope="scope">
              <span
                :class="scope.row.archived ? 'color-success' : 'color-info'"
              ></span>
              {{ scope.row.archived | archivedTypeFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="170">
            <span slot-scope="scope">{{
              scope.row.createTime | timestampFilter
            }}</span>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="170">
            <span slot-scope="scope">{{
              scope.row.updateTime | timestampFilter
            }}</span>
          </el-table-column>
          <el-table-column label="操作" width="100" class-name="action-column">
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                @click="toEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                class="btn-primary"
                type="text"
                :disabled="scope.row.id === curMasterVersionId"
                @click="toSetMaster(scope.row)"
                >设置为主干版本</el-button
              >
              <el-button
                :class="scope.row.archived ? 'btn-danger' : 'btn-primary'"
                type="text"
                @click="toArchived(scope.row)"
                >{{ scope.row.archived ? "取消归档" : "归档" }}</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>

    <!-- ModifyAppVersion -->
    <modify-app-version
      ref="ModifyAppVersion"
      :instance="curRow"
      @modified="getList"
    ></modify-app-version>
  </div>
</template>

<script>
import {
  appVersionList,
  appVersionInsertOrUpdate,
  appSetMasterVersion
} from "../api";
import { ARCHIVED_TYPE } from "../../../constants/enumerate";
import ModifyAppVersion from "../components/ModifyAppVersion.vue";

export default {
  name: "app-version-manage",
  components: { ModifyAppVersion },
  props: {
    app: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      ARCHIVED_TYPE,
      filter: {
        archived: null
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      curMasterVersionId: null
    };
  },
  methods: {
    visibleChange() {
      this.curMasterVersionId = this.app.masterVertionId;
      // this.toPage(1);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        appId: this.app.id,
        pageNumber: this.current,
        pageSize: this.size
      };
      if (datas.archived !== null && datas.archived !== "")
        datas.archived = !!datas.archived;
      const data = await appVersionList(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.curRow = { appId: this.app.id };
      this.$refs.ModifyAppVersion.open();
    },
    toEdit(row) {
      this.curRow = { ...row, appId: this.app.id };
      this.$refs.ModifyAppVersion.open();
    },
    async toSetMaster(row) {
      const confirm = await this.$confirm(
        `确定要设置版本号【${row.name}】为主干版本吗?`,
        "提示",
        {
          type: "warning"
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await appSetMasterVersion({
        appId: this.app.id,
        versionId: row.id
      });
      this.$message.success("操作成功！");
      this.curMasterVersionId = row.id;
      this.$emit("master-change");
    },
    async toArchived(row) {
      const action = row.archived ? "取消归档" : "归档";
      const confirm = await this.$confirm(
        `确定要${action}版本号【${row.name}】吗?`,
        "提示",
        {
          type: "warning"
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      const archived = !row.archived;
      await appVersionInsertOrUpdate({
        id: row.id,
        archived
      });
      row.archived = archived;
      this.$message.success("操作成功！");
    }
  }
};
</script>