Newer
Older
dcms_front / src / views / seo / components / searchDiv.vue
zhangyingjie on 25 Mar 2021 5 KB 1.按钮、菜单增加图标
<!--简易搜索框-->
<template>
  <div class="search-div">
    <search-area :need-clear="true" :need-search-more="true" type="seperate" size="small" search-more-type="dialog" @search="searchCallback" @clear="clearInput">
      <search-item>
        <el-input v-model="listQuery.caseid" size="small" clearable placeholder="案卷编号"/>
      </search-item>
      <search-item>
        <el-input v-model="listQuery.description" size="small" clearable placeholder="案卷描述"/>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.source" size="small" clearable placeholder="请选择信息来源">
          <el-option
            v-for="item in caseSourceList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.caseState" size="small" clearable placeholder="请选择案卷状态">
          <el-option
            v-for="item in caseStateList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </search-item>
      <div slot="searchMore">
        <search-more ref="demo1" :list-query="listQuery"/>
      </div>

    </search-area>
    <!--<search-more v-show="searchMoreShow" ref="searchMore" @searchMore="searchMore"/>-->
  </div>
</template>

<script>
import { getCaseSourceList, getCaseStateList } from '@/api/seo/seo'
import SearchMore from './searchMore'

export default {
  name: 'SearchDiv',
  components: { SearchMore },
  props: {
    listQuery: {
      type: Object,
      default() {
        return {
          caseid: '', // 案卷编号
          caseState: '', // 案卷状态
          source: '', // 案卷来源
          description: '', // 案卷描述
          fieldintro: '', // 地点描述
          eorc: '', // 案卷类型,
          casetypeCode: '', // 大类
          casetypeDetailCode: '', // 小类
          onedeptid: '', // 业务单位id
          filingType: '', // 归档类型
          isShopCase: '', // 是否五包案卷,
          specialQuery: '', // 超期查询字典值
          createUser: '', // 上报人员id
          createTimeBegin: '', // 案卷录入开始时间
          createTimeEnd: '', // 案卷录入结束时间
          registerTimeBegin: '', // 立案开始时间
          registerTimeEnd: '', // 立案结束时间
          closeTimeBegin: '', // 结案开始时间
          closeTimeEnd: '', // 结案结束时间
          offset: 1,
          limit: 10,
          sort: '',
          order: ''
        }
      }
    }
  },
  data() {
    return {
      searchMoreShow: false, // 高级检索弹窗是否显示
      caseSourceList: [],
      caseStateList: []
    }
  },
  mounted() {
    this.getCaseSource()
    this.getCaseState()
  },
  methods: {
    // 搜索回调
    searchCallback() {
      // this.search({ ...this.$refs.demo1.listQuery })
      this.search({ ...this.listQuery })
    },
    // 获取案卷来源列表
    getCaseSource() {
      getCaseSourceList().then(response => {
        this.caseSourceList = response.data
      })
    },
    // 获取案卷状态列表
    getCaseState() {
      getCaseStateList().then(response => {
        this.caseStateList = response.data
      })
    },
    // 查询条件
    search(obj = this.listQuery) {
      obj.offset = 1
      this.$emit('searchForm', obj)
    },
    // 执行高级查询
    searchMore(listQuery) {
      this.$emit('searchForm', listQuery)
    },
    openSearchMore() {
      this.searchMoreShow = true
      this.$refs.searchMore.initDialog(this.searchMoreShow)
    },
    // 重置后的操作, 若不需要显示重置按钮则不需要写
    clearInput() {
      const offset = this.listQuery.offset
      const limit = this.listQuery.limit
      const sort = this.listQuery.sort
      const order = this.listQuery.order
      this.listQuery = {
        caseid: '', // 案卷编号
        caseState: '', // 案卷状态
        source: '', // 案卷来源
        description: '', // 案卷描述
        fieldintro: '', // 地点描述
        eorc: '', // 案卷类型,
        casetypeCode: '', // 大类
        casetypeDetailCode: '', // 小类
        onedeptid: '', // 业务单位id
        filingType: '', // 归档类型
        isShopCase: '', // 是否五包案卷,
        specialQuery: '', // 超期查询字典值
        createUser: '', // 上报人员id
        createTimeBegin: '', // 案卷录入开始时间
        createTimeEnd: '', // 案卷录入结束时间
        registerTimeBegin: '', // 立案开始时间
        registerTimeEnd: '', // 立案结束时间
        closeTimeBegin: '', // 结案开始时间
        closeTimeEnd: '', // 结案结束时间
        offset: offset,
        limit: limit,
        sort: sort,
        order: order
      }
      this.searchCallback()
      // this.$message.success('clearInput')
    }
  }
}
</script>

<style scoped>
  .search-div{
    /* padding-top: 50px; */
    /* padding-bottom: -40px; */
    /*margin-top: 20px;*/
    /*margin-left: 20px;*/
  }
  .el-form-item {
    margin-bottom: 5px !important;
  }
</style>