web_dist/src/views/medical-insurance/inpatient/HospitalApproveApply.vue

<template>

  <div class="layout_display_flex_y">
    <div>
      <el-input v-model="inputContent" style="width: 230px" prefix-icon="Search" clearable
                placeholder="输入院内码/名称进行检索"></el-input>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Switch" @click="switchSource">切换数据</el-button>
    </div>
    <el-divider class="el-divider_shorter"></el-divider>
    <div class="layout_flex_1-y">
      <el-table :data="filterFeeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                height="100%"
                highlight-current-row>
        <el-table-column prop="detailSn" label="流水号" width="80"></el-table-column>
        <el-table-column prop="chargeCodeMx" label="院内码" width="100"></el-table-column>
        <el-table-column prop="chargeAmount" label="数量" sortable width="80"></el-table-column>
        <el-table-column prop="chargeFee" label="金额" width="80"></el-table-column>
        <el-table-column prop="chargeDate" label="收费日期"></el-table-column>
        <el-table-column prop="chargeName" label="项目名称"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <span v-html="makeApplyStatusText(scope.row.applyStatus)"></span>
          </template>
        </el-table-column>
        <el-table-column v-if="!fromOriginCharge" prop="handlerName" label="处理人"></el-table-column>
        <el-table-column v-if="!fromOriginCharge" prop="handleRemark" label="备注"></el-table-column>
        <el-table-column v-if="fromOriginCharge">
          <template #default="scope">
            <el-button type="success" icon="Money" @click="applyChargeItem(scope.row)">申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
          small
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="filterFeeList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nullPatient} from '@/utils/validate'
import {baseinfo} from '@/data/inpatient'
import {getPatientFeeList, getAppliedItems, applyHospitalApproval} from '@/api/medical-insurance/hospital-approval.js'
import {computed, nextTick, onActivated, onDeactivated, onMounted, Ref, ref, watch} from "vue";
import {ElMessage} from "element-plus";

interface FeeItem {
  patNo: string
  times: number
  ledgerSn: number
  detailSn: number
  chargeCodeMx: string
  chargeName: string
  chargeAmount: number
  chargeFee: number
  chargeDate: string
  oriDetailSn: number
  staffId: string
  staffName: string
  applyDatetime: string
  applyStatus: number
  applyHandler: string
  handlerName: string
  handleDatetime: string
  handleRemark: string
}

const patient: object = computed(() => {
  return baseinfo()
})

const inputContent: Ref<string> = ref('')

const fromOriginCharge: Ref<boolean> = ref(true)
const switchSource = (): void => {
  if (nullPatient()) return
  if (fromOriginCharge.value) {
    getAppliedItems(patient.value.inpatientNo, patient.value.admissTimes, patient.value.ledgerSn).then(res => {
      feeList.value = res
      fromOriginCharge.value = !fromOriginCharge.value
    })
  } else {
    getPatientFeeList(patient.value.inpatientNo, patient.value.admissTimes, patient.value.ledgerSn).then(res => {
      feeList.value = res
      fromOriginCharge.value = !fromOriginCharge.value
    })
  }
}

const feeList: Ref<FeeItem[]> = ref([])
const filterFeeList = computed(() => {
  return feeList.value.filter(item => {
    return item.chargeCodeMx.toUpperCase().indexOf(inputContent.value.toUpperCase()) !== -1 ||
        item.chargeName.indexOf(inputContent.value) !== -1
  })
})

const pageSize: number = 20
const currentPage: Ref<number> = ref(1)
const handlePageChange = (val): void => {
  currentPage.value = val
}

const fetchPatientFees = (): void => {
  getPatientFeeList(patient.value.inpatientNo, patient.value.admissTimes, patient.value.ledgerSn).then(res => {
    feeList.value = res
  })
}

const clearPatientFees = (): void => {
  feeList.value = []
  currentPage.value = 1
}

const applyChargeItem = (row: FeeItem): void => {
  applyHospitalApproval(row).then(res => {
    ElMessage({
      message: res,
      type: 'success',
      duration: 2500,
      showClose: true
    })
    row.applyStatus = 0
  })
}

const makeApplyStatusText = (status: number):string => {
  if (status === 0) {
    return '<span style="color: #e08500">未处理</span>'
  } else if (status === 1) {
    return '<span style="color: green">已通过</span>'
  } else if (status === 2) {
    return '<span style="color: red">已驳回</span>'
  } else {
    return '<span style="color: gray">未申请</span>'
  }
}

const activated: Ref<boolean> = ref(false)
onActivated((): void => {
  activated.value = true
})
onDeactivated((): void => {
  activated.value = false
})
watch(
    () => patient.value.inpatientNo,
    () => {
      if (activated.value) {
        if (patient.value.inpatientNo) {
          fetchPatientFees()
        } else {
          clearPatientFees()
        }
      }
    }
)

onMounted((): void => {
  nextTick((): void => {
    if (patient.value.inpatientNo && patient.value.mdtrtId) {
      fetchPatientFees()
    }
  })
})
</script>