修改文件上传

src/components/editEl/editEl14.vue

@@ -1,133 +1,282 @@
 <template>
-  <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+  <div class="param-container">
-    <h2 class="title1" style="line-height: 40px">资料下载</h2>
+    <h2 class="title1">资料下载</h2>
-    <div>
+    <el-table :data="tableRows" style="width: 100%">
-      <el-table
+      <el-table-column label="产品说明书" min-width="280" align="center">
-          :data="data.fileList"
+        <template slot-scope="scope">
-          style="width: 100%">
+          <div class="cell-wrap">
-        <el-table-column
+            <div v-if="hasFile(scope.row.manual)" class="file-card">
-            width="300"
+              <i class="el-icon-close file-close" @click="removeFile(scope.$index, 'manual')"></i>
-            label="文件名称">
+              <div class="file-name" @click="renameFile(scope.row.manual)">
-          <template slot-scope="scope">
+                {{ scope.row.manual.fileName || scope.row.manual.name || '未命名文件' }}
-            <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
+              </div>
-          </template>
+              <el-button type="text" size="mini" class="password-btn" @click="openPasswordDialog(scope.row.manual)">
-        </el-table-column>
+                设置密码
-        <el-table-column
+              </el-button>
-            prop="value"
+            </div>
-            label="文件介绍">
+            <el-upload
-          <template slot-scope="scope">
+                v-else
-            <el-input v-model="scope.row.value" placeholder="请输入内容"></el-input>
+                class="upload-slot"
-          </template>
+                :action="uploadAction"
-        </el-table-column>
+                :show-file-list="false"
-        <el-table-column
+                :on-success="(res, file) => handleUploadSuccess(res, file, scope.$index, 'manual')">
-            fixed="right"
+              <i class="el-icon-circle-plus upload-icon"></i>
-            label="操作"
+            </el-upload>
-            width="300">
+          </div>
-          <template slot-scope="scope">
+        </template>
-            <UploadFile style="width: 50px;display: inline-block" :data="scope.row"
+      </el-table-column>
-                        field="url">
+      <el-table-column label="通讯协议" min-width="280" align="center">
-              <el-button size="small" type="text">上传</el-button>
+        <template slot-scope="scope">
-            </UploadFile>
+          <div class="cell-wrap">
-            <el-button @click="addPassword(scope.row)" type="text" size="small">设置密码</el-button>
+            <div v-if="hasFile(scope.row.protocol)" class="file-card">
-            <el-button @click="del(scope.$index,scope.row)" type="text" size="small">删除</el-button>
+              <i class="el-icon-close file-close" @click="removeFile(scope.$index, 'protocol')"></i>
-          </template>
+              <div class="file-name" @click="renameFile(scope.row.protocol)">
-        </el-table-column>
+                {{ scope.row.protocol.fileName || scope.row.protocol.name || '未命名文件' }}
-      </el-table>
+              </div>
-      <div style="width: 100%;height: 20px"
+              <el-button type="text" size="mini" class="password-btn" @click="openPasswordDialog(scope.row.protocol)">
-           @click="data.fileList.push({name:'名称',value:'介绍',url:'',fileName:''})">
+                设置密码
-        <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 100px"></i>
+              </el-button>
-      </div>
+            </div>
-
+            <el-upload
-
+                v-else
-      <!--      <div v-for="(i,k) in data.fileList" class="fileCard" style="text-align: left;position: relative;">-->
+                class="upload-slot"
-      <!--        <i class="del el-icon-circle-close" @click="del(k,i)  "></i>-->
+                :action="uploadAction"
-      <!--        <div class="cardTitle" contenteditable="true" @blur="edit5('name',k,$event)">{{ i.name }}</div>-->
+                :show-file-list="false"
-      <!--        <div class="cardValue" contenteditable="true" @blur="edit5('value',k,$event)">{{ i.value }}</div>-->
+                :on-success="(res, file) => handleUploadSuccess(res, file, scope.$index, 'protocol')">
-      <!--        <UploadFile style="position:absolute;top: 50%;right: 50px;transform: translateY(-50%)" :data="i" field="url"/>-->
+              <i class="el-icon-circle-plus upload-icon"></i>
-      <!--        <el-button type="warning"-->
+            </el-upload>
-      <!--                   style="position:absolute;top: 50%;right: 0;transform: translateY(-50%)"-->
+          </div>
-      <!--                   icon="el-icon-key" circle-->
+        </template>
-      <!--                   size="mini" @click="addPassword(i)"></el-button>-->
+      </el-table-column>
-      <!--      </div>-->
+      <el-table-column label="其他" min-width="280" align="center">
-      <!--      <div class="fileCard"-->
+        <template slot-scope="scope">
-      <!--           @click="data.fileList.push({name:'名称',value:'介绍',url:'',fileName:''})">-->
+          <div class="cell-wrap">
-      <!--        <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 100px"></i>-->
+            <div v-if="hasFile(scope.row.other)" class="file-card">
-      <!--      </div>-->
+              <i class="el-icon-close file-close" @click="removeFile(scope.$index, 'other')"></i>
+              <div class="file-name" @click="renameFile(scope.row.other)">
+                {{ scope.row.other.fileName || scope.row.other.name || '未命名文件' }}
+              </div>
+              <el-button type="text" size="mini" class="password-btn" @click="openPasswordDialog(scope.row.other)">
+                设置密码
+              </el-button>
+            </div>
+            <el-upload
+                v-else
+                class="upload-slot"
+                :action="uploadAction"
+                :show-file-list="false"
+                :on-success="(res, file) => handleUploadSuccess(res, file, scope.$index, 'other')">
+              <i class="el-icon-circle-plus upload-icon"></i>
+            </el-upload>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" align="center">
+        <template slot-scope="scope">
+          <i class="el-icon-close row-close" @click="removeRow(scope.$index)"></i>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="add-row" @click="addRow">
+      <i class="el-icon-circle-plus add-row-icon"></i>
+      <span>新增一行</span>
     </div>
 
