web_dist/src/views/target-management/target-home/TargetScoreSummary.vue

<template>
  <div class="layout_display_flex_y">
    <div style="background-color: #fff; margin-bottom: 5px">
      <el-select v-model="reportCycle" placeholder="请选择年度周期" style="width: 200px" v-if="showCycle">
        <el-option v-for="item in reportCycleList" :key="item.reportCycle"
                   :label="item.yearRange" :value="item.reportCycle" selected>
          <span style="float: left">{{ item.yearRange }}</span>
          <span style="float: right; padding-left: 4px; color: var(--el-text-color-secondary); font-size: 13px;">
                            {{ item.remark }}</span>
        </el-option>
      </el-select>
      <el-date-picker v-model="dateRange" type="monthrange" range-separator="至" start-placeholder="开始月份" format="YYYYMM" value-format="YYYYMM"
                      end-placeholder="结束月份" :shortcuts="monthShortcuts" style="width: 360px;margin-left: 3px" v-if="showDate">
      </el-date-picker>
      <el-cascader v-model="targetInfo" :options="targetTreeData" style="width: 400px" :show-all-levels="false"
                   :props="{ value: 'id', label: 'label', children: 'children', expandTrigger: 'hover' }"
                   :clearable="true" :filterable="true" placeholder="请选择指标">
      </el-cascader>
      <el-select v-model="ks" placeholder="请选择科室" filterable clearable style="width: 240px">
        <el-option v-for="item in deptWardList" :key="item.code"
                   :label="item.name" :value="item.code" selected>
          <span style="float: left">{{ item.code }}</span>
          <span style="float: right; padding-left: 4px; color: var(--el-text-color-secondary); font-size: 13px;">
                            {{ item.name }}</span>
        </el-option>
      </el-select>
      <el-button type="primary" icon="Search" @click="queryTargetScoreSummaryInfo" style="margin-left: 10px">查询</el-button>
