From 878e3ab4f0bc7969ec7cb289d8b55ac651ea9219 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 20 Mar 2023 17:08:43 +0800
Subject: [PATCH] 修改文件上传逻辑，当上传文件后自动保存进数据库
---
src/views/modules/function.vue | 192 ++++++++++++++++++++++++++++++-----------------
1 files changed, 123 insertions(+), 69 deletions(-)
diff --git a/src/views/modules/function.vue b/src/views/modules/function.vue
index a1343af..5f2741f 100644
--- a/src/views/modules/function.vue
+++ b/src/views/modules/function.vue
@@ -9,8 +9,8 @@
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
- <div v-if="content.property== 2" class="model-type">
- <el-radio-group size="small" v-model="modelType">
+ <div v-if="selectNode.property== 2" class="model-type">
+ <el-radio-group size="small" v-model="radioType">
<el-radio-button label="管理"></el-radio-button>
<el-radio-button label="预览"></el-radio-button>
</el-radio-group>
@@ -45,48 +45,51 @@
<el-col :span="18">
<div class="func-content">
<!--开始页-->
- <div class="start" v-if="content.property == 1">
- <div class="start" v-if="content.fileUrl.length>0">
- <img class="start-img" :src="content.fileUrl[0].value">
+ <div class="start" v-if="selectNode.property == 1">
+ <div class="start" v-if="selectNode.fileUrl.length>0">
+ <img class="start-img" :src="selectNode.fileUrl[0].value">
<div class="start-button-group">
- <el-button disabled type="primary" size="small" v-for="data in contentFunList" :index="data.id" :key="data.id">
- {{ data.name }}
+ <el-button disabled type="primary" size="small" v-for="data in contentList" :index="data.id"
+ :key="data.id">{{ data.name }}
</el-button>
</div>
</div>
- <div v-else>
- <el-empty></el-empty>
- </div>
+ <el-empty v-else></el-empty>
</div>
- <!--内容页-->
- <div class="ddiv" v-if="content.property == 2">
- <div class="manage ddiv" v-if="modelType=='管理'">
+ <!--内容页-->
+ <div class="ddiv" v-if="selectNode.property == 2">
+
+ <div class="manage ddiv" v-if="radioType=='管理'">
<!--flash-->
- <div v-if="content.type == 1">
- <avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
+ <div v-if="selectNode.type == 1">
+ <avue-form :option="flashOption" v-model="flashForm" :upload-delete="uploadDelete" @submit="handleSubmitFile"></avue-form>
</div>
<!--图册-->
- <div v-if="content.type == 2">
- <avue-form :option="imgOption" v-model="imgForm" @submit="handleSubmitFile"></avue-form>
+ <div v-if="selectNode.type == 2">
+ <avue-form
+ :option="imgOption"
+ v-model="imgForm"
+ :upload-delete="uploadDelete"
+ @submit="handleSubmitFile"></avue-form>
</div>
<!--视频-->
- <div v-if="content.type == 3">
- <avue-form :option="videoOption" v-model="videoForm" @submit="handleSubmitFile"></avue-form>
+ <div v-if="selectNode.type == 3">
+ <avue-form :option="videoOption" v-model="videoForm" :upload-delete="uploadDelete" @submit="handleSubmitFile"></avue-form>
</div>
</div>
- <div class="view ddiv" v-if="modelType == '预览'">
+ <div class="view ddiv" v-if="radioType == '预览'">
<!--flash-->
- <div v-if="content.type == 1">
+ <div v-if="selectNode.type == 1">
</div>
<!--图册-->
- <div class="ddiv" v-if="content.type == 2">
+ <div class="ddiv" v-if="selectNode.type == 2">
<FlipBook class="flipbook" :pages="flipConfig.pages" :startPage="flipConfig.pageNum" v-slot="flipbook"
ref="flipbook">
<div class="action-bar">
@@ -103,16 +106,16 @@
</div>
<!--视频-->
- <div class="ddiv" v-if="content.type == 3">
+ <div class="ddiv" v-if="selectNode.type == 3">
<iframe class="view-iframe" :src="iframePath"/>
</div>
</div>
</div>
<!--结束页-->
- <div class="end" v-if="content.property == 3">
- <div class="end" v-if="content.fileUrl.length>0">
- <img class="end-img" :src="content.fileUrl[0].value">
+ <div class="end" v-if="selectNode.property == 3">
+ <div class="end" v-if="selectNode.fileUrl.length>0">
+ <img class="end-img" :src="selectNode.fileUrl[0].value">
</div>
<div v-else>
<el-empty></el-empty>
@@ -145,12 +148,12 @@
export default {
name: "function",
props: ['modules'],
- components: {FlipBook,LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ components: {FlipBook, LeftIcon, RightIcon, PlusIcon, MinusIcon},
data() {
return {
//所有功能集合
funList: [],
- contentFunList: [],
+ contentList: [],
// 弹框标题
title: '',
// 是否展示弹框
@@ -232,11 +235,11 @@
type: 'number',
span: 24,
display: false,
- rules: [{
- required: true,
- message: "请输入排序",
- trigger: "blur",
- }],
+ // rules: [{
+ // required: true,
+ // message: "请输入排序",
+ // trigger: "blur",
+ // }],
},
{
label: "页面背景",
@@ -307,6 +310,8 @@
form: {},
imgOption: {
+ submitBtn: false,
+ emptyBtn: false,
column: [
{
label: '图片',
@@ -314,20 +319,23 @@
type: 'upload',
span: 24,
dragFile: true,
- multiple:true,
+ // multiple: true,
accept: 'image/png, image/jpeg',
listType: "picture-card",
propsHttp: {
res: 'data',
url: 'link'
},
- action: "/api/blade-resource/oss/endpoint/put-file-attach"
+ action: "/api/function/function/put-file-attach",
+ data: {},
},
]
},
imgForm: {},
flashOption: {
+ submitBtn: false,
+ emptyBtn: false,
column: [
{
label: 'flash上传',
@@ -340,13 +348,15 @@
res: 'data',
url: 'link'
},
- action: "/api/blade-resource/oss/endpoint/put-file-attach"
+ action: "/api/function/function/put-file-attach"
},
]
},
flashForm: {},
videoOption: {
+ submitBtn: false,
+ emptyBtn: false,
column: [
{
label: '视频',
@@ -361,7 +371,7 @@
res: 'data',
url: 'link'
},
- action: "/api/blade-resource/oss/endpoint/put-file-attach"
+ action: "/api/function/function/put-file-attach"
},
]
},
@@ -371,15 +381,18 @@
children: 'children',
label: 'name'
},
- content: {},
- modelType: '管理',
-
+ //当前选中节点
+ selectNode: {},
+ //管理 预览切换
+ radioType: '管理',
+ //翻页预览的配置
flipConfig: {
pages: [],
pagesHiRes: [],
hasMouse: true,
pageNum: null,
},
+ //视频iframe路径
iframePath: "",
}
},
@@ -402,14 +415,59 @@
}
}
},
+ "flashForm.url":{
+ handler(newVal){
+ console.log(newVal)
+ }
+ },
+ "imgForm.url":{
+ handler(newVal){
+ console.log(newVal,"---")
+ this.flipConfig.pages = []
+ if (newVal.length > 0) {
+ newVal.forEach(e => {
+ this.flipConfig.pages.push(e.value)
+ })
+ }
+ }
+ },
+ "videoForm.url":{
+ handler(newVal){
+ console.log(newVal)
+ if (newVal.length > 0) {
+ let url = data.fileUrl[0].value
+ this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }
+ }
+ },
},
mounted() {
- this.getAllFunc()
+ this.onLoad()
},
methods: {
//返回模块列表页
backModules() {
this.$emit('backModules')
+ },
+ //加载左侧列表
+ onLoad() {
+ this.getAllFunc()
+ },
+ loadNode(data){
+ let column
+ if (data.type == 1) {
+ this.flashForm.url = data.fileUrl
+ column = this.findObject(this.flashOption.column, "url")
+ column.data = {id: data.id}
+ } else if (data.type == 2) {
+ this.imgForm.url = data.fileUrl
+ column = this.findObject(this.imgOption.column, "url")
+ column.data = {id: data.id}
+ } else if (data.type == 3) {
+ this.videoForm.url = data.fileUrl
+ column = this.findObject(this.videoOption.column, "url")
+ column.data = {id: data.id}
+ }
},
//获取当前模块id下的所有子功能
getAllFunc() {
@@ -419,7 +477,7 @@
getAll(params).then(res => {
if (res.data.code == 200) {
this.funList = res.data.data
- this.contentFunList = res.data.data.filter(e => {
+ this.contentList = res.data.data.filter(e => {
return e.property == 2
})
}
@@ -436,13 +494,13 @@
if (filterArray.length > 0) {
if (form.property == 1) {
- if (form.id != filterArray[0].id){
+ if (form.id != filterArray[0].id) {
this.$message.warning("开始页已存在")
done()
return
}
} else if (form.property == 3) {
- if (form.id != filterArray[0].id){
+ if (form.id != filterArray[0].id) {
this.$message.warning("结束页已存在")
done()
return
@@ -520,44 +578,40 @@
},
// 节点点击事件
handleNodeClick(data) {
- this.content = data
- if (data.property == 2) {
- if (data.type == 1) {
- this.flashForm.url = data.fileUrl
- } else if (data.type == 2) {
- this.imgForm.url = data.fileUrl
- let fileArray = data.fileUrl
- this.flipConfig.pages = []
- if (fileArray.length>0){
- fileArray.forEach(e => {
- this.flipConfig.pages.push(e.value)
- })
- }
- } else if (data.type == 3) {
- this.videoForm.url = data.fileUrl
- if (data.fileUrl.length>0){
- let url = data.fileUrl[0].value
- this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
- }
- }
- }
+ this.selectNode = data
+ this.loadNode(this.selectNode)
},
// 图片提交
handleSubmitFile(form, done) {
- this.content.fileUrl = form.url
- this.handleSubmit(this.content, done)
+ this.selectNode.fileUrl = form.url
+ this.handleSubmit(this.selectNode, done)
+ },
+ //自定义删除方法
+ uploadDelete(file,column){
+ this.selectNode.fileUrl = this.selectNode.fileUrl.filter(e=>{
+ return e.label != file.name
+ })
+ return new Promise((resolve, reject) => {
+ update(this.selectNode).then(res=>{
+ if (res.data.code == 200){
+ resolve()
+ }else {
+ reject
+ }
+ })
+ });
},
}
}
</script>
<style scoped>
-.ddiv{
+.ddiv {
width: 100%;
height: 100%;
}
-.view{
+.view {
background-color: #404040;
}
--
Gitblit v1.9.3