提交

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>

web-admin/src/views/pl/carrier/index.vue

@@ -93,7 +93,7 @@
           <el-table-column
             type="index"
             label="序号"
-            min-width="68"
+            min-width="52"
             align="center"
             header-align="center"
             :index="(index) => (pagination.page - 1) * pagination.pageSize + index + 1"
@@ -126,6 +126,17 @@
             align="center"
             header-align="center"
           />
+          <el-table-column
+            v-if="isColumnVisible('qualificationAttachments')"
+            label="资质附件"
+            min-width="340"
+            align="left"
+            header-align="left"
+          >
+            <template #default="{ row }">
+              <PlCarrierListAttachmentCell :carrier="row" />
+            </template>
+          </el-table-column>
           <el-table-column
             v-if="isColumnVisible('status')"
             label="合作状态"
@@ -310,6 +321,7 @@
 import { Check, Close, Delete, Edit, Plus, RefreshLeft, Search } from '@element-plus/icons-vue'
 import { carrierApi, type Carrier } from '@/api/pl'
 import AttachmentUploadField from '@/components/business/attachment-upload-field/index.vue'
+import PlCarrierListAttachmentCell from '@/components/business/pl-carrier-list-attachment-cell/index.vue'
 import PlCarrierViewDialog from '@/components/business/pl-carrier-view-dialog/index.vue'
 import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
 import ListQuickSearchInput from '@/components/business/list-quick-search-input/index.vue'
@@ -324,6 +336,7 @@ const quickSearchKeyword = ref('')
 const listColumnDefs = [
   { prop: 'contactName', label: '联系人' },
   { prop: 'contactPhone', label: '联系电话' },
+  { prop: 'qualificationAttachments', label: '资质附件' },
   { prop: 'status', label: '合作状态' },
   { prop: 'qualificationHint', label: '资质提示' },
   { prop: 'transportAgreementExpireDate', label: '协议有效期' },
@@ -336,7 +349,7 @@ const {
   isIndeterminate,
   isColumnVisible,
   resetToDefault
-} = usePersistedListColumns('pl-carrier-list-columns', listColumnDefs)
+} = usePersistedListColumns('pl-carrier-list-columns-v2', listColumnDefs)
 
 const submitLoading = ref(false)
 const carrierList = ref<Carrier[]>([])