peisweb/src/components/patientRegister/PatientRegisterEditQuery.vue

<template>
  <div>
    <!-- border: 1px solid #888;border-radius:5px;background-color: #F5F7FA; -->
    <div style="display: flex; flex-wrap: wrap; height:32px;">
      <div class="query">
        <!--
        <span class="querySpan">查找：&nbsp;&nbsp;条码号</span>
        -->
        <el-input placeholder="条码号" v-model="query.patientRegisterNo" size="small" 
          clearable style="width: 140px"/>
      </div>
      <div class="query">
        <!--
        <span class="querySpan">档案号</span>
        -->
        <el-input placeholder="档案号" v-model="query.patientNo" size="small" 
          clearable style="width: 100px" />
      </div>
      <div class="query">
        <!--
        <span class="querySpan">姓名</span>
        -->
        <el-input placeholder="姓名" v-model="query.patientName" size="small" 
          clearable style="width: 80px"/>
      </div>
      <div class="query">
        <!--
        <span class="querySpan">手机号</span>
        -->
        <el-input placeholder="手机号" v-model="query.tel" size="small" 
          clearable style="width: 120px"/>
      </div>
    </div>

    <!-- 体检人员记录列表 -->
    <el-dialog title="体检人员列表" :visible.sync="dialogWin.PatientRegisterForChoose" width="800px" :show-close="false" :close-on-click-modal="false"
      :append-to-body="true">
      <PatientRegisterForChoose :params="PatientRegisterList"/>  
    </el-dialog>


    
  </div>
</template>
<script>

import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { getPagePriv,checkPagePriv, objCopy, setNull, dddw,checkIDCode, parseID, birthdayToAge,ageToBirthday, deepCopy, arrayFilter, arrayReduce,parsIcCardtoLocal, photoParse, savePeoplePhoto, arrayExistObj } from "../../utlis/proFunc";
import PatientRegisterForChoose from "./PatientRegisterForChoose.vue";
export default {
  components: {
    PatientRegisterForChoose
  },  
  data() {
    return {
      query: {
        patientRegisterNo: '',
        patientNo: '',
        patientName: '',
        tel: ''
      },
      PatientRegisterList:[], 
    };
  },

  created() {    
  },

  //挂载完成
  mounted() {
    this.enterToQuery()
  },

  computed: {
    ...mapState(["dialogWin","dataTransOpts"]),
  },
  methods: {
    
    //回车替代查询
    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.quickQuery('patientRegisterNo')
                  break;
                case '档案号':
                  if(input.value) this.quickQuery('patientNo')
                  break;
                case '姓名':
                  if(input.value) this.quickQuery('patientName')
                  break;  
                case '手机号':
                  if(input.value) this.quickQuery('tel')
                  break;                 
              }
            }          
          });
        });
      });
    }, 

    //快速查找个人数据
    quickQuery(type) {
      let url1 = '/api/app/patientregister/getpatientregisterorpatient'
      let body={}
      let url2 = '/api/app/patientregister/getlistinfilter'
      
      switch (type) {
        case 'patientNo':
          if(!this.query.patientNo) return;  
          body = {
            sType:2,
            patientNo:this.query.patientNo
          }
          this.getpatientregisterorpatient(url1,body)
          break;
        case 'patientRegisterNo':  
          if(!this.query.patientRegisterNo) return;       
          body = {
            sType:1,
            patientRegisterNo:this.query.patientRegisterNo
          }
          this.getpatientregisterorpatient(url1,body)
          break;
        case 'tel':
          if(!this.query.tel) return;          
          body = {
            phone:this.query.tel
          }
          this.getlistinfilter(body);
          break;
        case 'patientName':
          if(!this.query.patientName) return;
          body = {
            patientName:this.query.patientName
          }
          this.getlistinfilter(body);
          break;
        default:
          return;
      }

    },

    //按流水号或档案号查客户信息
    getpatientregisterorpatient(url,body){
      postapi(url,body)
        .then((res) => {
          console.log('getpatientregisterorpatient', res)
          if (res.code == 1) {            
            objCopy(res.data, this.form)
            this.dataTransOpts.tableS.patient_register.id = res.data.id
            setTimeout(() => {
              this.dataTransOpts.refresh.patient_register.S++
            }, 10);
            // this.patientRegister.patientRegisterId = res.data.id
            // this.patientRegister.photo = res.data.photo
            // this.getPatientRegisterAbs(res.data.id)
          }else if(res.code == 0){
            this.$message.info({ showClose: true, message: "未找到相关信息"})            
          } 
        });
    },

    //按手机号或姓名查找客户信息
    getlistinfilter(body){
      
      postapi('/api/app/patientregister/getlistinfilter', body)
        .then(res => {
          if (res.code != -1) {
            if (res.data.items.length == 1) {
              this.dataTransOpts.tableS.patient_register.id = res.data.items[0].id
              setTimeout(() => {
                this.dataTransOpts.refresh.patient_register.S++
              }, 10);
              // this.getPatientRegister(res.data.items[0].id)
            } else if (res.data.items.length > 1) {
              this.PatientRegisterList = res.data.items
              this.dialogWin.PatientRegisterForChoose = true // 弹窗
              this.dataTransOpts.plus.PatientRegisterForChoose++
            } else {
              this.dataTransOpts.tableS.patient_register.id = ''
              setTimeout(() => {
                this.dataTransOpts.refresh.patient_register.S++
              }, 10);
            }
          }
        }) 

    },   
  },

  //监听事件
  watch: {    
    // 清空查询条件
    "dataTransOpts.plus.clearPatientRegisterQuery":{
      immediate:true,
      handler(newVal, oldVal) {
        console.log(`watch 清空查询条件 newVal:${newVal} oldVal:${oldVal}`);        
        this.query.patientRegisterNo = ''
        this.query.patientNo = ''
        this.query.patientName = ''
        this.query.tel = ''
      }
    },
  },
};
</script>
<style scoped>


.btn {
  margin-top: 5px;
}

.commonbutton {
  width: 100px;
}

.query {
  margin-left: 10px;
}
.querySpan {
  margin-right: 2px;
}
</style>