GY_ceshi_web/src/views/data/frontHome/components/SearchBox2.vue

<template>
  <div class="app-container">
    <el-form :inline="true" :model="data" class="demo-form-inline" label-width="96px">
      <el-form-item label="住院号码">
        <el-input v-model="data.AAA28" clearable placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="出院科室">
        <el-select v-model="data.dep_id" filterable clearable placeholder="请选择">
          <el-option v-for="(item, index) in departmentList" :label="item.name" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出院时间">
        <el-date-picker
          v-model="data.start_time"
          type="date"
          :picker-options="pickerOptions1"
          placeholder="开始时间"
          style="width: 249px;"
        />
      </el-form-item>
      <el-form-item label="">
        <el-date-picker
          v-model="data.end_time"
          type="date"
          :picker-options="pickerOptions2"
          placeholder="结束时间"
          style="width: 249px;"
        />
      </el-form-item>
      <el-form-item label="" class="more-btn">
        <el-button type="text" @click="showMore = !showMore">{{ showMore ? '收回' : '更多'}}</el-button>
      </el-form-item>
      <el-collapse-transition>
        <div v-show="showMore">
          <el-form-item label="缺陷描述">
            <el-input v-model="data.desc" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="缺陷归类">
            <el-select v-model="data.type" filterable clearable placeholder="请选择">
              <el-option v-for="item of selectData.type" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="住院医师">
            <el-select v-model="data.AEE04" filterable clearable placeholder="请选择">
              <el-option v-for="item of selectData.doctor" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="编码员">
            <el-select v-model="data.AEE08" filterable clearable placeholder="请选择">
              <el-option v-for="item of selectData.doctor" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="主要诊断名称">
            <el-input v-model="data.ICD10_NAME" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="主要诊断编码">
            <el-input v-model="data.ICD10_ID1" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="主要手术名称">
            <el-input v-model="data.ICD9_NAME" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="主要手术编码">
            <el-input v-model="data.ICD9_ID1" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </div>
      </el-collapse-transition>
      <el-form-item style="display: block; text-align: center; position: relative;">
        <el-button type="primary" @click="onSubmit" class="search-btn">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="primary" icon="el-icon-download" @click="onExport" class="export-btn">导出数据</el-button>
      <el-button icon="el-icon-refresh" @click="onReset" style="position: absolute; top: -60px; right: 0px;">重置条件</el-button>
      <el-popover
        placement="bottom-end"
        title=""
        trigger="click"
        popper-class="table_code_popper"
      >
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="showCodes" @change="handleChange">
          <el-checkbox label="field">缺陷字段</el-checkbox>
          <el-checkbox label="desc">缺陷描述</el-checkbox>
          <el-checkbox label="AAA28">住院号码</el-checkbox>
          <el-checkbox label="AAA01">姓名</el-checkbox>
          <el-checkbox label="time">出院时间</el-checkbox>
          <el-checkbox label="AAC11N">出院科室</el-checkbox>
          <el-checkbox label="AEE08">编码员</el-checkbox>
          <el-checkbox label="AEE04">住院医师</el-checkbox>
          <el-checkbox label="ICD10_NAME">主要诊断名称</el-checkbox>
          <el-checkbox label="ICD10_ID1">主要诊断编码</el-checkbox>
          <el-checkbox label="ICD9_NAME">主要手术名称</el-checkbox>
          <el-checkbox label="ICD9_ID1">主要手术编码</el-checkbox>
          <el-checkbox label="level">缺陷分级</el-checkbox>
          <el-checkbox label="type">缺陷归类</el-checkbox>
        </el-checkbox-group>
        <el-button slot="reference" icon="el-icon-setting" style="margin-left: 10px;"></el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          AAA28: '',
          AAA01: '',
          AAC11N: '',
          dep_id: '',
          start_time: '',
          end_time: '',
          type: '',
          level: '',
          desc: '',
          AEE04: '',
          AEE08: '',
          ICD10_NAME: '',
          ICD10_ID1: '',
          ICD9_NAME: '',
          ICD9_ID1: ''
        }
      }
    },
    codes: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    const defaultCodes = [
      'field',
      'desc',
      'AAA28',
      'AAA01',
      'time',
      'AAC11N',
      'AEE08',
      'AEE04',
      'type',
      'level',
      'ICD10_NAME',
      'ICD10_ID1',
      'ICD9_NAME',
      'ICD9_ID1'
    ]
    return {
      showMore: false,
      showCodes: [],
      checkAll: true,
      isIndeterminate: false,
      defaultCodes,
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.data.end_time) {
            return time.getTime() > new Date(this.data.end_time).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.data.start_time) {
            return time.getTime() < new Date(this.data.start_time).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      selectData:  {},
      departmentList: []
    }
  },
  created() {
    this.getSelectData()
    this.getDepList()
    this.showCodes = JSON.parse(JSON.stringify(this.codes))
  },
  methods: {
    onExport() {
      this.$emit('export')
    },
    getDepList() {
      this.$axios.post('/omr_zk/department_list').then(res => {
        this.departmentList = res.data;
      });
    },
    handleCheckAllChange(val) {
      this.showCodes = val ? this.defaultCodes : []
      this.isIndeterminate = false
      this.$emit('codesChange', this.showCodes)
    },
    // 展示字段发生变化
    handleChange(val) {
      const checkedCount = val.length
      this.checkAll = checkedCount === this.defaultCodes.length
      this.$emit('codesChange', val)
    },
    getSelectData() {
      this.$axios.post('/home_quality/getErrorSerachWhere').then(res => {
        this.selectData = res.data
      });
    },
    onSubmit() {
      this.$emit('search')
    },
    onReset() {
      this.$emit('reset')
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  width: 1260px;
  position: relative;
  margin: 0 auto;
  .more-btn {
    position: absolute;
  }
}
.search-btn {
  width: 240px;
}
.btn-group {
  text-align: right;
  margin-bottom: 20px;
  position: relative;
}
</style>
<style lang="scss">
.table_code_popper {
  .el-checkbox {
    display: block;
    line-height: 26px;
  }
}
</style>