预览页

guoshilong

2023-03-17 a533c94a9ee64d8b1fdf322170562d4bce1c88b5

 src/views/modules/function.vue

@@ -1,27 +1,30 @@
<template>
  <div>

    {{ modules.id}}--{{modules.name}}
    <el-row>

      <!--左侧列表-->
      <el-col :span="6">
        <div class="func">
    <!--头部按钮-->
          <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="content.property== 2" class="model-type">
          <el-radio-group v-model="modelType">
            <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="6">
        <div class="func">
          <!--列表展示-->
          <div class="list">
            <el-tree v-if="funList.length >0"
                     :data="funList"
                     :props="defaultProps"
                     node-key="id"
                     @node-click="handleNodeClick"
            >
            <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>
@@ -41,9 +44,19 @@
      <!--右侧预览-->
      <el-col :span="17">
        <div class="func-content">
          <div class="header">

          <!--开始页-->
          <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>
          </div>
          <!--内容页-->
          <div style="height: 100%;width: 100%"  v-if="content.property == 2">

            <div style="height: 100%;width: 100%"  class="manage" v-if="modelType=='管理'">
          <!--flash-->
          <div v-if="content.type == 1">
            <avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
@@ -57,6 +70,38 @@
          <!--视频-->
          <div v-if="content.type == 3">
            <avue-form :option="videoOption" v-model="videoForm" @submit="handleSubmitFile"></avue-form>
              </div>
            </div>

            <div style="height: 100%;width: 100%"  class="view" v-else>
              <!--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" 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 style="height: 100%;width: 100%" v-if="content.type == 3">
                <iframe class="view-iframe" :src="iframePath"/>
              </div>
            </div>

          </div>
          <!--结束页-->
          <div class="end" v-if="content.property == 3">
            <img class="end-img" :src="content.fileUrl[0].value">
          </div>
        </div>
      </el-col>
@@ -76,13 +121,20 @@

<script>
import {getAll, add, update, remove} from "@/api/modules/function";
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: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
  data() {
    return {
      //所有功能集合
      funList: [],
      contentFunList: [],
      // 弹框标题
      title: '',
      // 是否展示弹框
@@ -303,6 +355,15 @@
        label: 'name'
      },
      content: {},
      modelType:'管理',

      flipConfig: {
        pages: [],
        pagesHiRes: [],
        hasMouse: true,
        pageNum: null,
      },
      iframePath:"",
    }
  },
  watch: {
@@ -335,13 +396,15 @@
    },
    //获取当前模块id下的所有子功能
    getAllFunc() {
      console.log(this.modules)
      let params = {
        modulesId: this.modules.id
      }
      getAll(params).then(res => {
        if (res.data.code == 200) {
          this.funList = res.data.data
          this.contentFunList = res.data.data.filter(e => {
            return e.property == 2
          })
        }
      })
    },
@@ -349,23 +412,23 @@
      form.modulesId = this.modules.id
      if (!form.id) {
        add(form).then(() => {
          this.box = false;
          this.getAllFunc()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done()
          this.box = false;
        });
      } else {
        update(form).then(() => {
          this.box = false;
          this.getAllFunc()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done()
          this.box = false;
        })
      }
    },
@@ -418,12 +481,20 @@
    // 节点点击事件
    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
          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))
        }
      }
    },
    // 图片提交
@@ -454,4 +525,88 @@
  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%;
  left: 42%;
}

.model-type{
  display: flex;
  justify-content: flex-end;
}


.view-iframe {
  width: 100%;
  height: 100%;
}

.flipbook {
  width: 100%;
  height: 100vh;
}

.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;
}

.credit {
  font-size: 12px;
  line-height: 20px;
  margin: 10px;
}
</style>