peisweb/src/views/customerReport/personnelPositive.vue

<template>
  <div class="box">
    <div>      
      <div class="middlebox">
        <div class="contenttitle">
          客户报表 /
          <span class="contenttitleBold"
            >人员阳性结果</span
          >
        </div>
      </div>
      <div :style="'display: block;'">
        <div style="background-color: #fff; padding: 15px; border-radius: 8px;display: flex;flex-wrap: wrap;    margin-bottom: 10px;height:35px;margin-top: 7px;">
          <div class="query">
            <span>体检单位：</span>
            <el-input placeholder="请选择体检单位" v-model="patientRegister.query.cusOrgOCX" style="width:240px;" size="small"
              disabled>
              <el-button slot="append" icon="el-icon-search" @click="report.dialogCusOrgOCX = true"
                style="font-size: 20px;"></el-button>
            </el-input>
          </div> 
          <!-- <div class="query">
            <span>检查状态：</span>
            <el-select v-model="completeFlag" placeholder="请选择" clearable style="width: 80px"
              size="small">
              <el-option label="预登记" value="0" />
              <el-option label="正式登记" value="1" />
              <el-option label="部份已检" value="2" />
              <el-option label="已总检" value="3" />
            </el-select>
          </div>
          <div class="query">
            <el-checkbox v-model="classification" true-label="Y" false-label="N"/>
            <span style="margin-left:5px;">审核状态</span>
          </div>   -->
          <!-- <div class="query">
            <span>疾病来源：</span>
            <el-select v-model="patientRegister.query.isCharge" placeholder="请选择" clearable style="width: 80px"
              size="small">
              <el-option label="综述" value="0" />
              <el-option label="建议" value="1" />
              <el-option label="疾病列表" value="2" />
            </el-select>
          </div>
          <div class="query">
            <el-checkbox v-model="classification" true-label="Y" false-label="N"/>
            <span>分类统计</span>
          </div> -->
          <div class="query">
            <el-button @click="btnQuery" size="small" class="commonbutton">查询</el-button>
          </div>
          <div class="query">
            <el-button @click="handleExport" size="small" class="commonbutton">导出excel</el-button>
          </div>
          <div class="query">
            <el-button @click="onPrint" size="small" class="commonbutton">打印</el-button>
          </div>
        </div>  
        <div ref="imageDom" style="background-color: #fff; padding: 15px; border-radius: 8px;">
          <el-table :data="dataList" border width="45%" :height="flag
                  ?window.pageHeight < 600 ? 415 : window.pageHeight - 185-20: ''"
          row-key="id" highlight-current-row ref="dataList" :row-class-name="tableRowClassName" id="table" show-summary
              :summary-method="getSummaries">
          <el-table-column prop="patientNo" label="档案号" width="120"/>      
          <el-table-column prop="patientName" label="姓名" width="120"/>      
          <el-table-column prop="sexName" label="性别" width="50"/>      
          <el-table-column prop="age" label="年龄"  width="80"/>  
          <el-table-column prop="medicalTimes" label="次数" width="50"/>  
          <el-table-column prop="mobileTelephone" label="手机号码" width="120"/>  
          <el-table-column prop="diagnosisNames" label="诊断名称" />  
        </el-table>
        </div>
      </div>
    </div>
    <!--通用选单位、体检次数、分组的控件-->
    <el-dialog title="体检单位选择" :visible.sync="report.dialogCusOrgOCX"
      :close-on-click-modal="false" width="880px" height="600px">
      <CusOrgOCX :initDateType="'creationTime'" :useCustomerOrg="true" />
    </el-dialog>  
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { dddw, objCopy, arrayReduce, arrayExistObj,tcdate } from "@/utlis/proFunc";
import CusOrgOCX from "../../components/report/CusOrgOCX.vue";
import { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";

export default {
  components: {
    CusOrgOCX
  },
  data() {
    return {      
      dataList: [], //列表数据 
      completeFlag:"",
      classification:"Y",
      flag:true
    };
  },

  created() {
    this.dictInit();
  },

  //挂载完成
  mounted() {
    // this.btnQuery();
  },
  
  computed: {
    ...mapState(["window", "dict","patientRegister","report"]),
  },

  methods: {
    moment,dddw,
    //数据初始化
    dictInit() {
      //体检中心
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          if (res.code == 1) {
            this.dict.organization = res.data;
          }
        }
      );

      //体检单位树
      getapi("/api/app/customerorg/getbycodeall").then((res) => {
        if (res.code == 1) {
          this.patientRegister.customerOrgTreeAll = res.data;
          tcdate(this.patientRegister.customerOrgTreeAll);
        }
      });

    //   //体检类别
    //   getapi("/api/app/medical-type/in-filter").then((res) => {
    //     if (res.code == 1) {
    //       this.dict.medicalType = res.data.items;
    //     }
    //   });

    //   //体检类别 树结构
    //   getapi("/api/app/item-type/by-code-all").then((res) => {
    //     if (res.code == 1) {
    //       this.dict.itemTypeTree = res.data;
    //       tcdate(this.dict.itemTypeTree);
    //     }
    //   });

    //   postapi("/api/app/diagnosis/getlistinsuggestion").then((res) => {
    //     if (res.code == 1) {
    //       this.dict.asbItemAll = res.data;
    //     }
    //   });

      console.log("dict", this.dict);
    },

    tableRowClassName({ row, rowIndex }) {
      switch (row.isCharge) {
        case 'N':
          return 'danger';        
        default:
          return '';
      }     
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sums[index] = data.length + " 人";
        }
      });

      return sums;
    },
    //查询
    btnQuery() {
      let body = {}, customerOrgs = [], diagnosisIds = [];
      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)
        })
      }

      // if (this.report.dataAsbitemOCX.length > 0) {
      //   this.report.dataAsbitemOCX.forEach(e => {
      //     diagnosisIds.push(e.id)
      //   })
      // }

      body.customerOrgs = customerOrgs
    //   body.diagnosisIds = diagnosisIds
      // if(this.completeFlag) body.completeFlag = this.completeFlag
      // body.isAudit=this.classification


      // if (this.patientRegister.query.isCharge) body.isCharge = this.patientRegister.query.isCharge

      //console.log('/api/app/peisreport/getregisterasbitemchargestatus',body)

      postapi('/api/customerreport/getpatientregisterpositivereport', body).then(res => {
        if (res.code != -1) {
          this.dataList = res.data;
          this.$nextTick(() => {
          this.$refs.dataList.doLayout();
        });
        }
      })
    },
    onPrint() {
      this.flag = false;
      this.$nextTick(() => {
        let width = this.$refs.imageDom.style.width;
        let cloneDom = this.$refs.imageDom.cloneNode(true);
        let imageDom = this.$refs.imageDom;
        cloneDom.style.position = "absolute";
        cloneDom.style.top = "0px";
        cloneDom.style.zIndex = "-1";
        cloneDom.style.width = width;
        console.log(cloneDom);
        imageDom.appendChild(cloneDom);
        html2canvas(cloneDom).then((canvas) => {
          // 转成图片，生成图片地址
          const url = canvas.toDataURL("image/png");
          printJs({
            printable: url,
            type: "image",
            documentTitle: "", // 标题
            style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
          });
        });
        cloneDom.style.display = "none";
        this.flag = true;
      });
    },
    handleExport() {
      exportToExcel("#table", "人员阳性结果清单", false);
    }
  },

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

  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";
.query{
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #232748;
    font-size: 400;
    font-family: "NotoSansSC-Regular";
}
.box {
  display: flex;
  flex-direction: column;
}
::v-deep .el-input__inner {
  /*text-align: center;*/
  padding-left: 5px;
  padding-right: 15px;
}

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

::v-deep .el-input-group__append {
  padding: 0 5px;
  /* 控件默认 0 20px;*/
}

::v-deep .el-icon-search:before {
  color: #00F;
}
.query:last-child{
  margin-right: 0;
}
</style>