修改配置

p-honggang.li

2025-09-03 9577bfd83282afad65a758321eec7186a10222f9

 src/views/tradeManage/evaluate/index.vue

@@ -142,6 +142,8 @@
        </el-table>
      </div>

      <!-- 移除原来的表格底部信息，因为已经移到表格最后一行 -->

       <!-- 交易文件（移动到订单详情下面，同一卡片内） -->
       <div class="file-section" v-if="fileList.length > 0">
         <el-table
@@ -168,103 +170,189 @@
               {{ formatFileSize(row.size) }}
             </template>
           </el-table-column>
           <el-table-column label="操作" width="100">
           <el-table-column label="操作" width="180">
             <template #default="{ row }">
               <el-button
                 type="text"
                 size="small"
                 class="preview-btn"
                 @click="handlePreview(row)"
               >
                 预览
               </el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>

       <!-- 交易信息备注（移动到交易文件下面，同一卡片内） -->
       <div class="remark-section" v-if="remarkItems.length > 0">
         <el-table
           :data="remarkItems"
           border
           class="remark-table"
           :header-cell-style="remarkTableHeaderStyle"
           :cell-style="remarkTableCellStyle"
         >
           <el-table-column min-width="200">
             <template #header>
               <el-icon class="header-icon"><Document /></el-icon>
               <span>交易信息备注</span>
             </template>
             <template #default="{ row }">
               <div class="remark-name">
                 <span>{{ row.name }}</span>
               <div class="file-actions">
                 <el-button
                   type="text"
                   size="small"
                   class="preview-btn"
                   @click="handlePreview(row)"
                   v-if="isPreviewable(row)"
                   :disabled="!isFileUploaded(row)"
                 >
                   预览
                 </el-button>
                 <el-button
                   type="text"
                   size="small"
                   class="download-btn"
                   @click="handleDownload(row)"
                   :disabled="!isFileUploaded(row)"
                 >
                   下载
                 </el-button>
               </div>
             </template>
           </el-table-column>
           <el-table-column label="授权开始时间" width="200">
             <template #default="{ row }">
               <div class="remark-date">{{ row.start }}</div>
             </template>
           </el-table-column>
           <el-table-column label="授权结束时间" width="200">
             <template #default="{ row }">
               <div class="remark-date">
                 {{ row.forever ? '永久' : row.end }}
               </div>
             </template>
           </el-table-column>
           <el-table-column label="备注" min-width="300">
             <template #default="{ row }">
               <div class="remark-content">{{ row.remark }}</div>
             </template>
           </el-table-column>
         </el-table>
       </div>
     </el-card>

     <!-- 交易评价 -->
     <!-- 交易信息备注 -->
    <el-card class="mt15" shadow="never">
      <div class="title">交易评价</div>
      <el-form :model="form" label-width="120px" class="mt10" :rules="rules" ref="formRef">
        <el-form-item label="综合评分" prop="score">
          <el-rate v-model="form.score" />
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入评价内容" />
        </el-form-item>
      </el-form>
      <div class="action-buttons">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="submit">提交评价</el-button>
      </div>
    </el-card>
  </div>
