feat:分数统计

ZhangXianQiang

2024-05-24 2bddfa78e65f351d6cb81f670775e79620f684a6

 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>
@@ -29,36 +31,40 @@
      </el-table-column>
      <el-table-column prop="contentType" :formatter="typeFormatter" label="文件类型">
      </el-table-column>
      <el-table-column label="文件内容">
      <el-table-column label="文件内容" width="240">
        <template slot-scope="scope">
          <video v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url"
          <video controls 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>
          <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>
        </template>
      </el-table-column>
      <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>
          <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>
        </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,19 +72,19 @@
        </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>
        <el-form-item label="文件类型" prop="contentType">
          <el-select v-model="form.contentType" placeholder="不同类型的文件阅览方式不同，多余文件请以附件形式上传">
          <el-select v-model="form.contentType" placeholder="不同类型的文件阅览方式不同，多余文件请以附件形式上传" @change="fileChange">
            <el-option label="视频" value="video"></el-option>
            <el-option label="PDF" value="pdf"></el-option>
            <el-option label="图片" value="img"></el-option>
          </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">
@@ -91,6 +97,10 @@
        <el-button type="primary" @click="handlerSubmit">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="PDF查看" :visible.sync="pdfDialog" width="80%" :before-close="closePdfDialog">
      <vue-office-pdf :src="pdf" @rendered="rendered" />
    </el-dialog>
  </div>
</template>

@@ -99,9 +109,11 @@
import OnlineStudyAPI from '@/api/online-study';
import StudyTypeAPI from '@/api/study-type';
import Upload from '@/components/UploadC';

import VueOfficePdf from '@vue-office/pdf';
export default {
  name: 'type',
  components: { Upload, Pagination },
  components: { Upload, Pagination, VueOfficePdf },
  computed: {
    fileContentUrl: () => {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
@@ -109,18 +121,26 @@
  },
  data() {
    return {
      pdf: '',
      dialogTitle: '添加学习内容',
      ids: [],
      typeList: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        pageSize: 5,
        typeName: ''
      },
      total: 0,
      tableData: [],
      open: false,
      pdfDialog: false,
      form: {
        contentType: 'video'
        contentType: 'video',
        subject: '',
        belongType: 2,
        contentUrl: [],
        attachment: [],
        temp: []
      },
      rules: {
        contentUrl: [
@@ -139,6 +159,19 @@
    };
  },
  methods: {
    checkPdf(url) {
      this.pdf = url;
      this.pdfDialog = true;
    },
    closePdfDialog() {
      this.pdfDialog = false;
    },
    rendered() {

    },
    fileChange() {
      this.form.contentUrl = [];
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
@@ -154,26 +187,26 @@
      }
    },
    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) {
      this.form.attachment = uploadData;
    },
    getUploadUrl(uploadData) {
      this.form.contentUrl = uploadData[0];
      this.form.contentUrl = uploadData;
    },
    remove(id) {
      OnlineStudyAPI.remove([id]).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功');
          this.page()
        }
      });
    },
@@ -194,8 +227,11 @@
    handlerSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            OnlineStudyAPI.update(this.form).then(res => {
          const temp = JSON.parse(JSON.stringify(this.form));
          // this.form.contentUrl = this.form.contentUrl[0]
          temp.contentUrl = temp.contentUrl[0];
          if (temp.id) {
            OnlineStudyAPI.update(temp).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功');
                this.open = false;
@@ -203,7 +239,7 @@
              }
            });
          } else {
            OnlineStudyAPI.add(this.form).then(res => {
            OnlineStudyAPI.add(temp).then(res => {
              if (res.code === 1) {
                this.$message.success('添加成功');
                this.open = false;
@@ -214,13 +250,24 @@
        }
      });
    },
    resetForm() {
      this.form = {
        contentType: 'video',
        subject: '',
        belongType: 2,
        contentUrl: [],
        attachment: [],
        temp: []
      };
    },
    handleClose() {
      this.open = false;
      this.form = {};
      this.resetForm();
    },
    handlerAdd() {
      this.form = {};
      this.resetForm();
      this.open = true;
      this.dialogTitle = '添加学习内容';
    },
    page() {
      OnlineStudyAPI.page(this.searchForm).then(res => {
@@ -233,11 +280,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;
    }
  },
@@ -254,8 +301,9 @@

<style scoped>
.showContent {
  width: 200px;
  height: 100px;
  width: 100%;
  min-height: 80px;
  object-fit: contain;
}

.warp {
@@ -265,4 +313,9 @@
.search {
  margin-top: 10px;
}
::v-deep .el-image__error {
  position: absolute;
  top: 0;
  bottom: 0;
}
</style>