web_dist/src/views/hospitalization/zhu-yuan-yi-sheng/yi-zhu-lu-ru/components/FeeTable.vue

<script setup lang="jsx">
import {yzMitt} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {queryFeeByOrderNoApi} from "@/api/zhu-yuan-yi-sheng/yi-zhu-lu-ru";
import {getWindowSize} from "@/utils/window-size";

const dialog = ref(false)
const feeList = ref([])
const tableRef = ref(null)


const orderData = ref()

const queryFeeByOrderNo = (data) => {
  orderData.value = data
  queryFeeByOrderNoApi(data.actOrderNo).then(res => {
    dialog.value = true
    feeList.value = res
  })
}


const refundStatus = (val) => {
  if (val === -1) {
    return <span style="color: red">退费数据</span>
  } else if (val > 0) {
    return <span style="color: black">原流水 {val}</span>
  }
}

const filterRoleMethod = ({value, row}) => {
  if (value === 1 && row.oriDetailSn === 0) {
    return true
  }
  if (value === 2 && row.oriDetailSn > 0) {
    return true
  }
  if (value === 3 && row.oriDetailSn === -1) {
    return true
  }
}

const tableCheckboxConfig = ref({
  checkMethod: ({row}) => {
    return row.oriDetailSn === 0
  }
})


onMounted(() => {
  yzMitt.on('queryFeeByOrderNo', queryFeeByOrderNo)
})

</script>

<template>
  <el-dialog v-model="dialog" title="费用详情" width="80%" top="3%">
    <vxe-table :data="feeList"
               border
               ref="tableRef"
               :checkbox-config="tableCheckboxConfig"
               :row-config="{isHover : true, isCurrent: true,height: 24,useKey :  'rowId'}"
               :height="getWindowSize.h / 1.2">
      <vxe-column type="seq" width="50"/>
      <vxe-column type="checkbox" width="35"/>
      <vxe-column field="chargeDate" title="收费时间" width="150" sortable/>
      <vxe-column field="genTime" title="执行时间" width="150"/>
      <vxe-column field="chargeCodeName" title="项目名称" min-width="120"/>
      <vxe-column field="chargeCodeMx" title="项目编码" min-width="80"/>
      <vxe-column field="chargeFee" title="金额" min-width="40"/>
      <vxe-column field="execDept" title="执行" min-width="60"/>
      <vxe-column field="chargeAmount" title="数量" min-width="40" sortable/>
      <vxe-column title="退费"
                  :filters="[{ label: '未退', value: 1 }, { label: '退费', value: 2 },{ label: '被退', value: 3 }]"
                  :filter-method="filterRoleMethod">
        <template #default="{row}">
          <component :is="refundStatus(row.oriDetailSn)"/>
        </template>
      </vxe-column>
    </vxe-table>
  </el-dialog>
</template>

<style scoped lang="scss">
.my-select {
  margin: 10px;
  width: 100px;
  height: 32px;
}
</style>