Skip to content

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

项目添加组件

上级 b1bd7b24
显示空白字符变更
内嵌 并排
正在显示 包含 519 行增加 和 6 行删除
src/style/common.scss
浏览文件 @ 2eccef2c
......@@ -120,3 +120,12 @@ html,body{
.animation_opactiy{
animation: backOpacity 2s ease-in-out infinite;
}
.word-size {
font-size: 12px;
}
.el-form-item{
.el-form-item__label {
font-size: 12px;
}
}
\ No newline at end of file
src/views/education/item-component.vue
浏览文件 @ 2eccef2c
<template>
<div class="create-item">
<div class="create-component">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
项目组件
<div class="step-content">
<el-steps :active="1" simple>
<span class="step-one">1</span><el-step title="基础信息"></el-step>
<span class="step-two">2</span><el-step title="选择模块"></el-step>
</el-steps>
<div class="btn-container">
<el-button type="default" size="small">暂存</el-button>
<el-button type="primary" size="small" style="margin-left:0;">完成</el-button>
</div>
</div>
<div class="model-btn">
<el-button type="primary" size="small" @click="addModule">添加空白模块</el-button>
<el-button type="primary" size="small" @click="addFromModule" style="margin-left:0;">从模块添加</el-button>
</div>
<div class="tab-content">
<el-tabs type="card" v-model="firstTab" editable>
<el-tab-pane
:key="index"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name">
</el-tab-pane>
<el-form ref="moduleForm" :model="moduleParam" :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="moduleParam.name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="是否对外开放" prop="isOpen">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</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>
</div>
<el-form ref="templateForm" :model="templateParam" :rules="templateRules" label-suffix=":" label-width="130px" style="width:100%;">
<div class="single-test">
<div class="title" @click="deleteTest">单个考试<span><i class="el-icon-delete"></i></span></div>
<div v-for="(item1,index1) in templateParam.test" :key="index1">
<el-row>
<el-col :span="10">
<el-form-item label="考试名称" prop="name">
<el-input v-model="item1.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="item1.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书" prop="name">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="选择证书" prop="id">
<el-input v-model="item1.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<div class="single-course">
<div class="title">单个课程<span><i class="el-icon-delete"></i></span></div>
<div v-for="(item2,index2) in templateParam.course" :key="index2">
<el-row>
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<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="item2.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<div class="matter-test">
<div class="title">摸底考试后培训<span><i class="el-icon-delete"></i></span></div>
<div v-for="(item3,index3) in templateParam.matter" :key="index3">
<el-row>
<el-col :span="10">
<el-form-item label="考试名称" prop="name">
<el-input v-model="item3.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="item3.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书" prop="name">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="选择证书" prop="id">
<el-input v-model="item3.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="tip">请注意该模板下，用户需要完成考试后才可参加培训</div>
<div v-for="(item31,index31) in item3.test" :key="index31">
<el-row v-if="index31 == 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item31.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-circle-plus-outline"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item31.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="index31 > 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item31.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-delete"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item31.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="train-test">
<div class="title">培训后考试<span><i class="el-icon-delete"></i></span></div>
<div v-for="(item4,index4) in templateParam.train" :key="index4">
<div v-for="(item41,index41) in item4.test" :key="index41">
<el-row v-if="index41 == 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item4.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-circle-plus-outline"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item4.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="index41 > 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item4.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-delete"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item4.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="tip">请注意该模板下，用户需要完成培训后才可参加考试</div>
<el-row>
<el-col :span="10">
<el-form-item label="考试名称" prop="name">
<el-input v-model="item4.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="item4.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书" prop="name">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="选择证书" prop="id">
<el-input v-model="item4.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<div class="matter-train-test">
<div class="title">摸底考试获得资格，培训再次考试<span><i class="el-icon-delete"></i></span></div>
<div v-for="(item5,index5) in templateParam.matterTrain" :key="index5">
<el-row>
<el-col :span="10">
<el-form-item label="考试名称" prop="name">
<el-input v-model="item5.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="item5.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书" prop="name">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="选择证书" prop="id">
<el-input v-model="item5.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="tip">请注意该模板下，用户需要完成考试后才可参加培训</div>
<div v-for="(item51,index51) in item5.test" :key="index51">
<el-row v-if="index51 == 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item51.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-circle-plus-outline"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item51.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="index51 > 0">
<el-col :span="10">
<el-form-item label="课程名称" prop="name">
<el-input v-model="item51.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
<span><i class="el-icon-delete"></i></span>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="课程ID" prop="id">
<el-input v-model="item51.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="tip">请注意该模板下，用户需要完成考试后才可参加培训</div>
<el-row>
<el-col :span="10">
<el-form-item label="考试名称" prop="name">
<el-input v-model="item5.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="item5.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书" prop="name">
<el-radio-group v-model="openLable" @change="selectIsOpen">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="选择证书" prop="id">
<el-input v-model="item5.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</el-form>
</el-tabs>
</div>
</div>
</template>
<script>
......@@ -13,13 +323,206 @@ export default {
data() {
return {
curmbFirst: '教培项目',
curmbSecond: '项目组件'
curmbSecond: '项目组件',
firstTab: '1',
openLable: '是',
editableTabs: [{
title: '模块 1',
name: '1'
}, {
title: '模块 2',
name: '2'
}],
moduleParam: {
name: '',
isOpen: ''
},
templateParam: {
test: [{
name: '',
id: ''
}],
course: [{
name: '',
id: ''
}],
matter: [{
name: '',
id: '',
test: [{
name: '',
id: ''
},{
name: '',
id: ''
}]
}],
train: [{
name: '',
id: '',
test: [{
name: '',
id: ''
},{
name: '',
id: ''
}]
}],
matterTrain: [{
name: '',
id: '',
test: [{
name: '',
id: ''
},{
name: '',
id: ''
}]
}]
},
rules: {
"name": [
{ required: true, message: '请输入模块名称', trigger: 'blur' },
],
"isOpen": [
{ required: true }
]
},
templateRules: {
"name": [
{ required: true, message: '请输入考试名称', trigger: 'blur' },
],
"id": [
{ required: true, message: '请输入考试id', trigger: 'blur' },
],
}
}
},
methods: {
// 是否对外开放
selectIsOpen() {
},
// 添加空白模块
addModule() {
},
// 从模板中添加
addFromModule() {
},
// 添加单个考试
addTest() {
},
// 添加单个课程
addCourse() {
},
//摸底考试后培训
addMatterTest() {
},
// 培训后考试
addTrainTest() {
},
//摸底考试获得资格，培训再次考试
addMatterTrain() {
},
// 删除单个考试
deleteTest() {
}
}
}
</script>
<style>
<style lang="scss">
.create-component {
.step-content {
overflow: hidden;
height: 60px;
border-bottom: 1px solid #efefef;
.el-steps--simple {
float: left;
padding: 20px 0 0 5%;
width: 20%;
background: #fff;
.el-step__icon {
display: none;
}
.el-step__title {
font-size: 12px;
}
.el-step.is-simple .el-step__arrow::after, .el-step.is-simple .el-step__arrow::before {
height: 11px;
}
.step-one, .step-two {
display: block;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 50%;
width: 20px;
height: 15px;
line-height: 13px;
padding-left: 2px;
margin-top: 3px;
}
}
.btn-container {
float: right;
margin: 12px 20px 0;
span {
display: inline-block;
width: 40px;
line-height: 12px;
}
button:nth-child(2) span {
color: #fff;
}
}
}
.model-btn {
padding: 20px;
span {
color: #fff;
}
}
.tab-content {
.el-tabs__header {
margin-left: 20px;
.el-tabs__item {
font-size: 12px;
}
}
.template-btn {
background: #F3F3F3;
padding: 10px;
}
.single-test, .single-course, .matter-test, .train-test, .matter-train-test {
margin: 20px;
border-bottom: 1px dotted #ccc;
.title {
margin-bottom: 20px;
span{
float: right;
color: red;
}
}
}
.matter-test,.train-test, .matter-train-test{
.tip {
font-size: 12px;
color: #aaa;
margin-left: 57px;
margin-bottom: 20px;
}
}
}
}
</style>
src/views/home.vue
浏览文件 @ 2eccef2c
......@@ -42,3 +42,4 @@
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或