xiangan_pc/src/components/patient-search/index.vue

<template>
  <div class="project-main">
    <el-card shadow="never" class="aui-card--fill">
      <el-form
        :inline="true"
        :model="dataForm"
        class="search-wrapper"
        @submit.native.prevent
        @keyup.enter.native="search"
      >
        <div class="search-wrapper-top">
          <el-form-item class="search-item-input-wrapper">
            <el-input v-model="keyWord" size="small" :placeholder="'全文检索（主要内容）关键词'" clearable>
              <el-button slot="append" icon="el-icon-search" size="small" @click="getDataListInitial">搜索</el-button>
            </el-input>
          </el-form-item>
          <!-- 筛选条件 -->
          <el-form-item>
            <el-button type="primary" size="small" @click="queryItemVisible=!queryItemVisible">筛选
              <i v-if="!queryItemVisible" class="el-icon-arrow-right el-icon--right" />
              <i v-else class="el-icon-arrow-down el-icon--right" />
            </el-button>
          </el-form-item>

          <!-- slot -->
          <el-form-item>
            <slot name="btn" />
          </el-form-item>
        </div>

        <transition name="slide-fade">
          <div v-show="queryItemVisible" class="find-">
            <!-- 查询条件 -->
            <el-form-item label="必须" style="width:100%;">
              <item-select v-model="queryItemData_must" :connection="'must'" />
            </el-form-item>
            <el-form-item label="可以" style="width:100%;">
              <item-select v-model="queryItemData_should" :connection="'should'" />
            </el-form-item>
            <el-form-item label="排除" style="width:100%;">
              <item-select v-model="queryItemData_must_not" :connection="'must_not'" />
            </el-form-item>
          </div>
        </transition>
      </el-form>

      <!-- 查询结果 -->
      <div class="result-wrapper">
        <data-list
          ref="dataList"
          :data-list-loading="dataListLoading"
          :data-list="dataList"
          :project-id="projectId"
          v-bind="$attrs"
          v-on="$listeners"
        />
        <!-- 分页 -->
        <el-pagination
          background
          :current-page="page"
          :page-sizes="[10, 20, 50, 100, 200, 500]"
          :page-size="limit"
          :total="total"
          layout="total, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        />
      </div>
    </el-card>
    <!-- 底部全选反选 -->
    <checked-footer ref="checkfooter" table-ref="multipleTable" :current-table-list="currentTableList" :data-list="dataList">
      <div class="batch_button">
        <div class="batch_button">
          <el-button type="primary" size="small" :disabled="currentTableList.length > 0 ? false :true">加入分组
          </el-button>
        </div>
      </div>
    </checked-footer>
  </div>

</template>

<script>
import checked from '@/mixins/checked'
import checkedFooter from '@/components/checked-footer'
import dataList from './data-list.vue'
import itemSelect from '@/components/item-select'
import Cookies from 'js-cookie'

export default {
  components: {
    itemSelect,
    dataList,
    checkedFooter
  },
  mixins: [checked],
  inheritAttrs: false,
  props: {
    queryItem: { type: Object, default: () => { } }, // 可修改
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      uploadUrl: window.SITE_CONFIG['apiURL'] + '/patient/data/searchByExcel',
      headers: {
        token: Cookies.get('xa-token')
      },
      dataForm: {},
      keyWord: '',
      limit: 10,
      page: 1,
      total: 0,
      dataListLoading: false, // 数据列表，loading状态
      queryItemVisible: false,
      isExpandAll: false,
      queryItemData_must: [],
      queryItemData_should: [],
      queryItemData_must_not: [],
      dataList: [],
      currentTableList: []
    }
  },
  watch: {
    queryItem: {
      deep: true,
      handler(val) {
        if (val.must.length > 0 || val.should.length > 0 || val.must_not.length > 0) {
          console.log(val)
          this.queryItemVisible = true
          this.queryItemData_must = val.must
          this.queryItemData_should = val.should
          this.queryItemData_must_not = val.must_not
          this.getDataList()
        }
      }
    }
  },
  created() { },
  mounted() {
    this.retrieval()
  },
  methods: {
    // 初始化查询
    getDataListInitial() {
      this.page = 1
      this.retrieval()
    },
    // 检索
    retrieval() {
      this.getDataList()
      const queryItem = {
        must: this.queryItemData_must,
        should: this.queryItemData_should,
        must_not: this.queryItemData_must_not
      }
      this.$emit('update:queryItem', queryItem)
      // this.$emit('getQueryItem', queryItem)
    },
    getDataList() {
      this.dataListLoading = true
      this.$http.post('/search/page', {
        filterItemList: [...this.queryItemData_must, ...this.queryItemData_should, ...this.queryItemData_must_not],
        key: this.keyWord,
        limit: this.limit,
        page: this.page
      }).then(({ data: res }) => {
        this.dataListLoading = false
        this.total = res.data.total
        this.dataList = res.data.list
        if (this.isExpandAll) {
          this.$refs.dataList.expend()
        }
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.page = 1
      this.limit = val
      this.retrieval()
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.page = val
      this.retrieval()
    },
    clearSelect() {
      this.$refs.dataList.clearSelect()
    },
    beforeUpload() {
      this.dataListLoading = true
    },
    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      this.$message.success('检索完成!')
      this.dataListLoading = false
      if (response && response.data) {
        this.dataList = response.data
        this.total = response.data.length
      } else {
        this.dataList = []
        this.total = 0
      }
    },
    onError() {
      this.dataListLoading = false
    }
  }
}
</script>

<style lang='scss' scoped>
.search-wrapper-top {
  display: flex;
  align-items: center;
  .search-item-input-wrapper {
    width: 400px;
    padding-right: 10px;
    flex: 1;
  }
}

.result-wrapper {
  margin-top: 15px;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(5px);
  opacity: 0;
}
</style>

<style lang='scss'>
.project-main {
  .search-wrapper-top {
    .el-form-item__content {
      width: 100%;
      line-height: 0;
    }
    .el-form-item {
      margin-bottom: 5px;

      .el-switch .is-active {
        color: inherit;
      }
    }
  }
}
</style>