FE-V2-PC/src/views/safetyEducationExam/safeLearning/el_course/index.vue

<!--学习资源-->
<template>
  <div class="app-container el-course hardware">
    <div class="list-max-big-box" v-if="pageType === 1">
      <div class="top-max-box">
        <div class="left-max-box scrollbar-box" v-hasPermi="['exam:el_category:list']">
          <div class="classify_btn" @click="goPageEdit(5,'')">管理分类 >></div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="id"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
        <div class="center-max-box" v-hasPermi="['exam:el_category:list']"></div>
        <div class="right-max-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <el-form-item label="课程名称" prop="title" label-width="90px">
              <el-input
                v-model="queryParams.title"
                placeholder="请输入课程名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="" prop="title" style="float: right">
              <el-col :span="1.5">
                <p class="add-button-one-90"
                   @click="goPageEdit(1)"
                   v-hasPermi="['exam:el_course:add']"
                ><i class="el-icon-plus"></i>新增</p>
              </el-col>
            </el-form-item>
            <el-form-item >
              <p class="inquire-button-one" @click="handleQuery">查询</p>
              <p class="reset-button-one" @click="resetQuery">重置</p>
            </el-form-item>
          </el-form>
          <div class="min-list-box">
            <el-table v-loading="loading" border :data="el_courseList" :cell-style="cellStyle">
              <el-table-column label="课程名称" align="left" prop="title"  :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="goCourseDetails(scope.row)"
                             style="padding:0;height:23px;width:320px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left;">{{scope.row.title}}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="适用学院" align="left" prop="title"  :show-overflow-tooltip="true" width="140"/>
              <el-table-column label="适用类型" align="left" prop="scopeType" :show-overflow-tooltip="true" width="140">
                <template slot-scope="scope">
                  <span v-for="(bigItem,bigIndex) in scope.row.scopeType" :key="bigIndex">
                    <span v-for="(item,index) in scopeTypes" :key="index" v-if="bigItem==item.type">{{bigIndex==0?item.value:'、'+item.value}}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="分类" align="left" prop="cateTitle" :show-overflow-tooltip="true" width="100"/>
              <el-table-column label="章节数" align="left" prop="chapters" width="80"/>
              <el-table-column label="有效时间" align="left" prop="createTime" width="120">
                <template slot-scope="scope">
                  {{scope.row.ceType==0?'永久':(scope.row.ceType==1?scope.row.ceTime:'')}}
                </template>
              </el-table-column>
              <el-table-column label="学习人数" align="left" prop="learns" width="100"/>
              <el-table-column label="访问人数" align="left" prop="accessNum" width="100"/>
              <!--<el-table-column label="奖励积分" align="left" prop="points" width="100"/>-->
              <!--<el-table-column label="学习机积分" align="left" prop="machinePoints" width="120"/>-->
