版本管理

src/constants/enumerate.js

@@ -3,6 +3,10 @@ export const ABLE_TYPE = {
   0: "禁用",
   1: "启用"
 };
+export const ARCHIVED_TYPE = {
+  0: "未归档",
+  1: "已归档"
+};
 
 export const ROLE_TYPE = {
   DEV: "开发",

src/modules/admin/api.js

@@ -66,3 +66,14 @@ export const appModuleInsertOrUpdate = datas => {
 export const appModuleEnable = ({ id, enable }) => {
   return $post("/api/admin/module/update", { id, enable });
 };
+// app-version-manage
+export const appVersionList = datas => {
+  return $postParam("/api/admin/version/query", datas);
+};
+export const appVersionInsertOrUpdate = datas => {
+  if (datas.id) {
+    return $post("/api/admin/version/update", datas);
+  } else {
+    return $post("/api/admin/version/insert", datas);
+  }
+};

src/modules/admin/components/AppVersionManage.vue

@@ -0,0 +1,191 @@
+<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="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="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 } 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: {}
+    };
+  },
+  methods: {
+    visibleChange() {
+      // 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();
+    },
+    toArchived(row) {
+      const action = row.archived ? "取消归档" : "归档";
+      this.$confirm(`确定要${action}版本号【${row.name}】吗?`, "提示", {
+        type: "warning"
+      })
+        .then(async () => {
+          const archived = !row.archived;
+          await appVersionInsertOrUpdate({
+            id: row.id,
+            archived
+          });
+          row.archived = archived;
+          this.$message.success("操作成功！");
+        })
+        .catch(() => {});
+    }
+  }
+};
+</script>

src/modules/admin/components/ModifyApp.vue

@@ -17,14 +17,14 @@
       :key="modalForm.id"
       label-width="110px"
     >
-      <el-form-item prop="name" label="名称">
+      <el-form-item prop="name" label="名称：">
         <el-input
           v-model.trim="modalForm.name"
           placeholder="请输入名称"
           clearable
         ></el-input>
       </el-form-item>
-      <el-form-item prop="code" label="编码">
+      <el-form-item prop="code" label="编码：">
         <el-input
           v-model.trim="modalForm.code"
           placeholder="请输入编码"
@@ -121,7 +121,7 @@ export default {
       this.modalIsShow = true;
     },
     async submit() {
-      const valid = await this.$refs.modalFormComp.validate();
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
       if (this.isSubmit) return;

src/modules/admin/components/ModifyAppModule.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    class="modify-app"
+    class="modify-app-module"
     :visible.sync="modalIsShow"
     :title="title"
     top="10px"
@@ -15,16 +15,16 @@
       :model="modalForm"
       :rules="rules"
       :key="modalForm.id"
-      label-width="110px"
+      label-width="80px"
     >
-      <el-form-item prop="name" label="名称">
+      <el-form-item prop="name" label="名称：">
         <el-input
           v-model.trim="modalForm.name"
           placeholder="请输入名称"
           clearable
         ></el-input>
       </el-form-item>
-      <el-form-item prop="code" label="编码">
+      <el-form-item prop="code" label="编码：">
         <el-input
           v-model.trim="modalForm.code"
           placeholder="请输入编码"
@@ -117,7 +117,7 @@ export default {
       this.modalIsShow = true;
     },
     async submit() {
-      const valid = await this.$refs.modalFormComp.validate();
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
       if (this.isSubmit) return;

src/modules/admin/components/ModifyAppVersion.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-dialog
+    class="modify-app-version"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10px"
+    width="540px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      :key="modalForm.id"
+      label-width="80px"
+      @submit.native.prevent
+    >
+      <el-form-item prop="name" label="名称：">
+        <el-input
+          v-model.trim="modalForm.name"
+          placeholder="请输入名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="danger" @click="cancel" plain>取消</el-button>
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { appVersionInsertOrUpdate } from "../api";
+
+const initModalForm = {
+  id: "",
+  appId: null,
+  name: ""
+};
+
+export default {
+  name: "modify-app-version",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "应用版本";
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称",
+            trigger: "change"
+          },
+          {
+            pattern: /^\d{1,}\.\d{1,}\.\d{1,}$/,
+            message: "名称必须符合x.x.x格式",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "名称不能超过50",
+            trigger: "change"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = this.$objAssign(initModalForm, val);
+      this.$refs.modalFormComp.clearValidate();
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = { ...this.modalForm };
+      const data = await appVersionInsertOrUpdate(datas).catch(() => {});
+      this.isSubmit = false;
+
+      if (!data) return;
+
+      this.$message.success(this.title + "成功！");
+      this.$emit("modified");
+      this.cancel();
+    }
+  }
+};
+</script>

src/modules/admin/views/AppManage.vue

@@ -123,6 +123,11 @@
     <app-user-manage ref="AppUserManage" :app="curRow"></app-user-manage>
     <!-- AppModuleManage -->
     <app-module-manage ref="AppModuleManage" :app="curRow"></app-module-manage>
+    <!-- AppVersionManage -->
+    <app-version-manage
+      ref="AppVersionManage"
+      :app="curRow"
+    ></app-version-manage>
   </div>
 </template>
 
@@ -131,10 +136,11 @@ import { appQuery } from "../api";
 import ModifyApp from "../components/ModifyApp";
 import AppUserManage from "../components/AppUserManage.vue";
 import AppModuleManage from "../components/AppModuleManage.vue";
+import AppVersionManage from "../components/AppVersionManage.vue";
 
 export default {
   name: "app-manage",
-  components: { ModifyApp, AppUserManage, AppModuleManage },
+  components: { ModifyApp, AppUserManage, AppModuleManage, AppVersionManage },
   data() {
     return {
       filter: {
@@ -200,7 +206,8 @@ export default {
       this.$refs.AppModuleManage.open();
     },
     toEditVersion(row) {
-      console.log(row);
+      this.curRow = row;
+      this.$refs.AppVersionManage.open();
     },
     toEditEnv(row) {
       console.log(row);

src/modules/login/views/Login.vue

@@ -84,7 +84,7 @@ export default {
   },
   methods: {
     async submit(name) {
-      const valid = await this.$refs[name].validate();
+      const valid = await this.$refs[name].validate().catch(() => {});
       if (!valid) return;
 
       if (this.isSubmit) return;

src/plugins/filters.js

@@ -7,6 +7,9 @@ const DEFAULT_FIELD = "";
 Vue.filter("ableTypeFilter", function(val) {
   return val ? "启用" : "禁用";
 });
+Vue.filter("archivedTypeFilter", function(val) {
+  return val ? "已归档" : "未归档";
+});
 Vue.filter("defaultFieldFilter", function(val) {
   return val === "" || val === null || val === undefined ? DEFAULT_FIELD : val;
 });