Skip to content

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

新需求等

上级 568778d2
隐藏空白字符变更
内嵌 并排
正在显示 包含 1669 行增加 和 60 行删除
src/views/education/create-component copy.vue 0 → 100644
浏览文件 @ a883b16d
<template>
<div class="create-component-wrap">
<bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond"
:curmbThird="curmbThird"
:jumPathThird="jumPathThird">
</bread-crumb>
<div class="create-content screenSet" id="screenSet">
<div class="step-content">
<el-steps :active="stepNum" simple>
<span class="step-one" :class="stepNum == 1 ? 'class-1' : 'class-2'">1</span>
<el-step title="基础信息" :class="stepNum == 1 ? 'class-1-text' : 'class-2-text'"></el-step>
<span class="step-two" :class="stepNum == 2 ? 'class-1' : 'class-2'">2</span>
<el-step title="选择模块" :class="stepNum == 2 ? 'class-1-text' : 'class-2-text'"></el-step>
</el-steps>
<div class="btn-container">
<el-button v-if="stepNum == 1 && (componentStatus == 1 || !componentStatus)" @click="storageAndNext(1)" type="default" size="small">暂存</el-button>
<el-button v-if="stepNum == 1" @click="storageAndNext(2)" type="primary" size="small" style="margin-left:0;">下一步</el-button>
<el-button v-if="stepNum == 2 && (componentStatus == 1 || !componentStatus)" :disabled="newconditionSelect" @click="finishConponent(1)" type="default" size="small">暂存</el-button>
<el-button v-if="stepNum == 2" @click="finishConponent(2)" :disabled="newconditionSelect" 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="portalComponent" :rules="rules" label-width="175px" label-suffix=":" size="small" style="margin-bottom:30px;">
<el-form-item label="组件名称" prop="name">
<el-input type="text" v-model="portalComponent.name" @blur="componentName" size="small" placeholder="请输入组件名称" style="width:30%;"></el-input>
<span class="word-num">{{(portalComponent.name).replace(/\s+/g,"").length}}/20</span>
<p class="component-name" v-if="isStorage">输入组件名称</p>
</el-form-item>
<el-form-item label="组件简介" prop="introduce">
<el-input type="textarea" rows="4" cols="10" v-model="portalComponent.introduce" size="small" placeholder="请输入组件简介" style="width:37%;"></el-input>
<span class="word-num">{{(portalComponent.introduce).replace(/\s+/g,"").length}}/150</span>
</el-form-item>
<!-- <div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="组件图片" prop="imageUrl">
<el-upload
v-model="portalComponent.imageUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="portalComponent.imageUrl" @mouseover.stop="imgMouseOver=true" :src="portalComponent.imageUrl" class="bg-img">
<img v-if="!portalComponent.imageUrl" class="bg-img" src="../../assets/image/small.png">
<div class="img-delete" v-show="imgMouseOver" @click.stop="deleteImg" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
<div class="limit-text">
<p>尺寸大小:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请上传组件图片</p>
</div> -->
<el-form-item label="组件内的模块完成比率须≥" prop="certificateCondition">
<el-input-number
v-model="portalComponent.certificateCondition"
controls-position="right"
@change="handleChange"
:disabled="componentStatus == 3 || componentStatus == 4"
:precision="0"
:step="1"
:min="0"
:max="100">
</el-input-number>
</el-form-item>
<el-row>
<el-col :span="8">
<div class="basic-item-icon">
<el-form-item label="配置证书" required>
<el-radio-group v-model="certificateLable" @change="selectCertificate" :disabled="componentStatus == 3 || componentStatus == 4">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-col>
<el-col :span="10" v-if="hasCertificate">
<el-form-item label="选择证书" prop="certificateId">
<el-select v-model="portalComponent.certificateId" @change="selectChange" :disabled="componentStatus == 3 || componentStatus == 4" placeholder="请选择证书" style="width: 352px;">
<el-option
v-for="(item,index) in certificateIdSelect"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="" v-if="stepNum == 2">
<div class="model-btn">
<el-button v-if="idType == 1" :disabled="conditionSelect" type="primary" size="small" @click="addModule">添加空白模块</el-button>
<el-button :disabled="conditionSelect" type="primary" size="small" @click="addFromModule" style="margin-left:0;">从预设模块添加</el-button>
</div>
<div class="tab-content">
<el-tabs type="card" v-model="firstTab" :closable="!conditionSelect" @tab-remove="removeTab">
<el-tab-pane class="sort-tabs" v-for="(item,index) in componentList.moduleModelList" :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'>
<div>
<el-form ref="moduleForm" :model="item" :rules="moduleRules" 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" @blur="moduleNameValidate(index)" :disabled="fieldDisabled(item)" size="small" placeholder="请选择模块名称" 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-input v-model="item.name" @blur="moduleNameValidate(index)" :disabled="fieldDisabled(item)" size="small" placeholder="请选择模块名称" style="width:288px;"></el-input>
</el-form-item>
</el-col> -->
<el-col :span="8" v-if="idType == 1">
<el-form-item label="是否对外开放" prop="openFlag">
<el-radio-group v-model="item.openFlag" @change="selectIsOpen(index)" :disabled="fieldDisabled(item) || item.openDisabled">
<el-radio :label="2">是</el-radio>
<el-radio :label="1">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8" v-if="idType == 1">
<el-form-item label="通过标准" prop="passType">
<el-radio-group v-model="item.passType" @change="selectStandard(index)" :disabled="fieldDisabledStandard(item)">
<el-radio :label="1">全部完成</el-radio>
<el-radio :label="2">无要求</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6" v-if="idType == 1">
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="item.status" @change="selectIsOpenStatus(index)" :disabled="fieldDisabled(item)">
<el-radio :label="2">是</el-radio>
<el-radio :label="1">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="template-btn" v-if="idType == 1">
<span class="word-size">添加一个模板</span>
<el-button
:disabled="fieldDisabled(item)"
v-for="(_item,_index) in templateDataList"
:key="_index"
type="primary"
size="small"
@click="addTemplate(_item,index)"
style="margin-right:0px;">{{_item.name}}</el-button>
</div>
<div v-for="(item1,index1) in item.templetModelList" :key="index1">
<el-form ref="templateForm" :model="item1" label-suffix=":" label-width="110px" style="width:100%;">
<div class="template-content">
<div class="template-content-div">
<div class="title">
{{item1.name}}
<span v-if="newfieldDisabled(item)">
变更顺序:
<i class="el-icon-caret-bottom" @click="sortUp(index,index1)" style="font-size:17px;"></i>
<i class="el-icon-caret-top" @click="sortDown(index,index1)" style="font-size:17px;"></i>
<i class="el-icon-delete" @click="deleteTemplate(index,index1)" style="color:red;"></i>
</span>
</div>
<div v-for="(item2,index2) in item1.partModelList" :key="index2">
<!-- 考试 -->
<div v-if="item2.type == 1">
<div class="partText" v-if="index2 > 0">{{item2.introduce}}</div>
<div v-for="(item3,index3) in item2.partContentModelList" :key="index3">
<el-row>
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="考试名称">
<el-input v-model="item3.content1" :disabled="fieldDisabled(item)" size="small" maxlength='30' placeholder="请输入考试名称" style="width:288px;"></el-input>
<span v-if="newfieldDisabled(item) && item2.numFlag == 2 && index3 == 0 "><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
<span v-if="newfieldDisabled(item) && 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" class="item-icon">
<span class="require">*</span>
<el-form-item label="关联考试">
<el-select placeholder="请选择" v-model="item3.content3" @focus="examIDfocus(index,index1,index2,index3)" @change="handleExamTypeChange" size="small" :disabled="fieldDisabled(item)">
<el-option
v-for="(examItem, examTypeIndex) in examTypeList"
:key="examTypeIndex"
:label="examItem.text"
:value="examItem.type">
</el-option>
</el-select>
<el-select v-model="item3.content2" filterable @focus="examIDfocus(index,index1,index2,index3)" @change="changeExamID" :disabled="fieldDisabled(item)" size="small" placeholder="请选择考试ID" style="width:288px;">
<!-- 所有考试 列表-->
<template v-if="item3.content3 == 0">
<el-option
v-for="(itemTest,indexTest) in testIdSelect"
:key="indexTest"
:label="itemTest.onlineExamName"
:value="itemTest.id + ''">
</el-option>
</template>
<!-- 需审核考试 列表 -->
<template v-if="item3.content3 == 1">
<el-option
v-for="(itemTest,indexTest) in examSelectList"
:key="indexTest"
:label="itemTest.onlineExamName"
:value="itemTest.id + ''">
</el-option>
</template>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="配置证书">
<el-radio-group v-model="item3.certificateFlag" :disabled="fieldDisabled(item)">
<el-radio :label="2">是</el-radio>
<el-radio :label="1">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="10" v-if="item3.certificateFlag == 2" class="item-icon">
<span class="require">*</span>
<el-form-item label="选择证书">
<el-select v-model="item3.content4" :disabled="fieldDisabled(item)" size="small" placeholder="请选择证书" style="width:288px;">
<el-option
v-for="(itemCertificate,indexCertificate) in certificateIdSelect"
:key="indexCertificate"
:label="itemCertificate.name"
:value="itemCertificate.id + ''">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!-- 课程 -->
<div v-if="item2.type == 2">
<div class="partText" v-if="index2 > 0">{{item2.introduce}}</div>
<div class="sortable-course">
<el-row v-for="(item3,index3) in item2.partContentModelList" :key="index3">
<el-col :span="10" class="item-icon">
<span class="require">*</span>
<el-form-item label="课程名称">
<el-input v-model="item3.content1" :disabled="fieldDisabled(item)" size="small" maxlength='30' placeholder="请输入课程名称" style="width:288px;"></el-input>
<span v-if="newfieldDisabled(item) && item2.numFlag == 2 && index3 == 0"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
<span v-if="newfieldDisabled(item) && 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" class="item-icon">
<span class="require">*</span>
<el-form-item label="关联课程">
<el-select v-model="item3.content2" filterable @focus="courseIDfocus(index,index1,index2,index3)" @change="changeCourseID" :disabled="fieldDisabled(item)" size="small" placeholder="请选择课程ID" style="width:288px;">
<el-option
v-for="(itemCourse,indexCourse) in courseIdSelect"
:key="indexCourse"
:label="itemCourse.name"
:value="itemCourse.id + ''">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="是否有试看限制">
<el-radio-group v-model="item3.content5">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
<!-- <el-radio-group v-if="!item3.content5" v-model="item3.content5">
<el-radio label="1">是</el-radio>
<el-radio label=null>否1</el-radio>
<el-radio label=undefind>否1</el-radio>
</el-radio-group> -->
</el-form-item>
</el-col>
<el-col :span="10" v-if="item3.content5 == 1">
<el-form-item label="试看时长">
<el-input maxlength="8" type="input" rows="4" v-model="item3.content6" size="small" placeholder="请输入试看时长" style="width:300px"></el-input>
<span class="word-num">(秒)</span>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
</el-form>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</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="145px" label-suffix=":" size="small">
<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.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="default-module" v-for="(item,index) in dialogData.templetModelList" :key="index">
<el-form ref="dialogEmplateForm" label-suffix=":" label-width="80px" style="width:100%;">
<div class="dialog-template-content">
<div v-for="(item1,index1) in item.partModelList" :key="index1">
<!-- 考试 -->
<div v-if="item1.type == 1">
<div v-for="(item2,index2) in item1.partContentModelList" :key="index2">
<el-row>
<el-col :span="10">
<el-form-item label="考试名称">
<span>{{item2.content1}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="配置证书">
<span v-if="item2.certificateFlag == 2">是</span>
<span v-else>否</span>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<!-- 课程 -->
<div v-if="item1.type == 2">
<el-row v-for="(item2,index2) in item1.partContentModelList" :key="index2">
<el-col :span="10">
<el-form-item label="课程名称">
<span>{{item2.content1}}</span>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</div>
</el-form>
</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/qiniu-util";
// import { validateWord150 } from "../../utils/validate.js"
import { mapGetters } from 'vuex';
import { openLoading, closeLoading, isNotEmptyUtils, isEmptyList, isNotEmptyList } from '../../utils/utils';
import * as commonUtil from '../../utils/utils';
import Sortable from 'sortablejs'
let vm = null
// 判断组件是否重名
let validateRepeatWord = function(rule, value, callback, message) {
let req = {
token: vm._token,
name: value,
idType: vm.idType, // 1内部 2外部
id: null || vm.componentId
}
if(vm.itemName != value) {
vm.GET('portal/portalComponent/checkComponentName',req).then((res) => {
if(res.code == '000000') {
if(res.data.resultFlag == 2) {
callback(new Error(message))
}else {
callback()
}
}
})
}else {
callback()
}
}
// 判断模块是否重名(对外开放时候验证)
let validateModuleName = function(rule, value, callback, message) {
for(let i = 0;i<vm.componentList.moduleModelList.length;i++) {
if(vm.firstTab == parseInt(i + 1)) {
vm.GET('portal/portalComponent/checkModuleName',{name: value,openFlag: vm.componentList.moduleModelList[i].openFlag}).then((res) => {
if(res.code == '000000') {
if(res.data > 0) {
vm.componentList.moduleModelList[i].name = ''
callback(new Error(message))
return
}else {
callback()
}
}
})
break
}
}
}
export default {
components: {
BreadCrumb
},
data() {
return {
columnFormVisible: false,
uploadImgMessage: false,
imgMouseOver: false,
itemName: '',
examName: '',
examIndex: '',
examIndex1: '',
examIndex2: '',
examIndex3: '',
courseName: '',
courseIndex: '',
courseIndex1: '',
courseIndex2: '',
courseIndex3: '',
stepNum: 1,
componentId: '',
componentStatus: '',
resultFlag: '',
conditionSelect: false,
newconditionSelect: false,
conditionAnd: true,
isStorage: false,
dialogTitle: '选择模板',
curmbFirst: '教培项目',
curmbSecond: '项目组件',
curmbThird: '新增项目组件',
jumPathThird: '/item-component',
firstTab: '1',
hasCertificate: false,
certificateLable: '否',
portCertificateLable: '否',
moduleIndex: '',
editableTabs: [{
title: '模块 1',
name: '1'
}],
templateDataList: [],
templetIndex: 0,
examTypeList: [ // 考试类型： 0所有考试 1需审核考试
{ text: '所有考试', type: '0' },
{ text: '需审核考试', type: '1' },
],
testIdSelect: [], // 考试ID下拉列表 （所有考试）
examSelectList: [], // 考试ID下拉列表 （需审核考试）
certificateIdSelect: [], // 证书下拉列表
courseIdSelect: [], // 课程下拉列表
dialogData: [],
portalComponent: {
idType: '',
organizationId: '',
name: '',
id: '',
introduce: '',
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书,配置证书为否
certificateCondition: '100', // 证书完成率
status: ''
},
componentList: {
moduleModelList: [{
id: '',
name: '',
openFlag: '', // 1 否 不开放 2 是 开放,
passType:'1',//1：全部完成 2：无要求
templetModelList: []
}]
},
resourceArray: [],
selectResource: {
resourceModuleSelect: ''
},
rules: {
"name": [
{ required: true, message: '输入组件名称', trigger: 'blur' },
{ min: 2, max: 20, message: '输入长度为2-20个字符', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateRepeatWord(rule, value, callback, '该组件名称已存在，请使用一个新的组件名称')
},
trigger: 'blur' }
],
"introduce": [
{ required: true, message: '请输入组件简介', trigger: 'blur' },
{ min: 1, max: 151, message: '超出可输入的最大长度', trigger: 'blur' }
],
"certificateId": [
{ required: true, message: '请选择证书', trigger: 'blur' },
],
"certificateCondition": [
{ required: true, message: '请输入内容', trigger: 'blur' },
]
},
moduleRules: {
"name": [
{ required: true, message: '请输入模块名称', trigger: 'blur' },
{ min: 2, max: 40, message: '输入长度为2-40个字符', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateModuleName(rule, value, callback, '模块名称已存在，请修改名称后保存')
},
trigger: 'blur' }
],
"openFlag": [
{ required: true, message: '请选择是否对外开放', trigger: 'blur' }
],
"stauts": [
{ required: true, message: '请选择是否启用', trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters([
'_token',
'idType'
])
},
created() {
console.log("#######==========#####")
vm = this
vm.componentId = vm.$route.query.id;
vm.componentStatus = vm.$route.query.status; // 3 启用 4 禁用
vm.resultFlag = vm.$route.query.resultFlag; // 判断可编辑范围是基础信息还是全部信息 1 为全部 2 为基础
vm.getCertificateList(); // 获取证书列表
vm.componentBasicInfo(); // 根据ID查询组件基本信息
vm.getTestListData(); // 获取考试列表
vm.getCourseData(); // 获取课程列表
vm.getTemplateData(); // 获取模板信息
vm.conditionSelect = vm.resultFlag == 2 || vm.componentStatus == 3 || vm.componentStatus == 4
// vm.conditionSelect = vm.resultFlag == 2 || vm.componentStatus == 4
vm.newconditionSelect = vm.componentStatus == 4
if(vm.componentStatus && vm.resultFlag) {
//vm.conditionAnd = vm.resultFlag == 1 && vm.componentStatus != 3 && vm.componentStatus != 4
vm.conditionAnd = vm.componentStatus != 4
}
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight()
console.log('idType==>',vm.idType)
setTimeout(() => {
this.tabDrop();
// this.courseDrop();
}, 10000);
},
methods: {
// 模块可以拖动排序
tabDrop() {
this.$nextTick(function() {
const ele = document.querySelector('.tab-content .el-tabs__nav');
console.log('########ele', ele);
Sortable.create(ele, {
onEnd({ newIndex, oldIndex }) {
console.log(newIndex, oldIndex);
// const currRow = vm.tagsComponent.splice(oldIndex, 1)[0]
// vm.tagsComponent.splice(newIndex, 0, currRow)
}
})
});
},
// 课程可以拖动排序
courseDrop() {
const ele = document.querySelector('.sortable-course');
console.log('########ele', ele);
Sortable.create(ele, {
onEnd({ newIndex, oldIndex }) {
console.log(newIndex, oldIndex);
// const currRow = vm.tagsComponent.splice(oldIndex, 1)[0]
// vm.tagsComponent.splice(newIndex, 0, currRow)
}
})
// sortable-course
},
// 根据ID查询组件基本信息
componentBasicInfo() {
if(vm.componentId) {
openLoading(vm)
vm.GET('portal/portalComponent/queryPortalComponentById',{id: vm.componentId}).then((res) => {
closeLoading(vm)
if( res.code == '000000') {
vm.portalComponent = res.data.portalComponent
vm.itemName = vm.portalComponent.name
if(!vm.portalComponent.certificateId) {
vm.hasCertificate = false
vm.certificateLable = '否'
} else {
vm.hasCertificate = true
vm.certificateLable = '是'
}
}
})
}
},
selectStandard(index){
},
// 删除图片
deleteImg() {
vm.portalComponent.imageUrl = ''
vm.imgMouseOver = false
},
// 是否配置证书
selectCertificate(val) {
vm.portalComponent.certificateId = ''
if(val == '否') {
vm.hasCertificate = false
//vm.portalComponent.certificateCondition = 0
}else{
vm.hasCertificate = true
//vm.portalComponent.certificateCondition = 100
}
vm.portalComponent.certificateCondition = 100
},
// 获取组件完成率
handleChange(value) {
console.log(value)
if(value == 1){
}
vm.portalComponent.certificateCondition = value
},
// 获取证书下拉列表
getCertificateList() {
vm.GET('portal/portalComponent/CertificateList').then((res) => {
if( res.code == '000000') {
vm.certificateIdSelect = res.data.certificateList
}else {
vm.$message.info(res.message)
}
})
},
// 暂存(下一步)
storageAndNext(flag) {
if(vm.componentId) { // 编辑
vm.submitBasicData(flag,'portal/portalComponent/updatePortalComponent')
}else{ // 新增
vm.submitBasicData(flag,'portal/portalComponent/insertPortalComponent')
}
},
submitBasicData(flag,url) {
if(flag == 1) { // 暂存
vm.portalComponent.status = 1
if(!vm.portalComponent.name) {
vm.isStorage = true
return
}else{
vm.isStorage = false
}
vm.submitBasic(flag,url)
}else{ // 下一步
vm.isStorage = false
if(!vm.componentId) {
vm.portalComponent.status = 1
}
if(!vm.portalComponent.imageUrl) {
vm.uploadImgMessage = true
// return
} else {
vm.uploadImgMessage = false
}
vm.$refs.basicInfoForm.validate((valid) => {
if (valid) {
vm.submitBasic(flag,url)
} else {
return false
}
})
}
},
componentName() {
vm.isStorage = false
},
submitBasic(flag,url) {
let req = {
token: vm._token,
name: vm.portalComponent.name,
idType: vm.idType, // 1内部 2外部
id: null || vm.componentId
}
if(vm.portalComponent.name != vm.itemName) {
vm.GET('portal/portalComponent/checkComponentName',req).then((res) => {
if(res.code == '000000') {
if(res.data.resultFlag == 2) {
vm.$message.info("该组件名称已存在，请使用一个新的组件名称")
return
}else {
vm.portalComponent.idType = vm.idType
vm.portalComponent.id = vm.componentId
vm.POST(url,{ model: vm.portalComponent }).then((res) => {
if( res.code == '000000') {
if(!vm.componentId) {
vm.componentId = res.data
}
if(flag == 2) {
vm.stepNum = 2
//vm.getTemplateData()
vm.getModuleData()
// vm.getTestListData()
// vm.getCourseData()
} else {
vm.$message.info("暂存成功！")
}
}
})
}
} else {
vm.$message.info(res.message)
}
})
}else {
vm.portalComponent.idType = vm.idType
vm.portalComponent.id = vm.componentId
vm.POST(url,{ model: vm.portalComponent }).then((res) => {
if( res.code == '000000') {
if(!vm.componentId) {
vm.componentId = res.data
}
if(flag == 2) {
vm.stepNum = 2
//vm.getTemplateData()
vm.getModuleData()
// vm.getTestListData()
// vm.getCourseData()
} else {
vm.$message.info("暂存成功！")
}
}
})
}
},
// 上传组件图片
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if ( !isJPG && !isPNG && !isLt2M ) {
vm.$message.error('图片不符合规范，请根据规范上传图片')
return;
}
let _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 750 || _this.height != 420) {
vm.$message.info('图片不符合规范，请根据规范上传图片')
}else {
openLoading(vm)
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
closeLoading(vm)
vm.portalComponent.imageUrl = path.fullPath
vm.uploadImgMessage = false
});
}
}
}
},
// 获取考试下拉列表
getTestListData() {
vm.GET('portal/portalComponent/OnlineExamList').then((res) => {
if( res.code == '000000') {
vm.testIdSelect = res.data.onlineExamList;
vm.testIdSelect.unshift({
id: 0,
onlineExamName: '无考试'
})
for(let i=0; i<vm.testIdSelect.length; i++) {
let type = vm.testIdSelect[i].isNeedApproval; // isNeedApproval: 0 全部考试 1 需审核考试
if( type && type == 1 ) {
vm.examSelectList.push( vm.testIdSelect[i] )
}
}
}else {
vm.$message.info(res.message)
}
})
},
// 考试种类切换 清空考试选择
handleExamTypeChange(value) {
vm.componentList.moduleModelList[vm.examIndex].templetModelList[vm.examIndex1].partModelList[vm.examIndex2].partContentModelList[vm.examIndex3].content2 = '';
},
// 根据考试ID填充考试名称
changeExamID(value) {
let examName = ''
for(let i = 0;i<vm.testIdSelect.length;i++) {
if(value == vm.testIdSelect[i].id) {
examName = vm.testIdSelect[i].onlineExamName
}
}
if(!vm.componentList.moduleModelList[vm.examIndex].templetModelList[vm.examIndex1].partModelList[vm.examIndex2].partContentModelList[vm.examIndex3].content1) {
vm.componentList.moduleModelList[vm.examIndex].templetModelList[vm.examIndex1].partModelList[vm.examIndex2].partContentModelList[vm.examIndex3].content1 = examName
}
},
examIDfocus(index,index1,index2,index3) {
vm.examIndex = index
vm.examIndex1 = index1
vm.examIndex2 = index2
vm.examIndex3 = index3
},
// 获取课程下拉列表
getCourseData() {
vm.GET('portal/portalComponent/CourseList').then((res) => {
if( res.code == '000000') {
vm.courseIdSelect = res.data.courseList
vm.courseIdSelect.unshift({
id: 0,
name: '无课程'
})
}else {
vm.$message.info(res.message)
}
})
},
// 根据课程ID填充课程名称
changeCourseID(value) {
let courseName = ''
for(let i = 0;i<vm.courseIdSelect.length;i++) {
if(value == vm.courseIdSelect[i].id) {
courseName = vm.courseIdSelect[i].name
}
}
if(!vm.componentList.moduleModelList[vm.courseIndex].templetModelList[vm.courseIndex1].partModelList[vm.courseIndex2].partContentModelList[vm.courseIndex3].content1) {
vm.componentList.moduleModelList[vm.courseIndex].templetModelList[vm.courseIndex1].partModelList[vm.courseIndex2].partContentModelList[vm.courseIndex3].content1 = courseName
}
},
courseIDfocus(index,index1,index2,index3) {
vm.courseIndex = index
vm.courseIndex1 = index1
vm.courseIndex2 = index2
vm.courseIndex3 = index3
},
// 获取默认模板
getTemplateData() {
vm.GET('portal/portalComponent/TempletConfigList').then((res) => {
if( res.code == '000000') {
vm.templateDataList = res.data.templetConfigModelList
}else {
vm.$message.info(res.message)
}
})
},
// 通过编辑获取模块信息
getModuleData() {
vm.GET('portal/portalComponent/ModuleList',{componentId: vm.componentId}).then((res) => {
if( res.code == '000000') {
vm.componentList.moduleModelList = res.data.moduleModelList
vm.setOpenStatusFromData(vm.componentList.moduleModelList)
}else {
vm.$message.info(res.message)
}
})
},
// 从接口数据的status判断启用状态
setOpenStatusFromData(list){
// 1模块未启用 2模块已启用
for(let i=0;i<list.length;i++){
if(list[i].status == 2){
vm.componentList.moduleModelList[i].statusFlag = true;
}else{
vm.componentList.moduleModelList[i].statusFlag = false;
vm.componentList.moduleModelList[i].openDisabled = true;
}
}
},
fieldDisabledStandard(item){
return (vm.componentStatus == 3 || vm.componentStatus == 4 );
},
fieldDisabled(item){
// return vm.conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || vm.idType == 2 || item.statusFlag
// return vm.newconditionSelect || item.moduleType == 2 || vm.idType == 2 || (vm.componentStatus != 1 && vm.componentStatus != 2 && item.statusFlag);
},
newfieldDisabled(item) {
//conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.status == 1)) && idType == 1
// return vm.conditionAnd && ((vm.componentStatus == 1 || vm.componentStatus == 2) || ((vm.componentStatus != 1 || vm.componentStatus != 2) && !item.statusFlag)) && item.moduleType == 1 && vm.idType == 1
},
// 选择是否启用状态
selectIsOpenStatus(index) {
const status = vm.componentList.moduleModelList[index].status;
if(status == 1){
vm.componentList.moduleModelList[index].openFlag = 1;
vm.componentList.moduleModelList[index].openDisabled = true;
}else{
vm.componentList.moduleModelList[index].openDisabled = false;
}
vm.$forceUpdate();
},
// 模块是否对外开放
selectIsOpen(index) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(vm.componentList.moduleModelList[i].name) {
vm.GET('portal/portalComponent/checkModuleName',{name: vm.componentList.moduleModelList[i].name,openFlag: vm.componentList.moduleModelList[i].openFlag}).then((res) => {
if(res.code == '000000') {
if(res.data > 0) {
vm.componentList.moduleModelList[i].name = ''
vm.$message.info("模块名称已存在，请修改名称后保存")
}
}
})
}
break
}
}
// const openFlag = vm.componentList.moduleModelList[index].openFlag;
// if(openFlag == 2){
//// vm.componentList.moduleModelList[index].openFlag = 1;
// vm.componentList.moduleModelList[index].statusFlag = true;
// }
// vm.$forceUpdate();
},
// 删除tab
removeTab(targetName) {
for(let i = 0;i<vm.componentList.moduleModelList.length;i++) {
if((targetName - 1) == i) {
if(isNotEmptyUtils(vm.componentList.moduleModelList[i].templetModelList)) { // 模板不为空
vm.$confirm('删除模块会将改模块下已有模板同时删除，确认需要删除吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(vm.componentList.moduleModelList[i].id != '' && vm.componentList.moduleModelList[i].moduleType == 1) {
vm.GET('portal/portalComponent/deletePortalModuleById',{id:vm.componentList.moduleModelList[i].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模块！')
}
vm.getModuleData()
vm.firstTab = i + ''
})
}else {
vm.componentList.moduleModelList.splice(i,1)
vm.firstTab = i + ''
}
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消删除'
})
})
}else {
if(vm.componentList.moduleModelList[i].id) {
vm.GET('portal/portalComponent/deletePortalModuleById',{id:vm.componentList.moduleModelList[i].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模块！')
}
vm.getModuleData()
vm.firstTab = i + ''
})
}else {
vm.componentList.moduleModelList.splice(i,1)
vm.firstTab = i + ''
}
}
break
}
}
},
// 添加空白模块
addModule() {
vm.componentList.moduleModelList.push({
id: '',
name: '',
openFlag: 1, // 1不开放 2开放
moduleType: 1, // 2为从预设模块中添加
status: 1, // 1 不启用 2启用
passType:1,
templetModelList: []
});
//vm.componentList.moduleModelList[(vm.componentList.moduleModelList.length - 1)].openDisabled = true;
},
// 添加模板
addTemplate(item,index) {
vm.templetIndex = vm.componentList.moduleModelList[index].templetModelList.length
vm.componentList.moduleModelList[index].templetModelList.push({
name: item.name,
type: item.type,
partModelList: []
})
for(let i = 0; i < item.partConfigModelList.length; i++) {
if(item.partConfigModelList[i].type == 1) { // 考试
vm.componentList.moduleModelList[index].templetModelList[vm.templetIndex].partModelList.push({
titleName: '',
type: 1, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: item.partConfigModelList[i].conditionFlag, // 1为没有限制 2有限制
numFlag: item.partConfigModelList[i].numFlag, // 1为单个 2为可以无限添加
templetSeqNo: '',
introduce: item.partConfigModelList[i].introduce,
partContentModelList: [{
certificateFlag: 1, // 是否有证书 1无 2有
id: '',
seqNo: '',
content1: '',
content2: '',
content3: '0',
content4: '',
content5: '0',
content6: '',
}]
})
}else if(item.partConfigModelList[i].type == 2) { // 课程
vm.componentList.moduleModelList[index].templetModelList[vm.templetIndex].partModelList.push({
titleName: '',
type: 2, // 1考试 2课程
name: '',
id: '', // 新增时为空
seqNo: '',
conditionFlag: item.partConfigModelList[i].conditionFlag, // 1为没有限制 2有限制
numFlag: item.partConfigModelList[i].numFlag, // 1为单个 2为可以无限添加
templetSeqNo: '',
introduce: item.partConfigModelList[i].introduce,
partContentModelList: [{
id: '',
seqNo: '',
content1: '',
content2: '',
content3: '0',
content4: '',
content5: '0',
content6: '',
}]
})
}
}
vm.templetIndex ++;
this.courseDrop();
},
// 删除模板
deleteTemplate(index,index1) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(vm.componentList.moduleModelList[i].templetModelList[index1].id) {
vm.GET('portal/portalComponent/deletePortalTemplateById',{id: vm.componentList.moduleModelList[i].templetModelList[index1].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模板！')
vm.getModuleData()
}
})
} else {
vm.componentList.moduleModelList[i].templetModelList.splice(index1,1)
}
break
}
}
},
// 添加多个课程
addMatterCourse(index,index1,index2) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
for(let j = 0; j < vm.componentList.moduleModelList[i].templetModelList.length; j++) {
if(index1 == j) {
for(let q = 0; q < vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length;q++){
if(index2 == q) {
vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList.push({
id: '',
seqNo: '',
content1: '',
content2: '',
content3: '0',
content4: '',
content5: '0',
content6: '',
})
break
}
}
break
}
}
break
}
}
},
// 删除多个课程(多个考试)元件
deleteMatterCourse(index,index1,index2,index3) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
for(let j = 0; j < vm.componentList.moduleModelList[i].templetModelList.length; j++) {
if(index1 == j) {
for(let q = 0; q < vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length;q++){
if(index2 == q) {
if(vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList[index3].id) {
vm.GET('portal/portalComponent/deletePortalPartById',{id: vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList[index3].id}).then((res) => {
if( res.code == '000000') {
vm.$message.info('成功删除模板元件内容！')
vm.getModuleData()
}
})
}else{
vm.componentList.moduleModelList[i].templetModelList[j].partModelList[q].partContentModelList.splice(index3,1)
}
break
}
}
break
}
}
break
}
}
},
// 模板下移
sortUp(index,index1) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(index1 != vm.componentList.moduleModelList[i].templetModelList.length - 1) { // 判断是最后一个不能下移
let temp = vm.componentList.moduleModelList[i].templetModelList[index1]
vm.$set(vm.componentList.moduleModelList[i].templetModelList,index1,vm.componentList.moduleModelList[i].templetModelList[index1 + 1])
vm.$set(vm.componentList.moduleModelList[i].templetModelList,parseInt(index1+1),temp)
}
break
}
}
},
// 模板下移
sortDown(index,index1) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index == i) {
if(index1 != 0) { // 判断是第一个不能上移
let temp = vm.componentList.moduleModelList[i].templetModelList[index1]
vm.$set(vm.componentList.moduleModelList[i].templetModelList,index1,vm.componentList.moduleModelList[i].templetModelList[index1 - 1])
vm.$set(vm.componentList.moduleModelList[i].templetModelList,parseInt(index1-1),temp)
}
break
}
}
},
// 模块名称失去焦点校验
moduleNameValidate(index) {
let moduleValue = vm.componentList.moduleModelList[index].name
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(index != i && vm.componentList.moduleModelList[i].name != '') {
if(moduleValue == vm.componentList.moduleModelList[i].name) {
vm.componentList.moduleModelList[index].name = ''
vm.$message.info('模块名称已存在，请修改名称后保存')
}
}
}
},
// 完成(暂存)
finishConponent(flag) {
let req = null
if(flag == 2) {
req = {
id: vm.componentId,
status: 2
}
}else {
req = {
id: vm.componentId,
status: 1
}
}
if(vm.componentList.moduleModelList && vm.componentList.moduleModelList.length > 0) {
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
if(flag == 2) { // 完成
if(!vm.componentList.moduleModelList[i].name) {
vm.$message.info("请输入模块名称")
return
}
if(isEmptyList(vm.componentList.moduleModelList[i].templetModelList) && vm.componentList.moduleModelList[i].status == 2 ) {
vm.$message.info("模块内容不能为空")
return
}
for(let j = 0; j < vm.componentList.moduleModelList[i].templetModelList.length; j++) {
for(let k = 0; k < vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length; k++) {
// 考试
if(vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].type == 1) {
if(!vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content1 || !vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content2) {
vm.$message.info( vm.componentList.moduleModelList[i].templetModelList[j].name + "中考试为空，请添加考试保存")
return
}
} else {
if(!vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content1 || !vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content2) {
vm.$message.info( vm.componentList.moduleModelList[i].templetModelList[j].name + "中课程为空，请添加课程保存")
return
}
}
}
}
}
vm.componentList.moduleModelList[i].componentId = vm.componentId
}
vm.finishModule(req,flag)
}else {
if(flag == 2) {
vm.$message.info("模块内容不能为空")
return
}else {
vm.finishModule(req,flag)
}
}
},
finishModule(req, flag) {
if(isNotEmptyList(vm.componentList.moduleModelList)) {
for(let i=0;i<vm.componentList.moduleModelList.length;i++) {
if(isNotEmptyList(vm.componentList.moduleModelList[i].templetModelList)) {
for(let j = 0;j<vm.componentList.moduleModelList[i].templetModelList.length;j++) {
for(let k=0;k<vm.componentList.moduleModelList[i].templetModelList[j].partModelList.length;k++) {
if(vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].type == 1) { // 考试
if(vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content4) {
for(let q = 0; q < vm.certificateIdSelect.length;q++) {
if(vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content4 == vm.certificateIdSelect[q].id) {
vm.componentList.moduleModelList[i].templetModelList[j].partModelList[k].partContentModelList[0].content3 = vm.certificateIdSelect[q].name
}
}
}
}
}
}
}
}
}
vm.$nextTick(() => {
for(let i=0;i<vm.componentList.moduleModelList.length;i++) {
if(!vm.componentList.moduleModelList[i].name) {
if(flag == 2) {
return
}
}
}
console.log(vm.componentList.moduleModelList)
vm.POST('portal/portalComponent/insertOrUpdatePortalModule',{model: vm.componentList.moduleModelList,status: flag}).then((res) => {
if( res.code == '000000') {
vm.enableComponent(req, flag)
}
})
})
},
// 启用
enableComponent(req, flag) {
vm.GET('portal/portalComponent/disableOrStart',req).then((res) => {
if(res.code == "000000") {
if(flag == 2) {
let query = {}
if(this.$route.query.pageNum){
query = {pageNum:this.$route.query.pageNum}
}
vm.$router.push({ path: 'item-component',query:query })
} else {
vm.$message.info("暂存成功！")
}
} else {
vm.$message({
message: res.message,
type: 'warning'
});
}
})
},
// 从资源包中添加模块
addFromModule() {
vm.columnFormVisible = true
vm.GET('portal/portalComponent/ModuleList',{openFlag: 2}).then((res) => {
if( res.code == '000000') {
vm.resourceArray = res.data.moduleModelList
for(let i = 0; i < vm.componentList.moduleModelList.length; i++) {
vm.compareArray(vm.componentList.moduleModelList[i].id)
}
}
})
},
compareArray(id) {
for(let j = 0; j < vm.resourceArray.length; j++) {
if( id == vm.resourceArray[j].id) {
vm.resourceArray.splice(j,1)
}
}
},
// 选择资源包
selectChange(val) {
if(vm.resourceArray && vm.resourceArray.length > 0) {
for(let i = 0; i < vm.resourceArray.length; i++) {
if(val == vm.resourceArray[i].id) {
vm.dialogData = vm.resourceArray[i]
break
}
}
}
},
// 确定选择预设模块
submitDialog() {
vm.columnFormVisible = false
if(isNotEmptyUtils(vm.dialogData)) {
vm.dialogData.moduleType = 2
vm.dialogData.mappingId = null
vm.componentList.moduleModelList.push(vm.dialogData)
vm.firstTab = vm.componentList.moduleModelList.length + ''
vm.dialogData = []
vm.selectResource.resourceModuleSelect = ''
}
}
}
}
</script>
<style lang="scss">
.create-component-wrap {
.create-content {
background: #fff;
}
.first-step {
padding-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;
}
}
}
.component-name {
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 1px;
position: absolute;
top: 100%;
left: 0;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 51px;
top: 4px;
color: #F56C6C;
}
.upload-message {
position: absolute;
left: 128px;
top: 105px;
font-size: 12px;
color: #F56C6C;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
}
.step-content {
overflow: hidden;
height: 60px;
border-bottom: 1px solid #efefef;
.el-step.is-simple .el-step__head {
display: none;
}
.class-1 {
color: #449284;
border: 1px solid #449284 !important;
}
.class-2 {
color: #999;
border: 1px solid #999 !important;
}
.class-1-text .el-step__title{
color: #449284 !important;
}
.class-2-text .el-step__title{
color: #999 !important;
}
.el-steps--simple {
float: left;
padding: 20px 0 0 5%;
width: 350px;
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: 34px;
height: 18px;
margin-top: 3px;
margin-right: 10px;
text-align: center;
}
}
.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;
}
}
.item-icon {
position: relative;
span.require {
position: absolute;
left: 37px;
top: 12px;
color: #F56C6C;
}
}
}
.matter-test,.train-test, .matter-train-test{
.tip {
font-size: 12px;
color: #aaa;
margin-left: 57px;
margin-bottom: 20px;
}
}
.partText {
font-size: 12px;
margin-left: 44px;
color: #999;
padding: 0px 0 15px;
}
}
.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: #449284;
font-size: 16px;
}
}
.el-dialog__footer {
text-align: center;
padding-top: 30px;
// border-top: 1px solid #e1e1e1;
}
.default-module {
border-bottom: 1px dotted #e1e1e1;
.dialog-template-content {
input {
border: none;
}
.el-form-item {
margin-bottom: 0px;
}
span {
font-size: 12px;
}
}
}
}
}
</style>
src/views/education/create-component.vue
浏览文件 @ a883b16d
...@@ -95,12 +95,12 @@ ...@@ -95,12 +95,12 @@
</div> </div>
<div class="" v-if="stepNum == 2"> <div class="" v-if="stepNum == 2">
<div class="model-btn"> <div class="model-btn">
<el-button v-if="idType == 1" :disabled="conditionSelect" type="primary" size="small" @click="addModule">添加空白模块</el-button> <el-button v-if="idType == 1" type="primary" size="small" @click="addModule">添加空白模块</el-button>
<el-button :disabled="conditionSelect" type="primary" size="small" @click="addFromModule" style="margin-left:0;">从预设模块添加</el-button> <el-button type="primary" size="small" @click="addFromModule" style="margin-left:0;">从预设模块添加</el-button>
</div> </div>
<div class="tab-content"> <div class="tab-content">
<el-tabs type="card" v-model="firstTab" :closable="!conditionSelect" @tab-remove="removeTab"> <el-tabs type="card" closable v-model="firstTab" @tab-remove="removeTab">
<el-tab-pane v-for="(item,index) in componentList.moduleModelList" :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'> <el-tab-pane class="sort-tabs" v-for="(item,index) in componentList.moduleModelList" :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'>
<div> <div>
<el-form ref="moduleForm" :model="item" :rules="moduleRules" label-suffix=":" label-width="130px" style="width:100%;"> <el-form ref="moduleForm" :model="item" :rules="moduleRules" label-suffix=":" label-width="130px" style="width:100%;">
<el-row> <el-row>
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
</div> </div>
<div v-for="(item2,index2) in item1.partModelList" :key="index2"> <div v-for="(item2,index2) in item1.partModelList" :key="index2">
<!-- 考试 --> <!-- 考试 -->
<div v-if="item2.type == 1"> <div v-if="item2.type == 1">
<div class="partText" v-if="index2 > 0">{{item2.introduce}}</div> <div class="partText" v-if="index2 > 0">{{item2.introduce}}</div>
<div v-for="(item3,index3) in item2.partContentModelList" :key="index3"> <div v-for="(item3,index3) in item2.partContentModelList" :key="index3">
<el-row> <el-row>
...@@ -243,48 +243,50 @@ ...@@ -243,48 +243,50 @@
<!-- 课程 --> <!-- 课程 -->
<div v-if="item2.type == 2"> <div v-if="item2.type == 2">
<div class="partText" v-if="index2 > 0">{{item2.introduce}}</div> <div class="partText" v-if="index2 > 0">{{item2.introduce}}</div>
<el-row v-for="(item3,index3) in item2.partContentModelList" :key="index3"> <div class="sortable-course">
<el-col :span="10" class="item-icon"> <el-row v-for="(item3,index3) in item2.partContentModelList" :key="index3">
<span class="require">*</span> <el-col :span="10" class="item-icon">
<el-form-item label="课程名称"> <span class="require">*</span>
<el-input v-model="item3.content1" :disabled="fieldDisabled(item)" size="small" maxlength='30' placeholder="请输入课程名称" style="width:288px;"></el-input> <el-form-item label="课程名称">
<span v-if="newfieldDisabled(item) && item2.numFlag == 2 && index3 == 0"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span> <el-input v-model="item3.content1" :disabled="fieldDisabled(item)" size="small" maxlength='30' placeholder="请输入课程名称" style="width:288px;"></el-input>
<span v-if="newfieldDisabled(item) && item2.numFlag == 2 && index3 > 0"><i class="el-icon-delete" @click="deleteMatterCourse(index,index1,index2,index3)" style="color:red;"></i></span> <span v-if="newfieldDisabled(item) && item2.numFlag == 2 && index3 == 0"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
</el-form-item> <span v-if="newfieldDisabled(item) && item2.numFlag == 2 && index3 > 0"><i class="el-icon-delete" @click="deleteMatterCourse(index,index1,index2,index3)" style="color:red;"></i></span>
</el-col> </el-form-item>
<el-col :span="10" class="item-icon"> </el-col>
<span class="require">*</span> <el-col :span="10" class="item-icon">
<el-form-item label="关联课程"> <span class="require">*</span>
<el-select v-model="item3.content2" filterable @focus="courseIDfocus(index,index1,index2,index3)" @change="changeCourseID" :disabled="fieldDisabled(item)" size="small" placeholder="请选择课程ID" style="width:288px;"> <el-form-item label="关联课程">
<el-option <el-select v-model="item3.content2" filterable @focus="courseIDfocus(index,index1,index2,index3)" @change="changeCourseID" :disabled="fieldDisabled(item)" size="small" placeholder="请选择课程ID" style="width:288px;">
v-for="(itemCourse,indexCourse) in courseIdSelect" <el-option
:key="indexCourse" v-for="(itemCourse,indexCourse) in courseIdSelect"
:label="itemCourse.name" :key="indexCourse"
:value="itemCourse.id + ''"> :label="itemCourse.name"
</el-option> :value="itemCourse.id + ''">
</el-select> </el-option>
</el-form-item> </el-select>
</el-col> </el-form-item>
<el-col :span="10"> </el-col>
<el-form-item label="是否有试看限制"> <el-col :span="10">
<el-radio-group v-model="item3.content5"> <el-form-item label="是否有试看限制">
<el-radio label="1">是</el-radio> <el-radio-group v-model="item3.content5">
<el-radio label="0">否</el-radio> <el-radio label="1">是</el-radio>
</el-radio-group> <el-radio label="0">否</el-radio>
<!-- <el-radio-group v-if="!item3.content5" v-model="item3.content5"> </el-radio-group>
<el-radio label="1">是</el-radio> <!-- <el-radio-group v-if="!item3.content5" v-model="item3.content5">
<el-radio label=null>否1</el-radio> <el-radio label="1">是</el-radio>
<el-radio label=undefind>否1</el-radio> <el-radio label=null>否1</el-radio>
</el-radio-group> --> <el-radio label=undefind>否1</el-radio>
</el-form-item> </el-radio-group> -->
</el-col> </el-form-item>
<el-col :span="10" v-if="item3.content5 == 1"> </el-col>
<el-form-item label="试看时长"> <el-col :span="10" v-if="item3.content5 == 1">
<el-input maxlength="8" type="input" rows="4" v-model="item3.content6" size="small" placeholder="请输入试看时长" style="width:300px"></el-input> <el-form-item label="试看时长">
<span class="word-num">(秒)</span> <el-input maxlength="8" type="input" rows="4" v-model="item3.content6" size="small" placeholder="请输入试看时长" style="width:300px"></el-input>
</el-form-item> <span class="word-num">(秒)</span>
</el-col> </el-form-item>
</el-row> </el-col>
</el-row>
</div>
</div> </div>
</div> </div>
...@@ -357,12 +359,14 @@ ...@@ -357,12 +359,14 @@
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from '../../components/breadcrumb.vue' import BreadCrumb from '../../components/breadcrumb.vue';
import { doUpload, getFilePath } from "../../utils/qiniu-util" import { doUpload, getFilePath } from "../../utils/qiniu-util";
// import { validateWord150 } from "../../utils/validate.js" // import { validateWord150 } from "../../utils/validate.js"
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex';
import { openLoading, closeLoading, isNotEmptyUtils, isEmptyList, isNotEmptyList } from '../../utils/utils' import { openLoading, closeLoading, isNotEmptyUtils, isEmptyList, isNotEmptyList } from '../../utils/utils';
import * as commonUtil from '../../utils/utils' import * as commonUtil from '../../utils/utils';
import Sortable from 'sortablejs'
let vm = null let vm = null
// 判断组件是否重名 // 判断组件是否重名
let validateRepeatWord = function(rule, value, callback, message) { let validateRepeatWord = function(rule, value, callback, message) {
...@@ -549,10 +553,64 @@ export default { ...@@ -549,10 +553,64 @@ export default {
// 挂载到Dom完成时 // 挂载到Dom完成时
mounted: function() { mounted: function() {
commonUtil.resizeHeight() commonUtil.resizeHeight()
console.log('idType==>',vm.idType)
console.log('idType==>',vm.idType) // setTimeout(() => {
// this.tabDrop();
// // this.courseDrop();
// }, 10000);
}, },
methods: { methods: {
// 模块可以拖动排序
tabDrop() {
this.$nextTick(function() {
const ele = document.querySelector('.tab-content .el-tabs__nav');
console.log('########ele', ele);
Sortable.create(ele, {
onEnd({ newIndex, oldIndex }) {
console.log(newIndex, oldIndex);
// componentList.moduleModelList
const currRow = vm.componentList.moduleModelList.splice(oldIndex, 1)[0];
vm.componentList.moduleModelList.splice(newIndex, 0, currRow);
vm.$forceUpdate();
console.log(currRow, vm.componentList.moduleModelList);
},
// onUpdate:function(event){
//           var newIndex = event.newIndex,
//             oldIndex = event.oldIndex
//             $li = ele.children[newIndex],
//             $oldLi = ele.children[oldIndex]
//           // 先删除移动的节点
//           ele.removeChild($li) 
//           // 再插入移动的节点到原有节点，还原了移动的操作
//           if(newIndex > oldIndex) {
//             ele.insertBefore($li,$oldLi)
//           } else {
//             ele.insertBefore($li,$oldLi.nextSibling)
//           }
//           // 更新items数组
//           var item = vm.items.splice(oldIndex,1);
// vm.items.splice(newIndex,0,item[0])
//           // 下一个tick就会走patch更新
//         }
})
});
},
// 课程可以拖动排序
courseDrop() {
const ele = document.querySelector('.sortable-course');
console.log('########ele', ele);
Sortable.create(ele, {
onEnd({ newIndex, oldIndex }) {
console.log(newIndex, oldIndex);
// const currRow = vm.tagsComponent.splice(oldIndex, 1)[0]
// vm.tagsComponent.splice(newIndex, 0, currRow)
}
})
// sortable-course
},
// 根据ID查询组件基本信息 // 根据ID查询组件基本信息
componentBasicInfo() { componentBasicInfo() {
if(vm.componentId) { if(vm.componentId) {
...@@ -614,6 +672,7 @@ export default { ...@@ -614,6 +672,7 @@ export default {
}, },
// 暂存(下一步) // 暂存(下一步)
storageAndNext(flag) { storageAndNext(flag) {
debugger
if(vm.componentId) { // 编辑 if(vm.componentId) { // 编辑
vm.submitBasicData(flag,'portal/portalComponent/updatePortalComponent') vm.submitBasicData(flag,'portal/portalComponent/updatePortalComponent')
}else{ // 新增 }else{ // 新增
...@@ -677,7 +736,8 @@ export default { ...@@ -677,7 +736,8 @@ export default {
if(flag == 2) { if(flag == 2) {
vm.stepNum = 2 vm.stepNum = 2
//vm.getTemplateData() //vm.getTemplateData()
vm.getModuleData() vm.getModuleData();
vm.tabDrop();
// vm.getTestListData() // vm.getTestListData()
// vm.getCourseData() // vm.getCourseData()
} else { } else {
...@@ -701,7 +761,8 @@ export default { ...@@ -701,7 +761,8 @@ export default {
if(flag == 2) { if(flag == 2) {
vm.stepNum = 2 vm.stepNum = 2
//vm.getTemplateData() //vm.getTemplateData()
vm.getModuleData() vm.getModuleData();
vm.tabDrop();
// vm.getTestListData() // vm.getTestListData()
// vm.getCourseData() // vm.getCourseData()
} else { } else {
...@@ -851,12 +912,14 @@ export default { ...@@ -851,12 +912,14 @@ export default {
return (vm.componentStatus == 3 || vm.componentStatus == 4 ); return (vm.componentStatus == 3 || vm.componentStatus == 4 );
}, },
fieldDisabled(item){ fieldDisabled(item){
// return vm.conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || vm.idType == 2 || item.statusFlag return false;
return vm.newconditionSelect || item.moduleType == 2 || vm.idType == 2 || (vm.componentStatus != 1 && vm.componentStatus != 2 && item.statusFlag); // return vm.conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || vm.idType == 2 || item.statusFlag
// return vm.newconditionSelect || item.moduleType == 2 || vm.idType == 2 || (vm.componentStatus != 1 && vm.componentStatus != 2 && item.statusFlag);
}, },
newfieldDisabled(item) { newfieldDisabled(item) {
return false;
//conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.status == 1)) && idType == 1 //conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.status == 1)) && idType == 1
return vm.conditionAnd && ((vm.componentStatus == 1 || vm.componentStatus == 2) || ((vm.componentStatus != 1 || vm.componentStatus != 2) && !item.statusFlag)) && item.moduleType == 1 && vm.idType == 1 // return vm.conditionAnd && ((vm.componentStatus == 1 || vm.componentStatus == 2) || ((vm.componentStatus != 1 || vm.componentStatus != 2) && !item.statusFlag)) && item.moduleType == 1 && vm.idType == 1
}, },
// 选择是否启用状态 // 选择是否启用状态
selectIsOpenStatus(index) { selectIsOpenStatus(index) {
...@@ -1008,7 +1071,8 @@ export default { ...@@ -1008,7 +1071,8 @@ export default {
}) })
} }
} }
vm.templetIndex ++ vm.templetIndex ++;
this.courseDrop();
}, },
// 删除模板 // 删除模板
deleteTemplate(index,index1) { deleteTemplate(index,index1) {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或