suixy
/
portal_website_edit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改文件上传

Browse Source
main
suixy 2 weeks ago
parent 918f62958e
commit 707b0b399c
1 changed files with 321 additions and 148 deletions
Show Stats Download Patch File Download Diff File

469
src/components/editEl/editEl14.vue
Unescape Escape View File

@ -1,133 +1,282 @@
<template>
<div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
<h2 class="title1" style="line-height: 40px">资料下载</h2>
<div>
<el-table
:data="data.fileList"
style="width: 100%">
<el-table-column
width="300"
label="文件名称">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column
prop="value"
label="文件介绍">
<template slot-scope="scope">
<el-input v-model="scope.row.value" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="300">
<template slot-scope="scope">
<UploadFile style="width: 50px;display: inline-block" :data="scope.row"
field="url">
<el-button size="small" type="text">上传</el-button>
</UploadFile>
<el-button @click="addPassword(scope.row)" type="text" size="small">设置密码</el-button>
<el-button @click="del(scope.$index,scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="width: 100%;height: 20px"
@click="data.fileList.push({name:'名称',value:'介绍',url:'',fileName:''})">
<i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 100px"></i>
</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: 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:''})">-->
<!-- <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 100px"></i>-->
<!-- </div>-->
<div class="param-container">
<h2 class="title1">资料下载</h2>
<el-table :data="tableRows" style="width: 100%">
<el-table-column label="产品说明书" min-width="280" align="center">
<template slot-scope="scope">
<div class="cell-wrap">
<div v-if="hasFile(scope.row.manual)" class="file-card">
<i class="el-icon-close file-close" @click="removeFile(scope.$index, 'manual')"></i>
<div class="file-name" @click="renameFile(scope.row.manual)">
{{ scope.row.manual.fileName || scope.row.manual.name || '未命名文件' }}
</div>
<el-button type="text" size="mini" class="password-btn" @click="openPasswordDialog(scope.row.manual)">
设置密码
</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, 'manual')">
<i class="el-icon-circle-plus upload-icon"></i>
</el-upload>
</div>
</template>
</el-table-column>
<el-table-column label="通讯协议" min-width="280" align="center">
<template slot-scope="scope">
<div class="cell-wrap">
<div v-if="hasFile(scope.row.protocol)" class="file-card">
<i class="el-icon-close file-close" @click="removeFile(scope.$index, 'protocol')"></i>
<div class="file-name" @click="renameFile(scope.row.protocol)">
{{ scope.row.protocol.fileName || scope.row.protocol.name || '未命名文件' }}
</div>
<el-button type="text" size="mini" class="password-btn" @click="openPasswordDialog(scope.row.protocol)">
设置密码
</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, 'protocol')">
<i class="el-icon-circle-plus upload-icon"></i>
</el-upload>
</div>
</template>
</el-table-column>
<el-table-column label="其他" min-width="280" align="center">
<template slot-scope="scope">
<div class="cell-wrap">
<div v-if="hasFile(scope.row.other)" class="file-card">
<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-form :model="form" label-width="50px">
<el-dialog title="设置密码" :visible.sync="setPasswordVisible" width="420px">
<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">
<el-button type="primary" @click="setPassword">确 定</el-button>
<div slot="footer">
<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 UploadFile from "@/components/editEl/uploadFile.vue";
import {delHwWebDocument, getHwWebDocument, updateHwWebDocument} from "@/api/hwWebDocument";
import {addHwWebDocument, delHwWebDocument, getHwWebDocument, updateHwWebDocument} from "@/api/hwWebDocument";
import {v4 as uuidv4} from "uuid";
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) {
this.$props.data.fileList[index][key] = e.target.innerText
normalizeFileList() {
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) {
if (data.uuid) {
delHwWebDocument(data.uuid).then(res => {
hasFile(file) {
return !!(file && (file.url || file.fileName || file.name))
},
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 {
this.$message.success('删除成功')
this.$props.data.fileList.splice(key, 1)
return
}
clearFile()
this.$message.success('删除成功')
},
addPassword(e) {
if (e.uuid) {
getHwWebDocument(e.uuid).then(res => {
this.form = {
id: e.uuid,
password: res.data.secretKey,
}
this.setPasswordVisible = true
})
} else {
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
removeRow(rowIndex) {
const row = this.data.fileList[rowIndex]
const uuids = ['manual', 'protocol', 'other']
.map((key) => row[key]?.uuid)
.filter(Boolean)
if (!uuids.length) {
this.data.fileList.splice(rowIndex, 1)
if (!this.data.fileList.length) {
this.data.fileList.push(createEmptyRow())
}
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";
.fileCard {
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%;
}
.param-container {
padding: 5vw 10vw;
background-color: #fff;
}
.del {
position: absolute;
right: 0;
top: 0;
.title1 {
line-height: 40px;
}
/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>

Write Preview
Loading…
Cancel
Save