替换文件更改

src/views/file/collection.vue

@@ -64,6 +64,7 @@
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="file_collection_btn_del">
+                 
                         <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">
                             <HcIcon name="delete-bin"/>
                             <span>删除</span>
@@ -301,14 +302,17 @@
                     </el-select>
                 </template>
                 <template #action="{row,index}">
+                    <HcFileUpload1 v-if="row.id" @change="newUploadsChange($event, row)"
+                                   @progress="newUploadsProgress($event, row)">
+                            <el-button :loading="row['newBtnLoading']" plain size="small" type="primary">替换</el-button>
+                    </HcFileUpload1>
                     <el-button type="danger" plain size="small" :loading="row['delBtnLoading']" @click="delUploadData(row,index)">删除</el-button>
-                    <el-button type="danger" plain size="small" :loading="row['delBtnLoading']" @click="replaceUploadData(row,index)">替换</el-button>
                 </template>
             </HcTable>
             <template #footer>
                 <div class="lr-dialog-footer">
                     <div class="left flex items-center">
-                        <el-button type="primary" hc-btn @click="uploadFileClick" v-if="tableUploadType==='add'">
+                        <el-button type="primary" hc-btn @click="uploadFileClick">
                             <HcIcon name="add-circle"/>
                             <span>新增上传</span>
                         </el-button>
@@ -373,6 +377,7 @@ import {useAppStore} from "~src/store";
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
 import {ref, watch, onMounted, nextTick } from "vue";
 import HcTree from "~src/components/tree/hc-tree.vue"
+import HcFileUpload1 from "./components/HcFileUpload1.vue"
 import notableform from '~src/assets/view/notableform.svg';
 import {delMessage, rowsToId, rowsToIdNumArr} from "~uti/tools";
 import archiveFileApi from "~api/archiveFile/archiveFile";
@@ -381,6 +386,7 @@ import tasksApi from '~api/tasks/data';
 import ossApi from "~api/oss";
 
 
+
 //变量
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId);
@@ -434,21 +440,9 @@ const uploadFileClick = () => {
 const HcUploadFileProgress = (res) => {
     uploadsLoading.value = res
 }
-
 // 文件上传成功的回调
 const HcUploadFileSuccess = (res) => {
     console.log('文件上传成功', res)
-    console.log(isReplace.value,'isReplace.valu');
-    if(isReplace.value){
-        console.log(1111);
-        res.fileNumber=replacerow.value?.fileNumber
-        res.fileTime=replacerow.value?.fileTime
-        res.isApproval=replacerow.value?.isApproval
-        res.isNeedCertification=replacerow.value?.isNeedCertification
-    }
-    
-    console.log(res,'res');
-  
     uploadsChange(res)
 }
 
@@ -1197,7 +1191,7 @@ const tableUploadColumn = ref([
     {key:'isNeedCertification', name: '是否需要认证'},
     {key:'dutyUser', name: '责任者'},
     {key:'isElement', name: '是否四要素'},
-    {key:'action', name: '操作'}
+    {key:'action', name: '操作', width: 180}
 ])
 const setTableUploadColumn = () => {
     if (isBuiltDrawing.value === 2) {
@@ -1213,7 +1207,7 @@ const setTableUploadColumn = () => {
             {key:'isNeedCertification', name: '是否需要认证'},
             {key:'dutyUser', name: '责任者'},
             {key:'isElement', name: '是否四要素'},
-            {key:'action', name: '操作'}
+            {key:'action', name: '操作', width: 180}
         ]
         sheetTypeStatus()
         sheetSourceStatus()
@@ -1226,7 +1220,7 @@ const setTableUploadColumn = () => {
             {key:'isNeedCertification', name: '是否需要认证'},
             {key:'dutyUser', name: '责任者'},
             {key:'isElement', name: '是否四要素'},
-            {key:'action', name: '操作',}
+            {key:'action', name: '操作', width: 180}
         ]
     }
 }
@@ -1234,7 +1228,6 @@ const tableUploadData = ref([])
 
 //上传的文件结果
 const uploadsChange = (item) => {
-    console.log(item,'item');
     if (getObjVal(item)) {
         let newArr = tableUploadData.value
         const sheet = sheetType.value, source = sheetSourceType.value
@@ -1244,26 +1237,22 @@ const uploadsChange = (item) => {
             projectId: projectId.value,
             contractId: contractId.value,
             nodeId: nodeIds.value,
-            fileNumber:item?.fileNumber || '',
+            fileNumber: '',
             fileName: fileName,
             ossFileName: item?.name || '',
-            // fileTime: null,
-            fileTime:  item?.fileTime || null,
+            fileTime: null,
             fileUrl: item?.link || '',
             sheetType: sheet.length > 0 ? sheet[0]['dictKey'] || '': '',
             sheetSource: source.length > 0 ? source[0]['dictKey'] || '': '',
             drawingNo: '',
             citeChangeNumber: '',
-            isApproval:item?.isApproval?.length>0?item?.isApproval:1 || 1,
-            isNeedCertification: item?.isNeedCertification?.length>0?item.isNeedCertification:1 || 1,
+            isApproval: 1,
+            isNeedCertification: 1,
             dutyUser: dutyUser.value,
             pdfFileUrl: item?.pdfUrl || '',
             filePage: item?.page || '',
             isElement: 0
         })
-        console.log(newArr,'newArr');
-        newArr[0].isApproval=item?.isApproval
-        newArr[0].isNeedCertification=item?.isNeedCertification
         tableUploadData.value = newArr
     } else {
         console.log(item)
@@ -1292,21 +1281,7 @@ const delUploadData = async (row,index) => {
         tableUploadData.value.splice(index,1);
     }
 }
-const isReplace=ref(false)
-const replacerow=ref({})
-const replaceIndex=ref()
-//替换replaceUploadData
-const replaceUploadData = async (row,index) => {
-    console.log(row,index);
-    replacerow.value=row
-    replaceIndex.value=index
-  
-    setdutyUser()
-    HcUploadFileRef?.value.btnUpload()
-    
-    isReplace.value=true
-    tableUploadData.value.splice(replaceIndex.value,1);
-}
+
 //批量上传保存
 const uploadSaveLoading = ref(false)
 const batchUploadSave = async () => {
@@ -1376,7 +1351,24 @@ const batchUploadCancel = () => {
     
   
 }
+//上传新文件
+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 batchEditClick = () => {
     const rows = deepClone(tableCheckedKeys.value)

src/views/file/components/HcFileUpload1.vue

@@ -0,0 +1,139 @@
+<template>
+    <el-upload ref="uploadRef" :accept="accept" :action="api + action" :before-upload="beforeUpload"
+               :data="uploadData" :disabled="uploadDisabled" :headers="getTokenHeader()" :limit="1" :on-error="uploadError"
+               :on-exceed="uploadExceed" :on-progress="uploadprogress" :on-success="uploadSuccess"
+               :show-file-list="false" class="hc-file-upload-box">
+        <slot></slot>
+    </el-upload>
+</template>
+
+<script setup>
+import {ref, watch, onMounted} from "vue";
+import {getTokenHeader} from '~src/api/request/header';
+import {deepClone, getObjValue, isFileSize} from "js-fast-way"
+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 (isFileSize(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>