教学资源加班级

fuliqi

2024-07-04 ff3b5c2ba2a757f050cf833f1af340f384874934

 src/views/education/resource/list.vue

@@ -3,7 +3,13 @@
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="主题">
          <el-input v-model="searchForm.introduction" size="small" placeholder="主题内容" clearable @clear="page"></el-input>
          <el-input v-model="searchForm.introduction" size="small" placeholder="主题内容" clearable
                    @clear="page"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="searchForm.classId" clearable @clear="page" @change="page" placeholder="班级">
            <el-option v-for="item in classesIds" :key="item.id" :label="item.className" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="科目">
          <el-select v-model="searchForm.subjectId" clearable @clear="page" @change="page" placeholder="科目">
@@ -21,11 +27,12 @@
      </div>
    </div>


    <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="introduction" label="主题简介">
      </el-table-column>
      <el-table-column prop="className" label="班级">
      </el-table-column>
      <el-table-column prop="typeName" label="科目">
      </el-table-column>
@@ -34,26 +41,30 @@
      <el-table-column label="文件内容" width="240">
        <template slot-scope="scope">
          <video controls v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url"
                 class="showContent" />
                 class="showContent"/>
          <el-image v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url"
                    class="showContent"></el-image>
          <!-- <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'" class="showContent"
                   @click="checkPdf('/api/files/' + scope.row.contentUrl.url)">点击查看</el-link>
                   @click="checkPdf('/api/files/' + scope.row.contentUrl.url)">点击查看
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="attachment" label="附件">
        <template slot-scope="scope">
          <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>
            <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>
                     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>
@@ -62,13 +73,22 @@
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                @pagination="page" />
                @pagination="page"/>

    <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="introduction">
          <el-input v-model="form.introduction" placeholder="主题内容"></el-input>
        </el-form-item>
        <el-form-item label="班级" >
          <el-select
            v-model="form.classId"
            placeholder="班级"
            clearable
          >
            <el-option v-for="item in classesIds" :key="item.id" :label="item.className" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="subjectId">
          <el-select v-model="form.subjectId" placeholder="科目">
@@ -85,11 +105,11 @@
        </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" />
                  :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" />
                  @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
@@ -105,26 +125,29 @@
</template>

<script>
import Pagination from '@/components/Pagination';
import EducationResourceAPI from '@/api/educationResource';
import SubjectAPI from '@/api/subject';
import Upload from '@/components/UploadC';
import Pagination from '@/components/Pagination'
import EducationResourceAPI from '@/api/educationResource'
import SubjectAPI from '@/api/subject'
import Upload from '@/components/UploadC'
import { myClasses } from '@/api/classes'

import VueOfficePdf from '@vue-office/pdf';
import VueOfficePdf from '@vue-office/pdf'

