perf:应用添加数据时表格可以搜索

base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdate.vue

@@ -2,7 +2,10 @@
   <div class="data-update">
     <!-- 头部 -->
     <div class="header flex aic jcb mb20 pdr6">
+      <a-space>
         <a-button type="primary" @click="handleAdd">新增</a-button>
+        <a-button type="danger" @click="handleDelAll">批量删除</a-button>
+      </a-space>
       <div class="search-box">
         <a-input-group compact>
           <a-select style="min-width: 100px" v-model="fieldCode">
@@ -54,6 +57,10 @@
           onShowSizeChange: showSizeChange,
         }"
         :data-source="tableData"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
         :rowKey="(record) => record.id"
       >
         <!-- 序号 -->
@@ -147,6 +154,7 @@ export default {
       previewVisible: false,
       previewData: {}, // 预览信息
       appTemplate: [], // 字段模板列表
+      selectedRowKeys: [],
     };
   },
   computed: {
@@ -267,6 +275,19 @@ export default {
       this.$refs.AddData.onEdit(row);
       this.AddVisible = true;
     },
+    // 选择
+    onSelectChange(keys) {
+      this.selectedRowKeys = keys;
+    },
+    // 批量删除
+    handleDelAll() {
+      if (!this.selectedRowKeys.length) {
+        this.$message.warn("请先勾选数据");
+        return;
+      }
+      let ids = this.selectedRowKeys.join(",");
+      this.handleDel(ids);
+    },
     // 删除
     handleDel(id) {
       let _this = this;
@@ -284,6 +305,7 @@ export default {
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
+            _this.selectedRowKeys = [];
             _this.getDatasetList();
           }
         },

base-manager-ui/admin/src/pages/basicset/appmarket/components/FieldConfig.vue

@@ -2,7 +2,10 @@
   <div class="field-config">
     <!-- 头部 -->
     <div class="header flex aic jcb mb20 pdr6">
+      <a-space>
         <a-button type="primary" @click="handleAdd">新增字段</a-button>
+        <a-button type="danger" @click="handleDelAll">批量删除</a-button>
+      </a-space>
       <a-input-search
         style="width: 300px"
         placeholder="请输入字段名称搜索"
@@ -31,6 +34,10 @@
           onShowSizeChange: showSizeChange,
         }"
         :data-source="tableData"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
         :rowKey="(record) => record.id"
       >
         <!-- 序号 -->
