feat: 添加搜索功能到文档列表，支持按关键词过滤

src/components/addDoc/doc_template.vue

@@ -1,5 +1,32 @@
 <template>
-  <div class="ele-body" style="height:60vh;overflow: auto;">
+  <div class="ele-body" style="height: 60vh; overflow: auto">
+    <!-- 搜索栏 -->
+    <div style="margin-bottom: 10px">
+      <el-input
+        v-model="keyword"
+        placeholder="匹配编码与文档名称"
+        clearable
+        size="small"
+        style="width: 220px"
+        @keyup.enter.native="handleSearch"
+      ></el-input>
+      <el-button
+        type="primary"
+        size="small"
+        icon="el-icon-search"
+        style="margin-left: 8px"
+        @click="handleSearch"
+        >搜索</el-button
+      >
+      <el-button
+        size="small"
+        icon="el-icon-refresh-left"
+        style="margin-left: 4px"
+        @click="handleReset"
+        >重置</el-button
+      >
+    </div>
+
     <el-card shadow="never" v-loading="loading">
       <ele-split-layout
         width="210px"
@@ -7,12 +34,10 @@
         :right-style="{ overflow: 'hidden' }"
       >
         <div>
-          <!-- 操作按钮 -->
-          <ele-toolbar class="ele-toolbar-actions">
-            <div style="margin: 5px 0"> </div>
-          </ele-toolbar>
-             
-          <div class="ele-border-lighter sys-organization-list"  style="height: 65vh">
+          <div
+            class="ele-border-lighter sys-organization-list"
+            style="height: 65vh"
+          >
             <el-tree
               ref="tree"
               :data="data"
@@ -24,7 +49,7 @@
               :default-expand-all="true"
               @node-click="onNodeClick"
             >
-              <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span class="custom-tree-node" slot-scope="{ node }">
                 <ElementTreeLine
                   :node="node"
                   :showLabelLine="true"
@@ -53,125 +78,144 @@
 </template>
 
 <script>
-//
-import FileTableList from './file-table-listTemplate.vue';
-import { getDocTreeListAPI } from './api';
-import { mapGetters } from 'vuex';
+  //
+  import FileTableList from './file-table-listTemplate.vue';
+  import { getDocTreeListAPI } from './api';
+  import { mapGetters } from 'vuex';
 
