Industrial-image-management-system---web/src/views/project-management/bidding/award-notice/index.vue

<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="中标通知书管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="generateNotice">
            <template #icon><icon-plus /></template>
            <template #default>生成通知书</template>
          </a-button>
          <a-button @click="batchSend">
            <template #icon><icon-send /></template>
            <template #default>批量发送</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 发送状态 -->
      <template #sendStatus="{ record }">
        <a-tag :color="getSendStatusColor(record.sendStatus)">
          {{ getSendStatusText(record.sendStatus) }}
        </a-tag>
      </template>
      
      <!-- 中标金额 -->
      <template #winningAmount="{ record }">
        <span class="font-medium text-green-600">￥{{ record.winningAmount.toLocaleString() }}万</span>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">查看</a-link>
          <a-link @click="downloadNotice(record)">下载</a-link>
          <a-link @click="sendNotice(record)" v-if="record.sendStatus === 'not_sent'">发送</a-link>
          <a-link @click="signContract(record)" v-if="record.sendStatus === 'sent'">签署合同</a-link>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
const searchForm = reactive({
  projectName: '',
  noticeCode: '',
  sendStatus: '',
  noticeDate: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'projectName',
    label: '项目名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入项目名称'
    }
  },
  {
    field: 'noticeCode',
    label: '通知书编号',
    type: 'input' as const,
    props: {
      placeholder: '请输入通知书编号'
    }
  },
  {
    field: 'sendStatus',
    label: '发送状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择发送状态',
      options: [
        { label: '未发送', value: 'not_sent' },
        { label: '已发送', value: 'sent' },
        { label: '已确认', value: 'confirmed' },
        { label: '已签约', value: 'contracted' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '通知书编号', dataIndex: 'noticeCode', width: 150 },
  { title: '项目名称', dataIndex: 'projectName', width: 300, ellipsis: true, tooltip: true },
  { title: '中标单位', dataIndex: 'winningCompany', width: 200, ellipsis: true, tooltip: true },
  { title: '招标单位', dataIndex: 'tenderUnit', width: 200, ellipsis: true, tooltip: true },
  { title: '中标金额', dataIndex: 'winningAmount', slotName: 'winningAmount', width: 120 },
  { title: '工期要求', dataIndex: 'duration', width: 100 },
  { title: '通知日期', dataIndex: 'noticeDate', width: 120 },
  { title: '有效期', dataIndex: 'validUntil', width: 120 },
  { title: '发送状态', dataIndex: 'sendStatus', slotName: 'sendStatus', width: 100 },
  { title: '发送时间', dataIndex: 'sendTime', width: 160 },
  { title: '确认时间', dataIndex: 'confirmTime', width: 160 },
  { title: '联系人', dataIndex: 'contactPerson', width: 100 },
  { title: '联系电话', dataIndex: 'contactPhone', width: 120 },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 200, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    noticeCode: 'WN2024001',
    projectName: '华能新能源风电场叶片检测服务项目',
    winningCompany: '我公司',
    tenderUnit: '华能新能源股份有限公司',
    winningAmount: 320,
    duration: '60天',
    noticeDate: '2024-02-16',
    validUntil: '2024-02-26',
    sendStatus: 'contracted',
    sendTime: '2024-02-16 14:30:00',
    confirmTime: '2024-02-17 10:15:00',
    contactPerson: '李经理',
    contactPhone: '13800138001',
    remark: '已成功签署合同'
  },
  {
    id: 2,
    noticeCode: 'WN2024002',
    projectName: '大唐风电场防雷检测项目',
    winningCompany: '我公司',
    tenderUnit: '大唐新能源股份有限公司',
    winningAmount: 268,
    duration: '45天',
    noticeDate: '2024-02-21',
    validUntil: '2024-03-03',
    sendStatus: 'confirmed',
    sendTime: '2024-02-21 09:00:00',
    confirmTime: '2024-02-22 11:30:00',
    contactPerson: '王经理',
    contactPhone: '13800138002',
    remark: '等待签署正式合同'
  },
  {
    id: 3,
    noticeCode: 'WN2024003',
    projectName: '国电投风电场设备检修项目',
    winningCompany: '我公司',
    tenderUnit: '国家电力投资集团',
    winningAmount: 450,
    duration: '30天',
    noticeDate: '2024-02-28',
    validUntil: '2024-03-10',
    sendStatus: 'sent',
    sendTime: '2024-02-28 16:45:00',
    confirmTime: '',
    contactPerson: '张经理',
    contactPhone: '13800138003',
    remark: '已发送，等待对方确认'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showPageSize: true
})

// 获取发送状态颜色
const getSendStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'not_sent': 'gray',
    'sent': 'blue',
    'confirmed': 'orange',
    'contracted': 'green'
  }
  return colorMap[status] || 'gray'
}

// 获取发送状态文本
const getSendStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'not_sent': '未发送',
    'sent': '已发送',
    'confirmed': '已确认',
    'contracted': '已签约'
  }
  return textMap[status] || status
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    projectName: '',
    noticeCode: '',
    sendStatus: '',
    noticeDate: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const generateNotice = () => {
  Message.info('生成通知书功能开发中...')
}

const batchSend = () => {
  Message.info('批量发送功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看中标通知书: ${record.projectName}`)
}

const downloadNotice = (record: any) => {
  Message.info(`下载中标通知书: ${record.projectName}`)
}

const sendNotice = (record: any) => {
  Message.info(`发送中标通知书: ${record.projectName}`)
}

const signContract = (record: any) => {
  Message.info(`签署合同: ${record.projectName}`)
}

onMounted(() => {
  search()
})
</script>