-    <el-dialog title="设置密码" :visible.sync="setPasswordVisible">
+    <el-dialog title="设置密码" :visible.sync="setPasswordVisible" width="420px">
-      <el-form :model="form" label-width="50px">
+      <el-form :model="passwordForm" label-width="60px">
         <el-form-item label="密码">
-          <el-input v-model="form.password" autocomplete="off"></el-input>
+          <el-input v-model="passwordForm.password" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer">
-        <el-button type="primary" @click="setPassword">确 定</el-button>
+        <el-button @click="setPasswordVisible = false">取消</el-button>
+        <el-button type="primary" @click="setPassword">确定</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
-import UploadEl from "@/components/editEl/uploadEl.vue";
+import {addHwWebDocument, delHwWebDocument, getHwWebDocument, updateHwWebDocument} from "@/api/hwWebDocument";
-import UploadFile from "@/components/editEl/uploadFile.vue";
+import {v4 as uuidv4} from "uuid";
-import {delHwWebDocument, getHwWebDocument, updateHwWebDocument} from "@/api/hwWebDocument";
+
+function createEmptyFile() {
+  return {
+    fileName: '',
+    name: '',
+    url: '',
+    uuid: ''
+  }
+}
+
+function createEmptyRow() {
+  return {
+    manual: createEmptyFile(),
+    protocol: createEmptyFile(),
+    other: createEmptyFile()
+  }
+}
 
 export default {
   name: 'PlatformFeatures',
   props: ['data'],
-  components: {UploadFile, UploadEl},
-
   data() {
     return {
+      uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
       setPasswordVisible: false,
-      form: {}
+      passwordForm: {
+        id: '',
+        password: ''
+      }
+    }
+  },
+  computed: {
+    tableRows() {
+      return this.data.fileList || []
     }
   },
   mounted() {
+    this.normalizeFileList()
   },
   methods: {
-    edit5(key, index, e) {
+    normalizeFileList() {
-      this.$props.data.fileList[index][key] = e.target.innerText
+      if (!Array.isArray(this.data.fileList)) {
+        this.$set(this.data, 'fileList', [])
+        return
+      }
+      this.data.fileList = this.data.fileList.map((row) => {
+        if (row && row.manual && row.protocol && row.other) {
+          return {
+            manual: {...createEmptyFile(), ...row.manual},
+            protocol: {...createEmptyFile(), ...row.protocol},
+            other: {...createEmptyFile(), ...row.other}
+          }
+        }
+        return {
+          manual: createEmptyFile(),
+          protocol: createEmptyFile(),
+          other: {...createEmptyFile(), ...row}
+        }
+      })
+      if (!this.data.fileList.length) {
+        this.data.fileList.push(createEmptyRow())
+      }
     },
-    del(key, data) {
+    hasFile(file) {
-      if (data.uuid) {
+      return !!(file && (file.url || file.fileName || file.name))
-        delHwWebDocument(data.uuid).then(res => {
+    },
+    addRow() {
+      this.data.fileList.push(createEmptyRow())
+    },
+    handleUploadSuccess(res, file, rowIndex, field) {
+      if (res.code !== 200) {
+        this.$message.error('上传失败')
+        return
+      }
+      const row = this.data.fileList[rowIndex]
+      const target = row[field]
+      const id = uuidv4()
+      const fileUrl = res.data?.url || res.url || ''
+      const fileName = res.data?.name || res.originalFilename || file.name || '未命名文件'
+
+      target.uuid = id
+      target.url = fileUrl
+      target.fileName = fileName
+      target.name = fileName
+
+      addHwWebDocument({
+        documentId: id,
+        documentAddress: fileUrl
+      }).then((result) => {
+        if (result.code === 200) {
+          this.$message.success('上传成功')
+        } else {
+          this.$message.error(result.msg || '上传失败')
+        }
+      })
+    },
+    renameFile(file) {
+      this.$prompt('请输入新的文件名', '修改文件名', {
+        inputValue: file.fileName || file.name || '',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(({value}) => {
+        file.fileName = value
+        file.name = value
+      }).catch(() => {
+      })
+    },
+    openPasswordDialog(file) {
+      if (!file.uuid) {
+        this.$message.error('请先上传文件')
+        return
+      }
+      getHwWebDocument(file.uuid).then((res) => {
+        this.passwordForm = {
+          id: file.uuid,
+          password: res.data?.secretKey || ''
+        }
+        this.setPasswordVisible = true
+      })
+    },
+    setPassword() {
+      updateHwWebDocument({
+        documentId: this.passwordForm.id,
+        secretKey: this.passwordForm.password
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message.success('设置成功')
+          this.setPasswordVisible = false
+        } else {
+          this.$message.error(res.msg || '设置失败')
+        }
+      })
+    },
+    removeFile(rowIndex, field) {
+      const target = this.data.fileList[rowIndex][field]
+      const clearFile = () => {
+        this.$set(this.data.fileList[rowIndex], field, createEmptyFile())
+      }
+
+      if (target.uuid) {
+        delHwWebDocument(target.uuid).then((res) => {
           if (res.code === 200) {
+            clearFile()
             this.$message.success('删除成功')
-            this.$props.data.fileList.splice(key, 1)
           } else {
             this.$message.error('删除失败')
           }
         })
-      } else {
+        return
-        this.$message.success('删除成功')
-        this.$props.data.fileList.splice(key, 1)
       }
+
+      clearFile()
+      this.$message.success('删除成功')
     },
-    addPassword(e) {
+    removeRow(rowIndex) {
-      if (e.uuid) {
+      const row = this.data.fileList[rowIndex]
-        getHwWebDocument(e.uuid).then(res => {
+      const uuids = ['manual', 'protocol', 'other']
-          this.form = {
+        .map((key) => row[key]?.uuid)
-            id: e.uuid,
+        .filter(Boolean)
-            password: res.data.secretKey,
+
-          }
+      if (!uuids.length) {
-          this.setPasswordVisible = true
+        this.data.fileList.splice(rowIndex, 1)
-        })
+        if (!this.data.fileList.length) {
-      } else {
+          this.data.fileList.push(createEmptyRow())
-        this.$message.error('请先上传文件')
-      }
-    },
-    setPassword() {
-      updateHwWebDocument({
-        documentId: this.form.id,
-        secretKey: this.form.password
-      }).then(res => {
-        if (res.code === 200) {
-          this.$message.success('设置成功')
-          this.setPasswordVisible = false
         }
+        return
+      }
+
+      Promise.all(uuids.map((uuid) => delHwWebDocument(uuid).catch(() => ({code: 500})))).then((results) => {
+        if (results.some((item) => item.code !== 200)) {
+          this.$message.error('删除失败')
+          return
+        }
+        this.data.fileList.splice(rowIndex, 1)
+        if (!this.data.fileList.length) {
+          this.data.fileList.push(createEmptyRow())
+        }
+        this.$message.success('删除成功')
       })
     }
   }
@@ -135,60 +284,84 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "~@/style.less";
+.param-container {
-
+  padding: 5vw 10vw;
-.fileCard {
+  background-color: #fff;
-  vertical-align: top;
-  display: inline-block;
-  width: 40%;
-  height: 100px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  margin-top: 1vw;
-  position: relative;
-
-  .cardTitle {
-    position: absolute;
-    top: 10px;
-    left: 20px;
-    font-size: 22px;
-    font-weight: 700;
-    line-height: 45px;
-    width: calc(100% - 80px);
-    white-space: nowrap; /* 不换行 */
-    overflow: hidden; /* 超出部分隐藏 */
-    text-overflow: ellipsis; /* 超出部分显示省略号 */
-  }
-
-  .cardValue {
-    position: absolute;
-    top: 55px;
-    width: calc(100% - 80px);
-    left: 20px;
-    font-size: 14px;
-    line-height: 45px;
-    color: #aaa;
-    white-space: nowrap; /* 不换行 */
-    overflow: hidden; /* 超出部分隐藏 */
-    text-overflow: ellipsis; /* 超出部分显示省略号 */
-  }
-
-  .downIcon {
-    position: absolute;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &:nth-child(2n) {
-    margin-left: 5%;
-  }
 }
 
-.del {
+.title1 {
-  position: absolute;
+  line-height: 40px;
-  right: 0;
+}
-  top: 0;
+
+/deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 700;
+}
+
+.cell-wrap {
+  min-height: 76px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-slot {
+  width: 100%;
   cursor: pointer;
 }
+
+.upload-icon {
+  font-size: 28px;
+  color: #409eff;
+}
+
+.file-card {
+  width: 100%;
+  min-height: 76px;
+  position: relative;
+  border: 1px dashed #dcdfe6;
+  border-radius: 8px;
+  padding: 16px 28px 16px 12px;
+  box-sizing: border-box;
+  background-color: #fafafa;
+}
+
+.file-name {
+  color: #409eff;
+  cursor: pointer;
+  word-break: break-all;
+}
+
+.password-btn {
+  margin-top: 6px;
+  padding: 0;
+}
+
+.file-close,
+.row-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  color: #f56c6c;
+}
+
+.row-close {
+  position: static;
+  font-size: 18px;
+}
+
+.add-row {
+  margin-top: 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #409eff;
+  cursor: pointer;
+}
+
+.add-row-icon {
+  font-size: 20px;
+}
 </style>