</template>
      <div class="title">交易信息备注</div>
      <el-table :data="form.items" border class="mt10 remark-table">
        <el-table-column label="详情" prop="name" min-width="200" />
                 <el-table-column label="授权开始时间" width="200">
           <template #default="{ row, $index }">
             <span>{{ form.items[$index].start || '-' }}</span>
           </template>
         </el-table-column>
         <el-table-column label="授权结束时间" width="200">
           <template #default="{ row, $index }">
             <div class="end-time-wrapper">
               <span v-if="form.items[$index].forever" class="forever-text">永久</span>
               <span v-else>{{ form.items[$index].end || '-' }}</span>
             </div>
           </template>
         </el-table-column>
         <el-table-column label="备注" min-width="300">
           <template #default="{ row, $index }">
             <span>{{ form.items[$index].remark || '-' }}</span>
           </template>
         </el-table-column>
             </el-table>
     </el-card>

     <!-- 交易评价 -->
     <el-card class="mt15" shadow="never">
       <div class="title">交易评价</div>
       <div class="evaluation-content">
         <div class="evaluation-form">
                       <!-- 评分部分 -->
            <div class="rating-section">
              <div class="rating-items">
                <div class="rating-row">
                  <div class="rating-item">
                    <label class="required">综合评分:</label>
                    <el-rate
                      v-model="evaluationForm.overallRating"
                      :max="5"
                      :texts="['很差', '较差', '一般', '较好', '很好']"
                      show-text
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    />
                  </div>
                  <div class="rating-item">
                    <label class="required">服务评分:</label>
                    <el-rate
                      v-model="evaluationForm.serviceRating"
                      :max="5"
                      :texts="['很差', '较差', '一般', '较好', '很好']"
                      show-text
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    />
                  </div>
                </div>
                <div class="rating-row">
                  <div class="rating-item">
                    <label class="required">质量评分:</label>
                    <el-rate
                      v-model="evaluationForm.qualityRating"
                      :max="5"
                      :texts="['很差', '较差', '一般', '较好', '很好']"
                      show-text
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    />
                  </div>
                  <div class="rating-item">
                    <label class="required">速度评分:</label>
                    <el-rate
                      v-model="evaluationForm.speedRating"
                      :max="5"
                      :texts="['很差', '较差', '一般', '较好', '很好']"
                      show-text
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    />
                  </div>
                </div>
              </div>
            </div>
           
                       <!-- 评价内容 -->
            <div class="form-item">
              <label class="required">评价内容:</label>
              <el-input
                v-model="evaluationForm.content"
                type="textarea"
                :rows="4"
                placeholder="请输入评价内容"
                maxlength="500"
                show-word-limit
              />
            </div>
            
            <!-- 匿名发布选项 -->
            <div class="form-item">
              <label></label>
              <div class="anonymous-option">
                <el-checkbox v-model="evaluationForm.isAnonymous">
                  匿名发布评价
                </el-checkbox>
                <div class="anonymous-tip">
                  <el-icon><InfoFilled /></el-icon>
                  <span>选择匿名发布后，您的姓名将不会在评价中显示</span>
                </div>
              </div>
            </div>
         </div>
         <div class="evaluation-actions">
           <el-button @click="goBack">返回</el-button>
           <el-button 
             type="primary" 
             @click="handleSubmitEvaluation"
             :loading="evaluationLoading"
           >
             提交评价
           </el-button>
         </div>
       </div>
     </el-card>
   </div>
 </template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed, type CSSProperties } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Document, User, Goods, List } from '@element-plus/icons-vue'
