附件最多上传10个

xiangpei

2024-12-03 8c3eaeddeff2c9c5a92352e6bf830e5000ff5882

 src/views/onlineStudy/file.vue

@@ -32,7 +32,7 @@
      <el-table-column prop="contentType" :formatter="typeFormatter" label="文件类型">
      </el-table-column>
      <el-table-column label="文件内容" width="240">
        <template slot-scope="scope">
        <template slot-scope="scope" v-if="scope.row.contentUrl">
          <video controls v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url"
            class="showContent" />
          <el-image v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url"
@@ -45,14 +45,15 @@
      </el-table-column>
      <el-table-column prop="attachment" label="附件">
        <template slot-scope="scope">
          <el-link type="primary" :href="'/api/upload/download?url=' + item.url +'&fileName=' + item.name" v-for="item in scope.row.attachment" :key="item.url">{{ item.name }}</el-link>
          <div v-for="item in scope.row.attachment" :key="item.url">
            <el-link type="primary" :href="'/api/upload/download?url=' + item.url +'&fileName=' + item.name" >{{ item.name }}</el-link>
          </div>
        </template>
      </el-table-column>
      <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-popconfirm :title="getTitle(scope.row.typeName)" @confirm="remove(scope.row.id)">
            <el-button slot="reference" type="danger" size="small">删除</el-button>
          </el-popconfirm>
@@ -83,11 +84,11 @@
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件(一个)" prop="contentUrl">
          <upload v-show="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType"
            :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
          <upload v-if="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType"
            :fileSizeLimitM="10" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
        </el-form-item>
        <el-form-item label="附件(最多3个)" prop="attachment">
          <upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment"
        <el-form-item label="附件(最多10个)" prop="attachment">
          <upload :fileSizeLimitM="10" :uploadNum="10" :fileUrl="form.attachment"
            @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile" />
        </el-form-item>
      </el-form>
@@ -98,7 +99,7 @@
    </el-dialog>

    <el-dialog title="PDF查看" :visible.sync="pdfDialog" width="80%" :before-close="closePdfDialog">
      <vue-office-pdf :src="pdf" @rendered="rendered" />
      <vue-office-pdf :src="pdf" @rendered="rendered" style="min-height: 400px; max-height: 800px;"/>
    </el-dialog>
  </div>
</template>
@@ -142,9 +143,9 @@
        temp: []
      },
      rules: {
        contentUrl: [
          { required: true, message: '请上传文件', trigger: 'blur' },
        ],
        // contentUrl: [
        //   { required: true, message: '请上传文件', trigger: 'blur' },
        // ],
        subject: [
          { required: true, message: '请输入主题内容', trigger: 'blur' },
        ],
@@ -196,15 +197,21 @@
      this.form.attachment = fileList.filter(item => item.name !== fileName);
    },
    getUploadAttachmentUrl(uploadData) {
      this.form.attachment = uploadData;
      if (uploadData) {
        this.form.attachment = uploadData;
      }
    },
    getUploadUrl(uploadData) {
      this.form.contentUrl = uploadData;
      console.log("收到：", uploadData)
      if (uploadData) {
        this.form.contentUrl = uploadData;
      }
    },
    remove(id) {
      OnlineStudyAPI.remove([id]).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功');
          this.page()
        }
      });
    },
@@ -278,7 +285,7 @@
    handleUpdate(row) {
      this.form.id = row.id;
      this.form.contentType = row.contentType;
      this.form.contentUrl = [row.contentUrl] || [];
      this.form.contentUrl = row.contentUrl ? [row.contentUrl] : [];
      this.form.attachment = row.attachment || [];
      this.form.subject = row.subject;
      this.form.belongType = row.belongType;