export default {
  name: 'type',
  components: { Upload, Pagination, VueOfficePdf },
  computed: {
    fileContentUrl: () => {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : []
    }
  },
  data() {
  data () {
    return {
      pdf: '',
      dialogTitle: '添加学习内容',
      ids: [],
      typeList: [],
      classesIds: [],
      searchForm: {
        pageNum: 1,
        pageSize: 5,
@@ -139,6 +162,7 @@
        contentType: 'video',
        introduction: '',
        belongType: 2,
        classId: null,
        contentUrl: [],
        attachment: [],
        temp: []
@@ -157,101 +181,107 @@
          { required: true, message: '请选择文件类型', trigger: 'change' }
        ]
      }
    };
    }
  },
  methods: {
    checkPdf(url) {
      this.pdf = url;
      this.pdfDialog = true;
    // 获取我的班级
    getClasses () {
      myClasses().then(re => {
        this.classesIds = re.data.data
      })
    },
    closePdfDialog() {
      this.pdfDialog = false;
    checkPdf (url) {
      this.pdf = url
      this.pdfDialog = true
    },
    rendered() {
    closePdfDialog () {
      this.pdfDialog = false
    },
    rendered () {

    },
    fileChange() {
      this.form.contentUrl = [];
    fileChange () {
      this.form.contentUrl = []
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    handleSelectionChange (val) {
      this.ids = val.map(item => item.id)
    },
    typeFormatter(row) {
    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 = [];
      this.$refs.upload.clearFile();
    clearFile () {
      this.form.contentUrl = []
      this.$refs.upload.clearFile()
    },
    removeFile() {
      this.form.contentUrl = [];
    removeFile () {
      this.form.contentUrl = []
    },
    removeAttachmentFile (fileList, fileName) {
      this.form.attachment = fileList.filter(item => item.name !== fileName);
      this.form.attachment = fileList.filter(item => item.name !== fileName)
    },
    getUploadAttachmentUrl (uploadData) {
      this.form.attachment = uploadData;
      this.form.attachment = uploadData
    },
    getUploadUrl (uploadData) {
      this.form.contentUrl = uploadData;
      this.form.contentUrl = uploadData
    },
    remove (id) {
      EducationResourceAPI.remove([id]).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功');
          this.$message.success('删除成功')
          this.page()
        }
      });
      })
    },
    batchRemove() {
    batchRemove () {
      if (this.ids.length < 1) {
        this.$message.warning("请选择要删除的数据");
        this.$message.warning('请选择要删除的数据')
      }
      EducationResourceAPI.remove(this.ids).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功');
          this.ids = [];
          this.$message.success('删除成功')
          this.ids = []
        }
      });
      })
    },
    getTitle (typeName) {
      return '确定要删除' + typeName + '这个文件吗？';
      return '确定要删除' + typeName + '这个文件吗？'
    },
    handlerSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const temp = JSON.parse(JSON.stringify(this.form));
          const temp = JSON.parse(JSON.stringify(this.form))
          // this.form.contentUrl = this.form.contentUrl[0]
          temp.contentUrl = temp.contentUrl[0];
          temp.contentUrl = temp.contentUrl[0]
          if (temp.id) {
            EducationResourceAPI.update(temp).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功');
                this.open = false;
                this.page();
                this.$message.success('修改成功')
                this.open = false
                this.page()
              }
            });
            })
          } else {
            EducationResourceAPI.add(temp).then(res => {
              if (res.code === 1) {
                this.$message.success('添加成功');
                this.open = false;
                this.page();
                this.$message.success('添加成功')
                this.open = false
                this.page()
              }
            });
            })
          }
        }
      });
      })
    },
    resetForm() {
    resetForm () {
      this.form = {
        contentType: 'video',
        introduction: '',
@@ -259,45 +289,48 @@
        contentUrl: [],
        attachment: [],
        temp: []
      };
      }
    },
    handleClose() {
      this.open = false;
      this.resetForm();
    handleClose () {
      this.open = false
      this.resetForm()
    },
    handlerAdd() {
      this.resetForm();
      this.open = true;
      this.dialogTitle = '添加学习内容';
    handlerAdd () {
      this.resetForm()
      this.open = true
      this.dialogTitle = '添加学习内容'
    },
    page() {
    page () {
      EducationResourceAPI.page(this.searchForm).then(res => {
        if (res.code === 1) {
          this.tableData = res.data;
          this.total = res.total;
          this.tableData = res.data
          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.introduction = row.introduction;
      this.form.belongType = row.belongType;
      this.dialogTitle = '修改学习内容';
      this.open = true;
    handleUpdate (row) {
      this.form.id = row.id
      this.form.contentType = row.contentType
      this.form.classesId = row.classesId
      this.form.subjectId = row.subjectId
      this.form.contentUrl = [row.contentUrl] || []
      this.form.attachment = row.attachment || []
      this.form.introduction = row.introduction
      this.form.belongType = row.belongType
      this.dialogTitle = '修改学习内容'
      this.open = true
    }
  },
  mounted() {
    this.page();
  mounted () {
    this.page()
    this.getClasses()
    SubjectAPI.list().then(res => {
      if (res.code === 1) {
        this.typeList = res.data;
        this.typeList = res.data
      }
    });
    })
  }
};
}
</script>

<style scoped>
@@ -314,6 +347,7 @@
.search {
  margin-top: 10px;
}

::v-deep .el-image__error {
  position: absolute;
  top: 0;