art-design/src/views/admin/stock/final_list_admin.vue

<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="120" align="center">
            <template #default="scope">
              <ElRow :gutter="10" justify="center">
                <el-link
                  type="warning"
                  underline="never"
                  v-if="scope.row.file_url != null && scope.row.file_url != ''"
                  @click="printfn(scope.row)"
                  style="margin-right: 8px"
                >
                  <i class="iconfont-sys">&#xe782;</i> 打印预览
                </el-link>
                <el-link
                  type="primary"
                  underline="never"
                  @click="handleView1(scope.row)"
                  style="margin-right: 8px"
                >
                  <i class="iconfont-sys">&#xe76c;</i> 查看终版
                </el-link>
                <el-link
                  type="warning"
                  underline="never"
                  @click="showDialogtimeline(scope.row)"
                  style="margin-right: 8px"
                >
                  <i class="iconfont-sys">&#xe728;</i> 查看审批
                </el-link>
                <!-- <el-link
                  type="primary"
                  underline="never"
                  @click="handleViewnq(scope.row)"
                  style="margin-right: 8px;color: #750AF8"
                >
                  <i class="iconfont-sys">&#xe76c;</i> 内勤专用
                </el-link> -->
              </ElRow>
            </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">
        <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">
          <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: 50vh; display: flex; flex-direction: column; gap: 12px">
        <div style="display: flex; justify-content: flex-end; gap: 8px">
          <el-button @click="download" v-if="isFinites">下载</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>
      <div class="inter-view">
        <InternalStaffViews
          v-model:visible="pdf.visible"
          :vehicle-data="nqData"
          :default-currency="nqCurrency"
        />
      </div>
    </el-dialog>
    <el-dialog
      v-model="timelineDialogVisible"
      title="审批历史"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="approval-dialog"
    >
      <div class="approval-content">
        <!-- 头部信息 -->
        <ApprovalTimeline :records="approvalRecords" />
      </div>
    </el-dialog>
    <!-- 内勤查看弹窗 -->
    <!-- <InternalStaffView
      v-model:visible="nqDialogVisible"
      :vehicle-data="nqData"
      :default-currency="nqCurrency"
    /> -->
  </div>
</template>

<script setup lang="ts">
  // import { router } from '@/router'
  // import { CrmService } from '@/api/crmApi'
  import { manageService } from '@/api/adminApi'
  // import { useAuth } from '@/composables/useAuth'
  import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
  import ApprovalTimeline from '@/components/custom/ApprovalTimeline.vue'
  import type { OrderData } from '@/composables/useOrderDetailDialog'
  import { usePdfPreview } from '@/composables/usePdfPreview'
  import FilePreview from '@/components/custom/FilePreview.vue'
  // import InternalStaffView from '@/components/custom/InternalStaffView.vue'
  import InternalStaffViews from '@/components/custom/InternalStaffViews.vue'
  const timelineDialogVisible = ref(false)
  const approvalRecords = ref<any[]>([])
  const isFinites = ref(false)
  // PDF 预览/打印（公共）
  const {
    pdf,
    frameRef,
    openWithResponse,
    download,
    /* print,*/
    preparePreview,
    prepareImages
  } = usePdfPreview()
  defineOptions({ name: 'AdminFinalListPage' })
  // 订单详情弹窗
  const orderDialog = reactive({
    visible: false,
    title: '订单详情',
    orderData: {} as OrderData
  })

  // const { hasAuth } = useAuth()
  const loading = ref(false)
  const keyword = ref('')
  const tableRef = ref()
  const tableData = ref<any[]>([])
  const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })

  // 内勤查看：币种与数据
  const nqDialogVisible = ref(false)
  const nqCurrency = ref('')
  const nqData = ref<any[]>([])

  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 manageService.getStockList(params)
      tableData.value = records || []
      Object.assign(pagination, { currentPage: current, pageSize: size, total })
    } catch (error) {
      console.error('获取列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  function statusClass(status: any) {
    if (status === 'rejected') return 'status-lost'
    if (status === 'approved') return 'status-following'
    return 'status-dealed'
  }

  const handleSizeChange = (size: number) => {
    pagination.pageSize = size
    getList()
  }
  const handleCurrentChange = (page: number) => {
    pagination.currentPage = page
    getList()
  }
  //打印
  const printfn = (row: any) => {
    if (row.approval_status == 2) {
      isFinites.value = true
    } else {
      isFinites.value = false
    }
    handleViewnq(row)
    manageService
      .printStock({ id: row.id })
      .then((res) => {
        openWithResponse(res)
        // 优先转成图片以适配不带插件的环境
        prepareImages()
        // 同时保留 blob 预览作为兜底
        preparePreview()
      })
      .catch((err) => {
        console.log(err)
      })
  }
  const handleViewnq = async (row: any) => {
    const res = await manageService.checkStock({ id: row.id })
    // 默认币种来自 currency_symbol
    if (res?.currency_symbol) {
      nqCurrency.value = res.currency_symbol
    } else {
      nqCurrency.value = 'USD'
    }
    const list = Array.isArray(res?.veh_list) ? res.veh_list : []
    nqData.value = list.map((it: any) => ({
      model_snapshot: it.model_snapshot,
      qty: 1,
      clearance_price: it.clearance_price,
      clearance_price_currency: it.clearance_price?.currency || it.clearance_price_currency,
      fob_transport_fee: it.fob_transport_fee,
      fob_fee_currency: it.fob_transport_fee?.currency || it.fob_fee_currency,
      car_price: it.car_price,
      car_price_currency: it.car_price?.currency || it.car_price_currency,
      ocean_freight: it.ocean_freight,
      ocean_freight_currency: it.ocean_freight?.currency || it.ocean_freight_currency,
      commission: it.commission,
      commission_currency: it.commission?.currency || it.commission_currency,
      retention_price: it.retention_price,
      retention_price_currency: it.retention_price?.currency || it.retention_price_currency,
      port_misc_fee: it.port_misc_fee,
      port_fee_currency: it.port_misc_fee?.currency || it.port_fee_currency,
      model: it.model_snapshot
    }))
    // nqDialogVisible.value = true
  }
  // 文件数据
  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 manageService.checkStock({ id: row.object_id })
    // 处理合同文件
    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) {
      // 获取订单详情成功
      const orderData: OrderData = res
      orderDialog.orderData = orderData
      orderDialog.title = '合塑实业-汽车事业部-备货单(客户下定)'
      orderDialog.visible = true
    }
    // router.push({
    //   path: '/admin/stock/final_show_admin',
    //   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('下载失败，请稍后重试')
    }
  } */
  //审批进度
  const showDialogtimeline = async (row: any) => { 
    // 审批记录（兼容多种字段）
    const resstockapprovallogs = await manageService.stockapprovaltimeline({
      id: row.id,
      flow_type: 'stock_orders'
    })
    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?.status_desc,
        time: h?.time || '',
        approved: h?.status === 'approved' || h?.status === 'submitted',
        rejected: h?.status === 'rejected',
        pending: h?.status != 'approved' && h?.status != 'rejected' && h?.status != 'submitted',
        comment: h?.comment || h?.remark || ''
      }))
    }
    timelineDialogVisible.value = true
  }
</script>

<style scoped lang="scss">
  .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;
  }
  .inter-view {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
</style>