Kaynağa Gözat

修复 工程管理---批量编辑需要支持替换原文件

iZaiZaiA 2 yıl önce
ebeveyn
işleme
3a69a05f19

+ 136 - 0
src/views/other-file/components/HcFileUpload1.vue

@@ -0,0 +1,136 @@
+<template>
+    <el-upload ref="uploadRef" class="hc-file-upload-box" :action="api + action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :disabled="uploadDisabled" :limit="1" :show-file-list="false"
+               :on-success="uploadSuccess" :on-exceed="uploadExceed" :on-error="uploadError" :before-upload="beforeUpload" :on-progress="uploadprogress">
+        <slot></slot>
+    </el-upload>
+</template>
+
+<script setup>
+import {ref,watch,onMounted} from "vue";
+import {getTokenHeader} from '~src/api/request/header';
+import {isSize, deepClone, getObjValue} from "vue-utils-plus"
+import {genFileId} from "element-plus";
+const props = defineProps({
+    datas: {
+        type: Object,
+        default: () => ({})
+    },
+    api: {
+        type: String,
+        default: "/api/blade-resource/oss/endpoint/"
+    },
+    action: {
+        type: String,
+        default: "upload-file"
+    },
+    accept: {
+        type: String,
+        default: "image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword"
+    },
+    size: {
+        type: Number,
+        default: 60
+    }
+})
+
+//变量
+const uploadRef = ref(null)
+const uploadData = ref(props.datas)
+const uploadDisabled = ref(false)
+
+//监听
+watch(() => [
+    props.datas,
+], ([datas]) => {
+    uploadData.value = datas
+})
+
+//渲染完成
+onMounted(()=> {
+    beforeFileNum.value = 0
+    finishFileNum.value = 0
+    errorFileNum.value = 0
+})
+
+//事件
+const emit = defineEmits(['change', 'progress'])
+
+//上传前
+const beforeFileNum = ref(0)
+const beforeUpload = async (file) => {
+    if (isSize(file?.size, props.size)) {
+        beforeFileNum.value ++;
+        return true;
+    } else {
+        beforeFileNum.value = 0;
+        window?.$message?.warning(`文件大小, 不能过${props.size}M!`);
+        return false;
+    }
+}
+
+//超出限制时
+const uploadExceed = (files) => {
+    uploadRef.value?.clearFiles()
+    const file = files[0]
+    file.uid = genFileId()
+    uploadRef.value?.handleStart(file)
+}
+
+//上传中
+const uploadprogress = () => {
+    uploadDisabled.value = true
+    emit('progress', true)
+}
+
+//上传完成
+const finishFileNum = ref(0)
+const uploadSuccess = (response, uploadFile, uploadFiles) => {
+    finishFileNum.value ++;
+    if (beforeFileNum.value === finishFileNum.value) {
+        const fileList = getUploadFile(deepClone(uploadFiles))
+        uploadClearFiles()
+        emit('change', {type: 'success', fileList})
+        emit('progress', false)
+    }
+}
+
+//上传失败
+const errorFileNum = ref(0)
+const uploadError = (error,uploadFile,uploadFiles) => {
+    errorFileNum.value ++;
+    window?.$message?.error('上传失败');
+    const num = finishFileNum.value + errorFileNum.value;
+    if (beforeFileNum.value === num) {
+        const fileList = getUploadFile(deepClone(uploadFiles))
+        uploadClearFiles()
+        emit('change', {type: 'error', fileList})
+        emit('progress', false)
+    }
+}
+
+const uploadClearFiles = () => {
+    finishFileNum.value = 0
+    beforeFileNum.value = 0
+    errorFileNum.value = 0
+    uploadDisabled.value = false
+    uploadRef.value?.clearFiles()
+}
+
+//获取文件
+const getUploadFile = (fileList) => {
+    let fileArr = [];
+    for (let i = 0; i < fileList.length; i++) {
+        const item = getObjValue(fileList[i]?.response?.data)
+        fileArr.push(item)
+    }
+    return fileArr
+}
+</script>
+
+<style lang="scss">
+.hc-file-upload-box .el-upload-list .el-upload-list__item {
+    .el-upload-list__item-status-label, .el-icon--close-tip {
+        display: none;
+    }
+}
+</style>

