front/src/views/accurateTeaching/accurateAi/microVideo/index.vue

<template>
  <div class="app-container">
    <el-card class="mb20">
      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
                    @invalid="handleInvalidQuery"
      ></mx-condition>
    </el-card>
    <el-card class="box-card">
      <mx-table :prop-defines="propDefines" :rows="rows">
        <template #play="{row}">
          <el-button type="text" icon="el-icon-video-camera" @click="handleVideoPlay(row)">
            播放
          </el-button>
        </template>
      </mx-table>
      <pagination
        :total="total"
        :page.sync="pageForm.pageNum"
        :limit.sync="pageForm.pageSize"
        @pagination="togglePage"
      />
    </el-card>
    <el-dialog :title="videoItem.resourcesName" v-if="videoDialog" :visible.sync="videoDialog" width="800px"
               :append-to-body="true">
      <mx-video :ali-id-type="videoItem.aliIdType" :src="videoItem.resourcesUrl||videoItem.videoId"></mx-video>
    </el-dialog>
  </div>
</template>
<script>
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import MxCondition from '@/components/MxCondition/mx-condition'
import { getAiSubjectVideos } from '@/api/webApi/webVideo'

export default {
  components: { MxSearchGroup, MxCondition },
  data() {
    return {
      pageForm: {
        pageNum: 1,
        pageSize: 20
      },
      rows:[],
      propDefines:{
        resourcesName:{
          label:'名称'
        },
        subjectName:{
          label:'科目'
        },
        play:{
          label:'操作',
          slot:'play'
        }
      },
      total: 0,
      queryParams: {
        v2Subject: '',
      },
      subjectName:'',
      videoDialog: false,
      videoItem: {},
      requireFields:['v2Subject']
    }
  },
  methods: {
    handleInvalidQuery() {

    },
    handleVideoPlay(row) {
      this.videoItem = row
      this.videoDialog = true
    },
    getList() {
      getAiSubjectVideos(
        {
          ...this.pageForm,
        subjectId:this.queryParams.v2Subject
      }).then(res => {
        this.rows = res.rows.map(item => {
          item.subjectName = this.subjectName
          return item
        })
        this.total = res.total
        console.log(res)
      })
    },
    togglePage(){
        this.getList()
    },
    handleQuery(model) {
      console.log(this.$refs.condition.conditions[0].list)
      this.subjectName = this.$refs.condition.conditions[0].list.find(item => item.code == model.v2Subject).label
      console.log(this.subjectName)
      this.getList()
    }
  }
}
</script>
<style scoped>

</style>