peisweb/src/views/customerReport/unitStatistics.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-cascader v-model="customerOrgIds" @change="onchange" placeholder="请选择单位" :options="customerOrgTreeAll"
              :props="{
                value: 'id',
                label: 'displayName',
                children: 'treeChildren',
                expandTrigger: 'hover',
                multiple: true,
                emitPath: false,
                checkStrictly: true
              }" filterable size="small" collapse-tags></el-cascader>
          </div>
          <div class="query">
            <span>开始日期：</span>
            <el-date-picker type="date" placeholder="选择开始日期" size="small" v-model="startDate" value-format="yyyy-MM-dd"
              editable style="width: 177px;">
            </el-date-picker>
          </div>
          <div class="query">
            <span>结束日期：</span>
            <el-date-picker type="date" placeholder="选择结束日期" size="small" v-model="endDate" value-format="yyyy-MM-dd"
              editable style="width: 177px;">
            </el-date-picker>
          </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="customerOrgName" label="单位" />
            <el-table-column prop="medicalStartDate" label="体检开始日期" />
            <el-table-column prop="registerCount" label="登记人数" />
            <el-table-column prop="checkCount" label="实检人数" />
            <el-table-column prop="registerStandardAmount" label="登记总金额" />
            <el-table-column prop="registerChargeAmount" label="登记折后总金额" />
            <el-table-column prop="checkStandardAmount" label="实检总金额" />
            <el-table-column prop="checkChargeAmount" label="实检折后总金额" />
            <el-table-column prop="checkItemStandardAmount" label="实检项目金额" />
            <el-table-column prop="checkItemChargeAmount" label="实检项目折后总金额" />
          </el-table>
        </div>
      </div>
    </div>
  </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 { exportToExcel } from "../../utlis/Export2Excel";
import html2canvas from "html2canvas";
import printJs from "print-js";
import { setDBCom, getDBCom } from "../../utlis/indexedDB";

export default {
  data() {
    return {
      dataList: [], //列表数据
      startDate: "",
      endDate: "",
      customerOrgIds: [],
      flag: true,
      customerOrgTreeAll: [],
    };
  },

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

  //挂载完成
  mounted() {
    this.getNowTime();
  },

  computed: {
    ...mapState(["window", "dict", "report"]),
  },

  methods: {
    moment,
    dddw,

    //获取体检单位列表树信息
    getCustomerOrgTree() {
      getDBCom('orgDatasQuery')
        .then(localData => {
          let now = Date.now()
          // 24小时 = 86400000 毫秒
          if (localData?.createdat && now - 43200000 < localData.createdat) {            
            this.customerOrgTreeAll = localData.data;
            tcdate(this.customerOrgTreeAll);
          } else {
            //体检单位树
            getapi("/api/app/customerorg/getbycodeall").then((res) => {
              if (res.code == 1) {
                this.customerOrgTreeAll = res.data;
                tcdate(this.customerOrgTreeAll);          
                //this.customerOrgTreeAll = reMadeOrgTree(deepCopy(res.data));
                setDBCom('orgDatasQuery', res.data)
              }
            });
          }
        })
    },

    //数据初始化
    dictInit() {
      //体检单位树
      this.getCustomerOrgTree()

    },
    onchange(v) {
      console.log(v)
    },
    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;
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); // 得到年份
      var month = now.getMonth(); // 得到月份
      var date = now.getDate(); // 得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.startDate = defaultDate;
      this.endDate = defaultDate;
    },
    //查询
    btnQuery() {
      let that = this;
      if (this.startDate == "") {
        return this.$message({
          message: "请先选择开始日期",
          type: "error",
        });
      }
      if (this.endDate == "") {
        return this.$message({
          message: "请先选择结束日期",
          type: "error",
        });
      }
      postapi(
        "/api/app/CustomerReport/GetSummaryOfUnitCostsReport", {
        customerOrgIds: that.customerOrgIds,
        startDate: that.startDate,
        endDate: that.endDate
      }).then((res) => {
        if (res.code != -1) {
          that.dataList = res.data;
          that.$nextTick(() => {
            that.$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;
}

::v-deep .el-cascader__search-input {
  margin: 0 0 0 5px;
}
</style>