feat(协同审批/报价单): 添加附件上传、预览和下载功能

张诺

19 小时以前 ccd67e291e00a2ad9c29ad8df43de6fab5a4afed

feat(协同审批/报价单): 添加附件上传、预览和下载功能

- 在报价单审批弹窗中显示附件列表，支持下载和预览
- 在报价单管理页面新增附件上传区域，支持多文件上传
- 统一附件数据处理逻辑，通过 normalizeQuotationFiles 函数标准化附件格式
- 引入 filePreview 组件实现文件预览功能
- 优化报价单详情获取逻辑，当附件为空时尝试获取详细数据

 src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue

@@ -116,6 +116,19 @@
                <h4>备注</h4>
                <p>{{ currentQuotation.remark }}</p>
              </div>

              <div v-if="quotationAttachments.length > 0" style="margin-top: 20px;">
                <h4>附件</h4>
                <el-table :data="quotationAttachments" border style="width: 100%">
                  <el-table-column prop="name" label="附件名称" min-width="360" show-overflow-tooltip />
                  <el-table-column label="操作" width="160" align="center">
                    <template #default="{ row }">
                      <el-button link type="primary" size="small" @click="downloadAttachment(row)">下载</el-button>
                      <el-button link type="primary" size="small" @click="previewAttachment(row)">预览</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </template>
        </el-skeleton>
@@ -217,6 +230,7 @@
        </div>
      </template>
    </el-dialog>
    <filePreview ref="filePreviewRef" />
  </div>
</template>

@@ -230,8 +244,9 @@
import useUserStore from "@/store/modules/user.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import { WarningFilled, Edit, Check, MoreFilled } from '@element-plus/icons-vue'
import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
import { getQuotationDetail, getQuotationList } from "@/api/salesManagement/salesQuotation.js";
import { getPurchaseByCode } from "@/api/procurementManagement/procurementLedger.js";
import filePreview from "@/components/filePreview/index.vue";
const emit = defineEmits(['close'])
const { proxy } = getCurrentInstance()

@@ -253,8 +268,34 @@
const currentQuotation = ref({})
const purchaseLoading = ref(false)
const currentPurchase = ref({})
const filePreviewRef = ref()
const isQuotationApproval = computed(() => Number(props.approveType) === 6)
const isPurchaseApproval = computed(() => Number(props.approveType) === 5)

const normalizeQuotationFiles = (raw) => {
  const list =
    (raw && Array.isArray(raw.salesLedgerFiles) && raw.salesLedgerFiles) ||
    (raw && Array.isArray(raw.quotationFiles) && raw.quotationFiles) ||
    (raw && Array.isArray(raw.fileList) && raw.fileList) ||
    (raw && Array.isArray(raw.files) && raw.files) ||
    []
  return list
    .map((item) => ({
      id: item?.id,
      name: item?.fileName || item?.name || item?.originalName || item?.filename || "附件",
      url: item?.fileUrl || item?.url || item?.path || item?.tempPath,
    }))
    .filter((i) => i.url)
}

const quotationAttachments = computed(() => normalizeQuotationFiles(currentQuotation.value))

const downloadAttachment = (row) => {
  proxy.$download.name(row.url)
}
const previewAttachment = (row) => {
  filePreviewRef.value?.open?.(row.url)
}

