长者轮候流程完成

src/views/bpm/form/index.vue

@@ -8,8 +8,9 @@
       :inline="true"
       :model="queryParams"
       class="-mb-15px"
-      label-width="68px"
+      label-width="88px"
     >
+      <TenantSelect v-model="queryParams.tenantIds" placeholder="请选择机构名称" prop="tenantIds" />
       <el-form-item label="表单名" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -97,6 +98,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { useUserStore } from '@/store/modules/user'
 
 defineOptions({ name: 'BpmForm' })
 
@@ -104,13 +106,16 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { currentRoute, push } = useRouter() // 路由
 
+const userStore = useUserStore()  
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  name: null
+  name: null,
+  tenantIds: userStore.orgTenantId
 })
 const queryFormRef = ref() // 搜索的表单
 
@@ -147,7 +152,7 @@ const openForm = (id?: number) => {
   // 表单新建的时候id传的是event需要排除
   if (typeof id === 'number' || typeof id === 'string') {
     toRouter.query = {
-      id
+      id,
     }
   }
   push(toRouter)

src/views/elderly/elder/wait-elder/ProcessForm.vue

@@ -8,90 +8,170 @@
     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="idCard" required>
-      <div class="view-value">{{ form.idCard || '-' }}</div>
-    </el-form-item>
-
-    <el-form-item label="近期居住情况（视频）" prop="recentLivingSituation" required>
-      <div class="view-files">
-        <div v-if="!form.recentLivingSituation.length" class="empty">-</div>
-        <ul v-else>
-          <li v-for="(item, index) in form.recentLivingSituation" :key="`life-${index}`">
-            <a :href="item" target="_blank" rel="noopener noreferrer">{{ getFileName(item) }}</a>
-          </li>
-        </ul>
-      </div>
-    </el-form-item>
-
-    <el-form-item label="行走情况（视频）" prop="walkSituationVideo" required>
-      <div class="view-files">
-        <div v-if="!form.walkSituationVideo.length" class="empty">-</div>
-        <ul v-else>
-          <li v-for="(item, index) in form.walkSituationVideo" :key="`walk-${index}`">
-            <a :href="item" target="_blank" rel="noopener noreferrer">{{ getFileName(item) }}</a>
-          </li>
-        </ul>
-      </div>
-    </el-form-item>
-
-    <el-form-item label="近半年内病历" prop="medicalRecordsWithinSixMonth" required>
-      <div class="view-files">
-        <div v-if="!form.medicalRecordsWithinSixMonth.length" class="empty">-</div>
-        <ul v-else>
-          <li v-for="(item, index) in form.medicalRecordsWithinSixMonth" :key="`medical-${index}`">
-            <a :href="item" target="_blank" rel="noopener noreferrer">{{ getFileName(item) }}</a>
-          </li>
-        </ul>
-      </div>
-    </el-form-item>
-
-    <el-form-item label="身份证照片" prop="idCardPhoto" required>
-      <div class="view-files">
-        <div v-if="!form.idCardPhoto.length" class="empty">-</div>
-        <ul v-else>
-          <li v-for="(item, index) in form.idCardPhoto" :key="`idimg-${index}`">
-            <a :href="item" target="_blank" rel="noopener noreferrer">{{ getFileName(item) }}</a>
-          </li>
-        </ul>
-      </div>
-    </el-form-item>
-
-    <el-form-item label="近期出院小结（视频）" prop="recentDischargeSummary">
-      <div class="view-files">
-        <div v-if="!form.recentDischargeSummary.length" class="empty">-</div>
-        <ul v-else>
-          <li v-for="(item, index) in form.recentDischargeSummary" :key="`discharge-${index}`">
-            <a :href="item" target="_blank" rel="noopener noreferrer">{{ getFileName(item) }}</a>
-          </li>
-        </ul>
-      </div>
-    </el-form-item>
-    <el-form-item label="是否精防" prop="remark">
-      <div class="view-value">{{ form.isPsychosis || '-' }}</div>
-    </el-form-item>
-    <el-form-item label="照护等级" prop="nurseLevelId">
-      <div class="view-value">{{ form.nurseLevelId || '-' }}</div>
-    </el-form-item>
-    <el-form-item label="床位预排备注" prop="remark">
-      <div class="view-value">{{ form.remark || '-' }}</div>
-    </el-form-item>
-    <el-form-item label="体检报告" prop="physicalExaminationReport">
-      <div class="view-files">
-        <div v-if="!form.physicalExaminationReport.length" class="empty">-</div>
-        <ul v-else>
-          <li v-for="(item, index) in form.physicalExaminationReport" :key="`physical-${index}`">
-            <a :href="item" target="_blank" rel="noopener noreferrer">{{ getFileName(item) }}</a>
-          </li>
-        </ul>
-      </div>
-    </el-form-item>
-    <el-form-item label="最终床位信息" prop="bedId">
-      <div class="view-value">{{ form.bedId || '-' }}</div>
-    </el-form-item>
+  <el-row :gutter="40">
+    <el-col :span="12" :xs="24">
+      <el-form-item label="长者姓名" prop="elderName" required>
+        <div class="view-value">{{ form.elderName || '-' }}</div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="身份证号" prop="idCard" required>
+        <div class="view-value">{{ form.idCard || '-' }}</div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="近期居住情况（视频）" prop="recentLivingSituation" required>
+        <div class="view-files">
+          <div v-if="!form.recentLivingSituation.length" class="empty">-</div>
+          <ul v-else>
+            <li v-for="(item, index) in form.recentLivingSituation" :key="`life-${index}`">
+              <template v-if="isImageFile(item)">
+                <el-image :src="getFileUrl(item)" :alt="getFileName(item)" :preview-src-list="[getFileUrl(item)]" class="file-preview-image" fit="cover" />
+              </template>
+              <template v-else-if="isVideoFile(item)">
+                <video :src="getFileUrl(item)" class="file-preview-video" controls preload="metadata"></video>
+              </template>
+              <template v-else>
+                <a :href="getFileUrl(item)" target="_blank" rel="noopener noreferrer" download>
+                  {{ getFileName(item) }}
+                </a>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="行走情况（视频）" prop="walkSituationVideo" required>
+        <div class="view-files">
+          <div v-if="!form.walkSituationVideo.length" class="empty">-</div>
+          <ul v-else>
+            <li v-for="(item, index) in form.walkSituationVideo" :key="`walk-${index}`">
+              <template v-if="isImageFile(item)">
+                <el-image :src="getFileUrl(item)" :alt="getFileName(item)" :preview-src-list="[getFileUrl(item)]" class="file-preview-image" fit="cover" />
+              </template>
+              <template v-else-if="isVideoFile(item)">
+                <video :src="getFileUrl(item)" class="file-preview-video" controls preload="metadata"></video>
+              </template>
+              <template v-else>
+                <a :href="getFileUrl(item)" target="_blank" rel="noopener noreferrer" download>
+                  {{ getFileName(item) }}
+                </a>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="近半年内病历" prop="medicalRecordsWithinSixMonth" required>
+        <div class="view-files">
+          <div v-if="!form.medicalRecordsWithinSixMonth.length" class="empty">-</div>
+          <ul v-else>
+            <li v-for="(item, index) in form.medicalRecordsWithinSixMonth" :key="`medical-${index}`">
+              <template v-if="isImageFile(item)">
+                <el-image :src="getFileUrl(item)" :alt="getFileName(item)" :preview-src-list="[getFileUrl(item)]" class="file-preview-image" fit="cover" />
+              </template>
+              <template v-else-if="isVideoFile(item)">
+                <video :src="getFileUrl(item)" class="file-preview-video" controls preload="metadata"></video>
+              </template>
+              <template v-else>
+                <a :href="getFileUrl(item)" target="_blank" rel="noopener noreferrer" download>
+                  {{ getFileName(item) }}
+                </a>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="身份证照片" prop="idCardPhoto" required>
+        <div class="view-files">
+          <div v-if="!form.idCardPhoto.length" class="empty">-</div>
+          <ul v-else>
+            <li v-for="(item, index) in form.idCardPhoto" :key="`idimg-${index}`">
+              <template v-if="isImageFile(item)">
+                <el-image :src="getFileUrl(item)" :alt="getFileName(item)" :preview-src-list="[getFileUrl(item)]" class="file-preview-image" fit="cover" />
+              </template>
+              <template v-else-if="isVideoFile(item)">
+                <video :src="getFileUrl(item)" class="file-preview-video" controls preload="metadata"></video>
+              </template>
+              <template v-else>
+                <a :href="getFileUrl(item)" target="_blank" rel="noopener noreferrer" download>
+                  {{ getFileName(item) }}
+                </a>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="近期出院小结（视频）" prop="recentDischargeSummary">
+        <div class="view-files">
+          <div v-if="!form.recentDischargeSummary.length" class="empty">-</div>
+          <ul v-else>
+            <li v-for="(item, index) in form.recentDischargeSummary" :key="`discharge-${index}`">
+              <template v-if="isImageFile(item)">
+                <el-image :src="getFileUrl(item)" :alt="getFileName(item)" :preview-src-list="[getFileUrl(item)]" class="file-preview-image" fit="cover" />
+              </template>
+              <template v-else-if="isVideoFile(item)">
+                <video :src="getFileUrl(item)" class="file-preview-video" controls preload="metadata"></video>
+              </template>
+              <template v-else>
+                <a :href="getFileUrl(item)" target="_blank" rel="noopener noreferrer" download>
+                  {{ getFileName(item) }}
+                </a>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="是否精防" prop="isPsychosis">
+        <div class="view-value">{{ form.isPsychosis || '-' }}</div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="照护等级" prop="nurseLevelName">
+        <div class="view-value">{{ form.nurseLevelName || '-' }}</div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="床位预排备注" prop="remark">
+        <div class="view-value">{{ form.remark || '-' }}</div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="体检报告" prop="physicalExaminationReport">
+        <div class="view-files">
+          <div v-if="!form.physicalExaminationReport.length" class="empty">-</div>
+          <ul v-else>
+            <li v-for="(item, index) in form.physicalExaminationReport" :key="`physical-${index}`">
+              <template v-if="isImageFile(item)">
+                <el-image :src="getFileUrl(item)" :alt="getFileName(item)" :preview-src-list="[getFileUrl(item)]" class="file-preview-image" fit="cover" />
+              </template>
+              <template v-else-if="isVideoFile(item)">
+                <video :src="getFileUrl(item)" class="file-preview-video" controls preload="metadata"></video>
+              </template>
+              <template v-else>
+                <a :href="getFileUrl(item)" target="_blank" rel="noopener noreferrer" download>
+                  {{ getFileName(item) }}
+                </a>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12" :xs="24">
+      <el-form-item label="最终床位信息" prop="bedName">
+        <div class="view-value">{{ form.bedName || '-' }}</div>
+      </el-form-item>
+    </el-col>
+  </el-row>
   </el-form>
 </template>
 
@@ -112,7 +192,10 @@ const form = reactive({
   idCardPhoto: [] as any[],
   recentDischargeSummary: [] as any[],
   physicalExaminationReport: [] as any[],
-  remark: ''
+  remark: '',
+  isPsychosis: '',
+  nurseLevelName: '',
+  bedName: ''
 })
 
 const rules = reactive({})
@@ -130,6 +213,7 @@ const parseFileList = (value: any) => {
 }
 
 const mapSourceToForm = (source: Record<string, any> = {}) => {
+  console.log('source', source)
   form.elderName = source.elderName || ''
   form.idCard = source.idCard || ''
   form.recentLivingSituation = parseFileList(source.recentLivingSituation)
@@ -137,15 +221,45 @@ const mapSourceToForm = (source: Record<string, any> = {}) => {
   form.medicalRecordsWithinSixMonth = parseFileList(source.medicalRecordsWithinSixMonth)
   form.idCardPhoto = parseFileList(source.idCardPhoto)
   form.recentDischargeSummary = parseFileList(source.recentDischargeSummary)
-  form.physicalExaminationReport = parseFileList(source.physicalExaminationReport)
+  // form.physicalExaminationReport = parseFileList(source.physicalExaminationReport)
+  form.physicalExaminationReport = source.physicalExaminationReport ? source.physicalExaminationReport.slice(1, -1).split(',') as any[] : []
   form.remark = source.remark || ''
+  form.isPsychosis = source.isPsychosis || ''
+  form.nurseLevelName = source.nurseLevelName || ''
+  form.bedName = source.bedName || ''
+}
+
+const getFileUrl = (file: any) => {
+  if (typeof file === 'string') return file
+  return file?.url || file?.fileUrl || file?.path || ''
 }
 
 const getFileName = (file: any) => {
   if (typeof file === 'string') {
-    return file.split('/').pop() || file
+    return file.split('/').pop()?.split('?')[0] || file
   }
-  return file?.name || file?.fileName || file?.url || '-'
+  const url = getFileUrl(file)
+  return file?.name || file?.fileName || (url ? url.split('/').pop()?.split('?')[0] : '-') || '-'
+}
+
+const getFileExtension = (file: any) => {
+  const url = getFileUrl(file)
+  const name = getFileName(file)
+  const target = url || name
+  if (!target) return ''
+  const cleanTarget = target.split('?')[0].split('#')[0]
+  const ext = cleanTarget.includes('.') ? cleanTarget.substring(cleanTarget.lastIndexOf('.') + 1) : ''
+  return ext.toLowerCase()
+}
+
+const isImageFile = (file: any) => {
+  const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+  return imageExts.includes(getFileExtension(file))
+}
+
+const isVideoFile = (file: any) => {
+  const videoExts = ['mp4', 'webm', 'ogg', 'mov', 'm4v', 'avi', 'mkv']
+  return videoExts.includes(getFileExtension(file))
 }
 
 const init = async (id?: string) => {
@@ -216,8 +330,28 @@ defineExpose({ init, submitForm, getProcess, resetForm, setTenantId })
       li {
         line-height: 24px;
         color: var(--el-text-color-primary);
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
+
+    .file-preview-image {
+      display: block;
+      max-width: 100%;
+      max-height: 220px;
+      border-radius: 4px;
+      border: 1px solid var(--el-border-color-lighter);
+    }
+
+    .file-preview-video {
+      display: block;
+      width: 100%;
+      max-height: 220px;
+      border-radius: 4px;
+    }
   }
 }
 </style>