Skip to content

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

创建组件

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