yxk-electronic-archives/src/views/archiveUtilize/archiveSearch/module/resultList.vue

<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>