Industrial-image-management-system---web/src/views/project-management/bidding/information-retrieval/components/BiddingDetailModal.vue

<template>
  <a-modal
      :visible="visible"
      title="招标详情"
      width="800px"
      :footer="false"
      :mask-closable="false"
      @update:visible="(val) => $emit('update:visible', val)"
  >
    <a-descriptions
        :column="2"
        bordered
        :label-style="{ width: '120px', fontWeight: 'bold' }"
    >
      <a-descriptions-item label="项目名称">{{ detail.projectName }}</a-descriptions-item>
      <a-descriptions-item label="招标单位">{{ detail.biddingUnit }}</a-descriptions-item>
      <a-descriptions-item label="预算金额">{{ detail.budgetAmount }}万元</a-descriptions-item>
      <a-descriptions-item label="截止时间">{{ detail.deadline }}</a-descriptions-item>
      <a-descriptions-item label="爬取时间">{{ detail.crawlingTime }}</a-descriptions-item>
      <a-descriptions-item label="项目地点">{{ detail.projectLocation }}</a-descriptions-item>
      <a-descriptions-item label="项目周期">{{ detail.projectDuration }}</a-descriptions-item>
      <a-descriptions-item label="招标范围">{{ detail.biddingScope }}</a-descriptions-item>
      <a-descriptions-item label="资质要求">{{ detail.qualificationRequirements }}</a-descriptions-item>
      <a-descriptions-item label="来源平台">
        <a
            :href="getPlatformUrl(detail.sourcePlatform)"
            target="_blank"
            class="platform-link"
        >
          {{ detail.sourcePlatform }}
        </a>
      </a-descriptions-item>
      <a-descriptions-item label="招标文件">
        <div class="file-display">
          <a-link
              v-if="detail.biddingDocuments"
              :href="detail.biddingDocuments"
              target="_blank"
              class="file-link"
          >
            {{ displayedFileName }}
          </a-link>
          <span v-else class="no-file">暂无文件</span>

          <a-upload
              :show-file-list="false"
              :before-upload="beforeUpload"
              accept=".pdf,.doc,.docx"
              style="margin-left: 10px"
          >
            <a-button
                type="outline"
                size="mini"
                :loading="uploading"
            >
              <template #icon><icon-upload /></template>
              {{ detail.biddingDocuments ? '重新上传' : '上传文件' }}
            </a-button>
          </a-upload>
        </div>
      </a-descriptions-item>
    </a-descriptions>

    <div class="content-section">
      <h3>招标内容</h3>
      <div class="content-text">{{ detail.biddingContent }}</div>
      <ul v-if="detail.contentItems && detail.contentItems.length">
        <li v-for="(item, index) in detail.contentItems" :key="index">{{ item }}</li>
      </ul>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BiddingDetail } from './types'

const props = defineProps<{
  visible: boolean
  detail: BiddingDetail
  uploading?: boolean
}>()

const emit = defineEmits(['update:visible', 'upload'])

const displayedFileName = computed(() => {
  if (!props.detail?.biddingDocuments) return ''
  const url = props.detail.biddingDocuments
  return url.split('/').pop() || '招标文件'
})

// 平台URL映射
const platformUrls: Record<string, string> = {
  '中国招标投标网': 'https://www.cebpubservice.com/',
  '国能e招': 'https://www.negc.cn/',
  '中国节能': 'https://www.cecec.cn/',
  '三峡招标': 'https://epp.ctg.com.cn/'
}

const getPlatformUrl = (platformName: string): string => {
  return platformUrls[platformName] || '#'
}

const handleUpload = () => {
  emit('upload')
}

const beforeUpload = (file: File) => {
  // 检查文件类型
  const isValidType = [
    'application/pdf',
    'application/msword',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  ].includes(file.type)

  // 检查文件大小 (限制10MB)
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isValidType) {
    Message.error('只能上传PDF或Word文件!')
    return false
  }

  if (!isLt10M) {
    Message.error('文件大小不能超过10MB!')
    return false
  }

  // 触发上传事件
  emit('upload', file)

  // 返回false阻止默认上传行为，由父组件处理
  return false
}
</script>

<style scoped lang="less">
.file-display {
  display: flex;
  align-items: center;
}

.file-link {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;

  &:hover {
    color: #40a9ff;
  }
}

.no-file {
  color: var(--color-text-3);
}
.platform-link {
  color: #1890ff; /* 蓝色 */
  text-decoration: underline; /* 下划线 */
  cursor: pointer;

  &:hover {
    color: #40a9ff; /* 悬停时变浅蓝色 */
    text-decoration: underline;
  }
}
.content-section {
  margin-top: 20px;
  padding: 16px;
  background-color: var(--color-fill-2);
  border-radius: 4px;

  h3 {
    margin-bottom: 12px;
    color: var(--color-text-1);
  }

  .content-text {
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--color-text-2);
  }

  ul {
    padding-left: 20px;
    color: var(--color-text-2);

    li {
      margin-bottom: 8px;
      line-height: 1.6;
    }
  }
}
</style>