产品标准流程-发布-附件名称支持修改

2023-01-13 14:33:30 +08:00
parent 9f2441a8c6
commit 470a3ef063
2 changed files with 256 additions and 44 deletions
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <el-upload
+        ref="importfile"
+        name="file"
+        multiple
+        drag
+        :file-list="fileList"
+        :action="action"
+        :limit="limit"
+        :accept="accept"
+        :show-file-list="!showFileList"
+        :before-upload="beforeUpload"
+        :on-success="onSuccess"
+        :on-preview="onPreview"
+        :on-remove="onRemove"
+        :on-exceed="handleExceed"
+    >
+      <div style="padding: 20px 0">
+        <i class="el-icon-upload" style="color: #3399ff"></i>
+        <p>点击或拖拽上传文件</p>
+      </div>
+    </el-upload>
+    <ul class="el-upload-list el-upload-list--text" v-if="showFileList">
+      <li class="el-upload-list__item is-success"
+          v-for="(file, index) in fileListSol"
+          :key="index"
+          :title="file.name"
+          @click="handlePreview(file)">
+        <a class="el-upload-list__item-name">
+          <i class="el-icon-document"></i>
+          {{ file.name }}
+        </a>
+        <label class="el-upload-list__item-status-label">
+          <i class="el-icon-upload-success el-icon-circle-check"></i>
+        </label>
+        <i class="el-icon-edit" @click.stop="handleModifyName(file)"></i>
+        <i class="el-icon-close" @click.stop="handleRemoveFile(file)"></i>
+      </li>
+    </ul>
+    <el-dialog title="修改文件名称"
+               :visible.sync="openModifyFileNameDialog"
+               append-to-body
+    >
+      <el-input v-model="modifyFile.fileName"></el-input>
+      <div class="demo-drawer-footer" style="text-align: right;margin-top:30px">
+        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" :loading="modifyFileNameLoading"
+                   @click="handleModifyNameSubmite">提交</el-button>
+        <el-button class="common-button-default" size="mini" icon="el-icon-close"
+                   @click="openModifyFileNameDialog = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "uploadFile",
+  data(){
+    return {
+      fileListSol: [],
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading:false
+    }
+  },
+  computed:{
+  },
+  props:{
+    // 上传文件列表
+    fileList:{
+      type:Array
+    },
+    // 请求路径
+    action:{
+      type:String,
+      required:true
+    },
+    // 上传文件个数限制
+    limit: {
+      type: Number,
+      default: 8
+    },
+    // 上传文件类型
+    accept:{
+      type:String,
+      default:'.pdf, .PDF, .ppt, .PPT, .pptx,.PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx'
+    },
+    // 是否显示已上传文件列表
+    showFileList:{
+      type:Boolean,
+      default:true
+    },
+    // 上传文件超出个数的提示信息
+    exceed:{
+      type:String
+    },
+
+
+    // 上传文件之前的钩子
+    beforeUpload:{
+      type:Function
+    },
+    // 成功回调
+    onSuccess:{
+      type:Function
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    onPreview:{
+      type:Function
+    },
+    // 文件列表移除文件时的钩子
+    onRemove:{
+      type:Function
+    },
+  },
+  watch:{
+  },
+  methods:{
+    // 文件超出个数
+    handleExceed(files, fileList) {
+      if (this.exceed) {
+        this.$message.warning(this.exceed)
+      } else {
+        this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+      }
+    },
+    // 预览
+    handlePreview(file){
+      this.onPreview(file)
+    },
+    // 删除文件
+    handleRemoveFile(file){
+      const _fileListSol = []
+      this.fileListSol.forEach(item => {
+        if(item.id !== file.id) _fileListSol.push(item)
+      })
+      this.fileListSol = _fileListSol
+      this.onRemove(file,this.fileListSol)
+    },
+    // 点击修改
+    handleModifyName(file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id
+      this.openModifyFileNameDialog = true
+    },
+    // 确定修改文件名
+    handleModifyNameSubmite(){
+      this.modifyFileNameLoading = true
+      this.$http.get('att/attFile/updateFileName', this.modifyFile, {
+        _this: this
+      }, res => {
+        if(res.ok){
+          this.modifyFileNameLoading = false
+          this.openModifyFileNameDialog = false
+          this.fileListSol.forEach(item=>{
+            if(item.id === this.modifyFile.fileId){
+              item.name = this.modifyFile.fileName
+            }
+          })
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
+  },
+  mounted(){
+    // 回显文件
+    this.fileListSol = this.fileList
+  }
+}
+</script>
+
+<style scoped less>
+.el-upload-list__item .el-icon-edit{
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  cursor: pointer;
+  opacity: .75;
+  color: #606266;
+}
+</style>
@@ -232,25 +232,37 @@
    >
    </ProcessFooter>
    <el-dialog width='400px' :visible.sync="fileMadel" title="上传文件">
-        <el-upload
-                multiple
-                drag
-                :file-list="fileList"
-                :action="fileUrl"
-                ref="importfile"
-                name="file"
-                accept=".pdf, .PDF, .ppt, .PPT, .pptx,.PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx"
-                :before-upload="beginImportFile"
-                :on-success="importFileSuccess"
-                :on-preview="handleFilePreview"
-                :on-remove="removeOneFile"
-                :show-file-list="true"
+<!--        <el-upload-->
+<!--                multiple-->
+<!--                drag-->
+<!--                :file-list="fileList"-->
+<!--                :action="fileUrl"-->
+<!--                ref="importfile"-->
+<!--                name="file"-->
+<!--                accept=".pdf, .PDF, .ppt, .PPT, .pptx,.PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx"-->
+<!--                :before-upload="beginImportFile"-->
+<!--                :on-success="importFileSuccess"-->
+<!--                :on-preview="handleFilePreview"-->
+<!--                :on-remove="removeOneFile"-->
+<!--                :show-file-list="true"-->
+<!--        >-->
+<!--            <div style="padding: 20px 0">-->
+<!--                <i class="el-icon-upload" style="color: #3399ff"></i>-->
+<!--                <p>点击或拖拽上传文件</p>-->
+<!--            </div>-->
+<!--        </el-upload>-->
+        <upload-file v-if="fileMadel" :fileList="fileList"
+                     :action="fileUrl"
+                     :limit="8"
+                     accept=".pdf, .PDF, .ppt, .PPT, .pptx,.PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx"
+                     :showFileList="true"
+                     :beforeUpload="beginImportFile"
+                     :onSuccess="importFileSuccess"
+                     :onPreview="handleFilePreview"
+                     :onRemove="removeOneFile"
        >
-            <div style="padding: 20px 0">
-                <i class="el-icon-upload" style="color: #3399ff"></i>
-                <p>点击或拖拽上传文件</p>
-            </div>
-        </el-upload>
+
+        </upload-file>
    </el-dialog>
    <el-dialog
            :title="config.attrName"
@@ -592,6 +604,7 @@
    getBusStandFileByAttId,inboundLiaisonDetail,processCreateBuss,evaluationHisList,taskDel,verifySnExists} from "api/process";
    import TreeSelect from '@/components/treeSelect/treeSelect.vue';
    import TreeSelectNew from '@/components/treeSelect/treeSelectNew.vue';
+    import uploadFile from "./common/uploadFile.vue"
    let Base64 = require('js-base64').Base64;

    export default {
@@ -602,7 +615,8 @@
            ProcessFooter,
            ProcessTitle,
            TreeSelect,
-            TreeSelectNew
+            TreeSelectNew,
+          uploadFile
        },
        data () {
            const validateStandNumber = async (rule, value, callback) => {
@@ -2087,7 +2101,7 @@
            },
            // 文件预览及下载
            handleFilePreview(file) {
-                const attId = file.response.data.id
+                const attId = file.response ? file.response.data.id : file.id
                if (this.preview) {
                    if (attId) {
                        window.location.href = '/api/att/attFile/downloadFileForSarNew?fileId=' + attId
@@ -2095,22 +2109,23 @@
                        this.$message.warning('文件不存在,下载失败')
                    }
                } else {
-                    this.getBusStandFileByAttId(attId)
-                        .then(res => {
-                            if(res){
-                                const editFileInfo = res
-                                if(editFileInfo.fileSuffix === 'pdg' || editFileInfo.fileSuffix === 'PDG'){
-                                    window.open('book://ssreader/e0?url='+editFileInfo.downLoadUrl)
-                                }else {
-                                    const nowTime = new Date().getTime()
-                                    // window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(editFileInfo.downLoadUrl)));
-                                    window.open(onlyOfficeUrl+'/onlyOffice?oldFileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime+'&filePath='+editFileInfo.filePath+'&fileName='+editFileInfo.fileName)
-                                }
-                            }
-                        }).catch(e => {
-                        console.log(e)
-                        this.$message.warning('文件不存在,预览失败')
-                    })
+                  this.$preview(attId)
+                    // this.getBusStandFileByAttId(attId)
+                    //     .then(res => {
+                    //         if(res){
+                    //             const editFileInfo = res
+                    //             if(editFileInfo.fileSuffix === 'pdg' || editFileInfo.fileSuffix === 'PDG'){
+                    //                 window.open('book://ssreader/e0?url='+editFileInfo.downLoadUrl)
+                    //             }else {
+                    //                 const nowTime = new Date().getTime()
+                    //                 // window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(editFileInfo.downLoadUrl)));
+                    //                 window.open(onlyOfficeUrl+'/onlyOffice?oldFileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime+'&filePath='+editFileInfo.filePath+'&fileName='+editFileInfo.fileName)
+                    //             }
+                    //         }
+                    //     }).catch(e => {
+                    //     console.log(e)
+                    //     this.$message.warning('文件不存在,预览失败')
+                    // })
                }
            },
            // 导入标准数据成功后执行
@@ -2126,35 +2141,43 @@
                    switch (this.fileType){
                        case 'FBGBUSS':
                            this.FBGBUSSFileList = this.FBGBUSSFileList.filter ( item => item.response === undefined);
-                            this.FBGBUSSFileList.push(fileObj)
+                            if(this.FBGBUSSFileList.every(item => item.id !== fileObj.id))
+                              this.FBGBUSSFileList.push(fileObj)
                            break;
                        case 'BZSMBUSS' :
                            this.BZSMBUSSFileList = this.BZSMBUSSFileList.filter ( item => item.response === undefined);
-                            this.BZSMBUSSFileList.push(fileObj)
+                            if(this.BZSMBUSSFileList.every(item => item.id !== fileObj.id))
+                              this.BZSMBUSSFileList.push(fileObj)
                            break;
                        case 'LSBBBUSS':
                            this.LSBBBUSSFileList = this.LSBBBUSSFileList.filter ( item => item.response === undefined);
-                            this.LSBBBUSSFileList.push(fileObj)
+                            if(this.LSBBBUSSFileList.every(item => item.id !== fileObj.id))
+                              this.LSBBBUSSFileList.push(fileObj)
                            break;
                        case 'QTWJBUSS':
                            this.QTWJBUSSFileList = this.QTWJBUSSFileList.filter ( item => item.response === undefined);
-                            this.QTWJBUSSFileList.push(fileObj)
+                            if(this.QTWJBUSSFileList.every(item => item.id !== fileObj.id))
+                              this.QTWJBUSSFileList.push(fileObj)
                            break;
                        case 'GLWJBUSS':
                            this.GLWJBUSSFileList = this.GLWJBUSSFileList.filter ( item => item.response === undefined);
-                            this.GLWJBUSSFileList.push(fileObj)
+                            if(this.GLWJBUSSFileList.every(item => item.id !== fileObj.id))
+                              this.GLWJBUSSFileList.push(fileObj)
                            break;
                        case 'summaryFile':
                            this.summaryFileList = this.summaryFileList.filter ( item => item.response === undefined);
-                            this.summaryFileList.push(fileObj)
+                            if(this.summaryFileList.every(item => item.id !== fileObj.id))
+                              this.summaryFileList.push(fileObj)
                            break;
                        case 'madelSub':
                            this.madelSubList = this.madelSubList.filter ( item => item.response === undefined);
-                            this.madelSubList.push(fileObj)
+                            if(this.madelSubList.every(item => item.id !== fileObj.id))
+                              this.madelSubList.push(fileObj)
                            break;
                        case 'XGD':
                            this.XGDFileList = this.XGDFileList.filter ( item => item.response === undefined);
-                            this.XGDFileList.push(fileObj)
+                            if(this.XGDFileList.every(item => item.id !== fileObj.id))
+                              this.XGDFileList.push(fileObj)
                            break;
                        default : ;
                    }
@@ -2164,6 +2187,8 @@
                        message: response.message,
                        type: 'success'
                    })
+                    // 关闭上传弹框
+                    this.fileMadel = false
                }
            },
            downloadFile (data) {
@@ -2235,6 +2260,7 @@
                    default : ;
                }
                this.formKey++
+                this.fileMadel = false
            },
            popoverHideBusVs (checkedIds, checkedData,isShow,isLoadChild,topId) {
                if(checkedData) {