peisweb/src/components/patientRegister/patientRegisterQuery.vue

<template>

  <div style="display: flex">

    <div :style="'display: flex; flex-wrap: wrap; height:100px;width:' + (window.pageWidth - (orgEnable=='Y' ? 0:200) - 120 - 80) + 'px;'">
      <div class="query">
        <span>登记日期：</span>
        <el-date-picker v-model="patientRegister.query.startDate" type="date" placeholder="起始日期" size="small" style="width:90px;"/>
        <span>至</span>
        <el-date-picker v-model="patientRegister.query.endDate" type="date" placeholder="截止日期" size="small" style="width:90px;"/>
      </div>
      <div class="query">
        <span>条码号：</span>
        <el-input placeholder="条码号" v-model="patientRegister.query.patientRegisterNo" size="small" clearable
          style="width: 150px" />
      </div>
      <div class="query">
        <span>档案号：</span>
        <el-input placeholder="档案号" v-model="patientRegister.query.patientNo" size="small" clearable
          style="width: 135px" />
      </div>
      <div class="query">
        <span>姓名：</span>
        <el-input placeholder="姓名" v-model="patientRegister.query.patientName" size="small" clearable
          style="width: 100px" />
      </div>
      <div class="query">
        <span>性别：</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>手机号：</span>
        <el-input placeholder="手机号/电话" v-model="patientRegister.query.phone" size="small" clearable
          style="width: 110px" />
      </div>
      <div class="query">
        <span>身份证号：</span>
        <el-input placeholder="身份证号" v-model="patientRegister.query.idCardNo" size="small" clearable
          style="width: 160px" />
      </div>
      <div class="query">
        <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">
        </el-cascader>
        <el-checkbox v-model="patientRegister.query.customerOrgFlag">单位作为查询条件</el-checkbox>
      </div>
      <div class="query">
        <span>状态：</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; width: 110px">
      <div class="listBtn">
        <el-button type="primary" class="btnClass" @click="btnQuery">查询</el-button>
      </div>
      <div 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";

export default {
  components: {},
  props: ["orgEnable"],
  data() {
    return {
      dialogVisible: false,
    };
  },

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

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

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

    //读身份证
    readIdCard() {
      alert("读身份证");
    },
  },
};
</script>
<style scoped>

::v-deep .el-input__inner {
  /*text-align: center;*/
  padding-left: 2px;  /* 控件默认 15 */
  padding-right: 15px; /* 控件默认 25 */
}
::v-deep .el-icon-date:before {
  content: ""; /* 去掉日期控件前面的图标 */
}

::v-deep .el-input__icon{
  width: 15px; /* 输入框下拉箭头或清除图标 默认 25 */
}

.query {
  margin-left: 10px;
}

.listBtn {
  margin-top: 5px;

  text-align: center;
}

.btnClass {
  /* position: absolute; */
  /* left: 0;
  top: 0; */
  width: 110px;
}
</style>