添加组件

src/App.vue

@@ -37,4 +37,8 @@ body {
 
 }
 
+/deep/ .el-message {
+  z-index: 999;
+}
 </style>
+

src/api/hwWebDocument.js

@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+// 查询Hw资料文件列表
+export function listHwWebDocument(query) {
+    return request({
+        url: '/portal/hwWebDocument/list', method: 'get', params: query
+    })
+}
+
+// 查询Hw资料文件详细
+export function getHwWebDocument(documentId) {
+    return request({
+        url: '/portal/hwWebDocument/' + documentId, method: 'get'
+    })
+}
+
+// 新增Hw资料文件
+export function addHwWebDocument(data) {
+    return request({
+        url: '/portal/hwWebDocument', method: 'post', data: data
+    })
+}
+
+// 修改Hw资料文件
+export function updateHwWebDocument(data) {
+    return request({
+        url: '/portal/hwWebDocument', method: 'put', data: data
+    })
+}
+
+// 删除Hw资料文件
+export function delHwWebDocument(documentId) {
+    return request({
+        url: '/portal/hwWebDocument/' + documentId, method: 'delete'
+    })
+}
+
+// 获取安全文件地址
+export function getSecureDocumentAddress(data) {
+    return request({
+        url: '/portal/hwWebDocument/getSecureDocumentAddress', method: 'post', data: data
+    })
+}

src/components/editEl/editEl14.vue

@@ -2,11 +2,15 @@
   <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
     <h2 class="title1" style="line-height: 40px">资料下载</h2>
     <div>
-
       <div v-for="(i,k) in data.fileList" class="fileCard" style="text-align: left;position: relative;">
+        <i class="del el-icon-circle-close" @click="del(k,i)  "></i>
         <div class="cardTitle" contenteditable="true" @blur="edit5('name',k,$event)">{{ i.name }}</div>
         <div class="cardValue" contenteditable="true" @blur="edit5('value',k,$event)">{{ i.value }}</div>
-        <UploadFile style="position:absolute;top: 50%;right: 10px;transform: translateY(-50%)" :data="i" field="url"/>
+        <UploadFile style="position:absolute;top: 50%;right: 50px;transform: translateY(-50%)" :data="i" field="url"/>
+        <el-button type="warning"
+                   style="position:absolute;top: 50%;right: 0;transform: translateY(-50%)"
+                   icon="el-icon-key" circle
+                   size="mini" @click="addPassword(i)"></el-button>
       </div>
       <div class="fileCard"
            @click="data.fileList.push({name:'名称',value:'介绍',url:'',fileName:''})">
@@ -14,12 +18,24 @@
       </div>
     </div>
 
+    <el-dialog title="设置密码" :visible.sync="setPasswordVisible">
+      <el-form :model="form" label-width="50px">
+        <el-form-item label="密码">
+          <el-input v-model="form.password" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="setPassword">确 定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import UploadEl from "@/components/editEl/uploadEl.vue";
 import UploadFile from "@/components/editEl/uploadFile.vue";
