From d4951eb9aff0947e95a30fd9dbb7ad2a15e214de Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Tue, 2 Jan 2024 17:23:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E6=A3=80=E7=B4=A2=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../archiveUtilize/archiveSearch/index.vue    |  13 +-
 .../archiveSearch/module/resultList.vue       | 425 ++++++++++++++++++
 .../archivesClassify/module/tableList.vue     |   7 +
 3 files changed, 441 insertions(+), 4 deletions(-)
 create mode 100644 src/views/archiveUtilize/archiveSearch/module/resultList.vue

diff --git a/src/views/archiveUtilize/archiveSearch/index.vue b/src/views/archiveUtilize/archiveSearch/index.vue
index b8876e3..a79c85e 100644
--- a/src/views/archiveUtilize/archiveSearch/index.vue
+++ b/src/views/archiveUtilize/archiveSearch/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="archive-search-main">
-    <div class="search-main">
+    <div v-if="!isResult" class="search-main">
       <span class="bg_icon1" />
       <span class="bg_icon2" />
       <span class="bg_icon3" />
@@ -97,18 +97,21 @@
           </div>
         </div>
       </div>
-
     </div>
+    <ResultList v-else />
   </div>
 </template>
 
 <script >
 import { FetchFindGroupType } from '@/api/system/field'