+ 35 - 3
src/views/other-file/project-scanning.vue

@@ -142,6 +142,9 @@
                     <el-input v-model="row.dutyUser"/>
                 </template>
                 <template #action="{row,index}">
+                    <HcFileUpload1 @change="newUploadsChange($event, row)" @progress="newUploadsProgress($event, row)" v-if="row.id">
+                        <el-button type="primary" plain size="small" :loading="row['newBtnLoading']">上传新文件</el-button>
+                    </HcFileUpload1>
                     <el-button type="danger" plain size="small" :loading="row['delBtnLoading']" @click="delUploadData(row,index)">删除</el-button>
                 </template>
             </HcTable>
@@ -228,6 +231,7 @@ import {useAppStore} from "~src/store";
 import {useRouter, useRoute} from 'vue-router'
 import ProjectTree from "./components/ProjectTree.vue"
 import HcFileUpload from "./components/HcFileUpload.vue"
+import HcFileUpload1 from "./components/HcFileUpload1.vue"
 import {getStoreData, setStoreData} from '~src/utils/storage'
 import projectScanningApi from "~api/other-file/projectScanning";
 import {downloadBlob, getArrValue, deepClone} from "vue-utils-plus"
@@ -495,7 +499,7 @@ const tableUploadColumn = ref([
     {key:'isApproval', name: '是否需要审批'},
     {key:'isNeedCertification', name: '是否需要认证'},
     {key:'dutyUser', name: '责任者'},
-    {key:'action', name: '操作', width: 100}
+    {key:'action', name: '操作', width: 180}
 ])
 const setTableUploadColumn = () => {
     if (isBuiltDrawing.value === 1) {
@@ -510,7 +514,7 @@ const setTableUploadColumn = () => {
             {key:'isApproval', name: '是否需要审批'},
             {key:'isNeedCertification', name: '是否需要认证'},
             {key:'dutyUser', name: '责任者'},
-            {key:'action', name: '操作', width: 100}
+            {key:'action', name: '操作', width: 180}
         ]
     } else {
         tableUploadColumn.value = [
@@ -520,7 +524,7 @@ const setTableUploadColumn = () => {
             {key:'isApproval', name: '是否需要审批'},
             {key:'isNeedCertification', name: '是否需要认证'},
             {key:'dutyUser', name: '责任者'},
-            {key:'action', name: '操作', width: 100}
+            {key:'action', name: '操作', width: 180}
         ]
     }
 }
@@ -575,6 +579,26 @@ const tableInput = (val,row,isv) => {
     }
 }
 
+
+//上传新文件
+const newUploadsChange = ({fileList}, row) => {
+    if (fileList.length > 0) {
+        const item = fileList[0]
+        const name = item['originalName'] || ''
+        const fileName = name.substring(0, name.lastIndexOf("."))
+        //更新数据
+        row.fileName = fileName;
+        row.ossFileName = item?.name || ''
+        row.fileUrl = item?.link || ''
+        row.pdfFileUrl = item?.pdfUrl || ''
+        row.filePage = item?.page || ''
+    }
+}
+
+const newUploadsProgress = (val, row) => {
+    row.newBtnLoading = val
+}
+
 //删除
 const delUploadData = async (row,index) => {
     if (row['ossFileName']) {
@@ -652,6 +676,7 @@ const batchEditClick = () => {
     const result = rows.every(({status})=> {
         return status !== 1 && status !== 2
     })
+    console.log(rows)
     //判断状态
     if (result) {
         tableUploadType.value = 'edit'
@@ -914,3 +939,10 @@ const onmousedown = () => {
 <style lang="scss" scoped>
 @import '../../styles/other-file/project-scanning.scss';
 </style>
+
+<style lang="scss">
+.el-table td.el-table__cell .hc-file-upload-box {
+    display: inline-block;
+    margin-right: 12px;
+}
+</style>