peisweb/src/components/report/TurnoverReportS.vue

<template>
  <div>
    <div class="middlebox">
      <div class="contenttitle">
        体检查询 /
        <span class="contenttitleBold">营业额统计（业务员）</span>
      </div>
    </div>
    <div style="
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
      ">
      <div style="display: block">
        <div style="
            display: flex;
            flex-wrap: wrap;
            height: 32px;
            align-items: center;
          ">
          <div class="query">
            <el-select v-model="query.dateType" placeholder="请选择" style="width: 80px" size="small">
              <el-option label="登记日期" :value="'1'" />
              <el-option label="体检日期" :value="'2'" />
              <el-option label="总检日期" :value="'3'" />
              <el-option label="收费日期" :value="'6'" />
            </el-select>
            <!-- dateType  1 登记，2 体检，3 总检日期-->
            <el-date-picker v-model="query.startDate" type="date" placeholder="起始日期" size="small" style="width: 90px"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
            <span class="spanClass">至</span>
            <el-date-picker v-model="query.endDate" type="date" placeholder="截止日期" size="small" style="width: 90px"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions" />
          </div>
          <div class="query">
            <span class="spanClass">业务员</span>
            <el-input v-model="salesmans" placeholder="请输入业务员姓名" size="small" style="width: 150px; margin-left: 10px" />
          </div>
          <div class="query">
            <span class="spanClass">是否包含预登记</span>
            <el-checkbox v-model="query.isPreRegistration" true-label="Y" false-label="N" />
          </div>
        </div>
      </div>
      <div>
        <el-button type="primary" class="commonbutton" @click="btnQuery" size="small">查询</el-button>
        <el-button class="commonbutton" @click="btnExport('tableData')" size="small">导出</el-button>
      </div>
    </div>
    <div id="tableData">
      <el-table :data="tableData" border :height="window.pageHeight - 160" highlight-current-row size="small"
        row-key="id" :summary-method="getSummaries" show-summary ref="refTable">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="salesman" label="业务员" min-width="80" align="center" />
        <el-table-column prop="registerCount" label="登记人数" min-width="80" align="center" />
        <el-table-column prop="startMedical" label="检查人数" min-width="80" align="center" />
        <el-table-column prop="checkCount" label="总检人数" min-width="80" align="center" />
        <el-table-column prop="avgStandardPrice" label="标准平均单价" min-width="100" align="center" />
        <el-table-column prop="avgChargePrice" label="应收平均单价" min-width="100" align="center" />
        <el-table-column prop="sumStandardPrice" label="标准金额" min-width="100" align="center" />
        <el-table-column prop="sumChargePrice" label="应收金额" min-width="100" align="center" />
        <el-table-column prop="sumReceivedPrice" label="实收金额" min-width="100" align="center" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { deepCopy } from "../../utlis/proFunc";
import CusOrgOCX from "./CusOrgOCX.vue";
import moment from "moment";
import FileSaver from "file-saver";

export default {
  components: {
    CusOrgOCX,
  },
  props: ["orgEnable"],
  data() {
    return {
      dialogVisible: false,
      local: {
        completeFlag: [],
      },

      customerOrg: [],
      customerOrgAll: [],
      medicalType: [],
      query: {
        dateType: "1",
        startDate: "",
        endDate: "",
        //customerOrgIds: [],
        salesmans: [],
        // isMedicalTypeId: 'Y',
        isPreRegistration: "N",
      },
      salesmans: "",
      tableData: [],

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },

  created() { },

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

  updated() {
    this.$nextTick(() => {
      this.$refs["refTable"].doLayout();
    });
  },

  computed: {
    ...mapState(["window", "dict", "patientRegister", "report"]),
  },
  methods: {
    //获取初始数据
    dictInit() {
      let today = moment(new Date()).format("YYYY-MM-DD");
      this.query.startDate = today;
      this.query.endDate = today;

      //获取单位列表
      // getapi("/api/app/customer-org/parent-all").then((res) => {
      //   if (res.code != -1) {
      //     this.customerOrgAll = res.data;
      //     this.customerOrg = deepCopy(this.customerOrgAll);
      //   }
      // });

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

    //通用导出
    btnExport(elId) {
      let table = document.getElementById(elId);
      let tableData = table.innerHTML;
      let fileName = moment(new Date()).format("yyyyMMDDHHmmss") + ".xls";
      let blob = new Blob([tableData], { type: "text/plain;charset=utf-8" });
      FileSaver.saveAs(blob, fileName);
    },

    // 单位过滤
    filterMethod(keyWords) {
      if (keyWords) {
        this.medicalType = [];
        this.dict.medicalType.forEach((item) => {
          if (
            item.displayName.toLowerCase().indexOf(keyWords.toLowerCase()) > -1
          ) {
            this.medicalType.push(item);
          }
        });
      } else {
        this.medicalType = deepCopy(this.dict.medicalType);
      }
    },

    // 查询
    btnQuery() {
      this.query.salesmans = [];
      if (this.salesmans.replace(/\s+/g, '') != '') {
        this.query.salesmans.push(this.salesmans.replace(/\s+/g, ''));
      }
      postapi(
        "/api/app/CustomerReport/GetSalesPersonPhysicalExaminationStatistics",
        this.query
      ).then((res) => {
        if (res.code > -1) {
          this.tableData = res.data;
          if (Array.isArray(this.tableData) && this.tableData.length > 0) {
            this.tableData.forEach((e) => {
              e.startMedical = Number(e.partCheckCount) + Number(e.checkCount);
            });
          }
        }
      });
    },

    //合计
    getSummaries(param) {
      console.log("getSummaries param", param);
      // if(!param){
      //   param = {
      //     columns:[{}, {}, {}, {}, {}, {}, {property: 'asbitemMoney'},{property: 'customerOrgGroupDetailMoney'}],
      //     data:this.customerOrgGroupAsbitems
      //   }
      // }

      const { columns, data } = param;
      const sumCol = [2, 3, 4, 7, 8, 9]; //需合计的列
      const sums = [];
      columns.forEach((column, index) => {
        //console.log('column, index,data',column, index,data)
        //显示合计列
        if (index === 1) {
          sums[index] = "合计";
          return;
        }

        //不合计的列
        if (sumCol.indexOf(index) == -1) {
          sums[index] = "";
          return;
        }

        sums[index] = 0;
        data.forEach((e) => {
          if (!isNaN(e[column.property]))
            sums[index] += Number(e[column.property]); // * e['amount']
        });
        sums[index] = sums[index].toFixed(2); //+ ' 元';
      });
      // this.groupPrice = sums[7];
      // console.log('getSummaries',sums)
      // if (!this.totalFoucs) this.total = sums[5];
      // if (!this.discountFoucs) this.discount = Number(this.total * 100 / this.totalStand).toFixed(2);
      return sums;
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global.css";
@import "../../assets/css/global_font.css";

::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 {
  margin-left: 10px;
  font-size: 14px;
  color: #232748;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
}

.spanClass {
  padding: 0 2px 0 0;
}
</style>