qimall/addons/Course/backend/views/course/chapter-list.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>
<style>
    .table-body {
        padding: 5px 20px;
        background-color: #fff;
        /* flex: 1; */
        width: calc(100% - 320px);
    }

    .chapter-list {
        /* background: #FFFFFF; */
        border-right: 1px solid #f2f2f2;
        padding: 0 10px;
        margin: 5px 0;
    }

    .info_body {
        display: flex;
        background: #FFFFFF;
        border-top: 1px solid #f5f5f5;
        padding-top: 10px;
        box-sizing: border-box;
    }

    .body-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        /* margin: 0 0 20px; */
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    /* .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    } */
    .com-btn {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }



    .form-body {
        background-color: #fff;
        margin-bottom: 20px;
    }

    .el-tabs__header {
        background-color: #fff;
    }

    .el-tabs__item {
        width: 100px;
        text-align: center;
    }

    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .info-top {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 10px 15px;
        width: 100%;
    }

    .info-top-lf {
        display: flex;
    }

    .lf-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 10px;
    }

    .column-title {
        font-size: 18px;
        font-weight: 700;
        padding-bottom: 5px;
    }

    .column-dec {
        color: #666;
        font-size: 14px;
        width: 100%;
    }

    .choose-box {
        padding-top: 20px;
        padding-bottom: 5px;
    }

    .tree_flex {
        display: flex;
        width: 100%;
        align-items: center;
    }

    .el-tree-node {
        margin-bottom: 5px;
    }

    .tree_top_text {
        flex: 1;
    }

    .noClick {
        color: #999999;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>章节列表</span>
                <div style="float: right">
<!--                    <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="toLook(false,0)">创建章节</el-button>-->
                    <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="editCourse(course_info.id)">编辑课程</el-button>
                </div>
            </div>
        </div>
        <div class="info-top">
            <div class="info-top-lf">
                <com-image width="160px" height="110px" mode="scaleToFill" :src="course_info.logo"></com-image>
                <div class="lf-column">
                    <div>
                        <div class="column-title">{{course_info.course_name}}</div>
                        <div class="column-dec">{{course_info.introduce}}</div>
                    </div>
                    <div class="column-amount column-dec">
                        <span style="margin-right: 20px;">￥{{course_info.price}}</span>
                        <span>已售：{{course_info.sales}}</span>
                    </div>
                </div>
            </div>
            <div class="info-top-rg" style="display: flex;position:relative;right:25px;bottom:20px;">
<!--                <el-button type="text" size="mini" @click="editCourse(course_info.id)">编辑</el-button>-->
                <el-button type="text" size="mini" class="copy_btn" @click="copyLink(course_info.id)">复制链接</el-button>
                <el-button type="text" size="mini" @click="switchCourseStatus(course_info.id, course_info.status)" v-if="course_info.status==1"> 立即下架 </el-button>
                <el-button type="text" size="mini" @click="switchCourseStatus(course_info.id, course_info.status)" v-else> 立即上架 </el-button>
            </div>
        </div>
        <div class="info_body">

            <div class="chapter-list" :loading="lableLoading">
                <el-button plain style="width: calc(100% - 10px);" @click="addDirectory">添加目录</el-button>
                <div style="padding: 20px 0 10px" @click="onAllNode">全部目录（{{chapter_all_count}}）</div>
                <el-tree :data="directory_list" node-key="id" :expand-on-click-node="false" @node-click="selectNode">
                    <span class="custom-tree-node tree_flex" slot-scope="{ node, data }">
                        <span class="tree_top_text">
                            {{node.label}}
                            <el-tooltip v-if="data.id == 0" effect="dark" content="未选择目录的章节默认进入未分类目录" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                            ({{data.chapter_number || 0}})
                        </span>
                        <span v-if="data.id != 0">
                            <el-button type="text" size="mini" @click="addChild(data,node,1)" v-if="data.children && data.id != 0">
                                添加子目录
                            </el-button>
                            <el-button type="text" size="mini" @click="moveChild(data,node,1)" :disabled="data.sort == 0">
                                上移
                            </el-button>
                            <el-button type="text" size="mini" @click="moveChild(data,node,2)" :disabled="data.end == 1">
                                下移
                            </el-button>
                            <el-button type="text" size="mini" @click="addChild(data,node,2)">
                                编辑
                            </el-button>
                            <el-button type="text" size="mini" @click="() => removeChild(data,node)">
                                删除
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
            <div class="table-body">
                <div class="body-top">
                    <el-button type="primary" @click="toLook(false,0)">创建章节</el-button>
                    <div class="input-item" style="margin-right: 120px;">
                        <el-input @keyup.enter.native="search" size="small" placeholder="请输入章节名称" v-model="keyword" clearable @clear="search">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </div>
                </div>

                <div class="choose-box">
                    <!-- <el-checkbox v-model="checked" style="margin-right: 20px;" @change="changes">全选</el-checkbox> -->
                    <el-button plain @click="moveToDirectory(course_info.id)">移动</el-button>
                    <el-button plain @click="multipleChapterDelete(course_info.id)">删除</el-button>
                </div>

                <el-table v-loading="listLoading" ref="multipleTable" :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" @cell-click="tabClick">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="章节名称" prop="name" min-width="180">
                        <template slot-scope="scope">
                            <div size="small">{{scope.row.name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属目录" prop="course_name" min-width="180">

                        <template slot-scope="scope">
                            <div size="small">{{scope.row.directory_name}}</div>
                            <!-- <el-tag size="small" type="info" v-if="scope.row.course_id == 0"></el-tag>
                            <el-tag size="small" v-else>{{scope.row.course_name}}</el-tag> -->
                        </template>

                    </el-table-column>
                    <el-table-column label="是否关联商品" min-width="180" align="center">

                        <template slot-scope="scope">
                            <div>{{scope.row.goods_list ? '是' : '否'}}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="关联商品" min-width="180" align="center">
					
					    <template slot-scope="scope">
					        <div flex="box:first" v-if="scope.row.goods_info.length">
					            <div style="padding-right: 10px;">
					                <com-image mode="aspectFill" :src="scope.row.goods_info[0].cover_pic"></com-image>
					            </div>
					            <div flex="cross:top cross:top">
					                {{scope.row.goods_info[0].name}}<br />&yen;{{scope.row.goods_info[0].price}}
					            </div>
					
					        </div>
					    </template>
					</el-table-column> -->
                    <el-table-column label="播放次数" prop="views" min-width="90" align="center">
                        <template slot-scope="scope">
                            <div size="small">{{scope.row.views}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="sort" min-width="80" align="center">
                        <template slot-scope="scope">
                            <!-- <div size="small">{{scope.row.sort}}</div> -->
                            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '排序'">
                                <el-input v-model="scope.row.sort" maxlength="300" placeholder="请输入排序" size="mini" @change="sortValueChange(scope.row)" />
                            </span>
                            <span v-else>{{ scope.row.sort }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否试看" width="120" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.can_see == 0" type="danger">禁止试看</el-tag>
                            <el-tooltip v-if="scope.row.can_see == 1" :content="scope.row.can_see_time == 0 ? '全程可试看' : '试看时长：' + scope.row.can_see_time + '秒'" placement="top" effect="light">
                                <el-tag type="success">允许试看</el-tag>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="thumb_url,video_url" label="视频" width="120" align="center">
                       <template slot-scope="scope">
                            <div flex="box:first">
                                <div style="padding-right: 10px; ">
                                    <el-tooltip placement="top" effect="light">
                                        <div class="index-video-url" slot="content">
                                            <video :src="scope.row.video_url" controls="controls" style="width: 300px;height: 300px;">
                                            </video>
                                        </div>
                                        <com-image mode="aspectFill" :src="scope.row.thumb_url"></com-image>
                                    </el-tooltip>
                                </div>
                            </div>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作" min-width="200" align="center">
                        <template slot-scope="scope">
                            <el-button circle size="mini" type="text" @click="toLook(scope.row,scope.row.id)">
                                编辑
                            </el-button>

                            <el-button circle size="mini" type="text" @click="chapterDelete(scope.row, scope.$index)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="text-align: right;margin: 20px 0;">
                    <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                </div>
            </div>
        </div>
    </el-card>

    <!-- 移动弹框 -->
    <el-dialog title="选择目录" :visible.sync="shiftVisible">
        <div class="shift_body">
            <div style="margin-bottom: 5px;">请选择你想要移动到的目录</div>
            <div style="display: flex;line-height: 50px;background: #F2F2F2;padding: 0 20px;">
                <div style="flex:1;">目录名称</div>
                <div>章节数量</div>
            </div>
            <el-tree :data="directory_list" node-key="id" :expand-on-click-node="false" @node-click="handleNodeClick">
                <span class="custom-tree-node tree_flex" slot-scope="{ node, data }" style="font-size: 16px;">
                    <div class="tree_top_text">{{node.label}}</div>
                    <div style="margin-right: 40px;">
                        {{data.chapter_number || 0}}
                    </div>
                </span>
            </el-tree>
            <div style="text-align: end;margin-top: 10px;">
                <el-button type="primary" @click="subShifVisible">确定</el-button>
            </div>
        </div>
    </el-dialog>

    <!-- 这个是创建章节弹窗 -->
    <el-dialog :title="dialogText" :visible.sync="dialogFormVisible" center width="40%">
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" size="small">
            <el-form-item label="关联课程" prop="course_id">
                <div>{{course_info.course_name}}</div>
                <!-- <el-select class="select" size="small" v-model="ruleForm.course_id" @change="courseDirList(ruleForm.course_id)" filterable placeholder="请选择课程"> -->
                <!-- <el-option key="all" label="请选择课程" value=""></el-option> -->
                <!-- <el-option :key="item.id" :label="item.name" :value="item.id" v-for="(item, index) in courseList"></el-option> -->
                <!-- </el-select> -->
            </el-form-item>
            <el-form-item label="所属目录" prop="dir_id">
                <el-select class="select" size="small" v-model="ruleForm.dir_id" filterable placeholder="请选择目录">
                    <el-option key="0" label="未分类" :value="0"></el-option>
                    <el-option :key="item.id" :label="item.name" :value="item.id" v-for="(item, index) in course_dir_list"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input type="number" :min="1" v-model="ruleForm.sort" placeholder="请输入章节排序" style="width: 50%">
                    <!-- <template slot="append">元</template> -->
                </el-input>
            </el-form-item>

            <el-form-item label="章节名称" prop="name">
                <el-input type="text" v-model="ruleForm.name" placeholder="请输入章节名称" style="width: 50%">
                </el-input>
            </el-form-item>

            <el-form-item label="视频类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio :label="1">视频 </el-radio>
                    <el-radio :label="2">音频 </el-radio>
                </el-radio-group>
            </el-form-item>

            <template v-if="ruleForm.type==1">
                <el-form-item label="视频上传方式">
                    <el-radio-group v-model="ruleForm.select_type">
                        <el-radio :label="1">选择文件</el-radio>
                        <el-radio :label="2">输入链接</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 直接输入链接 -->
                <el-form-item label="视频" prop="video_url" v-if="ruleForm.select_type==2">
                    <label slot="label">视频
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <el-input type="text" v-model="ruleForm.video_url" placeholder="请输入完整的视频链接" style="width: 80%"></el-input>
                    <video v-if='ruleForm.video_url' :src="ruleForm.video_url" controls="controls" width="200px">
                </el-form-item>
                <!-- 选择上传文件 -->
                <el-form-item label="视频" prop="video_url" v-if="ruleForm.select_type==1">
                    <label slot="label">视频
                        <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment :type="'videos'" :multiple="false" :max="1" v-model="ruleForm.video_url" @selected="handleSelected">
                        <el-button size="mini">选择文件</el-button>
                        <span style="margin-left: 15px;">{{selectedVideo}}</span>
                    </com-attachment>
                    <video v-if='ruleForm.video_url' :src="ruleForm.video_url" controls="controls" width="200px">
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="音频上传方式">
                    <el-radio-group v-model="ruleForm.select_type">
                        <el-radio :label="1">选择文件</el-radio>
                        <el-radio :label="2">输入链接</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 直接输入链接 -->
                <el-form-item label="音频" prop="video_url" v-if="ruleForm.select_type==2">
                    <label slot="label">音频
                        <el-tooltip class="item" effect="dark" content="支持格式mp3;音频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <el-input type="text" v-model="ruleForm.video_url" placeholder="请输入完整的音频链接" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 选择上传文件 -->
                <el-form-item label="音频" prop="video_url" v-if="ruleForm.select_type==1">
                    <label slot="label">音频
                        <el-tooltip class="item" effect="dark" content="支持格式mp3;音频大小不能超过50 MB,文件过大建议使用外链，请点击 输入链接" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment :type="'voices'" :multiple="false" :max="1" v-model="ruleForm.video_url" @selected="handleSelected">
                        <el-button size="mini">选择文件</el-button>
                        <span style="margin-left: 15px;">{{selectedVideo}}</span>
                    </com-attachment>
                </el-form-item>
            </template>

            <el-form-item label="关联商品" prop="goods_list">
                <div style="display: inline-block;">
                    <div flex="cross:center">
                        <div style="margin-left: 10px;">
                            <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                                <el-button type="text">选择商品</el-button>
                            </com-dialog-select>
                        </div>
                    </div>
                </div>
            </el-form-item>

            <el-form-item prop="goods">
                <template>
                    <div style="color: #ff4544;">最多可添加5个商品</div>
                    <div style="max-height: 300px;overflow-y: auto">
                        <el-table :data="ruleForm.goods" :show-header="false" border>
                            <el-table-column label="">
                                <template slot-scope="scope">
                                    <div flex>
                                        <div style="padding-right: 10px;flex-grow: 0">
                                            <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                        </div>
                                        <div style="flex-grow: 1;">
                                            <com-ellipsis :line="2">{{scope.row.name}}
                                            </com-ellipsis>
                                        </div>
                                        <div style="flex-grow: 0;">
                                            <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                    <img src="/resources/img/common/del.png" alt="">
                                                </el-tooltip>
                                            </el-button>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-form-item>

            <el-form-item label="是否试看" prop="can_see">
                <el-switch v-model="ruleForm.can_see" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item v-if="ruleForm.can_see == 1" label="试看时长" prop="can_see_time">
                <el-input placeholder="请输入试看时长" v-model="ruleForm.can_see_time" style="width: 200px;" onInput="value=toNumber(value,0)">
                    <template slot="append">秒</template>
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="editSave('ruleForm')" :loading="editBtnLoading">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/resources/unpkg/clipboard@1.0.0/dist/clipboard.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                tabClickIndex: null, // 点击的单元格
                tabClickLabel: '', // 当前点击的列名
                before_edit_sort: 0, // 点击编辑之前的排序序号
                before_edit_index: 0, // 点击编辑的那一行的索引
                chapter_all_count: 0, // 当前课程下所有章节数据量
                can_see: 0,
                list: [],
                multipleSelection: [], // 表格选中的数组
                checked: false,
                courseList: [],
                dir_list: [],
                keyword: '',
                listLoading: false,
                editBtnLoading: false,
                page: 1,
                pageCount: 0,

                dialogVisible: false, //充值弹窗
                lableLoading: false,
                dialogFormVisible: false,
                btnLoading: false,
                addStatus: 1, //默认是增加
                selectIndex: 0, //充值item的索引
                selectRow: {},
                dialogLoading2: false,
                dialogText: '',
                edit: {
                    show: false,
                },
                course_info: {},

                ruleForm: {
                    goods_list: [],
                    goods: [],
                    sort: 1,
                    name: '',
                    video_url: '',
                    select_type:1,
                    type: 1,
                    can_see: 0,
                    course_id: "",
                    id: 0,
                    thumb_url: '',
                    can_see_time: 0,
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入章节名称',
                        trigger: 'change'
                    }, ],
                    sort: [{
                        required: true,
                        message: '请输入章节排序',
                        trigger: 'change'
                    }, ],
                    course_id: [{
                        required: true,
                        message: "请选择课程章节",
                        trigger: 'change'
                    }, ]
                },
                directory_list: [{
                    id: 1,
                    label: '一级 1',
                    parent_id: 0,
                    course_id: 1,
                    chapter_number: 0,
                    children: [{
                        id: 5,
                        label: '二级 1-1',
                        parent_id: 1,
                        course_id: 1,
                        chapter_number: 0
                    }, {
                        id: 6,
                        label: '二级 1-2',
                        parent_id: 1,
                        course_id: 1,
                        chapter_number: 0
                    }, {
                        id: 7,
                        label: '二级 1-3',
                        parent_id: 1,
                        course_id: 1,
                        chapter_number: 0
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    parent_id: 0,
                    course_id: 2,
                    chapter_number: 0,
                    children: [{
                        id: 21,
                        label: '二级 2-1',
                        parent_id: 2,
                        course_id: 2,
                        chapter_number: 0
                    }, {
                        id: 22,
                        label: '二级 2-2',
                        parent_id: 2,
                        course_id: 2,
                        chapter_number: 0
                    }, {
                        id: 23,
                        label: '二级 2-3',
                        parent_id: 2,
                        course_id: 2,
                        chapter_number: 0
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    parent_id: 0,
                    course_id: 3,
                    chapter_number: 0,
                    children: [{
                        id: 31,
                        label: '二级 3-1',
                        parent_id: 3,
                        course_id: 3,
                        chapter_number: 0
                    }, {
                        id: 32,
                        label: '二级 3-2',
                        parent_id: 3,
                        course_id: 3,
                        chapter_number: 0
                    }, {
                        id: 33,
                        label: '二级 3-3',
                        parent_id: 3,
                        course_id: 3,
                        chapter_number: 0
                    }]
                }],
                shiftVisible: false, //移动弹框
                checkDirectoryId: -1, //获取选中目录的id
                course_dir_list: [],
                selectedVideo: '', // 已选择的视频文件
                select_type: 1, // 是否直接输入视频链接
                dir_id: 0,
                parent_id: 0
            };
        },
        methods: {
            // 选择课程联动获取课程目录
            courseDirList(course_id) {
                var self = this;
                self.listLoading = true;
                self.course_dir_list = [];
                // self.ruleForm.dir_id = 0;
                // console.log('getDirList course_id: ', course_id);
                request({
                    params: {
                        r: 'course/directory/list',
                        course_id: course_id,
                        list_type: 1
                    },
                    method: 'get',
                }).then(e => {
                    // console.log('dir list:', ...e.data.data.tree);return null;
                    self.listLoading = false;
                    if (0 == e.data.code) {
                        self.course_dir_list.push(...e.data.data);
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    this.$message({
                        message: '网络错误',
                        type: 'error'
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            /* 单元格点击编辑 start */
            tableRowClassName({
                row,
                rowIndex
            }) {
                // 把每一行的索引放进row
                row.index = rowIndex
            },
            // 添加明细原因 row 当前行 column 当前列
            tabClick(row, column, cell, event) {
                switch (column.label) {
                    case '排序':
                        this.tabClickIndex = row.index;
                        this.tabClickLabel = column.label;
                        this.before_edit_sort = row.sort;
                        this.before_edit_index = row.index;
                        break;
                    default:
                        return
                }
                console.log('点击排序编辑', this.tabClickIndex, row, column, cell, event)
            },
            // 失去焦点初始化
            sortValueChange(data) {
                // this.listLoading = true;
                this.tabClickIndex = null;
                this.tabClickLabel = '';
                var self = this;
                // console.log(self.before_edit_index);
                // console.log(self.before_edit_sort);
                request({
                    params: {
                        r: 'course/chapter/edit-sort'
                    },
                    data: {
                        id: data.id,
                        'sort': data.sort
                    },
                    method: 'post'
                }).then(e => {
                    self.listLoading = false;
                    if (0 != e.data.code) {
                        self.list[self.before_edit_index].sort = self.before_edit_sort;
                        self.$message.error(e.data.msg)
                    } else {
                        self.$message.success(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error('网络错误');
                });
            },
            /* 单元格点击编辑 end */
            // 选取节点
            selectNode(data, node, el) {
                // console.log(data, node, el);
                var self = this;
                self.listLoading = true;
                this.dir_id = data.id
                this.parent_id = data.parent_id
                request({
                    params: {
                        r: 'course/default/chapters',
                        course_id: data.course_id,
                        dir_id: data.id,
                        parent_id: data.parent_id
                    },
                    method: 'get'
                }).then(e => {
                    // console.log(e);
                    self.listLoading = false;
                    self.list = e.data.data.list;
                    self.pageCount = e.data.data.page_count;
                }).catch(e => {
                    console.log(e);
                });
            },
            // 下架课程
            switchCourseStatus(course_id, status) {
                var self = this;
                if (0 == status) {
                    status = 1;
                } else if (1 == status) {
                    status = 0;
                }
                request({
                    params: {
                        r: 'course/course/switch-status'
                    },
                    method: 'post',
                    data: {
                        id: course_id,
                        status: status
                    }
                }).then(e => {
                    if (0 == e.data.code) {
                        self.$message.success(e.data.msg);
                        self.course_info.status = status;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            //复制链接
            copyLink(course_id) {
                // console.log(course_id);
                //复制链接
                // console.log("host:", window.location)
                var url = localStorage.getItem('h5_domain');
                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return url + 'plugins/course/details?courseId=' + course_id + '&sign=' + localStorage.getItem('mall_sign');
                    }
                });

                var self = this;
                clipboard.on('success', function(e) {
                    console.log("success")
                    self.$message.success('复制成功');
                    e.clearSelection();
                    clipboard.destroy()
                });
                clipboard.on('error', function(e) {
                    console.log("error")
                    self.$message.error('复制失败，请手动复制');
                });

            },
            // 课程联动获取目录列表
            getDirList(course_id) {
                var self = this;
                self.listLoading = true;
                // console.log('getDirList course_id: ', course_id);
                request({
                    params: {
                        r: 'course/directory/list',
                        course_id: course_id,
                        list_type: 2
                    },
                    method: 'get',
                }).then(e => {
                    // console.log('dir list:', ...e.data.data.tree);return null;
                    self.listLoading = false;
                    if (0 == e.data.code) {
                        self.directory_list = [];
                        self.directory_list.push(...e.data.data.tree);
                        // 给每个目录赋值一个下标位置
                        let uncategorized = self.directory_list.filter(v => v.id == 0).length;
                        let maxLength = self.directory_list.length;
                        if (uncategorized > 0) {
                            maxLength = self.directory_list.length - 1;
                        }
                        self.directory_list.forEach((v, i) => {
                            if (v.id != 0) {
                                self.$set(v, "sort", i);
                                if (!v.children) {
                                    self.$set(v, "children", []);
                                }
                                if (maxLength == i + 1) {
                                    self.$set(v, "end", 1); //是否在最底部
                                } else {
                                    self.$set(v, "end", 0);
                                }
                                if (v.children) {
                                    v.children.forEach((vv, j) => {
                                        self.$set(vv, "sort", j);
                                        if (v.children.length == j + 1) {
                                            self.$set(vv, "end", 1);
                                        } else {
                                            self.$set(vv, "end", 0);
                                        }
                                    })
                                }
                            }
                        })
                        // console.info(self.directory_list);
                        self.chapter_all_count = e.data.data.all_count;
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    this.$message({
                        message: '网络错误',
                        type: 'error'
                    });
                });
            },
            handleSelected(res) {
                // console.log('视频信息：', res);
                // console.log("视频首图地址：", res[0].thumb_url)
                if (res.length) {
                    this.ruleForm.thumb_url = res[0].thumb_url;
                    this.selectedVideo = '已选择： ' + res[0].name;
                } else {
                    this.ruleForm.thumb_url = '';
                    this.selectedVideo = '';
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },

            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },

            // 0.1 获取章节列表
            getList() {
                let self = this;
                self.listLoading = true;
                var course_id = getQuery('id');

                var params = {
                    r: 'course/default/chapters',
                    page: self.page,
                    keyword: this.keyword
                }

                if (course_id) {
                    params.course_id = course_id;
                }

                if (this.dir_id) {
                    params.dir_id = this.dir_id;
                }

                if (this.parent_id) {
                    params.parent_id = this.parent_id;
                }

                // console.log("params  :", params)
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    // console.log(e);
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        self.list = e.data.data.list;
                        self.course_info = e.data.data.course_info;
                        self.pageCount = e.data.data.page_count;
                    } else {
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            //删除单个章节
            chapterDelete(row, index) {
                let self = this;
                self.$confirm('删除该章节, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'course/chapter/delete',
                        },
                        method: 'post',
                        data: {
                            chapter_id: row.id,
                            course_id: row.course_id
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.list.splice(index, 1);
                            self.getDirList(getQuery('id'));
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            // 批量删除章节
            multipleChapterDelete(course_id) {
                // console.log('multipleChapterDelete: ', this.multipleSelection);
                var chapter_ids = [];
                for (i in this.multipleSelection) {
                    chapter_ids.push(this.multipleSelection[i].id);
                }
                var course_id = this.course_info.id;
                // console.log('multipleChapterDelete ids:', chapter_ids);
                request({
                    params: {
                        r: 'course/chapter/delete',
                    },
                    method: 'post',
                    data: {
                        chapter_id: chapter_ids,
                        course_id: course_id
                    }
                }).then(e => {
                    var self = this;
                    // self.listLoading = true;
                    if (0 == e.data.code) {
                        this.$message.success(e.data.msg);
                        setTimeout(() => {
                            self.getList();
                            self.getDirList(getQuery('id'));
                        }, 1000);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            switchStatus(id, can_see) {
                let obj = {
                    id: id,
                    can_see: can_see,
                }
                this.dialogLoading2 = true;
                //console.log("请求前得参数="+JSON.stringify(obj))
                request({
                    method: 'post',
                    params: {
                        r: 'course/chapter/switch-status',
                    },
                    data: obj
                }).then(e => {
                    this.dialogVisible = false;
                    this.dialogLoading2 = false;
                    //console.log("请求结果="+JSON.stringify(e))
                    //this.getList();
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },

            // 查看不可编辑
            toLook(row, index) {
                // console.log(row, index);

                this.selectIndex = index;
                this.selectRow = row;

                this.dialogFormVisible = true;
                for (key in row) {
                    for (key1 in this.ruleForm) {
                        if (key1 == key) {
                            this.ruleForm[key1] = row[key]
                        }
                    }
                }

                if (index == 0) {
                    console.log("add");
                    let self = this;
                    self.listLoading = true;
                    self.ruleForm = {
                        goods_list: [],
                        goods: [],
                        sort: 1,
                        name: '',
                        video_url: '',
                        type: 1,
                        can_see: 0,
                        course_id: "",
                        id: 0,
                    };
                    self.ruleForm.goods_list = []
                    self.ruleForm.goods = []

                    self.dialogText = '创建章节';
                    request({
                        params: {
                            r: 'course/chapter/storage',
                            page: self.page,
                            keyword: this.keyword
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        self.courseList = e.data.data.courseList;
                        self.courseDirList(self.course_info.id);
                        self.ruleForm.course_id = self.course_info.id;
                    }).catch(e => {
                        console.log(e);
                    });

                } else {
                    // console.log("edit");
                    let self = this;
                    self.listLoading = true;
                    self.dialogText = '编辑章节';
                    self.ruleForm = row;
                    // console.log("goods_list:", self.ruleForm.goods_list)
                    // console.log("goods:", self.ruleForm.goods)
                    self.ruleForm.goods_list = []
                    self.ruleForm.goods = []


                    request({
                        params: {
                            r: 'course/chapter/storage',
                            id: row.id,
                            course_id: row.course_id
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        self.courseList = e.data.data.courseList;
                        self.ruleForm.goods = e.data.data.goods;
                        // console.log("goods:", self.ruleForm.goods, " type:", typeof self.ruleForm.goods)
                        self.ruleForm.goods_list = e.data.data.goods_list;
                        // console.log("goods_list:", self.ruleForm.goods_list, "type:", typeof self.ruleForm.goods_list)
                        // console.log(self.ruleForm, '11');
                        self.dir_list = e.data.data.directory_list;
                    }).catch(e => {
                        console.log(e);
                    });
                }

                return false;
            },

            deleteGoods(index) {
                this.ruleForm.goods.splice(index, 1);
                // console.log("goods_list:", this.ruleForm.goods_list, " typeof :", typeof this.ruleForm.goods_list)
                this.ruleForm.goods_list.splice(index, 1);
                // console.log("deleteGoods:", this.ruleForm.goods_list)
            },
            goodsSelect(list) {
                // console.log("goodsSelect:", list)
                for (let j in list) {
                    let item = list[j];
                    if (this.ruleForm.goods_list.length >= 5) {
                        this.$message.error('指定商品不能大于5个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_list) {
                        if (this.ruleForm.goods_list[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_list.push(item.id);
                        // console.log("goods:", this.ruleForm.goods, " typeof:", typeof this.ruleForm.goods)
                        this.ruleForm.goods.push({
                            id: item.id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }

            },
            editSave() {
                if (this.ruleForm.video_url == '' && this.ruleForm.audio_url == '') {
                    this.$message.error('请上传视频文件或音频文件');
                    return;
                }
                if (this.ruleForm.can_see === 1 && (this.ruleForm.can_see_time <= 0 || isEmpty(this.ruleForm.can_see_time))) {
                    this.$message.error('请设置试看时长');
                    return;
                }
                if (!this.ruleForm.dir_id) {
                    this.ruleForm.dir_id = 0;
                }
                this.editBtnLoading = true;

                var params = {};
                var id = this.ruleForm.id;
                if (id == 0) {
                    params = {
                        r: 'course/chapter/storage',
                    };
                } else {
                    params = {
                        r: 'course/chapter/storage',
                        id: id,
                    };
                }
                var self = this;
                self.editBtnLoading = true;
                request({
                    params: params,
                    method: 'post',
                    data: this.ruleForm
                }).then(response => {
                    self.editBtnLoading = false;
                    self.selectedVideo = '';
                    if (response.data.code == 0) {
                        self.$message.success(response.data.msg);
                        self.dialogFormVisible = false;

                        self.ruleForm = {
                            goods_list: [],
                            goods: [],
                            sort: 1,
                            name: '',
                            video_url: '',
                            audio_url: '',
                            can_see: 0,
                            course_id: 0,
                            id: 0,
                        }
                        self.goods = null;
                        self.level_list = [];
                        self.editCancel();
                        self.$emit('success', true);
                        self.getList();
                        self.getDirList(getQuery('id'));
                    } else {
                        self.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    self.editbtnLoading = false;
                });
            },
            editCancel() {
                this.$emit('input', false);
            },
            // 添加一级目录
            addDirectory() {
                let title = "新增目录";
                let label = "目录名称";
                let value = '';
                this.$prompt(label, title, {
                    inputValue: value,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: data => {
                        return data != null && (data + "").trim().length > 0;
                    },
                    inputErrorMessage: '名称不能为空'
                }).then(({
                    value
                }) => {
                    var self = this;
                    self.editBtnLoading = true;
                    request({
                        params: {
                            r: 'course/directory/add-dir'
                        },
                        method: 'post',
                        data: {
                            course_id: getQuery('id'),
                            name: value,
                            dir_type: 1,
                        }
                    }).then(response => {
                        self.editBtnLoading = false;
                        if (response.data.code == 0) {
                            self.$message.success(response.data.msg);
                            self.getDirList(getQuery('id'));
                        } else {
                            self.$message.error(response.data.msg);
                        }
                    }).catch(response => {
                        this.edit.btnLoading = false;
                        self.$message.error('网络错误');
                    });
                }).catch(() => {
                    /* this.$message({
                        type: 'info',
                        message: '取消输入'
                    });  */
                });
            },
            // 添加子目录
            addChild(data, node, type) {
                // console.log('add child type:', type);return null;
                // console.info(data, node);return null;
                let title = "新增子目录";
                let label = "子目录名称";
                let value = '';
                if (type == 2) {
                    // 编辑
                    title = "子目录重命名";
                    value = data.label;

                }
                let id = 100;
                this.$prompt(label, title, {
                    inputValue: value,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: data => {
                        return data != null && (data + "").trim().length > 0;
                    },
                    inputErrorMessage: '名称不能为空'
                }).then(({
                    value
                }) => {
                    var self = this;
                    self.editBtnLoading = true;
                    var params = {};
                    var data_submit = {};
                    if (1 == type) {
                        // 添加子级目录
                        params = {
                            r: 'course/directory/add-dir'
                        };
                        data_submit = {
                            parent_id: data.id,
                            course_id: data.course_id,
                            name: value,
                            dir_type: 2,
                        };
                    } else if (2 == type) {
                        // 重命名子级目录
                        params = {
                            r: 'course/directory/rename'
                        };
                        data_submit = {
                            id: data.id,
                            name: value,
                            course_id: data.course_id,
                        };
                    }
                    // console.log('add child params+data: ', params, data_submit);return null;
                    request({
                        params: params,
                        method: 'post',
                        data: data_submit
                    }).then(response => {
                        self.editBtnLoading = false;
                        if (response.data.code == 0) {
                            self.$message.success(response.data.msg);
                            self.getDirList(data.course_id);
                        } else {
                            self.$message.error(response.data.msg);
                        }
                    }).catch(response => {
                        self.edit.btnLoading = false;
                        self.$message.error('网络错误');
                    });
                    // if (type == 2) {
                    //     const parent = node.parent;
                    //     const children = parent.data.children || parent.data;
                    //     const index = children.findIndex(d => d.id === data.id);
                    //     let newChild = children[index];
                    //     newChild.label = value;
                    //     children.splice(index, 1, newChild);
                    // } else {
                    //     const newChild = {
                    //         id: id++,
                    //         label: value,
                    //         children: []
                    //     };
                    //     if (!data.children) {
                    //         this.$set(data, 'children', []);
                    //     }
                    //     data.children.push(newChild);
                    // }
                    // console.log(newChild);
                    // return null;
                }).catch(() => {
                    /* this.$message({
                        type: 'info',
                        message: '取消输入'
                    });  */
                });

            },
            // 删除目录
            removeChild(data, node) {
                var self = this;
                self.editBtnLoading = true;

                this.$confirm('是否永久删除 "' + data.label + '" 目录？', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'course/directory/delete'
                        },
                        method: 'post',
                        data: {
                            id: data.id
                        }
                    }).then(response => {
                        self.editBtnLoading = false;
                        if (response.data.code == 0) {
                            // self.$message.success(response.data.msg);
                            const parent = node.parent;
                            const children = parent.data.children || parent.data;
                            const index = children.findIndex(d => d.id === data.id);
                            children.splice(index, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            self.$message.error(response.data.msg);
                        }
                    }).catch(response => {
                        this.edit.btnLoading = false;
                        self.$message.error('网络错误');
                    });
                }).catch(() => {
                    console.log('已取消删除');
                });
            },
            /* 
             * 移动目录,改变排序
             * type: 1(上移) 2（下移）
             */
            moveChild(data, node, type) {
                // console.log('moveChild: ');
                // console.info(data, node, type, node.id);
                // console.info(this.directory_list);
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                let info = children[index];
                let uncategorized = this.directory_list.filter(v => v.id == 0).length;
                directoryListLength = this.directory_list.length - 1;
                if (uncategorized) {
                    directoryListLength = this.directory_list.length - 2;
                }
                if (data.children) {
                    // 一级目录
                    let info = children[index];
                    let byIndex = -1;
                    if (type == 2) {
                        byIndex = index + 1;
                    } else {
                        byIndex = index - 1;
                    }
                    // debugger;
                    if (type == 2 && index + 1 == directoryListLength) {
                        // 跟最后一个位置替换
                        children[index].end = 1;
                        children[byIndex].end = 0;
                    } else if (index == directoryListLength) {
                        children[index].end = 0;
                        children[byIndex].end = 1;
                    }
                    // debugger;         
                    if (type == 2) {
                        children[index].sort += 1;
                        children[byIndex].sort -= 1;
                        children.splice(index, 1, children[byIndex]);
                        children.splice(byIndex, 1, info);
                    } else {
                        children[index].sort -= 1;
                        children[byIndex].sort += 1;
                        children.splice(index, 1, children[byIndex]);
                        children.splice(byIndex, 1, info);
                    }
                    this.directory_list = [];
                    this.directory_list.push(...children);
                } else {
                    // 二级目录换位置;
                    let directory = this.directory_list.filter(v => v.id == data.parent_id)[0]; //获取父元素
                    let copyDirectory = JSON.parse(JSON.stringify(directory)); //由于删除children对象，directory的children也会被删，所以备份一份
                    let parentIndex = this.directory_list.findIndex(d => d.id === directory.id); //获取父元素的下标   
                    let byIndex = -1;
                    if (type == 2) {
                        byIndex = index + 1;
                    } else {
                        byIndex = index - 1;
                    }
                    // debugger;
                    let childrenInfo = copyDirectory.children[byIndex];
                    if (type == 2 && index + 1 == copyDirectory.children.length - 1) {
                        childrenInfo.end = 0;
                        info.end = 1;
                    } else if (index == copyDirectory.children.length - 1) {
                        childrenInfo.end = 1;
                        info.end = 0;
                    }
                    if (type == 2) {
                        childrenInfo.sort -= 1;
                        info.sort += 1;
                        // console.info(byIndex,copyDirectory.children.length - 1); 
                        copyDirectory.children.splice(index, 1, childrenInfo);
                        copyDirectory.children.splice(byIndex, 1, info);
                    } else {
                        childrenInfo.sort += 1;
                        info.sort -= 1;
                        copyDirectory.children.splice(index, 1, childrenInfo);
                        copyDirectory.children.splice(byIndex, 1, info);
                    }
                    this.$delete(this.directory_list[parentIndex], "children");
                    this.$set(this.directory_list[parentIndex], "children", copyDirectory.children);
                }
                console.log(data.id, type);
                var self = this;
                self.lableLoading = true;
                request({
                    params: {
                        r: 'course/directory/sort-dir',
                        id: data.id,
                        type: type
                    },
                    method: 'get'
                }).then(e => {
                    self.lableLoading = false;
                    if (0 !== e.data.code) {
                        self.getDirList(data.course_id);
                    }
                }).catch(e => {
                    // console.log(e);
                    self.$message.error('网络错误');
                });
            },
            // 打开移动对话框
            moveToDirectory(course_id) {
                if (this.multipleSelection.length == 0) {
                    this.$message.error('请先选择章节');
                    return;
                }
                this.shiftVisible = true;
                this.checkDirectoryId = -1;
            },
            // 选中目录触发
            handleNodeClick(val) {
                this.checkDirectoryId = val.id;
            },
            // 移动--确定
            subShifVisible() {
                // 判断是否有选中目录
                if (this.checkDirectoryId == -1) {
                    this.$message.error('请选择目录');
                    return;
                }
                // 获取表格选中的章节
                let ids = [];
                this.multipleSelection.forEach(v => {
                    ids.push(v.id);
                });
                // console.info(ids,this.checkDirectoryId, this.course_info.id);
                var self = this;
                request({
                    params: {
                        r: 'course/directory/move-chapters'
                    },
                    method: 'post',
                    data: {
                        course_id: self.course_info.id,
                        chapter_id: ids,
                        target_dir_id: self.checkDirectoryId
                    }
                }).then(e => {
                    this.shiftVisible = false;
                    if (0 == e.data.code) {
                        self.getList();
                        self.getDirList(self.course_info.id);
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    // console.log(e);
                    self.$message.error('网络错误');
                });
            },
            // 跳转课程编辑页面
            editCourse(course_id) {
                navigateTo({
                    r: 'course/course/course-edit',
                    id: course_id,
                });
            },
            onAllNode() {
                this.dir_id = 0
                this.parent_id = 0
                this.getList()
            }
        },

        mounted: function() {
            this.getList();
            this.getDirList(getQuery('id'));
        }
    });
</script>