登记个vue的Step效果的页面，万一哪天需要了，就拿来用了。

页面代码：

<template>
    <section>
        <transition v-if="!$route.meta.NoNeedHome" name="fade"
                    mode="out-in">
            <el-row class="study-add-main">
                <el-col class="study-add-title">
                    <i class="el-icon-document"></i> 新建学习计划
                </el-col>

                <el-col>
                    <el-col style="position:fixed;top:60px;left:0px; z-index:90;line-height:initial;">
                        <div class="page-pagecontainer">
                            <el-steps :active="StepInfo.Active" simple style="height:25px;">
                                <el-step title="基本信息" icon="el-icon-edit" @click.native="scrollTo('add-basic',1)"></el-step>
                                <el-step title="学习内容" icon="el-icon-s-order" @click.native="scrollTo('add-content',2)"></el-step>
                                <el-step title="指定学员" icon="fa fa-users" @click.native="scrollTo('add-user',3)"></el-step>
                                <el-step title="概要统计" icon="fa fa-list-ul" @click.native="scrollTo('add-total',4)"></el-step>
                            </el-steps>
                        </div>
                    </el-col>
                </el-col>
                <el-col>
                    <el-collapse v-model="StepInfo.ActiveItemName">
                        <el-collapse-item id="add-basic" name="1" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-basic" style="padding-left:10px;">
                                    <i class="el-icon-edit"></i>
                                    基本信息
                                </el-col>
                            </template>
                            <el-row>
                                <el-col style="padding:20px;">
                                    <el-form :model="addForm.StudyPlanInfo" label-width="110px" :rules="addFormRules" ref="StudyPlanInfo">
                                        <el-row>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="计划名称" prop="StudyPlanName">
                                                    <el-input v-model="addForm.StudyPlanInfo.StudyPlanName" maxlength="20" autocomplete="off"></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="分类" prop="ParentCategoryID">
                                                    <el-cascader style="width:100%;" v-model="addForm.StudyPlanInfo.StudyCategoryID"
                                                                 :options="CategoryList"
                                                                 filterable
                                                                 change-on-select></el-cascader>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="开始时间" prop="Sort">
                                                    <el-date-picker v-model="addForm.StudyPlanInfo.StartDateTime" type="datetime" placeholder="请选择开始时间" style="width:100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="结束时间" prop="Sort">
                                                    <el-date-picker v-model="addForm.StudyPlanInfo.EndDateTime" type="datetime" placeholder="请选择结束时间" style="width:100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="负责人" prop="FollowUser">
                                                    <el-select v-model="addForm.StudyPlanInfo.FollowUser" clearable placeholder="请选择负责人" @focus="showSearchEmployee(1)" @clear="clearSearchEmployee(1)" style="width: 100%;">
                                                        <el-option v-for="item in addForm.StudyPlanInfo.EmployeeList_FollowUser"
                                                                   :key="item.EmployeeID"
                                                                   :label="item.EmployeeName"
                                                                   :value="item.EmployeeID">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="重要级别" prop="ImportantLevel">
                                                    <el-rate v-model="addForm.StudyPlanInfo.ImportantLevel" text-color="#ff9900" style="display:inline-block;"></el-rate>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="到期通知">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsAutoNotice" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="自动归档" prop="IsAutoArchiving">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsAutoArchiving" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="学分标准" prop="CreditStandard">
                                                    <el-select v-model="addForm.StudyPlanInfo.CreditStandard" @change="changeCreditStandard" placeholder="请选择学分标准" class="queryInput">
                                                        <el-option v-for="item in CreditStandard"
                                                                   :key="item.value"
                                                                   :label="item.name"
                                                                   :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="20" :lg="11">
                                                <el-form-item label="学习标准" prop="StudyStandard">
                                                    <el-select v-model="addForm.StudyPlanInfo.StudyStandard" @change="changeStudyStandard" placeholder="请选择学习标准" class="queryInput">
                                                        <el-option v-for="item in StudyStandard"
                                                                   :key="item.value"
                                                                   :label="item.name"
                                                                   :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :offset="1" :span="23" :lg="23">
                                                <el-form-item label="简介">
                                                    <el-input v-model="addForm.StudyPlanInfo.Description" type="textarea" autocomplete="off" :autosize="{ minRows: 4, maxRows: 8}" maxlength="500" show-word-limit></el-input>
                                                </el-form-item>
                                            </el-col>

                                        </el-row>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item id="add-content" name="2" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-content" style="padding-left:10px;">
                                    <i class="el-icon-s-order"></i>
                                    学习内容
                                </el-col>
                            </template>
                            <el-row>
                                <el-col style="padding:20px;">
                                    <el-col style="line-height:18px;">
                                        <div class="add-item-total" style="background-color:#b2e6fa;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-area-chart" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalLearnMinutes}}</div>
                                                <div>总学分</div>
                                            </el-col>
                                        </div>
                                        <div class="add-item-total" style="background-color:#faf4b2;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-bar-chart" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalCredit}}</div>
                                                <div>总学时</div>
                                            </el-col>
                                        </div>
                                        <div class="add-item-total" style="background-color:#dabafa;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-pie-chart" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalResourceCount}}</div>
                                                <div>总知识数</div>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-col style="border-right: 1px solid #C0C4CC;padding-right:20px;margin-left:1px;">
                                            <el-col style="padding:10px;padding-top:0px;">
                                                <el-tooltip content="添加章节" placement="top">
                                                    <el-button type="warning" icon="el-icon-plus" @click.native="addChapter" circle></el-button>
                                                </el-tooltip>
                                                <el-tooltip content="下移章节" placement="top">
                                                    <el-button type="primary" icon="el-icon-bottom" @click.native="moveDownChapter" circle></el-button>
                                                </el-tooltip>
                                                <el-tooltip content="上移章节" placement="top">
                                                    <el-button type="primary" icon="el-icon-top" @click.native="moveUpChapter" circle></el-button>
                                                </el-tooltip>
                                                <el-tooltip content="删除章节" placement="top">
                                                    <el-button type="danger" icon="el-icon-delete" @click.native="removeChapter" circle></el-button>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col>
                                                <el-radio-group v-model="addForm.StudyPlanChapterIndex" class="x-fillitem el-group-list" @change="changeChapterList">
                                                    <el-radio-button v-for="(item,index) in addForm.ChapterList" :key="index" :label="index">
                                                        章节: {{item.StudyPlanChapterName}} ({{item.ItemList.length}})
                                                    </el-radio-button>
                                                </el-radio-group>
                                            </el-col>
                                            <el-col>
                                                <el-form :model="addForm.ChapterList" label-width="100px" :rules="addFormRules" ref="ChapterList">
                                                    <el-form-item label="允许跳过章节" prop="IsSkipChapter">
                                                        <el-switch v-model="addForm.StudyPlanInfo.IsSkipChapter" active-value="1" inactive-value="0">
                                                        </el-switch>
                                                    </el-form-item>
                                                </el-form>
                                            </el-col>
                                        </el-col>
                                    </el-col>
                                    <el-col :span="18" style="border-left: 1px solid #C0C4CC;">
                                        <el-form :model="addForm.CurrChapterInfo" label-width="100px" :rules="addFormRules" ref="CurrChapterInfo">
                                            <el-row>
                                                <el-col :offset="1" :span="20" :lg="11">
                                                    <el-form-item label="章节名称" prop="StudyPlanChapterName">
                                                        <el-input v-model="addForm.CurrChapterInfo.StudyPlanChapterName" maxlength="20" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :offset="1" :span="20" :lg="23">
                                                    <el-form-item label="顺序学习" prop="IsSkipChapter">
                                                        <el-switch v-model="addForm.CurrChapterInfo.IsSkipChapter" active-value="0" inactive-value="1">
                                                        </el-switch>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :offset="1" :span="23" :lg="23">
                                                    <el-form-item label="章节介绍">
                                                        <el-input v-model="addForm.CurrChapterInfo.Description" type="textarea" autocomplete="off" :autosize="{ minRows: 3, maxRows: 6}" maxlength="200" show-word-limit></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col>
                                                    <el-row>
                                                        <el-col>
                                                            <el-table :data="addForm.CurrChapterInfo.ItemList"
                                                                      highlight-current-row
                                                                      @selection-change="selectItemChange"
                                                                      ref="CurrentItemList"
                                                                      style="width: 100%;margin-left:10px;">
                                                                <el-table-column type="selection" width="50">
                                                                </el-table-column>
                                                                <el-table-column prop="StudyPlanItemName" label="名称" min-width="130">
                                                                </el-table-column>
                                                                <el-table-column prop="ReferTypeName" label="类型" width="80" class-name="hidden-xs-only">
                                                                </el-table-column>
                                                                <el-table-column prop="LearnMinutes" label="学时(分钟)" width="110" class-name="hidden-xs-only">
                                                                </el-table-column>
                                                                <el-table-column prop="Credit" label="学分" width="80" class-name="hidden-xs-only">
                                                                </el-table-column>
                                                                <el-table-column prop="Sort" label="排序" width="80">
                                                                    <template slot-scope="scope">
                                                                        <el-input v-model="scope.row.Sort" maxlength="4" placeholder="排序"></el-input>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column prop="Author" label="作者" min-width="80" class-name="hidden-xs-only">
                                                                </el-table-column>
                                                            </el-table>
                                                        </el-col>
                                                        <el-col style="padding:10px 20px;">
                                                            <el-button type="primary" plain size="small" @click.native="handleAddItemList" style="margin-top:5px;">添加</el-button>
                                                            <el-button type="primary" plain size="small" @click.native="handleDelItemList" style="margin-top:5px;">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item id="add-user" name="3" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-user" style="padding-left:10px;">
                                    <i class="fa fa-users"></i>
                                    指定学员
                                </el-col>
                            </template>
                            <el-row>
                                <el-col style="padding:20px;">
                                    <el-form :model="addForm.UserList" label-width="180px" :rules="addFormRules" ref="UserList">
                                        <el-row>
                                            <el-col>
                                                <el-radio-group v-model="addForm.StudyPlanInfo.StudyPlanLimit">
                                                    <el-radio-button label="指定学员"></el-radio-button>
                                                    <el-radio-button label="全公司人员"></el-radio-button>
                                                    <el-radio-button label="允许游客"></el-radio-button>
                                                </el-radio-group>
                                            </el-col>
                                            <el-col style="padding:20px 0px;">
                                                <el-col style="padding:10px;border:1px solid #EBEEF5;">
                                                    <el-tag v-for="(item,index) in addForm.UserList"
                                                            :key="index"
                                                            :type="item.TypeStyle"
                                                            effect="light"
                                                            closable
                                                            style="margin-right:15px;">
                                                        <i :class="item.Icon" class="fa"></i>{{ item.Name }}
                                                    </el-tag>
                                                </el-col>
                                            </el-col>
                                            <el-col>
                                                <el-form-item label="部门下新员工自动加入" prop="IsNewEmployeeAutoStudy">
                                                    <el-switch v-model="addForm.StudyPlanInfo.IsNewEmployeeAutoStudy" active-value="1" inactive-value="0">
                                                    </el-switch>
                                                </el-form-item>
                                            </el-col>

                                        </el-row>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item id="add-total" name="4" class="study-add-item">
                            <template slot="title">
                                <el-col class="study-add-item-title study-add-item-total" style="padding-left:10px;">
                                    <i class="fa fa-list-ul"></i>
                                    概要统计
                                </el-col>
                            </template>
                            <el-row>
                                <el-col style="padding:20px;line-height:27px;">
                                    <el-col style="font-size:18px;font-weight:bold;color:#ff6d00;">
                                        {{addForm.StudyPlanInfo.StudyPlanName}}
                                    </el-col>
                                    <el-col style="line-height:18px;">
                                        <div class="add-item-total" style="background-color:#b2e6fa;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-area-chart" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalLearnMinutes}}</div>
                                                <div>总学分</div>
                                            </el-col>
                                        </div>
                                        <div class="add-item-total" style="background-color:#faf4b2;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-bar-chart" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalCredit}}</div>
                                                <div>总学时</div>
                                            </el-col>
                                        </div>
                                        <div class="add-item-total" style="background-color:#dabafa;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-pie-chart" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalResourceCount}}</div>
                                                <div>知识数</div>
                                            </el-col>
                                        </div>

                                        <div class="add-item-total" style="background-color:#bafac9;">
                                            <el-col :span="8" class="add-item-total-icon">
                                                <i class="fa fa-gg-circle" style="font-size:1.3em;"></i>
                                            </el-col>
                                            <el-col :span="16">
                                                <div>{{addForm.StudyPlanTotal.TotalUserCount}}</div>
                                                <div>学员人数</div>
                                            </el-col>
                                        </div>
                                    </el-col>

                                    <el-col>有效期: {{addForm.StudyPlanInfo.StartDateTime}} 至 {{addForm.StudyPlanInfo.EndDateTime}}</el-col>
                                    <el-col>负责人: {{addForm.StudyPlanInfo.FollowUserName}}</el-col>
                                    <el-col>
                                        到期通知:
                                        <el-switch v-model="addForm.StudyPlanInfo.IsAutoNotice" active-value="1" inactive-value="0" disabled>
                                        </el-switch>
                                    </el-col>
                                    <el-col>
                                        自动归档:
                                        <el-switch v-model="addForm.StudyPlanInfo.IsAutoArchiving" active-value="1" inactive-value="0" disabled>
                                        </el-switch>
                                    </el-col>
                                    <el-col>
                                        学分标准: {{addForm.StudyPlanInfo.CreditStandardName}}
                                    </el-col>
                                    <el-col>
                                        学习标准: {{addForm.StudyPlanInfo.StudyStandardName}}
                                    </el-col>
                                    <el-col>
                                        重要级别:
                                        <el-rate v-model="addForm.StudyPlanInfo.ImportantLevel" disabled text-color="#ff9900" style="display:inline-block;"></el-rate>
                                    </el-col>
                                    <el-col>
                                        <div style="font-size:16px;font-weight:bold;">简介:</div>
                                        <div style="text-indent:2em;">{{addForm.StudyPlanInfo.Description}}</div>
                                    </el-col>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </el-col>

                <el-col style="text-align:center;padding-bottom:50px;padding-top:30px;">
                    <el-button @click.native="addFormVisible = false" icon="el-icon-close" style="margin:0px 20px;">取消</el-button>
                    <el-button type="primary" @click.native="addSubmit" :loading="addLoading" icon="el-icon-check" style="margin: 0px 20px;">提交</el-button>

                </el-col>
            </el-row>
        </transition>

        <EmployeeSearchPage :showVisible="showEmployeeSearchPage" @getSelectEmployeeID="getSelectEmployeeID($event)" @hideEmployeeSearchPage="hideEmployeeSearchPage()" />

        <ResourceSearchPage :showVisible="showResourceSearchPage" :isMultipleRows="true" @getSelectResourceInfo="getSelectResourceInfo($event)" @hideResourceSearchPage="hideResourceSearchPage()" />
    </section>