@@ -131,6 +138,7 @@ export default {
       tableData: [],
       fieldVisible: false,
       title: "",
+      selectedRowKeys: [],
     };
   },
   created() {
@@ -187,6 +195,19 @@ export default {
       this.$refs.AddField.onEdit(row);
       this.fieldVisible = true;
     },
+    // 选择
+    onSelectChange(keys) {
+      this.selectedRowKeys = keys;
+    },
+    // 批量删除
+    handleDelAll() {
+      if (!this.selectedRowKeys.length) {
+        this.$message.warn("请先勾选数据");
+        return;
+      }
+      let ids = this.selectedRowKeys.join(",");
+      this.handleDel(ids);
+    },
     // 删除
     handleDel(id) {
       let _this = this;
@@ -204,6 +225,7 @@ export default {
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
+            _this.selectedRowKeys = [];
             _this.getTempleteList();
           }
         },

base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddData.vue

@@ -14,10 +14,11 @@
           :label-col="labelCol"
           :wrapper-col="wrapperCol"
         >
+          <template v-for="(v, i) in form.appInfoFieldList">
             <a-form-model-item
-            v-for="(v, i) in form.appInfoFieldList"
-            :key="v.fieldCode"
               :label="v.fieldName"
+              :key="v.fieldCode"
+              v-if="changeShow(v)"
               :class="{
                 content: v.fieldType == 'text',
                 'upload-item': v.fieldType == 'upload',
@@ -122,7 +123,10 @@
               />
               <!-- 富文本 -->
               <div v-else-if="v.fieldType == 'text'" class="content-box">
-              <YQuillEditor v-model="v.fieldValue" height="auto"></YQuillEditor>
+                <YQuillEditor
+                  v-model="v.fieldValue"
+                  height="auto"
+                ></YQuillEditor>
               </div>
               <!-- 文件上传 -->
               <a-upload
@@ -141,11 +145,34 @@
                 </a-button>
               </a-upload>
               <!-- 表格 -->
+              <div v-else-if="v.fieldType == 'table'">
+                <div class="search-box">
+                  <a-space>
+                    <a-select style="width: 120px" v-model="searchName">
+                      <a-select-option value=""> 全部 </a-select-option>
+                      <a-select-option
+                        v-for="(v, i) in fieldTypeValue"
+                        :key="i"
+                        :value="v.dataIndex"
+                      >
+                        {{ v.title }}
+                      </a-select-option>
+                    </a-select>
+                    <a-input-search
+                      style="width: 300px"
+                      placeholder="请输入关键字搜索"
+                      enter-button="搜索"
+                      v-model="searchVal"
+                      allowClear
+                      @search="onSearch"
+                    />
+                  </a-space>
+                </div>
                 <a-table
                   bordered
-              v-else-if="v.fieldType == 'table'"
                   size="small"
                   :scroll="{ y: 550 }"
+                  :loading="tableLoading"
                   :pagination="{
                     showTotal: (total) => `共 ${total} 条`,
                     current: current,
@@ -177,7 +204,9 @@
                     </span>
                   </template>
                 </a-table>
+              </div>
             </a-form-model-item>
+          </template>
         </a-form-model>
       </div>
       <!-- 底部按钮 -->
@@ -227,6 +256,7 @@ export default {
   data() {
     return {
       loading: false,
+      tableLoading: false,
       siteId: local.getLocal("siteId"),
       api: process.env.VUE_APP_API_BASE_URL,
       pageSizeOptions: ["10", "30", "50", "100", "200"],
@@ -251,6 +281,9 @@ export default {
       columns: [],
       serviceApi: "",
       serviceApiParams: {},
+      fieldTypeValue: [],
+      searchName: "",
+      searchVal: "",
     };
   },
   computed: {
@@ -267,6 +300,8 @@ export default {
     // 关闭
     onClose() {
       this.$refs.form.resetFields();
+      this.selectedRowKeys = [];
+      this.selectedRow = [];
       this.Visible = false;
     },
     // 提交
@@ -315,7 +350,7 @@ export default {
         if (v.id) {
           delete v.id;
         }
-        v.fieldValue = "";
+        v.fieldValue = undefined;
         if (v.fieldType == "upload") {
           v.fileList = [];
         }
@@ -330,14 +365,14 @@ export default {
               customRender: "num",
             },
           };
-          let fieldTypeValue = JSON.parse(v.fieldTypeValue);
-          fieldTypeValue = Object.keys(fieldTypeValue).map((key) => {
+          this.fieldTypeValue = JSON.parse(v.fieldTypeValue);
+          this.fieldTypeValue = Object.keys(this.fieldTypeValue).map((key) => {
             return {
-              title: fieldTypeValue[key],
+              title: this.fieldTypeValue[key],
               dataIndex: key,
             };
           });
-          this.columns = [index, ...fieldTypeValue];
+          this.columns = [index, ...this.fieldTypeValue];
           this.serviceApi = v.serviceApi;
           this.serviceApiParams = JSON.parse(v.serviceApiParams);
           this.getData();
@@ -447,12 +482,19 @@ export default {
     },
     // 获取数据函数
     async getData(data) {
+      let obj = {};
+      if (this.searchName) {
+        obj[this.searchName] = `%${this.searchVal}%`;
+      }
+      this.tableLoading = true;
       let res = await request(this.api + this.serviceApi, "post", {
         size: this.size,
         page: this.current,
         siteId: this.siteId,
+        ...obj,
         ...data,
       });
+      this.tableLoading = false;
       if (res.data.code == 1) {
         let { data, total } = res.data.data;
         this.tableList = data;
@@ -465,6 +507,21 @@ export default {
       this.size = pageSize;
       this.getData();
     },
+    // 搜索表格
+    onSearch() {
+      this.current = 1;
+      this.getData();
+    },
+    changeShow(row) {
+      let bol = Object.keys(this.serviceApiParams).some((key) => {
+        return row.fieldCode == key;
+      });
+      if (this.selectedRow.length && bol) {
+        return false;
+      } else {
+        return true;
+      }
+    },
   },
 };
 </script>
@@ -496,6 +553,10 @@ export default {
 .upload-item {
   display: block !important;
 }
+.search-box {
+  margin-bottom: 10px;
+  text-align: right;
+}
 // .ant-input,
 // .ant-select,
 // .ant-calendar-picker {

base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddField.vue

@@ -153,7 +153,7 @@
 </template>
 
 <script>
-import { saveTemplete } from "@/services/market";
+import { saveTemplete, getTempleteList } from "@/services/market";
 import { changeCodeNumber } from "@/utils/validate";
 const fieldTypeItem = [
   {
@@ -265,6 +265,7 @@ export default {
         serviceApiParams: "", // 动态数据参数配置
         remark: "", //
       },
+      templeteList: [], // 字段列表
       rules: {
         fieldCode: [
           { required: true, validator: changeCodeNumber, trigger: "blur" },
@@ -306,9 +307,26 @@ export default {
     },
   },
   methods: {
+    // 获取数据模板
+    async getTempleteList() {
+      let res = await getTempleteList({
+        page: 1,
+        size: -1,
+        appId: this.$route.query.id,
+      });
+      if (res.data.code === 1) {
+        let { data } = res.data.data;
+        this.templeteList = data;
+      }
+    },
     handleOk() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
+          let bol = this.templeteList.some((v) => v.fieldType == "table");
+          if (bol) {
+            this.$message.warn("只能存在一个表格");
+            return;
+          }
           let fieldTypeObj = {};
           let apiParamsObj = {};
           this.fieldType.forEach((v) => {
@@ -356,6 +374,7 @@ export default {
       Object.assign(this.form, this.$options.data().form);
       this.form.appId = this.$route.query.id;
       this.form.id && this.$delete(this.form, "id");
+      this.getTempleteList();
     },
     // 编辑
     onEdit(data) {
@@ -392,6 +411,7 @@ export default {
         ];
       }
       this.form = { ...data };
+      this.getTempleteList();
     },
     // 添加数据配置行数
     insertion(index, type) {