提交

web-admin/src/components/business/pl-carrier-list-attachment-cell/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="pl-carrier-list-attachment-cell">
+    <div
+      v-for="item in items"
+      :key="item.key"
+      class="pl-carrier-list-attachment-cell__item"
+      :title="item.fullLabel"
+    >
+      <AttachmentUploadField
+        v-if="item.url"
+        :model-value="item.url"
+        disabled
+        :category-labels="item.categoryLabels"
+      />
+      <div v-else class="pl-carrier-list-attachment-cell__empty">
+        <span class="pl-carrier-list-attachment-cell__empty-text">未上传</span>
+        <span class="pl-carrier-list-attachment-cell__caption">{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Carrier } from '@/api/pl'
+import AttachmentUploadField from '@/components/business/attachment-upload-field/index.vue'
+import { normalizeAttachmentUrls } from '@/utils/download-attachment'
+
+const props = defineProps<{
+  carrier?: Pick<
+    Carrier,
+    'businessLicenseUrls' | 'roadTransportLicenseUrls' | 'transportAgreementUrls'
+  > | null
+}>()
+
+type ItemDef = {
+  key: string
+  label: string
+  fullLabel: string
+  url: string
+  categoryLabels: Record<string, string>
+}
+
+function parseUrls(raw?: string | null): string[] {
+  const normalized = normalizeAttachmentUrls(raw)
+  if (!normalized) return []
+  return normalized
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+const items = computed<ItemDef[]>(() => {
+  const defs = [
+    {
+      key: 'businessLicense',
+      label: '营业执照',
+      fullLabel: '营业执照',
+      raw: props.carrier?.businessLicenseUrls
+    },
+    {
+      key: 'roadTransportLicense',
+      label: '道路许可',
+      fullLabel: '道路经营许可证',
+      raw: props.carrier?.roadTransportLicenseUrls
+    },
+    {
+      key: 'transportAgreement',
+      label: '运输协议',
+      fullLabel: '运输协议',
+      raw: props.carrier?.transportAgreementUrls
+    }
+  ]
+
+  const result: ItemDef[] = []
+  for (const def of defs) {
+    const urls = parseUrls(def.raw)
+    if (!urls.length) {
+      result.push({
+        key: def.key,
+        label: def.label,
+        fullLabel: def.fullLabel,
+        url: '',
+        categoryLabels: {}
+      })
+      continue
+    }
+    urls.forEach((url, index) => {
+      result.push({
+        key: `${def.key}-${index}`,
+        label: def.label,
+        fullLabel: def.fullLabel,
+        url,
+        categoryLabels: { [url]: def.label }
+      })
+    })
+  }
+  return result
+})
+</script>
+
+<style scoped lang="scss">
+.pl-carrier-list-attachment-cell {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.pl-carrier-list-attachment-cell__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 96px;
+}
+
+.pl-carrier-list-attachment-cell__empty {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 56px;
+  overflow: hidden;
+  border: 1px dashed var(--border, #d9e8e2);
+  border-radius: 8px;
+  background: var(--table-head, #f8fafc);
+  color: var(--mint-text);
+  font-size: 12px;
+}
+
+.pl-carrier-list-attachment-cell__empty-text {
+  margin-bottom: 14px;
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.pl-carrier-list-attachment-cell__caption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 2px 4px;
+  background: rgba(15, 23, 42, 0.62);
+  color: #fff;
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: center;
+  word-break: keep-all;
+}
+
+:deep(.attachment-upload) {
+  width: 100%;
+}
+
+:deep(.attachment-list) {
+  flex-wrap: nowrap;
+}
+
+:deep(.attachment-item) {
+  width: 96px;
+  margin-bottom: 0;
+}
+
+:deep(.attachment-preview) {
+  height: 56px;
+}
+
+:deep(.attachment-footer) {
+  display: none;
+}
+</style>