peisweb/src/components/report/PatientRegisterListNobtn.vue

<template>
  <div>
    <div @contextmenu.prevent="onContextmenu">
      <u-table :data="patientRegister.prList" border ref="info" id="info"
        :height="(window.pageHeight < 600) ? 230 : (window.pageHeight - 370)" highlight-current-row
        @row-click="rowClick" size="small" row-key="patientRegisterId" @selection-change="handleSelectionChange" @row-contextmenu="rowContextmenu" @table-body-scroll="scrollFull" use-virtual :row-height="35" big-data-checkbox :data-changes-scroll-top="false">
        <u-table-column :type="dragCol[0].type" width="40" align="center" />
        <!--列可拖拽 key值很关键  -->
        <u-table-column v-for="(item, index) in dragCol" v-if="index != 0" :key="`${item.label + index}`"
          :type="dragCol[index].type" :min-width="dragCol[index].minWidth" :align="dragCol[index].align"
          :label="dragCol[index].type ? '' : item.label" :prop="dragCol[index].prop"
          :sortable="dragCol[index].type || dragCol[index].prop == 'sn' ? false : true"
          :show-overflow-tooltip="dragCol[index].showTooltip">

          <template slot-scope="scope">
            <div v-if="dragCol[index].prop == 'sn'"> 
              {{ scope.$index + 1 }}
            </div>
            <div v-else-if="dragCol[index].prop == 'completeFlag'"
              :style="`color: ${setPrStatusColor(scope.row.isAudit, scope.row.completeFlag)}`">
              {{ dddw(dict.completeFlag, "id", scope.row[dragCol[index].prop], "displayName") }}
            </div>
            <div v-else-if="dragCol[index].prop == 'birthDate'">
              {{ scope.row[dragCol[index].prop].substring(0, 10) }}
            </div>
            <div v-else-if="dragCol[index].prop == 'isReportPrint'">
              <i class="el-icon-printer" v-if="scope.row.isReportPrint == 'Y'"
                style="font-size: 24px;color: green;"></i>
            </div>
            <div v-else-if="dragCol[index].prop == 'isLock'">
              <i class="el-icon-lock" v-if="scope.row.isLock == 'Y'" style="font-size: 20px; color: red" />
            </div>
            <div v-else-if="
              dragCol[index].prop == 'isVip' ||
              dragCol[index].prop == 'isUpload' ||
              dragCol[index].prop == 'isUploadAppoint' ||
              dragCol[index].prop == 'isReceiveReport'
            ">
              <el-checkbox :value="scope.row[dragCol[index].prop] == 'Y'" true-label="Y" false-label="N" />
            </div>
            <div v-else>
              {{ scope.row[dragCol[index].prop] }}
            </div>
          </template>

        </u-table-column>

      </u-table>
      <div style="display: flex;justify-content:space-between;">
        <div></div>
        <div>
          <span style="font-size:12px;">共：{{ loadOpts.totalCount }} 条记录，当前显示：{{ patientRegister.prList.length }}
            条。</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import moment from "moment";
import { mapState, mapActions } from "vuex";
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { dddw, deepCopy, objCopy, arrayReduce, arrayExistObj, setPrStatusColor } from "@/utlis/proFunc";

