peisweb/src/components/report/deptProgress.vue

<template>
  <div>
    <div class="contenttitle">
      体检查询 /<span class="contenttitleBold">科室进度查询</span>
    </div>

    <!--查询条件-->
    <div style="display: flex;">
      <div class="query">
        <span class="spanClass">科室</span>
        <!-- multiple: true -->
        <el-cascader :options="dict.itemTypeTree" v-model="query.itemTypeIds" popper-class="example"
          style="width:240px;" :props="{
            checkStrictly: true, expandTrigger: 'hover', label: 'displayName', value: 'id',
            id: 'id', children: 'treeChildren',
          }" clearable filterable size="small" collapse-tags>
        </el-cascader>
      </div>

      <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.personnelTypeIds" placeholder="请选择" clearable filterable
          style="width: 170px" size="small" multiple collapse-tags>
          <el-option v-for="item in dict.personnelType" :key="item.id" :label="item.displayName" :value="item.id" />
        </el-select>
      </div>  
      -->
      <div class="query">
        <el-button class="commonbutton" @click="btnQuery">查询</el-button>
      </div>
    </div>

    <div :style="`overflow: auto;margin-top: 10px;width:'${window.pageWidth - 15}px;;height:${divHeight}px;`">
      <table width="800" border="1" cellspacing="0" bordercolor="#909399"
        style="font-size:14px;border-collapse:collapse;">
        <tr style="text-align: center;" height="24">
          <td width="100">科室</td>
          <td width="200">组合项目</td>
          <td width="100">签到人数</td>
          <td width="100">完成人数</td>
          <td width="100">弃检人数</td>
          <td width="100">剩余人数</td>
          <td width="100">完成率</td>
        </tr>
        <template v-for="(sum,index) in tableData">
          <template v-for="(item,index2) in sum.details">
            <tr height="24" v-if="index2 == 0">
              <td align="center" class="tdCellClass" :rowspan="sum.details.length + 1">{{ sum.itemTypeName }}</td>
              <td align="left" class="tdCellClass">{{ item.asbitemName}}</td>
              <td align="center" class="tdCellClass">{{ item.signInCount }}</td>
              <td align="center" class="tdCellClass">{{ item.completeCount }}</td>
              <td align="center" class="tdCellClass">{{ item.giveUpCheckedCount }}</td>
              <td align="center" class="tdCellClass">{{ item.balanceCount }}</td>
              <td align="center" class="tdCellClass">{{ item.completionRate + '%' }}</td>
            </tr>
            <tr height="24" v-else>
              <td align="left" class="tdCellClass">{{ item.asbitemName}}</td>
              <td align="center" class="tdCellClass">{{ item.signInCount }}</td>
              <td align="center" class="tdCellClass">{{ item.completeCount }}</td>
              <td align="center" class="tdCellClass">{{ item.giveUpCheckedCount }}</td>
              <td align="center" class="tdCellClass">{{ item.balanceCount }}</td>
              <td align="center" class="tdCellClass">{{ item.completionRate + '%' }}</td>
            </tr>
          </template>
          <tr height="24">            
            <td align="right" class="tdCellClassRed">小计：</td>
            <td align="center" class="tdCellClassRed">{{ sum.sumSignInCount }}</td>
            <td align="center" class="tdCellClassRed">{{ sum.sumCompleteCount }}</td>
            <td align="center" class="tdCellClassRed">{{ sum.sumGiveUpCheckedCount }}</td>
            <td align="center" class="tdCellClassRed">{{ sum.sumBalanceCount }}</td>
            <td align="center" class="tdCellClassRed">{{ sum.sumCompletionRate + '%' }}</td>
          </tr>
        </template>


      </table>

      <!--
      {
      "itemTypeName": "检前问询",
      "sumSignInCount": 2,
      "sumCompleteCount": 0,
      "sumGiveUpCheckedCount": 0,
      "sumBalanceCount": 2,
      "sumCompletionRate": 0,
      "details": [
      {
      "itemTypeName": "检前问询",
      "asbitemName": "问诊表",
      "signInCount": 1,
      "completeCount": 0,
      "giveUpCheckedCount": 0,
      "balanceCount": 1,
      "completionRate": 0
      },
      {
      "itemTypeName": "检前问询",
      "asbitemName": "心理及精神压力",
      "signInCount": 1,
      "completeCount": 0,
      "giveUpCheckedCount": 0,
      "balanceCount": 1,
      "completionRate": 0
      }
      ]
      }
      -->

    </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";



export default {
  components: {

  },
  data() {
    return {
      query: {
        itemTypeIds: [],
        dateType: '2',
        startDate: '',
        endDate: ''
      },

      tableData: [], //列表数据


    };
  },

  created() {

  },

  //挂载完成
  mounted() {
    let ldate = new Date();
    this.query.startDate = this.moment(ldate).format("YYYY-MM-DD");
    this.query.endDate = ldate;


    this.dictInit()

  },
  computed: {
    ...mapState(["pickerOptions", "window", "dict"]),
    divHeight(){
      return this.window.pageHeight < 600 ? 430 : this.window.pageHeight - 140
    }
  },
  methods: {
    ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
    dddw, moment,
    dictInit() {
      //体检类别
      // getapi("/api/app/medical-type/in-filter").then((res) => {
      //   if (res.code > -1) {
      //     this.dict.medicalType = res.data;
      //   }
      // });

      //人员类别
      getapi("/api/app/personnel-type/in-filter").then((res) => {
        if (res.code > -1) {
          this.dict.personnelType = res.data;
        }
      });

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

    },


    //查询
    btnQuery() {
      let body = {
        dateType: this.query.dateType,
        startDate: this.query.startDate,
        endDate: this.query.startDate
      }

      if (Array.isArray(this.query.itemTypeIds) && this.query.itemTypeIds.length > 0)
        body.itemTypeIds = this.query.itemTypeIds.slice(this.query.itemTypeIds.length - 1, 1)

      postapi('/api/app/PeisReport/GetItemTypeProgressReport', body)
        .then(res => {
          if (res.code >= -1) {
            this.tableData = res.data
          }
        })

    },


  },

  //监听事件
  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_form.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_table.css';
@import '../../assets/css/global.css';

.listBtn {
  margin-top: 10px;
}

.btnClass {
  width: 100px;
}

.query {
  margin-right: 10px;
  font-size: 14px;
  color: #232748;
  font-weight: 400;
  font-family: "NotoSansSC-Regular";
}

.spanClass {
  font-size: 14px;
  padding: 0 2px 0 0;
}

.tdCellClass {
  padding: 0 5px;
}

.tdCellClassRed {
  padding: 0 5px;
  color: red;
}
</style>