peisweb/src/components/patientRegister/patientRegisterQuery.vue

<template>

  <div style="display: flex;">

    <div :style="'margin-left: 5px;display: flex; flex-wrap: wrap; height:100px;width:' + (window.pageWidth - (orgEnable=='Y' ? 0:200) - 110 - 50) + 'px;'">
      <div class="query">
        <span class="spanClass">登记日期：</span>
        <el-date-picker v-model="patientRegister.query.startDate" type="date" placeholder="起始日期" size="small" style="width:90px;"/>
        <span class="spanClass">至</span>
        <el-date-picker v-model="patientRegister.query.endDate" type="date" placeholder="截止日期" size="small" style="width:90px;"/>
      </div>
      <div class="query">
        <span class="spanClass">条码号：</span>
        <el-input placeholder="条码号" v-model="patientRegister.query.patientRegisterNo" size="small" clearable
          style="width: 130px" />
      </div>
      <div class="query">
        <span class="spanClass">档案号：</span>
        <el-input placeholder="档案号" v-model="patientRegister.query.patientNo" size="small" clearable
          style="width: 110px" />
      </div>
      <div class="query">
        <span class="spanClass">姓名：</span>
        <el-input placeholder="姓名" v-model="patientRegister.query.patientName" size="small" clearable
          style="width: 80px" />
      </div>
      <div class="query">
        <span class="spanClass">性别：</span>
        <el-select v-model="patientRegister.query.sex" placeholder="请选择" style="width: 80px" size="small">
          <el-option v-for="item in dict.forSex" :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="patientRegister.query.phone" size="small" clearable
          style="width: 100px" />
      </div>
      <div class="query">
        <span class="spanClass">身份证号：</span>
        <el-input placeholder="身份证号" v-model="patientRegister.query.idCardNo" size="small" clearable
          style="width: 150px" />
      </div>
      <div class="query">
        <el-checkbox v-model="patientRegister.query.customerOrgFlag">单位作为查询条件</el-checkbox>
        <el-cascader v-model="patientRegister.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 class="query">
        <span class="spanClass">次数：</span>
        <el-select
          v-model="patientRegister.query.customerOrgRegister"
          placeholder="次数" @change="changeCustomerOrgRegister"
          style="width: 60px;"
          size="small"
          value-key="id"
        >
          <el-option
            v-for="item in customerOrgRegisterList"
            :key="item.id"
            :label="item.medicalTimes"
            :value="item"
          />
        </el-select>
      </div>
      <div class="query">
        <span class="spanClass">状态：</span>
        <el-select v-model="patientRegister.query.completeFlag" placeholder="请选择" clearable style="width: 80px"
          size="small">
          <el-option v-for="item in dict.completeFlag" :key="item.id" :label="item.displayName" :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div style="margin-left: 10px;">
      <div v-show="checkPagePriv(pagePriv.privs,'查询')" class="listBtn">
        <el-button class="btnClass" @click="btnQuery">查询</el-button>
      </div>
      <div v-show="checkPagePriv(pagePriv.privs,'读身份证')" class="listBtn">
        <el-button type="danger" class="btnClass" @click="readIdCard">读身份证</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'

export default {
  components: {},
  props: ["orgEnable"],
  data() {
    return {
      pagePriv:{
        routeUrlorPageName:'patientRegister', //当前页面归属路由或归属页面权限名称
        privs:[] // 页面权限
      },
      dialogVisible: false,
      customerOrgRegisterList:[],
    };
  },

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

    let ldate = new Date();
    this.patientRegister.query.startDate = ldate;
    this.patientRegister.query.endDate = ldate;
  },

  //挂载完成
  mounted() { },

  computed: {
    ...mapState(["window", "dict", "patientRegister", "customerOrg"]),
  },
  methods: {
    checkPagePriv,
    //查询
    btnQuery() {
      this.patientRegister.query.times++;
      console.log("this.patientRegister.query", this.patientRegister.query);
    },

    changeCustomerOrgRegister(v){
      this.patientRegister.query.startDate = new Date(v.beginTime)
      if(v.isComplete == 'Y'){
        this.patientRegister.query.endDate = new Date(v.endTime)
      }else{
        this.patientRegister.query.endDate = new Date()
      }
    },

    //读身份证
    readIdCard() {
      if(!this.$peisAPI) {
        this.$message.info("此功能，需要在壳客户端才可运行！")
        return       
      }
      this.$peisAPI.peopleIcCard().then(res => {
        console.log('peopleIcCard',res)
        let lres = JSON.parse(res)
        if (lres.code >= 0) {          
          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.patientRegister.photo = 'data:image/bmp;base64,' + idNos.Photo
          this.patientRegister.query.patientName = idNos.Name
          this.patientRegister.query.sex = idNos.sexId
          this.patientRegister.query.idCardNo = idNos.IDCode
        }
      })      
    },

  },

  watch:{
    'patientRegister.query.customerOrgId'(newVal,oldVal){
      // console.log('patientRegister.query.customerOrgId',newVal,oldVal)
      if(newVal != oldVal){
        if(!newVal || newVal == this.dict.personOrgId){
          this.patientRegister.query.customerOrgRegister = null
          this.customerOrgRegisterList = []
          // this.patientRegister.query.times++
        }else{
          getapi(`/api/app/customer-org/parent/${newVal}
          `).then(res => {
            if(res.code != - 1){
              return getapi(`/api/app/customerorgregister/getlistincustomerorgid?CustomerOrgId=${res.data}`)
            }
          }).then(res => {
            if (res.code != -1) {
              this.customerOrgRegisterList = res.data;
              if (res.data.length > 0) {
                this.patientRegister.query.customerOrgRegister = res.data[res.data.length - 1];
                this.changeCustomerOrgRegister(res.data[res.data.length - 1])                
              }
              // this.patientRegister.query.times++
              // console.log('this.patientRegister.query.customerOrgRegister',this.patientRegister.query.customerOrgRegister)
            }
          });
        }
      }
    },
  },

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

.query {
  margin-right: 10px;
}

.listBtn {
  margin-top: 5px;

  text-align: center;
}

.btnClass {
  /* position: absolute; */
  /* left: 0;
  top: 0; */
  width: 100px;
}
.spanClass{
  font-size: 14px;
}

</style>