<!--      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>-->
    </div>
    <div class="layout_display_flex_y">
      <el-tabs class="el-tabs__fill" v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
        <el-tab-pane key="yearScore" label="周期年度得分" name="yearScore">
          <div class="layout_display_flex_y layout_el-table">
            <div class="layout_flex_1-y">
              <el-table :data="targetYearScoreSummaryData.slice(pageSize * (currentPage - 1), pageSize * currentPage)"
                        stripe border highlight-current-row row-key="id" style="width: 100%" height="100%"
                        :expand-row-keys="expands" @expand-change="expandCharge">
                <el-table-column type="expand">
                  <template #default="scope">
                    <div m="4" style="margin-left: 5px">
                      <h3>得分结果明细</h3>
                      <el-table :data="scope.row.results" :row-key="scope.row.id" stripe border highlight-current-row>
                        <el-table-column type="index" header-align="center" />
                        <el-table-column prop="year" label="年份" header-align="center" />
                        <el-table-column prop="dataType" label="数据方式" header-align="center">
                          <template #default="scope">
                            {{ '1' === scope.row.dataType ? 'sql统计' : '手动输入' }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="childResult" label="分子结果" header-align="center" />
                        <el-table-column prop="momResult" label="分母结果" header-align="center" />
                        <el-table-column prop="calcResult" label="计算结果" header-align="center" />
                        <el-table-column prop="op" label="统计人员" header-align="center" />
                        <el-table-column prop="opTime" label="统计时间" header-align="center" width="200" />
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="指标id" v-if="false"></el-table-column>
                <el-table-column prop="deptCode" label="科室id" v-if="false"></el-table-column>
                <el-table-column prop="name" label="指标名称" width="360" show-overflow-tooltip></el-table-column>
                <el-table-column prop="dept" label="责任科室"></el-table-column>
                <el-table-column prop="op" label="责任人"></el-table-column>
                <el-table-column prop="remark" label="周期"></el-table-column>
                <el-table-column prop="yearRange" label="年度"></el-table-column>
                <el-table-column prop="criterionScore" label="周期年度总分"></el-table-column>
                <el-table-column prop="reportScore" label="周期年度得分"></el-table-column>
              </el-table>
            </div>
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 12, 15, 18]"
                           :total="targetYearScoreSummaryData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane key="monthScore" label="周期月度得分" name="monthScore">
          <div class="layout_display_flex_y layout_el-table">
            <div class="layout_flex_1-y">
              <el-table :data="targetMonthScoreSummaryData.slice(pageSizeM * (currentPageM - 1), pageSizeM * currentPageM)"
                        stripe border highlight-current-row style="width: 100%" height="100%">
                <el-table-column type="index" label="序号" align="center" fixed></el-table-column>
                <el-table-column prop="id" label="指标id" v-if="false"></el-table-column>
                <el-table-column prop="deptId" label="科室id" v-if="false"></el-table-column>
                <el-table-column prop="name" label="指标名称" width="360" show-overflow-tooltip></el-table-column>
                <el-table-column prop="month" label="月份"></el-table-column>
                <el-table-column prop="dataType" label="数据方式" header-align="center">
                  <template #default="scope">
                    {{ '1' === scope.row.dataType ? 'sql统计' : '手动输入' }}
                  </template>
                </el-table-column>
                <el-table-column prop="deptName" label="责任科室"></el-table-column>
                <el-table-column prop="authorName" label="责任人"></el-table-column>
                <el-table-column prop="childResult" label="分子结果"></el-table-column>
                <el-table-column prop="momResult" label="分母结果"></el-table-column>
                <el-table-column prop="calcResult" label="计算结果"></el-table-column>
                <el-table-column prop="score" label="得分"></el-table-column>
                <el-table-column prop="createTime" label="统计时间" width="140"></el-table-column>
              </el-table>
            </div>
            <div>
              <el-pagination :current-page="currentPageM" :page-size="pageSizeM" :page-sizes="[15, 30, 45, 60]"
                             :total="targetMonthScoreSummaryData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
                             @size-change="handleSizeChangeM" @current-change="handleCurrentChangeM">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <el-dialog v-model="showScoreComparison" :close-on-click-modal="false" :close-on-press-escape="false"
             :title="scoreComparisonTitle" width="80%" destroy-on-close>
    <TargetScoreComparison :targetScoreComparison="targetScoreComparison" @closeYpPrintNameEditFor="closeTargetScoreComparison" />
  </el-dialog>
