sqxp/web-admin/src/views/system/inquiry/index.vue

<!-- 询价单管理页面 -->
<template>
  <div class="page-container">
    <div class="page-head">
      <div>
        <h2>询价管理</h2>
        <p>统一发布询价、跟踪报价与状态流转</p>
      </div>
    </div>
    <div class="panel">
      <div class="panel-top">
        <div class="panel-title">
          <el-icon class="title-ic"><Operation /></el-icon>
          <span>筛选条件</span>
        </div>
      </div>
      <div class="filter-block">
      <el-form :inline="true" :model="searchForm" class="filter-grid">
        <el-form-item label="关键词">
          <el-input v-model="searchForm.keyword" placeholder="询价单标题" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" clearable>
            <el-option label="全部" value="" />
            <el-option label="草稿" value="draft" />
            <el-option label="已发布" value="published" />
            <el-option label="已关闭" value="closed" />
          </el-select>
        </el-form-item>
        <el-form-item class="filter-actions-row">
          <el-button class="btn-main" @click="handleSearch">搜索</el-button>
          <el-button class="btn-ghost" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>

    <div class="panel">
      <div class="panel-top">
        <div class="panel-title">
          <el-icon class="title-ic"><Operation /></el-icon>
          <span>询价列表</span>
        </div>
      </div>
      <div class="list-toolbar">
        <div class="list-toolbar-row">
          <div class="list-toolbar-selected">共 <span class="sel-num">{{ pagination.total }}</span> 条</div>
          <el-button class="btn-main" @click="handleCreate">
        <el-icon><Plus /></el-icon>
        发布询价
      </el-button>
        </div>
      </div>
    </div>

    <div class="panel">
    <div class="list-body list-wrap">
    <el-table class="list-table" :data="tableData" v-loading="loading" stripe>
      <el-table-column prop="title" label="询价单标题" min-width="200" show-overflow-tooltip />
      <el-table-column prop="regionName" label="区域" min-width="120" />
      <el-table-column prop="productCount" label="商品数量" min-width="100" align="center" />
      <el-table-column prop="quotationCount" label="报价数量" min-width="100" align="center">
        <template #default="{ row }">
          <span v-if="row.quotationCount > 0" class="quotation-count">{{ row.quotationCount }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'published' ? 'success' : row.status === 'closed' ? 'info' : 'warning'" size="small">
            {{ row.status === 'draft' ? '草稿' : row.status === 'published' ? '已发布' : '已关闭' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publishTime" label="发布时间" min-width="180" />
      <el-table-column prop="createAt" label="创建时间" min-width="180" />
      <el-table-column label="操作" min-width="220" fixed="right">
        <template #default="{ row }">
          <el-button class="btn-op-item primary" link @click="handleView(row)">查看</el-button>
          <el-button v-if="row.status === 'draft'" class="btn-op-item" link @click="handleEdit(row)">编辑</el-button>
          <el-button v-if="row.status === 'draft'" class="btn-op-item" link @click="handlePublish(row)">发布</el-button>
          <el-button v-if="row.status === 'published'" class="btn-op-item danger" link @click="handleClose(row)">关闭</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <div class="pagination list-pager-bar">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        @size-change="loadData"
        @current-change="loadData"
      />
    </div>
    </div>

    <!-- 新增/编辑询价单弹窗 -->
    <el-dialog v-model="formVisible" :title="formTitle" width="700px" @close="handleFormClose">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="询价标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入询价标题" />
        </el-form-item>
        <el-form-item label="选择区域" prop="regionId">
          <el-select v-model="formData.regionId" placeholder="请选择区域">
            <el-option v-for="r in regionList" :key="r.id" :label="r.name" :value="r.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="询价商品" prop="productIds">
          <div class="product-select">
            <el-checkbox-group v-model="formData.productIds">
              <el-checkbox v-for="p in productList" :key="p.id" :value="p.id" :label="p.id">
                {{ p.name }} ({{ p.categoryName }})
              </el-checkbox>
            </el-checkbox-group>
            <div v-if="productList.length === 0" class="empty-tip">暂无可选商品</div>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button class="btn-ghost" @click="formVisible = false">取消</el-button>
        <el-button class="btn-main" @click="confirmForm" :loading="submitLoading">确定</el-button>
      </template>
    </el-dialog>

    <!-- 查看详情弹窗 -->
    <el-dialog v-model="viewVisible" title="询价单详情" width="1000px" destroy-on-close>
      <div class="detail-hero">
        <div class="detail-hero-title">{{ viewData.title || '-' }}</div>
        <div class="detail-hero-meta">询价单号：{{ viewData.inquiryNo || '-' }} ｜ 区域：{{ viewData.regionName || '-' }}</div>
      </div>
      <div class="detail-section">
      <el-descriptions :column="2" border class="mb-4">
        <el-descriptions-item label="询价单号">{{ viewData.inquiryNo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="viewData.status === 'published' ? 'success' : viewData.status === 'closed' ? 'info' : 'warning'" size="small">
            {{ viewData.status === 'draft' ? '草稿' : viewData.status === 'published' ? '进行中' : '已关闭' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="询价标题" :span="2">{{ viewData.title }}</el-descriptions-item>
        <el-descriptions-item label="询价区域">{{ viewData.regionName }}</el-descriptions-item>
        <el-descriptions-item label="截止时间">{{ viewData.deadline || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ viewData.publishTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="关闭时间">{{ viewData.closeTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ viewData.createName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ viewData.createAt }}</el-descriptions-item>
        <el-descriptions-item v-if="viewData.remark" label="备注" :span="2">
          <span class="remark-text">{{ viewData.remark }}</span>
        </el-descriptions-item>
      </el-descriptions>
      </div>

      <!-- 询价统计 -->
      <div class="quote-summary">
        <div class="quote-stat">
          <div class="quote-stat-num">{{ viewData.items?.length || 0 }}</div>
          <div class="quote-stat-label">商品数量</div>
        </div>
        <div class="quote-stat">
          <div class="quote-stat-num">{{ getQuotationStats(viewData.items).quotedCount }}</div>
          <div class="quote-stat-label">已报价供应商</div>
        </div>
        <div class="quote-stat">
          <div class="quote-stat-num">{{ getQuotationStats(viewData.items).pendingCount }}</div>
          <div class="quote-stat-label">待报价供应商</div>
        </div>
      </div>

      <h4 class="section-title">询价商品明细</h4>
      <el-table :data="viewData.items" stripe>
        <el-table-column prop="productCode" label="商品编码" min-width="120" />
        <el-table-column prop="productName" label="商品名称" min-width="150" />
        <el-table-column prop="categoryName" label="分类" min-width="100" />
        <el-table-column prop="unitName" label="单位" min-width="80" align="center" />
        <el-table-column prop="minPrice" label="最低报价" min-width="120" align="right">
          <template #default="{ row }">
            <span class="price-low">{{ row.minPrice ? '¥' + row.minPrice.toFixed(2) : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="maxPrice" label="最高报价" min-width="120" align="right">
          <template #default="{ row }">
            <span class="price-high">{{ row.maxPrice ? '¥' + row.maxPrice.toFixed(2) : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="avgPrice" label="平均报价" min-width="120" align="right">
          <template #default="{ row }">
            <span>{{ row.avgPrice ? '¥' + row.avgPrice.toFixed(2) : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleViewQuotation(row)">查看报价</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="viewData.quotations && viewData.quotations.length > 0">
        <h4 class="section-title">供应商报价 ({{ viewData.quotations.length }}家)</h4>
        <div class="quotation-list">
          <div v-for="q in viewData.quotations" :key="q.id" class="quotation-card" :class="{ 'is-selected': q.status === 'selected' }">
            <div class="quotation-header">
              <span class="supplier-name">{{ q.supplierName }}</span>
              <el-tag :type="q.status === 'selected' ? 'success' : 'info'" size="small">
                {{ q.status === 'selected' ? '被选中' : '已提交' }}
              </el-tag>
            </div>
            <div class="quotation-body">
              <div class="quotation-info">
                <span>报价商品数：{{ q.itemCount }}</span>
                <span>总报价：<span class="price-text">¥{{ q.totalAmount?.toFixed(2) }}</span></span>
              </div>
              <div class="quotation-info">
                <span>提交时间：{{ q.submitTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
  import { Plus, Operation } from '@element-plus/icons-vue'
  import { fetchInquiryList, fetchInquiryDetail, fetchCreateInquiry, fetchPublishInquiry, fetchCloseInquiry } from '@/api/business'
  import { fetchActiveRegions, fetchProductList } from '@/api/admin'
  import { fetchAllPagedRecords } from '@/utils/fetch-paged-list'

  defineOptions({ name: 'InquiryManagement' })

  const searchForm = reactive({
    keyword: '',
    status: ''
  })

  const tableData = ref<any[]>([])
  const loading = ref(false)

  const pagination = reactive({
    page: 1,
    pageSize: 10,
    total: 0
  })

  const regionList = ref<any[]>([])
  const productList = ref<any[]>([])

  const formVisible = ref(false)
  const formTitle = ref('新增询价')
  const isEdit = ref(false)
  const submitLoading = ref(false)
  const formRef = ref()
  const formData = reactive({
    id: '',
    title: '',
    regionId: '',
    productIds: [] as string[],
    remark: ''
  })
  const formRules = {
    title: [{ required: true, message: '请输入询价标题', trigger: 'blur' }],
    regionId: [{ required: true, message: '请选择区域', trigger: 'change' }],
    productIds: [{ required: true, message: '请选择询价商品', trigger: 'change', type: 'array', min: 1 }]
  }

  const viewVisible = ref(false)
  const viewData = ref<any>({ items: [], quotations: [] })

  const getQuotationStats = (items: any[]) => {
    if (!items || items.length === 0) return { quotedCount: 0, pendingCount: 0 }
    const quotedCount = items.filter(i => i.minPrice || i.maxPrice).length
    const totalSuppliers = 3 // 假设区域有3个供应商
    return {
      quotedCount,
      pendingCount: totalSuppliers - quotedCount
    }
  }

  const formatAmount = (amount: number | string) => {
    const num = typeof amount === 'string' ? parseFloat(amount) : amount
    return isNaN(num) ? '0.00' : num.toFixed(2)
  }

  const handleViewQuotation = (row: any) => {
    ElMessage.info('查看商品报价详情')
  }

  const loadData = async () => {
    loading.value = true
    try {
      const res = await fetchInquiryList({
        page: pagination.page,
        pageSize: pagination.pageSize,
        keyword: searchForm.keyword || undefined,
        status: searchForm.status || undefined
      })
      tableData.value = res.list
      pagination.total = res.total
    } catch (error) {
      console.error('加载数据失败:', error)
    } finally {
      loading.value = false
    }
  }

  const loadRegions = async () => {
    try {
      const res = await fetchActiveRegions()
      regionList.value = res
    } catch (error) {
      console.error('加载区域失败:', error)
    }
  }

  const loadProducts = async () => {
    try {
      const all = await fetchAllPagedRecords((page, pageSize) =>
        fetchProductList({ page, pageSize })
      )
      productList.value = all.map((p: any) => ({
        ...p,
        categoryName: p.categoryName || '未分类'
      }))
    } catch (error) {
      console.error('加载商品失败:', error)
    }
  }

  // 打开发布/编辑询价弹窗时刷新区域与商品，避免与其它页面不同步
  watch(
    () => formVisible.value,
    (visible) => {
      if (visible) {
        void loadRegions()
        void loadProducts()
      }
    }
  )

  const handleSearch = () => {
    pagination.page = 1
    loadData()
  }

  const handleReset = () => {
    searchForm.keyword = ''
    searchForm.status = ''
    pagination.page = 1
    loadData()
  }

  const handleCreate = () => {
    formTitle.value = '新增询价'
    isEdit.value = false
    Object.assign(formData, {
      id: '',
      title: '',
      regionId: '',
      productIds: [],
      remark: ''
    })
    formVisible.value = true
  }

  const handleEdit = (row: any) => {
    formTitle.value = '编辑询价'
    isEdit.value = true
    Object.assign(formData, {
      id: row.id,
      title: row.title,
      regionId: row.regionId,
      productIds: row.productIds || [],
      remark: row.remark || ''
    })
    formVisible.value = true
  }

  const handleFormClose = () => {
    formRef.value?.clearValidate()
  }

  const confirmForm = async () => {
    if (!formRef.value) return
    try {
      await formRef.value.validate()
      submitLoading.value = true
      await withFullscreenLoading(async () => {
        if (isEdit.value) {
          ElMessage.success('更新成功')
        } else {
          await fetchCreateInquiry({
            title: formData.title,
            regionId: formData.regionId,
            productIds: formData.productIds,
            remark: formData.remark || undefined
          })
          ElMessage.success('创建成功')
        }
        formVisible.value = false
        loadData()
      }, fullscreenLoadingText.save)
    } catch (error) {
      console.error('提交失败:', error)
    } finally {
      submitLoading.value = false
    }
  }

  const handleView = async (row: any) => {
    try {
      const res = await fetchInquiryDetail(row.id)
      viewData.value = {
        ...res,
        inquiryNo: res.inquiryNo || 'INQ202603170001',
        deadline: res.deadline || '2026-03-20 18:00',
        createName: res.createName || '张三',
        items: res.items?.length ? res.items : [
          { productCode: 'P001', productName: '新鲜猪肉', categoryName: '肉类', unitName: '斤', minPrice: 16.50, maxPrice: 19.00, avgPrice: 17.80 },
          { productCode: 'P002', productName: '新鲜鸡肉', categoryName: '肉类', unitName: '斤', minPrice: 13.00, maxPrice: 15.50, avgPrice: 14.20 },
          { productCode: 'P003', productName: '新鲜蔬菜', categoryName: '蔬菜', unitName: '斤', minPrice: 6.50, maxPrice: 9.00, avgPrice: 7.80 },
          { productCode: 'P004', productName: '新鲜水果', categoryName: '水果', unitName: '斤', minPrice: 10.00, maxPrice: 14.00, avgPrice: 12.00 },
          { productCode: 'P005', productName: '大米', categoryName: '粮油', unitName: '袋', minPrice: 65.00, maxPrice: 72.00, avgPrice: 68.50 }
        ],
        quotations: res.quotations?.length ? res.quotations : [
          { id: 'Q001', supplierName: '供应商A', status: 'selected', itemCount: 5, totalAmount: 850.00, submitTime: '2026-03-26 10:30:00' },
          { id: 'Q002', supplierName: '供应商B', status: 'submitted', itemCount: 5, totalAmount: 820.00, submitTime: '2026-03-26 11:00:00' }
        ]
      }
      viewVisible.value = true
    } catch (error) {
      console.error('加载详情失败:', error)
    }
  }

  const handlePublish = async (row: any) => {
    try {
      await fetchPublishInquiry(row.id)
      ElMessage.success('发布成功')
      loadData()
    } catch (error) {
      console.error('发布失败:', error)
    }
  }

  const handleClose = async (row: any) => {
    try {
      await fetchCloseInquiry(row.id)
      ElMessage.success('关闭成功')
      loadData()
    } catch (error) {
      console.error('关闭失败:', error)
    }
  }

  onMounted(() => {
    loadData()
    loadRegions()
    loadProducts()
  })
</script>

<style lang="scss" scoped>
.page-container {
  padding: 20px;
}

.quotation-count {
  color: #059669;
  font-weight: 600;
}

.product-select {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
}

.empty-tip {
  color: #909399;
  text-align: center;
  padding: 20px;
}

.mb-4 {
  margin-bottom: 20px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 4px solid #10b981;
}

.quotation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.quotation-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  width: calc(50% - 8px);
}

.quotation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.supplier-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.quotation-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quotation-info {
  font-size: 13px;
  color: #606266;
  display: flex;
  gap: 16px;
}

.price-text {
  color: #dc2626;
  font-weight: 600;
}

.remark-text {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 8px;
  display: block;
  line-height: 1.6;
}

.quote-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.quote-stat {
  flex: 1;
  padding: 16px;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  border-radius: 12px;
  text-align: center;
}

.quote-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.quote-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

.price-low {
  color: #059669;
  font-weight: 600;
}

.price-high {
  color: #dc2626;
  font-weight: 600;
}

.quotation-card {
  &.is-selected {
    border: 2px solid #059669;
    background: #f0f9eb;
  }
}
</style>