peisweb/src/components/patientRegister/patientRegisterQuery.vue

<template>
  <div style="display: flex;">

    <div
      :style="'display: flex;flex-wrap: wrap;height: 80px;width: 1216px;background-color: #fff;border-radius: 8px;margin-bottom: 15px;align-items: center;padding: 10px;width:' + (window.pageWidth - (orgEnable == 'Y' ? 0 : 200) - 110 - 10) + 'px;'">
      <div class="query">

        <el-select v-model="query.dateType" placeholder="请选择" style="width: 80px" size="small">
          <el-option label="登记日期" :value="'1'" />
          <el-option label="体检日期" :value="'2'" />
          <el-option label="登记或体检" :value="'3'" />
        </el-select>
        <!-- dateType  1 登记，2 体检，3 体检或登记-->
        <el-date-picker v-model="query.startDate" type="date" placeholder="起始日期" size="small" style="width:90px;"
          value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
        <span class="spanClass">至</span>
        <el-date-picker v-model="query.endDate" type="date" placeholder="截止日期" size="small" style="width:90px;"
          value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
      </div>
      <div class="query">
        <span class="spanClass">连续扫码</span>
        <el-checkbox v-model="query.isSeries" size="small" true-label="Y" false-label="N" />
      </div>
      <div class="query">
        <span class="spanClass">条码号</span>
        <el-input placeholder="条码号" v-model="query.patientRegisterNo" size="small" clearable style="width: 120px" />
      </div>
      <div class="query">
        <span class="spanClass">档案号</span>
        <el-input placeholder="档案号" v-model="query.patientNo" size="small" clearable style="width: 80px"
          @input="changeValue" />
      </div>
      <div class="query">
        <span class="spanClass">姓名</span>
        <el-input placeholder="姓名" v-model="query.patientName" size="small" clearable style="width: 60px" />
      </div>
      <div class="query">
        <span class="spanClass">检查条码</span>
        <el-input placeholder="检查条码" v-model="query.pacsNo" size="small" clearable style="width: 120px" />
      </div>
      <div class="query">
        <span class="spanClass">检验条码</span>
        <el-input placeholder="检验条码" v-model="query.lisNo" size="small" clearable style="width: 120px" />
      </div>
      <div class="query">
        <span class="spanClass">性别</span>
        <el-select v-model="query.sex" placeholder="性别" style="width: 50px" size="small" clearable>
          <el-option v-for="item in dict.sex" :key="item.id" :label="item.displayName" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">手机号</span>
        <el-input placeholder="手机号/电话" v-model="query.phone" size="small" clearable style="width: 100px" />
      </div>
      <div class="query">
        <span class="spanClass">身份证</span>
        <el-input placeholder="身份证" v-model="query.idCardNo" size="small" clearable style="width: 150px" />
      </div>
      <div class="query">
        <el-tooltip class="item" effect="dark" content="单位作为查询条件" placement="top">
          <el-checkbox v-model="query.customerOrgFlag"></el-checkbox>
        </el-tooltip>
        <el-input placeholder="请选择单位" v-model="query.customerOrgName" size="small" disabled style="width: 120px" />
        <!--
        <el-cascader v-model="query.customerOrgId" :options="patientRegister.customerOrgTreeAll"
          :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops, }" placeholder="请选择单位"
          :show-all-levels="false" clearable :disabled="orgEnable == 'Y' ? false : true" size="small"
          style="width:120px;">
        </el-cascader>
        -->
      </div>
      <div v-show="dispTimes" class="query">
        <span class="spanClass">次数</span>
        <el-select v-model="query.customerOrgRegister" placeholder="次数" clearable @change="changeCustomerOrgRegister"
          style="width: 50px;" size="small" value-key="id">
          <el-option v-for="item in customerOrgRegisterList" :key="item.id" :label="item.medicalTimes" :value="item">{{
            item.medicalTimes + '次' }}</el-option>
        </el-select>
      </div>
      <div v-show="dispTimes" class="query">
        <span class="spanClass">分组</span>
        <el-select v-model="query.customerOrgGroupIds" placeholder="请选择" clearable filterable style="width: 150px"
          size="small" multiple collapse-tags>
          <el-option v-for="item in dict.customerOrgGroup" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">体检类别</span>
        <el-select v-model="query.medicalTypeIds" placeholder="请选择" clearable filterable style="width: 170px"
          size="small" multiple collapse-tags>
          <el-option v-for="item in dict.medicalType" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">状态</span>
        <el-select v-model="query.completeFlags" placeholder="请选择" clearable style="width: 100px" size="small" multiple
          collapse-tags>
          <el-option v-for="item in dict.completeFlag" :key="item.id" :label="item.displayName" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">人员类别</span>
        <el-select v-model="query.personnelTypeIds" placeholder="请选择" clearable filterable style="width: 170px"
          size="small" multiple collapse-tags>
          <el-option v-for="item in dict.personnelType" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">表回收</span>
        <el-select v-model="query.isRecoverGuide" placeholder="请选择" clearable style="width: 80px" size="small">
          <el-option label="未回收" value="N" />
          <el-option label="已回收" value="Y" />
        </el-select>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div style="margin-left: 10px;margin-top: -10px;">
      <div class="listBtn">
        <el-button class="commonbutton" @click="btnQuery">查询</el-button>
      </div>
      <div v-show="checkPagePriv(pagePriv.privs, '读身份证')" class="listBtn">
        <el-button type="danger" class="commonbutton" @click="readIdCard">读身份证</el-button>
      </div>
      <div class="listBtn">
        <el-button type="danger" class="commonbutton" @click="btnClear">清除条件</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { getPagePriv, checkPagePriv, parsIcCardtoLocal, deepCopy } from '../../utlis/proFunc'
