perf: 优化模块管理

base-manager-ui/admin/src/pages/basicset/deploy/Index.vue

+<template>
+  <div class="page flex flexc">
+    <a-tabs :activeKey="activeKey" @change="changeRouter">
+      <a-tab-pane key="/deploy/manage">
+        <span slot="tab">
+          <a-icon type="folder-add" />
+          模块管理
+        </span>
+      </a-tab-pane>
+      <a-tab-pane key="/deploy/statement">
+        <span slot="tab">
+          <a-icon type="project" />
+          报表管理
+        </span>
+      </a-tab-pane>
+    </a-tabs>
+    <div class="out-box flex1">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    activeKey() {
+      return this.$route.path;
+    },
+  },
+  methods: {
+    changeRouter(path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  .out-box {
+    padding: 0px 15px 15px 15px;
+    overflow-y: auto;
+  }
+  /deep/.ant-tabs-nav-container {
+    border-bottom: 1px solid #f0f0f0 !important;
+  }
+}
+</style>

base-manager-ui/admin/src/pages/basicset/deploy/Statement.vue

+<template>
+  <div>
+    <div class="flex aic jcb mb20">
+      <div>
+        <a-space>
+          <a-button type="primary" @click="handleAdd"> 新增 </a-button>
+          <a-button type="danger" @click="handleDelAll"> 批量删除 </a-button>
+        </a-space>
+      </div>
+      <a-space>
+        <a-select optionFilterProp="label" v-model="censusType">
+          <a-select-option value=""> 全部类型 </a-select-option>
+          <a-select-option
+            v-for="(v, key) in dict.censusType"
+            :key="key"
+            :value="Number(key)"
+          >
+            {{ v }}
+          </a-select-option>
+        </a-select>
+        <a-space>
+          <a-input
+            placeholder="请输入报表名称搜索"
+            v-model="censusName"
+            allowClear
+          />
+          <a-button type="primary" @click="onSearch">搜索</a-button>
+          <a-button @click="resetSearch">重置</a-button>
+        </a-space>
+
+        <!-- 
+        <a-input-search
+          style="width: 300px"
+          placeholder="请输入报表名称搜索"
+          enter-button="搜索"
+          v-model="censusName"
+          allowClear
+          @search="onSearch"
+        /> -->
+      </a-space>
+    </div>
+    <!-- 表格 -->
+    <div class="table-content">
+      <y-table
+        :columns="columns"
+        :data="tableData"
+        :pageSize.sync="size"
+        :page.sync="page"
+        :total="total"
+        :loading="loading"
+        :scroll="{ y: 560 }"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+        @changePagination="getStatementList"
+      >
+        <!-- 序号 -->
+        <span slot="index" slot-scope="{ index }">{{
+          (page - 1) * size + index + 1
+        }}</span>
+        <!-- 所属模块 -->
+        <template slot="model" slot-scope="{ record }">
+          {{ filterModel(record.modelId) }}
+        </template>
+        <!-- 统计类型 -->
+        <template slot="censusType" slot-scope="{ record }">
+          {{ dict.censusType[record.censusType] }}
+        </template>
+        <!-- 是否开放 -->
+        <template slot="status" slot-scope="{ record }">
+          <a-tag color="blue" v-if="record.status === 1"> 是 </a-tag>
+          <a-tag color="red" v-else> 否 </a-tag>
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="{ record }">
+          <a-space size="middle">
+            <a href="javascript:;" class="primary" @click="handleEdit(record)"
+              >编辑</a
+            >
+            <a href="javascript:;" class="delete" @click="handleDel(record.id)"
+              >删除</a
+            >
+          </a-space>
+        </template>
+      </y-table>
+    </div>
+    <!-- 新增报表 -->
+    <AddStatement
+      :addStatementVisile.sync="addStatementVisile"
+      :title="title"
+      :dict="dict"
+      ref="AddStatement"
+      :modelList="modelData"
+      @addSuccess="getStatementList"
+    ></AddStatement>
+  </div>
+</template>
+
+<script>
+import {
+  getStatementList,
+  delStatement,
+  modelList,
+} from "@/services/basicsetFun";
+import AddStatement from "./modal/AddStatement.vue";
+import YTable from "@/components/YTable.vue";
+const columns = [
+  {
+    title: "序号",
+    dataIndex: "index",
+    width: "65px",
+    scopedSlots: {
+      customRender: "index",
+    },
+  },
+  {
+    title: "报表名称",
+    dataIndex: "censusName",
+  },
+  {
+    title: "所属模块",
+    scopedSlots: { customRender: "model" },
+  },
+  {
+    title: "统计类型",
+    width: "160px",
+    scopedSlots: { customRender: "censusType" },
+  },
+  {
+    title: "访问路由",
+    dataIndex: "censusUrl",
+  },
+  {
+    title: "是否开放",
+    width: "150px",
+    scopedSlots: { customRender: "status" },
+  },
+  {
+    title: "操作",
+    width: "120px",
+    scopedSlots: { customRender: "action" },
+  },
+];
+export default {
+  components: {
+    AddStatement,
+    YTable,
+  },
+  data() {
+    return {
+      columns,
+      loading: false,
+      censusType: "",
+      total: 0,
+      size: 10,
+      page: 1,
+      modelData: [],
+      selectedRowKeys: [],
+      tableData: [],
+      addStatementVisile: false,
+      title: "新增",
+      censusName: "",
+      dict: {}, // 字典
+    };
+  },
+
+  created() {
+    this.modelList();
+    this.getStatementList();
+  },
+  methods: {
+    // 获取模块
+    async modelList() {
+      let res = await modelList({
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        this.modelData = data;
+      }
+    },
+    // 获取报表列表
+    async getStatementList() {
+      this.loading = true;
+      let res = await getStatementList({
+        page: this.page,
+        size: this.size,
+        censusType: this.censusType,
+        censusName: `%${this.censusName}%`,
+      });
+      this.loading = false;
+      if (res.data.code == 1) {
+        let { dict, data, total } = res.data.data;
+        if (!data.length && this.page > 1) {
+          this.page -= 1;
+          this.getStatementList();
+        }
+        this.tableData = data;
+        this.total = total;
+        this.dict = dict;
+      }
+    },
+    handleAdd() {
+      this.title = "新增报表";
+      this.addStatementVisile = true;
+      this.$refs.AddStatement.onAdd(this.modelInfo);
+    },
+    handleDelAll() {
+      if (!this.selectedRowKeys.length) {
+        this.$message.warning("请先勾选数据");
+        return;
+      }
+      let ids = this.selectedRowKeys.join(",");
+      this.handleDel(ids);
+    },
+
+    // 搜索
+    onSearch() {
+      this.page = 1;
+      this.selectedRowKeys = [];
+      this.getStatementList();
+    },
+    resetSearch() {
+      this.page = 1;
+      this.selectedRowKeys = [];
+      this.censusType = "";
+      this.censusName = "";
+      this.getStatementList();
+    },
+    // 编辑
+    handleEdit(row) {
+      this.title = "编辑报表";
+      this.addStatementVisile = true;
+      this.$refs.AddStatement.onEdit(row);
+    },
+    // 删除
+    handleDel(id) {
+      let _this = this;
+      this.$confirm({
+        title: "系统提示",
+        content: "删除不可恢复，确定要删除吗？",
+        okText: "确定",
+        okType: "danger",
+        cancelText: "取消",
+        centered: true,
+        icon: "exclamation-circle",
+        maskClosable: true,
+        async onOk() {
+          let res = await delStatement({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            _this.$message.success(msg);
+            _this.selectedRowKeys = [];
+            _this.getStatementList();
+          }
+        },
+      });
+    },
+    // 选中
+    onSelectChange(keys) {
+      this.selectedRowKeys = keys;
+    },
+
+    filterModel(modelId) {
+      let curModel = this.modelData.find((item) => item.id === modelId);
+      if (curModel) {
+        return curModel.modelName;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

base-manager-ui/admin/src/pages/basicset/deploy/deploy.vue

 <template>
   <div class="deploy flex flexc">
-    <TabHeader label="部署板块管理"></TabHeader>
-    <div class="pd15 flex1 auto-scroll-y">
+    <div class="flex1 auto-scroll-y">
       <div class="control pdr6">
         <div>
           <a-button type="primary" style="margin-right: 10px" @click="handleAdd"
@@ -54,29 +53,24 @@
             </div>
             <span v-else>--</span>
           </template>
+          <!-- 类型 -->
+          <template slot="type" slot-scope="{ record }">
+            {{ dict.type[record.type] }}
+          </template>
           <!-- 创建时间 -->
           <template slot="createTime" slot-scope="{ record }">
             {{ record.createTime | dateFormat }}
           </template>
           <!-- 操作 -->
           <template slot="action" slot-scope="{ record }">
-            <a-space>
-              <span
-                href="javascript:;"
-                class="primary pointer"
-                @click="statementManage(record)"
+            <a-space size="middle">
+              <!-- <span class="primary pointer" @click="statementManage(record)"
                 >配置报表</span
-              >
-              <span
-                href="javascript:;"
-                class="primary pointer"
-                @click="handleEdit(record)"
+              > -->
+              <span class="primary pointer" @click="handleEdit(record)"
                 >编辑</span
               >
-              <span
-                href="javascript:;"
-                class="delete pointer"
-                @click="handleDel(record.id)"
+              <span class="delete pointer" @click="handleDel(record.id)"
                 >删除</span
               >
             </a-space>
@@ -196,7 +190,6 @@
 <script>
 import { modelList, addMode, delMode } from "@/services/basicsetFun";
 import StatementManage from "./components/StatementManage.vue";
-import TabHeader from "@/components/TabHeader";
 import YTable from "@/components/YTable.vue";
 import YUpload from "@/components/YUpload.vue";
 const columns = [
@@ -234,6 +227,7 @@ const columns = [
   },
   {
     title: "类型",
+    width: "8%",
     scopedSlots: { customRender: "type" },
   },
   {
@@ -248,14 +242,13 @@ const columns = [
   },
   {
     title: "操作",
-    width: "180px",
+    width: "120px",
     scopedSlots: { customRender: "action" },
   },
 ];
 export default {
   components: {
     StatementManage,
-    TabHeader,
     YTable,
     YUpload,
   },

base-manager-ui/admin/src/pages/basicset/deploy/modal/AddStatement.vue

@@ -19,8 +19,23 @@
         :label-col="{ span: 4 }"
         :wrapper-col="{ span: 20 }"
       >
-        <a-form-model-item label="所属模块">
-          <a-input disabled :value="modelInfo.modelName" />
+        <a-form-model-item label="所属模块" prop="modelId">
+          <a-select
+            show-search
+            allowClear
+            optionFilterProp="label"
+            v-model="formData.modelId"
+            placeholder="请选择模块"
+          >
+            <a-select-option
+              v-for="v in modelList"
+              :key="v.id"
+              :value="v.id"
+              :label="v.modelName"
+            >
+              {{ v.modelName }}
+            </a-select-option>
+          </a-select>
         </a-form-model-item>
         <a-form-model-item label="报表名称" prop="censusName">
           <a-input v-model="formData.censusName" placeholder="请输入报表名称" />
@@ -32,7 +47,11 @@
           />
         </a-form-model-item>
         <a-form-model-item label="统计类型" prop="censusType">
-          <a-select v-model="formData.censusType" placeholder="请选择统计类型">
+          <a-select
+            allowClear
+            v-model="formData.censusType"
+            placeholder="请选择统计类型"
+          >
             <a-select-option
               v-for="(v, key) in dict.censusType"
               :key="key"
@@ -56,37 +75,46 @@ import YSwitch from "@/components/yswitch/YSwitch.vue";
 export default {
   props: {
     title: {
-      require: true,
+      required: true,
       type: String,
       default: "",
     },
     addStatementVisile: {
       type: Boolean,
-      require: true,
+      required: true,
       default: false,
     },
     dict: {
       type: Object,
-      require: true,
+      required: true,
       default: () => {
         return {};
       },
     },
+    modelList: {
+      type: Array,
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
   },
   components: {
     YSwitch,
   },
   data() {
     return {
-      modelInfo: {},
       formData: {
-        modelId: "", // 模块id
+        modelId: undefined, // 模块id
         censusName: "", // 报表名称
         censusUrl: "", // 报表访问路由
         censusType: undefined, // 统计类型
         status: 1, // 状态（0：为开通，1：开通）
       },
       rules: {
+        modelId: [
+          { required: true, message: "请输入所属模块", trigger: "change" },
+        ],
         censusName: [
           { required: true, message: "请输入报表名称", trigger: "blur" },
         ],
@@ -111,16 +139,13 @@ export default {
   },
   methods: {
     // 新增
-    onAdd(modelInfo) {
+    onAdd() {
       Object.assign(this.formData, this.$options.data().formData);
       this.formData.id && this.$delete(this.formData, "id");
-      this.modelInfo = modelInfo;
-      this.formData.modelId = modelInfo.id;
     },
     // 编辑
-    onEdit(data, modelInfo) {
+    onEdit(data) {
       this.$nextTick(() => {
-        this.modelInfo = modelInfo;
         this.formData = { ...data };
       });
     },

base-manager-ui/admin/src/router/config.js

@@ -148,7 +148,26 @@ const options = {
             icon: "appstore",
             roles: ["admin"],
           },
-          component: () => import("@/pages/basicset/deploy/deploy"),
+          component: () => import("@/pages/basicset/deploy/Index"),
+          redirect: "/deploy/manage",
+          children: [
+            {
+              path: "manage",
+              name: "模块管理",
+              component: () => import("@/pages/basicset/deploy/deploy"),
+              meta: {
+                invisible: true,
+              },
+            },
+            {
+              path: "statement",
+              name: "报表管理",
+              meta: {
+                invisible: true,
+              },
+              component: () => import("@/pages/basicset/deploy/Statement"),
+            },
+          ],
         },
 
         {