Squashed commit of the following:

commit 9e260ddcd8
Author: 浅念 <email@sample.com>
Date:   Thu Sep 18 09:49:33 2025 +0800

    修改 kpi

commit 6feb3ace75
Author: 浅念 <email@sample.com>
Date:   Thu Sep 18 09:42:44 2025 +0800

    kpi 统计

commit ec257a246d
Author: 浅念 <email@sample.com>
Date:   Wed Sep 17 17:04:35 2025 +0800

    修改 弹框表格

commit fa764852ab
Author: 浅念 <email@sample.com>
Date:   Wed Sep 17 15:54:35 2025 +0800

    添加 账户简称

commit 65f7f4a123
Author: 浅念 <email@sample.com>
Date:   Wed Sep 17 15:10:28 2025 +0800

    品牌加热门  修改 仪表盘接口

commit 922cfec81d
Author: 浅念 <email@sample.com>
Date:   Tue Sep 16 15:57:17 2025 +0800

    调整备货单  crm 端页面

commit 5c8df36f12
Author: 浅念 <email@sample.com>
Date:   Mon Sep 15 17:14:38 2025 +0800

    调整备货单 及各页面名称

commit 5503a14408
Author: 浅念 <email@sample.com>
Date:   Fri Sep 12 18:10:03 2025 +0800

    账户添加公司

commit 3439b45d9a
Author: 浅念 <email@sample.com>
Date:   Fri Sep 12 17:53:26 2025 +0800

    修改终版备货单

commit 045d13eb7b
Author: 浅念 <email@sample.com>
Date:   Fri Sep 12 17:49:07 2025 +0800

    修改备货单 等页面

commit da690dfa06
Author: 浅念 <email@sample.com>
Date:   Thu Sep 11 17:44:37 2025 +0800

    修改 备货单 详情

commit 853e9591b3
Author: 浅念 <email@sample.com>
Date:   Wed Sep 10 18:11:39 2025 +0800

    修改 备货单页面

commit 9052bd1027
Author: 浅念 <email@sample.com>
Date:   Tue Sep 9 20:53:30 2025 +0800

    备货单  审核功能

commit 079d9babb8
Merge: ebd7479 91d810b
Author: 浅念 <email@sample.com>
Date:   Tue Sep 9 14:51:43 2025 +0800

    Merge branch 'feature/crm_pc' of http://219.157.255.213:25311/xinyouhe/art-design into feature/crm_vehicle

commit ebd7479573
Merge: 64e53b6 459d306
Author: 浅念 <email@sample.com>
Date:   Tue Sep 9 13:57:28 2025 +0800

    Merge branch 'feature/crm_pc' of http://219.157.255.213:25311/xinyouhe/art-design into feature/crm_vehicle

commit 64e53b6ee9
Author: 浅念 <email@sample.com>
Date:   Mon Sep 8 19:09:55 2025 +0800

    备货单 加 审批流程

commit 9bd7c89cb4
Author: 浅念 <email@sample.com>
Date:   Thu Sep 4 15:09:17 2025 +0800

    车辆信息，备货单  等页面

