kyj-yanglao-web-new/src/views/elderly/elder/wait-elder/ProcessForm.vue

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    label-position="top"
    status-icon
    class="wait-elder-form"
  >
    <el-form-item label="长者姓名" prop="elderName" required>
      <div class="view-value">{{ form.elderName || '-' }}</div>
    </el-form-item>

    <el-form-item label="身份证号" prop="idCardNo" required>
      <div class="view-value">{{ form.idCardNo || '-' }}</div>
    </el-form-item>

    <el-form-item label="院区" prop="campus" required>
      <div class="view-value">{{ campusLabel(form.campus) }}</div>
    </el-form-item>

    <el-form-item label="近期生活状态（视频）" prop="lifeStatusVideo" required>
      <div class="view-files">
        <div v-if="!form.lifeStatusVideo.length" class="empty">-</div>
        <ul v-else>
          <li v-for="(item, index) in form.lifeStatusVideo" :key="`life-${index}`">{{ getFileName(item) }}</li>
        </ul>
      </div>
    </el-form-item>

    <el-form-item label="行走情况（视频）" prop="walkingVideo" required>
      <div class="view-files">
        <div v-if="!form.walkingVideo.length" class="empty">-</div>
        <ul v-else>
          <li v-for="(item, index) in form.walkingVideo" :key="`walk-${index}`">{{ getFileName(item) }}</li>
        </ul>
      </div>
    </el-form-item>

    <el-form-item label="近半年内病历" prop="medicalRecord" required>
      <div class="view-files">
        <div v-if="!form.medicalRecord.length" class="empty">-</div>
        <ul v-else>
          <li v-for="(item, index) in form.medicalRecord" :key="`medical-${index}`">{{ getFileName(item) }}</li>
        </ul>
      </div>
    </el-form-item>

    <el-form-item label="身份证正反面" prop="idCardImages" required>
      <div class="view-files">
        <div v-if="!form.idCardImages.length" class="empty">-</div>
        <ul v-else>
          <li v-for="(item, index) in form.idCardImages" :key="`idimg-${index}`">{{ getFileName(item) }}</li>
        </ul>
      </div>
    </el-form-item>

    <el-form-item label="近期出院小结（视频）" prop="dischargeSummaryVideo">
      <div class="view-files">
        <div v-if="!form.dischargeSummaryVideo.length" class="empty">-</div>
        <ul v-else>
          <li v-for="(item, index) in form.dischargeSummaryVideo" :key="`discharge-${index}`">{{ getFileName(item) }}</li>
        </ul>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { getBusinessId } from '@/api/elderly/common'
import { getBedChangeRecordById, getBedChangeRecordElderlyById } from '@/api/elderly/elder/bed-change'

defineOptions({ name: 'BedChangeProcessForm' })

const formRef = ref()

const form = reactive({
  elderName: '',
  idCardNo: '',
  campus: '',
  lifeStatusVideo: [] as any[],
  walkingVideo: [] as any[],
  medicalRecord: [] as any[],
  idCardImages: [] as any[],
  dischargeSummaryVideo: [] as any[]
})

const rules = reactive({})

const campusOptions = ref<{ label: string; value: string }[]>([])

const parseToArray = (value: any) => {
  if (!value) return []
  if (Array.isArray(value)) return value
  if (typeof value === 'string') {
    try {
      const parsed = JSON.parse(value)
      return Array.isArray(parsed) ? parsed : []
    } catch (_e) {
      return []
    }
  }
  return []
}

const mapSourceToForm = (source: Record<string, any> = {}) => {
  form.elderName = source.elderName || source.name || ''
  form.idCardNo = source.idCardNo || source.idCard || ''
  form.campus = source.campus || source.campusId || ''
  form.lifeStatusVideo = parseToArray(source.lifeStatusVideo)
  form.walkingVideo = parseToArray(source.walkingVideo)
  form.medicalRecord = parseToArray(source.medicalRecord)
  form.idCardImages = parseToArray(source.idCardImages)
  form.dischargeSummaryVideo = parseToArray(source.dischargeSummaryVideo)
}

const campusLabel = (value: string) => {
  const item = campusOptions.value.find((it) => it.value === value)
  return item?.label || value || '-'
}

const getFileName = (file: any) => {
  return file?.name || file?.fileName || file?.url || '-'
}

const init = async (id?: string, _detail?: boolean, status?: string, elderly = undefined as any) => {
  if (elderly?.elderId) {
    const elderInfo = await getBedChangeRecordElderlyById(elderly.elderId)
    mapSourceToForm(elderInfo || {})
  }

  if (id) {
    const res = await getBedChangeRecordById(id, status, true)
    mapSourceToForm(res || {})
  }
}

const submitForm = async () => {
  return {
    valid: true,
    dataForm: { ...form }
  }
}

const resetForm = () => {
  form.elderName = ''
  form.idCardNo = ''
  form.campus = ''
  form.lifeStatusVideo = []
  form.walkingVideo = []
  form.medicalRecord = []
  form.idCardImages = []
  form.dischargeSummaryVideo = []
  formRef.value?.clearValidate?.()
}

const processType = ref()
const getProcess = async (id, type, status) => {
  const res = await getBusinessId(id)
  await init(res.businessId, true, status)
  processType.value = type
}

const setTenantId = (_tId) => {}

defineExpose({ init, submitForm, getProcess, resetForm, setTenantId })
</script>

<style lang="scss" scoped>
.wait-elder-form {
  .view-value {
    min-height: 32px;
    line-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background: var(--el-fill-color-blank);
    color: var(--el-text-color-primary);
  }

  .view-files {
    min-height: 32px;
    padding: 8px 11px;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background: var(--el-fill-color-blank);

    .empty {
      color: var(--el-text-color-secondary);
    }

    ul {
      margin: 0;
      padding-left: 18px;

      li {
        line-height: 24px;
        color: var(--el-text-color-primary);
      }
    }
  }
}
</style>