添加判断防止报错

guoshilong

2023-03-18 3a85d31c1039315667f8fa66ce01be06626ed23f

 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;