web_dist/src/components/medical-insurance/medfee-analyse/Index.vue

<template>
  <div class="component-box-wrapper__fullscreen layout_container" :style="{zIndex}">
    <div style="font-size: 18px !important; margin-bottom: 20px">医保费用明细</div>
    <div style="position: fixed; top: 12px; right: 20px; width: 100%; text-align: right">
      <el-button circle icon="Close" title="关闭" type="danger" @click="close"></el-button>
    </div>
    <div class="layout_main layout_container layout-horizontal">
      <aside style="width: 360px">
        <div style="display: flex; height: 36px; align-items: center; font-weight: 600; padding: 0 12px">
          <div style="width: 20%">费用类别</div>
          <div style="width: 20%">总金额</div>
          <div style="width: 20%">甲类</div>
          <div style="width: 20%">乙类</div>
          <div style="width: 20%">丙类</div>
        </div>
        <div v-for="(val, key) in analyse" :key="key" :style="currentStyle(key)" class="fee-type"
             @click="handleClickChrgtype(key)">
          <div>
            <div style="width: 20%">{{ val[0] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '00')">{{ val[1] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '01')">{{ val[2] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '02')">{{ val[3] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '03')">{{ val[4] }}</div>
          </div>
        </div>
      </aside>
      <div class="layout_main layout_el-table">
        <div>
          <el-descriptions :column="4" border>
            <el-descriptions-item>
              <template #label> 姓名</template>
              {{ psninfo.psnName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 住院号</template>
              {{ psninfo.patNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 住院次数</template>
              {{ psninfo.times }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 账页号</template>
              {{ psninfo.ledgerSn }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-table
            :data="cptFeedtle.slice(pageSize * (currentPage - 1), pageSize * currentPage)"
            stripe
        >
          <el-table-column label="流水号" prop="feedetlSn" width="60"></el-table-column>
          <el-table-column label="费用发生时间" prop="feeOcurTime"></el-table-column>
          <el-table-column label="院内码" prop="medinsListCodg"></el-table-column>
          <el-table-column label="收费名称" prop="medinsListName"></el-table-column>
          <el-table-column label="国家编码" prop="medListCodg"></el-table-column>
          <el-table-column label="国家名称" prop="medListName"></el-table-column>
          <el-table-column label="数量" prop="cnt" width="80"></el-table-column>
          <el-table-column label="单价" prop="pric" width="80"></el-table-column>
          <el-table-column label="金额" prop="detItemFeeSumamt" width="80"></el-table-column>
          <el-table-column label="全自费金额" prop="fulamtOwnpayAmt" sortable width="80"></el-table-column>
          <el-table-column label="超限价金额" prop="overlmtAmt" sortable width="80"></el-table-column>
          <el-table-column label="先行自付金额" prop="preselfpayAmt" sortable width="80"></el-table-column>
          <el-table-column label="符合政策范围金额" prop="inscpScpAmt" sortable width="80"></el-table-column>
          <el-table-column label="收费项目等级" prop="chrgitmLvName" width="80"></el-table-column>
          <el-table-column label="科室" prop="bilgDeptName"></el-table-column>
          <el-table-column label="医生" prop="bilgDrName"></el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="cptFeedtle.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import {queryFeeDetails} from '@/api/medical-insurance/si-query'
import {computed, onMounted, ref} from 'vue'
import {useZIndex} from "element-plus";

const props = defineProps({
  type: {
    type: String,
    default: 'settled',
  },
  mdtrtId: {
    type: String,
    required: true,
  }
})

const emits = defineEmits(['close'])

const psninfo = ref({})
const feedtle = ref([])
const analyse = ref({})
const currentChargeType = ref('zhj')
const currentChargeLv = ref('00')
const pageSize = ref(30)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}
const cptFeedtle = computed(() => {
  return feedtle.value.filter((itm) => {
    if (currentChargeType.value === 'zhj') {
      return currentChargeLv.value === '00' ? true : itm.chrgitmLv === currentChargeLv.value
    }
    return currentChargeLv.value === '00' ? itm.medChrgitmType === currentChargeType.value :
        (itm.medChrgitmType === currentChargeType.value && itm.chrgitmLv === currentChargeLv.value)
  })
})

const currentStyle = (chrgtype) => {
  return {
    background: currentChargeType.value === chrgtype ? '#409EFF' : '',
    color: currentChargeType.value === chrgtype ? 'white' : '',
  }
}

const handleClickChrgtype = (key) => {
  currentChargeType.value = key
  currentChargeLv.value = '00'
  currentPage.value = 1
}

const handleClickChrgLv = (key, level) => {
  currentChargeType.value = key
  currentChargeLv.value = level
}

const fetchFeedtle = () => {
  const param = {
    mdtrtId: props.mdtrtId,
    type: props.type,
  }
  queryFeeDetails(param).then((res) => {
    psninfo.value = res.psninfo
    feedtle.value = res.feedtle
    analyse.value = res.analyse
  })
}

const close = () => {
  emits('close')
}
const zIndex = ref(0)
onMounted(() => {
  zIndex.value = useZIndex().nextZIndex()
  fetchFeedtle()
})
</script>

<style scoped>
* {
  font-size: 12px !important;
}

.fee-type {
  width: 360px;
  display: flex;
  height: 36px;
  align-items: center;
  border-bottom: 1px solid rgb(230, 222, 222);
}

.fee-type :hover {
  cursor: pointer;
  background: #409eff;
  color: white;
}

.fee-type > div {
  width: 100%;
  padding: 0 12px;
  display: flex;
  height: 36px;
  align-items: center;
}

.fee-by-lv:hover {
  text-decoration: underline;
  color: darkred;
}
</style>