</template>
<script setup  name="TargetScoreSummary">
import {nextTick, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {selectScoreCycle, selectTargetYearScoreSummary, selectTargetMonthScoreSummary} from '@/api/target-management/target-dict'
import {useUserStore} from "@/pinia/user-store";
import {selectTargetDictTree} from "@/api/target-management/target-dict";
import {queryDept} from "@/api/public-api";
import {clone} from "@/utils/clone";
import {monthShortcuts} from "@/data/shortcuts";
import {getFormatDatetime} from "@/utils/date";
import TargetScoreComparison from "@/views/target-management/target-comm/TargetScoreComparison.vue";

let param = ref({
  reportCycle: '',
  startTime: '',
  endTime: '',
  dept: '',
  id: '',
  pid: '',
  dataInfo: '',
  exportName: ''
})
const userInfo = useUserStore().userInfo
const editableTabsValue = ref('yearScore')
// 查询科室
const ks = ref('')
// 指标信息
const targetInfo = ref([])
// 得分年份
const reportCycleList = ref([])
// 年度周期
const reportCycle = ref('Y1')
// 周期年度得分显示（true 显示； false 隐藏）
const showCycle = ref(true)
// 周期月度得分显示（true 显示； false 隐藏）
const showDate = ref(false)
// 得分对比显示（true 显示； false 隐藏）
const showScoreComparison = ref(false)
//得分比对标题
const scoreComparisonTitle = ref('')
const targetScoreComparison = ref({})
const targetTreeData = ref()
const deptWardList = ref([])
const targetYearScoreSummaryData = ref([])
const pageSize = ref(15)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}
const targetMonthScoreSummaryData = ref([])
const pageSizeM = ref(30)
const currentPageM = ref(1)
const handleSizeChangeM = (val) => {
  pageSizeM.value = val
}
const handleCurrentChangeM = (val) => {
  currentPageM.value = val
}
const startMonth = getFormatDatetime(monthShortcuts[0].value[0], 'YYYYMM')
const dateRange = ref([startMonth,startMonth])
onMounted(() => {
  nextTick(() => {
    deptMethod('')
    queryTargetDictTree()
    queryScoreCycle()
    queryTargetYearScoreSummaryInfo()
  })
})
//查询指标周期年度得分情况
const queryTargetYearScoreSummaryInfo = async () => {
  param.value.dept = ks.value
  param.value.reportCycle = reportCycle.value
  param.value.startTime = ''
  param.value.endTime = ''
  if(targetInfo.value && targetInfo.value.length > 0){
    param.value.id = targetInfo.value[2];
    param.value.pid = targetInfo.value[1];
  } else {
    param.value.id = '';
    param.value.pid = '';
  }
  await selectTargetYearScoreSummary(param.value)
    .then((res) => {
      if(res){
        targetYearScoreSummaryData.value = res
      }
    })
}
//查询指标周期月度得分情况
const queryTargetMonthScoreSummaryInfo = async () => {
  param.value.dept = ks.value
  param.value.reportCycle = ''
  if(dateRange.value){
    param.value.startTime = dateRange.value[0]
    param.value.endTime = dateRange.value[1]
  }
  if(targetInfo.value && targetInfo.value.length > 0){
    param.value.id = targetInfo.value[2];
    param.value.pid = targetInfo.value[1];
  } else {
    param.value.id = '';
    param.value.pid = '';
  }
  await selectTargetMonthScoreSummary(param.value)
    .then((res) => {
      if(res){
        targetMonthScoreSummaryData.value = res
      }
    })
}
//导出指标得分情况
const exportData = () => {
  alert('功能建设中。。。')
}
//查询科室
const deptMethod = (val) => {
  queryDept(val).then((res) => {
    deptWardList.value = res
  })
}
//查询指标树
const queryTargetDictTree = () => {
  param.value.dataInfo = targetInfo.value
  selectTargetDictTree(param.value)
    .then((res) => {
      targetTreeData.value = clone(res[0].children)
    });
}
//查询指标年度周期
const queryScoreCycle = () => {
  selectScoreCycle()
    .then((res) => {
      reportCycleList.value = res
      param.value.startTime = reportCycleList.value[0].startYear
      param.value.endTime = reportCycleList.value[0].endYear
    });
}
// 指定table展开行id
const expands = ref([])
// 指定table展开行方法
const expandCharge = (row, expandedRows) => {
  expands.value = []
  if(expandedRows.length > 0){
    row ? expands.value.push(row.id) : ''
  } else {
    expands.value = []
  }
}
//tab切换
const handleClick = (tab, event) => {
  // 查询哪个tab页面
  editableTabsValue.value = tab.props.name
  if (editableTabsValue.value === 'yearScore') {
    if(showCycle.value === false){
      showCycle.value = true
    }
    if(showDate.value === true){
      showDate.value = false
    }
    queryTargetYearScoreSummaryInfo()
    currentPage.value = 1
  } else if (editableTabsValue.value === 'monthScore') {
    if(showDate.value === false){
      showDate.value = true
    }
    if(showCycle.value === true){
      showCycle.value = false
    }
    queryTargetMonthScoreSummaryInfo()
    currentPageM.value = 1
  }
}
// 按钮查询
const queryTargetScoreSummaryInfo = () => {
  if (editableTabsValue.value === 'yearScore') {
    queryTargetYearScoreSummaryInfo()
    currentPage.value = 1
  } else if (editableTabsValue.value === 'monthScore') {
    queryTargetMonthScoreSummaryInfo()
    currentPageM.value = 1
  }
}
// 指标年度与月度得分比对
const scoreComparison = (row) => {
  showScoreComparison.value = false
  scoreComparisonTitle.value = '指标得分对比【' + row.name + '】'
  console.log(row)
};

const closeTargetScoreComparison = () => {
  showScoreComparison.value = false
}
</script>