peisweb/src/components/patientRegister/patientRegisterQuery.vue

<template>
  <div style="display: flex;">
    <div style="display: flex;flex-wrap: wrap;width:90%">      
      <div class="block query">
        <span class="demonstration">登记日期：</span>
        <el-date-picker
          v-model="patientRegister.query.dateRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions" size="small" style="width:240px;">
        </el-date-picker>
      </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:135px;"/>
      </div>
      <div class="query">
        <span>性别：</span>
        <el-input placeholder="性别" v-model="patientRegister.query.sex" size="small" clearable style="width:80px;"/>
      </div>
      <div class="query">
        <span>身份证号：</span>
        <el-input placeholder="身份证号" v-model="patientRegister.query.idCardNo" size="small" clearable style="width:200px;"/>
      </div>

    </div>    
    <!-- 按钮区域 -->
    <div style="margin-left: 10px; margin-top: 5px;">
      <div style="margin-top: 5px">
        <el-button type="primary" @click="btnQuery">查询</el-button>
      </div>      
      <div style="margin-top: 5px">
        <el-button type="danger" @click="readIdCard">读身份证</el-button>
      </div>
    </div>    
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";

export default {
  components: {},
  data() {
    return {
      dialogVisible:false,
      
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },   
      
    };
  },

  created() {},

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

  computed: {
    ...mapState(["patientRegister"]),
  },
  methods: {
    


    //查询
    btnQuery() {
      alert("查询")
      console.log('this.patientRegister.query.dateRange',this.patientRegister.query.dateRange)
    },
    
    //读身份证
    readIdCard() {
      alert("读身份证")
    },
  },
};
</script>
<style scoped>
.query{
  margin-left:10px;
}
</style>