yxk-electronic-archives/src/views/archiveUtilize/archiveSearch/index.vue

<template>
  <div class="archive-search-main">
    <div class="search-main">
      <span class="bg_icon1" />
      <span class="bg_icon2" />
      <span class="bg_icon3" />
      <span class="bg_icon4" />

      <div class="search-content">
        <h2>{{ isCommon ? '档案检索': '高级检索' }}</h2>
        <div v-if="isCommon" class="common-search">
          <div class="search-input">
            <!-- @keyup.enter.native="dimSearch" -->
            <el-input v-model="keywords" placeholder="请输入检索关键字" class="input-with-select">
            <!-- <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-input>
            <el-button slot="append" @click="handleSearch"><i class="iconfont icon-sousuo" />搜索</el-button>
            <div class="advanced-search-btn" @click="isCommon=!isCommon">高级检索</div>
          </div>
          <div class="search-tab">
            <span class="active">全部</span>
            <span>项目</span>
            <span>案卷</span>
            <span>文件</span>
            <span>原文</span>
          </div>
          <div class="history-keyword">
            <h4>历史检索</h4>
            <div class="history-tag">
              <span>合同</span>
              <span>科技</span>
              <span>教育</span>
            </div>
          </div>
        </div>
        <div v-else class="advanced-search">
          <div class="advanced-search-main">
            <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="70px">
              <el-form-item label="字段名" prop="field">
                <el-select v-model="form.field" value-key="id">
                  <el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="运算符" prop="symbol">
                <el-select v-model="form.symbol" value-key="value" placeholder="请选择">
                  <el-option
                    v-for="item in symbolOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="检索值" prop="keyWord" :rules="getKeywordRules">
                <el-input v-model="form.keyWord" />
              </el-form-item>
            </el-form>
            <div class="advanced-btn">
              <el-button size="mini" @click="addConditionData"><i class="iconfont icon-xinzeng" />新增</el-button>
              <el-button class="filter-refresh" size="mini" icon="el-icon-refresh-left">重置</el-button>
            </div>
            <div class="search-condition">
              <h4> 检索条件</h4>
              <div class="condition-main">
                <div class="condition-left">
                  <el-button size="mini" :disabled="currentIndex===null"><i class="iconfont icon-shanchu" />删除</el-button>
                  <el-button size="mini" icon="el-icon-top" :disabled="currentIndex === 0" @click="moveUp(currentIndex)">上移</el-button>
                  <el-button size="mini" icon="el-icon-bottom" :disabled="currentIndex === conditionData.length - 1" @click="moveDown(currentIndex)">下移</el-button>
                </div>
                <ul class="condition-content">
                  <li v-for="(item, index) in conditionData" :key="index" :class="currentIndex===index ? 'active': ''" @click="selectCurrent(index)">
                    {{ item }}
                  </li>
                </ul>
                <div class="condition-right">
                  <el-button v-for="(item,index) in connectorList" :key="index" type="primary" size="mini" @click="addConnector(item)">{{ item }}</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="adv-bottom">
            <el-button slot="append" @click="handleAdvancedSearch"><i class="iconfont icon-sousuo" />搜索</el-button>
            <div class="advanced-search-btn" @click="isCommon=!isCommon">普通检索</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script >
