art-design/src/views/crmpc/approval/auth_detil.vue

<template>
  <div class="stocking-show-page">
    <div class="header boxshadow">
      <div class="header-left">
        <div class="title">合塑实业·汽车事业部-备货单(客户下定)</div>
        <div class="sub">
          <span class="mr40">备货单编号：{{ header.order_no }}</span>
          <span>业务员：{{ header.salesman }}</span>
        </div>
      </div>
      <!-- <ElButton type="primary" plain @click="printCurrent">打印整单</ElButton> -->
    </div>

    <!-- 基础信息 -->
    <div class="boxshadow">
      <div class="form-title"><span class="border"></span><span class="title">基础信息</span></div>
      <ElRow :gutter="12">
        <ElCol :span="5">
          <ElFormItem label="阿里订单号/PN号">
            <ElInput v-model="base.pn_no" disabled />
          </ElFormItem>
        </ElCol>
        <ElCol :span="4">
          <ElFormItem label="日期">
            <ElInput v-model="base.date" disabled />
          </ElFormItem>
        </ElCol>
        <ElCol :span="4">
          <ElFormItem label="清关目的国">
            <ElInput v-model="base.close_date" disabled />
          </ElFormItem>
        </ElCol>
        <ElCol :span="3">
          <ElFormItem label="客户来源">
            <ElInput v-model="base.channel" disabled />
          </ElFormItem>
        </ElCol>
        <ElCol :span="4">
          <ElFormItem label="客户名称">
            <ElInput v-model="base.customer_name" disabled />
          </ElFormItem>
        </ElCol>
        <ElCol :span="4">
          <ElFormItem label="客户所在国">
            <ElInput v-model="base.client_country" disabled />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </div>

    <!-- 订单详情 -->
    <div class="boxshadow">
      <div class="form-title"><span class="border"></span><span class="title">订单详情</span></div>
      <div class="items-wrap">
        <div class="item-row" v-for="(item, idx) in items" :key="idx">
          <ElRow :gutter="12">
            <ElCol :span="8">
              <ElFormItem label="车型" label-width="64px">
                <ElInput v-model="item.model" disabled />
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="颜色/外" label-width="72px">
                <ElInput v-model="item.color_out" disabled />
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="内饰" label-width="52px">
                <ElInput v-model="item.color_in" disabled />
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="改装" label-width="52px">
                <ElInput v-model="item.modify" disabled />
              </ElFormItem>
            </ElCol>
          </ElRow>

          <ElRow :gutter="12">
            <ElCol :span="4">
              <ElFormItem label="单价" label-width="52px">
                <ElInput v-model="item.unit_price" disabled>
                  <template #append>{{ item.unit_price_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="总价" label-width="52px">
                <ElInput v-model="item.total_price" disabled>
                  <template #append>{{ item.total_price_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="改装费" label-width="60px">
                <ElInput v-model="item.modify_fee" disabled>
                  <template #append>{{ item.modify_fee_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="FOB段运费" label-width="84px">
                <ElInput v-model="item.fob_fee" disabled>
                  <template #append>{{ item.fob_fee_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="手续费" label-width="60px">
                <ElInput v-model="item.helper_fee" disabled>
                  <template #append>{{ item.helper_fee_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
            <ElCol :span="4">
              <ElFormItem label="港杂费" label-width="60px">
                <ElInput v-model="item.port_fee" disabled>
                  <template #append>{{ item.port_fee_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
          </ElRow>

          <ElRow :gutter="12">
            <ElCol :span="4">
              <ElFormItem label="里程" label-width="52px">
                <ElInput v-model="item.mileage" disabled />
              </ElFormItem>
            </ElCol>
            <template v-if="(item.mileage ?? 0) <= 0">
              <ElCol :span="4">
                <ElFormItem label="官方指导价" label-width="85px">
                  <ElInput v-model="item.guide_price" disabled>
                    <template #append>{{ item.guide_price_currency }}</template>
                  </ElInput>
                </ElFormItem>
              </ElCol>
              <ElCol :span="4">
                <ElFormItem label="优惠" label-width="52px">
                  <ElInput v-model="item.discount" disabled>
                    <template #append>{{ item.discount_currency }}</template>
                  </ElInput>
                </ElFormItem>
              </ElCol>
            </template>
            <template v-else>
              <ElCol :span="4">
                <ElFormItem label="挂牌价" label-width="55px">
                  <ElInput v-model="item.listing_price" disabled>
                    <template #append>{{ item.listing_price_currency }}</template>
                  </ElInput>
                </ElFormItem>
              </ElCol>
              <ElCol :span="4">
                <ElFormItem label="二手减价" label-width="72px">
                  <ElInput v-model="item.reduction_price" disabled>
                    <template #append>{{ item.reduction_price_currency }}</template>
                  </ElInput>
                </ElFormItem>
              </ElCol>
            </template>
            <ElCol :span="8">
              <ElFormItem label="利润" label-width="52px">
                <ElInput v-model="item.profit" disabled>
                  <template #append>{{ item.profit_currency }}</template>
                </ElInput>
              </ElFormItem>
            </ElCol>
            <ElCol :span="8">
              <ElFormItem label="车架号" label-width="70px">
                <ElInput v-model.number="item.vin" disabled />
              </ElFormItem>
            </ElCol>
          </ElRow>
        </div>

        <ElRow :gutter="12">
          <ElCol :span="5">
            <ElFormItem label="合计到岸价" label-width="85px">
              <ElInput v-model="base.total_cif" disabled>
                <template #append>{{ base.total_cif_currency }}</template>
              </ElInput>
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label="合同汇率" label-width="70px">
              <ElInput v-model="base.contract_rate" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </div>
    </div>

    <!-- 运输详情 -->
    <div class="boxshadow">
      <div class="form-title"><span class="border"></span><span class="title">运输详情</span></div>
      <ElRow :gutter="12">
        <ElCol :span="4"
          ><ElFormItem label="清关人"><ElInput v-model="ship.customs" disabled /></ElFormItem
        ></ElCol>
        <ElCol :span="4"
          ><ElFormItem label="预计发送日"><ElInput v-model="ship.plan" disabled /></ElFormItem
        ></ElCol>
        <ElCol :span="4"
          ><ElFormItem label="运输方式"><ElInput v-model="ship.method" disabled /></ElFormItem
        ></ElCol>
        <ElCol :span="4"
          ><ElFormItem label="国内收货港"
            ><ElInput v-model="ship.domestic_port" disabled /></ElFormItem
        ></ElCol>
        <ElCol :span="8"
          ><ElFormItem label="贸易条款/清关目的港"
            ><ElInput v-model="ship.terms" disabled /></ElFormItem
        ></ElCol>
      </ElRow>
      <ElRow :gutter="12">
        <ElCol :span="6"
          ><ElFormItem label="最迟到港时间"
            ><ElInput v-model="ship.latest_arrival" disabled /></ElFormItem
        ></ElCol>
      </ElRow>
    </div>

    <!-- 计划收款信息 -->
    <div class="boxshadow">
      <div class="form-title"
        ><span class="border"></span><span class="title">计划收款信息</span></div
      >
      <div v-for="(p, idx) in payments" :key="idx">
        <ElRow :gutter="12">
          <ElCol :span="4"
            ><ElFormItem label="汇款国"><ElInput v-model="p.remit_country" disabled /></ElFormItem
          ></ElCol>
          <ElCol :span="4"
            ><ElFormItem label="日期"><ElInput v-model="p.date" disabled /></ElFormItem
          ></ElCol>
          <ElCol :span="4"
            ><ElFormItem label="币种"><ElInput v-model="p.currency" disabled /></ElFormItem
          ></ElCol>
          <ElCol :span="4"
            ><ElFormItem label="账户"><ElInput v-model="p.account" disabled /></ElFormItem
          ></ElCol>
          <ElCol :span="4"
            ><ElFormItem label="汇款人"><ElInput v-model="p.payer" disabled /></ElFormItem
          ></ElCol>
          <ElCol :span="4"
            ><ElFormItem label="金额"><ElInput v-model="p.amount" disabled /></ElFormItem
          ></ElCol>
        </ElRow>
      </div>
    </div>
    <!-- 上传合同 -->
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">上传合同</span>
      </div>
      <div class="file-preview">
        <div v-if="contractFile" class="contract-file">
          <div v-if="isImageFile(contractFile)" class="image-preview">
            <img
              :src="contractFile.url"
              :alt="contractFile.name"
              class="preview-image"
              @click="previewImage(contractFile)"
            />
            <div class="file-info">
              <span class="file-name">{{ contractFile.name }}</span>
              <el-button type="text" size="small" @click="previewImage(contractFile)">
                预览
              </el-button>
            </div>
          </div>
          <div v-else class="document-preview">
            <div class="file-icon">
              <i class="iconfont-sys">&#xe814;</i>
            </div>
            <div class="file-info">
              <span class="file-name">{{ contractFile.name }}</span>
              <el-button type="primary" size="small" @click="downloadFile(contractFile)">
                下载
              </el-button>
            </div>
          </div>
        </div>
        <div v-else class="no-file">
          <i class="iconfont-sys">&#xe60c;</i>
          <span>暂无合同文件</span>
        </div>
      </div>
    </div>
    <div class="boxshadow">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">审批记录</span>
      </div>
      <div class="approval-timeline">
        <div v-for="(rec, idx) in approvalRecords" :key="idx" class="timeline-item">
          <div class="left">
            <div class="avatar-box">
              <span class="initial">{{ rec.name?.slice(0, 1) || '—' }}</span>
              <i v-if="rec.approved" class="status-dot iconfont-sys">&#xe621;</i>
              <i v-if="rec.rejected" class="status-dot rejected">&#xe83a;</i>
              <i v-else-if="rec.pending" class="status-dot pending iconfont-sys">&#xe839;</i>
            </div>
          </div>
          <div class="right">
            <div class="row name-role">
              <span class="name">{{ rec.name }}</span>
              <span class="role">（{{ rec.role || rec.type || '审批人' }}）</span>
            </div>
            <div class="row time">{{ rec.time }}</div>
          </div>
        </div>
        <div v-if="!approvalRecords.length" class="empty">暂无审批记录</div>
      </div>
    </div>
    <div class="boxshadow" v-if="status == 'pending'">
      <div class="form-title">
        <span class="border"></span>
        <span class="title">审批</span>
      </div>
      <div class="">
        <ElRow :gutter="12">
          <ElCol :span="12">
            <ElFormItem label="审批操作:">
              <el-select v-model="approvalAction" placeholder="请选择审批操作">
                <el-option
                  v-for="item in getDictItemSelectlist"
                  :key="item.item_value"
                  :label="item.item_label"
                  :value="item.item_value"
                />
              </el-select>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="备注：">
              <el-input
                v-model="approvalNotes"
                type="textarea"
                :rows="2"
                placeholder="请输入备注信息"
                class="approval-notes"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </div>
    </div>
    <div class="form-card" v-if="status == 'pending'">
      <!-- 底部信息 -->
      <div class="submit-wrap">
        <ElButton type="primary" size="large" class="submit-btn" @click="handleSubmit"
          >提交</ElButton
        >
      </div>
    </div>
    <!-- PDF 预览弹窗 -->
    <el-dialog
      v-model="pdf.visible"
      title="打印预览"
      width="80%"
      top="40px"
      :close-on-click-modal="false"
    >
      <div style="height: 70vh; display: flex; flex-direction: column; gap: 12px">
        <div style="display: flex; justify-content: flex-end; gap: 8px">
          <!-- <el-button type="primary" @click="print()">打印</el-button> -->
          <el-button @click="download">下载</el-button>
        </div>
        <iframe
          v-if="pdf.blobUrl || pdf.url"
          ref="frameRef"
          :src="pdf.blobUrl || pdf.url"
          style="flex: 1; width: 100%; border: 1px solid #eee; border-radius: 6px"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { CrmService } from '@/api/crmApi'
  import { commonService } from '@/api/commonApi'
  // import { manageService } from '@/api/adminApi'
  import { useRoute } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { usePdfPreview } from '@/composables/usePdfPreview'
  import { router } from '@/router'
  const { pdf, frameRef, download } = usePdfPreview()
  const route = useRoute()
  // const approval_id = route.query.id
  const status = route.query.status
  const stocking_id = route.query.biz_id
  const instance_id = route.query.instance_id
  const stockingInfo = ref<any>({})
  const approvalNotes = ref('')
  const approvalAction = ref('')
  const handleSubmit = async () => {
    try {
      // 这里调用审批API
      const { message } = await CrmService.stockapprovalpass({
        instance_id: instance_id,
        action: approvalAction.value,
        comment: approvalNotes.value
      })
      router.push('/crmpc/approval/stocking_auth')
      ElMessage.success(message)
    } catch {
      ElMessage.error('提交失败')
    }
  }
  // 回显视图模型，字段与模板一致
  const header = reactive({ order_no: '', salesman: '' })
  const base = reactive({
    pn_no: '',
    date: '',
    close_date: '',
    channel: '',
    customer_name: '',
    client_country: '',
    total_cif: '',
    total_cif_currency: '',
    contract_rate: ''
  })
  const items = ref<any[]>([])
  const ship = reactive({
    customs: '',
    plan: '',
    method: '',
    domestic_port: '',
    terms: '',
    latest_arrival: ''
  })
  const payments = ref<any[]>([])
  // 审批记录（先填充假数据展示）
  const approvalRecords = ref<any[]>([])
  const getDictItemSelectlist = ref<any[]>([])
  const getDictItemSelect = async () => {
    const res = await commonService.getDictItemSelect({ dict_id: '18' })
    getDictItemSelectlist.value = res
  }

  // 合同文件
  const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)

  const toMoneyView = (m: any) => ({
    amount: m?.amount ?? '',
    currency: m?.currency ?? ''
  })

  //获取详情并映射到回显模型
  const getdetilfn = async () => {
    const res = await CrmService.getStockDetail({ id: stocking_id })
    stockingInfo.value = res
    // 头部
    header.order_no = res?.order_no || res?.pi_no || ''
    header.salesman =
      res?.salesperson_snapshot || res?.salesman || res?.salesman_name || res?.user?.name || ''
    // 基础信息
    base.pn_no = res?.pi_no || ''
    base.date = res?.biz_date || ''
    base.close_date = res?.clearance_country_snapshot || ''
    base.channel = res?.customer_source_snapshot || res?.customer_source || ''
    base.customer_name = res?.customer_snapshot || res?.customer_name || ''
    base.client_country = res?.customer_country_snapshot || res?.customer_country || ''
    // 订单明细
    const list = Array.isArray(res?.veh_list) ? res.veh_list : []
    items.value = list.map((it: any) => {
      const unit = toMoneyView(it?.unit_price)
      const total = toMoneyView(it?.total_price)
      const guide = toMoneyView(it?.official_price)
      const discount = toMoneyView(it?.discount_price)
      const listing = toMoneyView(it?.listing_price)
      const reduction = toMoneyView(it?.reduction_price)
      const helper = toMoneyView(it?.handling_fee)
      const fob = toMoneyView(it?.fob_transport_fee)
      const port = toMoneyView(it?.port_misc_fee)
      const profit = toMoneyView(it?.profit)
      return {
        model: it?.model_snapshot || '',
        mileage: it?.mileage ?? 0,
        vin: it?.vin || '',
        color_out: it?.color_exterior_snapshot || '',
        color_in: it?.color_interior_snapshot || '',
        modify: (Array.isArray(it?.modify_list) ? it.modify_list : [])
          .map((m: any) => m?.option_name_snapshot)
          .filter(Boolean)
          .join('、'),
        modify_fee: it?.retrofit_fee?.amount ?? '',
        modify_fee_currency: it?.retrofit_fee?.currency ?? '',
        fob_fee: fob.amount,
        fob_fee_currency: fob.currency,
        unit_price: unit.amount,
        unit_price_currency: unit.currency,
        total_price: total.amount,
        total_price_currency: total.currency,
        guide_price: guide.amount,
        guide_price_currency: guide.currency,
        discount: discount.amount,
        discount_currency: discount.currency,
        listing_price: listing.amount,
        listing_price_currency: listing.currency,
        reduction_price: reduction.amount,
        reduction_price_currency: reduction.currency,
        helper_fee: helper.amount,
        helper_fee_currency: helper.currency,
        domestic_freight: it?.domestic_freight?.amount ?? '',
        domestic_freight_currency: it?.domestic_freight?.currency ?? '',
        port_fee: port.amount,
        port_fee_currency: port.currency,
        profit: profit.amount,
        profit_currency: profit.currency
      }
    })
    // 运输详情
    ship.customs = res?.declarant_name || ''
    ship.plan = res?.eta_ship_date || ''
    ship.method = res?.shipping_method_snapshot || ''
    ship.domestic_port = res?.domestic_port_snapshot || ''
    ship.terms =
      `${res?.trade_term_snapshot || ''} / ${res?.clearance_port_snapshot || ''}`.replace(
        /^\s*\/\s*$/,
        ''
      )
    ship.latest_arrival = res?.latest_arrival_date || ''
    // 合计与汇率
    base.total_cif = res?.cif_total_amount?.amount ?? ''
    base.total_cif_currency = res?.cif_total_amount?.currency || ''
    base.contract_rate = res?.contract_exchange_rate || res?.contract_rate || ''
    // 计划收款（全部展示）
    payments.value = (Array.isArray(res?.account_list) ? res.account_list : []).map((p: any) => ({
      remit_country: p?.remit_country_name_snapshot || '',
      date: p?.remit_date || '',
      currency: p?.currency_name_snapshot || p?.currency_code || '',
      account: p?.account_name_snapshot || '',
      payer: p?.remitter_name || '',
      amount: p?.amount ?? ''
    }))
    // 合同文件
    if (res?.contract) {
      contractFile.value = {
        name: '合同文件',
        url: res.contract_url || res.contract,
        file_name: res.contract
      }
    }
    // 审批记录（兼容多种字段）
    const resstockapprovallogs = await CrmService.stockapprovallogs({ instance_id: instance_id })
    console.log(resstockapprovallogs)
    const historyList = resstockapprovallogs
    if (historyList.length > 0) {
      approvalRecords.value = historyList.map((h: any) => ({
        name: h?.initiator_name ? h?.initiator_name : h?.name,
        role: h?.index == -1 ? '申请人' : '审批人',
        time: h?.finished_at || '',
        approved: h?.status === 'approved' || h?.status === 'submitted',
        rejected: h?.status === 'rejected',
        pending: h?.status != 'approved' && h?.status != 'rejected' && h?.status != 'submitted'
      }))
    }
  }
  // 判断是否为图片文件
  const isImageFile = (file: { name: string; url: string; file_name: string }) => {
    // 检查文件名
    if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
      return true
    }

    // 检查file_name字段
    if (file.file_name && file.file_name.startsWith('image/')) {
      return true
    }

    // 检查URL中的文件扩展名（去除查询参数）
    if (file.url) {
      const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
      if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
        return true
      }
    }

    return false
  }

  // 预览图片
  const previewImage = (file: { name: string; url: string; file_name: string }) => {
    // 创建图片预览弹窗
    const imagePreview = document.createElement('div')
    imagePreview.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      cursor: pointer;
    `

    const image = document.createElement('img')
    image.src = file.url
    image.alt = file.name
    image.style.cssText = `
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    `

    const closeBtn = document.createElement('div')
    closeBtn.innerHTML = '×'
    closeBtn.style.cssText = `
      position: absolute;
      top: 20px;
      right: 30px;
      color: white;
      font-size: 30px;
      cursor: pointer;
      z-index: 10000;
    `

    imagePreview.appendChild(image)
    imagePreview.appendChild(closeBtn)
    document.body.appendChild(imagePreview)

    // 点击关闭
    const closePreview = () => {
      document.body.removeChild(imagePreview)
    }

    imagePreview.addEventListener('click', closePreview)
    closeBtn.addEventListener('click', (e) => {
      e.stopPropagation()
      closePreview()
    })

    // ESC键关闭
    const handleKeydown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        closePreview()
        document.removeEventListener('keydown', handleKeydown)
      }
    }
    document.addEventListener('keydown', handleKeydown)
  }

  // 下载文件
  const downloadFile = (file: { name: string; url: string; file_name: string }) => {
    try {
      const link = document.createElement('a')
      link.href = file.url
      link.download = file.name
      link.target = '_blank'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    } catch (error) {
      console.error('下载失败:', error)
      ElMessage.error('下载失败，请稍后重试')
    }
  }

  onMounted(() => {
    getDictItemSelect()
    getdetilfn()
  })
</script>

<style scoped lang="scss">
  .stocking-show-page {
    min-height: 100vh;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 12px;
    color: #333333;
    .header-left {
      flex: 1;
      text-align: center;
    }
    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .sub {
      color: #333333;
    }
    .mr40 {
      margin-right: 40px;
    }
  }
  .form-title {
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
  }
  .form-title .title {
    margin-left: 6px;
  }
  .items-wrap {
    margin-top: 6px;
  }
  .item-row {
    padding: 8px 0;
  }
  :deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-text-color-regular);
  }

  .file-preview {
    padding: 20px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contract-file {
    width: 100%;
    max-width: 400px;
  }

  .image-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .preview-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .preview-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .document-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: #fafafa;
  }

  .file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #409eff;
    border-radius: 8px;
    color: white;
    font-size: 24px;
  }

  .file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .file-name {
    font-size: 14px;
    color: #333;
    word-break: break-all;
  }

  .no-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #999;
    font-size: 14px;
  }

  .no-file i {
    font-size: 48px;
    color: #ddd;
  }
  .submit-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
  }

  /* 审批记录 时间线 */
  .approval-timeline {
    padding: 8px 4px 8px 0;
  }
  .timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
  }
  .timeline-item + .timeline-item {
    margin-top: 50px;
  }
  .left {
    width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .avatar-box {
    width: 46px;
    height: 46px;
    background: #3d7bff;
    border-radius: 10px;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
  }
  .status-dot {
    position: absolute;
    right: -4px;
    bottom: -4px;
    // width: 14px;
    // height: 14px;
    font-size: 9px;
    padding: 3px 1px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  }
  .status-dot.pending {
    background: #3471ff;
    padding: 3px 3px;
  }
  .status-dot.rejected {
    background: #ff0000;
    padding: 3px 3px;
  }
  /* 连接下一个节点的虚线 */
  .timeline-item:not(:last-child) .left::after {
    content: '';
    position: absolute;
    top: 52px; /* avatar 46px + 间距 6px */
    left: 23px; /* 盒子宽度一半，确保竖线居中 */
    width: 0;
    height: calc(100% + 16px); /* 加上相邻项之间的间距 */
    border-left: 2px dotted #bfbfbf;
  }
  .right {
    flex: 1;
    padding-top: 2px;
  }
  .row.name-role {
    color: #222;
  }
  .name {
    font-weight: 600;
  }
  .role {
    color: #666;
    margin-left: 4px;
  }
  .time {
    color: #888;
    font-size: 12px;
    margin-top: 2px;
  }
  .empty {
    color: #999;
    padding: 8px 0 4px 4px;
  }
</style>