src/views/crmpc/stocking/final_list.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="stocking-page">
+    <div class="stocking-toolbar boxshadow">
+      <!-- <div class="toolbar-left">
+        <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
+      </div> -->
+      <div class="toolbar-right">
+        <el-input
+          v-model="keyword"
+          placeholder="请输入客户名称"
+          clearable
+          style="width: 260px"
+          @keyup.enter="getList"
+        >
+          <template #suffix>
+            <el-icon class="clickable" @click="getList"><Search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div class="boxshadow">
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <ElTableColumn label="备货单编号" prop="order_no" min-width="140" />
+          <ElTableColumn label="阿里订单号/PI号" prop="pi_no" min-width="160" />
+          <ElTableColumn label="客户名称" prop="customer_snapshot" min-width="120" />
+          <ElTableColumn label="客户来源" prop="customer_source_snapshot" min-width="120" />
+          <ElTableColumn label="业务员" prop="salesperson_snapshot" min-width="100" />
+          <ElTableColumn label="日期" prop="created_at" min-width="120" />
+          <ElTableColumn label="状态" prop="approval_status">
+            <template #default="scope">
+              <div v-if="scope.row.appro_status">
+                <div
+                  ><span :class="statusClass(scope.row.appro_status.status)">{{
+                    scope.row.appro_status.status_desc ? scope.row.appro_status.status_desc : ''
+                  }}</span>
+                  <span v-if="scope.row.appro_status.name != ''"
+                    >【{{ scope.row.appro_status.name }}】</span
+                  >
+                </div>
+              </div>
+              <div v-else></div>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="操作" fixed="right" min-width="160" align="center">
+            <template #default="scope">
+              <el-link
+                v-if="scope.row.file_url != null && scope.row.file_url != ''"
+                type="warning"
+                underline="never"
+                @click="printfn(scope.row)"
+                style="margin-right: 8px"
+              >
+                <i class="iconfont-sys">&#xe782;</i> 打印预览
+              </el-link>
+              <el-link
+                v-if="scope.row.approval_status == 0"
+                type="primary"
+                underline="never"
+                @click="handleEdit(scope.row)"
+                style="margin-right: 8px"
+              >
+                <i class="iconfont-sys">&#xe6bf;</i> 编辑
+              </el-link>
+              <el-link
+                v-if="scope.row.approval_status == 0"
+                type="success"
+                underline="never"
+                @click="handleapproval(scope.row)"
+                style="margin-right: 8px"
+              >
+                <i class="iconfont-sys">&#xe641;</i> 提交
+              </el-link>
+              <el-link type="primary" underline="never" @click="handleView1(scope.row)">
+                <i class="iconfont-sys">&#xe76c;</i> 查看终版
+              </el-link>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </div>
+    <!-- 订单详情弹窗（使用公共内容组件） -->
+    <el-dialog
+      v-model="orderDialog.visible"
+      :title="orderDialog.title"
+      width="95%"
+      :close-on-click-modal="false"
+    >
+      <OrderDetailContent :orderData="orderDialog.orderData" />
+      <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>
+      <template #footer>
+        <div style="display: flex; justify-content: flex-end; gap: 8px">
+          <el-button @click="orderDialog.visible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- PDF 预览弹窗 -->
+    <el-dialog
+      v-model="pdf.visible"
+      title="打印预览"
+      width="80%"
+      top="40px"
+      :close-on-click-modal="false"
+    >
+      <div style="max-height: 70vh; display: flex; flex-direction: column; gap: 12px">
+        <div style="display: flex; justify-content: flex-end; gap: 8px">
+          <el-button @click="download">下载</el-button>
+        </div>
+        <div
+          v-if="pdf.images.length"
+          style="overflow: auto; border: 1px solid #eee; border-radius: 6px; padding: 8px"
+        >
+          <img
+            v-for="(img, idx) in pdf.images"
+            :key="idx"
+            :src="img"
+            style="display: block; width: 100%; margin-bottom: 8px; background: #fff"
+          />
+        </div>
+        <iframe
+          v-else-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 { router } from '@/router'
+  import { CrmService } from '@/api/crmApi'
+  import { useAuth } from '@/composables/useAuth'
+  import { usePdfPreview } from '@/composables/usePdfPreview'
+  import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
+  import type { OrderData } from '@/composables/useOrderDetailDialog'
+  defineOptions({ name: 'CrmFinalList' })
+  // 订单详情弹窗
+  const orderDialog = reactive({
+    visible: false,
+    title: '订单详情',
+    orderData: {} as OrderData
+  })
+  const { hasAuth } = useAuth()
+
+  function statusClass(status: any) {
+    if (status === 'rejected') return 'status-lost'
+    if (status === 'approved') return 'status-following'
+    return 'status-dealed'
+  }
+  const loading = ref(false)
+  const keyword = ref('')
+  const tableRef = ref()
+  const tableData = ref<any[]>([])
+  const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
+
+  onMounted(() => {
+    getList()
+  })
+
+  watch([keyword], () => {
+    pagination.currentPage = 1
+    // 不自动请求，保持与截图行为一致，点击搜索或回车触发
+  })
+
+  const getList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params = {
+        current: currentPage,
+        size: pageSize,
+        is_final: 1, // 只获取备货单，非终版
+        keyword: keyword.value
+      }
+
+      const { records, current, size, total } = await CrmService.getStockList(params)
+      tableData.value = records || []
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSizeChange = (size: number) => {
+    pagination.pageSize = size
+    getList()
+  }
+  const handleCurrentChange = (page: number) => {
+    pagination.currentPage = page
+    getList()
+  }
+  const handleEdit = (row: any) => {
+    router.push({
+      path: '/crmpc/stocking/final_edit',
+      query: { id: row.id } // 可带客户名等参数
+    })
+  }
+  const handleapproval = (row: any) => {
+    CrmService.stockultimateapproval({ id: row.id })
+      .then((res) => {
+        ElMessage.success(res?.message || '修改成功')
+        getList()
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+  // PDF 预览/打印（公共）
+  const { pdf, frameRef, openWithResponse, download, preparePreview, prepareImages } =
+    usePdfPreview()
+  //打印
+  const printfn = (row: any) => {
+    CrmService.printStock({ id: row.id })
+      .then((res) => {
+        openWithResponse(res)
+        // 优先转成图片以适配不带插件的环境
+        prepareImages()
+        // 同时保留 blob 预览作为兜底
+        preparePreview()
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+  const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
+  const handleView1 = async (row: any) => {
+    const res = await CrmService.checkStock({ id: row.id })
+    if (res?.contract) {
+      contractFile.value = {
+        name: '合同文件',
+        url: res.contract_url || res.contract,
+        file_name: res.contract
+      }
+    }
+    if (res) {
+      // 获取订单详情成功
+      const orderData: OrderData = res
+      orderDialog.orderData = orderData
+      orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
+      orderDialog.visible = true
+    }
+    // router.push({
+    //   path: '/crmpc/stocking/final_show',
+    //   query: { id: row.object_id } // 可带客户名等参数
+    // })
+    // router.push('/crmpc/stocking/final_show')
+    // TODO: 跳转或弹窗查看备货单
+  }
+  // const handleView1 = (row: any) => {
+  //   router.push({
+  //     path: '/crmpc/stocking/final_show',
+  //     query: { id: row.id } // 可带客户名等参数
+  //   })
+  //   // TODO: 跳转或弹窗查看备货单
+  // }
+   // 判断是否为图片文件
+   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('下载失败，请稍后重试')
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-table__empty-block) {
+    height: 100% !important;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .stocking-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+  .stocking-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: var(--art-main-bg-color);
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+  }
+  .clickable { cursor: pointer; }
+  .status-following {
+    color: #00a43f;
+    font-weight: bold;
+  }
+
+  .status-dealed {
+    color: #3471ff;
+    font-weight: bold;
+  }
+
+  .status-lost {
+    color: #ff0000;
+    font-weight: bold;
+  }
+  .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;
+  }
+</style>

src/views/crmpc/stocking/final_show.vue

@@ -0,0 +1,701 @@
+<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="阿里订单号/PI号">
+            <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 :class="Number(item.profit) < 0 ? 'profit-negative' : ''">
+                  <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="6">
+            <ElFormItem label="合计到岸价" label-width="85px">
+              <ElInput v-model="base.total_cif" disabled>
+                <template #append>{{ base.total_cif_currency }}</template>
+              </ElInput>
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="6">
+            <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>
+    <!-- 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 { useRoute } from 'vue-router'
+  import { ElMessage } from 'element-plus'
+  import { usePdfPreview } from '@/composables/usePdfPreview'
+  const { pdf, frameRef, openWithResponse, download, print, preparePreview } = usePdfPreview()
+  defineOptions({ name: 'CrmStockingDetail' })
+  const printCurrent = async () => {
+    const res = await CrmService.printStock({ id: stocking_id })
+    openWithResponse(res)
+    preparePreview()
+  }
+  const route = useRoute()
+  const stocking_id = route.query.id
+  const stockingInfo = ref<any>({})
+
+  // 回显视图模型，字段与模板一致
+  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: ''
+  })
+  function statusClass(status: any) {
+    if (status === 'rejected') return 'status-lost'
+    if (status === 'approved') return 'status-following'
+    return 'status-dealed'
+  }
+  const payments = ref<any[]>([])
+
+  // 合同文件
+  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 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(() => {
+    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;
+  }
+  /* 利润为负数时，输入文字变红（兼容 Element Plus disabled 样式） */
+  :deep(.profit-negative .el-input__wrapper) {
+    color: #ff4d4f !important;
+  }
+  :deep(.profit-negative .el-input__inner) {
+    color: #ff4d4f !important;
+    -webkit-text-fill-color: #ff4d4f !important; /* 修复 WebKit 在 disabled 下的文本颜色 */
+  }
+  :deep(.profit-negative.is-disabled .el-input__wrapper) {
+    background-color: var(--el-fill-color-blank) !important;
+    box-shadow: 0 0 0 1px var(--el-input-border-color, #dcdfe6) inset !important;
+  }
+</style>
+
+

src/views/crmpc/stocking/show.vue

@@ -0,0 +1,688 @@
+<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="阿里订单号/PI号">
+            <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 :class="Number(item.profit) < 0 ? 'profit-negative' : ''">
+                  <template #append>{{ item.profit_currency }}</template>
+                </ElInput>
+              </ElFormItem>
+            </ElCol>
+          </ElRow>
+        </div>
+
+        <ElRow :gutter="12">
+          <ElCol :span="6">
+            <ElFormItem label="合计到岸价" label-width="85px">
+              <ElInput v-model="base.total_cif" disabled>
+                <template #append>{{ base.total_cif_currency }}</template>
+              </ElInput>
+            </ElFormItem>
+          </ElCol>
+          <ElCol :span="6">
+            <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>
+    <!-- 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 { useRoute } from 'vue-router'
+  import { ElMessage } from 'element-plus'
+  import { usePdfPreview } from '@/composables/usePdfPreview'
+  const { pdf, frameRef, openWithResponse, download, print, preparePreview } = usePdfPreview()
+  defineOptions({ name: 'CrmStockingShow' })
+  const printCurrent = async () => {
+    const res = await CrmService.printStock({ id: stocking_id })
+    openWithResponse(res)
+    preparePreview()
+  }
+  const route = useRoute()
+  const stocking_id = route.query.id
+  const stockingInfo = ref<any>({})
+
+  // 回显视图模型，字段与模板一致
+  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 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 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,
+        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: it?.listing_price?.amount ?? '',
+        listing_price_currency: it?.listing_price?.currency ?? '',
+        reduction_price: it?.reduction_price?.amount ?? '',
+        reduction_price_currency: it?.reduction_price?.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 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(() => {
+    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;
+  }
+  /* 利润为负数时，输入文字变红（兼容 Element Plus disabled 样式） */
+  :deep(.profit-negative .el-input__wrapper) {
+    color: #ff4d4f !important;
+  }
+  :deep(.profit-negative .el-input__inner) {
+    color: #ff4d4f !important;
+    -webkit-text-fill-color: #ff4d4f !important; /* 修复 WebKit 在 disabled 下的文本颜色 */
+  }
+  :deep(.profit-negative.is-disabled .el-input__wrapper) {
+    background-color: var(--el-fill-color-blank) !important;
+    box-shadow: 0 0 0 1px var(--el-input-border-color, #dcdfe6) inset !important;
+  }
+</style>
+
+

src/views/crmpc/stocking/stocking_list.vue

@@ -0,0 +1,553 @@
+<template>
+  <div class="stocking-page">
+    <div class="stocking-toolbar boxshadow">
+      <div class="toolbar-left">
+        <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
+      </div>
+      <div class="toolbar-right">
+        <el-input
+          v-model="keyword"
+          placeholder="请输入客户名称"
+          clearable
+          style="width: 260px"
+          @keyup.enter="getList"
+        >
+          <template #suffix>
+            <el-icon class="clickable" @click="getList"><Search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div class="boxshadow">
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <ElTableColumn label="备货单编号" prop="order_no" />
+          <ElTableColumn label="阿里订单号/PI号" prop="pi_no" />
+          <ElTableColumn label="客户名称" prop="customer_snapshot" />
+          <ElTableColumn label="客户来源" prop="customer_source_snapshot" />
+          <ElTableColumn label="业务员" prop="salesperson_snapshot" />
+          <ElTableColumn label="日期" prop="created_at" />
+          <!-- <ElTableColumn label="补充" prop="remark" /> -->
+          <ElTableColumn label="状态" prop="approval_status">
+            <template #default="scope">
+              <div v-if="scope.row.appro_status">
+                <div
+                  ><span :class="statusClass(scope.row.appro_status.status)">{{
+                    scope.row.appro_status.status_desc ? scope.row.appro_status.status_desc : ''
+                  }}</span>
+                  <span v-if="scope.row.appro_status.name != ''"
+                    >【{{ scope.row.appro_status.name }}】</span
+                  >
+                </div>
+              </div>
+              <div v-else></div>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="操作" fixed="right" min-width="120" align="center">
+            <template #default="scope">
+              <ElRow :gutter="10" justify="center">
+                <el-link
+                  v-if="scope.row.file_url != null && scope.row.file_url != ''"
+                  type="warning"
+                  underline="never"
+                  @click="printfn(scope.row)"
+                  style="margin-right: 8px"
+                >
+                  <i class="iconfont-sys">&#xe782;</i> 打印预览
+                </el-link>
+                <el-link
+                  v-if="scope.row.approval_status == 0"
+                  type="success"
+                  underline="never"
+                  @click="handleapproval(scope.row)"
+                  style="margin-right: 8px"
+                >
+                  <i class="iconfont-sys">&#xe641;</i> 提交
+                </el-link>
+                <el-link
+                  v-if="scope.row.approval_status == 0"
+                  type="primary"
+                  underline="never"
+                  @click="handleEdit(scope.row)"
+                  style="margin-right: 8px"
+                >
+                  <i class="iconfont-sys">&#xe6bf;</i> 编辑
+                </el-link>
+                <el-link
+                  type="success"
+                  underline="never"
+                  @click="handleView(scope.row)"
+                  style="margin-right: 8px"
+                >
+                  <i class="iconfont-sys">&#xe76c;</i> 查看
+                </el-link>
+                <el-link
+                  v-if="
+                    scope.row.is_use == 0 &&
+                    scope.row.approval_status == 1 &&(scope.row.appro_status?scope.row.appro_status.status=='approved':false)
+                  "
+                  type="primary"
+                  underline="never"
+                  @click="handleCreateRepair(scope.row)"
+                >
+                  <i class="iconfont-sys">&#xe6bf;</i> 创建终版
+                </el-link>
+                <el-link
+                  v-if="scope.row.is_use == 1"
+                  type="success"
+                  underline="never"
+                  @click="handleView1(scope.row)"
+                >
+                  <i class="iconfont-sys">&#xe76c;</i> 查看终版
+                </el-link>
+                <el-link type="warning" underline="never" @click="copys(scope.row)">
+                  <i class="iconfont-sys">&#xe8b7;</i> 复制
+                </el-link>
+              </ElRow>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </div>
+
+    <!-- PDF 预览弹窗 -->
+    <el-dialog
+      v-model="pdf.visible"
+      title="打印预览"
+      width="80%"
+      top="40px"
+      :close-on-click-modal="false"
+    >
+      <div style="max-height: 70vh; display: flex; flex-direction: column; gap: 12px">
+        <div style="display: flex; justify-content: flex-end; gap: 8px">
+          <el-button @click="download">下载</el-button>
+        </div>
+        <div
+          v-if="pdf.images.length"
+          style="overflow: auto; border: 1px solid #eee; border-radius: 6px; padding: 8px"
+        >
+          <img
+            v-for="(img, idx) in pdf.images"
+            :key="idx"
+            :src="img"
+            style="display: block; width: 100%; margin-bottom: 8px; background: #fff"
+          />
+        </div>
+        <iframe
+          v-else-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>
+
+    <!-- 订单详情弹窗（使用公共内容组件） -->
+    <el-dialog
+      v-model="orderDialog.visible"
+      :title="orderDialog.title"
+      width="95%"
+      :close-on-click-modal="false"
+    >
+      <OrderDetailContent :orderData="orderDialog.orderData" />
+      <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>
+      <template #footer>
+        <div style="display: flex; justify-content: flex-end; gap: 8px">
+          <el-button @click="orderDialog.visible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 终版详情 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { router } from '@/router'
+  import { CrmService } from '@/api/crmApi'
+  import { usePdfPreview } from '@/composables/usePdfPreview'
+  import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
+  import type { OrderData } from '@/composables/useOrderDetailDialog'
+  // import { useAuth } from '@/composables/useAuth'
+  // const { hasAuth } = useAuth()
+
+  defineOptions({ name: 'CrmStockingList' }) // 定义组件名称，用于 KeepAlive 缓存控制
+
+  const loading = ref(false)
+  const keyword = ref('')
+  const tableRef = ref()
+  const tableData = ref<any[]>([])
+  const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
+
+  // PDF 预览/打印（公共）
+  const { pdf, frameRef, openWithResponse, download, preparePreview, prepareImages } =
+    usePdfPreview()
+
+  // 订单详情弹窗
+  const orderDialog = reactive({
+    visible: false,
+    title: '订单详情',
+    orderData: {} as OrderData
+  })
+
+  onMounted(() => {
+    getList()
+  })
+  function statusClass(status: any) {
+    if (status === 'rejected') return 'status-lost'
+    if (status === 'approved') return 'status-following'
+    return 'status-dealed'
+  }
+  watch([keyword], () => {
+    pagination.currentPage = 1
+    // 不自动请求，保持与截图行为一致，点击搜索或回车触发
+  })
+
+  const getList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params = {
+        current: currentPage,
+        size: pageSize,
+        is_final: 0, // 只获取备货单，非终版
+        keyword: keyword.value
+      }
+
+      const { records, current, size, total } = await CrmService.getStockList(params)
+      tableData.value = records || []
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSizeChange = (size: number) => {
+    pagination.pageSize = size
+    getList()
+  }
+  const handleCurrentChange = (page: number) => {
+    pagination.currentPage = page
+    getList()
+  }
+
+  const handleCreate = () => {
+    // TODO: 跳转到创建备货单页面
+    router.push('/crmpc/stocking/Add')
+  }
+  const handleView = async (row: any) => {
+    try {
+      // 获取订单详情数据
+      const res = await CrmService.checkStock({ id: row.id })
+      if (res?.contract) {
+        contractFile.value = {
+          name: '合同文件',
+          url: res.contract_url || res.contract,
+          file_name: res.contract
+        }
+      }
+      if (res) {
+        // 转换数据格式以适配 OrderDetailDialog
+        const orderData: OrderData = res
+
+        orderDialog.orderData = orderData
+        orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
+        orderDialog.visible = true
+      }
+    } catch (error) {
+      console.error('获取订单详情失败:', error)
+      ElMessage.error('获取订单详情失败')
+    }
+  }
+  const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
+  const handleView1 = async (row: any) => {
+    const res = await CrmService.checkStock({ id: row.object_id })
+    if (res?.contract) {
+      contractFile.value = {
+        name: '合同文件',
+        url: res.contract_url || res.contract,
+        file_name: res.contract
+      }
+    }
+    if (res) {
+      // 获取订单详情成功
+      const orderData: OrderData = res
+      orderDialog.orderData = orderData
+      orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
+      orderDialog.visible = true
+    }
+    // router.push({
+    //   path: '/crmpc/stocking/final_show',
+    //   query: { id: row.object_id } // 可带客户名等参数
+    // })
+    // router.push('/crmpc/stocking/final_show')
+    // TODO: 跳转或弹窗查看备货单
+  }
+  const handleCreateRepair = (row: any) => {
+    router.push({
+      path: '/crmpc/stocking/final_add',
+      query: { id: row.id } // 可带客户名等参数
+    })
+    // TODO: 跳转创建维修保单
+  }
+  const handleEdit = (row: any) => {
+    router.push({
+      path: '/crmpc/stocking/stocking_edit',
+      query: { id: row.id } // 可带客户名等参数
+    })
+  }
+  const handleapproval = (row: any) => {
+    CrmService.submitStock({ id: row.id })
+      .then((res) => {
+        ElMessage.success(res?.message || '修改成功')
+        getList()
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+  //打印
+  const printfn = (row: any) => {
+    CrmService.printStock({ id: row.id })
+      .then((res) => {
+        openWithResponse(res)
+        // 优先转成图片以适配不带插件的环境
+        prepareImages()
+        // 同时保留 blob 预览作为兜底
+        preparePreview()
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+   // 判断是否为图片文件
+   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('下载失败，请稍后重试')
+    }
+  }
+  // 订单详情打印
+  const handleOrderPrint = (data: OrderData) => {
+    console.log('打印订单详情:', data)
+    // 可以在这里添加具体的打印逻辑
+    window.print()
+  }
+  //复制订单
+  const copys = (row: any) => {
+    console.log('复制订单:', row.id)
+    router.push({
+      path: '/crmpc/stocking/Add',
+      query: { id: row.id } // 可带客户名等参数
+    })
+    // 添加具体的复制逻辑
+  }
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-table__empty-block) {
+    height: 100% !important;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .stocking-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+  .stocking-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: var(--art-main-bg-color);
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+  .status-following {
+    color: #00a43f;
+    font-weight: bold;
+  }
+
+  .status-dealed {
+    color: #3471ff;
+    font-weight: bold;
+  }
+
+  .status-lost {
+    color: #ff0000;
+    font-weight: bold;
+  }
+  .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;
+  }
+</style>