fix:修改upload prop

ZhangXianQiang

2024-05-16 2d75d3ed9435050e37ea5cf28252f8c849adec57

fix:修改upload prop

 src/components/UploadC.vue

@@ -40,7 +40,7 @@
    },
    fileUrl: {
      required: true,
      default: [],
      default: () => [],
      type: Array
    }
  },

 src/views/onlineStudy/file.vue

@@ -7,11 +7,7 @@
        </el-form-item>
        <el-form-item label="学习类型">
          <el-select v-model="searchForm.belongType" clearable @clear="page" @change="page" placeholder="学习类型">
            <el-option
              v-for="type in typeList"
              :key="type.id"
              :label="type.typeName"
              :value="type.id">
            <el-option v-for="type in typeList" :key="type.id" :label="type.typeName" :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
@@ -24,69 +20,45 @@
        <el-button type="danger" @click="batchRemove" size="small" style="margin-left: 5px">删除</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
    <el-table :data="tableData" border @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="subject"
        label="主题 ">
      <el-table-column fixed prop="subject" label="主题 ">
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="学习类型">
      <el-table-column prop="typeName" label="学习类型">
      </el-table-column>
      <el-table-column
        prop="contentType"
        :formatter="typeFormatter"
        label="文件类型">
      <el-table-column prop="contentType" :formatter="typeFormatter" label="文件类型">
      </el-table-column>
      <el-table-column
        label="文件内容"
      >
      <el-table-column label="文件内容">
        <template slot-scope="scope">
          <video v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url" class="showContent"/>
          <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url" class="showContent"/>
          <el-link type="primary" v-if="scope.row.contentType === 'pdf'" :src="'/api/files/' + scope.row.contentUrl.url" class="showContent">点击查看</el-link>
          <video v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url"
            class="showContent" />
          <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url"
            class="showContent" />
          <el-link type="primary" v-if="scope.row.contentType === 'pdf'" :src="'/api/files/' + scope.row.contentUrl.url"
            class="showContent">点击查看</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="attachment"
        label="附件">
      <el-table-column prop="attachment" label="附件">
        <template slot-scope="scope">
          <el-link type="primary" v-for="item in scope.row.attachment">{{item.name}}</el-link>
          <el-link type="primary" v-for="item in scope.row.attachment">{{ item.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140">
      <el-table-column fixed="right" label="操作" width="140">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="primary" size="small" style="margin-right: 5px">修改</el-button>
          <el-button @click="handleUpdate(scope.row)" type="primary" size="small"
            style="margin-right: 5px">修改</el-button>

          <el-popconfirm
            :title="getTitle(scope.row.typeName)"
            @confirm="remove(scope.row.id)"
          >
          <el-popconfirm :title="getTitle(scope.row.typeName)" @confirm="remove(scope.row.id)">
            <el-button slot="reference" type="danger" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                @pagination="page"/>
    <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
      @pagination="page" />

    <el-dialog
      title="添加学习内容"
      :visible.sync="open"
      width="600px"
      :close-on-click-modal="false"
    <el-dialog title="添加学习内容" :visible.sync="open" width="600px" :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form label-position="left" label-width="120px" ref="form" :rules="rules" :model="form">
        <el-form-item label="主题" prop="subject">
@@ -94,11 +66,7 @@
        </el-form-item>
        <el-form-item label="学习类型" prop="belongType">
          <el-select v-model="form.belongType" placeholder="学习类型">
            <el-option
              v-for="type in typeList"
              :key="type.id"
              :label="type.typeName"
              :value="type.id">
            <el-option v-for="type in typeList" :key="type.id" :label="type.typeName" :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
@@ -110,10 +78,12 @@
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件(一个)" prop="contentUrl">
          <upload v-show="form.contentType" ref="upload" :fileUrl="fileContentUrl" :fileType="form.contentType" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile"/>
          <upload v-show="form.contentType" ref="upload" :fileUrl="fileContentUrl" :fileType="form.contentType"
            :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
        </el-form-item>
        <el-form-item label="附件(最多3个)" prop="attachment">
          <upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment" @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile"/>
          <upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment"
            @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
@@ -125,19 +95,19 @@
</template>

<script>
import Pagination from '@/components/Pagination'
import OnlineStudyAPI from '@/api/online-study'
import StudyTypeAPI from '@/api/study-type'
import Upload from '@/components/UploadC'
import Pagination from '@/components/Pagination';
import OnlineStudyAPI from '@/api/online-study';
import StudyTypeAPI from '@/api/study-type';
import Upload from '@/components/UploadC';
export default {
  name: 'type',
  components: {Upload, Pagination},
  components: { Upload, Pagination },
  computed: {
    fileContentUrl: function () {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : []
    fileContentUrl: () => {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
    }
  },
  data () {
  data() {
    return {
      ids: [],
      typeList: [],
@@ -166,7 +136,7 @@
          { required: true, message: '请选择文件类型', trigger: 'change' }
        ]
      }
    }
    };
  },
  methods: {
    handleSelectionChange(val) {
@@ -174,112 +144,112 @@
    },
    typeFormatter(row) {
      if (row.contentType === 'video') {
        return "视频"
        return "视频";
      }
      if (row.contentType === 'img') {
        return "图片"
        return "图片";
      }
      if (row.contentType === 'pdf') {
        return "PDF"
        return "PDF";
      }
    },
    clearFile() {
      this.form.contentUrl = null
      this.$refs.upload.clearFile()
      this.form.contentUrl = null;
      this.$refs.upload.clearFile();
    },
    removeFile() {
      this.form.contentUrl = null
      this.form.contentUrl = null;
    },
    removeAttachmentFile(fileList, fileName) {
      console.log(fileList, fileName, "dddddddd")
      this.form.attachment = fileList.filter(item => item.name !== fileName)
      console.log(fileList, fileName, "dddddddd");
      this.form.attachment = fileList.filter(item => item.name !== fileName);
    },
    getUploadAttachmentUrl (uploadData) {
      this.form.attachment = uploadData
    getUploadAttachmentUrl(uploadData) {
      this.form.attachment = uploadData;
    },
    getUploadUrl(uploadData) {
      this.form.contentUrl = uploadData[0]
      this.form.contentUrl = uploadData[0];
    },
    remove (id) {
    remove(id) {
      OnlineStudyAPI.remove([id]).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
          this.$message.success('删除成功');
        }
      })
      });
    },
    batchRemove () {
    batchRemove() {
      if (this.ids.length < 1) {
        this.$message.warning("请选择要删除的数据")
        this.$message.warning("请选择要删除的数据");
      }
      OnlineStudyAPI.remove(this.ids).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
          this.ids = []
          this.$message.success('删除成功');
          this.ids = [];
        }
      })
      });
    },
    getTitle (typeName) {
      return '确定要删除' + typeName + '这个文件吗？'
    getTitle(typeName) {
      return '确定要删除' + typeName + '这个文件吗？';
    },
    handlerSubmit () {
    handlerSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            OnlineStudyAPI.update(this.form).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功')
                this.open = false
                this.page()
                this.$message.success('修改成功');
                this.open = false;
                this.page();
              }
            })
            });
          } else {
            OnlineStudyAPI.add(this.form).then(res => {
              if (res.code === 1) {
                this.$message.success('添加成功')
                this.open = false
                this.page()
                this.$message.success('添加成功');
                this.open = false;
                this.page();
              }
            })
            });
          }
        }
      })
      });
    },
    handleClose () {
      this.open = false
      this.form = {}
    handleClose() {
      this.open = false;
      this.form = {};
    },
    handlerAdd () {
      this.form = {}
      this.open = true
    handlerAdd() {
      this.form = {};
      this.open = true;
    },
    page () {
    page() {
      OnlineStudyAPI.page(this.searchForm).then(res => {
        if (res.code === 1) {
          this.tableData = res.response
          this.total = res.total
          this.tableData = res.response;
          this.total = res.total;
        }
      })
      });
    },
    handleUpdate (row) {
      this.form.id = row.id
      this.form.contentType = row.contentType
      this.form.contentUrl = row.contentUrl
      this.form.attachment = row.attachment
      this.form.subject = row.subject
      this.form.belongType = row.belongType
      console.log(row, "dfddddddd")
      this.open = true
    handleUpdate(row) {
      this.form.id = row.id;
      this.form.contentType = row.contentType;
      this.form.contentUrl = row.contentUrl;
      this.form.attachment = row.attachment;
      this.form.subject = row.subject;
      this.form.belongType = row.belongType;
      console.log(row, "dfddddddd");
      this.open = true;
    }
  },
  mounted () {
    this.page()
  mounted() {
    this.page();
    StudyTypeAPI.list().then(res => {
      if (res.code === 1) {
        this.typeList = res.response
        this.typeList = res.response;
      }
    })
    });
  }
}
};
</script>

<style scoped>
@@ -287,9 +257,11 @@
  width: 200px;
  height: 100px;
}

.warp {
  margin: 40px 10px;
}

.search {
  margin-top: 10px;
}

 vue.config.js

@@ -19,8 +19,8 @@
    hotOnly: false,
    proxy: {
      '/api': {
        // target: 'http://192.168.3.87:8085',
        target: 'http://localhost:8085',
        target: 'http://192.168.3.87:8085',
        // target: 'http://localhost:8085',
        changeOrigin: true
      }
    }