safetyEducationExamination/src/views/safetyEducationExaminationNew/safetyEducation/knowledgeLearning/index.vue

<!-- 知识学习 -->
<template>
  <div class="app-container knowledgeLearning">
    <div class="page-container knowledgeLearningPage">
      <p class="pageTitle">知识学习</p>
      <div class="max-big-box">
        <div class="left-box scrollbar-box">
          <p @click="leftCheckButton(index)"
            v-for="(item,index) in letDataList" :key="index"
            class="left-for-p" :class="index==leftDataIndex?'leftCheck':''">
            {{item.name}}
          </p>
        </div>
        <div class="right-box">
          <div class="top-max-button-box">
            <p :class="topButtonIndex == 1?'top-check-button':''" @click="topCheckButton(1)">视频资源</p>
            <p :class="topButtonIndex == 2?'top-check-button':''" @click="topCheckButton(2)">文档文章</p>
          </div>
          <div class="page-form-title-box">
            <el-form :model="queryParams" class="form-box" ref="queryForm"
                     :inline="true" style="width:100%;">
              <div class="table-top-button-box">
                <div>
                  <p :class="shareStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
                  <p :class="shareStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">未学习</p>
                  <p :class="shareStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">学习中</p>
                  <p :class="shareStatus === 3?'check-table-button':''" @click="tableTypeButton(3)">已学完</p>
                </div>
              </div>
              <el-form-item label="" prop="queryParamsData1">
                <el-cascader
                  v-model="queryParams.queryParamsData1"
                  :options="optionListB"
                  :props="{
                emitPath:false,
                checkStrictly: true,
                value: 'id',
                label: 'knowledgePointName',
                children: 'children',
              }"
                  style="width: 180px"
                  :show-all-levels="false"
                  filterable
                  placeholder="知识点"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="" prop="queryParamsData2">
                <el-input
                  maxLength="30"
                  v-model="queryParams.queryParamsData2"
                  placeholder="搜索名称"
                  style="width: 200px"
                />
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
              <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            </el-form>
          </div>
          <div class="page-content-box">
            <div class="for-max-big-box scrollbar-box">
              <div class="for-big-box" v-for="(item,index) in dataList" :key="index">
                <img :src="item.data1" alt="未配置封面">
                <div class="bottom-big-box">
                  <p class="name-p">{{item.data3}}</p>
                  <p class="time-p">{{item.data4}}分钟 丨 {{item.data5}}学时 丨 {{item.data6}}积分</p>
                </div>
                <p class="type-p" :class="item.data2=='1'?'type-p-1':(item.data2=='2'?'type-p-2':(item.data2=='3'?'type-p-3':''))">{{item.data2=='1'?'未学习':(item.data2=='2'?'学习中':(item.data2=='3'?'已学完':''))}}</p>
              </div>
            </div>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  export default {
    name: 'index',
    //components: {
    //  addPage
    //},
    data() {
      return {
        //页面状态
        pageType: 1,
        //页面遮罩
        loading: false,
        letDataList:[
          {name:'全部知识点',id:'1'},{name:'全部知识点',id:'2'},
          {name:'全部知识点',id:'3'},{name:'全部知识点',id:'4'},
          {name:'全部知识点',id:'5'},{name:'全部知识点',id:'6'},
          {name:'全部知识点',id:'7'},{name:'全部知识点',id:'8'},
          {name:'全部知识点',id:'9'},{name:'全部知识点',id:'10'},
          {name:'全部知识点',id:'11'},{name:'全部知识点',id:'12'},
          {name:'全部知识点',id:'13'},{name:'全部知识点',id:'14'},
        ],
        leftDataIndex:0,
        topButtonIndex:1,
        //下拉列表数据
        optionListB: [],
        //查询条件
        shareStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          queryParamsData1: '',
          queryParamsData2: null
        },
        //列表数据
        dataList: [
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'1',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'1',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'2',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'2',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'3',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'3',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'1',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'2',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'3',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
          {data1:'https://img1.baidu.com/it/u=1480196961,2254893225&fm=253&app=138&f=JPEG?w=800&h=1010',data2:'1',data3:'课程名称',data4:'20',data5:'1',data6:'3',data7:'0',data8:'2',data9:'50',},
        ],
        //数据数量
        total: 0,
      }
    },
    created() {

    },
    mounted() {
      this.examElKnowledgePointTreeList();
      //this.getList();
    },
    methods: {
      //左侧列表切换
      leftCheckButton(index){
        if(this.leftDataIndex != index){
          this.$set(this,'leftDataIndex',index);
        }
      },
      //顶部切换
      topCheckButton(index){
        if(this.topButtonIndex != index){
          this.$set(this,'topButtonIndex',index);
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.shareStatus != val){
          this.$set(this,'shareStatus',val);
          this.handleQuery();
        }
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this, 'dateRange', [])
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          queryParamsData1: '',
          queryParamsData2: null
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        this.$set(this, 'loading', true)
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if (this.dateRange[0]) {
          obj.startTime = this.dateRange[0] + 'T00:00:00'
          obj.endTime = this.dateRange[1] + 'T23:59:59'
        } else {
          obj.startTime = ''
          obj.endTime = ''
        }
        getListFunction(obj).then(response => {
          this.$set(this, 'loading', false)
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(type, row) {
        let self = this
        if (type == 1) {
          //新增
          this.$set(this, 'pageType', 2)
          this.$set(this, 'propsData', {})
        } else if (type == 2) {
          //详情
          this.$set(this, 'pageType', 2)
          let obj = JSON.parse(JSON.stringify(row))
          obj.showType = true
          this.$set(this, 'propsData', obj)
        } else if (type == 3) {
          //编辑
          this.$set(this, 'pageType', 2)
          let obj = JSON.parse(JSON.stringify(row))
          obj.showType = false
          this.$set(this, 'propsData', obj)
        } else if (type == 4) {
          //删除
          this.$confirm('是否确认删除?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
          }).then(() => {
            deleteFunction({ id: row.id }).then(response => {
              self.msgSuccess(response.message)
              self.getList()
            })
          }).catch(() => {
          })
        } else if (type == 5) {
          //启用&停用
          let text = row.state ? '停用' : '启用'
          this.$confirm('是否确认' + text + '?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
          }).then(() => {
            stateFunction({ id: row.id, state: !row.state }).then(response => {
              self.msgSuccess(response.message)
              self.getList()
            })
          }).catch(() => {
          })
        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
      examElKnowledgePointTreeList(){
        examElKnowledgePointTreeList({}).then(response => {
          const list = response.data || [];
          this.formatTreeData(list);
          this.$set(this, 'optionListB', list);
        });
      },
    }
  }
</script>
<style scoped lang="scss">
  .knowledgeLearning {
    .knowledgeLearningPage {
      .pageTitle{
        height:60px;
        line-height:60px;
        padding:0 20px;
        border-bottom:1px solid #dedede;
      }
      .max-big-box{
        display: flex;
        overflow: hidden;
        .left-box{
          width:200px;
          border-right:1px solid #dedede;
          padding:20px 0 ;
          .left-for-p{
            margin:5px 0;
            padding:0 20px;
            text-align: center;
            border-right:4px solid #ffffff;
            cursor: pointer;
            font-weight:700;
            font-size:16px;
            line-height:40px;
          }
          .left-for-p:hover{
            background-color: #0183fa;
            color: #ffffff;
          }
          .leftCheck{
            color: #0183fa;
            border-right:4px solid #0183fa;
          }
        }
        .right-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .top-max-button-box{
            display: flex;
            margin:20px 0 0 20px;
            p{
              width:120px;
              line-height:40px;
              border-radius:4px;
              color:#333;
              border:1px solid #333;
              text-align: center;
              margin-right:20px;
              cursor: pointer;
            }
            .top-check-button{
              border:1px solid #0183fa;
              background-color: #0183fa;
              color:#fff;
            }
          }
          .table-top-button-box{
            display: inline-block;
            vertical-align: top;
            margin-right:10px;
            div{
              display: flex;
              p{
                border:1px solid #DCDFE6;
                width:80px;
                text-align: center;
                height:40px;
                line-height:40px;
                cursor: pointer;
                font-size:14px;
              }
              p:nth-child(1){
                border-top-left-radius:4px;
                border-bottom-left-radius:4px;
              }
              p:nth-child(2){
                border-left:none;
                border-right:none;
              }
              p:nth-child(3){
                border-left:none;
                border-right:none;
              }
              p:nth-child(4){
                border-top-right-radius:4px;
                border-bottom-right-radius:4px;
              }
              .check-table-button{
                border:1px solid #0183fa;
                background-color: #0183fa;
                color:#fff;
              }
            }
          }
          .page-content-box{
            padding:20px 0;
          }
          .for-max-big-box{
            flex:1;
            .for-big-box{
              cursor: pointer;
              display: inline-block;
              width:320px;
              margin:0 0 20px 20px;
              border-radius:6px;
              overflow: hidden;
              box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
              position: relative;
              img{
                width:320px;
                height:180px;
              }
              .bottom-big-box{
                padding:10px 0 10px 10px;
                .name-p{
                  line-height:30px;
                  font-size:16px;
                  font-weight:700;
                }
                .time{
                  line-height:30px;
                  font-size:14px;
                }
              }
              .type-p{
                position: absolute;
                right:20px;
                bottom:15px;
                padding:5px 10px;
                border-radius:4px;
                font-size:14px;
              }
              .type-p-1{
                color:#fff;
                background-color: #999;
              }
              .type-p-2{
                color:#fff;
                background-color: #7CCD7C;
              }
              .type-p-3{
                color:#fff;
                background-color: #0183fa;
              }
            }
          }
        }
      }
    }
  }
</style>