| src/api/modules/modules.js | ●●●●● patch | view | raw | blame | history | |
| src/views/modules/function.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/modules/modules.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/modules/modulesView.vue | ●●●●● patch | view | raw | blame | history | |
| vue.config.js | ●●●●● patch | view | raw | blame | history |
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', 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"> <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 size="small" v-for="data in contentFunList" :index="data.id" :key="data.id"> <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 style="height: 100%;width: 100%" v-if="content.property == 2"> <div v-else> <el-empty></el-empty> </div> <div style="height: 100%;width: 100%" class="manage" v-if="modelType=='管理'"> </div> <!--内容页--> <div class="ddiv" v-if="content.property == 2"> <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"> <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) { 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 } } } } @@ -510,13 +527,18 @@ } 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)) } } } }, @@ -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; 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 }], }, { 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) { 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> 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({
