Skip to content

P
pica.cloud.web-education-admin
提交 6f54d8df 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

创建组件

上级 070bdd62
显示空白字符变更
内嵌 并排
正在显示 包含 216 行增加 和 212 行删除
src/components/breadcrumb.vue
浏览文件 @ 6f54d8df
......@@ -3,6 +3,7 @@
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>{{curmbFirst}}</el-breadcrumb-item>
<el-breadcrumb-item>{{curmbSecond}}</el-breadcrumb-item>
<el-breadcrumb-item :to="jumPathThird">{{curmbThird}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
......@@ -14,15 +15,26 @@ export default {
},
curmbSecond: {
type: String
},
curmbThird: {
type: String
},
jumPathThird: {
type: String
}
}
}
</script>
<style lang="scss">
.bread-crumb {
position: fixed;
left: 225px;
top: 70px;
width: 100%;
background: #F4F5F6;
height: 50px;
padding: 20px 0 0 25px;
z-index: 99999;
.el-breadcrumb__inner {
font-size: 12px;
}
......
src/views/education/item-component.vue
浏览文件 @ 6f54d8df
<template>
<div class="create-component-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond"
:curmbThird="curmbThird"
:jumPathThird="jumPathThird">
</bread-crumb>
<div class="step-content">
<el-steps :active="stepNum" simple>
<span class="step-one">1</span><el-step title="基础信息"></el-step>
......@@ -39,7 +44,7 @@
</el-upload>
</el-form-item>
<el-row>
<el-col :span="10">
<el-col :span="5">
<el-form-item label="配置证书" prop="certificateId">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
......@@ -66,7 +71,7 @@
controls-position="right"
@change="handleChange"
:step="10"
:min="0"
:min="10"
:max="100">
</el-input-number>
</el-form-item>
......@@ -79,17 +84,13 @@
</div>
<div class="tab-content">
<el-tabs type="card" v-model="firstTab" editable @tab-click="handleClick">
<el-tab-pane
:key="index"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name">
<el-tab-pane v-for="(item,index) in componentList.moduleList" :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'>
<div>
<el-form ref="moduleForm" :model="componentList.moduleList[0]" :rules="rules" label-suffix=":" label-width="130px" style="width:100%;">
<el-form ref="moduleForm" :model="item" :rules="rules" label-suffix=":" label-width="130px" style="width:100%;">
<el-row>
<el-col :span="10">
<el-form-item label="模块名称" prop="name">
<el-input v-model="componentList.moduleList[0].name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
<el-input v-model="item.name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
......@@ -104,27 +105,37 @@
</el-form>
<div class="template-btn">
<span class="word-size">添加一个模板</span>
<el-button type="primary" size="small" @click="addTest" style="margin-left:0;">单个考试</el-button>
<el-button type="primary" size="small" @click="addCourse" style="margin-left:0;">单个课程</el-button>
<el-button type="primary" size="small" @click="addMatterTest" style="margin-left:0;">摸底考试后培训</el-button>
<el-button type="primary" size="small" @click="addTrainTest" style="margin-left:0;">培训后考试</el-button>
<el-button type="primary" size="small" @click="addMatterTrain" style="margin-left:0;">摸底考试获得资格，培训再次考试</el-button>
<el-button type="primary" size="small" @click="addTest(index)" style="margin-left:0;">单个考试</el-button>
<el-button type="primary" size="small" @click="addCourse(index)" style="margin-left:0;">单个课程</el-button>
<el-button type="primary" size="small" @click="addMatterTest(index)" style="margin-left:0;">摸底考试后培训</el-button>
<el-button type="primary" size="small" @click="addTrainTest(index)" style="margin-left:0;">培训后考试</el-button>
<el-button type="primary" size="small" @click="addMatterTrain(index)" style="margin-left:0;">摸底考试获得资格，培训再次考试</el-button>
</div>
<div v-for="(item1,index1) in item.templateList" :key="index1">
<el-form ref="templateForm" :model="item1" :rules="templateRules" label-suffix=":" label-width="130px" style="width:100%;">
<div class="template-content">
<div class="template-content-div">
<div class="title">
{{item1.name}}
<span @click="deleteTemplate(index,index1)">
变更顺序:
<i class="el-icon-arrow-down" @click="sortUp(index,index1)"></i>
<i class="el-icon-arrow-up" @click="sortDown(index,index1)"></i>
<i class="el-icon-delete" style="color:red;"></i>
</span>
</div>
<el-form ref="templateForm" :model="componentList.moduleList[0]" :rules="templateRules" label-suffix=":" label-width="130px" style="width:100%;">
<div v-for="(item,index) in componentList.moduleList[0].partList" :key="index">
<div class="single-test">
<div class="single-test-div">
<div class="title">{{item.titleName}}<span @click="deleteTest(index)"><i class="el-icon-delete"></i></span></div>
<div v-if="item.type == 1">
<div v-for="(item2,index2) in item1.partList" :key="index2">
<!-- 考试 -->
<div v-if="item2.type == 1">
<el-row>
<el-col :span="10">
<el-form-item label="考试名称" prop="name">
<el-input v-model="item.name" size="mini" placeholder="请输入考试名称" style="width:288px;"></el-input>
<el-input v-model="item2.name" size="mini" placeholder="请输入考试名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="考试ID" prop="id">
<el-input v-model="item.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
<el-input v-model="item2.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -139,52 +150,24 @@
</el-col>
<el-col :span="10">
<el-form-item label="选择证书" prop="id">
<el-input v-model="item.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
<el-input v-model="item2.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div v-if="item.type == 2">
<div v-if="item.numFlag == 1">
<el-row>
<!-- 课程 -->
<div v-if="item2.type == 2">
<el-row v-for="(item3,index3) in item2.partContentList" :key="index3">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<el-input v-model="item3.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span v-if="item2.numFlag == 2 && index3 == 0"><i class="el-icon-circle-plus-outline" @click="addMatterCourse(index,index1,index2)" style="color:#0486FE;"></i></span>
<span v-if="item2.numFlag == 2 && index3 > 0"><i class="el-icon-delete" @click="deleteMatterCourse(index,index1,index2,index3)" style="color:red;"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div v-if="item.numFlag == 2">
<div v-for="(item1,index1) in item1.partContentList" :key="index1">
<el-row v-if="index1 == 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item1.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-circle-plus-outline" @click="addMatterCourse(index)" style="color:#0486FE;"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item1.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <div class="tip">请注意该模板下，用户需要完成考试后才可参加培训</div> -->
<el-row v-if="index1 > 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item1.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-delete" @click="deleteMatterCourse(index,index1)" style="color:red;"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item1.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
<el-input v-model="item3.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -192,10 +175,9 @@
</div>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
......@@ -245,6 +227,8 @@ export default {
dialogTitle: '调用资源包',
curmbFirst: '教培项目',
curmbSecond: '项目组件',
curmbThird: '新增项目组件',
jumPathThird: '{ path: '+'/item-component'+' }',
firstTab: '1',
openLable: '是',
editableTabs: [{
......@@ -258,45 +242,11 @@ export default {
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书
certificateCondition: '',
certificateCondition: '60',
moduleList: [{
name: '',
openFlag: '', // 1不开放 2开放
partList: [
{
titleName: '单个考试',
type: 1, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: ''
},{
titleName: '单个课程',
type: 2, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: ''
},{
titleName: '培训后考试',
type: 1, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 2, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [
{
}
]
}
]
templateList: []
}]
},
resourceArray: [],
......@@ -378,10 +328,11 @@ export default {
},
// 添加空白模块
addModule() {
let seq = vm.editableTabs.length + 1
vm.editableTabs.push({
title: '模块 ' + seq,
name: '' + seq
let seq = vm.componentList.moduleList.length + 1
vm.componentList.moduleList.push({
name: '',
openFlag: '', // 1不开放 2开放
templateList: []
})
},
// 从模板中添加
......@@ -389,105 +340,144 @@ export default {
vm.columnFormVisible = true
},
// 添加单个考试
addTest() {
vm.moduleList.partList.push({
type: 1,
seqNo: '',
addTest(index) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
vm.componentList.moduleList[i].templateList.push({
name: '单个考试',
partList: [{
titleName: '',
type: 1, // 1考试 2课程
name: '',
id: ''
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
// 添加单个课程
addCourse() {
vm.moduleList.partList.push({
type: 2,
seqNo: '',
addCourse(index) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
vm.componentList.moduleList[i].templateList.push({
name: '单个课程',
partList:[{
titleName: '',
type: 2, // 1考试 2课程
name: '',
id: ''
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
//摸底考试后培训
addMatterTest() {
vm.moduleList.partList.push({
type: 3,
addMatterTest(index) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
vm.componentList.moduleList[i].templateList.push({
name: '摸底考试后培训',
partList: [{
titleName: '',
type: 1, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
},{
titleName: '',
type: 2, // 1考试 2课程
name: '',
id: ''
id: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 2, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
// 培训后考试
addTrainTest() {
vm.moduleList.partList.push({
type: 4,
seqNo: '',
name: '',
id: ''
})
},
// 摸底考试获得资格，培训再次考试
addMatterTrain() {
vm.moduleList.partList.push({
type: 5,
seqNo: '',
name: '',
id: ''
})
},
// 删除单个考试
deleteTest(index) {
vm.moduleList.partList.splice(index,1)
},
// 删除单个课程
deleteCourse(index) {
vm.moduleList.partList.splice(index,1)
},
//摸底考试后培训
deleteMatter(index) {
vm.moduleList.partList.splice(index,1)
},
// 删除培训后考试
deleteTrain(index) {
vm.moduleList.partList.splice(index,1)
},
// 删除摸底考试获得资格，培训再次考试
deleteMatterTrain(index) {
vm.moduleList.partList.splice(index,1)
},
// 添加摸底考试后培训课程
addMatterCourse(index) {
vm.moduleList.partList[index].test.push({
seqNo: '',
name: '',
id: ''
})
},
// 删除摸底考试后培训课程
deleteMatterCourse(index,_index) {
vm.moduleList.partList[index].test.splice(_index,1)
// 删除模板
deleteTemplate(index,index1) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
vm.componentList.moduleList[i].templateList.splice(index1,1)
}
}
},
// 添加培训后考试课程
addTrainCourse(index) {
vm.moduleList.partList[index].test.push({
// 添加多个课程
addMatterCourse(index,index1,index2) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
for(let j = 0; j < vm.componentList.moduleList[i].templateList.length; j++) {
if(index1 == j) {
for(let q = 0; q < vm.componentList.moduleList[i].templateList[j].partList.length;q++){
if(index2 == q) {
vm.componentList.moduleList[i].templateList[j].partList[q].partContentList.push({
id: '',
seqNo: '',
name: '',
id: ''
content_1: '',
content_2: ''
})
}
}
}
}
}
}
},
// 删除培训后考试课程
deleteTrainCourse(index,_index) {
vm.moduleList.partList[index].test.splice(_index,1)
// 删除多个课程
deleteMatterCourse(index,index1,index2,index3) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
for(let j = 0; j < vm.componentList.moduleList[i].templateList.length; j++) {
if(index1 == j) {
for(let q = 0; q < vm.componentList.moduleList[i].templateList[j].partList.length;q++){
if(index2 == q) {
vm.componentList.moduleList[i].templateList[j].partList[q].partContentList.splice(index3,1)
}
}
}
}
}
}
},
// 添加摸底考试后培训,培训再次考试课程
addMatterTrainCourse(index) {
vm.moduleList.partList[index].test.push({
seqNo: '',
name: '',
id: ''
})
sortUp(index,index1) {
},
// 删除摸底考试后培训课程
deleteMatterTrainCourse(index,_index) {
vm.moduleList.partList[index].test.splice(_index,1)
sortDown(index,index1) {
},
// 选择资源包
selectChange() {
......@@ -534,6 +524,7 @@ export default {
.step-content {
overflow: hidden;
height: 60px;
margin-top: 50px;
border-bottom: 1px solid #efefef;
.el-steps--simple {
float: left;
......@@ -591,14 +582,15 @@ export default {
background: #F3F3F3;
padding: 10px;
}
.single-test-div, .single-course-div, .matter-test-div, .train-test-div, .matter-train-test-div {
.template-content-div {
margin: 20px;
border-bottom: 1px dotted #ccc;
.title {
margin-bottom: 20px;
span{
span {
float: right;
color: red;
color: #666;
font-size: 12px;
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或