|
|
@@ -10,23 +10,33 @@
|
|
|
</div>
|
|
|
<div class="contract-container" v-if="contractList && contractList.length > 0">
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col v-for="(item, index) in contractList" :key="index" :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
|
|
|
- <div class="contract-item">
|
|
|
- <el-image
|
|
|
- :src="item.imgUrl"
|
|
|
- fit=""
|
|
|
- class="contract-image"
|
|
|
- :preview-src-list="contractList.map(img => img.imgUrl)"
|
|
|
- :initial-index="index"
|
|
|
- >
|
|
|
- <template #error>
|
|
|
- <div class="image-slot">
|
|
|
- <el-icon><Picture /></el-icon>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
+ <template v-for="(item, index) in contractList" :key="index">
|
|
|
+ <el-col
|
|
|
+ v-for="(url, uIdx) in parseCommaSeparatedImgUrls(item.imgUrl)"
|
|
|
+ :key="`${index}-${uIdx}`"
|
|
|
+ :xs="12"
|
|
|
+ :sm="8"
|
|
|
+ :md="6"
|
|
|
+ :lg="4"
|
|
|
+ :xl="4"
|
|
|
+ >
|
|
|
+ <div class="contract-item">
|
|
|
+ <el-image
|
|
|
+ :src="url"
|
|
|
+ fit=""
|
|
|
+ class="contract-image"
|
|
|
+ :preview-src-list="contractPreviewFlatUrls"
|
|
|
+ :initial-index="contractFlatInitialIndex(index, uIdx)"
|
|
|
+ >
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <el-icon><Picture /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div v-else class="empty-contract">
|
|
|
@@ -95,24 +105,30 @@
|
|
|
{{ item.createdDateFormat }}
|
|
|
</div>
|
|
|
<div class="record-items">
|
|
|
- <div class="record-item" v-for="(citem, cindex) in item.licenseList" :key="cindex">
|
|
|
- <el-image
|
|
|
- :src="citem.imgUrl"
|
|
|
- fit="cover"
|
|
|
- class="record-image"
|
|
|
- :preview-src-list="item.licenseList.map(v => v.imgUrl)"
|
|
|
- :initial-index="cindex"
|
|
|
+ <template v-for="(citem, cindex) in item.licenseList || []" :key="cindex">
|
|
|
+ <div
|
|
|
+ v-for="(url, uIdx) in parseCommaSeparatedImgUrls(citem.imgUrl)"
|
|
|
+ :key="`${cindex}-${uIdx}`"
|
|
|
+ class="record-item"
|
|
|
>
|
|
|
- <template #error>
|
|
|
- <div class="image-slot">
|
|
|
- <el-icon><Picture /></el-icon>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-image>
|
|
|
- <div class="record-status-badge" :class="getStatusClass(item.licenseExecuteStatus)">
|
|
|
- {{ item.licenseExecuteName }}
|
|
|
+ <el-image
|
|
|
+ :src="url"
|
|
|
+ fit="cover"
|
|
|
+ class="record-image"
|
|
|
+ :preview-src-list="getRecordGroupPreviewUrls(item)"
|
|
|
+ :initial-index="getRecordGroupFlatIndex(item, cindex, uIdx)"
|
|
|
+ >
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <el-icon><Picture /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div class="record-status-badge" :class="getStatusClass(item.licenseExecuteStatus)">
|
|
|
+ {{ getStatusName(item.licenseExecuteStatus) }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
<div v-if="item.reasonRefusal" class="rejection-reason">拒绝原因: {{ item.reasonRefusal }}</div>
|
|
|
</div>
|
|
|
@@ -149,7 +165,7 @@ import {
|
|
|
const statusMap: Record<number, { name: string; class: string }> = {
|
|
|
1: { name: "审核通过", class: "status-success" },
|
|
|
2: { name: "审核中", class: "status-pending" },
|
|
|
- 3: { name: "审核拒绝", class: "status-failed" }
|
|
|
+ 3: { name: "审核失败", class: "status-failed" }
|
|
|
};
|
|
|
|
|
|
const contractList = ref<any>([]);
|
|
|
@@ -196,6 +212,50 @@ onMounted(async () => {
|
|
|
await initData();
|
|
|
});
|
|
|
|
|
|
+/** 合同/变更记录:imgUrl 多为英文逗号分隔的多张图地址 */
|
|
|
+function parseCommaSeparatedImgUrls(raw: unknown): string[] {
|
|
|
+ if (raw == null || raw === "") return [];
|
|
|
+ if (Array.isArray(raw)) {
|
|
|
+ return raw.map(u => String(u).trim()).filter(Boolean);
|
|
|
+ }
|
|
|
+ const s = String(raw).trim();
|
|
|
+ if (!s) return [];
|
|
|
+ return s
|
|
|
+ .split(",")
|
|
|
+ .map(part => part.trim())
|
|
|
+ .filter(Boolean);
|
|
|
+}
|
|
|
+
|
|
|
+const contractPreviewFlatUrls = computed(() => {
|
|
|
+ const list = contractList.value || [];
|
|
|
+ return list.flatMap((row: any) => parseCommaSeparatedImgUrls(row?.imgUrl));
|
|
|
+});
|
|
|
+
|
|
|
+function contractFlatInitialIndex(itemIndex: number, urlIndexInItem: number): number {
|
|
|
+ const list = contractList.value || [];
|
|
|
+ let offset = 0;
|
|
|
+ for (let i = 0; i < itemIndex; i++) {
|
|
|
+ offset += parseCommaSeparatedImgUrls(list[i]?.imgUrl).length;
|
|
|
+ }
|
|
|
+ return offset + urlIndexInItem;
|
|
|
+}
|
|
|
+
|
|
|
+function getRecordGroupPreviewUrls(recordItem: any): string[] {
|
|
|
+ const list = recordItem?.licenseList;
|
|
|
+ if (!Array.isArray(list)) return [];
|
|
|
+ return list.flatMap((v: any) => parseCommaSeparatedImgUrls(v?.imgUrl));
|
|
|
+}
|
|
|
+
|
|
|
+function getRecordGroupFlatIndex(recordItem: any, cindex: number, uIdx: number): number {
|
|
|
+ const list = recordItem?.licenseList;
|
|
|
+ if (!Array.isArray(list)) return 0;
|
|
|
+ let offset = 0;
|
|
|
+ for (let i = 0; i < cindex; i++) {
|
|
|
+ offset += parseCommaSeparatedImgUrls(list[i]?.imgUrl).length;
|
|
|
+ }
|
|
|
+ return offset + uIdx;
|
|
|
+}
|
|
|
+
|
|
|
const initData = async () => {
|
|
|
const params = {
|
|
|
id: id
|