Skip to content

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

项目组件修改

上级 c239d60b
隐藏空白字符变更
内嵌 并排
正在显示 包含 818 行增加 和 561 行删除
src/components/breadcrumb.vue
浏览文件 @ a3dffc28
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="bread-crumb"> <div class="bread-crumb">
<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 :to="{ path: jumPathThird }">{{curmbSecond}}</el-breadcrumb-item>
<el-breadcrumb-item :to="jumPathThird">{{curmbThird}}</el-breadcrumb-item> <el-breadcrumb-item>{{curmbThird}}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
</template> </template>
...@@ -33,8 +33,8 @@ export default { ...@@ -33,8 +33,8 @@ export default {
width: 100%; width: 100%;
background: #F4F5F6; background: #F4F5F6;
height: 50px; height: 50px;
padding: 20px 0 0 25px; padding: 20px 0 0 13px;
z-index: 99999; z-index: 2;
.el-breadcrumb__inner { .el-breadcrumb__inner {
font-size: 12px; font-size: 12px;
} }
......
src/router/router.js
浏览文件 @ a3dffc28
...@@ -3,6 +3,7 @@ import App from '../App' ...@@ -3,6 +3,7 @@ import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home')), 'home') const home = r => require.ensure([], () => r(require('../views/home')), 'home')
const itemManager = r => require.ensure([], () => r(require('../views/education/item-manager.vue')), 'item-manager') const itemManager = r => require.ensure([], () => r(require('../views/education/item-manager.vue')), 'item-manager')
const itemComponent = r => require.ensure([], () => r(require('../views/education/item-component.vue')), 'item-component') const itemComponent = r => require.ensure([], () => r(require('../views/education/item-component.vue')), 'item-component')
const createComponent = r => require.ensure([], () => r(require('../views/education/create-component.vue')),'create-component')
const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role') const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager') const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
...@@ -31,6 +32,9 @@ export default [{ ...@@ -31,6 +32,9 @@ export default [{
},{ },{
path: '/role', path: '/role',
component: roleManager component: roleManager
},{
path: '/create-component',
component: createComponent
} }
] ]
}] }]
\ No newline at end of file
src/style/common.scss
浏览文件 @ a3dffc28
...@@ -124,8 +124,24 @@ html,body{ ...@@ -124,8 +124,24 @@ html,body{
.word-size { .word-size {
font-size: 12px; font-size: 12px;
} }
// 字体大小
.el-form-item{ .el-form-item{
.el-form-item__label { .el-form-item__label {
font-size: 12px; font-size: 12px;
} }
}
// 表格分页
.pagination {
margin: 20px 0;
text-align: right;
.el-pagination {
white-space: nowrap;
padding: 2px 5px;
color: #303133;
font-weight: 700;
}
}
// 表格
.el-table thead th{
background: #fafafa;
} }
\ No newline at end of file
src/utils/validate.js 0 → 100644
浏览文件 @ a3dffc28
/**
* 添加自定义的验证规则
*/
export function isvalidUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri*/
export function validateURL(textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母*/
export function validateLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母*/
export function validateUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母*/
export function validatAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
// 2-20个中文
export function validateWord(str) {
const reg = /^[\u4e00-\u9fa5]{2,20}$/
return reg.test(str)
}
\ No newline at end of file
src/views/education/create-component.vue 0 → 100644
浏览文件 @ a3dffc28
<template>
<div class="create-component-wrap">
<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" :class="stepNum == 1 ? 'class-a' : 'class-b'">1</span><el-step title="基础信息"></el-step>
<span class="step-two" :class="stepNum == 2 ? 'class-a' : 'class-b'">2</span><el-step title="选择模块"></el-step>
</el-steps>
<div class="btn-container">
<el-button type="default" size="small" @click="justStorage">暂存</el-button>
<el-button v-if="stepNum == 1" @click="nextStep" type="primary" size="small" style="margin-left:0;">下一步</el-button>
<el-button v-if="stepNum == 2" @click="finishConponent" type="primary" size="small" style="margin-left:0;">完成</el-button>
</div>
</div>
<div class="first-step" v-if="stepNum == 1">
<el-form ref="basicInfoForm" class="basic-form" :model="componentList" :rules="basicRule" label-width="125px" label-suffix=":" size="mini">
<el-form-item label="组件名称" prop="name">
<el-input type="text" v-model="componentList.name" size="mini" placeholder="请输入组件名称" style="width:30%;"></el-input>
<span class="word-num">0/20</span>
</el-form-item>
<el-form-item label="组件简介" prop="introduce">
<el-input type="textarea" v-model="componentList.introduce" size="mini" placeholder="请输入组件简介" style="width:30%;"></el-input>
<span class="word-num">0/150</span>
</el-form-item>
<el-form-item label="组件图片" prop="imageUrl">
<el-upload
v-model="componentList.imageUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="componentList.imageUrl" :src="componentList.imageUrl" class="bg-img">
<img v-if="!componentList.imageUrl" class="bg-img" src="../../assets/image/small.png">
<div class="limit-text">
<p>尺寸大小：750*420</p>
<p>限制大小：2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<el-row>
<el-col :span="5">
<el-form-item label="配置证书" prop="certificateId">
<el-radio-group v-model="openLable" @change="selectCertificate">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10" v-if="hasCertificate">
<el-form-item label="选择证书" prop="certificateId">
<el-select v-model="componentList.certificateId" @change="selectChange" placeholder="请选择资源包" style="width:60%;">
<el-option
v-for="(item,index) in resourceArray"
:key="index"
:label="item.lecturerName"
:value="item.lecturerId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="hasCertificate" label="获得证书完成率" prop="certificateCondition">
<el-input-number
v-model="componentList.certificateCondition"
controls-position="right"
@change="handleChange"
:step="10"
:min="10"
:max="100">
</el-input-number>
</el-form-item>
</el-form>
</div>
<div v-if="stepNum == 2">
<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 @tab-click="handleClick">
<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="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="item.name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="是否对外开放" prop="openFlag">
<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(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>
<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="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>
<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="item2.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 课程 -->
<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="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="item3.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<el-dialog :title="dialogTitle" :visible.sync="columnFormVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form ref="resourceForm" class="creat-form" :model="selectResource" label-width="125px" label-suffix=":" size="mini">
<el-form-item label="请选择一个资源包" prop="">
<el-select v-model="selectResource.resourceModuleSelect" @change="selectChange" placeholder="请选择资源包" style="width:60%;">
<el-option
v-for="(item,index) in resourceArray"
:key="index"
:label="item.lecturerName"
:value="item.lecturerId">
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-form ref="selectModuleForm" class="module-form" :model="selectModuleForm" label-width="75px" label-suffix=":" size="mini">
<el-form-item label="考试名称">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
<el-form-item label="配置证书">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
<el-form-item label="课程名称">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
<el-form-item label="配置证书">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
</el-form>
<!-- <div class="dialog-foot">
<el-button type="default" size="small" @click="columnFormVisible = false">取消</el-button>
<el-button type="primary" size="small" @click="submitDialog">确定</el-button>
</div> -->
<span slot="footer" class="dialog-footer dialog-foot">
<el-button type="default" size="small" @click="columnFormVisible = false">取 消</el-button>
<el-button type="primary" size="small" @click="submitDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniuUtil"
import { validateWord } from "../../utils/validate.js"
let vm = null
export default {
components: {
BreadCrumb
},
data() {
return {
columnFormVisible: false,
stepNum: 1,
dialogTitle: '选择模板',
curmbFirst: '教培项目',
curmbSecond: '项目组件',
curmbThird: '新增项目组件',
jumPathThird: '/item-component',
firstTab: '1',
hasCertificate: true,
openLable: '是',
editableTabs: [{
title: '模块 1',
name: '1'
}],
componentList: {
name: '',
id: '',
introduce: '',
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书
certificateCondition: '60',
moduleList: [{
name: '',
openFlag: '', // 1不开放 2开放
templateList: []
}]
},
resourceArray: [],
selectResource: {
resourceModuleSelect: ''
},
selectModuleForm: {
test: '否'
},
basicRule: {
"name": [
{ required: true, message: '输入长度为2-20个中文', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateWord(rule, value, callback, '输入长度为2-20个中文')
},
trigger: 'blur' }
],
"introduce": [
{ required: true, message: '请输入组件简介', trigger: 'blur' },
],
"imageUrl": [
{ required: true, message: '请上传组件图片', trigger: 'blur' },
],
"certificateId": [
{ required: true, message: '请选择是否配置证书', trigger: 'blur' },
],
"certificateId": [
{ required: true, message: '请选择证书', trigger: 'blur' },
],
"certificateCondition": [
{ required: true, message: '请选择获得证书完成率', trigger: 'blur' },
]
},
rules: {
"name": [
{ required: true, message: '请输入模块名称', trigger: 'blur' },
],
"openFlag": [
{ required: true }
]
},
templateRules: {
"name": [
{ required: true, message: '请输入考试名称', trigger: 'blur' },
],
"id": [
{ required: true, message: '请输入考试id', trigger: 'blur' },
],
}
}
},
created() {
vm = this
},
methods: {
// 暂存
justStorage() {
},
// 下一步
nextStep() {
vm.stepNum = 2
},
// 上传组件图片
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
vm.$message.error('上传图片只能是.jpg或者.png格式!')
return;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过2MB!');
}
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
vm.componentList.imageUrl = path.fullPath
vm.$message.success('上传成功')
});
},
// 是否配置证书
selectCertificate(val) {
vm.hasCertificate = val == '否' ? false : true
},
// 获取组件完成率
handleChange(value) {
},
// 是否对外开放
selectIsOpen() {
},
// tab点击
handleClick(tab,event) {
},
// 添加空白模块
addModule() {
let seq = vm.componentList.moduleList.length + 1
vm.componentList.moduleList.push({
name: '',
openFlag: '', // 1不开放 2开放
templateList: []
})
},
// 从模板中添加
addFromModule() {
vm.columnFormVisible = true
},
// 添加单个考试
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: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
// 添加单个课程
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: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
//摸底考试后培训
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: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 2, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
// 培训后考试
addTrainTest() {
},
// 摸底考试获得资格，培训再次考试
addMatterTrain() {
},
// 删除模板
deleteTemplate(index,index1) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
vm.componentList.moduleList[i].templateList.splice(index1,1)
}
}
},
// 添加多个课程
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: '',
content_1: '',
content_2: ''
})
}
}
}
}
}
}
},
// 删除多个课程
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)
}
}
}
}
}
}
},
sortUp(index,index1) {
},
sortDown(index,index1) {
},
// 选择资源包
selectChange() {
},
// 完成
finishConponent() {
},
// 确定选择模板
submitDialog() {
}
}
}
</script>
<style lang="scss">
.create-component-wrap {
.first-step {
margin-top: 20px;
.el-form-item {
margin-bottom: 25px;
}
.bg-img {
width: 84px;
height: 100px;
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.limit-text {
float: left;
margin-left: 10px;
padding-top: 20px;
p {
font-size: 12px;
color: #999;
}
}
}
}
.step-content {
overflow: hidden;
height: 60px;
margin-top: 50px;
border-bottom: 1px solid #efefef;
.el-step.is-simple .el-step__head {
display: none;
}
.class-a {
color: #409EFF;
}
.class-b {
color: #999;
}
.el-steps--simple {
float: left;
padding: 20px 0 0 5%;
width: 25%;
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: 25px;
height: 16px;
line-height: 13px;
padding-left: 3px;
margin-top: 3px;
margin-right: 10px;
}
}
.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;
}
.template-content-div {
margin: 20px;
border-bottom: 1px dotted #ccc;
.title {
margin-bottom: 20px;
span {
float: right;
color: #666;
font-size: 12px;
}
}
}
.matter-test,.train-test, .matter-train-test{
.tip {
font-size: 12px;
color: #aaa;
margin-left: 57px;
margin-bottom: 20px;
}
}
}
.module-form {
.el-input__inner {
border: none;
}
.el-select .el-input__inner{
border: 1px solid #dcdfe6;
}
}
.el-dialog {
.el-dialog__header {
padding: 15px;
border-bottom: 1px solid #e1e1e1;
.el-dialog__title {
color: #409EFF;
font-size: 16px;
}
}
.el-dialog__footer {
text-align: center;
padding-top: 30px;
border-top: 1px solid #e1e1e1;
}
}
}
</style>
src/views/education/item-component.vue
浏览文件 @ a3dffc28
<template> <template>
<div class="create-component-wrap"> <div class="item-component-wrap">
<bread-crumb <bread-crumb
:curmbFirst="curmbFirst" :curmbFirst="curmbFirst"
:curmbSecond="curmbSecond" :curmbSecond="curmbSecond">
:curmbThird="curmbThird"
:jumPathThird="jumPathThird">
</bread-crumb> </bread-crumb>
<div class="step-content"> <div class="component-content">
<el-steps :active="stepNum" simple> <div class="title">查询条件</div>
<span class="step-one">1</span><el-step title="基础信息"></el-step> <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<span class="step-two">2</span><el-step title="选择模块"></el-step> <el-form ref="serchForm" :model="searchParam" label-width="75px" style="width:100%;">
</el-steps> <el-col :span="10">
<div class="btn-container"> <el-form-item label="组件名称:">
<el-button type="default" size="small" @click="justStorage">暂存</el-button> <el-input v-model="searchParam.name" size="mini" placeholder="请输入组件名称"></el-input>
<el-button v-if="stepNum == 1" @click="nextStep" type="primary" size="small" style="margin-left:0;">下一步</el-button>
<el-button v-if="stepNum == 2" @click="finishConponent" type="primary" size="small" style="margin-left:0;">完成</el-button>
</div>
</div>
<div class="first-step" v-if="stepNum == 1">
<el-form ref="basicInfoForm" class="basic-form" :model="componentList" :rules="basicRule" label-width="125px" label-suffix=":" size="mini">
<el-form-item label="组件名称" prop="name">
<el-input type="text" v-model="componentList.name" size="mini" placeholder="请输入组件名称" style="width:30%;"></el-input>
<span class="word-num">0/20</span>
</el-form-item>
<el-form-item label="组件简介" prop="introduce">
<el-input type="textarea" v-model="componentList.introduce" size="mini" placeholder="请输入组件简介" style="width:30%;"></el-input>
<span class="word-num">0/150</span>
</el-form-item>
<el-form-item label="组件图片" prop="imageUrl">
<el-upload
v-model="componentList.imageUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="componentList.imageUrl" :src="componentList.imageUrl" class="bg-img">
<img v-if="!componentList.imageUrl" class="bg-img" src="../../assets/image/small.png">
<div class="limit-text">
<p>尺寸大小：750*420</p>
<p>限制大小：2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<el-row>
<el-col :span="5">
<el-form-item label="配置证书" prop="certificateId">
<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-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="选择证书" prop="certificateId"> <el-form-item label="发布状态:">
<el-select v-model="componentList.certificateId" @change="selectChange" placeholder="请选择资源包" style="width:60%;"> <el-select v-model="searchParam.status" size="mini" placeholder="请选择发布状态">
<el-option <el-option
v-for="(item,index) in resourceArray" v-for="(item,index) in statuSelect"
:key="index" :key="index"
:label="item.lecturerName" :label="item.label"
:value="item.lecturerId"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
<el-form-item label="获得证书完成率" prop="certificateCondition"> <el-button type="primary" size="small">查询</el-button>
<el-input-number <el-button type="default" size="small" style="margin-left:0;">重置</el-button>
v-model="componentList.certificateCondition" </el-col>
controls-position="right" </el-form>
@change="handleChange" </el-row>
:step="10" <el-row :gutter="10" class="row create-button" style="margin-right:0;">
:min="10" <el-button type="primary" size="small" @click="createComponent">新建项目组件</el-button>
:max="100"> </el-row>
</el-input-number> <el-table :data="tableData" style="width: 100%">
</el-form-item> <el-table-column prop="name" label="ID编号" min-width="150" align="center"></el-table-column>
</el-form> <el-table-column prop="name" label="组件名称" min-width="150" align="center"></el-table-column>
</div> <el-table-column prop="name" label="发起人" min-width="150" align="center"></el-table-column>
<div v-if="stepNum == 2"> <el-table-column prop="name" label="状态" min-width="150" align="center"></el-table-column>
<div class="model-btn"> <el-table-column label="操作" fixed="right" align="center" min-width="200">
<el-button type="primary" size="small" @click="addModule">添加空白模块</el-button> <template slot-scope="scope">
<el-button type="primary" size="small" @click="addFromModule" style="margin-left:0;">从模块添加</el-button> <el-button type="primary" size="small">编辑</el-button>
</div> <el-button type="primary" size="small" disabled>启用</el-button>
<div class="tab-content"> <el-button type="primary" size="small">禁用</el-button>
<el-tabs type="card" v-model="firstTab" editable @tab-click="handleClick"> <el-button type="primary" size="small">删除</el-button>
<el-tab-pane v-for="(item,index) in componentList.moduleList" :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'> </template>
<div> </el-table-column>
<el-form ref="moduleForm" :model="item" :rules="rules" label-suffix=":" label-width="130px" style="width:100%;"> </el-table>
<el-row> <!-- 分页 -->
<el-col :span="10"> <div class="pagination">
<el-form-item label="模块名称" prop="name"> <el-pagination
<el-input v-model="item.name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input> background
</el-form-item> @size-change="handleSizeChange"
</el-col> @current-change="handleCurrentChange"
<el-col :span="10"> :current-page="searchParam.pageNo"
<el-form-item label="是否对外开放" prop="openFlag"> :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
<el-radio-group v-model="openLable" @change="selectIsOpen"> :page-size="searchParam.pageSize"
<el-radio label="是"></el-radio> layout="total, sizes, prev, pager, next, jumper"
<el-radio label="否"></el-radio> :total="totalRows">
</el-radio-group> </el-pagination>
</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(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>
<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="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>
<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="item2.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 课程 -->
<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="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="item3.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div> </div>
</div> </div>
<el-dialog :title="dialogTitle" :visible.sync="columnFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form ref="resourceForm" class="creat-form" :model="selectResource" label-width="125px" label-suffix=":" size="mini">
<el-form-item label="请选择一个资源包" prop="">
<el-select v-model="selectResource.resourceModuleSelect" @change="selectChange" placeholder="请选择资源包" style="width:60%;">
<el-option
v-for="(item,index) in resourceArray"
:key="index"
:label="item.lecturerName"
:value="item.lecturerId">
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-form ref="selectModuleForm" class="module-form" :model="selectModuleForm" label-width="75px" label-suffix=":" size="mini">
<el-form-item label="考试名称">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
<el-form-item label="配置证书">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
<el-form-item label="课程名称">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
<el-form-item label="配置证书">
<el-input v-model="selectModuleForm.test"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from '../../components/breadcrumb.vue' import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniuUtil" import { doUpload, getFilePath } from "../../utils/qiniuUtil"
import { validateWord } from "../../utils/validate.js"
let vm = null let vm = null
export default { export default {
components: { components: {
...@@ -222,75 +75,27 @@ export default { ...@@ -222,75 +75,27 @@ export default {
}, },
data() { data() {
return { return {
columnFormVisible: false,
stepNum: 1,
dialogTitle: '调用资源包',
curmbFirst: '教培项目', curmbFirst: '教培项目',
curmbSecond: '项目组件', curmbSecond: '项目组件',
curmbThird: '新增项目组件', searchParam: {
jumPathThird: '{ path: '+'/item-component'+' }',
firstTab: '1',
openLable: '是',
editableTabs: [{
title: '模块 1',
name: '1'
}],
componentList: {
name: '', name: '',
id: '', status: ''
introduce: '',
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书
certificateCondition: '60',
moduleList: [{
name: '',
openFlag: '', // 1不开放 2开放
templateList: []
}]
},
resourceArray: [],
selectResource: {
resourceModuleSelect: ''
},
selectModuleForm: {
test: '否'
}, },
statuSelect: [],
tableData: [],
totalRows: 0,
basicRule: { basicRule: {
"name": [ "name": [
{ required: true, message: '请输入组件名称', trigger: 'blur' }, { required: true, message: '输入长度为2-20个中文', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateWord(rule, value, callback, '输入长度为2-20个中文')
},
trigger: 'blur' }
], ],
"introduce": [ "introduce": [
{ required: true, message: '请输入组件简介', trigger: 'blur' }, { required: true, message: '请输入组件简介', trigger: 'blur' },
], ],
"imageUrl": [
{ required: true, message: '请上传组件图片', trigger: 'blur' },
],
"certificateId": [
{ required: true, message: '请选择是否配置证书', trigger: 'blur' },
],
"certificateId": [
{ required: true, message: '请选择证书', trigger: 'blur' },
],
"certificateCondition": [
{ required: true, message: '请选择获得证书完成率', trigger: 'blur' },
]
},
rules: {
"name": [
{ required: true, message: '请输入模块名称', trigger: 'blur' },
],
"openFlag": [
{ required: true }
]
},
templateRules: {
"name": [
{ required: true, message: '请输入考试名称', trigger: 'blur' },
],
"id": [
{ required: true, message: '请输入考试id', trigger: 'blur' },
],
} }
} }
...@@ -299,317 +104,34 @@ export default { ...@@ -299,317 +104,34 @@ export default {
vm = this vm = this
}, },
methods: { methods: {
// 暂存 // 新建组件
justStorage() { createComponent() {
vm.$router.push({path: 'create-component'})
}, },
// 下一步 handleSizeChange() {
nextStep() {
vm.stepNum = 2
},
// 上传组件图片
beforeAvatarUpload(file) {
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
vm.componentList.imageUrl = path.fullPath
vm.$message.success('上传成功')
});
},
// 获取组件完成率
handleChange(value) {
}, },
// 是否对外开放 handleCurrentChange() {
selectIsOpen() {
},
// tab点击
handleClick(tab,event) {
},
// 添加空白模块
addModule() {
let seq = vm.componentList.moduleList.length + 1
vm.componentList.moduleList.push({
name: '',
openFlag: '', // 1不开放 2开放
templateList: []
})
},
// 从模板中添加
addFromModule() {
vm.columnFormVisible = true
},
// 添加单个考试
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: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
// 添加单个课程
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: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 1, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
//摸底考试后培训
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: '', // 新增时为空
seqNo: '',
conditionFlag: 1, // 1为没有限制 2有限制
numFlag: 2, // 1为单个 2为可以无限添加
templetSeqNo: '',
partContentList: [{
}]
}]
})
}
}
},
// 培训后考试
addTrainTest() {
},
// 摸底考试获得资格，培训再次考试
addMatterTrain() {
},
// 删除模板
deleteTemplate(index,index1) {
for(let i = 0; i < vm.componentList.moduleList.length; i++) {
if(index == i) {
vm.componentList.moduleList[i].templateList.splice(index1,1)
}
}
},
// 添加多个课程
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: '',
content_1: '',
content_2: ''
})
}
}
}
}
}
}
},
// 删除多个课程
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)
}
}
}
}
}
}
},
sortUp(index,index1) {
},
sortDown(index,index1) {
},
// 选择资源包
selectChange() {
},
// 完成
finishConponent() {
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.create-component-wrap { .item-component-wrap {
.first-step { .component-content {
margin-top: 20px;
.el-form-item {
margin-bottom: 25px;
}
.bg-img {
width: 84px;
height: 100px;
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.bg-uploader {
img {
float: left;
}
.limit-text {
float: left;
margin-left: 10px;
padding-top: 20px;
p {
font-size: 12px;
color: #999;
}
}
}
}
.step-content {
overflow: hidden;
height: 60px;
margin-top: 50px; margin-top: 50px;
border-bottom: 1px solid #efefef; padding: 10px;
.el-steps--simple { .title {
float: left; padding: 10px 12px;
padding: 20px 0 0 5%; font-size: 12px;
width: 20%; color: #409EFF;
background: #fff; border-bottom: 1px solid #efefef;
.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;
}
.template-content-div {
margin: 20px;
border-bottom: 1px dotted #ccc;
.title {
margin-bottom: 20px;
span {
float: right;
color: #666;
font-size: 12px;
}
}
}
.matter-test,.train-test, .matter-train-test{
.tip {
font-size: 12px;
color: #aaa;
margin-left: 57px;
margin-bottom: 20px;
}
}
}
.module-form {
.el-input__inner {
border: none;
} }
.el-select .el-input__inner{ .create-button {
border: 1px solid #dcdfe6; padding: 0 0 15px;
margin-top: 0 !important;
text-align: right;
} }
} }
} }
......
src/views/layout/header.vue
浏览文件 @ a3dffc28
<template> <template>
<div class="header-container"> <div class="header-container">
<div class="logo"><img src="../../assets/image/index_logoicon.png"/>项目管理平台</div> <div class="logo"><img src="../../assets/image/index_logoicon.png"/>云鹊医工作站</div>
<div class="user-info"> <div class="user-info">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<div class="el-dropdown-link"> <div class="el-dropdown-link">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或