10.17沟通调整

计划收款信息增加复制操作上传合同调整为：上传合同、上传PI、上传水单（均为必传，且支持多文件操作与下载）
2025-10-22 11:52:20 +08:00
parent 222d07d483
commit ff0fb83bd0
20 changed files with 2139 additions and 856 deletions
@@ -88,7 +88,7 @@
                  type="success"
                  underline="never"
                  @click="handleView(scope.row)"
-                  style="margin-right: 8px"
+                  style="margin-right: 8px;color: #333333;"
                >
                  <i class="iconfont-sys">&#xe76c;</i> 查看
                </el-link>
@@ -114,15 +114,15 @@
                  <i class="iconfont-sys">&#xe76c;</i> 查看终版
                </el-link>
                <el-link
-                  type="warning"
+                  type="danger"
                  underline="never"
                  @click="copys(scope.row)"
-                  style="margin-right: 8px"
+                  style="margin-right: 8px;color: #F04800;"
                >
                  <i class="iconfont-sys">&#xe8b7;</i> 复制
                </el-link>
                <el-link
-                  type="warning"
+                  type="success"
                  underline="never"
                  @click="showDialogtimeline(scope.row)"
                  style="margin-right: 8px"
@@ -131,7 +131,7 @@
                </el-link>
                <el-link
                  v-if="scope.row.approval_status == 1"
-                  type="primary"
+                  type="danger"
                  underline="never"
                  @click="stockrecallfn(scope.row)"
                  style="margin-right: 8px"
@@ -173,7 +173,7 @@
    >
      <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>
+          <el-button @click="download" v-if="isFinites">下载</el-button>
        </div>
        <div
          v-if="pdf.images.length"
@@ -203,44 +203,19 @@
      :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>
+        <FilePreview title="合同文件" :files="contractFiles" empty-text="暂无合同文件" />
+      </div>
+
+      <!-- PI文件 -->
+      <div class="boxshadow">
+        <FilePreview title="PI文件" :files="piFiles" empty-text="暂无PI文件" />
+      </div>
+
+      <!-- 水单文件 -->
+      <div class="boxshadow">
+        <FilePreview title="水单文件" :files="waterBillFiles" empty-text="暂无水单文件" />
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; gap: 8px">
@@ -268,13 +243,16 @@
 <script setup lang="ts">
  import { router } from '@/router'
  import { CrmService } from '@/api/crmApi'
-  import { usePdfPreview } from '@/composables/usePdfPreview'
+  import { ElMessage } from 'element-plus'
  import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
  import type { OrderData } from '@/composables/useOrderDetailDialog'
  import ApprovalTimeline from '@/components/custom/ApprovalTimeline.vue'
+  import FilePreview from '@/components/custom/FilePreview.vue'
+  import { usePdfPreview } from '@/composables/usePdfPreview'
  import { manageService } from '@/api/adminApi'
  const timelineDialogVisible = ref(false)
  const approvalRecords = ref<any[]>([])
+  const isFinites = ref(false)
  // import { useAuth } from '@/composables/useAuth'
  // const { hasAuth } = useAuth()

@@ -286,10 +264,6 @@
  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,
@@ -370,13 +344,29 @@
    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
-        }
+      
+      // 处理合同文件
+      const file_list = res?.file_list
+      if (file_list?.contract) {
+        contractFiles.value = processFiles(file_list.contract, '合同')
+      } else {
+        contractFiles.value = []
      }
+      
+      // 处理PI文件
+      if (file_list?.pi_doc) {
+        piFiles.value = processFiles(file_list.pi_doc, 'PI')
+      } else {
+        piFiles.value = []
+      }
+      
+      // 处理水单文件
+      if (file_list?.transaction_slip) {
+        waterBillFiles.value = processFiles(file_list.transaction_slip, '水单')
+      } else {
+        waterBillFiles.value = []
+      }
+      
      if (res) {
        // 转换数据格式以适配 OrderDetailDialog
        const orderData: OrderData = res
@@ -390,16 +380,39 @@
      ElMessage.error('获取订单详情失败')
    }
  }
-  const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
+  // 文件数据
+  const contractFiles = ref<Array<{ name: string; url: string; file_name: string }>>([])
+  const piFiles = ref<Array<{ name: string; url: string; file_name: string }>>([])
+  const waterBillFiles = ref<Array<{ name: string; url: string; file_name: string }>>([])
+
+  // 处理文件数据
+  const processFiles = (files: any[], type: string) => {
+    if (!files || !Array.isArray(files)) return []
+    return files.map((file: any) => ({
+      name: `${type}文件`,
+      url: file.file_full_url || file.file_url,
+      file_name: file.file_url
+    }))
+  }
+
  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
-      }
+      contractFiles.value = processFiles(res.contract, '合同')
    }
+    
+    // 处理PI文件
+    if (res?.pi_doc) {
+      piFiles.value = processFiles(res.pi_doc, 'PI')
+    }
+    
+    // 处理水单文件
+    if (res?.transaction_slip) {
+      waterBillFiles.value = processFiles(res.transaction_slip, '水单')
+    }
+    
    if (res) {
      // 获取订单详情成功
      const orderData: OrderData = res
@@ -407,12 +420,6 @@
      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({
@@ -437,8 +444,16 @@
        console.log(err)
      })
  }
+  // PDF 预览/打印（公共）
+  const { pdf, frameRef, openWithResponse, download, preparePreview, prepareImages } =
+    usePdfPreview()
  //打印
  const printfn = (row: any) => {
+    if (row.approval_status == 2) {
+      isFinites.value = true
+    } else {
+      isFinites.value = false
+    }
    CrmService.printStock({ id: row.id })
      .then((res) => {
        openWithResponse(res)
@@ -450,116 +465,6 @@
      .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) => {
@@ -684,17 +589,4 @@
    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>