peisweb/src/components/report/AppointQuery.vue

<template>

  <div>
    <div class="middlebox">
      <div class="contenttitle">
        体检查询 /
        <span class="contenttitleBold">网上预约汇总</span>
      </div>
    </div>
    <div style="display: flex;padding: 10px;background-color: #fff;border-radius: 8px;">
      <div class="query">
        <span class="spanClass">体检单位</span>
        <el-input placeholder="请选择单位" v-model="patientRegister.query.cusOrgOCX" style="width:400px;" 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>
        <el-button type="primary" class="commonbutton" @click="btnQuery" size="small">查询</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData" border ref="info" id="info"
        :height="(window.pageHeight < 600) ? 450 : (window.pageHeight - 150)" highlight-current-row 
        size="small">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="customerOrgName" label="单位名称" min-width="200" />
        <el-table-column prop="registerCount" label="备单数" min-width="80" align="center" />
        <el-table-column prop="appointCount" label="已预约数" min-width="80" align="center" />
        <el-table-column prop="unAppointCount" label="未预约数" min-width="80" align="center" />
        <el-table-column prop="checkCount" label="已检数" min-width="80" align="center" />
      </el-table>
    </div>


    <!-- 弹窗组件 -->
    <div>
      <!--通用选单位、体检次数、分组的控件-->
      <el-dialog title="体检单位选择" :visible.sync="report.dialogCusOrgOCX" :close-on-click-modal="false" width="880px"
        height="600px">
        <CusOrgOCX />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import moment from "moment";
import { deepCopy } from "../../utlis/proFunc"
import CusOrgOCX from "./CusOrgOCX.vue"


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

  created() {

  },

  //挂载完成
  mounted() {

    

  },

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

    btnQuery(){
      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 = this.dict.personOrgId
              rd.customerOrgGroupId = []
            } else {
              rd.customerOrgRegisterId = e.customerOrgRegister.id
              rd.customerOrgGroupId = e.customerOrgGroupIds
            }
          }
          customerOrgs.push(rd)
        })
      }

      postapi('/api/app/AppointPatientRegister/GetAppointStatisticsReport',customerOrgs).then(res => {
        if(res.code > -1){
          this.tableData = 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>