+import ResultList from './module/resultList'
 export default {
   name: 'ArchiveSearch',
+  components: { ResultList },
   data() {
     return {
       isCommon: true,
+      isResult: false,
       keywords: '',
       form: {
         field: null,
@@ -329,8 +332,8 @@ export default {
         this.$message.error('请输入有效条件')
         return false
       } else if (fields === 1 || connectors === fields - 1) {
-        // this.$message.error('通过')
-        //  GDR like '%1%' or TITLE < '1' and AJH = '2222'
+        // this.$message.success('通过')
+        // GDR like '%1%' or TITLE < '1' and AJH = '2222'
         // wheresql:  ( GDR like '%1%' or QZH = '111' ) or GDRQ >= cast('2023-12-07' as datetime)
         // arrarshow: ‖(‖归档人 包含 '%1%'‖或者‖全宗号 等于 '111'‖)‖或者‖归档日期 迟于 cast('2023-12-07' as datetime)
         // arrarsql: ‖(‖GDR like '%1%'‖or‖QZH = '111'‖)‖or‖GDRQ >= cast('2023-12-07' as datetime)
@@ -353,6 +356,7 @@ export default {
           }
         }).join(' ')
         console.log('wheresql', wheresql)
+        this.isResult = true
       } else {
         this.$message.error('条件之间缺少或且连接符')
         return false
@@ -361,6 +365,7 @@ export default {
     dimSearch() {
     },
     handleSearch() {
+      this.isResult = true
     }
   }
 }
diff --git a/src/views/archiveUtilize/archiveSearch/module/resultList.vue b/src/views/archiveUtilize/archiveSearch/module/resultList.vue
new file mode 100644
index 0000000..0ecf383
--- /dev/null
+++ b/src/views/archiveUtilize/archiveSearch/module/resultList.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="result-main">
+    <div class="result-left">
+      <el-collapse v-model="activeNames" @change="handleChange">
+        <el-collapse-item title="全宗" name="1">
+          <el-input
+            v-model="filterFondsText"
+            class="quick-search"
+            placeholder="快速检索"
+            suffix-icon="el-icon-search"
+          />
+          <el-tree
+            ref="tree"
+            :data="fondsOptions"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :props="{children: 'children', label: 'fondsName'}"
+            :filter-node-method="filterFondsNode"
+            @check-change="getFondsCheckedKeys"
+          />
+        </el-collapse-item>
+        <el-collapse-item title="档案门类" name="2">
+          <el-input
+            v-model="filterCategoryText"
+            class="quick-search"
+            placeholder="快速检索"
+            suffix-icon="el-icon-search"
+          />
+          <el-tree
+            ref="treeCategory"
+            :data="categoryOptions"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :props="{children: 'children', label: 'cnName'}"
+            :filter-node-method="filterCategoryNode"
+            @check-change="getCategoryCheckedKeys"
+          />
+        </el-collapse-item>
+        <el-collapse-item title="档案分类" name="3">
+          <el-input
+            v-model="filterClassifyText"
+            class="quick-search"
+            placeholder="快速检索"
+            suffix-icon="el-icon-search"
+          />
+          <el-tree
+            ref="treeClassify"
+            :data="classifyOptions"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :props="{children: 'children', label: 'name'}"
+            :filter-node-method="filterClassifyNode"
+            @check-change="getClassifyCheckedKeys"
+          />
+        </el-collapse-item>
+        <el-collapse-item title="档案层级" name="4">
+          <el-input
+            v-model="filterLevelText"
+            class="quick-search"
+            placeholder="快速检索"
+            suffix-icon="el-icon-search"
+          />
+          <el-tree
+            ref="treeLevel"
+            :data="levelOptions"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            :props="{children: 'children', label: 'label'}"
+            :filter-node-method="filterLevelNode"
+            @check-change="getLevelCheckedKeys"
+          />
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="result-right">
+      <div class="right-header">
+        <div class="head-search">
+          <el-select
+            v-model="status"
+            multiple
+            collapse-tags
+            placeholder="状态(支持多选)"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <div class="search-input">
+            <el-input v-model="keyword" placeholder="请输入检索关键字" class="input-with-select">
+              <el-button slot="append" icon="el-icon-search">搜索</el-button>
+            </el-input>
+          </div>
+          <span class="change-search">高级搜索</span>
+        </div>
+        <div class="search-tip">
+          检索 “<span>合同</span>” 成功获得<i>30</i>条结果
+        </div>
+      </div>
+      <div class="result-list">
+        <div class="result-item">1</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script >
+import { FetchFondsAll } from '@/api/system/fonds'
+import { FetchCategoryMenu } from '@/api/system/category/category'
+export default {
+  name: 'ResultList',
+  data() {
+    return {
+      activeNames: ['1'],
+      filterFondsText: '',
+      fondsOptions: [],
+      filterCategoryText: '',
+      categoryOptions: [],
+      filterLevelText: '',
+      levelOptions: [
+        {
+          label: '原文',
+          value: '4'
+        },
+        {
+          label: '文件',
+          value: '3'
+        },
+        {
+          label: '案卷',
+          value: '2'
+        },
+        {
+          label: '项目',
+          value: '1'
+        }
+      ],
+      filterClassifyText: '',
+      classifyOptions: [],
+      statusOptions: [],
+      status: null,
+      keyword: ''
+    }
+  },
+  watch: {
+    filterFondsText(val) {
+      this.$refs.tree.filter(val)
+    },
+    filterCategoryText(val) {
+      this.$refs.treeCategory.filter(val)
+    },
+    filterLevelText(val) {
+      this.$refs.treeLevel.filter(val)
+    },
+    filterClassifyText(val) {
+      this.$refs.treeClassify.filter(val)
+    }
+  },
+  mounted() {
+    // 延迟模拟请求数据
+    setTimeout(() => {
+      this.getFondsDatas()
+      this.getCategoryDataTree()
+    }, 300)
+  },
+  methods: {
+    getFondsDatas() {
+      FetchFondsAll().then(res => {
+        this.fondsOptions = res
+      })
+    },
+    filterData(data) {
+      const result = []
+      for (const node of data) {
+        if (node.isType === 2) {
+          const filteredChildren = node.children.filter(child => child.isType !== 3)
+          node.children = filteredChildren
+          result.push(node)
+        } else if (node.children && node.children.length > 0) {
+          const filteredChildren = this.filterData(node.children)
+          result.push(...filteredChildren)
+        }
+      }
+      return result
+    },
+    filterArchivesClasses(data, result = []) {
+      if (data && data.length > 0) {
+        for (let i = 0; i < data.length; i++) {
+          const archivesClasses = data[i].archivesClasses
+          if (archivesClasses && archivesClasses.length > 0) {
+            result.push(...archivesClasses)
+          }
+          this.filterArchivesClasses(data[i].children, result)
+        }
+      }
+      return result
+    },
+    getCategoryDataTree() {
+      FetchCategoryMenu().then(res => {
+        this.categoryOptions = this.filterData(res)
+        this.classifyOptions = this.filterArchivesClasses(res)
+      })
+    },
+    handleChange(val) {
+      console.log(val)
+    },
+    filterFondsNode(value, data) {
+      if (!value) return true
+      return data.fondsName.indexOf(value) !== -1
+    },
+    filterCategoryNode(value, data) {
+      if (!value) return true
+      return data.cnName.indexOf(value) !== -1
+    },
+    filterLevelNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    filterClassifyNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    getFondsCheckedKeys() {
+      const checkedKeys = this.$refs.tree.getCheckedNodes()
+      console.log('fondsKeys', checkedKeys)
+    },
+    getCategoryCheckedKeys() {
+      const checkedKeys = this.$refs.treeCategory.getCheckedNodes()
+      console.log('categoryKeys', checkedKeys)
+    },
+    getClassifyCheckedKeys() {
+      const checkedKeys = this.$refs.treeClassify.getCheckedNodes()
+      console.log('classifysKeys', checkedKeys)
+    },
+    getLevelCheckedKeys() {
+      const checkedKeys = this.$refs.treeLevel.getCheckedNodes()
+      console.log('levelsKeys', checkedKeys)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.result-main{
+  display: flex;
+  justify-content: space-between;
+  height: calc(100vh - 140px);
+  .result-left{
+    position: relative;
+    width: 265px;
+    height: calc(100%);
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
+    z-index: 9999;
+    ::v-deep .el-collapse{
+      border: none;
+      height: calc(100%);
+      overflow: hidden;
+      overflow-y: scroll;
+      .el-collapse-item__header{
+        padding-left: 13px;
+        height: 32px;
+        background-color: #F3F6FA;
+        border-radius: 3px 3px 3px 3px;
+        opacity: 1;
+        border: 1px solid #CBD1DC;
+        .el-collapse-item__arrow{
+          // margin: 0;
+          // text-align: right;
+        }
+        .el-icon-arrow-right:before{
+          font-family: "iconfont" !important;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          content: "\e629";
+          font-size: 6px;
+          color: #545B65;
+        }
+        .el-collapse-item__arrow.is-active{
+          transform: rotate(180deg);
+        }
+      }
+      .el-collapse-item{
+        margin-bottom: 16px;
+        .el-collapse-item__wrap{
+          padding: 12px;
+          margin-top: -1px;
+          border: 1px solid #CBD1DC;
+          // border-top: none;
+          border-radius: 0 0 3px 3px;
+
+        }
+        .el-collapse-item__content{
+          padding-bottom: 0;
+          .quick-search{
+            margin-bottom: 16px;
+          }
+          .el-tree{
+            max-height: calc(100vh/4 - 25px);
+            overflow: hidden;
+            overflow-y: scroll;
+            .el-tree-node__content {
+              height: 30px;
+            }
+            .el-tree-node__expand-icon{
+              font-size: 12px;
+              display: none;
+            }
+            .el-tree-node__label{
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .result-right{
+    flex: 1;
+    // background-color: #fff;
+    .right-header{
+      padding: 20px 20px 14px 20px;
+      background-color: #fff;
+      .head-search{
+        margin-bottom: 10px;
+        .search-input{
+          margin-left: 10px;
+          .input-with-select{
+            ::v-deep .el-input__inner{
+              width: 320px;
+            }
+          }
+          ::v-deep .el-input-group__append{
+            width: auto;
+            padding: 0 20px 0 0 !important;
+            border-color: #0348F3;
+
+            .el-button{
+              background-color: #0348F3 !important;
+              color: #fff;
+            }
+          }
+        }
+      }
+      .change-search{
+        margin-left: 12px;
+        font-size: 14px;
+        color: #0348F3;
+        line-height: 32px;
+      }
+      .search-tip{
+        font-size: 14px;
+        color: #545B65;
+        span{
+          color: #ED4A41;
+        }
+        i{
+          font-style: normal;
+          padding: 0 4px;
+        }
+      }
+    }
+    .result-list{
+      padding: 20px;
+      .result-item{
+        padding: 16px 16px 10px 16px;
+        margin-bottom: 16px;
+        background-color: #fff;
+        border-radius: 3px;
+      }
+    }
+  }
+}
+
+::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+  background-color: transparent !important;
+}
+::v-deep .el-tree .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label{
+  background-color: transparent !important;
+  color: #0C0E1E !important;
+}
+::v-deep .el-tree .is-current>.el-tree-node__content{
+  background-color: transparent !important;
+  color: #0C0E1E !important;
+}
+
+::v-deep .el-collapse::-webkit-scrollbar,
+::v-deep .el-collapse-item__content::-webkit-scrollbar,
+::v-deep .el-tree::-webkit-scrollbar {
+  width: 5px !important;
+  height: 5px !important;
+  background-color: #fff !important;
+}
+
+::v-deep .el-collapse::-webkit-scrollbar-thumb{
+  border-radius: 3px;
+  background-color: #fff !important;
+}
+::v-deep .el-collapse-item__content::-webkit-scrollbar-thumb,
+::v-deep .el-tree::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: #4578F6 !important;
+  // background-color: #fff !important;
+}
+
+::v-deep .el-collapse::-webkit-scrollbar-thumb:hover,
+::v-deep .el-collapse-item__content::-webkit-scrollbar-thumb:hover,
+::v-deep .el-tree::-webkit-scrollbar-thumb:hover {
+  // background-color: #4578F6 !important;
+  background-color: #fff !important;
+}
+
+::v-deep .el-collapse::-webkit-scrollbar-corner,
+::v-deep .el-collapse-item__content::-webkit-scrollbar-corner,
+::v-deep .el-tree::-webkit-scrollbar-corner {
+  background-color: #DDE8FB !important;
+}
+</style>
diff --git a/src/views/system/archivesClassify/module/tableList.vue b/src/views/system/archivesClassify/module/tableList.vue
index 3454702..90f05dd 100644
--- a/src/views/system/archivesClassify/module/tableList.vue
+++ b/src/views/system/archivesClassify/module/tableList.vue
@@ -109,6 +109,7 @@
         :data="tableData"
         :row-key="getRowKey"
         :load="getSonClass"
+        height="calc(100vh - 276px)"
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         highlight-current-row
         @select-all="selectAll"
@@ -453,6 +454,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+[data-theme=light] .elect-cont-right .container-right {
+    min-height: calc(100vh - 330px);
+}
+.el-pagination{
+  margin: 8px 0 10px 0 !important;
+}
 .tip{
   line-height: 28px;
 }