front/src/views/accurateTeaching/collect/index.vue

<template>
  <div class="app-container">
    <el-card>
      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
                    @invalid="handleInvalidQuery"
      ></mx-condition>
    </el-card>
    <el-card class="box-card mt20">
      <div slot="header" class="clearfix">
        <el-row :gutter="10">
          <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToCloudResourse']">
            <el-button plain icon="el-icon-upload2" size="small" @click="upToCloudResourse" :disabled="multiple">上传至云库
            </el-button>
          </el-col>
          <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToSchoolResourse']">
            <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolResourse" :disabled="multiple">
              上传至校本资源库
            </el-button>
          </el-col>
          <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToBoard']">
            <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolClass" :disabled="multiple">上传至班牌
            </el-button>
          </el-col>
          <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToStudent']">
            <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolStudent" :disabled="multiple">
              上传至学生端
            </el-button>
          </el-col>
          <el-col :span="1.5" v-hasPermi="['front:personResource:uploadToParent']">
            <el-button plain icon="el-icon-upload2" size="small" @click="upToSchoolParent" :disabled="multiple">上传至家长端
            </el-button>
          </el-col>
        </el-row>
      </div>
      <mx-table :rows="list" :prop-defines="propDefines" @selection-change="handleSelectionChange">
        <template #img="{row}">
          <img style="width: 130px; height: 80px; cursor: pointer" @click="playVideo(row)" :src="img.ship" alt/>
        </template>
      </mx-table>
    </el-card>


    <upload-dialog
      v-if="dialogVisible"
      :title="title"
      :pageName="pageName"
      :isZdy="isZdy"
      :selectType="selectType"
      :dialogVisible="dialogVisible"
      @handleClose="handleClose"
      @dialogVisibleClose="dialogVisibleClose"
    ></upload-dialog>
    <el-dialog title="查看视频" :visible.sync="dialogVideo" width="60%">
      <mx-video v-if="dialogVideo" :aliIdType="aliIdType" :src="src" controls controlslist="nodownload"
                disablepictureinpicture
      ></mx-video>
    </el-dialog>
  </div>
</template>

<script>


import MxCondition from '@/components/MxCondition/mx-condition'
import {
  list,
  upToCloudResourse,
  upToSchoolClass,
  upToSchoolParent,
  upToSchoolResourse,
  upToSchoolStudent
} from '@/api/webApi/person'

export default {
  components: { MxCondition },
  data() {
    return {
      queryParams: {
        subjectByVideo: ''
      },
      img: {
        ship: require('@/assets/images/ship.png')
      },
      requireFields: [],
      pageForm: {
        pageSize: 10,
        pageNum: 1
      },
      dialogVideo: false,
      list: [],
      total: 0,
      propDefines: {
        sele: {
          label: '文件',
          type: 'selection'
        },
        paper: {
          label: '文件',
          slot: 'img'
        },
        resourcesName: {
          label: '文件名'
        },
        createBy: {
          label: '发布人'
        },
        createTime: {
          label: '时间'
        }
      },
      multiple: true,
      // 非单个禁用
      single: true,
      ids: [],
      idsSel: [],
      resourcesNames: [],
      isZdy: true,
      title:'',
      selectType:'',
      dialogVisible:'',
      pageName:"视频课程",
    }
  },
  created() {

  },
  watch: {},
  methods: {
    dialogVisibleClose() {
      this.dialogVisible = false;
    },
    handleClose(type, name, selectData) {
      console.log("------------");
      console.log(type);
      console.log(name);
      console.log(selectData);
      let _this = this
      if (this.title == '上传至云库') {
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item
          }
          if (name) {
            Ajax.resourcesName = name
          }
          upToCloudResourse(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess('操作成功')
              _this.dialogVisible = false
            }
          })
        })
      } else if (this.title == '上传至校本资源库') {
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item
          }
          if (name) {
            Ajax.resourcesName = name
          }
          upToSchoolResourse(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess('操作成功')
              _this.dialogVisible = false
            }
          })
        })
      } else if (this.title == '上传至班牌') {
        console.log('上传至班牌')
        console.log(selectData)
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
            classId: selectData.checkedClass,
            studentCodes: selectData.checkedStudent
              ? selectData.checkedStudent.join(',')
              : ''
          }
          if (name) {
            Ajax.resourcesName = name
          }
          console.log('上传至班牌', Ajax)
          upToSchoolClass(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess('操作成功')
              _this.dialogVisible = false
            }
          })
        })
      } else if (this.title == '上传至学生端') {
        console.log('上传至学生端')
        console.log(selectData)
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
            classId: selectData.checkedClass,
            remark: selectData.remark,
            studentCodes: selectData.checkedStudent.join(',')
          }
          if (name) {
            Ajax.resourcesName = name
          }
          upToSchoolStudent(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess('操作成功')
              _this.dialogVisible = false
            }
          })
        })
      } else if (this.title == '上传至家长端') {
        console.log('上传至家长端')
        console.log(selectData)
        _this.ids.forEach((item, index) => {
          let Ajax = {
            resourseId: item,
            classId: selectData.checkedClass,
            remark: selectData.remark,
            studentCodes: selectData.checkedStudent.join(',')
          }
          if (name) {
            Ajax.resourcesName = name
          }
          upToSchoolParent(Ajax).then(() => {
            if (index == _this.ids.length - 1) {
              _this.msgSuccess('操作成功')
              _this.dialogVisible = false
            }
          })
        })
      }
    },
    upToCloudResourse() {
      this.isZdy = false
      let _this = this
      const resourcesIds = this.ids.join(',')
      this.title = '上传至云库'
      this.selectType = ''
      this.dialogVisible = true
    },
    upToSchoolResourse() {
      this.isZdy = true
      let _this = this
      const resourcesIds = this.ids.join(',')
      this.title = '上传至校本资源库'
      this.selectType = ''
      this.dialogVisible = true
    },
    upToSchoolClass() {
      this.isZdy = false
      let _this = this
      const resourcesIds = this.ids.join(',')
      this.title = '上传至班牌'
      this.selectType = 'class'
      this.dialogVisible = true
    },
    upToSchoolStudent() {
      this.isZdy = false
      let _this = this
      const resourcesIds = this.ids.join(',')
      this.title = '上传至学生端'
      this.selectType = 'student'
      this.dialogVisible = true
    },
    upToSchoolParent() {
      this.isZdy = false
      let _this = this
      const resourcesIds = this.ids.join(',')
      this.title = '上传至家长端'
      this.selectType = 'parent'
      this.dialogVisible = true
    },
    handleSelectionChange(selection) {
      this.idsSel = selection.map((item) => item)
      this.ids = selection.map((item) => item.resourcesId)
      this.resourcesNames = selection.map((item) => item.resourcesName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleQuery() {
      this.getList()
    },
    playVideo(row) {
      this.aliIdType = row.aliIdType
      this.src = row.resourcesUrl
      this.dialogVideo = true
    },
    getList() {
      this.tableLoading = true
      list({
        subjectId: this.queryParams.subjectByVideo, //科目
        category: '视频课程',
        ...this.pageForm
      })
        .then(res => {
          this.list = res.rows
          this.total = res.total
        })
        .finally(_ => {
          this.tableLoading = false
        })
    },
    handleInvalidQuery() {

    }
  }
}
</script>