import { FetchFindGroupType } from '@/api/system/field'
export default {
  name: 'ArchiveSearch',
  data() {
    return {
      isCommon: true,
      keywords: '',
      form: {
        field: null,
        symbol: null,
        keyWord: null
      },
      fieldOptions: [],
      symbolOptions: [
        {
          label: '包含',
          value: 'like'
        },
        {
          label: '不包含',
          value: 'not like'
        },
        {
          label: '等于',
          value: '='
        },
        {
          label: '不等于',
          value: '!='
        },
        {
          label: '为空',
          value: 'is null'
        },
        {
          label: '不为空',
          value: 'is not null'
        },
        {
          label: '大于',
          value: '>'
        },
        {
          label: '大于等于',
          value: '>='
        },
        {
          label: '小于',
          value: '<'
        },
        {
          label: '小于等于',
          value: '<='
        }
      ],
      rules: {
        field: [
          { required: true, message: '请选择字段名', trigger: 'change' }
        ],
        symbol: [
          { required: true, message: '请选择运算符', trigger: 'change' }
        ]
      },
      conditionData: [],
      currentIndex: null,
      connectorList: ['并且', '或者', '(', ')']
    }
  },
  computed: {
    getKeywordRules() {
      console.log(this.form.symbol)
      if ((this.form.symbol && this.form.symbol.label === '为空') || (this.form.symbol && this.form.symbol.label === '不为空')) {
        console.log('2222')
        return []
      } else {
        return [{ required: true, message: '请输入检索值', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getFieldCommon()
  },
  methods: {
    addConditionData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let str = ''
          if ((this.form.symbol && this.form.symbol.label === '包含') || (this.form.symbol && this.form.symbol.label === '不包含')) {
            str = `<span style="color:blue">${this.form.field.label}</span> <span style="color:green">${this.form.symbol.label}</span> "%" + <span style="color:red">${this.form.keyWord}</span> + "%"`
            // str = this.form.field.label + ' ' + this.form.symbol.label + " '%" + this.form.keyWord + "%'"
          } else {
            str = `<span style="color:blue">${this.form.field.label}</span> <span style="color:green">${this.form.symbol.label}</span> <span style="color:red">${this.form.keyWord}</span>`
            // str = this.form.field.label + ' ' + this.form.symbol.label + ' ' + this.form.keyWord
          }
          this.conditionData.push(str)
        }
      })
    },
    moveUp(index) {
      if (index > 0) {
        // [this.conditionData[index], this.conditionData[index - 1]] = [this.conditionData[index - 1], this.conditionData[index]]
        const temp = this.conditionData[index]
        this.conditionData[index] = this.conditionData[index - 1]
        this.conditionData[index - 1] = temp
        this.currentIndex = index - 1
      }
    },
    moveDown(index) {
      if (index < this.conditionData.length - 1) {
        // [this.conditionData[index], this.conditionData[index + 1]] = [this.conditionData[index + 1], this.conditionData[index]]
        const temp = this.conditionData[index]
        this.conditionData[index] = this.conditionData[index + 1]
        this.conditionData[index + 1] = temp
        this.currentIndex = index + 1
      }
    },
    selectCurrent(index) {
      if (this.currentIndex === index) {
        this.currentIndex = null
      } else {
        this.currentIndex = index
      }
    },
    addConnector(item) {
      this.conditionData.push(item)
    },
    getFieldCommon() {
      FetchFindGroupType({ isType: 2 }).then((res) => {
        if (res.length !== 0) {
          this.fieldOptions = res.map((item, index) => {
            const json = {}
            json.id = item.id
            json.label = item.fieldCnName
            json.value = item.fieldName
            return json
          })
        }
      })
    },
    handleAdvancedSearch() {

    },
    dimSearch() {
    },
    handleSearch() {
    }
  }
}
</script>

