kyj-yanglao-web-new/src/views/elderly/bak/check-out/Form.vue

<template>
  <Dialog
    v-model="dialogVisible"
    :title="titleItem"
    class="check-out form-tag-dialog"
    width="60%"
    :scroll="isDetail ? true : false"
  >
    <ProcessForm ref="processFormRef" :toggleType="isDetail" />
    <template #footer>
      <el-button @click="handleClosed">关闭</el-button>
      <el-button v-loading="formLoading" type="primary" @click="submitForm">提交审核</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ProcessForm from './ProcessForm.vue'

defineOptions({ name: 'BakCheckOutForm' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
import { elderlyBakAdd } from '@/api/elderly/bak/check-out'
const dialogVisible = ref(false) // 弹窗
const processFormRef = ref() // 表单 Ref
const isDetail = ref(false) // 是否详情打开
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const titleItem = ref('新增')
/** 打开弹窗
 * @param tId       租户 id（必填）
 * @param id        退住申请 id（编辑/重新发起时传入）
 * @param detail    是否详情
 * @param status    审批状态
 * @param elderId   外部带入的长者 id（如从出院小结发起退住申请时预选该长者，新增场景）
 * @param retreatDate 外部带入的退住日期（如从出院小结带入的出院日期）
 * @param reason     外部带入的退住原因（字典键值，如从出院小结带入的出院原因）
 * @param description 外部带入的退住描述（如出院原因=其他时的补充说明）
 */
const open = async (tId, id, detail, status, elderId, retreatDate, reason, description) => {
  dialogVisible.value = true
  isDetail.value = detail
  await nextTick()
  processFormRef.value.setTenantId(tId)
  if (id) {
    titleItem.value = '重新发起'
    processFormRef.value.init(id, detail, status)
  } else if (elderId) {
    // 新增且带入长者 id：打开后默认选中该长者（下拉框显示且其证件号/入住日期/床位号自动回填）
    processFormRef.value.setElderById(elderId)
  }
  // 带入退住日期（外部传入时预填）
  if (retreatDate) {
    processFormRef.value.setRetreatDate(retreatDate)
  }
  // 带入退住原因 / 退住描述（出院原因=其他时，退住描述取「其他」输入值）
  if (reason !== '' && reason !== null && reason !== undefined) {
    processFormRef.value.setReason(reason)
  }
  if (description) {
    processFormRef.value.setDescription(description)
  }
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  if(formLoading.value){
    return
  }
  formLoading.value = true
  try {
    let { valid, dataForm } = await processFormRef.value.submitForm()
    if(!valid){
      return
    }
    const res = await elderlyBakAdd(dataForm)
    if (res) {
      message.success(t('common.updateSuccess'))
      // 发送操作成功的事件
      emit('success')
      handleClosed()
    }
  } finally {
    setTimeout(()=>{
      formLoading.value = false
    },500)
  }

}

// 关闭表单
const handleClosed = () => {
  processFormRef.value.resetForm()
  dialogVisible.value = false
}

defineExpose({ open, isDetail })
</script>

<style lang="scss" scoped>
.check-out {
  @media (max-width: 1200) {
    :deep(.el-form-item--default .el-form-item__label) {
      line-height: 0 !important;
    }
  }
}
</style>