import { fetchOrderDetail, submitEvaluate } from '@/api/tradeManage'
import { ElMessage, FormInstance } from 'element-plus'
import { Document, User, Goods, List, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import orderApi from '@/api/orderApi'
import { useUserInfo } from '@/stores/modules/userInfo'
import createAxios from '@/utils/axios'

const route = useRoute()
const router = useRouter()
const userStore = useUserInfo()
const detail = reactive<any>({ items: [] })
const formRef = ref<FormInstance>()
const form = reactive({ score: 0, content: '' })
const form = reactive<any>({ items: [] })
const fileList = ref<any[]>([])
const remarkItems = ref<any[]>([])
const orderTableWrapRef = ref<HTMLElement | null>(null)
const labelStyle = { width: '180px', maxWidth: '180px' }
const contentStyle = { width: 'calc(50% - 180px)' }

const rules = {
  score: [{ required: true, message: '请评分', trigger: 'change' }],
  content: [{ required: true, message: '请输入评价内容', trigger: 'blur' }],
}
// 评价表单数据
const evaluationForm = reactive({
  content: '',
  overallRating: 0,    // 综合评分
  serviceRating: 0,    // 服务评分
  qualityRating: 0,    // 质量评分
  speedRating: 0,      // 速度评分
  isAnonymous: false   // 是否匿名发布
})

// 评价loading状态
const evaluationLoading = ref(false)

// 计算表格数据，添加汇总行
const tableData = computed(() => {
@@ -284,126 +372,169 @@
  return [...detail.items, summaryRow]
})

// 状态映射（后端中文 -> 前端枚举）
const statusServerToUi: Record<string, string> = {
  '待上传文件': 'WAIT_UPLOAD',
  '待授权': 'WAIT_AUTHORIZE',
  '待交易确认': 'WAIT_CONFIRM',
  '已完成': 'COMPLETED',
  '已评价': 'EVALUATED',
}

const formatDateTime = (val?: string) => (val ? val.replace('T', ' ').slice(0, 19) : '')

const normalizePriceType = (val?: string): 'points' | 'currency' | 'agreement' | 'free' => {
  if (!val) return 'currency'
  const s = String(val)
  if (/(积分|points)/i.test(s)) return 'points'
  if (/(协议|agreement)/i.test(s)) return 'agreement'
  if (/(免费|free)/i.test(s)) return 'free'
  return 'currency'
}

onMounted(async () => {
  // 使用前端模拟数据以便开发 UI（不改动后端服务）
  const mockDetail = {
    orderNo: '4348442557619205545',
    resourceTypeName: '软件产品',
    status: 'FINISH',
    statusName: '已完成',
    applyTime: '2025-05-21 10:00:00',
    unitName: '中交方远建设有限公司',
    userName: '张静',
    userAccount: 'L20159922',
    userDept: '信息中心',
    userPhone: '13800000000',
    productName: '中交方远智能实测实量管理系统',
    supplier: '中交方远科技有限公司',
    industry: '建筑工程',
    projectUnit: '土建工程',
    productType: '软件库',
    productDesc:
      '面向工程项目的质量实测实量数字化管理系统，支持标准化采集、自动统计与过程管控。',
    items: [
      {
        id: '1',
        name: '企业私有SaaS版许可',
        saleType: '买断',
        accountCount: 50,
        customerTarget: '企业',
        concurrentNodes: 50,
        pricePoint: 50000,
        priceCash: 0,
        quantity: 1,
        period: 0,
      },
      {
        id: '2',
        name: '企业私有SaaS版OTA升级服务',
        saleType: 'OTA服务',
        accountCount: 50,
        customerTarget: '企业',
        concurrentNodes: 50,
        pricePoint: 0,
        priceCash: 7500,
        quantity: 1,
        period: 1,
      },
      {
        id: '3',
        name: '企业私有SaaS版用户增量包',
        saleType: '私有增量包',
        accountCount: 100,
        customerTarget: '企业',
        concurrentNodes: 100,
        pricePoint: 0,
        priceCash: 0,
        priceProtocol: true,
        quantity: 1,
        period: 1,
      },
      {
        id: '4',
        name: '个人公有SaaS版许可',
        saleType: '私有增量包',
        accountCount: 50,
        customerTarget: '个人',
        concurrentNodes: 50,
        pricePoint: 0,
        priceCash: 0,
        quantity: 1,
        period: 0,
      },
    ],
    pointTotal: '50,000',
    cashTotal: '7,500',
  }

  Object.assign(detail, mockDetail)
  const orderId = String(route.params.id || '')
  if (!orderId) return
  
  // 添加模拟文件数据用于展示
  fileList.value = [
    {
      name: '签字盖章文件.pdf',
      size: 2621440, // 2.5MB
      uid: '1',
      status: 'success'
    },
    {
      name: 'API Keys.txt',
      size: 354, // 354 Bytes
      uid: '2',
      status: 'success'
  try {
    const res = (await orderApi.getOrderDetail(orderId)) as any
    const data = res?.data || {}

    const statusName: string = data.orderStatus || ''
    const uiStatus = statusServerToUi[statusName] || 'INFO'

    // 映射订单详情头部信息
    const head = {
      orderNo: data.orderId,
      resourceTypeName: '软件产品',
      status: uiStatus,
      statusName,
      applyTime: formatDateTime(data.applyTime),
      unitName: data.unitName || '-',
      userName: data.userName || '-',
      userAccount: data.userAccount || '-',
      userDept: data.userDept || '-',
      userPhone: data.userPhone || '-',
      productName: data.productName || '-',
      supplier: data.providerName || '-',
      industry: data.industry || '-',
      projectUnit: data.projectUnit || '-',
      productType: data.productType || '-',
      productDesc: data.productDesc || '-',
    }
  ]

  // 添加模拟交易信息备注数据
  remarkItems.value = (detail.items || []).map((item: any, index: number) => ({ 
    name: item.name,
    start: '2025-06-01', 
    end: index === 0 || index === 3 ? '' : '2025-06-01', 
    forever: index === 0 || index === 3, 
    remark: index === 3 ? '开通管理员账号1个,账号admin' : '开通管理员账号1个,账号admin,登录管理员账号可管理普通用户' 
  }))
  
  // 注释掉原有的API调用，使用模拟数据
  // const { data } = (await fetchOrderDetail({ id: route.params.id })) as any
  // Object.assign(detail, data || {})
    // 明细项映射
    const items: any[] = Array.isArray(data.orderDetails)
      ? data.orderDetails.map((d: any, idx: number) => {
          const pt = normalizePriceType(d.priceType)
          return {
            id: String(d.id ?? idx + 1),
            name: d.suiteName,
            saleType: d.salesForm,
            accountCount: d.accountLimit,
            customerTarget: d.customerType,
            concurrentNodes: d.concurrentNodes,
            pricePoint: pt === 'points' ? Number(d.unitPrice || 0) : 0,
            priceCash: pt === 'currency' ? Number(d.unitPrice || 0) : 0,
            priceProtocol: pt === 'agreement',
            quantity: Number(d.quantity || 0),
            period: Number(d.duration || 0),
            remarks: d.remarks || '', // 新增 remarks 字段
          }
        })
      : []

    // 汇总（简单相加：单价*数量）
    const pointTotalNum = items.reduce((sum, it) => sum + Number(it.pricePoint || 0) * Number(it.quantity || 0), 0)
    const cashTotalNum = items.reduce((sum, it) => sum + Number(it.priceCash || 0) * Number(it.quantity || 0), 0)

    Object.assign(detail, head, {
      items,
      pointTotal: pointTotalNum.toLocaleString(),
      cashTotal: cashTotalNum.toLocaleString(),
    })

    // 初始化表单数据
    form.items = (detail.items || []).map((item: any, index: number) => {
      // 计算授权结束时间
      let endDate = ''
      if (item.period > 0) {
        // 如果有期限，计算结束时间
        const startDate = new Date(data.applyTime || new Date())
        const endDateObj = new Date(startDate)
        endDateObj.setFullYear(endDateObj.getFullYear() + item.period)
        endDate = endDateObj.toISOString().split('T')[0] // 格式化为 YYYY-MM-DD
      }
      
      return { 
        name: item.name,
        start: data.applyTime ? data.applyTime.split('T')[0] : '', // 使用订单申请时间
        end: endDate, 
        forever: item.period === 0, // 期限为0时设置为永久
        remark: item.remarks || '' // 使用套件信息中的remarks字段
      }
    })

    // 获取订单附件列表（如果有的话）
    if (data.attachments && Array.isArray(data.attachments)) {
      fileList.value = data.attachments.map((file: any) => ({
        name: file.fileName || file.originalName,
        size: file.fileSize || 0,
        uid: file.id,
        status: 'success',
        url: file.fileUrl,
        uploaded: true
      }))
    } else {
      fileList.value = []
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
  }
})

const goBack = () => router.back()
const submit = async () => {
  await formRef.value?.validate()
  
  // 模拟提交成功响应
  const mockResponse = { code: 200 }
  
  // 注释掉原有的API调用，使用模拟数据
  // const { code } = (await submitEvaluate({ id: route.params.id, ...form })) as any
  
  if (mockResponse.code === 200) {
    ElMessage.success('提交成功')
    router.back()
  try {
    const orderId = String(route.params.id || '')
    const userId = userStore.getUserId ? Number(userStore.getUserId) : undefined
    
    if (!orderId || !userId) {
      ElMessage.error('订单ID或用户ID不能为空')
      return
    }

    // 确认操作
    await ElMessageBox.confirm('确定要确认交易并提交审批吗？', '确认操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 调用更新订单详情API，将状态更新为"已评价"
    const updateData = {
      orderId: orderId,
      orderStatus: '已评价', // 更新为已评价状态
      orderDetails: detail.items.map((item: any) => ({
        id: item.id,
        remarks: item.remarks || '' // 使用套件信息中的remarks字段
      }))
    }

    const res = (await orderApi.updateOrderDetail(updateData)) as any
    
    if (res?.code === 200) {
      ElMessage.success('交易确认成功，已提交审批')
      router.back()
    } else {
      ElMessage.error(res?.msg || '交易确认失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('交易确认失败:', error)
      ElMessage.error('交易确认失败')
    }
  }
}

@@ -481,15 +612,6 @@
// 文件列表表格表体文字大小
const fileTableCellStyle: CSSProperties = { fontSize: '12px' }

// 交易信息备注表格表头文字居中，但第一列的"交易信息备注"文字靠左对齐
const remarkTableHeaderStyle: CSSProperties = { 
  textAlign: 'center',
  fontSize: '14px',
  background: '#f3f6fb'
}
// 交易信息备注表格表体文字大小
const remarkTableCellStyle: CSSProperties = { fontSize: '12px' }

// 文件大小格式化
const formatFileSize = (size: number) => {
  if (!size || size === 0) return '0 Bytes';
@@ -499,10 +621,265 @@
  return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 文件预览处理
const handlePreview = (file: any) => {
  ElMessage.info(`预览文件：${file.name}`)
// 判断文件是否可预览
const isPreviewable = (file: any) => {
  // 首先检查MIME类型
  const previewableTypes = [
    'image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp',
    'text/plain', 'text/html', 'text/css', 'text/javascript',
    'application/pdf',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
    'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
  ]
  
  // 如果MIME类型匹配，直接返回true
  if (previewableTypes.includes(file.type || '')) {
    return true
  }
  
  // 如果MIME类型为空或不匹配，根据文件扩展名判断
  const fileName = file.name || ''
  const fileExtension = fileName.toLowerCase().split('.').pop()
  
  const previewableExtensions = [
    'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp',
    'txt', 'html', 'htm', 'css', 'js',
    'pdf',
    'docx', 'xlsx', 'pptx'
  ]
  
  return previewableExtensions.includes(fileExtension)
}

// 判断文件是否已上传成功
const isFileUploaded = (file: any) => {
  // 文件有url且状态为success表示已上传成功
  return file.url && (file.status === 'success' || file.uploaded)
}

// 文件预览
const handlePreview = async (file: any) => {
  if (!file.url) {
    ElMessage.warning('文件链接不存在')
    return
  }
  
  // 获取文件扩展名
  const fileName = file.name || ''
  const fileExtension = fileName.toLowerCase().split('.').pop()
  
  let previewUrl = file.url
  
  // 如果文件存储在MinIO，优先使用预览URL
  if (file.url.includes('order-attachments')) {
    try {
      // 首先尝试获取预览URL
      const previewResponse = await createAxios({
        url: `/admin/file/preview`,
        method: 'GET',
        params: {
          fileName: file.url
        }
      })
      
      console.log('预览URL响应:', previewResponse)
      
      // 检查响应格式
      const responseData = previewResponse as any
      if (responseData && responseData.code === 200 && responseData.data) {
        previewUrl = responseData.data
        console.log('使用预览URL:', previewUrl)
      } else {
        console.log('预览URL获取失败，使用下载方式')
        // 如果预览URL获取失败，回退到下载方式
        const response = await createAxios({
          url: `/admin/file/download`,
          method: 'GET',
          responseType: 'blob',
          params: {
            fileName: file.url,
            originalName: file.name
          }
        })
        
        // 创建预览URL
        const blob = new Blob([response as any])
        previewUrl = window.URL.createObjectURL(blob)
        console.log('使用Blob URL:', previewUrl)
      }
    } catch (error) {
      console.error('获取文件失败:', error)
      ElMessage.error('获取文件失败，无法预览')
      return
    }
  }
  
  // 图片文件直接在新窗口打开
  if ((file.type && file.type.startsWith('image/')) || 
      ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExtension)) {
    console.log('预览图片文件:', previewUrl)
    window.open(previewUrl, '_blank')
    return
  }
  
  // PDF文件在新窗口打开
  if (file.type === 'application/pdf' || fileExtension === 'pdf') {
    console.log('预览PDF文件:', previewUrl)
    window.open(previewUrl, '_blank')
    return
  }
  
  // 文本文件在新窗口打开
  if ((file.type && file.type.startsWith('text/')) || 
      ['txt', 'html', 'htm', 'css', 'js'].includes(fileExtension)) {
    console.log('预览文本文件:', previewUrl)
    window.open(previewUrl, '_blank')
    return
  }
  
  // Office文档和其他文件类型，尝试在新窗口打开
  try {
    console.log('预览其他文件:', previewUrl)
    window.open(previewUrl, '_blank')
  } catch (error) {
    console.error('预览失败:', error)
    ElMessage.error('预览失败，请下载后查看')
  }
}

// 文件下载
const handleDownload = async (file: any) => {
  if (!file.url) {
    ElMessage.warning('文件链接不存在')
    return
  }
  
  console.log('开始下载文件:', file.name, 'URL:', file.url)
  
  try {
    // 如果文件存储在MinIO，使用后端直接下载API
    if (file.url.includes('order-attachments')) {
      console.log('使用MinIO下载API')
      
      // 使用axios通过代理访问后端API
      const response = await createAxios({
        url: `/admin/file/download`,
        method: 'GET',
        responseType: 'blob',
        params: {
          fileName: file.url,
          originalName: file.name
        }
      })
      
      console.log('下载响应:', response)
      
      // 创建下载链接
      const blob = new Blob([response as any])
      const downloadUrl = window.URL.createObjectURL(blob)
      
      console.log('创建下载链接:', downloadUrl)
      
      const link = document.createElement('a')
      link.href = downloadUrl
      link.download = file.name || 'download'
      link.target = '_blank'
      link.rel = 'noopener noreferrer'
      
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      
      // 清理URL对象
      window.URL.revokeObjectURL(downloadUrl)
      
      ElMessage.success('文件下载成功')
    } else {
      console.log('使用直接URL下载')
      // 其他情况直接使用原URL
      const link = document.createElement('a')
      link.href = file.url
      link.download = file.name || 'download'
      link.target = '_blank'
      link.rel = 'noopener noreferrer'
      
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      
      ElMessage.success('开始下载文件')
    }
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败，请重试')
  }
}

// 提交评价处理
const handleSubmitEvaluation = async () => {
  // 验证评分是否已填写
  if (!evaluationForm.overallRating || !evaluationForm.serviceRating || 
      !evaluationForm.qualityRating || !evaluationForm.speedRating) {
    ElMessage.warning('请完成所有评分项目')
    return
  }
  
  if (!evaluationForm.content.trim()) {
    ElMessage.warning('请输入评价内容')
    return
  }

  try {
    evaluationLoading.value = true
    await ElMessageBox.confirm('确定要提交评价吗？', '确认操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const orderId = String(route.params.id || '')
    const userId = userStore.getUserId ? Number(userStore.getUserId) : undefined
    const content = evaluationForm.content.trim()

    if (!orderId || !userId) {
      ElMessage.error('订单ID或用户ID不能为空')
      evaluationLoading.value = false
      return
    }

    // 调用提交评价API
    const result = await orderApi.submitEvaluation({
      orderId: orderId,
      evaluationContent: content,
      evaluatorId: userId,
      evaluatorName: evaluationForm.isAnonymous ? '匿名用户' : (userStore.getUserDetail || '管理员'),
      overallRating: evaluationForm.overallRating,
      serviceRating: evaluationForm.serviceRating,
      qualityRating: evaluationForm.qualityRating,
      speedRating: evaluationForm.speedRating,
      isAnonymous: evaluationForm.isAnonymous
    })

    if (result && result.code === 200) {
      // 更新订单评价状态为已评价
      await orderApi.updateOrderStatusToIsEvaluate(orderId)
      ElMessage.success('评价提交成功')
      router.back()    
      evaluationLoading.value = false
    } else {
      ElMessage.error(result?.msg || '评价提交失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('评价提交失败:', error)
      ElMessage.error('评价提交失败')
    }
  } finally {
    evaluationLoading.value = false
  }
}


// 症结与修复说明：
// 1) Element Plus 的 el-table 子列 width 百分比是相对于表格容器的像素宽度计算，但只有在表格容器有明确宽度时才生效。
@@ -706,36 +1083,152 @@
  text-align: left !important;
}

/* 交易信息备注表格样式 */
.remark-section {
  margin-top: 15px;
  .remark-table {
    width: 100%;
    .remark-name {
      font-weight: 500;
/* 文件操作按钮样式 */
.file-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  
  .preview-btn {
    color: #409eff;
    &:hover {
      text-decoration: underline;
    }
    .remark-date {
      color: #606266;
    &:disabled {
      color: #c0c4cc;
      cursor: not-allowed;
    }
    .remark-content {
      color: #606266;
      line-height: 1.4;
  }
  
  .download-btn {
    color: #67c23a;
    &:hover {
      text-decoration: underline;
    }
    &:disabled {
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
}

/* 交易信息备注表格表头第一列"交易信息备注"文字靠左对齐 */
.remark-table :deep(.el-table__header-wrapper thead tr th:first-child) {
  text-align: left !important;
/* 交易信息备注表格样式 */
.remark-table {
  width: 100%;
  .end-time-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    .forever-text {
      color: #409eff;
      font-weight: 500;
    }
  }
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  .el-button {
    margin-left: 10px;
/* 交易评价样式 */
.evaluation-content {
  .evaluation-form {
    /* 评分部分样式 */
    .rating-section {
      margin-bottom: 30px;
      
      .rating-title {
        font-weight: 600;
        margin-bottom: 15px;
        color: #303133;
      }
      
             .rating-items {
         display: flex;
         flex-direction: column;
         gap: 20px;
         
         .rating-row {
           display: flex;
           gap: 40px;
           
           .rating-item {
             flex: 1;
             display: flex;
             align-items: center;
             
             label {
               width: 100px;
               line-height: 32px;
               margin-right: 15px;
               font-weight: 500;
               white-space: nowrap;
               
               &.required::before {
                 content: '*';
                 color: #f56c6c;
                 margin-right: 4px;
               }
             }
             
             .el-rate {
               flex: 1;
             }
           }
         }
       }
    }
    
    .form-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      
      label {
        width: 120px;
        line-height: 32px;
        margin-right: 10px;
        font-weight: 500;
        
        &.required::before {
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
      }
      
             .el-textarea {
         flex: 1;
       }
       
               /* 匿名选项样式 */
        .anonymous-option {
          display: flex;
          align-items: center;
          gap: 15px;
          
          .anonymous-tip {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #909399;
            font-size: 12px;
            
            .el-icon {
              color: #409eff;
              font-size: 14px;
            }
          }
        }
     }
   }
  
  .evaluation-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    
    .el-button {
      min-width: 100px;
    }
  }
}
</style>