登记个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>
扫一扫
4414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