import moment from "moment";

export default {
  components: {},
  props: ["orgEnable", "refParams"],
  data() {
    return {
      pagePriv: {
        routeUrlorPageName: 'patientRegister', //当前页面归属路由或归属页面权限名称
        privs: [] // 页面权限
      },
      dialogVisible: false,
      customerOrgRegisterList: [],
      query: {  //查询条件
        queryType: '', // 条码号patientRegisterNo/档案号patientNo 等 排他查询
        dateType: 'creationTime', //登记日期
        dateRange: null, //日期范围
        startDate: null,
        endDate: null,
        containRefuse: true, //包含弃检项目        
        times: 0, //触发查询次数
        customerOrgId: "", //体检单位ID                
        customerOrgTopId: "", //单位顶级ID
        customerOrgFlag: true, //单位作为查询条件
        customerOrgRegister: { id: '' }, //单位体检次数 
        customerOrgGroupIds: [], //体检分组
        checkAsbs: null,
        patientRegisterNo: '',
        pacsNo: '',
        lisNo: '',
        patientName: '', //姓名
        sex: '', //性别
        idCardNo: '', //身份证号
        isReportPrint: '', // 报告是否打印
        isSeries: 'N',
        isSmsComplete: "N",
        isPhoneComplete: "N",
        diagnosisLevelId: [],
        medicalTypeIds: [],
        completeFlags: [],
        medicalConclusionId: [],
        personnelTypeIds: [],
        isRecoverGuide: '',
        photo: '',  // 参数控制 读身份证查询时，是否更新照片用
      },
    };
  },

  created() {
    //获取用户当前页面的权限
    let userPriv = window.sessionStorage.getItem('userPriv')
    if (userPriv) this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName))

    let ldate = moment(new Date()).format('yyyy-MM-DD');
    this.query.startDate = ldate;
    this.query.endDate = ldate;
    this.query.dateType = '2'
  },

  //挂载完成
  mounted() {
    // 字典数据初始化
    this.dictInit()

    // 触发回车事件
    this.enterToQuery()
  },

  computed: {
    ...mapState(["pickerOptions", "window", "dict", "dataTransOpts", "customerOrg"]),

    dispTimes() {
      return this.query.customerOrgFlag && this.query.customerOrgId && this.query.customerOrgId != this.dict.personOrgId
    }

  },
  methods: {
    checkPagePriv,

    btnClear() {
      this.query.patientRegisterNo = ''
      this.query.patientNo = ''
      this.query.patientName = ''
      this.query.pacsNo = ''
      this.query.lisNo = ''
      this.query.sex = ''
      this.query.phone = ''
      this.query.idCardNo = ''

      this.query.medicalTypeIds = []
      this.query.completeFlags = []
      this.query.personnelTypeIds = []
      this.query.isRecoverGuide = ''

    },
    changeValue(e) {
      this.$forceUpdate()
    },

    // 字典数据初始化
    dictInit() {
      //体检类别
      getapi("/api/app/medical-type/in-filter").then((res) => {
        if (res.code > -1) {
          this.dict.medicalType = res.data;
        }
      });

      //人员类别
      getapi("/api/app/personnel-type/in-filter").then((res) => {
        if (res.code > -1) {
          this.dict.personnelType = res.data;
        }
      });
    },

    changeOrgId(customerOrgId) {
      if (!customerOrgId || customerOrgId == this.dict.personOrgId) {
        this.query.customerOrgRegister = null
        this.customerOrgRegisterList = []
        if (customerOrgId == this.dict.personOrgId) {
          let today = new Date()
          this.query.startDate = today
          this.query.endDate = today
        }
        return
      }

      this.query.customerOrgId = customerOrgId
      this.query.customerOrgName = this.refParams.customerOrgName

      // 获取顶级ID (优化无需获取顶级ID)
      if (this.refParams?.parentNodes.length > 1) {
        this.query.customerOrgTopId = this.refParams.parentNodes[1]
      } else {
        this.query.customerOrgTopId = customerOrgId
      }
      // getapi(`/api/app/customer-org/parent/${customerOrgId}`).then(res => {
      //   if (res.code > - 1) {
      //      = res.data
      //     // 获取体检次数列表
      //     return getapi(`/api/app/customerorgregister/getlistincustomerorgid?CustomerOrgId=${this.query.customerOrgTopId}`)
      //   }
      // })
      getapi(`/api/app/customerorgregister/getlistincustomerorgid?CustomerOrgId=${this.query.customerOrgTopId}`)
        .then(res => {
          if (res && res.code > -1) {
            this.customerOrgRegisterList = res.data;
            if (res.data.length > 0) {
              this.query.customerOrgRegister = res.data[res.data.length - 1];
              this.changeCustomerOrgRegister(res.data[res.data.length - 1])
            }
            // this.query.times++
            // console.log('this.query.customerOrgRegister',this.query.customerOrgRegister)
          }
        });
    },


    //查询
    btnQuery(queryType) {
      this.query.queryType = queryType
      if(queryType != 'idCardNo') this.query.photo = ''
      this.$emit('triggerQuery', this.query)
    },

    // 选择体检次数
    changeCustomerOrgRegister(v) {
      // console.log('changeCustomerOrgRegister')
      this.query.startDate = new Date(v.beginTime)
      if (v.isComplete == 'Y') {
        this.query.endDate = new Date(v.endTime)
      } else {
        this.query.endDate = new Date()
      }
      if (v && v.id) this.getCustomerOrgGroup(v.id)
    },

    //获取体检次数下的分组
    getCustomerOrgGroup(customerOrgRegisterId) {
      // console.log('getCustomerOrgGroup')
      this.query.customerOrgGroupIds = []
      this.dict.customerOrgGroup = []
      // /api/app/customerorggroup/getlistinfilter?CustomerOrgRegisterId=${customerOrgRegisterId}`
      postapi('/api/app/CustomerOrgGroup/GetListForPatentRegisterByFilter', { customerOrgRegisterId }).then(res => {
        if (res.code > - 1) {
          this.dict.customerOrgGroup = res.data;
          this.$forceUpdate()  // 强制视图更新（页面渲染）
        }
      })
    },

    //读身份证
    readIdCard() {
      if (!this.$peisAPI) {
        this.$message.info({ showClose: true, message: "此功能，需要在壳客户端才可运行！" })
        return
      }
      this.btnClear()

      this.$peisAPI.peopleIcCard().then(res => {
        console.log('peopleIcCard', res)
        let lres = JSON.parse(res)
        if (lres.code > -1) {
          let idNos = parsIcCardtoLocal(lres.data, this.dict.sex, this.dict.nation)
          // this.form.patientName = idNos.Name
          // this.form.birthDate = idNos.birthDate
          // this.form.sexId = idNos.sexId
          // this.form.age = idNos.age
          // this.form.nationId = idNos.nationId
          // this.form.idNo = idNos.IDCode
          // this.form.address = idNos.Address
          this.query.photo = 'data:image/bmp;base64,' + idNos.Photo   //批量导入人员无照片，读身份证查询时，可以控制更新

          this.query.patientName = idNos.Name
          this.query.sex = idNos.sexId
          this.query.idCardNo = idNos.IDCode
          // 触发按身份证查询
          this.btnQuery('idCardNo') 
        } else {
          this.$message.error({ showClose: true, message: lres.message })
        }
      })
        .catch(err => {
          this.$message.error({ showClose: true, message: `读取身份证失败，原因：${err}` })
        })
    },

    // 根据pacs条码查询
    onQueryByPacsNo(checkRequestNo) {
      postapi('/api/app/PatientRegister/GetPatientRegisterNoByCheckRequestNo', { checkRequestNo }).then(res => {
        if (res.code > 0) {
          this.query.patientRegisterNo = res.data.patientRegisterNo
          this.btnQuery("patientRegisterNo")
        }
      })
    },

    // 根据lis条码查询
    onQueryByLisNo(lisRequestNo) {
      postapi('/api/app/PatientRegister/GetPatientRegisterNoByLisRequestNo', { lisRequestNo }).then(res => {
        if (res.code > 0) {
          this.query.patientRegisterNo = res.data.patientRegisterNo
          this.btnQuery("patientRegisterNo")
        }
      })
    },

    //回车替代查询（取消）    
    enterToQuery() {
      // console.log('enterToTab');
      this.$nextTick(() => {
        let inputs = document.querySelectorAll(["input"]); //用数组可以读取多个标签的元素  //.inline-input

        // 为每个输入框添加键盘事件监听器
        inputs.forEach((input, i) => {
          // console.log('input',input);
          input.addEventListener('keydown', (event) => {
            if (event.keyCode === 13) {
              // 阻止回车键的默认行为（换行）            
              event.preventDefault();

              // 如果按下的是回车查询
              // console.log(input.getAttribute('placeholder'),input.value)
              let placeholder = input.getAttribute('placeholder')
              switch (placeholder) {
                case '条码号':
                  if (input.value) this.btnQuery('patientRegisterNo')
                  input.select()
                  break;
                case '档案号':
                  if (input.value) this.btnQuery('patientNo')
                  input.select()
                  break;
                case '姓名':
                  if (input.value) this.btnQuery('patientName')
                  input.select()
                  break;
                //case '预约手机号':
                case '身份证':
                  if (input.value) this.btnQuery('idCardNo')
                  input.select()
                  break;
                case '检查条码':
                  if (input.value) this.onQueryByPacsNo(input.value)
                  input.select()
                  break;
                case '检验条码':
                  if (input.value) this.onQueryByLisNo(input.value)
                  input.select()
                  break;
              }
            }
          });

          input.addEventListener('click', (event) => {
            let placeholder = input.getAttribute('placeholder')
            switch (placeholder) {
              case '条码号':
              case '档案号':
              case '姓名':
              case '预约手机号':
              case '身份证':
              case '检查条码':
              case '检验条码':
                input.select()
                break;
            }
          });
        });
      });
    },


  },

  watch: {
    "refParams.PatientRegisterQueryTimes": {
      // immediate: true,
      handler(newVal, oldVal) {
        console.log(`watch 体检单位切换 newVal:${newVal} oldVal:${oldVal}`, `customerOrgId: ${this.refParams.customerOrgId}`);
        if (newVal != oldVal) this.changeOrgId(this.refParams.customerOrgId)
      }
    },
  },

}
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global_font.css";

.query {
  margin-right: 10px;
  font-size: 14px;
  color: #232748;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
}

.listBtn {
  margin-top: 5px;

  text-align: center;
}

.btnClass {
  /* position: absolute; */
  /* left: 0;
  top: 0; */
  width: 100px;
}

.spanClass {
  font-size: 14px;
  padding: 0 2px 0 0;
}
</style>