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

<template>
  <div class="project-main">
    <div v-if="!detailViewVisible" style="height: 100%">
      <el-card shadow="never" class="aui-card--fill">
        <el-form
          :inline="true"
          :model="dataForm"
          class="search-wrapper"
          @submit.native.prevent
          @keyup.enter.native="getDataListInitial"
        >
          <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"
            @viewDetail="viewDetail"
            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>
    <detail-view v-if="detailViewVisible" ref="viewRef" :only-read="onlyRead" :is-search="'1'" :patient-id="patientId" @detailViewVisible="detailViewVisible=false" />
  </div>
</template>

<script>
import detailView from '@/components/360View/index' // 360试图
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,
    detailView,
    dataList,
    checkedFooter
  },
  mixins: [checked],
  inheritAttrs: false,
  props: {
    queryItem: { type: Object, default: () => { } }, // 可修改
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_LOGIN_URL + '/patient/data/searchByExcel',
      headers: {
        token: window.sessionStorage.getItem('xa-token')
      },
      dataForm: {},
      keyWord: '',
      patientId: '',
      limit: 10,
      page: 1,
      total: 0,
      onlyRead: true,
      dataListLoading: false, // 数据列表，loading状态
      queryItemVisible: false,
      isExpandAll: false,
      detailViewVisible: 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) {
          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: {
    reFresh() {
      this.pageCurrentChangeHandle(this.page)
    },
    // 初始化查询
    getDataListInitial() {
      this.page = 1
      this.retrieval()
    },
    viewDetail(val) {
      this.patientId = val
      this.detailViewVisible = true
    },
    // 检索
    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>
.aui-card--fill{
  height: 100%;
  ::v-deep .el-card__body{
    height: 100%;
    overflow-y: auto;
  }
}
.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 {
  height: 100%;
  .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>