const data = reactive({
    form: {
@@ -330,9 +371,18 @@
    const quotationNo = row?.approveReason;
    if (quotationNo) {
      quotationLoading.value = true
      getQuotationList({ quotationNo }).then((res) => {
      getQuotationList({ quotationNo }).then(async (res) => {
        const records = res?.data?.records || []
        currentQuotation.value = records[0] || {}
        const first = records[0] || {}
        currentQuotation.value = first
        if (first?.id && normalizeQuotationFiles(first).length === 0) {
          try {
            const detailRes = await getQuotationDetail({ id: first.id })
            const detail = detailRes?.data || detailRes || {}
            currentQuotation.value = { ...first, ...detail }
          } catch (e) {
          }
        }
      }).finally(() => {
        quotationLoading.value = false
      })
@@ -445,4 +495,4 @@
    width: 200px;
    height: 60px;
}
</style>
</style>

 src/views/salesManagement/salesQuotation/index.vue

@@ -310,6 +310,52 @@
            </el-form-item>
          </div>
        </el-card>

        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><Paperclip /></el-icon>
              <span class="card-title">附件材料</span>
            </div>
          </template>
          <div class="form-content">
            <el-form-item label="附件">
              <el-upload
                v-model:file-list="fileList"
                :action="upload.url"
                multiple
                ref="fileUpload"
                auto-upload
                :headers="upload.headers"
                :before-upload="handleBeforeUpload"
                :on-error="handleUploadError"
                :on-success="handleUploadSuccess"
                :on-remove="handleRemove"
                :on-preview="handlePreview"
              >
                <el-button type="primary">上传</el-button>
                <template #file="{ file }">
                  <div style="display:flex; align-items:center; gap: 10px; width: 100%;">
                    <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                      {{ file.name }}
                    </span>
                    <div style="display:flex; align-items:center; gap: 6px;">
                      
                      <el-button link type="success" :icon="Download" @click="handleDownload(file)" />
                      <el-button link type="primary" :icon="View" @click="handlePreview(file)" />
                      <el-button link type="danger" :icon="Delete" @click="triggerRemoveFile(file)" />
                    </div>
                  </div>
                </template>
                <template #tip>
                  <div class="el-upload__tip">
                    文件格式支持 doc，docx，xls，xlsx，ppt，pptx，pdf，txt，xml，jpg，jpeg，png，gif，bmp，rar，zip，7z
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
      </div>
    </FormDialog>
@@ -350,19 +396,25 @@
        <p>{{ currentQuotation.remark }}</p>
      </div>
    </el-dialog>

    <filePreview ref="filePreviewRef" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, markRaw, shallowRef } from 'vue'
import { ref, reactive, computed, onMounted, markRaw, shallowRef, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete } from '@element-plus/icons-vue'
import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete, Paperclip, View, Download } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
import FormDialog from '@/components/Dialog/FormDialog.vue'
import {getQuotationList,addQuotation,updateQuotation,deleteQuotation} from '@/api/salesManagement/salesQuotation.js'
import {userListNoPage} from "@/api/system/user.js";
import {customerList} from "@/api/salesManagement/salesLedger.js";
import { customerList, delLedgerFile } from "@/api/salesManagement/salesLedger.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import { getToken } from "@/utils/auth";
import filePreview from "@/components/filePreview/index.vue";

const { proxy } = getCurrentInstance()

// 响应式数据
const loading = ref(false)
@@ -384,6 +436,13 @@
const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const dialogTitle = ref('新增报价')
const fileList = ref([])
const fileUpload = ref()
const filePreviewRef = ref()
const upload = reactive({
  url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
  headers: { Authorization: "Bearer " + getToken() },
})
const form = reactive({
  quotationNo: '',
  customer: '',
@@ -399,7 +458,8 @@
  otherFee: 0,
  discountRate: 0,
  discountAmount: 0,
  totalAmount: 0
  totalAmount: 0,
  tempFileIds: []
})

const baseRules = {
@@ -476,10 +536,28 @@
  handleSearch()
}

const normalizeQuotationFiles = (raw) => {
  const list =
    (raw && Array.isArray(raw.salesLedgerFiles) && raw.salesLedgerFiles) ||
    (raw && Array.isArray(raw.quotationFiles) && raw.quotationFiles) ||
    (raw && Array.isArray(raw.fileList) && raw.fileList) ||
    (raw && Array.isArray(raw.files) && raw.files) ||
    []
  return list
    .map((item) => ({
      id: item?.id,
      name: item?.fileName || item?.name || item?.originalName || item?.filename || "附件",
      url: item?.fileUrl || item?.url || item?.path || item?.tempPath,
      tempId: item?.tempId,
    }))
    .filter((i) => i.url)
}

const handleAdd = async () => {
  dialogTitle.value = '新增报价'
  isEdit.value = false
  resetForm()
  fileList.value = []
  // 重置审批人节点
  approverNodes.value = [{ id: 1, userId: null }]
  nextApproverId = 2
@@ -705,6 +783,7 @@
    userName: item.userName || ''
  }));
  
  fileList.value = normalizeQuotationFiles(row)
  dialogVisible.value = true
}

@@ -746,6 +825,9 @@
  form.discountRate = 0
  form.discountAmount = 0
  form.totalAmount = 0
  form.tempFileIds = []
  form.files = []
  fileList.value = []
}

const addProduct = () => {
@@ -787,6 +869,57 @@
  // 可以根据客户信息自动填充一些默认值
}

function handleBeforeUpload() {
  proxy?.$modal?.loading?.("正在上传文件，请稍候...")
  return true
}
function handleUploadError() {
  proxy?.$modal?.closeLoading?.()
  ElMessage.error("上传文件失败")
}
function handleUploadSuccess(res, file) {
  proxy?.$modal?.closeLoading?.()
  if (res?.code === 200) {
    file.tempId = res?.data?.tempId
    const url = res?.data?.tempPath || res?.data?.url
    if (url) file.url = url
    file.name = res?.data?.originalName || file?.name
    ElMessage.success("上传成功")
  } else {
    ElMessage.error(res?.msg || "上传失败")
    fileUpload.value?.handleRemove?.(file)
  }
}
function handleRemove(file) {
  if (!isEdit.value) return
  if (!file?.id) return
  delLedgerFile([file.id]).then((res) => {
    if (res?.code === 200) {
      ElMessage.success("删除成功")
    } else {
      ElMessage.error(res?.msg || "删除失败")
    }
  }).catch(() => {
    ElMessage.error("删除失败")
  })
}

const handleDownload = (file) => {
  if (!file?.url) return
  proxy?.$modal?.loading?.("正在下载文件，请稍候...")
  proxy.$download.name(file.url);
  proxy?.$modal?.closeLoading?.()
}

function handlePreview(file) {
  const url = file?.url || file?.response?.data?.tempPath || file?.response?.data?.url
  if (!url) return
  filePreviewRef.value?.open?.(url)
}
function triggerRemoveFile(file) {
  fileUpload.value?.handleRemove?.(file)
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
@@ -804,6 +937,13 @@
      
      // 收集所有节点的审批人id
      form.approveUserIds = approverNodes.value.map(node => node.userId).join(',')

      form.files = fileList.value.map(f => ({
        tempId: f.tempId,
        name: f.name,
        url: f.url,
        uid: f.uid,
      })) || []
      
      // 计算所有产品的单价总和
      form.totalAmount = form.products.reduce((sum, product) => {
@@ -868,6 +1008,7 @@
        // 审批人（用于编辑时反显）
        approveUserIds: item.approveUserIds || '',
        remark: item.remark || '',
        salesLedgerFiles: normalizeQuotationFiles(item),
        products: item.products ? item.products.map(product => ({
          productId: product.productId || '',
          product: product.product || product.productName || '',