-import ElementTreeLine from 'element-tree-line';
-// css
-import 'element-tree-line/dist/style.scss';
-export default {
-  components: { FileTableList, ElementTreeLine },
+  import ElementTreeLine from 'element-tree-line';
+  // css
+  import 'element-tree-line/dist/style.scss';
+  export default {
+    components: { FileTableList, ElementTreeLine },
 
-  data() {
-    return {
-      loading: true,
-      // 列表数据
-      data: [],
-      fileType:0,
-      // 选中数据
-      current: {}
-    };
-  },
-  props: {
-    lcyStatus: '', //1：文档工作区 2：文档归档区 3：文档发布区 4：文档废止区
+    data() {
+      return {
+        loading: true,
+        // 列表数据
+        data: [],
+        fileType: 0,
+        // 选中数据
+        current: {},
+        // 搜索关键词
+        keyword: ''
+      };
+    },
+    props: {
+      lcyStatus: {
+        type: String,
+        default: ''
+      }, //1：文档工作区 2：文档归档区 3：文档发布区 4：文档废止区
 
-    disabledTableList: {
-      //已选择列表
-      default: () => []
-    }
-  },
-  computed: {
-    ...mapGetters(['user'])
-  },
-  created() {
-    // this.query();
-  },
+      disabledTableList: {
+        //已选择列表
+        default: () => []
+      }
+    },
+    computed: {
+      ...mapGetters(['user'])
+    },
+    created() {
+      // this.query();
+    },
 
-  methods: {
-    /* 查询 */
-    // 0:公司 1：个人
-    async query(type) {
-      this.loading = true;
-      let query = {
-        type,
-        currentUserId: this.user.info.userId
-      };
-      this.data = await getDocTreeListAPI(query);
+    methods: {
+      /* 查询 */
+      // 0:公司 1：个人
+      async query(type) {
+        this.loading = true;
+        let query = {
+          type,
+          currentUserId: this.user.info.userId
+        };
+        this.data = await getDocTreeListAPI(query);
 
-      this.current = null;
-      this.$nextTick(() => {
-        this.$refs.tree.setCurrentKey(this.data[0].id);
+        this.current = null;
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.data[0].id);
 
-        this.onNodeClick(this.data[0]);
-      });
-      this.loading = false;
-    },
-    /* 选择数据 */
-    onNodeClick(row) {
-      if (row) {
-        this.current = row;
+          this.onNodeClick(this.data[0]);
+        });
+        this.loading = false;
+      },
+      /* 选择数据 */
+      onNodeClick(row) {
+        if (row) {
+          this.current = row;
+          this.keyword = '';
+          this.$nextTick(() => {
+            this.$refs.tableRef.reload();
+          });
+        } else {
+          this.current = null;
+        }
+      },
+
+      getTableList() {
+        return this.$refs.tableRef.getTableList();
+      },
+      /* 搜索 */
+      handleSearch() {
         this.$nextTick(() => {
-          this.$refs.tableRef.reload();
+          this.$refs.tableRef.reload({ keyword: this.keyword });
+        });
+      },
+      /* 重置 */
+      handleReset() {
+        this.keyword = '';
+        this.$nextTick(() => {
+          this.$refs.tableRef.reload({ keyword: '' });
         });
-      } else {
-        this.current = null;
       }
-    },
-
-    getTableList() {
-      return this.$refs.tableRef.getTableList();
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.sys-organization-list {
-  height: calc(100vh - 180px);
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  overflow: auto;
-}
+  .sys-organization-list {
+    height: calc(100vh - 180px);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
 
-.sys-organization-list :deep(.el-tree-node__content) {
-  height: 30px;
+  .sys-organization-list :deep(.el-tree-node__content) {
+    height: 30px;
 
-  & > .el-tree-node__expand-icon {
-    margin-left: 10px;
+    & > .el-tree-node__expand-icon {
+      margin-left: 10px;
+    }
+  }
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+  }
+  :deep(.el-popover) {
+    min-width: 50px;
+    position: fixed;
+  }
+  :deep(.el-link--inner) {
+    padding: 3px 0;
   }
-}
-.custom-tree-node {
-  display: flex;
-  align-items: center;
-}
-:deep(.el-popover) {
-  min-width: 50px;
-  position: fixed;
-}
-:deep(.el-link--inner) {
-  padding: 3px 0;
-}
-// :deep(.element-tree-node-line-hor) {
-//   border-bottom: 1px solid #dcdfe6;
-// }
-// :deep(.element-tree-node-line-ver) {
-//   border-left: 1px solid #dcdfe6;
-// }
+  // :deep(.element-tree-node-line-hor) {
+  //   border-bottom: 1px solid #dcdfe6;
+  // }
+  // :deep(.element-tree-node-line-ver) {
+  //   border-left: 1px solid #dcdfe6;
+  // }
 </style>
 <style lang="scss">
-.el-tree
-  > .el-tree-node
-  > .el-tree-node__content:nth-of-type(1)
-  .element-tree-node-line-hor {
-  border: none;
-}
-.el-tree
-  > .el-tree-node
-  > .el-tree-node__content:nth-of-type(1)
-  .element-tree-node-line-ver {
-  border: none;
-}
-</style>
+  .el-tree
+    > .el-tree-node
+    > .el-tree-node__content:nth-of-type(1)
+    .element-tree-node-line-hor {
+    border: none;
+  }
+  .el-tree
+    > .el-tree-node
+    > .el-tree-node__content:nth-of-type(1)
+    .element-tree-node-line-ver {
+    border: none;
+  }
+</style>

src/components/addDoc/file-table-listTemplate.vue

@@ -185,7 +185,8 @@
           pageNum: page,
           size: limit,
           directoryId: this.parentData?.id,
-          isQueryAll: this.isQueryAll
+          isQueryAll: this.isQueryAll,
+          keyword: where?.keyword || ''
         });
       },
       /* 刷新表格 */