保留多选上传确认按钮的副本

guoshilong

2023-03-21 a886f111a1ed811e6ee9d58f55b6e45930ac9a81

保留多选上传确认按钮的副本

 src/views/modules/function multiple.vue

New file
@@ -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>

 src/views/modules/function.vue

@@ -596,7 +596,7 @@
          if (res.data.code == 200){
            resolve()
          }else {
            reject
            reject()
          }
        })
      });