应用基线新增

src/components/AppSelect.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="app-select"
+    :placeholder="placeholder"
+    filterable
+    :clearable="clearable"
+    :disabled="disabled"
+    @change="select"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item.id"
+      :value="item.id"
+      :label="item.name"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { appList } from "../modules/admin/api";
+
+export default {
+  name: "app-select",
+  props: {
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: "请选择应用" },
+    value: { type: [Number, String], default: "" },
+    clearable: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      optionList: [],
+      selected: ""
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.selected = val;
+      }
+    }
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search() {
+      this.optionList = [];
+
+      const res = await appList();
+      this.optionList = res || [];
+    },
+    select() {
+      this.$emit("input", this.selected);
+      this.$emit(
+        "change",
+        this.optionList.find(item => item.id === this.selected)
+      );
+    }
+  }
+};
+</script>

src/components/EnvSelect.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="env-select"
+    :placeholder="placeholder"
+    filterable
+    :clearable="clearable"
+    :disabled="disabled"
+    @change="select"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item.id"
+      :value="item.id"
+      :label="item.name"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { appEnvList } from "../modules/admin/api";
+
+export default {
+  name: "env-select",
+  props: {
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: "请选择环境" },
+    value: { type: [Number, String], default: "" },
+    clearable: { type: Boolean, default: true },
+    appId: { type: String, default: "" }
+  },
+  data() {
+    return {
+      optionList: [],
+      selected: ""
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.selected = val;
+      }
+    },
+    appId(val, oldval) {
+      if (val !== oldval) {
+        this.search();
+        this.$emit("input", "");
+        this.$emit("change", {});
+      }
+    }
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search() {
+      this.optionList = [];
+      if (!this.appId) return;
+
+      const res = await appEnvList({
+        appId: this.appId
+      });
+      this.optionList = res || [];
+    },
+    select() {
+      this.$emit("input", this.selected);
+      this.$emit(
+        "change",
+        this.optionList.find(item => item.id === this.selected)
+      );
+    }
+  }
+};
+</script>

src/components/ModuleSelect.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="module-select"
+    :placeholder="placeholder"
+    filterable
+    :clearable="clearable"
+    :disabled="disabled"
+    @change="select"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item.id"
+      :value="item.id"
+      :label="item.name"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { appModuleList } from "../modules/admin/api";
+
+export default {
+  name: "module-select",
+  props: {
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: "请选择模块" },
+    value: { type: [Number, String], default: "" },
+    clearable: { type: Boolean, default: true },
+    appId: { type: String, default: "" }
+  },
+  data() {
+    return {
+      optionList: [],
+      selected: ""
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.selected = val;
+      }
+    },
+    appId(val, oldval) {
+      if (val !== oldval) {
+        this.search();
+        this.$emit("input", "");
+        this.$emit("change", {});
+      }
+    }
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search() {
+      this.optionList = [];
+      if (!this.appId) return;
+
+      const res = await appModuleList({
+        appId: this.appId
+      });
+      this.optionList = res || [];
+    },
+    select() {
+      this.$emit("input", this.selected);
+      this.$emit(
+        "change",
+        this.optionList.find(item => item.id === this.selected)
+      );
+    }
+  }
+};
+</script>