+import {delHwWebDocument, getHwWebDocument, updateHwWebDocument} from "@/api/hwWebDocument";
 
 export default {
   name: 'PlatformFeatures',
@@ -27,7 +43,10 @@ export default {
   components: {UploadFile, UploadEl},
 
   data() {
-    return {}
+    return {
+      setPasswordVisible: false,
+      form: {}
+    }
   },
   mounted() {
   },
@@ -35,6 +54,36 @@ export default {
     edit5(key, index, e) {
       this.$props.data.fileList[index][key] = e.target.innerText
     },
+    del(key, data) {
+      delHwWebDocument(data.uuid).then(res => {
+        if (res.code === 200) {
+          this.$message.success('删除成功')
+          this.$props.data.fileList.splice(key, 1)
+        } else {
+          this.$message.error('删除失败')
+        }
+      })
+    },
+    addPassword(e) {
+      getHwWebDocument(e.uuid).then(res => {
+        this.form = {
+          id: e.uuid,
+          password: res.data.secretKey,
+        }
+        this.setPasswordVisible = true
+      })
+    },
+    setPassword() {
+      updateHwWebDocument({
+        documentId: this.form.id,
+        secretKey: this.form.password
+      }).then(res => {
+        if (res.code === 200) {
+          this.$message.success('设置成功')
+          this.setPasswordVisible = false
+        }
+      })
+    }
   }
 }
 </script>

src/components/editEl/uploadFile.vue

@@ -12,6 +12,9 @@
   </div>
 </template>
 <script>
+import {addHwWebDocument} from "@/api/hwWebDocument";
+import uuid from 'uuid/v4';
+
 export default {
   props: ['data', 'field'],
   data() {
@@ -21,8 +24,8 @@ export default {
   },
   computed: {
     fileList() {
-      if (this.$props.data[this.$props.field || 'file']) {
+      if (this.$props.data.fileName) {
-        return [{url: this.$props.data[this.$props.field || 'file'], name: this.$props.data.fileName}]
+        return [{url: '', name: this.$props.data.fileName}]
       } else {
         return []
       }
@@ -30,11 +33,15 @@ export default {
   },
   methods: {
     handleAvatarSuccess(res, file, fileList) {
-      console.log(fileList)
       if (res.code === 200) {
-        console.log(res)
+        let id = uuid();
-        this.$props.data[this.$props.field || 'file'] = res.data.url
         this.$props.data.fileName = res.data.name
+        this.$props.data.uuid = id
+        addHwWebDocument({documentId: id, documentAddress: res.data.url}).then(res => {
+          if (res.code === 200) {
+            this.$message.success('上传成功')
+          }
+        })
       }
     },
     beforeAvatarUpload(file) {

src/components/el/el14.vue

@@ -6,46 +6,70 @@
       <div v-for="i in data.fileList" class="fileCard" style="text-align: left">
         <div class="cardTitle">{{ i.name }}</div>
         <div class="cardValue">{{ i.value }}</div>
-        <el-button @click="downFile(i.url,i.fileName)" type="primary" class="downIcon" icon="el-icon-download "
+        <el-button @click="downFile( i)" type="primary" class="downIcon" icon="el-icon-download "
                    circle></el-button>
       </div>
     </div>
 
+    <el-dialog title="输入密码" :modal-append-to-body="false" :visible.sync="getPasswordVisible">
+      <el-form :model="form" label-width="50px">
+        <el-form-item label="密码">
+          <el-input v-model="form.secretKey" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="downFile1">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 
+import {getSecureDocumentAddress} from "@/api/hwWebDocument";
+
 export default {
   name: 'PlatformFeatures',
   props: ['data'],
   computed: {},
 
   data() {
-    return {}
+    return {
+      getPasswordVisible: false,
+      form: {}
+    }
   },
   mounted() {
   },
   methods: {
-    async downFile(url, filename) {
+    async downFile(e) {
-      try {
+      console.log(e)
-        const response = await fetch(url, {mode: 'cors'});
+      getSecureDocumentAddress({documentId: e.uuid}).then((res) => {
-        if (!response.ok) throw new Error('网络错误');
+        if (res.code === 200) {
-
+          console.log('下载地址', res.data)
-        const blob = await response.blob(); // 获取文件数据
+        } else {
-        const blobUrl = URL.createObjectURL(blob);
+          this.form = {
-
+            documentId: e.uuid,
-        const a = document.createElement('a');
+            secretKey: ''
-        a.href = blobUrl;
-        a.download = filename || url.split('/').pop();
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-
-        URL.revokeObjectURL(blobUrl); // 释放内存
-      } catch (err) {
-        console.error('下载失败:', err);
           }
+          this.getPasswordVisible = true
+          this.$message.error('请输入密钥')
+        }
+      })
+    },
+    downFile1() {
+      if (!this.form.secretKey) {
+        this.$message.error('请输入密码')
+        return
+      }
+
+      getSecureDocumentAddress(this.form).then((res) => {
+        if (res.code === 200) {
+          console.log('下载地址', res.data)
+        } else {
+          this.$message.error('密钥错误')
+        }
+      })
     }
   }
 }
@@ -103,3 +127,5 @@ export default {
   }
 }
 </style>
+
+

src/views/editPage/index.vue

@@ -4,6 +4,8 @@
       <div class="title">
         页面编辑器
       </div>
+      {{ type }}-
+      {{ value }}
       <el-select clearable @change="typeChange" v-model="type" size="small" style="margin-right: 12px;"
                  placeholder="请选择">
         <el-option

src/views/productCenter/edit/produceModel.vue

@@ -47,11 +47,14 @@
                   </el-card>
                 </div>
               </template>
-              <div style="width: 100%; ;height: 50px;box-sizing: border-box;text-align: center">
+              <div class="content">
+                <el-card class="custom-card" shadow="hover"
+                         style="min-height: 300px;height: 30vw;box-sizing: border-box;position: relative;text-align:center">
                   <div style="width:100%;height:100%;"
                        @click="data.list[k].list.push({ name: '请输入', value: '请输入', icon: '',id:1 + (Math.max(1,...(data.list?.[k]?.list?.map(e => e.id ?? 0) || [0])) || 1)})">
-                  <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 50px"></i>
+                    <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: calc(30vw - 32px)"></i>
                   </div>
+                </el-card>
               </div>
             </div>
           </transition>
@@ -83,7 +86,11 @@ export default {
         this.$props.data.list.splice(parseFloat(e), 1);
       }
       if (action === 'add') {
-        this.$props.data.list.push({name: '请输入', list: [],})
+        this.$props.data.list.push({
+          name: '请输入',
+          list: [],
+          id: 1 + (Math.max(1, ...(this.data.list?.map(e => e.id ?? 0) || [0])) || 1)
+        })
       }
     },
     edit(key, e) {