FE_middlePlatform_server/src/views/course/content/source.vue

<template>
  <el-drawer title="添加系统资源" :visible.sync="sourceVisible" size="1200px" :close-on-click-modal="false"
    custom-class="source-dia" @closed="closeDia">
    <div class="overflow">
      <div class="left">
        <el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword"
          clearable></el-input>
        <div class="tabs mgb20">
          <a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: i == active }" @click="tabChange(i)">{{
            item
          }}</a>
        </div>

        <div class="course">
          <div class="item">
            <div class="line">
              <i class="el-icon-caret-right arrow"></i>
              <el-checkbox class="check" v-model="checked"></el-checkbox>
              <img class="cover" src="" alt="">
              <span class="course-name"></span>
            </div>
            <div class="chapters">
              <div class="line">
                <i class="el-icon-caret-right arrow"></i>
                <el-checkbox class="check" v-model="checked"></el-checkbox>
                <span class="chapter-name"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <template v-if="checked.length">
          <div class="flex-between">
            <p class="total">已选资源（共{{ checked.length }}个）</p>
            <el-button type="text" @click="batchDelChecked">批量移除</el-button>
          </div>

          <el-input placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>

          <div :class="['lines']">
            <template v-for="(item, i) in checked">
              <div v-if="item.stemText.includes(checkedKeyword) || item.knowledgePointName.includes(checkedKeyword)"
                :key="i" class="line">
                <div class="check-left">
                  <el-checkbox v-model="item.check"></el-checkbox>
                  <span class="serial">{{ i + 1 }}</span>
                  <el-tooltip effect="dark" :content="item.stemText" placement="top-start">
                    <p class="checked-name ellipsis">{{ item.stemText }}</p>
                  </el-tooltip>
                </div>
                <i class="el-icon-delete action-icon" @click="delChecked(item)"></i>
              </div>
            </template>
          </div>
        </template>
        <div v-else class="empty">
          <img class="icon" src="@/assets/img/empty.svg" alt="">
          <p>暂无数据</p>
        </div>

      </div>
    </div>

    <div class="btns">
      <el-button @click="sourceVisible = false">取消</el-button>
      <el-button type="primary" :loading="submiting" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
  props: ['visible'],
  data () {
    return {
      sourceVisible: false,
      active: 'tab1',
      tabs: {
        tab1: '教学课程',
        tab2: '精品课程',
        tab3: '文件素材',
      },
      keyword: '',
      searchTimer: null,

      course: [],
      page: 1,
      pageSize: 10,
      total: 0,

      checked: [],
      submiting: false,
      loaded: 0,
    };
  },
  watch: {
    'keyword': function (val) {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(this.initQuesBank, 500)
    },
    visible () {
      this.sourceVisible = this.visible
      this.visible && this.init()
    }
  },
  mounted () {

  },
  methods: {
    // 初始化
    init () {
      this.getCourse()
    },
    // 课程列表
    async getCourse () {
      const sid = this.$store.state.dataPer.find(e => e.permissionName === '课程管理')
      const { page } = await this.$post(this.api.curriculumList, {
        pageNum: this.page,
        pageSize: this.pageSize,
        supplierId: sid ? sid.supplierId : ''
      })
      this.course = page.records
      this.total = page.total
    },
    initData () {
      this.page = 1;
      this.getData();
    },
    tabChange (index) {
      this.active = index
    },

    // 批量移除
    async batchDelChecked (val) {
      try {
        const checked = this.checked.filter(e => e.check)
        if (checked.length) {
          checked.map(e => {
            const cur = this.ques.find(n => n.questionVersionId === e.questionVersionId)
            if (cur) {
              cur.check = false
            }
          })
          this.quesAllCheck = false
          this.checkedAllCheck = false
          this.checked = this.checked.filter(e => !e.check)
        } else {
          Util.warningMsg('请选择数据')
        }
      } catch (e) { }
    },
    // 已选单个删除
    async delChecked (item) {
      try {
        const cur = this.ques.find(e => e.questionVersionId === item.questionVersionId)
        if (cur) cur.check = false
        this.checked.splice(this.checked.findIndex(e => e.questionVersionId === item.questionVersionId), 1)
      } catch (e) { }
    },
    // 提交
    async submit () {

      try {
        const res = await this.$post(this.api.selectQuestionsByTypeAndDifficulty, list)

        let invalid = 0
        let hasQues = 0
        list.map((e, i) => {
          if (+e.count !== res.list[i].questions.length) invalid = 1
          if (e.examQuestions.length) hasQues = 1
          e.score = 0
        })

        this.sourceVisible = false
        this.$parent.calcDifficult()
        this.submiting = false
      } catch (e) {
        this.submiting = false
      }
    },
    // 弹框关闭回调
    closeDia () {
      this.$emit('update:visible', false)
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.source-dia {
  .el-drawer__header {
    padding-bottom: 20px;
    margin-bottom: 0;
    border-bottom: 1px solid #eee;
  }

  .overflow {
    display: flex;
  }

  .btns {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 14px 0;
    text-align: center;
    background-color: #fff;
    box-shadow: 4px -2px 6px 0px rgba(198, 198, 198, 0.3500);
  }


  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 14px;
    text-align: center;
    color: #a3a3a3;
  }

  .left {
    width: 700px;
    height: calc(100vh - 125px);
    padding: 0 20px;
    overflow: auto;
    padding: 15px;
    margin-right: 20px;
    border-right: 1px solid #eee;
    box-sizing: border-box;

    .course {
      .item {
        padding: 10px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
      }
    }



    .line {
      display: flex;
      align-items: center;
    }

    .arrow {
      font-size: 16px;
      color: #333;
      cursor: pointer;
    }

    .check {
      margin: 0 10px;
    }

    .cover {
      width: 100px;
      max-height: 80px;
    }

    .course-name {
      font-size: 16px;
      color: #333;
    }

    .chapter-name {
      font-size: 14px;
      color: #ccc;
    }
  }

  .right {
    flex: 1;

    .line {
      display: flex;
      padding: 5px 0;
      color: #333;
    }

    .serial {
      width: 32px;
      margin: 0 12px;
      text-align: center;
      white-space: nowrap;
    }

    .checked-name {
      width: calc(100% - 210px);
      margin-right: 20px;
    }

    .action-icon {
      font-size: 14px;
    }
  }
}
</style>