src/components/UploadFetchFile.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="upload-file-view">
+    <el-input
+      :style="{ width: inputWidth }"
+      v-model.trim="attachmentName"
+      placeholder="文件名称"
+      readonly
+    ></el-input>
+    <el-upload
+      action="upload-url"
+      :on-change="handleFileChange"
+      :show-file-list="false"
+      :auto-upload="false"
+      :disabled="disabled"
+      style="display:inline-block;margin: 0 10px;"
+      ref="UploadComp"
+    >
+      <el-button type="primary" :disabled="disabled" :loading="loading"
+        >选择</el-button
+      >
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { fileMD5 } from "@/plugins/md5";
+
+export default {
+  name: "upload-file-view",
+  props: {
+    inputWidth: {
+      type: String,
+      default: "200px"
+    },
+    format: {
+      type: Array,
+      default() {
+        return ["xls", "xlsx"];
+      }
+    },
+    maxSize: {
+      type: Number,
+      default: 20 * 1024 * 1024
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      attachmentName: "",
+      canUpload: false,
+      loading: false,
+      res: {}
+    };
+  },
+  methods: {
+    checkFileFormat(fileType) {
+      const _file_format = fileType
+        .split(".")
+        .pop()
+        .toLocaleLowerCase();
+      return this.format.some(
+        item => item.toLocaleLowerCase() === _file_format
+      );
+    },
+    async handleFileChange(file) {
+      console.log(file);
+      this.attachmentName = file.name;
+      this.canUpload = file.status === "ready";
+
+      if (file.size > this.maxSize) {
+        this.handleExceededSize();
+        return Promise.reject();
+      }
+
+      if (!this.checkFileFormat(file.name)) {
+        this.handleFormatError();
+        return Promise.reject();
+      }
+      this.$emit("valid-change", { success: true });
+
+      const md5 = await fileMD5(file.raw);
+
+      this.$emit("file-change", {
+        md5,
+        filename: file.name,
+        file: file.raw
+      });
+    },
+    // upload(options) {
+    //   let formData = new FormData();
+    //   Object.entries(options.data).forEach(([k, v]) => {
+    //     formData.append(k, v);
+    //   });
+    //   formData.append("file", options.file);
+    //   this.$emit("uploading");
+
+    //   return $post(options.action, formData, { headers: options.headers });
+    // },
+    handleFormatError() {
+      const content = "只支持文件格式为" + this.format.join("/");
+      this.res = {
+        success: false,
+        message: content
+      };
+      this.$emit("valid-change", this.res);
+    },
+    handleExceededSize() {
+      const content =
+        "文件大小不能超过" + Math.floor(this.maxSize / 1024) + "M";
+      this.res = {
+        success: false,
+        message: content
+      };
+      this.$emit("valid-change", this.res);
+    },
+    setAttachmentName(name) {
+      this.attachmentName = name;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.upload-file-view {
+  display: inline-block;
+}
+</style>

src/components/VersionSelect.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="version-select"
+    :placeholder="placeholder"
+    filterable
+    :clearable="clearable"
+    :disabled="disabled"
+    @change="select"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item.id"
+      :value="item.id"
+      :label="item.name"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { appVersionList } from "../modules/admin/api";
+
+export default {
+  name: "version-select",
+  props: {
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: "请选择版本" },
+    value: { type: [Number, String], default: "" },
+    clearable: { type: Boolean, default: true },
+    appId: { type: String, default: "" }
+  },
+  data() {
+    return {
+      optionList: [],
+      selected: ""
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.selected = val;
+      }
+    },
+    appId(val, oldval) {
+      if (val !== oldval) {
+        this.search();
+        this.$emit("input", "");
+        this.$emit("change", {});
+      }
+    }
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search() {
+      this.optionList = [];
+      if (!this.appId) return;
+
+      const res = await appVersionList({
+        appId: this.appId,
+        pageNumber: 1,
+        pageSize: 100
+      });
+      this.optionList = res.records;
+    },
+    select() {
+      this.$emit("input", this.selected);
+      this.$emit(
+        "change",
+        this.optionList.find(item => item.id === this.selected)
+      );
+    }
+  }
+};
+</script>

src/modules/admin/api.js

@@ -33,6 +33,10 @@ export const userInsertOrUpdate = datas => {
 export const appQuery = datas => {
   return $get("/api/admin/app/query", datas);
 };
+export const appList = datas => {
+  // id/code/nameStartWith
+  return $get("/api/admin/app/list", datas);
+};
 export const appInsertOrUpdate = datas => {
   if (datas.id) {
     return $post("/api/admin/app/update", datas);
@@ -94,3 +98,28 @@ export const appEnvInsertOrUpdate = datas => {
     return $post("/api/admin/env/insert", datas);
   }
 };
+// app-config
+export const appConfigGroups = () => {
+  return $postParam("/api/admin/config/groups", {});
+};
+export const appConfigModes = () => {
+  return $postParam("/api/admin/config/modes", {});
+};
+// baseline
+export const appConfigBaseline = datas => {
+  return $postParam("/api/admin/config/baseline", datas);
+};
+export const appConfigBaselineUpdate = (datas, headerData) => {
+  return $post("/api/admin/config/baseline/update", datas, {
+    header: headerData
+  });
+};
+export const appConfigBaselineItemUpdate = datas => {
+  return $postParam("/api/admin/config/baseline/item/update", datas);
+};
+export const appConfigList = datas => {
+  return $postParam("/api/admin/config/list", datas);
+};
+export const appConfigItemUpdate = datas => {
+  return $postParam("/api/admin/config/item/update", datas);
+};

src/modules/admin/components/AppBaselineManage.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="app-baseline-manage">
+    <div class="part-box part-box-filter part-box-flex">
+      <el-form
+        ref="FilterForm"
+        label-position="left"
+        label-width="80px"
+        :model="filter"
+        :rules="rules"
+        inline
+      >
+        <el-form-item prop="appId" label="应用">
+          <app-select v-model="filter.appId" clearable></app-select>
+        </el-form-item>
+        <el-form-item prop="versionId" label="版本">
+          <app-select
+            v-model="filter.versionId"
+            :app-id="filter.appId"
+            :clearable="false"
+          ></app-select>
+        </el-form-item>
+        <el-form-item prop="moduleId" label="模块">
+          <app-select
+            v-model="filter.moduleId"
+            :app-id="filter.appId"
+            :clearable="false"
+          ></app-select>
+        </el-form-item>
+        <el-form-item label-width="0px">
+          <el-button type="primary" icon="ios-search" @click="search"
+            >查询</el-button
+          >
+          <el-button type="success" icon="md-add" @click="toUpdate"
+            >修改</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="key" label="配置项"> </el-table-column>
+        <el-table-column prop="value" label="配置值"> </el-table-column>
+        <el-table-column prop="mode" label="模式">
+          <span slot-scope="scope">{{ modeMap[scope.row.mode] }}</span>
+        </el-table-column>
+        <el-table-column prop="comment" label="注释"> </el-table-column>
+        <el-table-column label="操作" width="80" 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>
+
+    <!-- UpdateAppBaseline -->
+    <update-app-baseline
+      ref="UpdateAppBaseline"
+      :data="filter"
+      @modified="search"
+    ></update-app-baseline>
+    <!-- ModifyAppBaselineItem -->
+    <modify-app-baseline-item
+      ref="ModifyAppBaselineItem"
+      :instance="curRow"
+      @modified="baselineItemModified"
+    ></modify-app-baseline-item>
+  </div>
+</template>
+
+<script>
+import { appConfigBaseline, appConfigModes } from "../api";
+import UpdateAppBaseline from "../components/UpdateAppBaseline.vue";
+import ModifyAppBaselineItem from "../components/ModifyAppBaselineItem.vue";
+
+export default {
+  name: "app-baseline-manage",
+  components: { UpdateAppBaseline, ModifyAppBaselineItem },
+  data() {
+    return {
+      filter: {
+        appId: "",
+        moduleId: "",
+        versionId: ""
+      },
+      rules: {
+        appId: [
+          {
+            required: true,
+            message: "请选择应用",
+            triggr: "change"
+          }
+        ],
+        moduleId: [
+          {
+            required: true,
+            message: "请选择模块",
+            triggr: "change"
+          }
+        ],
+        versionId: [
+          {
+            required: true,
+            message: "请选择版本",
+            triggr: "change"
+          }
+        ]
+      },
+      dataList: [],
+      curRow: {},
+      modeMap: {}
+    };
+  },
+  methods: {
+    async getConfigModes() {
+      const data = await appConfigModes();
+      let modeMap = {};
+      data.forEach(({ code, name }) => {
+        modeMap[code] = name;
+      });
+      this.modeMap = modeMap;
+    },
+    async search() {
+      const valid = await this.$refs.FilterForm.validate().catch(() => {});
+      if (!valid) return;
+
+      const data = await appConfigBaseline(this.filter);
+      this.dataList = data;
+    },
+    async toUpdate() {
+      const valid = await this.$refs.FilterForm.validate().catch(() => {});
+      if (!valid) return;
+
+      this.$refs.UpdateAppBaseline.open();
+    },
+    toEdit(row) {
+      this.curRow = row;
+      this.$refs.ModifyAppBaselineItem.open();
+    },
+    baselineItemModified(data) {
+      console.log(data);
+    }
+  }
+};
+</script>

src/modules/admin/components/AppEnvManage.vue

@@ -57,17 +57,6 @@
             </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>
 
@@ -105,9 +94,6 @@ export default {
         enable: null,
         code: ""
       },
-      current: 1,
-      size: this.GLOBAL.pageSize,
-      total: 0,
       dataList: [],
       curRow: {},
       envTypes: [],
@@ -117,7 +103,7 @@ export default {
   methods: {
     async visibleChange() {
       // await this.getEnvTypes();
-      // this.toPage(1);
+      // this.getList();
     },
     cancel() {
       this.modalIsShow = false;
@@ -139,22 +125,15 @@ export default {
     async getList() {
       const datas = {
         ...this.filter,
-        appId: this.app.id,
-        pageNumber: this.current,
-        pageSize: this.size
+        appId: this.app.id
       };
       if (datas.enable !== null && datas.enable !== "")
         datas.enable = !!datas.enable;
       const data = await appEnvList(datas);
-      this.dataList = data.records.map(item => {
+      this.dataList = data.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 };

src/modules/admin/components/AppModuleManage.vue

@@ -83,17 +83,6 @@
             </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>
 
@@ -130,16 +119,13 @@ export default {
         enable: null,
         code: ""
       },
-      current: 1,
-      size: this.GLOBAL.pageSize,
-      total: 0,
       dataList: [],
       curRow: {}
     };
   },
   methods: {
     visibleChange() {
-      // this.toPage(1);
+      // this.getList();
     },
     cancel() {
       this.modalIsShow = false;
@@ -150,19 +136,12 @@ export default {
     async getList() {
       const datas = {
         ...this.filter,
-        appId: this.app.id,
-        pageNumber: this.current,
-        pageSize: this.size
+        appId: this.app.id
       };
       if (datas.enable !== null && datas.enable !== "")
         datas.enable = !!datas.enable;
       const data = await appModuleList(datas);
-      this.dataList = data.records;
-      this.total = data.total;
-    },
-    toPage(page) {
-      this.current = page;
-      this.getList();
+      this.dataList = data || [];
     },
     toAdd() {
       this.curRow = { appId: this.app.id };

src/modules/admin/components/ModifyAppBaselineItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-dialog
+    class="modify-app-baseline-item"
+    :visible.sync="modalIsShow"
+    title="应用配置基线配置项修改"
+    top="10vh"
+    width="540px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <el-form ref="modalFormComp" :model="modalForm" label-width="80px">
+      <el-form-item prop="key" label="配置项：">
+        {{ modalForm.key }}
+      </el-form-item>
+      <el-form-item prop="mode" label="模式：">
+        <el-select v-model="modalForm.mode" placeholder="请选择模式" clearable>
+          <el-option
+            v-for="item in modes"
+            :key="item.code"
+            :value="item.code"
+            :label="item.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="comment" label="注释：">
+        <el-input
+          v-model.trim="modalForm.comment"
+          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 { appConfigBaselineItemUpdate } from "../api";
+
+const initModalForm = {
+  appId: "",
+  moduleId: "",
+  versionId: "",
+  key: "",
+  mode: "",
+  comment: ""
+};
+
+export default {
+  name: "modify-app-baseline-item",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    modes: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm }
+    };
+  },
+  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 appConfigBaselineItemUpdate(datas).catch(() => {});
+      this.isSubmit = false;
+
+      if (!data) return;
+
+      this.$message.success("修改成功！");
+      this.$emit("modified", data);
+      this.cancel();
+    }
+  }
+};
+</script>

src/modules/admin/components/UpdateAppBaseline.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog
+    class="update-app-baseline"
+    :visible.sync="modalIsShow"
+    title="应用配置基线修改"
+    top="10vh"
+    width="500px"
+    :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="100px"
+    >
+      <el-form-item prop="uploadData" label="上传文件：">
+        <upload-fetch-file
+          input-width="320px"
+          :format="format"
+          @valid-change="validChange"
+          @file-change="fileChange"
+          ref="UploadFetchFile"
+        ></upload-fetch-file>
+        <p class="tips-info">
+          上传的文件只支持{{ format.join(",") }}，大小不超过2M
+        </p>
+      </el-form-item>
+      <el-form-item label="继承版本号：">
+        <version-select
+          v-model="modalForm.inheritVersionId"
+          :app-id="data.appId"
+        ></version-select>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" style="text-align: right">
+      <el-button type="primary" @click="confirm">确定</el-button>
+      <el-button type="danger" @click="cancel" plain>返回</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import UploadFetchFile from "../../../components/UploadFetchFile.vue";
+import { appConfigBaselineUpdate } from "../api";
+
+export default {
+  name: "update-app-baseline",
+  components: { UploadFetchFile },
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          appId: "",
+          versionId: "",
+          moduleId: ""
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: {},
+      rules: {
+        uploadData: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (this.uploadData) {
+                callback();
+              } else {
+                return callback(new Error(`请选择合适的文件`));
+              }
+            },
+            trigger: "change"
+          }
+        ]
+      },
+      // upload
+      format: ["properties"],
+      maxSize: 2 * 1024 * 1024,
+      uploadData: null
+    };
+  },
+  methods: {
+    visibleChange() {
+      this.modalForm = { ...this.data, inheritVersionId: "" };
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    validChange(result) {
+      if (!result.success) {
+        this.uploadData = null;
+        this.$notify.error({ title: "错误提示", message: result.message });
+        this.$refs.modalFormComp.validateField("uploadData");
+      }
+    },
+    fileChange(data) {
+      this.uploadData = data;
+      this.$refs.modalFormComp.validateField("uploadData");
+    },
+    async confirm() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+
+      let formData = new FormData();
+      Object.entries(this.modalForm).forEach(([k, v]) => {
+        formData.append(k, v);
+      });
+      formData.append("file", this.uploadData.file);
+      formData.append("extension", this.uploadData.file.ext);
+
+      const data = await appConfigBaselineUpdate(formData, {
+        md5: this.uploadData.md5
+      }).catch(() => {});
+      this.isSubmit = false;
+      if (!data) return;
+
+      this.$message.success("添加成功！");
+      this.cancel();
+      this.$emit("modified");
+    }
+  }
+};
+</script>

src/plugins/globalVuePlugins.js

@@ -1,9 +1,17 @@
 import { objAssign, randomCode, tableAction } from "@/plugins/utils";
 import globalMixins from "./mixins";
 import ViewFooter from "@/components/ViewFooter.vue";
+import AppSelect from "@/components/AppSelect.vue";
+import EnvSelect from "@/components/EnvSelect.vue";
+import VersionSelect from "@/components/VersionSelect.vue";
+import ModuleSelect from "@/components/ModuleSelect.vue";
 
 const components = {
-  ViewFooter
+  ViewFooter,
+  AppSelect,
+  EnvSelect,
+  VersionSelect,
+  ModuleSelect
 };
 
 export default {