<!--              <el-table-column label="状态" align="left" prop="createTime" width="80">
                <template slot-scope="scope">
                  {{scope.row.status==1?'已上架':(scope.row.status==0?'下架':'')}}
                </template>
              </el-table-column>-->
              <el-table-column label="状态" align="left" prop="status" width="90">
                <template slot-scope="scope">
                  <el-switch
                    v-hasPermi="['exam:el_course:edit']"
                    class="switch"
                    @change="switchChange(scope.row)"
                    v-model="scope.row.status+''"
                    active-value="1"
                    inactive-value="0"
                    active-text="上架"
                    inactive-text="下架"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="90">
                <template slot-scope="scope">
                  <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                    <span class="table-min-button">
                      更多<i class="el-icon-d-arrow-right el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="record">学习记录</el-dropdown-item>
                      <el-dropdown-item command="edit" v-hasPermiAnd="['exam:el_course:query','exam:el_course:edit']">编辑</el-dropdown-item>
                      <el-dropdown-item command="delete" v-hasPermi="['exam:el_course:remove']">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bottom-max-box">
        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!--编辑-->
    <edit-page v-if="pageType == 2" :infoId="infoId"></edit-page>
    <!--查看记录-->
    <detail-page v-if="pageType == 3" :infoId="infoId"></detail-page>
    <!-- 添加或修改学习资源对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="分类ID" prop="cateId">
          <el-input v-model="form.cateId" placeholder="请输入分类ID" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="是否公开" prop="private">
          <el-input v-model="form.private" placeholder="请输入是否公开" />
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input v-model="form.level" placeholder="请输入等级" />
        </el-form-item>
        <el-form-item label="是否限制顺序" prop="orderRest">
          <el-input v-model="form.orderRest" placeholder="请输入是否限制顺序" />
        </el-form-item>
        <el-form-item label="课程时长" prop="duration">
          <el-input v-model="form.duration" placeholder="请输入课程时长" />
        </el-form-item>
        <el-form-item label="课程标签" prop="label">
          <el-input v-model="form.label" placeholder="请输入课程标签" />
        </el-form-item>
        <el-form-item label="PDF翻页有效时间" prop="effectiveTime">
          <el-input v-model="form.effectiveTime" placeholder="请输入PDF翻页有效时间" />
        </el-form-item>
        <el-form-item label="课程有效时间类型" prop="ceType">
          <el-select v-model="form.ceType" placeholder="请选择课程有效时间类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程有效时间" prop="ceTime">
          <el-input v-model="form.ceTime" placeholder="请输入课程有效时间" />
        </el-form-item>
        <el-form-item label="课程关键字" prop="keywords">
          <el-input v-model="form.keywords" placeholder="请输入课程关键字" />
        </el-form-item>
        <el-form-item label="封面图片" prop="img">
          <el-input v-model="form.img" placeholder="请输入封面图片" />
        </el-form-item>
        <el-form-item label="课程状态 1 下架，2 上架">
          <el-radio-group v-model="form.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否显示课程拖拽进度" prop="videoDraggable">
          <el-input v-model="form.videoDraggable" placeholder="请输入是否显示课程拖拽进度" />
        </el-form-item>
        <el-form-item label="积分值" prop="points">
          <el-input v-model="form.points" placeholder="请输入积分值" />
        </el-form-item>
        <el-form-item label="设置选项" prop="settings">
          <el-input v-model="form.settings" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="课程类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择课程类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--课程详情-->
    <course-details v-if="pageType == 4" :infoId="infoId"></course-details>
    <!--管理分类-->
    <add-classify v-if="pageType == 5" :pageData="pageData"></add-classify>
  </div>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { listEl_category} from "@/api/exam/el_category";
  import { listEl_course, getEl_course, delEl_course, addEl_course, updateEl_course } from "@/api/exam/el_course";
  import editPage from "./edit.vue";
  import detailPage from "./detail.vue";
  import courseDetails from "./courseDetails.vue";
  import addClassify from "../el_category/index";