<style lang='scss' scoped>
.archive-search-main{
  padding: 0 20px 20px 20px;
  .search-main{
    position: relative;
    width: 100%;
    height: calc(100vh - 140px);
    background: url('~@/assets/images/archives/bg.png') no-repeat;
    background-size: 100% 100%;
    & span{
      display: block;
    }
    .bg_icon1{
      position: absolute;
      left: 110px;
      top: 400px;
      width: 236px;
      height: 116px;
      background: url('~@/assets/images/archives/ys1.png') no-repeat;
      background-size: 100% 100%;
    }
    .bg_icon2{
      position: absolute;
      left: 50%;
      bottom: 60px;
      width: 472px;
      height: 377px;
      margin-left: -236px;
      background: url('~@/assets/images/archives/ys2.png') no-repeat;
      background-size: 100% 100%;
    }
    .bg_icon3{
      position: absolute;
      right: 240px;
      bottom: 40px;
      width: 136px;
      height: 152px;
      background: url('~@/assets/images/archives/ys3.png') no-repeat;
      background-size: 100% 100%;
    }
    .bg_icon4{
      position: absolute;
      right: 110px;
      top: 50%;
      width: 170px;
      height: 136px;
      margin-top: -58px;
      background: url('~@/assets/images/archives/ys4.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .search-content{
    padding-top: 120px;
    h2{
      font-size: 40px;
      text-align: center;
      color: #1C1C1C;
      margin-bottom: 40px;
    }
  }
  .common-search{
    width: 800px;
    margin: 0 auto;
    .search-input{
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 800px;
      height: 54px;
      background-color: #fff;
      border-radius: 3px;
      .input-with-select{
        ::v-deep .el-input__inner{
          width: 664px;
          height: 54px !important;
          font-size: 14px;
          padding: 0 20px;
          border: none;
        }
      }
      .el-button{
        width: 136px;
        background-color: #0348F3;
        font-size: 16px;
        color: #fff;
        border-radius: 0 3px 3px 0;
      }
      .advanced-search-btn{
        position: absolute;
        right: -80px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #0348F3;
        cursor:default;
      }
    }
    .search-tab{
      display: flex;
      justify-content: space-around;
      width: 240px;
      padding: 15px 0 30px 0;
      margin: 0 auto;
      color: #545B65;
      span{
        font-size: 14px;
        // padding: 0 12px;
      }
      span.active{
        color: #0348F3;
      }
    }

    .history-keyword{
      width: 800px;
      height: 280px;
      padding: 10px 18px;
      background: #F6F9FD;
      box-shadow: 0px 4px 19px 0px rgba(0,0,0,0.06);
      border-radius: 3px;
      opacity: 0.8;
      border: 2px solid #FFFFFF;
      h4{
        font-size: 16px;
        height: 40px;
        margin-bottom: 10px;
        line-height: 33px;
        padding-left: 35px;
        color: #0C0E1E;
        background: url('~@/assets/images/archives/icon-ls.png') no-repeat left center;
        background-size: 32px 33px;
      }
      .history-tag{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        height: 200px;
        overflow: hidden;
        overflow-y: scroll;
        span{
          display: block;
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          padding: 0 12px;
          margin: 0 0 10px 10px;
          color: #545B65;
          background: #E6E8ED;
          border-radius: 3px;
          cursor:default;
        }
      }
    }
  }

  .advanced-search-main{
    position: relative;
    width: 1010px;
    // height: 350px;
    margin: 0 auto;
    padding: 30px 40px;
    background-color: #fff;
    border-radius: 3px;
    z-index: 9999;
    ::v-deep .el-form--inline .el-form-item{
      margin-right: 40px !important;
    }
    .advanced-btn{
      display: flex;
      justify-content: center;
      text-align: center;
      .el-button{
        margin-top: 0;
      }
    }
    .search-condition{
      padding: 18px 0 24px 0;
      margin-top: 20px;
      background: #F6F9FF;
      border-radius: 3px;
      opacity: 1;
      border: 1px dashed #DCDFE6;
      h4{
        width: 480px;
        margin: 0 auto 17px auto;
        padding-left: 33px;
        color: #0C0E1E;
        background: url('~@/assets/images/archives/icon-js.png') no-repeat left center;
        background-size: 33px 28px;
      }
    }
    .condition-main{
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      .condition-left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-button{
          width: 76px;
          margin: 5px 0;
          ::v-deep i.el-icon-top,
          ::v-deep i.el-icon-bottom{
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .condition-content{
        width: 480px;
        height: 160px;
        margin: 0 10px;
        background: #E6E8ED;
        overflow: hidden;
        overflow-y: scroll;
        li{
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          text-align: center;
          background-color: #fff;
          border-bottom: 1px solid #E6E8ED;
          cursor: default;
          &:hover,
          &:focus,
          &.active{
            background-color: #E8F2FF;
          }
        }
      }
      .condition-right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-button{
          width: 64px;
          margin: 5px 0;
          background-color: #0348F3;
          color: #fff;
        }
      }
    }
  }
}

.adv-bottom{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 31px auto 0 auto;
  width: 96px;
  z-index: 999999;
  .el-button{
    font-size: 16px;
    background-color: #0348F3;
    color: #fff;
  }
  .advanced-search-btn{
    padding-top: 7px;
    font-size: 14px;
    color: #0348F3;
    cursor: default;
  }
}
</style>