添加文件上传

guoshilong

2023-03-16 31213223c5eb8a66e1019862d67cbae751104986

添加文件上传

 src/views/modules/function.vue

@@ -1,17 +1,19 @@
<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>
    {{ modulesId }}

    {{ 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>
          <!--列表展示-->
          <div class="list">
            <el-tree v-if="funList.length >0"
@@ -43,13 +45,18 @@

          </div>
          <!--flash-->
          <div>

          <div v-if="content.type == 1">
            <avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
          </div>

          <!--图册-->
          <div v-if="content.type == 2">
            <avue-form :option="imgOption" v-model="imgForm" @submit="handleSubmitImg"></avue-form>
            <avue-form :option="imgOption" v-model="imgForm" @submit="handleSubmitFile"></avue-form>
          </div>

          <!--视频-->
          <div v-if="content.type == 3">
            <avue-form :option="videoOption" v-model="videoForm" @submit="handleSubmitFile"></avue-form>
          </div>
        </div>
      </el-col>
@@ -72,7 +79,7 @@

export default {
  name: "function",
  props: ['modulesId'],
  props: ['modules'],
  data() {
    return {
      funList: [],
@@ -235,7 +242,7 @@
        column: [
          {
            label: '图片',
            prop: 'imgUrl',
            prop: 'url',
            type: 'upload',
            span: 24,
            dragFile: true,
@@ -250,6 +257,46 @@
        ]
      },
      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',
@@ -288,8 +335,9 @@
    },
    //获取当前模块id下的所有子功能
    getAllFunc() {
      console.log(this.modules)
      let params = {
        modulesId: this.modulesId
        modulesId: this.modules.id
      }
      getAll(params).then(res => {
        if (res.data.code == 200) {
@@ -298,7 +346,7 @@
      })
    },
    handleSubmit(form, done) {
      form.modulesId = this.modulesId
      form.modulesId = this.modules.id
      if (!form.id) {
        add(form).then(() => {
          this.box = false;
@@ -346,8 +394,6 @@
      this.box = true
      this.form = row
    },
    handleView(row) {
    },
    handleDelete(data) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
@@ -372,15 +418,19 @@
    // 节点点击事件
    handleNodeClick(data) {
      this.content = data
      if (data.type == 2) {
        this.imgForm.imgUrl = data.fileUrl
      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
      }
    },
    // 图片提交
    handleSubmitImg(form, done) {
      this.content.fileUrl = form.imgUrl
    handleSubmitFile(form, done) {
      this.content.fileUrl = form.url
      this.handleSubmit(this.content, done)
    }
    },
  }
}
</script>

 src/views/modules/modules.vue

@@ -22,7 +22,7 @@
        <!--卡片显示-->
        <el-col :span="4" v-for="(o, index) in data" :key="o" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img @click="setContent(o.id)" :src="o.background.length>0?o.background[0].value: '/img/bg/img-logo.png' "
            <img @click="setContent(o)" :src="o.background.length>0?o.background[0].value: '/img/bg/img-logo.png' "
                 class="image">
            <div style="padding: 14px;">
              <span>{{ o.name }}</span>
@@ -57,7 +57,7 @@

    </div>
    <!-- 功能详情-->
    <Function ref="func" v-if="isFunction" :modulesId="modulesId" @backModules="backModules"></Function>
    <Function ref="func" v-if="isFunction" :modules="modules" @backModules="backModules"></Function>
  </basic-container>
</template>

@@ -156,7 +156,7 @@
      // 表单列表
      data: [],
      isFunction: false,
      modulesId: "",
      modules: "",
    }
  },
  mounted() {
@@ -302,8 +302,8 @@
      });
    },
    //显示功能页
    setContent(id) {
      this.modulesId = id
    setContent(data) {
      this.modules = data
      this.isFunction = !this.isFunction
    },
    //返回模块页