From f541cbce000bdce087c912b2d9966d5625369649 Mon Sep 17 00:00:00 2001
From: zyn <nn_0223@163.com>
Date: Wed, 24 Jan 2024 17:44:13 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E6=A0=87=E5=87=86=E5=85=A5=E5=BA=93?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E3=80=81=E6=8A=80=E6=9C=AF=E6=A0=87=E5=87=86?=
 =?UTF-8?q?=E5=8F=91=E5=B8=83):=20=E6=96=87=E4=BB=B6=E5=8F=AF=E6=9B=B4?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/creatProcess/bzrk/step1.vue         | 100 +++++++++++++++++-
 .../pages/creatProcess/bzrk/step4.vue         |  99 ++++++++++++++++-
 .../pages/creatProcess/qbrk/step13.vue        |  99 ++++++++++++++++-
 3 files changed, 294 insertions(+), 4 deletions(-)

diff --git a/src/pages/processCenter/pages/creatProcess/bzrk/step1.vue b/src/pages/processCenter/pages/creatProcess/bzrk/step1.vue
index 574efe6ee..2fbe3a883 100644
--- a/src/pages/processCenter/pages/creatProcess/bzrk/step1.vue
+++ b/src/pages/processCenter/pages/creatProcess/bzrk/step1.vue
@@ -1426,13 +1426,58 @@
         :before-upload="beginImportFile"
         :on-success="importFileSuccess"
         :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
       >
         <div>
           <i class="el-icon-upload" style="color: #3399ff" />
           <p>点击或拖拽上传文件</p>
         </div>
       </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <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>
     <!-- 新建抽屉 -->
     <el-drawer
@@ -1961,6 +2006,12 @@ export default {
       })
     }
     return {
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false,
       disabledXX: !!this.$route.query.disabledXX,
       ccc: false,
       productTitle: '', // 模态框标题
@@ -2505,6 +2556,43 @@ export default {
     this.modelFunc()
   },
   methods: {
+    handleRemoveFile (file) {
+      const fileList = []
+      this.fileList.forEach(item => {
+        const fileId = file.id || file.response.data.id
+        const itemId = item.id || item.response.data.id
+        if (fileId !== itemId) {
+          fileList.push(item)
+        }
+      })
+      this.fileList = fileList
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id || file.response.data.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.fileList.forEach(item => {
+            const id = item.id || item.response.data.id
+            if(id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          this.removeOneFile('_', this.fileList)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
     // 新增
     productAdd () {
       this.productModal = true
@@ -3609,7 +3697,7 @@ export default {
         //     }
         //     this.form.zbjbdName += response.data.name+',';
         // }
-
+        this.fileList = fileList
         switch (this.fileType) {
           case 'fbgbjbd':
             this.FBGBJBDFileList = fileList;
@@ -4419,4 +4507,12 @@ export default {
     height: 8%;
   }
 }
+.el-upload-list__item .el-icon-edit{
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  cursor: pointer;
+  opacity: .75;
+  color: #606266;
+}
 </style>
diff --git a/src/pages/processCenter/pages/creatProcess/bzrk/step4.vue b/src/pages/processCenter/pages/creatProcess/bzrk/step4.vue
index 207ef32ff..8a7af236f 100644
--- a/src/pages/processCenter/pages/creatProcess/bzrk/step4.vue
+++ b/src/pages/processCenter/pages/creatProcess/bzrk/step4.vue
@@ -1562,13 +1562,58 @@
         :on-success="importFileSuccess"
         :on-change="fileChange"
         :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
       >
         <div>
           <i class="el-icon-upload" style="color: #3399ff" />
           <p>点击或拖拽上传文件</p>
         </div>
       </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <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>
     <el-dialog
       :title="config.attrName"
@@ -1770,6 +1815,12 @@ export default {
   },
   data () {
     return {
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false,
       submitType: '',
       bpnId: '',
       ccc: false,
@@ -2096,6 +2147,43 @@ export default {
     this.modelFunc()
   },
   methods: {
+    handleRemoveFile (file) {
+      const fileList = []
+      this.fileList.forEach(item => {
+        const fileId = file.id || file.response.data.id
+        const itemId = item.id || item.response.data.id
+        if (fileId !== itemId) {
+          fileList.push(item)
+        }
+      })
+      this.fileList = fileList
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id || file.response.data.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.fileList.forEach(item => {
+            const id = item.id || item.response.data.id
+            if(id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          this.removeOneFile('_', this.fileList)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
     // 限制上传文件个数
     handleExceed (files, fileList) {
       this.$message.warning(`当前限制选择 8 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
@@ -2581,6 +2669,7 @@ export default {
         //   this.form.caName += response.data.name+',';
         // }
 
+        this.fileList = fileList
         switch (this.fileType) {
           case 'fbgbjbd':
             this.FBGBJBDFileList = fileList;
@@ -3348,4 +3437,12 @@ export default {
     }
   }
 }
+.el-upload-list__item .el-icon-edit{
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  cursor: pointer;
+  opacity: .75;
+  color: #606266;
+}
 </style>
diff --git a/src/pages/processCenter/pages/creatProcess/qbrk/step13.vue b/src/pages/processCenter/pages/creatProcess/qbrk/step13.vue
index 0ba3f9c64..d7d823b21 100644
--- a/src/pages/processCenter/pages/creatProcess/qbrk/step13.vue
+++ b/src/pages/processCenter/pages/creatProcess/qbrk/step13.vue
@@ -187,13 +187,58 @@
         :on-success="importFileSuccess"
         :on-preview="handleFilePreview"
         :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
       >
         <div style="padding: 20px 0">
           <i class="el-icon-upload" style="color: #3399ff" />
           <p>点击或拖拽上传文件</p>
         </div>
       </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <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>
     <el-dialog
       :title="config.attrName"
@@ -692,6 +737,12 @@ export default {
       callback()
     };
     return {
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false,
       pickerOptions: {
         shortcuts: [ {
           text: '最近一周',
@@ -1211,6 +1262,43 @@ export default {
     // this.getMaxStandnSn();
   },
   methods: {
+    handleRemoveFile (file) {
+      const fileList = []
+      this.fileList.forEach(item => {
+        const fileId = file.id || file.response.data.id
+        const itemId = item.id || item.response.data.id
+        if (fileId !== itemId) {
+          fileList.push(item)
+        }
+      })
+      this.fileList = fileList
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.id || file.response.data.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.fileList.forEach(item => {
+            const id = item.id || item.response.data.id
+            if(id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          this.removeOneFile('_', this.fileList)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
     reveseStatusChange (val) {
       if(this.form.reviseStatus === '1') {
         this.$http.get('lawss/sarBussionessStand/getStandInfoByReviseStatus', { reviseStatus: 'buss1_' + this.form.reviseStatus, standSort: this.form.standSort, taskId: this.taskIds }, {
@@ -2285,6 +2373,7 @@ export default {
         const fileObj = {}
         fileObj.id = file.response.data.id
         fileObj.name = file.response.data.name
+        this.fileList = fileList
         switch (this.fileType) {
           case 'FBGBUSS':
             this.FBGBUSSFileList = this.FBGBUSSFileList.filter( item => item.response === undefined);
@@ -3240,4 +3329,12 @@ export default {
             }
         }
     }
+    .el-upload-list__item .el-icon-edit{
+      position: absolute;
+      top: 5px;
+      right: 25px;
+      cursor: pointer;
+      opacity: .75;
+      color: #606266;
+    }
 </style>