yxk-storeroom-system/src/views/archivesManage/archivesSearch/index.vue

<template>
  <div class="search-main">
    <div class="head-container">
      <h2 v-if="this.$route.path.indexOf('dashboard') === -1">模糊检索</h2>
      <div class="search-input">
        <el-input v-model="keywords" placeholder="请输入内容" class="input-with-select" style="width:50%;" @keyup.enter.native="dimSearch">
          <el-select slot="prepend" v-model="select" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
        </el-input>
      </div>
    </div>
    <div v-if="this.$route.path.indexOf('dashboard') === -1" class="search-result">
      <div v-show="isShow" class="search-title">
        <p>检索结果</p>
        <p>本次检索结果共计{{ resNum }}条数据</p>
      </div>
      <div v-show="resNum > 0">
        <el-table
          ref="table"
          v-loading="loading"
          :data="tableData"
          style="width: 100%;"
          height="calc(100vh - 493px)"
          @row-dblclick="handleDbClick"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column type="index" label="序号" width="90" align="center" />
          <el-table-column prop="child" label="子条数目" align="center" min-width="150" />
          <el-table-column prop="category_type" label="门类级别" align="center" min-width="100">
            <template slot-scope="scope">
              <!-- 门类级别 -->
              <span v-if="scope.row.category_type === 5" style="width:56px">文件级</span>
              <span v-if="scope.row.category_type === 4" style="width:56px">卷内级</span>
              <span v-if="scope.row.category_type === 3" style="width:56px">案卷级</span>
            </template>
          </el-table-column>
          <el-table-column prop="case_name" label="门类名称" align="center" min-width="150" />
          <el-table-column prop="fonds_no" label="全宗号" align="center" min-width="180" />
          <el-table-column prop="archive_no" label="档号" align="center" min-width="180" />
          <el-table-column prop="archive_year" label="归档年度" align="center" min-width="100" />
          <el-table-column prop="maintitle" label="题名" align="center" min-width="180" />
          <el-table-column prop="security_class" label="保密程度" align="center" min-width="100" />
          <el-table-column prop="department" label="部门" align="center" min-width="100" />
          <el-table-column prop="case_name" label="盒名称" align="center" min-width="180" />
          <el-table-column prop="folder_location_details" label="所在位置" align="center" min-width="180" />
          <el-table-column prop="create_time" label="创建时间" align="center" min-width="180">
            <template slot-scope="scope">
              <div>{{ scope.row.create_time | parseTime }}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" />
      </div>
      <!-- 详情 -->
      <detailDialog ref="detailDom" />
    </div>
  </div>
</template>

<script>
import detailDialog from './module/detailDialog.vue'
import { queryVagueArchives, FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList'

export default {
  name: 'ArchivesSearch',
  components: { detailDialog },
  data() {
    return {
      loading: false,
      tableData: [],
      keywords: '',
      select: 'maintitle',
      options: [
        { value: 'maintitle', label: '题名' },
        { value: 'archive_no', label: '档号' },
        { value: 'archive_year', label: '年度' },
        { value: 'security_class', label: '密级' },
        { value: 'case_name', label: '盒名称' },
        { value: 'retention', label: '保管期限' },
        { value: 'department', label: '部门名称' }
      ],
      page: {
        total: 0,
        size: 10,
        page: 1
      },
      resNum: 0,
      isShow: false,
      params: {
        criteria: null,
        query: null,
        page: null,
        size: null
      },
      homeSearchWords: '',
      homeSearchSelect: ''
    }
  },
  mounted() {
    if (localStorage.getItem('homeSearchWords') !== null) {
      this.keywords = localStorage.getItem('homeSearchWords')
      this.select = localStorage.getItem('homeSearchSelect')
      this.dimSearch()
    }
  },
  methods: {
    // 双击详情
    handleDbClick(row) {
      const params = {
        'categoryId': row.category_id,
        'archivesId': row.archives_id
      }
      FetchArchivesDetails(params).then(res => {
        if (res) {
          const rowData = {}
          res.forEach(item => {
            rowData[item.fieldName] = item.context
          })
          this.$refs.detailDom.rowData = rowData
          // 元数据
          FetchArchivesMetadata(params).then(res => {
            this.$refs.detailDom.xmlStr = res
          })
          this.$refs.detailDom.detailVisible = true
        }
      })
    },
    // 首页 / 搜索页切换操作
    handleSearch() {
      if (this.$route.path.indexOf('dashboard') !== -1) {
        this.$router.push('/archivesManage/archivesSearch')
        localStorage.setItem('homeSearchWords', this.keywords)
        localStorage.setItem('homeSearchSelect', this.select)
      } else {
        this.dimSearch()
      }
    },
    // 搜索
    dimSearch() {
      this.loading = true
      const arr = this.keywords.trim() // 去空格
      if (arr.length === 0) { // 无关键词时无数据
        this.tableData = []
        this.resNum = 0
        this.isShow = false
        this.page.total = 0
        this.page.size = 10
        this.page.page = 1
        localStorage.removeItem('homeSearchWords')
        localStorage.removeItem('homeSearchSelect')
      } else {
        this.params.criteria = this.select
        this.params.query = this.keywords.replace(/\s+/ig, ' ')
        this.params.page = this.page.page - 1
        this.params.size = this.page.size
        this.doQuery(this.params)
      }
      this.loading = false
    },
    // 调用搜索接口
    doQuery(params) {
      queryVagueArchives(params).then(res => {
        this.tableData = res.content
        this.page.total = res.totalElements
        this.resNum = res.totalElements
        this.isShow = true
        localStorage.removeItem('homeSearchWords')
        localStorage.removeItem('homeSearchSelect')
      })
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.loading = true
      this.page.size = e
      this.page.page = 1
      this.params.size = e
      this.params.page = 0
      this.doQuery(this.params)
      this.loading = false
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.loading = true
      this.page.page = e
      this.params.page = e - 1
      this.doQuery(this.params)
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search-main{
  width: 100%;
}
.head-container{
  padding: 100px 0 30px 0;
  text-align: center;
  h2{
    color: #fff;
    margin-bottom: 30px;
  }
}

.search-area {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  & .search-input {
    & .el-select .el-input {
      width: 130px;
    }
  }
}
// 补充不生效
::v-deep .el-input-group {
  height: 42px;
  & > input {
    height: 42px;
    border: 1px solid #339cff;
    background-color: #021941;
    &::placeholder {
      color: #fff;
    }
  }
}
::v-deep .el-input-group__prepend {
  width: 125px;
  background-color: #339cff;
  border: 1px solid #339cff;
  border-radius: 34px 0 0 34px;
  border-right: 0;
}
::v-deep .el-input__inner {
  color: #fff;
}
::v-deep .el-input-group__prepend div.el-select .el-input__inner{
  color: #fff;
  text-align: center;
}
::v-deep .el-input-group__append {
  width: 72px;
  left: -20px;
  text-align: center;
  background-color: #339cff;
  border: 1px solid #339cff;
  border-radius: 34px;
  & i {
    font-size: 25px;
    color: #fff;
  }
}
//检索结果
.search-result{
  padding: 0 20px;
  color: #fff;
  .search-title{
    padding:0 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
::v-deep ::-webkit-scrollbar-corner{
 background: transparent;
}
</style>