peisweb/src/components/report/NationHealthReport.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-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-select v-model="query.customerOrgIds" placeholder="请选择体检单位" :filter-method="filterMethod"
              default-first-option clearable filterable style="margin-left: 10px" size="small" multiple collapse-tags>
              <el-option v-for="item in customerOrg" :key="item.id" :label="item.displayName" :value="item.id">
                {{ item.displayName }}
              </el-option>
            </el-select>
          </div>
          <div class="query">
            <span class="spanClass">体检类别</span>
            <el-select v-model="query.medicalTypeIds" placeholder="请选择" clearable filterable style="width: 200px"
              size="small" multiple collapse-tags>
              <el-option v-for="item in dict.medicalType" :key="item.id" :label="item.displayName" :value="item.id" />
            </el-select>
          </div>
          <div class="query">
            <span class="spanClass">包含未填体检类别人员</span>
            <el-checkbox v-model="query.isMedicalTypeId" true-label="Y" false-label="N" />
          </div>
        </div>
      </div>
      <div>
        <el-button type="primary" class="commonbutton" @click="btnQuery" size="small">查询</el-button>
      </div>
    </div>
    <div>
      <table style="text-align: center;border-collapse:collapse;" border="1">
        <thead>
          <tr height="30">
            <th width="60">序号</th>
            <th width="120">项目</th>
            <th width="80">数据</th>
          </tr>
        </thead>
        <tbody>
          <tr height="30">
            <td>1</td>
            <td>男(人次)</td>
            <td>{{ nationHealthReportData.maleCount }}</td>
          </tr>
          <tr height="30">
            <td>2</td>
            <td>女(人次)</td>
            <td>{{ nationHealthReportData.femaleCount }}</td>
          </tr>
          <tr height="30">
            <td>3</td>
            <td>总人次</td>
            <td>{{ nationHealthReportData.sumCount }}</td>
          </tr>
          <tr height="30">
            <td>4</td>
            <td>理论金额(万元)</td>
            <td>{{ nationHealthReportData.standardMoney }}</td>
          </tr>
          <tr height="30">
            <td>5</td>
            <td>应收金额(万元)</td>
            <td>{{ nationHealthReportData.chargeMoney }}</td>
          </tr>
        </tbody>
      </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";

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

      customerOrg: [],
      customerOrgAll: [],
      query: {
        dateType: '1',
        startDate: '',
        endDate: '',
        customerOrgIds: [],
        medicalTypeIds: [],
        isMedicalTypeId: 'Y',
      },

      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);
          }
        }]
      },

      nationHealthReportData: {
        maleCount: null,  //体检人数（男）
        femaleCount: null, //体检人数（女）
        sumCount: null, //体检总人数 
        standardMoney: null, // 标准金额(万元)
        chargeMoney: null // 应收金额(万元)
      }
    };
  },

  created() {

  },

  //挂载完成
  mounted() {

    this.dictInit()

  },

  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;
        }
      });
    },

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

    // 查询
    btnQuery() {
      postapi("/api/app/PeisReport/GetHealthStatistics", this.query).then(res => {
        if (res.code > -1) {
          res.data.standardMoney = Math.floor(res.data.standardMoney) / 10000
          res.data.chargeMoney = Math.floor(res.data.chargeMoney) / 10000
          this.nationHealthReportData = res.data
        }
      })
    },


  },
};
</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>