From 3a85d31c1039315667f8fa66ce01be06626ed23f Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Sat, 18 Mar 2023 10:59:40 +0800
Subject: [PATCH] 添加判断防止报错
---
src/views/modules/function.vue | 103 ++++++++++++++------
src/api/modules/modules.js | 10 ++
vue.config.js | 12 ++
src/views/modules/modulesView.vue | 103 +++++++++++++++++---
src/views/modules/modules.vue | 33 ++++++
5 files changed, 212 insertions(+), 49 deletions(-)
diff --git a/src/api/modules/modules.js b/src/api/modules/modules.js
index 07a7636..aee5a76 100644
--- a/src/api/modules/modules.js
+++ b/src/api/modules/modules.js
@@ -12,6 +12,16 @@
})
}
+export const getAll = (params) => {
+ return request({
+ url: '/api/modules/modules/all',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
+}
+
export const getDetail = (id) => {
return request({
url: '/api/modules/modules/detail',
diff --git a/src/views/modules/function.vue b/src/views/modules/function.vue
index 125ffe7..a1343af 100644
--- a/src/views/modules/function.vue
+++ b/src/views/modules/function.vue
@@ -1,6 +1,5 @@
<template>
<div>
- {{ modules.id }}--{{ modules.name }}
<!--头部按钮-->
<div class="avue-crud__menu">
<!-- 头部左侧按钮模块 -->
@@ -11,7 +10,7 @@
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
<div v-if="content.property== 2" class="model-type">
- <el-radio-group v-model="modelType">
+ <el-radio-group size="small" v-model="modelType">
<el-radio-button label="管理"></el-radio-button>
<el-radio-button label="预览"></el-radio-button>
</el-radio-group>
@@ -20,7 +19,7 @@
</div>
<el-row>
<!--左侧列表-->
- <el-col :span="6">
+ <el-col :span="5">
<div class="func">
<!--列表展示-->
<div class="list">
@@ -43,21 +42,27 @@
<!--占位-->
<el-col :span="1"></el-col>
<!--右侧预览-->
- <el-col :span="17">
+ <el-col :span="18">
<div class="func-content">
<!--开始页-->
<div class="start" v-if="content.property == 1">
- <img class="start-img" :src="content.fileUrl[0].value">
- <div class="start-button-group">
- <el-button disabled size="small" v-for="data in contentFunList" :index="data.id" :key="data.id">
- {{ data.name }}
- </el-button>
+ <div class="start" v-if="content.fileUrl.length>0">
+ <img class="start-img" :src="content.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>
+ </div>
</div>
+ <div v-else>
+ <el-empty></el-empty>
+ </div>
+
</div>
<!--内容页-->
- <div style="height: 100%;width: 100%" v-if="content.property == 2">
+ <div class="ddiv" v-if="content.property == 2">
- <div style="height: 100%;width: 100%" class="manage" v-if="modelType=='管理'">
+ <div class="manage ddiv" v-if="modelType=='管理'">
<!--flash-->
<div v-if="content.type == 1">
<avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
@@ -74,15 +79,15 @@
</div>
</div>
- <div style="height: 100%;width: 100%" class="view" v-if="modelType == '预览'">
+ <div class="view ddiv" v-if="modelType == '预览'">
<!--flash-->
<div v-if="content.type == 1">
</div>
<!--图册-->
- <div style="height: 100%;width: 100%" v-if="content.type == 2">
- <flipbook class="flipbook" :pages="flipConfig.pages" :startPage="flipConfig.pageNum" v-slot="flipbook"
+ <div class="ddiv" v-if="content.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 }"
@@ -94,11 +99,11 @@
<right-icon class="btn right" :class="{ disabled: !flipbook.canFlipRight }"
@click="flipbook.flipRight"/>
</div>
- </flipbook>
+ </FlipBook>
</div>
<!--视频-->
- <div style="height: 100%;width: 100%" v-if="content.type == 3">
+ <div class="ddiv" v-if="content.type == 3">
<iframe class="view-iframe" :src="iframePath"/>
</div>
</div>
@@ -106,7 +111,12 @@
</div>
<!--结束页-->
<div class="end" v-if="content.property == 3">
- <img class="end-img" :src="content.fileUrl[0].value">
+ <div class="end" v-if="content.fileUrl.length>0">
+ <img class="end-img" :src="content.fileUrl[0].value">
+ </div>
+ <div v-else>
+ <el-empty></el-empty>
+ </div>
</div>
</div>
</el-col>
@@ -126,6 +136,7 @@
<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'
@@ -134,7 +145,7 @@
export default {
name: "function",
props: ['modules'],
- components: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ components: {FlipBook,LeftIcon, RightIcon, PlusIcon, MinusIcon},
data() {
return {
//所有功能集合
@@ -303,6 +314,7 @@
type: 'upload',
span: 24,
dragFile: true,
+ multiple:true,
accept: 'image/png, image/jpeg',
listType: "picture-card",
propsHttp: {
@@ -422,14 +434,19 @@
return e.property == form.property
})
if (filterArray.length > 0) {
+
if (form.property == 1) {
- this.$message.warning("开始页已存在")
- done()
- return
+ if (form.id != filterArray[0].id){
+ this.$message.warning("开始页已存在")
+ done()
+ return
+ }
} else if (form.property == 3) {
- this.$message.warning("结束页已存在")
- done()
- return
+ if (form.id != filterArray[0].id){
+ this.$message.warning("结束页已存在")
+ done()
+ return
+ }
}
}
}
@@ -510,13 +527,18 @@
} else if (data.type == 2) {
this.imgForm.url = data.fileUrl
let fileArray = data.fileUrl
- fileArray.forEach(e => {
- this.flipConfig.pages.push(e.value)
- })
+ 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
- let url = data.fileUrl[0].value
- this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ 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))
+ }
}
}
},
@@ -530,6 +552,15 @@
</script>
<style scoped>
+.ddiv{
+ width: 100%;
+ height: 100%;
+}
+
+.view{
+ background-color: #404040;
+}
+
.func {
height: 77vh;
border: 1px solid;
@@ -562,7 +593,8 @@
.start-button-group {
position: relative;
top: -25%;
- left: 42%;
+ display: flex;
+ justify-content: center;
}
.model-type {
@@ -578,7 +610,7 @@
.flipbook {
width: 100%;
- height: 100vh;
+ height: 100%;
}
.page-num {
@@ -627,6 +659,15 @@
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;
diff --git a/src/views/modules/modules.vue b/src/views/modules/modules.vue
index a300148..c606f33 100644
--- a/src/views/modules/modules.vue
+++ b/src/views/modules/modules.vue
@@ -65,7 +65,7 @@
</template>
<script>
-import {getList, getDetail, add, update, remove} from "@/api/modules/modules";
+import {getList, getDetail, add, update, remove,getAll} from "@/api/modules/modules";
import {mapGetters} from "vuex";
import Function from "@/views/modules/function";
import ModulesView from "@/views/modules/modulesView";
@@ -73,6 +73,33 @@
export default {
components: {ModulesView, Function},
data() {
+ var validateName = (rule, value, callback) => {
+ if (value) {
+ let params = {
+ name:value
+ }
+ getAll(params).then(res => {
+ let data = res.data.data
+ if (this.form.id) {
+ if (data[0].id== this.form.id) {
+ callback();
+ } else if (data.length > 0) {
+ callback(new Error('该模块已存在'));
+ } else {
+ callback();
+ }
+ } else {
+ if (data.length > 0) {
+ callback(new Error('该模块已存在'));
+ } else {
+ callback();
+ }
+ }
+ })
+ } else {
+ callback(new Error('请输入模块名'));
+ }
+ };
return {
// 弹框标题
title: '',
@@ -116,8 +143,8 @@
span: 24,
rules: [{
required: true,
- message: "请输入模块名称",
- trigger: "blur"
+ trigger: "blur",
+ validator: validateName
}],
},
{
diff --git a/src/views/modules/modulesView.vue b/src/views/modules/modulesView.vue
index cd03345..2d64799 100644
--- a/src/views/modules/modulesView.vue
+++ b/src/views/modules/modulesView.vue
@@ -8,6 +8,7 @@
<el-button size="small" class="button" icon="el-icon-back" @click="backStartPage">回到开始页</el-button>
</div>
</div>
+
<div class="content-view">
<!--开始页-->
<div v-if="currentIndex==1" class="start">
@@ -20,7 +21,7 @@
</div>
<!--内容页-->
- <div style="height: 100%;width: 100%" v-if="currentIndex==2" class="content">
+ <div style="height: 100%;width: 100%;background-color: #404040" v-if="currentIndex==2" class="content">
<!--flash-->
<div v-if="content.type == 1">
@@ -28,7 +29,7 @@
</div>
<!--图册-->
- <Flipbook v-if="content.type == 2" class="flipbook"
+ <FlipBook v-if="content.type == 2" class="flipbook"
:pages="flipConfig.pages"
:startPage="flipConfig.pageNum"
v-slot="flipbook"
@@ -58,7 +59,7 @@
@click="flipbook.flipRight"
/>
</div>
- </Flipbook>
+ </FlipBook>
<!--视频-->
<iframe v-if="content.type == 3" style="height: 100%;width: 100%" class="view-iframe" :src="iframePath"/>
@@ -72,6 +73,7 @@
<script>
import {getAll} 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'
@@ -80,7 +82,7 @@
export default {
name: "modulesView",
props:['modules'],
- components: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ components: {FlipBook,LeftIcon, RightIcon, PlusIcon, MinusIcon},
data() {
return {
funList:[],
@@ -91,9 +93,7 @@
content:{},
iframePath:"",
flipConfig: {
- pages: [
- 'http://dev.jxpskj.com:9000/multimedia/upload/20230316/4de7aac224ce2a8f4ed8b025740405d4.png'
- ],
+ pages: [],
pagesHiRes: [],
hasMouse: true,
pageNum: null,
@@ -116,7 +116,6 @@
getAll(params).then(res => {
if (res.data.code == 200) {
let data = res.data.data
- this.funList = data
data.forEach(e=>{
if (e.property == 1){
this.startPage = e
@@ -135,13 +134,18 @@
if (data.type == 1) {
} else if (data.type == 2) {
- // let fileArray = data.fileUrl
- // fileArray.forEach(e => {
- // this.flipConfig.pages.push(e.value)
- // })
+ 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) {
- let url = data.fileUrl[0].value
- this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ 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))
+ }
}
},
backStartPage(){
@@ -170,7 +174,76 @@
.start-button-group {
position: relative;
+ display: flex;
top: -25%;
- left: 42%;
+ justify-content: center;
+}
+/**
+翻页
+ */
+.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/vue.config.js b/vue.config.js
index 50896ca..11a6ad0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -3,6 +3,18 @@
publicPath: "/",
lintOnSave: false,
productionSourceMap: false,
+ //flipbook引入需要配置
+ configureWebpack: {
+ module: {
+ rules: [
+ {
+ test: /\.mjs$/,
+ include: /node_modules/,
+ type: "javascript/auto"
+ },
+ ]
+ }
+ },
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
--
Gitblit v1.9.3