环境新增

src/modules/admin/api.js

@@ -80,3 +80,17 @@ export const appVersionInsertOrUpdate = datas => {
     return $post("/api/admin/version/insert", datas);
   }
 };
+// app-env-manage
+export const appEnvList = datas => {
+  return $postParam("/api/admin/env/list", datas);
+};
+export const appEnvTypes = () => {
+  return $postParam("/api/admin/app/types", {});
+};
+export const appEnvInsertOrUpdate = datas => {
+  if (datas.id) {
+    return $post("/api/admin/env/update", datas);
+  } else {
+    return $post("/api/admin/env/insert", datas);
+  }
+};

src/modules/admin/components/AppEnvManage.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="app-env-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-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="code" label="编码"> </el-table-column>
+          <el-table-column prop="typeName" label="分类" width="100">
+          </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
+              >
+            </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>
+
+    <!-- ModifyAppEnv -->
+    <modify-app-env
+      ref="ModifyAppEnv"
+      :instance="curRow"
+      :types="envTypes"
+      @modified="getList"
+    ></modify-app-env>
+  </div>
+</template>
+
+<script>
+import { appEnvList, appEnvTypes } from "../api";
+import { ABLE_TYPE } from "../../../constants/enumerate";
+import ModifyAppEnv from "../components/ModifyAppEnv.vue";
+
+export default {
+  name: "app-env-manage",
+  components: { ModifyAppEnv },
+  props: {
+    app: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      ABLE_TYPE,
+      filter: {
+        enable: null,
+        code: ""
+      },
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      dataList: [],
+      curRow: {},
+      envTypes: [],
+      envTypeMap: {}
+    };
+  },
+  methods: {
+    async visibleChange() {
+      // await this.getEnvTypes();
+      // this.toPage(1);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async getEnvTypes() {
+      if (this.envTypes.length) return;
+
+      const res = await appEnvTypes();
+      this.envTypes = res || [];
+      let envTypeMap = {};
+      this.envTypes.forEach(({ code, name }) => {
+        envTypeMap[code] = name;
+      });
+      this.envTypeMap = envTypeMap;
+    },
+    async getList() {
+      const datas = {
+        ...this.filter,
+        appId: this.app.id,
+        pageNumber: this.current,
+        pageSize: this.size
+      };
+      if (datas.enable !== null && datas.enable !== "")
+        datas.enable = !!datas.enable;
+      const data = await appEnvList(datas);
+      this.dataList = data.records.map(item => {
+        item.typeName = this.envTypeMap[item.type];
+        return item;
+      });
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    toAdd() {
+      this.curRow = { appId: this.app.id };
+      this.$refs.ModifyAppEnv.open();
+    },
+    toEdit(row) {
+      this.curRow = { ...row, appId: this.app.id };
+      this.$refs.ModifyAppEnv.open();
+    }
+  }
+};
+</script>

src/modules/admin/components/ModifyAppEnv.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-dialog
+    class="modify-app-env"
+    :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"
+    >
+      <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-input
+          v-model.trim="modalForm.code"
+          placeholder="请输入编码"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="type" label="分类：">
+        <el-select
+          v-model="modalForm.type"
+          placeholder="请选择分类"
+          clearable
+          :disabled="isEdit"
+        >
+          <el-option
+            v-for="item in types"
+            :key="item.code"
+            :value="item.code"
+            :label="item.name"
+          ></el-option>
+        </el-select>
+      </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 { appEnvInsertOrUpdate } from "../api";
+
+const initModalForm = {
+  id: "",
+  appId: null,
+  name: "",
+  code: "",
+  type: ""
+};
+
+export default {
+  name: "modify-app-env",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    types: {
+      type: Array,
+      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"
+          },
+          {
+            max: 50,
+            message: "名称不能超过50",
+            trigger: "change"
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: "请输入编码",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "编码不能超过50",
+            trigger: "change"
+          }
+        ],
+        type: [
+          {
+            required: true,
+            message: "请选择分类",
+            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 appEnvInsertOrUpdate(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

@@ -116,6 +116,8 @@
       :app="curRow"
       @master-change="getList"
     ></app-version-manage>
+    <!-- AppEnvManage -->
+    <app-env-manage ref="AppEnvManage" :app="curRow"></app-env-manage>
   </div>
 </template>
 
@@ -125,10 +127,17 @@ import ModifyApp from "../components/ModifyApp";
 import AppUserManage from "../components/AppUserManage.vue";
 import AppModuleManage from "../components/AppModuleManage.vue";
 import AppVersionManage from "../components/AppVersionManage.vue";
+import AppEnvManage from "../components/AppEnvManage.vue";
 
 export default {
   name: "app-manage",
-  components: { ModifyApp, AppUserManage, AppModuleManage, AppVersionManage },
+  components: {
+    ModifyApp,
+    AppUserManage,
+    AppModuleManage,
+    AppVersionManage,
+    AppEnvManage
+  },
   data() {
     return {
       filter: {
@@ -195,7 +204,8 @@ export default {
       this.$refs.AppVersionManage.open();
     },
     toEditEnv(row) {
-      console.log(row);
+      this.curRow = row;
+      this.$refs.AppEnvManage.open();
     },
     toEditBaseline(row) {
       console.log(row);