添加文件上传

guoshilong

2023-03-16 31213223c5eb8a66e1019862d67cbae751104986

 src/views/modules/function.vue

@@ -1,5 +1,12 @@
<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">
@@ -7,11 +14,6 @@
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </div>
    </div>
    {{ modulesId }}
    <el-row>
      <!--左侧列表-->
      <el-col :span="6">
        <div class="func">
          <!--列表展示-->
          <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>