应用库搜索优化

project/oms/apps/develop/AppDeployCustom/AiLibTable.vue

@@ -10,8 +10,8 @@
       </template>
     </ai-search-bar>
     <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :colConfigs="columns"
-              :size.sync="page.size" border @getList="getTableData" tableSize="mini" :dict="dict">
-      <el-table-column slot="chb" width="100px">
+              :size.sync="page.size" @getList="getTableData" tableSize="mini" :dict="dict" v-bind="$attrs">
+      <el-table-column slot="chb" width="100px" v-if="!disabled">
         <template #header>
           <el-checkbox v-if="multiple" v-model="selectAll" @change="handleCheckAll"/>
         </template>
@@ -46,7 +46,9 @@ export default {
     },
     nodeKey: {default: "id"},
     searchKey: {default: "name"},
-    multiple: Boolean
+    multiple: Boolean,
+    disabled: Boolean,
+    meta: {default: () => []}
   },
   data() {
     return {
@@ -73,25 +75,31 @@ export default {
   },
   methods: {
     getTableData() {
-      let {page, search, action, nodeKey} = this
-      this.instance?.post(action, null, {
+      const {page, search, action, meta, searchKey, dict} = this
+      if (meta.length > 0) {
+        const reg = new RegExp(search[searchKey])
+        this.handleTableData(meta.filter(e => reg.test(e.label) || reg.test(e.name) || reg.test(dict.getLabel('appsCategory', e.category))))
+      } else this.instance?.post(action, null, {
         params: {...page, ...search}
       }).then(res => {
         if (res?.data) {
-          const list = res.data.records || res.data || []
-          list.map(e => {
-            e.category = e.libPath.replace(/^\/[^\/]+\/([^\/]+)\/.+/, '$1')
-            if (/\/project\//.test(e.libPath)) {
-              e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
-            } else if (/\/core\//.test(e.libPath)) {
-              e.project = "core"
-            } else e.project = "standard"
-          })
-          this.tableData = list.map(e => ({...e, checked: this.selected.includes(e[nodeKey])}))
           this.page.total = res.data.total
+          this.handleTableData(res.data.records || res.data || [])
         }
       })
     },
+    handleTableData(list) {
+      const {nodeKey} = this
+      list.map(e => {
+        e.category = e.libPath.replace(/^\/[^\/]+\/([^\/]+)\/.+/, '$1')
+        if (/\/project\//.test(e.libPath)) {
+          e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
+        } else if (/\/core\//.test(e.libPath)) {
+          e.project = "core"
+        } else e.project = "standard"
+      })
+      this.tableData = list.map(e => ({...e, checked: this.selected.includes(e[nodeKey])}))
+    },
     handleCheck(row) {
       const {nodeKey} = this
       if (this.multiple) {

project/oms/apps/develop/AppDeployCustom/add.vue

@@ -34,7 +34,7 @@
               <ai-card title="主库应用">
                 <template #content>
                   <ai-lib-table v-if="form.type" v-model="form.apps" v-bind="$props" multiple searchKey="name"
-                                :action="`/node/wechatapps/list?type=${form.type}&isMain=1`"/>
+                                :action="`/node/wechatapps/list?type=${form.type}&isMain=1`" border/>
                   <ai-empty v-else>请先选择系统类型</ai-empty>
                 </template>
               </ai-card>
@@ -48,7 +48,7 @@
             </el-form>
           </el-tab-pane>
           <el-tab-pane label="方案应用" lazy>
-            <ai-table :tableData="appList" :colConfigs="colConfigs" :isShowPagination="false" :dict="dict"/>
+            <ai-lib-table :meta="appList" :isShowPagination="false" v-bind="$props" disabled/>
           </el-tab-pane>
         </el-tabs>
       </template>
@@ -95,12 +95,6 @@ export default {
         customPath: {required: true, message: "请输入"},
         extra: {required: true, message: "请设置主页配置"},
       },
-      colConfigs: [
-        {prop: 'label', label: "应用名称"},
-        {prop: 'project', label: "项目/框架"},
-        {prop: 'category', label: "分类", dict: "appsCategory"},
-        {prop: 'name', label: "模块名"},
-      ]
     }
   },
   methods: {