fix:文件上传删除问题

ZhangXianQiang

2024-05-17 97d1d36d67c0cc29bd21c2575dd8a61a757adaa5

 src/views/onlineStudy/file.vue

@@ -7,7 +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="item in typeList" :key="item.id" :label="item.typeName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
@@ -20,6 +20,8 @@
        <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-column>
@@ -55,10 +57,11 @@
        </template>
      </el-table-column>
    </el-table>

    <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="dialogTitle" :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">
@@ -66,7 +69,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="item in typeList" :key="item.id" :label="item.typeName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
@@ -78,7 +81,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件(一个)" prop="contentUrl">
          <upload v-show="form.contentType" ref="upload" :fileUrl="fileContentUrl" :fileType="form.contentType"
          <upload v-show="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType"
            :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
        </el-form-item>
        <el-form-item label="附件(最多3个)" prop="attachment">
@@ -109,6 +112,7 @@
  },
  data() {
    return {
      dialogTitle: '添加学习内容',
      ids: [],
      typeList: [],
      searchForm: {
@@ -120,7 +124,10 @@
      tableData: [],
      open: false,
      form: {
        contentType: 'video'
        contentType: 'video',
        contentUrl: [],
        attachment: [],
        temp: []
      },
      rules: {
        contentUrl: [
@@ -154,14 +161,13 @@
      }
    },
    clearFile() {
      this.form.contentUrl = null;
      this.form.contentUrl = [];
      this.$refs.upload.clearFile();
    },
    removeFile() {
      this.form.contentUrl = null;
      this.form.contentUrl = [];
    },
    removeAttachmentFile(fileList, fileName) {
      console.log(fileList, fileName, "dddddddd");
      this.form.attachment = fileList.filter(item => item.name !== fileName);
    },
    getUploadAttachmentUrl(uploadData) {
@@ -221,6 +227,7 @@
    handlerAdd() {
      this.form = {};
      this.open = true;
      this.dialogTitle = '添加学习内容';
    },
    page() {
      OnlineStudyAPI.page(this.searchForm).then(res => {
@@ -233,11 +240,11 @@
    handleUpdate(row) {
      this.form.id = row.id;
      this.form.contentType = row.contentType;
      this.form.contentUrl = row.contentUrl;
      this.form.attachment = row.attachment;
      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.dialogTitle = '修改学习内容';
      this.open = true;
    }
  },