export default {
  name: "El_course",
  components: {
    editPage,
    detailPage,
    courseDetails,
    addClassify
  },
  data() {
    return {
      //页面状态
      pageType:1,
      pageData:{
        type:2,//1资源管理2课程管理
      },
      //树数据
      treeData:[],
      defaultProps: {
        children: "children",
        label: "title"
      },
      //学院
      deptOptions:[],
      //适用范围
      scopeTypes: [
        {
          type: 1,
          value: "安全准入考试",
        },
        {
          type: 2,
          value: "负面清单考试",
        },
        {
          type: 3,
          value: "黑名单考试",
        },
        {
          type: 4,
          value: "模拟考试",
        },
      ],
      statusList:[
        {
          type: 1,
          value: "上架",
        },
        {
          type: 2,
          value: "下架",
        },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学习资源表格数据
      el_courseList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        title: '',
      },
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" },
          { required: true, message: "标题不能为空", validator: this.spaceJudgment, trigger: "blur" }
        ],
      },
      infoId:{},
    };
  },
  created() {
    this.getTreeData();
    this.getDeptList();
  },
  methods: {
    //课程状态
    switchChange(row){
      console.log(row.status)
      //1上架0下架
      this.$confirm('是否确定'+(row.status==0?'上架':'下架')+'?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.upDownShelf(row.id,row.status==0?1:0)


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //上架下架
    upDownShelf(id,status){
      let obj = {
        id:id,
        status:status,//课程状态 0 下架，1 上架
      };
      updateEl_course(obj).then( response => {
        this.msgSuccess("修改成功");
        this.getList();
      });
    },
    //去课程详情页面
    goCourseDetails(row){
      console.log("row",row)
      this.pageType = 4;
      this.infoId.id = row.id;
    },
    //单元格样式
    cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
      if(column.title) {
        return "color:red;"
      }
    },
    /* 查询学院列表 */
    getDeptList(){
      listDepartments().then(response => {
        // this.deptOptions = response.data;
        this.$set(this, 'deptOptions', response.data)
      });
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "record":
          this.goPageEdit(3,row.id);
          break;
        case "edit":
          this.goPageEdit(2,row.id);
          break;
        case "delete":
          this.handleDelete(row);
          break;
        default:
          break;
      }
    },
    //新增/编辑按钮
    goPageEdit(type,id){
      console.log(type)
      if(type == 1){
        this.infoId = {};
        this.pageType = 2;
      }else if(type == 2){
        this.infoId.id = id;
        this.pageType = 2;
      }else if(type == 3){
        this.infoId.id = id;
        this.pageType = 3;
      }else if(type == 4){
        this.pageType = 1;
        this.getList();
        this.getTreeData();
      }else if(type==5){//管理分类
        this.pageType = 5;
      }
    },
    /** 查询分类树 */
    getTreeData() {
      this.loading = true;
      listEl_category({},2).then( response => {
        let list = [];
        let obj = {
          children:[],
          title:"所有分类",
          id:"",
        };
        list.push(obj);
        for(let i=0;i<response.data.length;i++){
          list.push(response.data[i]);
        }
        this.treeData =  list;
        this.getList();
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      this.queryParams.cateId = data.id;
      this.getList();
    },
    /** 查询学习资源列表 */
    getList() {
      let self = this;
      this.loading = true;
      if(this.dateRange&&this.dateRange.length>0) {
        this.queryParams.beginTime=this.dateRange[0]
        this.queryParams.endTime=this.dateRange[1]
      } else {
        this.queryParams.beginTime=null;
        this.queryParams.endTime=null
      }
      listEl_course(this.queryParams).then( response => {
        this.el_courseList =  response.rows;
        for(let i=0;i<self.el_courseList.length;i++){
          if(self.el_courseList[i].scopeType){
            self.el_courseList[i].scopeType = self.el_courseList[i].scopeType.split(',');
          }
        }
        this.total =  response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        createBy: null,
        updateBy: null,
        deptId: null,
        deptName: null,
        createTime: null,
        updateTime: null,
        remark: null,
        cateId: null,
        title: null,
        private: null,
        level: null,
        orderRest: null,
        duration: null,
        label: null,
        effectiveTime: null,
        ceType: null,
        ceTime: null,
        keywords: null,
        img: null,
        status: 0,
        videoDraggable: null,
        points: null,
        settings: null,
        type: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.$set(this,'queryParams',{
        pageNum: 1,
        pageSize:20,
        cateId:"",
        title: '',
      });
      this.dateRange=[];
      this.$refs.tree.setCurrentKey();
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加学习资源";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getEl_course(id).then( response => {
        this.form =  response.data;
        this.open = true;
        this.title = "修改学习资源";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateEl_course(this.form).then( response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEl_course(this.form).then( response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if(row.status == 1){
        this.msgError('请先下架课程后再进行删除操作')
        return
      }
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delEl_course(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('exam/el_course/export', {
        ...this.queryParams
      }, `exam_el_course.xlsx`)
    }
  }
};
</script>

<style scoped lang="scss">
  .el-course {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    .list-max-big-box{
      flex:1;
      display: flex!important;
      flex-direction: column;
      padding:20px!important;
      overflow: hidden;
      .top-max-box{
        flex:1;
        display: flex;
        overflow: hidden!important;
        .left-max-box{
          width:250px;
          .classify_btn{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #0183FA;
            line-height: 70px;
            cursor: pointer;
            text-align: left;
          }
        }
        .center-max-box{
          border-right:2px dashed #E0E0E0;
          margin-right:30px;
          margin-top:20px;
        }
        .right-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden!important;
          .min-list-box{
            flex: 1;
            overflow: hidden!important;
            display: flex;
            margin-bottom:15px;
            .button-box{
              width:300px;
              display: flex;
            }
          }
        }
      }
      .bottom-max-box{
        height:50px;
      }
    }
  }

</style>