perf: 优化模块管理

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

@@ -26,54 +26,48 @@
       </div>
       <!-- 表格 -->
       <div class="table-content">
-        <a-table
+        <y-table
+          :columns="columns"
+          :data="tableData"
+          :pageSize.sync="size"
+          :page.sync="page"
+          :total="total"
+          :loading="loading"
+          :scroll="{ y: 600 }"
           :row-selection="{
             selectedRowKeys: selectedRowKeys,
             onChange: onSelectChange,
           }"
-          :loading="loading"
-          bordered
-          :scroll="{ y: 460 }"
-          :columns="columns"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: current,
-            total: total,
-            pageSize: size,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: handleChange,
-            onShowSizeChange: showSizeChange,
-          }"
-          :data-source="tableData"
-          :rowKey="(record) => record.id"
+          @changePagination="getStatementList"
         >
           <!-- 序号 -->
-          <span slot="num" slot-scope="text, record, index">{{
-            (current - 1) * size + index + 1
+          <span slot="index" slot-scope="{ index }">{{
+            (page - 1) * size + index + 1
           }}</span>
           <!-- 统计类型 -->
-          <template slot="censusType" slot-scope="text">
-            {{ filterDict(text.censusType) }}
+          <template slot="censusType" slot-scope="{ record }">
+            {{ filterDict(record.censusType) }}
           </template>
           <!-- 是否开放 -->
-          <template slot="status" slot-scope="text">
-            <a-tag color="blue" v-if="text.status === 1"> 是 </a-tag>
+          <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="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space>
-              <a href="javascript:;" class="edit" @click="handleEdit(text)"
+              <a href="javascript:;" class="edit" @click="handleEdit(record)"
                 >编辑</a
               >
-              <a href="javascript:;" class="delete" @click="handleDel(text.id)"
+              <a
+                href="javascript:;"
+                class="delete"
+                @click="handleDel(record.id)"
                 >删除</a
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
       <!-- 新增报表 -->
       <AddStatement
@@ -90,14 +84,14 @@
 <script>
 import { getStatementList, delStatement } from "@/services/basicsetFun";
 import AddStatement from "../modal/AddStatement.vue";
-import { pageSizeOptions } from "@/config/pageConfig.js";
+import YTable from "@/components/YTable.vue";
 const columns = [
   {
     title: "序号",
-    dataIndex: "num",
+    dataIndex: "index",
     width: "65px",
     scopedSlots: {
-      customRender: "num",
+      customRender: "index",
     },
   },
   {
@@ -132,6 +126,7 @@ export default {
   },
   components: {
     AddStatement,
+    YTable,
   },
   data() {
     return {
@@ -140,8 +135,7 @@ export default {
       loading: false,
       total: 0,
       size: 10,
-      current: 1,
-      pageSizeOptions,
+      page: 1,
       selectedRowKeys: [],
       tableData: [],
       addStatementVisile: false,
@@ -170,7 +164,7 @@ export default {
     async getStatementList() {
       this.loading = true;
       let res = await getStatementList({
-        page: this.current,
+        page: this.page,
         size: this.size,
         modelId: this.modelInfo.id,
         censusName: `%${this.censusName}%`,
@@ -179,8 +173,8 @@ export default {
       this.dict = dict;
       this.loading = false;
       if (code == 1) {
-        if (!data.length && this.current > 1) {
-          this.current -= 1;
+        if (!data.length && this.page > 1) {
+          this.page -= 1;
           this.getStatementList();
         }
         this.tableData = data.data;
@@ -207,7 +201,8 @@ export default {
     },
     // 搜索
     onSearch() {
-      this.current = 1;
+      this.page = 1;
+      this.selectedRowKeys = [];
       this.getStatementList();
     },
     // 编辑
@@ -216,17 +211,6 @@ export default {
       this.addStatementVisile = true;
       this.$refs.AddStatement.onEdit(row, this.modelInfo);
     },
-    // 翻页
-    handleChange(cur) {
-      this.current = cur;
-      this.getStatementList();
-    },
-    // 改变每页显示数量
-    showSizeChange(current, size) {
-      this.current = current;
-      this.size = size;
-      this.getStatementList();
-    },
     // 删除
     handleDel(id) {
       let _this = this;
@@ -244,6 +228,7 @@ export default {
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
+            _this.selectedRowKeys = [];
             _this.getStatementList();
           }
         },
@@ -267,5 +252,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>

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

@@ -22,92 +22,66 @@
       </div>
       <!-- 表格 -->
       <div class="table-content">
-        <a-table
+        <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,
           }"
-          :loading="loading"
-          bordered
-          :columns="columns"
-          :scroll="{ y: 560 }"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: current,
-            total: total,
-            pageSize: size,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: handleChange,
-            onShowSizeChange: showSizeChange,
-          }"
-          :data-source="modelList"
-          :rowKey="(record) => record.id"
+          @changePagination="getmodelList"
         >
-          <!-- 序号 -->
-          <span slot="num" slot-scope="text, record, index">{{
-            (current - 1) * size + index + 1
+          <span slot="index" slot-scope="{ index }">{{
+            (page - 1) * size + index + 1
           }}</span>
-          <!-- 模块地址 -->
-          <template slot="modelUrl" slot-scope="text">
-            {{ text.modelUrl ? text.modelUrl : "--" }}
-          </template>
           <!-- 模块图标 -->
-          <template slot="modelIcon" slot-scope="text">
-            <div v-if="text.modelIcon">
+          <template slot="modelIcon" slot-scope="{ record }">
+            <div v-if="record.modelIcon">
               <div class="svg-box">
                 <img
                   class="pointer"
                   width="30"
                   height="30"
-                  :src="text.modelIcon"
-                  @click="handlePreview({ url: text.modelIcon })"
+                  :src="record.modelIcon"
+                  @click="handlePreview({ url: record.modelIcon })"
                 />
               </div>
             </div>
             <span v-else>--</span>
           </template>
-          <!-- 排序 -->
-          <template slot="sort" slot-scope="text">
-            {{ text.sort ? text.sort : "--" }}
-          </template>
-          <!-- 类型 -->
-          <template slot="type" slot-scope="text">
-            {{ text.type ? dict.type[text.type] : "--" }}
-          </template>
           <!-- 创建时间 -->
-          <template slot="createTime" slot-scope="text">
-            {{ text.createTime | dateFormat }}
-          </template>
-          <!-- 备注 -->
-          <template slot="remark" slot-scope="text">
-            {{ text.remark ? text.remark : "--" }}
+          <template slot="createTime" slot-scope="{ record }">
+            {{ record.createTime | dateFormat }}
           </template>
           <!-- 操作 -->
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space>
               <span
                 href="javascript:;"
                 class="primary pointer"
-                @click="statementManage(text)"
+                @click="statementManage(record)"
                 >配置报表</span
               >
               <span
                 href="javascript:;"
                 class="primary pointer"
-                @click="handleEdit(text)"
+                @click="handleEdit(record)"
                 >编辑</span
               >
               <span
                 href="javascript:;"
                 class="delete pointer"
-                @click="handleDel(text.id)"
+                @click="handleDel(record.id)"
                 >删除</span
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 新增模块 -->
@@ -182,26 +156,13 @@
         </a-row>
         <a-row>
           <a-col :span="12">
-            <a-form-model-item
-              class="handle-upload"
-              label="模块图标"
-              prop="modelIcon"
-            >
-              <a-upload
-                name="file"
-                list-type="picture-card"
-                :action="api + 'base/file/commonupload'"
-                :file-list="fileList"
-                @change="handleUpload"
-                :accept="accept"
-                :before-upload="beforeUpload"
-                @preview="handlePreview"
-              >
-                <div v-if="fileList.length < 1">
-                  <a-icon type="plus" />
-                  <div class="ant-upload-text">点击上传</div>
-                </div>
-              </a-upload>
+            <a-form-model-item label="模块图标" prop="modelIcon">
+              <YUpload
+                accept=".png,.jpg,.jpeg,.svg"
+                :limit="1"
+                v-model="formData.modelIcon"
+                listType="picture-card"
+              ></YUpload>
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -236,14 +197,15 @@
 import { modelList, addMode, delMode } from "@/services/basicsetFun";
 import StatementManage from "./components/StatementManage.vue";
 import TabHeader from "@/components/TabHeader";
-import { pageSizeOptions } from "@/config/pageConfig.js";
+import YTable from "@/components/YTable.vue";
+import YUpload from "@/components/YUpload.vue";
 const columns = [
   {
     title: "序号",
-    dataIndex: "num",
+    dataIndex: "index",
     width: "65px",
     scopedSlots: {
-      customRender: "num",
+      customRender: "index",
     },
   },
   {
@@ -259,7 +221,7 @@ const columns = [
   {
     title: "模块地址",
     width: "20%",
-    scopedSlots: { customRender: "modelUrl" },
+    dataIndex: "modelUrl",
   },
   {
     title: "模块图标",
@@ -268,7 +230,7 @@ const columns = [
   {
     title: "排序",
     width: "5%",
-    scopedSlots: { customRender: "sort" },
+    dataIndex: "sort",
   },
   {
     title: "类型",
@@ -277,11 +239,12 @@ const columns = [
   {
     title: "创建时间",
     width: "12%",
+    dataIndex: "createTime",
     scopedSlots: { customRender: "createTime" },
   },
   {
     title: "备注",
-    scopedSlots: { customRender: "remark" },
+    dataIndex: "remark",
   },
   {
     title: "操作",
@@ -293,10 +256,11 @@ export default {
   components: {
     StatementManage,
     TabHeader,
+    YTable,
+    YUpload,
   },
   data() {
     return {
-      pageSizeOptions,
       api: process.env.VUE_APP_API_BASE_URL + "/",
       accept: "image/jpeg,image/png,image/svg+xml", // 上传类型
       columns,
@@ -304,7 +268,7 @@ export default {
       title: "新增模块",
       visible: false,
       selectedRowKeys: [],
-      modelList: [],
+      tableData: [],
       formData: {
         modelName: "", // 模块名称
         modelCode: "", // 模块编码
@@ -314,7 +278,7 @@ export default {
         sort: "", // 排序
         type: undefined, // 类型
       },
-      current: 1,
+      page: 1,
       size: 10,
       total: 0,
       searchValue: "", // 搜索
@@ -349,20 +313,20 @@ export default {
     async getmodelList(search = {}) {
       this.loading = true;
       let res = await modelList({
-        page: this.current,
+        page: this.page,
         size: this.size,
         modelName: `%${this.searchValue}%`,
         ...search,
       });
       if (res.data.code == 1) {
         let { pageInfo, data, dict } = res.data.data;
-        if (!data.length && this.current > 1) {
-          this.current -= 1;
+        if (!data.length && this.page > 1) {
+          this.page -= 1;
           this.getmodelList();
         }
         this.dict = dict;
         this.total = pageInfo.totalResult;
-        this.modelList = data;
+        this.tableData = data;
       }
       this.loading = false;
     },
@@ -375,7 +339,8 @@ export default {
     },
     // 搜索
     onSearch() {
-      this.current = 1;
+      this.page = 1;
+      this.selectedRowKeys = [];
       this.getmodelList();
     },
     // 表格选中
@@ -393,21 +358,13 @@ export default {
     },
     // 编辑
     handleEdit(row) {
-      this.formData = { ...row };
-      if (this.formData.modelIcon) {
-        this.fileList = [
-          {
-            uid: -1,
-            status: "done",
-            name: this.formData.modelIcon,
-            url: this.formData.modelIcon,
-          },
-        ];
-      }
       this.visible = true;
+      this.$nextTick(() => {
+        this.formData = { ...row };
+      });
     },
     // 删除
-    handleDel(num) {
+    handleDel(id) {
       let _this = this;
       this.$confirm({
         title: "系统提示",
@@ -419,10 +376,11 @@ export default {
         icon: "exclamation-circle",
         maskClosable: true,
         async onOk() {
-          let res = await delMode({ id: num });
+          let res = await delMode({ id });
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
+            _this.selectedRowKeys = [];
             _this.getmodelList();
           }
         },
@@ -431,17 +389,6 @@ export default {
         },
       });
     },
-    // 分页
-    handleChange(num) {
-      this.current = num;
-      this.getmodelList();
-    },
-    // 改变每页显示数量
-    showSizeChange(current, size) {
-      this.current = current;
-      this.size = size;
-      this.getmodelList();
-    },
     // 保存新增
     handleOk() {
       this.$refs.ruleForm.validate(async (valid) => {
@@ -458,39 +405,9 @@ export default {
     },
     // 重置
     handleReset() {
-      this.fileList = [];
       this.$refs.ruleForm.resetFields();
     },
-    // 上传图标
-    handleUpload({ fileList }) {
-      this.fileList = [...fileList].slice(-1);
-      this.fileList = this.fileList.map((v) => {
-        if (v.response) {
-          v.url = v.response.url;
-        }
-        return v;
-      });
-      if (this.fileList[0]) {
-        this.formData.modelIcon = this.fileList[0].url;
-      } else {
-        this.formData.modelIcon = "";
-      }
-    },
-    // 上传限制
-    beforeUpload(file) {
-      const isJpgOrPng =
-        file.type === "image/jpeg" ||
-        file.type === "image/png" ||
-        file.type === "image/svg+xml";
-      if (!isJpgOrPng) {
-        this.$message.error("请上传jpeg,svg,png格式图片!");
-      }
-      const isLt10M = file.size / 1024 / 1024 < 10;
-      if (!isLt10M) {
-        this.$message.error("上传图片大小不能超过 10MB!");
-      }
-      return isJpgOrPng && isLt10M;
-    },
+
     // 预览
     handlePreview(info) {
       this.$viewerApi({
@@ -502,16 +419,7 @@ export default {
     handleClose() {
       this.handleReset();
     },
-    // 图片类型
-    // isSvg(url) {
-    //   let index = url.lastIndexOf(".");
-    //   let str = url.slice(index + 1);
-    //   if (str === "svg") {
-    //     return true;
-    //   } else {
-    //     return false;
-    //   }
-    // },
+
     statementManage(row) {
       let obj = {
         id: row.id,
@@ -580,14 +488,6 @@ export default {
 /deep/.ant-col-3 {
   width: 12.5% !important;
 }
-/deep/.ant-upload {
-  width: 80px;
-  height: 80px;
-  img {
-    width: 80px;
-    height: 80px;
-  }
-}
 
 .ant-upload-select-picture-card i {
   font-size: 20px;