</template>
<script>
    import util from '../../../../util/date'
    import sepCommon from '../../../../util/sepCommon'
    import { addStudyPlan, getStudyCategoryTree } from '@/api/api';
    import EmployeeSearchPage from "../../../components/EmployeeSearchPage.vue";
    import ResourceSearchPage from "../Resources/ResourceSearchPage.vue";

    export default {
        name: "StudyPlan_Add",
        components: { EmployeeSearchPage, ResourceSearchPage },
        data() {
            return {
                pageName: "新增学习计划",
                ProgressSet: {
                    Colors: [
                        { color: '#f56c6c', percentage: 20 },
                        { color: '#e6a23c', percentage: 40 },
                        { color: '#5cb87a', percentage: 60 },
                        { color: '#1989fa', percentage: 80 },
                        { color: '#6f7ad3', percentage: 100 }
                    ]
                },
                StepInfo: {
                    Active: 1,
                    ActiveItemName: ['1', '2', '3', '4'], //展开所有折叠板
                },

                CreditStandard: [],
                StudyStandard: [],
                CategoryList: [],
                selectItemRows: [],
                showEmployeeSearchPage: false,
                SearchEmployeeType: 0,
                AddStudyPlanChapterID: 1,
                showResourceSearchPage: false,

                addLoading: false,
                addFormRules: {
                    CategoryName: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' }
                    ],
                },
                //新增界面数据
                addForm: {
                    StudyPlanInfo: {
                        StudyCategoryID: 123,
                        StudyPlanName: "",
                        FollowUser: "",
                        FollowUserName: "",
                        StartDateTime: "",
                        EndDateTime: "",
                        CreditStandard: "1",
                        CreditStandardName: "",
                        StudyStandard: "1",
                        StudyStandardName: "",
                        Description: "",
                        IsAutoNotice: 0,
                        IsAutoArchiving: 0,
                        IsSkipChapter: 0,
                        ImportantLevel: 3,
                        StudyPlanLimit: 1,
                        EmployeeList_FollowUser: [],
                    },
                    StudyPlanChapterIndex: 0, //当前章节索引位置
                    CurrChapterInfo: {}, //当前选择的章节
                    //章节列表
                    ChapterList: [
                        //{
                        //    StudyPlanChapterID: 1,
                        //    StudyPlanChapterName: "章节名称",
                        //    IsSkipChapter: 0,
                        //    Sort: 0,
                        //    ItemList: [
                        //        {
                        //            StudyPlanItemName: "名称",
                        //            ReferType: 1,
                        //            ReferID: 1234,
                        //            LearnMinutes: 12,
                        //            Credit: 6,
                        //            Sort: 1
                        //        },
                        //        {
                        //            StudyPlanItemName: "名称2",
                        //            ReferType: 1,
                        //            ReferID: 123234,
                        //            LearnMinutes: 12,
                        //            Credit: 6,
                        //            Sort: 1
                        //        }
                        //    ],
                        //},
                        //{
                        //    StudyPlanChapterID: 2,
                        //    StudyPlanChapterName: "章节名称2",
                        //    IsSkipChapter: 0,
                        //    Sort: 0,
                        //    ItemList: [
                        //        {
                        //            StudyPlanItemName: "名称3",
                        //            ReferType: 3,
                        //            ReferID: 12341,
                        //            LearnMinutes: 12,
                        //            Credit: 6,
                        //            Sort: 1
                        //        },
                        //        {
                        //            StudyPlanItemName: "名称4",
                        //            ReferType: 1,
                        //            ReferID: 12343,
                        //            LearnMinutes: 12,
                        //            Credit: 6,
                        //            Sort: 1
                        //        }
                        //    ],
                        //}
                    ],
                    //学员列表
                    UserList: [
                        {
                            Type: 1,
                            TypeStyle: 'primary',
                            Icon: 'fa-user',
                            ReferID: 1,
                            Name: '张三',
                        },
                        {
                            Type: 1,
                            TypeStyle: 'primary',
                            Icon: 'fa-user',
                            ReferID: 2,
                            Name: '李四',
                        },
                        {
                            Type: 2,
                            TypeStyle: 'danger',
                            Icon: 'fa-group',
                            ReferID: 2,
                            Name: '环境部门',
                        },
                        {
                            Type: 3,
                            TypeStyle: 'warning',
                            Icon: 'fa-cog',
                            ReferID: 2,
                            Name: 'xx职称',
                        }

                    ],
                    //统计信息
                    StudyPlanTotal: {
                        TotalLearnMinutes: 0,
                        TotalCredit: 0,
                        TotalChapterCount: 0,
                        TotalResourceCount: 0,
                        TotalUserCount: 0,
                    },

                },

            }
        },
        methods: {
            //滚动监听器
            onScroll() {
                const navContents = document.querySelectorAll('.study-add-item');
                const offsetTopArr = [];
                navContents.forEach(item => {
                    offsetTopArr.push(item.offsetTop);
                })
                //有顶部菜单，加80的高度 -无间隔加50就可以了
                const scrollTop = document.documentElement.scrollTop || document.getElementById('app').scrollTop + 80;
                //const scrollTop = document.documentElement.scrollTop || document.body.scrollTop.scrollTop + 80;
                let navIndex = 0
                for (let n = 0; n < offsetTopArr.length; n++) {
                    if (scrollTop >= offsetTopArr[n]) {
                        navIndex = n;
                    }
                }
                this.StepInfo.Active = navIndex + 1;
            },
            //定位到指定位置
            scrollTo(tagName, index) {
                this.StepInfo.Active = index;
                //有顶部菜单，要减掉50的高度
                const targetOffsetTop = document.querySelector('#' + tagName + '').offsetTop - 50;
                // 获取当前 offsetTop
                let scrollTop = document.documentElement.scrollTop || document.getElementById('app').scrollTop;
                //let scrollTop = document.documentElement.scrollTop || document.body.scrollTop.scrollTop;

                const STEP = 50;
                if (scrollTop > targetOffsetTop) {
                    smoothUp(); // 往上滑
                } else {

                    smoothDown();// 往下滑
                }

                // 往下滑函数
                function smoothDown() {
                    // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
                    if (scrollTop < targetOffsetTop) {
                        if (targetOffsetTop - scrollTop >= STEP) {
                            scrollTop += STEP;
                        } else {
                            scrollTop = targetOffsetTop;
                        }
                        //滚动条定位在id=app上
                        document.getElementById('app').scrollTop = scrollTop;
                        //document.body.scrollTop = scrollTop;
                        //document.documentElement.scrollTop = scrollTop;
                        window.requestAnimationFrame(smoothDown);
                    }
                }
                // 往上滑函数
                function smoothUp() {
                    if (scrollTop > targetOffsetTop) {
                        if (scrollTop - targetOffsetTop >= STEP) {
                            scrollTop -= STEP;
                        } else {
                            scrollTop = targetOffsetTop;
                        }
                        //滚动条定位在id=app上
                        document.getElementById('app').scrollTop = scrollTop;
                        //document.body.scrollTop = scrollTop
                        //document.documentElement.scrollTop = scrollTop
                        window.requestAnimationFrame(smoothUp);
                    }
                }
            },


            //#region 弹窗选择员工
            clearSearchEmployee(type) {
                switch (type) {
                    case 1:
                        this.addForm.StudyPlanInfo.FollowUser = "";
                        this.addForm.StudyPlanInfo.EmployeeList_FollowUser = [];
                        break;
                }
            },
            showSearchEmployee(type) {
                this.SearchEmployeeType = type;
                this.showEmployeeSearchPage = true;
            },

            hideEmployeeSearchPage() {
                this.showEmployeeSearchPage = false;
            },
            getSelectEmployeeID(data) {
                if (data != null && data.length > 0) {
                    switch (this.SearchEmployeeType) {
                        case 1:
                            this.addForm.StudyPlanInfo.FollowUser = data[0].EmployeeID;
                            this.addForm.StudyPlanInfo.FollowUserName = data[0].Name;
                            this.addForm.StudyPlanInfo.EmployeeList_FollowUser = [{ EmployeeID: data[0].EmployeeID, EmployeeName: data[0].Name }];
                            break;
                    }
                }
                this.hideEmployeeSearchPage();
            },
            //#endregion

            //#region 弹窗选择资源
            showSearchResource() {
                this.showResourceSearchPage = true;
            },

            hideResourceSearchPage() {
                this.showResourceSearchPage = false;
            },
            getSelectResourceInfo(data) {
                if (data != null && data.length > 0) {
                    let _this = this;
                    var count = this.addForm.CurrChapterInfo.ItemList.length;
                    data.forEach(item => {
                        _this.addForm.CurrChapterInfo.ItemList.push({
                            StudyPlanItemID: 0,
                            StudyPlanItemName: item.ResourceName,
                            ReferType: item.Type,
                            ReferTypeName: item.TypeName,
                            ReferID: item.ResourceID,
                            LearnMinutes: item.LearnMinutes,
                            Credit: item.Credit,
                            Sort: count + 1,
                            Author: item.Author,
                            RowIndex: count + 1,
                        });
                        count++;
                    });
                    this.totalStudyPlanInfo();
                }
                this.hideResourceSearchPage();
            },
            //#endregion

            //#region 基本信息Tab
            changeCreditStandard(value) {
                let item = this.CreditStandard.filter(item => item.value == value);
                if (item != null && item.length > 0)
                    this.addForm.StudyPlanInfo.CreditStandardName = item[0].name;
                else
                    this.addForm.StudyPlanInfo.CreditStandard = "";
            },
            changeStudyStandard(value) {
                let item = this.StudyStandard.filter(item => item.value == value);
                if (item != null && item.length > 0)
                    this.addForm.StudyPlanInfo.StudyStandardName = item[0].name;
                else
                    this.addForm.StudyPlanInfo.StudyStandardName = "";
            },

            //#endregion

            //#region 章节Tab
            addChapter() {
                let cnt = this.addForm.ChapterList.length + 1;
                this.addForm.ChapterList.push({
                    StudyPlanChapterID: this.AddStudyPlanChapterID,
                    StudyPlanChapterName: "第" + cnt + "章节",
                    IsSkipChapter: 0,
                    Sort: cnt,
                    Description: "",
                    ItemList: [],
                });
                this.AddStudyPlanChapterID++;
                this.changeChapterList(this.addForm.ChapterList.length - 1);
                this.totalStudyPlanInfo();
            },
            moveDownChapter() {
                if (this.addForm.StudyPlanChapterIndex < 0) {
                    this.$message({
                        message: "请选择要下移的章节！",
                        type: "error"
                    });
                    return;
                }
                if (this.addForm.StudyPlanChapterIndex == this.addForm.ChapterList.length - 1) {
                    return;
                }
                this.swapItems(this.addForm.ChapterList, this.addForm.StudyPlanChapterIndex, this.addForm.StudyPlanChapterIndex + 1);
                this.addForm.StudyPlanChapterIndex++;
            },
            moveUpChapter() {
                if (this.addForm.StudyPlanChapterIndex < 0) {
                    this.$message({
                        message: "请选择要上移的章节！",
                        type: "error"
                    });
                    return;
                }
                if (this.addForm.StudyPlanChapterIndex <= 0) {
                    return;
                }
                this.swapItems(this.addForm.ChapterList, this.addForm.StudyPlanChapterIndex, this.addForm.StudyPlanChapterIndex - 1);
                this.addForm.StudyPlanChapterIndex--;
            },
            removeChapter(val) {
                if (this.addForm.StudyPlanChapterIndex < 0) {
                    this.$message({
                        message: "请选择要删除的章节！",
                        type: "error"
                    });
                    return;
                }
                if (this.addForm.ChapterList.length == 1) {
                    this.$message({
                        message: "至少保留一个章节！",
                        type: "error"
                    });
                    return;
                }
                let cnt = 1;
                let _this = this;
                this.addForm.ChapterList.forEach(function (item, index) {
                    if (index === _this.addForm.StudyPlanChapterIndex) {
                        _this.addForm.ChapterList.splice(index, 1)
                    }
                    else {
                        item.Sort = cnt;
                        cnt++;
                    }
                })
                if (this.addForm.ChapterList.length > 0) {
                    if (_this.addForm.StudyPlanChapterIndex > this.addForm.ChapterList.length - 1)
                        _this.addForm.StudyPlanChapterIndex = this.addForm.ChapterList.length - 1;
                    this.changeChapterList(_this.addForm.StudyPlanChapterIndex);
                }
                else
                    this.changeChapterList(-1);
                this.totalStudyPlanInfo();
            },
            swapItems(arr, index1, index2) {//交换元素 --//数组,元素1，元素2
                arr[index1] = arr.splice(index2, 1, arr[index1])[0];
                return arr;
            },

            changeChapterList(val) {
                console.log(val);
                let _this = this;
                this.addForm.CurrChapterInfo = [];
                this.addForm.StudyPlanChapterIndex = val;
                if (val >= 0) {
                    this.addForm.ChapterList.forEach(function (item, index) {
                        if (index === _this.addForm.StudyPlanChapterIndex) {
                            _this.addForm.CurrChapterInfo = item;
                        }
                    })
                }
            },


            //章节内容
            selectItemChange: function (selectRows) {
                this.selectItemRows = selectRows;
            },
            handleAddItemList() {
                if (this.addForm.StudyPlanChapterIndex < 0) {
                    this.$message({
                        message: "请先选择章节！",
                        type: "error"
                    });
                    return;
                }

                this.showSearchResource();

            },
            handleDelItemList() {
                var _this = this;
                let rows = this.selectItemRows;
                if (!rows || rows.length == 0) {
                    this.$message({
                        message: "请选择要删除的数据！",
                        type: "error"
                    });
                    return;
                }
                if (rows) {
                    rows.forEach(function (item, index) {
                        _this.addForm.CurrChapterInfo.ItemList.forEach(function (itemI, indexI) {
                            if (item.RowIndex === itemI.RowIndex) {
                                _this.addForm.CurrChapterInfo.ItemList.splice(indexI, 1)
                            }
                        })
                    })
                }
                // 清除选中状态
                this.$refs.CurrentItemList.clearSelection()

                this.totalStudyPlanInfo();
            },


            //#endregion


            //#region 概要统计

            //统计学习计划
            totalStudyPlanInfo() {
                //统计章节
                this.addForm.StudyPlanTotal.TotalChapterCount = this.addForm.ChapterList.length;
                //统计学时，学分，资源数
                this.addForm.StudyPlanTotal.TotalLearnMinutes = 0;
                this.addForm.StudyPlanTotal.TotalCredit = 0;
                this.addForm.StudyPlanTotal.TotalResourceCount = 0;
                let _this = this;
                this.addForm.ChapterList.forEach(function (chapterItem, chapterIndex) {
                    chapterItem.ItemList.forEach(function (item, index) {
                        if (item.LearnMinutes != '')
                            _this.addForm.StudyPlanTotal.TotalLearnMinutes = _this.addForm.StudyPlanTotal.TotalLearnMinutes + Number(item.LearnMinutes);
                        if (item.Credit != '')
                            _this.addForm.StudyPlanTotal.TotalCredit = _this.addForm.StudyPlanTotal.TotalCredit + Number(item.Credit);
                        _this.addForm.StudyPlanTotal.TotalResourceCount++;
                    });
                });
                //统计学员
                this.addForm.StudyPlanTotal.TotalUserCount = 0;
            },

            //#endregion

            //获取公共数据，枚举值等
            getSEPCommon: async function () {
                this.CreditStandard = await sepCommon.getEnumInfo("CreditStandard", false);
                this.StudyStandard = await sepCommon.getEnumInfo("StudyStandard", false);
                this.changeCreditStandard(this.addForm.StudyPlanInfo.CreditStandard);
                this.changeStudyStandard(this.addForm.StudyPlanInfo.StudyStandard);
            },

        },
        mounted() {
            this.getSEPCommon();
            this.addChapter();
            // 监听滚动事件
            document.getElementById('app').addEventListener('scroll', this.onScroll, false);
        },
        destroy() {
            // 必须移除监听器
            document.getElementById('app').removeEventListener('scroll', this.onScroll)
        },

    }</script>
<style scoped>
    .study-add-main {
        color: #333;
        font-size: 14px;
        padding: 30px 20px;
        padding-top: 90px;
        line-height: 24px;
        background-color: #fff;
        margin-bottom: 50px;
    }

    .study-add-title {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 50px;
        color: #ff6d00;
    }

    .study-add-item {
        color: rgb(102, 102, 102);
        line-height: 24px;
    }

    .study-add-item-title {
        font-size: 22px;
        padding-left: 10px;
    }

    .study-add-item-basic {
        border-left: 5px solid #3979ff;
    }

    .study-add-item-content {
        border-left: 5px solid #ff8e39;
    }

    .study-add-item-user {
        border-left: 5px solid rgb(190, 25, 187);
    }

    .study-add-item-total {
        border-left: 5px solid #fe6c6f;
    }

    .add-item-total {
        margin: 5px;
        padding: 3px;
        color: #4a4949;
        font-size: 12px;
        display: inline-block;
        width: 120px;
    }

    .add-item-total-icon {
        text-align: right;
        vertical-align: middle;
        line-height: 40px;
    }
</style>