HM21St_Page_Manager/src/views/content_manage/course_manage/LiveCourse.vue

<template>
  <div class="manage-root recorded-manage">
    <Header />
    <div class="manage-root-contain">
        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
        <div class="manage-root-contain-right personnel-manage-right">
            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
            <div class="personal-inner">
                <div class="common-title-box">
                    <h3>直播课</h3>
                    <div class="btn-box">
                        <el-button type="primary" size="small" @click="handleEdit">创建课程</el-button>
                    </div>
                </div>
                <div class="search-box">
                    <div class="search-item">
                        <label>搜索</label>
                        <el-input
                            placeholder="输入搜索内容"
                            v-model="searchInput">
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" style="cursor: pointer;"></i>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>状态</label>
                        <el-select v-model="searchStatus" @change="getList" placeholder="请选择">
                            <el-option
                                v-for="item in searchStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>学段</label>
                        <el-select v-model="searchStudy" @change="getList" placeholder="请选择">
                            <el-option
                                v-for="item in studyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <el-table
                    class="search-table"
                    :data="tableData"
                    style="width: 100%"
                    :max-height="tableHeight">
                    <el-table-column
                        type="index"
                        label="#"
                        sortable
                        width="64">
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        label="名称"
                        sortable
                        min-width="128">
                    </el-table-column>
                    <el-table-column
                        prop="teacher"
                        label="教师"
                        width="80"
                        sortable>
                        <template slot-scope="scope">
                            <p class="teacher-list">
                                {{formatterTracher(scope.row)}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="study"
                        label="学段"
                        width="80"
                        sortable>
                        <template slot-scope="scope">
                            {{formatterStudy(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="价格"
                        width="154" 
                        sortable>
                        <template slot-scope="scope">
                            <span class="currectPrice">￥{{scope.row.price | cutMoneyFiter}}</span>
                            <span class="oldPrice">(￥{{scope.row.oldPrice | cutMoneyFiter}})</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        width="104" >
                        <template slot-scope="scope">
                            <div class="status-box">
                                <span :style="{background:statusList[scope.row.status].bg}"></span>
                                <b :style="{color:statusList[scope.row.status].color}">{{statusList[scope.row.status].text}}</b>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="creator"
                        label="创建人"
                        min-width="80"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="data"
                        label="创建时间"
                        sortable
                        width="160">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="220">
                        <template slot-scope="scope">
                            <el-button
                                @click.native.prevent="handleLookInfo(scope.row)"
                                type="text"
                                size="small"
                                class="primary-btn">
                                信息
                            </el-button>
                            <el-button
                                @click.native.prevent="handleEdit(scope.row)"
                                type="text"
                                size="small"
                                class="primary-btn">
                                编辑
                            </el-button>
                            <el-button
                                @click.native.prevent="handleUp(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                class="primary-btn"
                                v-if="scope.row.status==='0'">
                                上架
                            </el-button>
                            <el-button
                                @click.native.prevent="handleUp(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                class="red-btn"
                                v-else-if="scope.row.status==='1'">
                                下架
                            </el-button>
                            <el-button
                                @click.native.prevent="handleDelete(scope.row, scope.$index)"
                                type="text"
                                size="small"
                                class="red-btn">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNumber"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../../components/Header.vue";
import NavMenu from "../../../components/NavMenu.vue"
import Breadcrumb from '../../../components/Breadcrumb.vue';
import { cutMoneyFiter } from '@/utils/defined';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb },
  props: {},
  filters:{
    cutMoneyFiter
  },
  data() {
    //这里存放数据
    return {
        activeMenuIndex: "live_course",
        breadcrumbList:[
            {
                icon:'file-list-line',
                url:'',
                text:''
            },
            {
                icon:'',
                url:'',
                notLink: true,
                text:'内容管理'
            },
            {
                icon:'',
                url:'',
                notLink: true,
                text:'课程管理'
            },
            {
                icon:'',
                url:'',
                text:'直播课'
            }
        ],
        searchInput:'',
        searchStatus: '',
        searchStudy: '',
        searchStatusList:[
            {
                value:'',
                label:'全部'
            }
        ],
        studyList:[
            {
                value:'',
                label:'全部'
            },
            {
                value:'0',
                label:'初一'
            },
            {
                value:'1',
                label:'初二'
            },
            {
                value:'2',
                label:'初三'
            },
            {
                value:'3',
                label:'高一'
            }
        ],
        statusList:{
            '1':{
                text:'已上架',
                bg:'#165DFF',
                color:''
            },
            '0':{
                text:'未上架',
                bg:'#F53F3F',
                color:''
            }
        },
        tableData:[
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'1',
                type:'1',
                price:'12',
                oldPrice:'16',
                status:'0',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'0',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                id:'1',
                title:'高考特辑',
                teacher:['张老师','李老师'],
                study:'2',
                type:'0',
                price:'12',
                oldPrice:'16',
                status:'1',
                creator:'张三',
                data:'2018-02-03'
            },
            {
                userName:'赵萸艳',
                realName:'赵萸艳',
                sex:'1',
                type:'4', // 0 管理员 1 平台管理员 2 内容管理员 3 财务管理员 4 兑换码管理员
                email:'a.ghwrgoh@hlfh.nu',
                phone:'13273549500',
                status:'0',
                data:'2018-02-03',
            },
        ],
        pageSize: window.localStorage.getItem('pageSize')?Number(window.localStorage.getItem('pageSize')):10, 
        pageNumber: window.localStorage.getItem('pageNumber')?Number(window.localStorage.getItem('pageNumber')):1,
        tableHeight: "" // 表格高度
    }
  },
  //计算属性 类似于data概念
  computed: {
    
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 查询列表
    getList(){
    },
    // 处理老师
    formatterTracher(row){
        let teacher = ''
        if(row.teacher){
           teacher = row.teacher.join() 
        }
        return teacher
    },
    // 处理学段
    formatterStudy(row){
        let studyCn = ''
        let list = this.studyList
        if(row.study){
            for(let i=0;i<list.length;i++){
                if(row.study===list[i].value){
                    studyCn = list[i].label
                }
            }
        }else{
            studyCn = '未知'
        }
        return studyCn
    },
    // 创建机构或者编辑信息
    handleEdit(row){
        // 根据登录用户判断当前用户是不是超管 在table里加上disabled

        // 点击时记录页码和每页条数
        window.localStorage.setItem('pageSize',this.pageSize)
        window.localStorage.setItem('pageNumber',this.pageNumber)
        this.$router.push({
            path: "/createLive",
            query: {
                id: row?row.id:''
            },
        });
    },
    // 信息
    handleLookInfo(row){
        window.localStorage.setItem('pageSize',this.pageSize)
        window.localStorage.setItem('pageNumber',this.pageNumber)
        this.$router.push({
            path: "/peopleList",
            query: {
                id: row?row.id:''
            },
        });
    },
    // 停用 启用
    handleUp(row, index) {
      let Mname = "book-book_manager-SetPublishStatusForBook";
      let updataData = JSON.parse(JSON.stringify(row));
      let data = {
        book_id: row.id
      };
      if (row.publish_status == 0) {
        // 下架状态
        data.publish_status = 1;
        updataData.publish_status = 1;
      } else if (row.publish_status == 1) {
        data.publish_status = 0;
        updataData.publish_status = 0;
      }
    //   getContent(Mname, data).then(res => {
    //     this.$message.success("操作成功");
    //     this.$set(this.tableData, index, updataData);
    //   });
    },
    // 删除
    handleDelete(row){
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleSizeChange(val) {
        this.pageSize = val
    },
    handleCurrentChange(val) {
        this.pageNumber = val
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 370; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.teacher-list{
    margin: 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.currectPrice{
    color: #D85555;
    font-weight: 500;
    margin-right: 4px;
}
.oldPrice{
    color: #A7A7A7;
    font-weight: 500;
}
</style>