kyj-yanglao-web-new/src/views/elderly/elder/contract/Detail.vue

<template>
  <Dialog v-model="dialogVisible" title="合同详情" @close="handleClosed">
    <el-form :model="dataForm">
      <el-row :gutter="20">
        <el-col :span="12" :xs="24">
          <el-form-item label="长者姓名">
            {{ dataForm.elderName }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="合同编号">
            {{ dataForm.contractNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="合同开始日期">
            {{ formatDate(dataForm.beginTime, 'YYYY-MM-DD') }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="合同结束日期">
            {{ formatDate(dataForm.expireTime, 'YYYY-MM-DD') }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同附件">
            <div v-for="(item, index) in dataForm.details" :key="index">
              <el-link type="primary" :underline="false" :href="item.fileUrl">{{
                item.fileName
              }}</el-link>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="能力评估结果">
            {{ dataForm.syntheticAbilityResult }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="长者标签">
            {{ dataForm.elderTags }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="当前护理等级">
            {{ dataForm.nursingLevelName }} <Icon icon="ep:memo" class="ml2" @click="handleOpen" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="护理费">
            {{ formatNum(dataForm.nurseAmount) }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="当前所在床位">
            {{ dataForm.bedName }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="床位价格">
            {{ formatNum(dataForm.bedAmount) }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="餐饮费">
            {{ formatNum(dataForm.mealAmount) }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="当前餐饮标准">
            {{ dataForm.mealItemName }}
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="特殊护理备注">
            {{ dataForm.specialCareNotes }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <NurseCategory ref="formRef" />
  </Dialog>
</template>
<script lang="ts" setup>
import { getElderlyContractById } from '@/api/elderly/elder/contract'
import { formatDate } from '@/utils/formatTime'
import { getSyntheticAbilityName } from '@/utils/synthetic-ability'
import { formatNum } from '@/utils/formatter'
import NurseCategory from './NurseCategory.vue'
import { ContractDetailType } from '../types'
defineOptions({ name: 'ContractDetail' })

const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const dataForm = ref<ContractDetailType>({
  elderName: '',
  contractNumber: '',
  beginTime: '' as unknown as Date,
  expireTime: '' as unknown as Date,
  details: [],
  elderTags: '',
  nursingLevelName: '',
  nursingLevelId: '',
  nurseAmount: '',
  bedName: '',
  bedAmount: '',
  mealAmount: '',
  mealItemName: '',
  specialCareNotes: ''
}) // 详情数据
const active = ref()
/** 打开弹窗 */
const open = async (id) => {
  dialogVisible.value = true
  // 设置数据
  try {
    const res = await getElderlyContractById(id)
    dataForm.value = res
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const formRef = ref()
const handleOpen = () => {
  formRef.value.open(dataForm.value.nursingLevelId)
}

const handleClosed = () => {
  dataForm.value = {
    elderName: '',
    contractNumber: '',
    beginTime: '' as unknown as Date,
    expireTime: '' as unknown as Date,
    details: [],
    elderTags: '',
    nursingLevelName: '',
    nursingLevelId: '',
    nurseAmount: '',
    bedName: '',
    bedAmount: '',
    mealAmount: '',
    mealItemName: '',
    specialCareNotes: ''
  }
  detailLoading.value = false
}
</script>