import PatientRegisterEdit from "../../components/patientRegister/PatientRegisterEdit.vue";
import Camera from "../../components/patientRegister/Camera.vue";
import PatientRegisterAsbItem from "../../components/patientRegister/patientRegisterAsbItem.vue";
import { UTable, UTableColumn } from "umy-ui";
export default {
  components: {
    PatientRegisterEdit,
    Camera,
    PatientRegisterAsbItem,
    UTable,
    UTableColumn,
  },
  props: ['fromType'],
  data() {
    return {

      dialogVisible: false,
      dialogCamera: false,
      dialogGuide: false,
      guideMsg: 'guideMsg',
      tabChoosed: "1",
      formInitData: {},      //体检登记初始表单数据
      editTimes: 0,

      rClickRow: null,       //右击的行
      rClickColumn: null,    //右击的列（预留）

      dom: null,   //用于滚动加载数据
      lazyLoading: false,  //是否懒加载中
      loadOpts: {
        totalCount: 0,
        skipCount: 0,
        maxResultCount: 100,
      },
      loadOptsInit: {},
      summary_check_doctor_alias: ["总检", "审核"],

      //拖动列  
      selectionCol: 0,
      dragCol: [
        { label: "勾选", type: "selection", minWidth: 40, align: "center" },
        { label: "序号", prop: "sn", minWidth: 40, align: "center" },
        { label: "打印", prop: "isReportPrint", minWidth: 60, align: "center" },
        { label: "领取", prop: "isReceiveReport", minWidth: 60, align: "center" },
        { label: "体检进度", prop: "completeFlag", minWidth: 90, align: "center" },
        { label: "体检日期", prop: "medicalStartDate", minWidth: 100, align: "center" },
        { label: "单位名称", prop: "org", minWidth: 180, align: "left", showTooltip: true },
        { label: "部门名称", prop: "dept", minWidth: 150, align: "left", showTooltip: true },
        { label: "姓名", prop: "patientName", minWidth: 60, align: "center" },
        { label: "性别", prop: "sexName", minWidth: 60, align: "center" },
        { label: "年龄", prop: "age", minWidth: 60, align: "center" },
        { label: "民族", prop: "nationName", minWidth: 70, align: "center" },
        { label: "身份证号", prop: "idNo", minWidth: 160, align: "center" },
        { label: "条码号", prop: "patientRegisterNo", minWidth: 110, align: "center" },
        { label: "档案号", prop: "patientNo", minWidth: 80, align: "center" },
        { label: "次数", prop: "medicalTimes", minWidth: 60, align: "center" },
        { label: "备注", prop: "remark", minWidth: 150, align: "left" },
        { label: "分组/套餐", prop: "groupPack", minWidth: 150, align: "center" },
        { label: "手机", prop: "mobileTelephone", minWidth: 130, align: "center" },
        { label: "电话", prop: "telephone", minWidth: 130, align: "center" },
        { label: "出生日期", prop: "birthDate", minWidth: 90, align: "center" },
        { label: "婚姻", prop: "maritalStatusName", minWidth: 70, align: "center" },
        { label: "地址", prop: "address", minWidth: 400, align: "left", showTooltip: true },
        { label: "体检卡号", prop: "medicalCardNo", minWidth: 90, align: "center" },
        { label: "工卡号", prop: "jobCardNo", minWidth: 90, align: "center" },
        { label: "体检类别", prop: "medicalTypeName", minWidth: 100, align: "center" },
        { label: "人员类别", prop: "personnelTypeName", minWidth: 100, align: "center" },
        { label: "职务", prop: "jobPost", minWidth: 70, align: "center" },
        { label: "职称", prop: "jobTitle", minWidth: 70, align: "center" },
        { label: "介绍人", prop: "salesman", minWidth: 80, align: "center" },
        { label: "VIP", prop: "isVip", minWidth: 80, align: "center" },
        { label: "总检医生", prop: "summaryDoctorName", minWidth: 90, align: "center" },
        { label: "总检日期", prop: "summaryDate", minWidth: 160, align: "center" },
        { label: "审核医生", prop: "auditDoctorName", minWidth: 90, align: "center" },
        { label: "审核日期", prop: "auditDate", minWidth: 160, align: "center" },
        { label: "登记人", prop: "registerName", minWidth: 80, align: "center" },
        { label: "登记时间", prop: "registerDate", minWidth: 160, align: "center" },
        { label: "打印人", prop: "reportPrintName", minWidth: 70, align: "center" },
        { label: "领取人", prop: "reportReceiveName", minWidth: 70, align: "center" },
        { label: "领取时间", prop: "reportReceiveDate", minWidth: 140, align: "center" },
        { label: "锁住", prop: "isLock", minWidth: 60, align: "center" },
        { label: "预约备单", prop: "isUploadAppoint", minWidth: 90, align: "center" },
        { label: "上传", prop: "isUpload", minWidth: 60, align: "center" },
        // { label: "标准金额", prop: "standardAmount", minWidth: 80, align: "center" },
        // { label: "应收金额", prop: "receivableAmount", minWidth: 80, align: "center" },        
        // { label: "实收金额", prop: "chargeAmount", minWidth: 80, align: "center" },
        // { label: "支付方式", prop: "chargePayMode", minWidth: 80, align: "center" },
      ],

    };
  },


  created() {
    this.loadOptsInit = Object.assign({}, this.loadOpts)
    this.patientRegister.prList = []

    try {
      let LocalConfig = JSON.parse(
        window.localStorage.getItem("LocalConfig") || null
      );
      if (LocalConfig?.normal?.maxResultCount) {
        this.loadOpts.maxResultCount =
          LocalConfig.normal.maxResultCount;
      }
    } catch (error) {
      console.log('window.localStorage.getItem("LocalConfig")', error);
    }


    // 系统参数，获取 总检别名
    postapi('/api/app/SysParmValue/GetSysParmValueBySysParmId', { sysParmId: "summary_check_doctor_alias" })
      .then(res => {
        if (res.code > -1) {
          this.summary_check_doctor_alias = JSON.parse(res.data)
        }
      })

  },

  //挂载完成
  mounted() {
    this.$nextTick(() => {
      // this.scrollFull()

      // 监听列拖拽
      this.initColDrag()
    })

  },
  computed: {
    ...mapState(["window", "dict", 'dataTransOpts', "patientRegister", "customerOrg", "report"]),
  },
  methods: {
    dddw, setPrStatusColor,

    handleSelectionChange(val) {
      this.dataTransOpts.tableM.patient_register = val
    },

    //获取单位分组 /api/app/customer-org-group/in-customer-org-id/3a0c0444-d7a0-871f-4074-19faf1655caf
    // getCustomerOrgGroup(customerOrgld) {
    //   getapi(`/api/app/customer-org-group/in-customer-org-id/${customerOrgld}`)
    //     .then((res) => {
    //       console.log("getCustomerOrgGroup", res.data);
    //       if (res.code == 1) {
    //         this.patientRegister.customerOrgGroup = res.data;
    //       }
    //     });
    // },

    //点击体检次数行
    rowClick(row) {
      this.dataTransOpts.tableS.patient_register = deepCopy(row)
      this.dataTransOpts.tableS.patient_register.id = row.patientRegisterId
      // 刷新个人资料
      this.dataTransOpts.refresh.patient_register.S++
      // 刷新总检状态
      this.dataTransOpts.refresh.sumDoctor.M++
      // 刷新检查项目
      this.dataTransOpts.refresh.register_check.M++

    },

    async load() {
      this.loadOpts.skipCount++
      await this.queryEvent()
    },

    // 取消领取
    canselGetReport() {
      let body = {
        patientRegisterIds: [],
        isReceiveReport: 'N'
      }

      let rd = []
      if (this.dataTransOpts.tableM.patient_register && this.dataTransOpts.tableM.patient_register.length > 0) {
        rd = rd.concat(this.dataTransOpts.tableM.patient_register)
      }
      if (rd.length == 0) {
        if (this.dataTransOpts.tableS.patient_register.patientRegisterId) rd.push({ patientRegisterId: this.dataTransOpts.tableS.patient_register.patientRegisterId })
      }
      if (rd.length == 0) {
        this.$message.warning({ showClose: true, message: "请先勾选或选择记录（有勾选人员时，仅操作勾选的记录）！" })
        return
      }

      rd.forEach(e => {
        body.patientRegisterIds.push(e.patientRegisterId)
      });


      postapi('/api/app/PatientRegister/BatchUpdatePatientRegisterReportReceive', body)
        .then(res => {
          if (res.code > -1) {
            this.$message.success({ showClose: true, message: '操作成功！' })
            let reportReceiveDate = moment(new Date()).format('yyyy-MM-DD HH:mm:ss')
            let lfind = -1
            body.patientRegisterIds.forEach(patientRegisterId => {
              lfind = arrayExistObj(this.patientRegister.prList, 'patientRegisterId', patientRegisterId)
              if (lfind > -1) {
                this.patientRegister.prList[lfind].isReceiveReport = body.isReceiveReport
                this.patientRegister.prList[lfind].reportReceiveDate = reportReceiveDate
              }
            });
          }
        })
    },


    // 右击    
    rowContextmenu(row, column) {
      this.dataTransOpts.tableS.patient_register = deepCopy(row)
    },

    onContextmenu(event) {
      // items.push({
      //   label: "一级菜单",
      //   children: [
      //     { label: "修改姓名", onClick: () => { this.fnUpBaseInfo(row, 'patientName'); } }
      //   ]
      // })      
      let items = []

      //取消领取报告
      items.push({
        label: '取消领取报告',
        onClick: () => {
          this.canselGetReport();
        }
      })

      // 右击菜单显示
      this.$contextmenu({
        items,
        event,
        x: event.clientX,
        y: event.clientY,
        customClass: "custom-class",
        zIndex: 3,
        minWidth: 80,
      });


      return false;
    },


    //滚动加载数据 
    async scrollFull(scroll, event) {
      if (!scroll.judgeFlse) return;

      // 正在加载时阻止重复触发
      if (this.lazyLoading) return;
      if (
        (Number(this.loadOpts.skipCount) + 1) *
        Number(this.loadOpts.maxResultCount) >=
        Number(this.loadOpts.totalCount)
      ) {
        return;
      }

      this.lazyLoading = true;
      try {
        await this.load();
      } catch (e) {
        console.error('scrollFull load error', e);
      }
      // this.dom = this.$refs['info'].bodyWrapper
      // console.log('this.dom', this.dom)

      // this.dom.addEventListener('scroll', async () => {
      //   // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
      //   if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
      //     // 获取到的不是全部数据 当滚动到底部 
      //     console.log('scrollTop', this.dom.scrollTop, 'clientHeight', this.dom.clientHeight, 'scrollHeight', this.dom.scrollHeight);
      //     if (Number(this.loadOpts.skipCount) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
      //       this.lazyLoading = false
      //     } else {
      //       this.lazyLoading = true
      //       await this.load()
      //       this.lazyLoading = false
      //       // this.dom.scrollTop = this.dom.scrollTop - 100
      //     }
      //   }
      // })
    },

    //监听拖拽
    initColDrag() {
      // 1. 获取表格的表头元素
      const table = document.querySelector('.el-table__header-wrapper tr');

      // 2. 创建 Sortable 实例
      Sortable.create(table, {
        animation: 150, // 拖拽动画时长

        // 开始拖拽的时候
        onStart: (event) => {
          if (event.oldIndex == 0) {
            this.$alert('第1列不可以拖动', '提示')
          }
          //evt.oldIndex;  // element index within parent
        },
        // 3. 监听拖拽结束事件
        onEnd: (event) => {
          const { oldIndex, newIndex } = event;

          // 4. 更新列定义数组的顺序
          let movedColumn = this.dragCol.splice(oldIndex, 1)[0];
          this.dragCol.splice(newIndex, 0, movedColumn);
          //this.selectionCol = arrayExistObj(this.dragCol,'type','selection')

          // 5. 强制表格重新渲染以更新视图
          //this.tableBrush += 1;                
        }
      });
    },

    lmoment(date, forMat) {
      return moment(new Date(date)).format(forMat);
    },

    //查询
    async btnQuery() {
      this.loadOpts.skipCount = 0
      this.queryEvent()
    },

    async queryEvent() {
      if (this.fromType == 'report') {
        this.reportQuery()
        return
      }

      this.patientRegister.prList = [];
      let body = {}

      // console.log(`this.patientRegister.query`, this.patientRegister.query)

      body = deepCopy(this.patientRegister.query)
      if (this.patientRegister.query.customerOrgFlag) {
        if (this.patientRegister.query.CustomerOrgParentId) {
          body.customerOrgId = this.patientRegister.query.CustomerOrgParentId
        } else {
          if (this.patientRegister.query.customerOrgId) body.customerOrgId = this.patientRegister.query.customerOrgId
        }
      }

      if (this.patientRegister.query.sex) body.sexId = this.patientRegister.query.sex

      //StartDate EndDate
      if (this.patientRegister.query.dateRange) {
        body.startDate = moment(new Date(this.patientRegister.query.dateRange[0])).format("yyyy-MM-DD")
        body.endDate = moment(new Date(this.patientRegister.query.dateRange[1])).format("yyyy-MM-DD")
      }

      console.log('body', body)

      if (this.patientRegister.query.idCardNo) body = { idNo: this.patientRegister.query.idCardNo }

      if (this.patientRegister.query.patientNo) body = { patientNo: this.patientRegister.query.patientNo }

      if (this.patientRegister.query.patientRegisterNo) body = { patientRegisterNo: this.patientRegister.query.patientRegisterNo }


      console.log('/api/app/patientregister/getlistinfilter', body)
      // 带收费信息 /api/app/PeisReport/GetPatientRegisterReportWithCharge
      // 不带收费信息 /api/app/patientregister/getlistinfilter
      postapi('/api/app/PeisReport/GetPatientRegisterReportWithCharge', body)
        .then((res) => {
          if (res.code != -1) {
            this.patientRegister.prList = this.prListTrans(res.data.items);            
          }
        })
    },

    // 显示数据转换
    prListTrans(items) {
      let arr = []
      if (Array.isArray(items) && items.length > 0) {
        arr = items
        arr.forEach(e => {
          e.groupPack = e.medicalPackageName || e.customerOrgGroupName
          e.org = e.customerOrgName || e.departmentName
          e.dept = e.customerOrgName == e.departmentName ? '' : e.departmentName
        });
      }
      return arr
    },

    // 报告查询
    reportQuery() {
      console.log('reportQuery this.loadOpts', this.loadOpts)
      if (this.loadOpts.skipCount != 0 && this.loadOpts.skipCount * this.loadOpts.maxResultCount >= this.loadOpts.totalCount) return

      let body = {
        skipCount: this.loadOpts.skipCount,
        maxResultCount: this.loadOpts.maxResultCount
      };

      let customerOrgs = [];

      if (this.report.dataCusOrgOCX.length > 0) {

        this.report.dataCusOrgOCX.forEach(e => {
          let dateType = '1'
          switch (e.dateType) {
            case 'medicalStartDate':
              dateType = '2'
              break;
            case 'checkDate':
              dateType = '4'
              break;
            case 'summaryDate':
              dateType = '3'
              break;
            case 'sumCheckDate':
              dateType = '5'
              break;
            default:
              break;
          }
          let rd = {
            startDate: moment(e.startDate).format('yyyy-MM-DD'),
            endDate: moment(e.endDate).format('yyyy-MM-DD'),
            dateType
          }

          if (e.customerOrgId) {
            rd.customerOrgId = e.customerOrgId
            if (e.customerOrgId == this.dict.personOrgId) {
              rd.customerOrgRegisterId = null
              rd.customerOrgGroupId = []
            } else {
              rd.customerOrgRegisterId = e.customerOrgRegister.id
              rd.customerOrgGroupId = e.customerOrgGroupIds
            }
          }
          customerOrgs.push(rd)
        })
      }

      body.customerOrgs = customerOrgs
      if (this.patientRegister.query.patientRegisterNo) body.patientRegisterNo = this.patientRegister.query.patientRegisterNo
      if (this.patientRegister.query.patientNo) body.patientNo = this.patientRegister.query.patientNo
      if (this.patientRegister.query.patientName) body.patientName = this.patientRegister.query.patientName
      if (this.patientRegister.query.idCardNo) body.idNo = this.patientRegister.query.idCardNo
      if (this.patientRegister.query.phone) body.phone = this.patientRegister.query.phone
      if (this.patientRegister.query.completeFlag) body.completeFlag = this.patientRegister.query.completeFlag
      if (this.patientRegister.query.isAudit) body.isAudit = this.patientRegister.query.isAudit
      if (this.patientRegister.query.isReportPrint) body.isReportPrint = this.patientRegister.query.isReportPrint
      if (this.patientRegister.query.isUpload) body.isUpload = this.patientRegister.query.isUpload
      if (this.patientRegister.query.medicalTypeIds && this.patientRegister.query.medicalTypeIds.length > 0) body.medicalTypeIds = this.patientRegister.query.medicalTypeIds
      if (this.patientRegister.query.personnelTypeId) body.personnelTypeId = this.patientRegister.query.personnelTypeId
      if (this.patientRegister.query.medicalConclusionId && this.patientRegister.query.medicalConclusionId.length > 0) body.medicalConclusionIds = this.patientRegister.query.medicalConclusionId

      //console.log('/api/app/peisreport/getpatientregisterreport',body)
      // 带收费信息 /api/app/PeisReport/GetPatientRegisterReportWithCharge
      // 不带收费信息 /api/app/patientregister/getlistinfilter
      postapi('/api/app/peisreport/getpatientregisterreport', body).then(res => {
        if (res.code > -1) {
          this.lazyLoading = false
          // 连续扫码
          // console.log('this.patientRegister.query',this.patientRegister.query)
          if (this.patientRegister.query.isSeries == 'Y' && this.patientRegister.query.patientRegisterNo ) {
            
            if (res.data.items.length > 0 && arrayExistObj(this.patientRegister.prList, 'patientRegisterId', res.data.items[0].patientRegisterId) == -1) {
              this.patientRegister.prList = this.patientRegister.prList.concat(this.prListTrans(res.data.items))
            }

            if (this.patientRegister.prList.length > 0 && res.data.items.length > 0) {
              let lfind = arrayExistObj(this.patientRegister.prList, 'patientRegisterId', res.data.items[0].patientRegisterId)
              if (lfind > -1) {
                // this.$refs['info'].setCurrentRow();
                this.$refs['info'].setCurrentRow(this.patientRegister.prList[lfind]);
                this.rowClick(this.patientRegister.prList[lfind])
              }
            }

            // 连续扫码，自动选中新扫的码 (换成虚拟表后，无法自动勾选了)
            // this.$nextTick(function () {
            //   this.patientRegister.prList.forEach(row => {               
            //     this.$refs['info'].toggleRowSelection(row)
            //   })
            // });

          } else {
            // 刷新最大记录数
            this.loadOpts.totalCount = res.data.totalCount

            if (body.skipCount == 0) {  //查询
              this.patientRegister.prList = [];
            }
            this.patientRegister.prList = this.patientRegister.prList.concat(this.prListTrans(res.data.items))

            if (body.skipCount == 0 && this.patientRegister.prList.length > 0) {
              this.rowClick(this.patientRegister.prList[0])
              this.$refs['info'].setCurrentRow();
              this.$refs['info'].setCurrentRow(this.patientRegister.prList[0]);
            } else {
              this.$refs['info'].setCurrentRow();

              this.dataTransOpts.tableS.patient_register = { id: '' }
              // 刷新个人资料
              this.dataTransOpts.refresh.patient_register.S++
              // 刷新总检状态
              this.dataTransOpts.refresh.sumDoctor.M++
              // 刷新检查项目
              this.dataTransOpts.refresh.register_check.M++
            }
          }
        }
      })
    },


  },

  //监听事件
  watch: {
    //触发查询事件
    "patientRegister.query.times": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log('查询触发', newVal, oldVal)
        if (newVal != oldVal) {
          this.btnQuery();
        }
      }
    },

    //新增后，触发赋值
    "patientRegister.patientRegisterRd.id"(newVal, oldVal) {
      if (newVal != oldVal) {
        //console.log('patientRegister.patientRegisterRd.customerOrgId',this.patientRegister.patientRegisterRd.customerOrgId)
        objCopy(this.patientRegister.patientRegisterRd, this.form);
      }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_table.css";
.box {
  display: flex;
}

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

.btnClass {
  width: 110px;
}

::v-deep .el-input__inner {
  text-align: center;
  padding-left: 1px;
  padding-right: 1px;
}

::v-deep .el-table th.el-table__cell {
  text-align: center;
  padding-left: 1px;
  padding-right: 1px;
}

::v-deep .el-table td.el-table__cell {
  padding-left: 1px;
  padding-right: 1px;
}

::v-deep .el-table .cell {
  padding-left: 1px;
  padding-right: 1px;
}

::v-deep input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
</style>