peisweb/src/components/patientRegister/PatientRegisterForChoose.vue

<template>
  <div>    
    <div> 
      <el-table :data="patientRegisters" border width="800" height="480" highlight-current-row
        @row-click="registerRowClick"  @row-dblclick="rowDblclick"  size="small">  
        <el-table-column prop="creationTime" label="登记日期" width="100" align="center" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.creationTime">{{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="medicalStartDate" label="体检日期" width="100" align="center" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.medicalStartDate">{{ moment(scope.row.medicalStartDate).format("yyyy-MM-DD") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="patientRegisterNo" label="条码号" min-width="110" align="center"/>
        <el-table-column prop="patientNo" label="档案号" sortable align="center"/>
        <el-table-column prop="medicalTimes" label="次数" width="50" align="center" />       
        <el-table-column prop="patientName" label="姓名" sortable align="center"/>
        <el-table-column prop="sexId" label="性别" width="50" align="center">
          <template slot-scope="scope">
            <div>{{ dddw(dict.sex, "id", scope.row.sexId, "displayName") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="50" align="center"/>
        <el-table-column prop="org" label="单位" min-width="180" show-overflow-tooltip />
        <el-table-column prop="dept" label="部门" min-width="150" show-overflow-tooltip />
        <el-table-column prop="groupPack"  label="分组/套餐" min-width="150" align="center" show-overflow-tooltip />
        <el-table-column prop="nationName" label="民族" align="center" show-overflow-tooltip/>
        <el-table-column prop="idNo" label="身份证" min-width="150" align="center" show-overflow-tooltip/>
        <el-table-column prop="birthDate" label="出生日期" width="90" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.birthDate">
              {{ moment(scope.row.birthDate).format("yyyy-MM-DD") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="mobileTelephone" label="手机" min-width="130" align="center" show-overflow-tooltip/>
        <el-table-column prop="telephone" label="电话" min-width="130" align="center" show-overflow-tooltip/>
        <el-table-column prop="address" label="地址" width="300" show-overflow-tooltip/>
        <el-table-column prop="medicalCardNo" label="体检卡号" align="center" show-overflow-tooltip/>
        <el-table-column prop="jobCardNo" label="工卡号" align="center" show-overflow-tooltip/>
        <el-table-column prop="maritalStatusName" label="婚姻" align="center" />
        <el-table-column prop="medicalTypeId" label="体检类别" show-overflow-tooltip >
          <template slot-scope="scope">
            <div v-if="scope.row.medicalTypeId !== dict.personOrgId">
              {{ dddw(dict.medicalType, "id", scope.row.medicalTypeId, "displayName") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="personnelTypeName" label="人员类别" show-overflow-tooltip/>
        <el-table-column prop="jobPost" label="职务" />
        <el-table-column prop="jobTitle" label="职称" />
        <el-table-column prop="salesman" label="介绍人" />
        <el-table-column prop="isVip" label="是否VIP" align="center" >
          <template slot-scope="scope">
            <div>{{ scope.row.isVip == "Y" ? "是" : "否" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="登记人" align="center" />        
        <el-table-column prop="isUpload" label="上传" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.isUpload == "Y" ? "是" : "否" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="completeFlag" label="体检进度" align="center">
          <template slot-scope="scope">
            <div>{{ dddw(dict.completeFlag, "id", scope.row.completeFlag, "displayName") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="guidePrintTimes" label="打印" width="50" align="center">
          <template slot-scope="scope">
            <i class="el-icon-printer" v-if="scope.row.guidePrintTimes > 0" style="font-size: 24px;color: green;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="isLock" label="锁住" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.isLock == "Y" ? "是" : "否" }}</div>
          </template>
        </el-table-column>        
      </el-table>
      <div style="display: flex;margin-top: 5px;justify-content:space-between;">
        <div></div>
        <div style="display: flex;">
          <el-button @click="dialogWin.PatientRegisterForChoose = false" style="width:90px;">取消</el-button>
          <el-button type="primary" @click="btnOk" style="width:90px;">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import Sortable from "sortablejs";
import FileSaver from 'file-saver';
import html2canvas from 'html2canvas';

import {
  dddw,
  objCopy,
  arrayReduce,
  arrayExistObj,
  deepCopy,
} from "../../utlis/proFunc";

import ElProgressOCX from "../report/ElProgressOCX.vue";

export default {
  components: { 
    ElProgressOCX,
  },
  props:["params"], // params 
  data() {
    return {      
      patientRegisters:[],    //体检人员列表信息
      tableDataCurrentRow: {}, // 当前被选中的行
    };
  },

  created() {

  },

  //挂载完成
  mounted() {
    this.getPatientregisterList()
  },
  computed: {
    ...mapState([
      "window",
      "dataTransOpts",
      "dialogWin",
      "dict",
      "elProgress",
      "patientRegister",
      "customerOrg",
    ]),
  },
  methods: {
    moment,dddw,deepCopy,

    getPatientregisterList(){
      this.patientRegisters = this.params
    },
    

    // 选中记录
    registerRowClick(row){
      this.tableDataCurrentRow = deepCopy(row)
    },

    // 双击 选中记录 并关闭窗口
    rowDblclick(row){
      this.registerRowClick(row)
      this.btnOk()      
    },

    btnOk(){
      if(!this.tableDataCurrentRow.id){
        this.$message.warning({ showClose: true, message: "请选择体检人员！"})
        return
      }      
      this.dataTransOpts.tableS.patient_register = deepCopy(this.tableDataCurrentRow)
      this.dataTransOpts.refresh.patient_register.S++
      setTimeout(() => {
        this.tableDataCurrentRow = {}
      }, 10);   

      this.$emit("chooseBak",this.tableDataCurrentRow)  //将选中的数据返回到父组件

      this.dialogWin.PatientRegisterForChoose = false
    },
  
  },

  //监听事件
  watch: {
    // 刷新体检人员登记列表
    "dataTransOpts.plus.PatientRegisterForChoose":{
      // immediate: true, // 立即执行
      // deep: true, // 深度监听复杂类型内变化
      handler(newVal,oldVal){        
        console.log(`watch: 刷新体检人员列表 newVal: ${newVal} oldVal:${oldVal}`)
        if(newVal != oldVal) this.getPatientregisterList()
      }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_input.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global.css";


.box {
  display: flex;
}

.listBtn {
  margin-top: 5px;
  text-align: center;
}

.btnClass {
  width: 100px;
}

</style>