From a886f111a1ed811e6ee9d58f55b6e45930ac9a81 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 21 Mar 2023 09:49:22 +0800
Subject: [PATCH] 保留多选上传确认按钮的副本
---
src/views/modules/function.vue | 2
src/views/modules/function multiple.vue | 718 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 719 insertions(+), 1 deletions(-)
diff --git a/src/views/modules/function multiple.vue b/src/views/modules/function multiple.vue
new file mode 100644
index 0000000..1cb6ace
--- /dev/null
+++ b/src/views/modules/function multiple.vue
@@ -0,0 +1,718 @@
+<template>
+ <div>
+ <!--头部按钮-->
+ <div class="avue-crud__menu">
+ <!-- 头部左侧按钮模块 -->
+ <div class="avue-crud__left">
+ <el-button size="small" class="button" icon="el-icon-back" @click="backModules">返回</el-button>
+ <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+ </div>
+ <!-- 头部右侧按钮模块 -->
+ <div class="avue-crud__right">
+ <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>
+ </div>
+ </div>
+ </div>
+ <el-row>
+ <!--左侧列表-->
+ <el-col :span="5">
+ <div class="func">
+ <!--列表展示-->
+ <div class="list">
+ <el-tree v-if="funList.length >0" :data="funList" :props="defaultProps" node-key="id"
+ @node-click="handleNodeClick">
+ <span class="custom-tree-node" slot-scope="{ node, data }">
+ <span>{{ data.name }}</span>
+ <span>
+ <el-button type="text" size="mini" @click="() => handleEdit(data)">编辑</el-button>
+ <el-button type="text" size="mini" @click="() => handleDelete(data)">删除</el-button>
+ </span>
+ </span>
+ </el-tree>
+ <el-empty v-else>
+ <el-button type="primary" @click="handleAdd">添加</el-button>
+ </el-empty>
+ </div>
+ </div>
+ </el-col>
+ <!--占位-->
+ <el-col :span="1"></el-col>
+ <!--右侧预览-->
+ <el-col :span="18">
+ <div class="func-content">
+ <!--开始页-->
+ <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 contentList" :index="data.id"
+ :key="data.id">{{ data.name }}
+ </el-button>
+ </div>
+ </div>
+ <el-empty v-else></el-empty>
+
+ </div>
+
+ <!--内容页-->
+ <div class="ddiv" v-if="selectNode.property == 2">
+
+ <div class="manage ddiv" v-if="radioType=='管理'">
+ <!--flash-->
+ <div v-if="selectNode.type == 1">
+ <avue-form :option="flashOption" v-model="flashForm" :upload-delete="uploadDelete" @submit="handleSubmitFile"></avue-form>
+ </div>
+
+ <!--图册-->
+ <div v-if="selectNode.type == 2">
+ <avue-form
+ :option="imgOption"
+ v-model="imgForm"
+ :upload-delete="uploadDelete"
+ @submit="handleSubmitFile"></avue-form>
+ </div>
+
+ <!--视频-->
+ <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="radioType == '预览'">
+ <!--flash-->
+ <div v-if="selectNode.type == 1">
+
+ </div>
+
+ <!--图册-->
+ <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">
+ <left-icon class="btn left" :class="{ disabled: !flipbook.canFlipLeft }"
+ @click="flipbook.flipLeft"/>
+ <plus-icon class="btn plus" :class="{ disabled: !flipbook.canZoomIn }" @click="flipbook.zoomIn"/>
+ <span class="page-num">Page {{ flipbook.page }} of {{ flipbook.numPages }}</span>
+ <minus-icon class="btn minus" :class="{ disabled: !flipbook.canZoomOut }"
+ @click="flipbook.zoomOut"/>
+ <right-icon class="btn right" :class="{ disabled: !flipbook.canFlipRight }"
+ @click="flipbook.flipRight"/>
+ </div>
+ </FlipBook>
+ </div>
+
+ <!--视频-->
+ <div class="ddiv" v-if="selectNode.type == 3">
+ <iframe class="view-iframe" :src="iframePath"/>
+ </div>
+ </div>
+
+ </div>
+
+ <!--结束页-->
+ <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>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+
+ <!-- 表单模块 -->
+ <el-dialog :title="title" :visible.sync="box" width="50%" :before-close="beforeClose" append-to-body>
+ <avue-form
+ ref="form"
+ v-model="form"
+ :option="option"
+ @submit="handleSubmit">
+ </avue-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import {getAll, add, update, remove} from "@/api/modules/function";
+import FlipBook from "flipbook-vue/dist/vue2/flipbook";
+import LeftIcon from 'vue-material-design-icons/ChevronLeftCircle'
+import RightIcon from 'vue-material-design-icons/ChevronRightCircle'
+import PlusIcon from 'vue-material-design-icons/PlusCircle'
+import MinusIcon from 'vue-material-design-icons/MinusCircle'
+
+export default {
+ name: "function",
+ props: ['modules'],
+ components: {FlipBook, LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ data() {
+ return {
+ //所有功能集合
+ funList: [],
+ contentList: [],
+ // 弹框标题
+ title: '',
+ // 是否展示弹框
+ box: false,
+ //功能表单配置
+ option: {
+ height: 'auto',
+ calcHeight: 30,
+ tip: false,
+ searchShow: true,
+ searchMenuSpan: 6,
+ border: true,
+ index: true,
+ viewBtn: true,
+ selection: true,
+ dialogClickModal: false,
+ column: [
+ {
+ label: "主键",
+ prop: "id",
+ type: "input",
+ display: false
+ },
+ {
+ label: "模块主键",
+ prop: "modulesId",
+ type: "input",
+ display: false
+ },
+ {
+ label: "功能名称",
+ prop: "name",
+ type: "input",
+ span: 24,
+ rules: [{
+ required: true,
+ message: "请输入功能名称",
+ trigger: "blur",
+ }],
+ },
+ {
+ label: "功能类型",
+ prop: "property",
+ type: 'radio',
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=function_property",
+ props: {
+ label: "dictValue",
+ value: "dictKey"
+ },
+ span: 24,
+ rules: [{
+ required: true,
+ message: "请选择功能类型",
+ trigger: "blur",
+ }],
+ },
+ {
+ label: "内容类型",
+ prop: "type",
+ type: 'radio',
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=function_type",
+ props: {
+ label: "dictValue",
+ value: "dictKey"
+ },
+ span: 24,
+ display: false,
+ rules: [{
+ required: true,
+ message: "请选择内容类型",
+ trigger: "blur",
+ }],
+ },
+ {
+ label: "排序",
+ prop: "sort",
+ min: 1,
+ max: 999999,
+ type: 'number',
+ span: 24,
+ display: false,
+ // rules: [{
+ // required: true,
+ // message: "请输入排序",
+ // trigger: "blur",
+ // }],
+ },
+ {
+ label: "页面背景",
+ prop: "fileUrl",
+ type: 'upload',
+ limit: 1,
+ drag: true,
+ loadText: '文件上传中，请稍等',
+ accept: 'image/png, image/jpeg',
+ propsHttp: {
+ res: 'data',
+ url: 'link'
+ },
+ action: "/api/blade-resource/oss/endpoint/put-file-attach",
+ span: 24,
+ display: false,
+ },
+ {
+ label: "租户ID",
+ prop: "tenantId",
+ type: "input",
+ display: false
+ },
+ {
+ label: "创建人",
+ prop: "createUser",
+ type: "input",
+ display: false
+ },
+ {
+ label: "创建部门",
+ prop: "createDept",
+ type: "input",
+ display: false
+ },
+ {
+ label: "创建时间",
+ prop: "createTime",
+ type: "input",
+ display: false
+ },
+ {
+ label: "修改人",
+ prop: "updateUser",
+ type: "input",
+ display: false
+ },
+ {
+ label: "修改时间",
+ prop: "updateTime",
+ type: "input",
+ display: false
+ },
+ {
+ label: "状态",
+ prop: "status",
+ type: "input",
+ display: false
+ },
+ {
+ label: "是否已删除",
+ prop: "isDeleted",
+ type: "input",
+ display: false
+ },
+ ]
+ },
+ form: {},
+
+ imgOption: {
+ column: [
+ {
+ label: '图片',
+ prop: 'url',
+ type: 'upload',
+ span: 24,
+ dragFile: 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",
+ },
+ ]
+ },
+ imgForm: {},
+
+ flashOption: {
+ column: [
+ {
+ label: 'flash上传',
+ prop: 'url',
+ type: 'upload',
+ span: 24,
+ dragFile: true,
+ limit: 1,
+ propsHttp: {
+ res: 'data',
+ url: 'link'
+ },
+ action: "/api/blade-resource/oss/endpoint/put-file-attach"
+ },
+ ]
+ },
+ flashForm: {},
+
+ videoOption: {
+ column: [
+ {
+ label: '视频',
+ prop: 'url',
+ type: 'upload',
+ span: 24,
+ dragFile: true,
+ accept: 'video/mp4',
+ limit: 1,
+ listType: "picture-card",
+ propsHttp: {
+ res: 'data',
+ url: 'link'
+ },
+ action: "/api/blade-resource/oss/endpoint/put-file-attach"
+ },
+ ]
+ },
+ videoForm: {},
+
+ defaultProps: {
+ children: 'children',
+ label: 'name'
+ },
+ //当前选中节点
+ selectNode: {},
+ //管理 预览切换
+ radioType: '管理',
+ //翻页预览的配置
+ flipConfig: {
+ pages: [],
+ pagesHiRes: [],
+ hasMouse: true,
+ pageNum: null,
+ },
+ //视频iframe路径
+ iframePath: "",
+ }
+ },
+ watch: {
+ "form.property": {
+ handler(newVal) {
+ if (newVal) {
+ const columnType = this.findObject(this.option.column, "type")
+ const columnSort = this.findObject(this.option.column, "sort")
+ const columnFile = this.findObject(this.option.column, "fileUrl")
+ if (newVal == 2) {
+ columnType.display = true
+ columnSort.display = true
+ columnFile.display = false
+ } else {
+ columnFile.display = true
+ columnType.display = false
+ columnSort.display = false
+ }
+ }
+ }
+ },
+ "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.onLoad()
+ },
+ methods: {
+ //返回模块列表页
+ backModules() {
+ this.$emit('backModules')
+ },
+ //加载左侧列表
+ onLoad() {
+ this.getAllFunc()
+ },
+ loadNode(data){
+ let column
+ if (data.type == 1) {
+ this.flashForm.url = data.fileUrl
+ } else if (data.type == 2) {
+ this.imgForm.url = data.fileUrl
+ } else if (data.type == 3) {
+ this.videoForm.url = data.fileUrl
+ }
+ },
+ //获取当前模块id下的所有子功能
+ getAllFunc() {
+ let params = {
+ modulesId: this.modules.id
+ }
+ getAll(params).then(res => {
+ if (res.data.code == 200) {
+ this.funList = res.data.data
+ this.contentList = res.data.data.filter(e => {
+ return e.property == 2
+ })
+ }
+ })
+ },
+ handleSubmit(form, done) {
+ form.modulesId = this.modules.id
+ //限制只能有一个开始页和结束页
+ if (form.property == 1 || form.property == 3) {
+ let data = this.funList
+ let filterArray = data.filter(e => {
+ return e.property == form.property
+ })
+ if (filterArray.length > 0) {
+
+ if (form.property == 1) {
+ if (form.id != filterArray[0].id) {
+ this.$message.warning("开始页已存在")
+ done()
+ return
+ }
+ } else if (form.property == 3) {
+ if (form.id != filterArray[0].id) {
+ this.$message.warning("结束页已存在")
+ done()
+ return
+ }
+ }
+ }
+ }
+ if (!form.id) {
+ add(form).then(() => {
+ this.getAllFunc()
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ done()
+ this.box = false;
+ });
+ } else {
+ update(form).then(() => {
+ this.getAllFunc()
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ done()
+ this.box = false;
+ })
+ }
+ },
+ handleAdd() {
+ this.title = '新增'
+ this.box = true
+ this.initColumn()
+ },
+ //初始化column
+ initColumn() {
+ const columnType = this.findObject(this.option.column, "type")
+ const columnSort = this.findObject(this.option.column, "sort")
+ const columnFile = this.findObject(this.option.column, "fileUrl")
+
+ columnType.display = false
+ columnSort.display = false
+ columnFile.display = false
+
+ this.$nextTick(() => {
+ this.$refs.form.resetForm()
+ this.form.id = ""
+ })
+ },
+ handleEdit(row) {
+ this.title = '编辑'
+ this.box = true
+ this.form = row
+ },
+ handleDelete(data) {
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning"
+ }).then(() => {
+ return remove(data.id);
+ }).then(() => {
+ this.getAllFunc()
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ });
+ },
+ beforeClose(done) {
+ done()
+ this.$refs.form.resetForm()
+ this.form = {}
+ this.view = false;
+ },
+ // 节点点击事件
+ handleNodeClick(data) {
+ this.selectNode = data
+ this.loadNode(this.selectNode)
+ },
+ // 图片提交
+ handleSubmitFile(form, 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 {
+ width: 100%;
+ height: 100%;
+}
+
+.view {
+ background-color: #404040;
+}
+
+.func {
+ height: 77vh;
+ border: 1px solid;
+}
+
+.func-content {
+ height: 77vh;
+ border: 1px solid;
+}
+
+.custom-tree-node {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ padding-right: 8px;
+}
+
+.start, .end {
+ width: 100%;
+ height: 100%;
+}
+
+.start-img, .end-img {
+ width: 100%;
+ height: 100%;
+}
+
+.start-button-group {
+ position: relative;
+ top: -25%;
+ display: flex;
+ justify-content: center;
+}
+
+.model-type {
+ display: flex;
+ justify-content: flex-end;
+}
+
+
+.view-iframe {
+ width: 100%;
+ height: 100%;
+}
+
+.flipbook {
+ width: 100%;
+ height: 100%;
+}
+
+.page-num {
+ color: white;
+}
+
+.action-bar {
+ width: 100%;
+ height: 30px;
+ padding: 10px 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.action-bar .btn {
+ font-size: 30px;
+ color: #999;
+}
+
+.action-bar .btn svg {
+ bottom: 0;
+}
+
+.action-bar .btn:not(:first-child) {
+ margin-left: 10px;
+}
+
+.has-mouse .action-bar .btn:hover {
+ color: #ccc;
+ filter: drop-shadow(1px 1px 5px #000);
+ cursor: pointer;
+}
+
+.action-bar .btn:active {
+ filter: none !important;
+}
+
+.action-bar .btn.disabled {
+ color: #666;
+ pointer-events: none;
+}
+
+.action-bar .page-num {
+ font-size: 12px;
+ margin-left: 10px;
+}
+
+.flipbook .viewport {
+ width: 90vw !important;
+ height: calc(100vh - 800px - 40px) !important;
+}
+
+.flipbook .bounding-box {
+ box-shadow: 0 0 20px #000;
+}
+
+.credit {
+ font-size: 12px;
+ line-height: 20px;
+ margin: 10px;
+}
+</style>
diff --git a/src/views/modules/function.vue b/src/views/modules/function.vue
index 5f2741f..f08c0f4 100644
--- a/src/views/modules/function.vue
+++ b/src/views/modules/function.vue
@@ -596,7 +596,7 @@
if (res.data.code == 200){
resolve()
}else {
- reject
+ reject()
}
})
});
--
Gitblit v1.9.3