提交 96adea71 编写于 作者: guangjun.yang's avatar guangjun.yang

protocol-list

上级 79492c8b
import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home')), 'home')
const blank = r => require.ensure([], () => r(require('../views/blank')), 'blank')
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 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 addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
const createPush = r => require.ensure([], () => r(require('../views/message/create-push.vue')), 'create-push')
const historyPush = r => require.ensure([], () => r(require('../views/message/history-push.vue')), 'history-push')
// 新增 策略管理、短信历史、黑名单、疲劳度控制
const strategyManage = r => require.ensure([], () => r(require('../views/message/strategy-manage.vue')), 'strategy-manage');
const msgHistory = r => require.ensure([], () => r(require('../views/message/msg-history.vue')), 'msg-history');
const blacklist = r => require.ensure([], () => r(require('../views/message/blacklist.vue')), 'blacklist');
const fatigueControl = r => require.ensure([], () => r(require('../views/message/fatigue-control.vue')), 'fatigue-control');
// 新增 协议管理
const protocolList = r => require.ensure([], () => r(require('../views/protocol/protocol-list.vue')), 'protocol-list');
......@@ -40,43 +24,45 @@ export default [{
},{
path: '/blank',
component: blank
},{
path: '/item-manager',
component: itemManager
},{
path: '/add-manager',
component: addManager
},{
path: '/item-component',
component: itemComponent
},{
path: '/role',
component: roleManager
},{
path: '/create-component',
component: createComponent
},{
path: '/item-role',
component: itemRole
},{
path: '/create-push',
component: createPush
},{
path: '/history-push',
component: historyPush
},{
path: '/strategy-manage',
component: strategyManage
},{
path: '/msg-history',
component: msgHistory
},{
path: '/blacklist',
component: blacklist
},{
path: '/fatigue-control',
component: fatigueControl
},{
},
// {
// path: '/item-manager',
// component: itemManager
// },{
// path: '/add-manager',
// component: addManager
// },{
// path: '/item-component',
// component: itemComponent
// },{
// path: '/role',
// component: roleManager
// },{
// path: '/create-component',
// component: createComponent
// },{
// path: '/item-role',
// component: itemRole
// },{
// path: '/create-push',
// component: createPush
// },{
// path: '/history-push',
// component: historyPush
// },{
// path: '/strategy-manage',
// component: strategyManage
// },{
// path: '/msg-history',
// component: msgHistory
// },{
// path: '/blacklist',
// component: blacklist
// },{
// path: '/fatigue-control',
// component: fatigueControl
// },
{
path: '/protocol-list',
component: protocolList
},{
......
因为 它太大了无法显示 源差异 。您可以改为 查看blob
<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="conditionSelect" @click="finishConponent(1)" type="default" size="small">暂存</el-button>
<el-button v-if="stepNum == 2" @click="finishConponent(2)" :disabled="conditionSelect" 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="125px" 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-row>
<el-col :span="6">
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="配置证书">
<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-item v-if="hasCertificate" label="组件完成(%)" prop="certificateCondition">
<el-input-number
v-model="portalComponent.certificateCondition"
controls-position="right"
@change="handleChange"
:disabled="componentStatus == 3 || componentStatus == 4"
:step="10"
:min="10"
:max="100">
</el-input-number>
</el-form-item>
</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 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="conditionSelect || idType == 2 || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)" size="small" placeholder="请选择模块名称" style="width:288px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" v-if="idType == 1">
<el-form-item label="是否对外开放" prop="openFlag">
<el-radio-group v-model="item.openFlag" @change="selectIsOpen(index)" :disabled="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)">
<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="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)"
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="conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1)) && idType == 1">
变更顺序:
<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="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || idType == 2" size="small" maxlength='30' placeholder="请输入考试名称" style="width:288px;"></el-input>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 == 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 > 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><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" @focus="examIDfocus(index,index1,index2,index3)" @change="changeExamID" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="small" placeholder="请选择考试ID" style="width:288px;">
<el-option
v-for="(itemTest,indexTest) in testIdSelect"
:key="indexTest"
:label="itemTest.onlineExamName"
:value="itemTest.id + ''">
</el-option>
</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="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)">
<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="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" 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>
<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="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="small" maxlength='30' placeholder="请输入课程名称" style="width:288px;"></el-input>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 == 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
<span v-if="conditionAnd && item2.numFlag == 2 && index3 > 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><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" @focus="courseIDfocus(index,index1,index2,index3)" @change="changeCourseID" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" 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-row>
</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'
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,
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,
testIdSelect: [], // 考试ID下拉列表
certificateIdSelect: [], // 证书下拉列表
courseIdSelect: [], // 课程下拉列表
dialogData: [],
portalComponent: {
idType: '',
organizationId: '',
name: '',
id: '',
introduce: '',
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书,配置证书为否
certificateCondition: '60', // 证书完成率
status: ''
},
componentList: {
moduleModelList: [{
id: '',
name: '',
openFlag: '', // 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: 150, 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: 20, message: '输入长度为2-20个字符', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateModuleName(rule, value, callback, '模块名称已存在,请修改名称后保存')
},
trigger: 'blur' }
],
"openFlag": [
{ required: true, message: '请选择是否对外开放', trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters([
'_token',
'idType'
])
},
created() {
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.conditionSelect = vm.resultFlag == 2 || vm.componentStatus == 3 || vm.componentStatus == 4
if(vm.componentStatus && vm.resultFlag) {
vm.conditionAnd = vm.resultFlag == 1 && vm.componentStatus != 3 && vm.componentStatus != 4
}
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight()
},
methods: {
// 根据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 = '是'
}
}
})
}
},
// 删除图片
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 = 60
}
},
// 获取组件完成率
handleChange(value) {
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
}else {
vm.$message.info(res.message)
}
})
},
// 根据考试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
}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
}else {
vm.$message.info(res.message)
}
})
},
// 模块是否对外开放
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
}
}
},
// 删除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为从预设模块中添加
templetModelList: []
})
},
// 添加模板
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: '',
content4: ''
}]
})
}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: ''
}]
})
}
}
vm.templetIndex ++
},
// 删除模板
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: ''
})
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.$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) {
return
}else {
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) {
vm.$router.push({ path: 'item-component' })
} 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>
<template>
<div class="item-component-wrap">
<bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond">
</bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="search-title">查询条件</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="serchForm" :model="searchParam" label-width="75px" style="width:100%;">
<el-col :span="6">
<el-form-item label="组件名称:">
<el-input v-model="searchParam.name" size="small" placeholder="请输入组件名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="发布状态:">
<el-select v-model="searchParam.status" size="small" style="width: 100%;" placeholder="请选择发布状态">
<el-option
v-for="(item,index) in statuSelect"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="search(1)">查询</el-button>
<el-button type="default" size="small" @click="reseat" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-row :gutter="10" class="row create-button" style="margin-right:0;">
<el-button type="primary" size="small" :disabled="idType == 2 && masterAdministratorFlag == 'false'" @click="createComponent">新建项目组件</el-button>
</el-row>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
<el-table-column prop="name" label="组件名称" min-width="200" align="center"></el-table-column>
<el-table-column prop="createdName" label="发起人" min-width="100" align="center"></el-table-column>
<el-table-column prop="status" label="状态" min-width="80" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status | statusFileter }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editComponentList(scope.row)">编辑</el-button>
<el-button type="primary" v-if="scope.row.status == 2 || scope.row.status == 4" size="small" @click="enableAndDisable(scope.row,1)">启用</el-button>
<el-button type="primary" v-if="scope.row.status == 3" size="small" @click="enableAndDisable(scope.row,2)">禁用</el-button>
<el-button type="primary" v-if="scope.row.status == 1 || scope.row.status == 2" size="small" @click="deleteComponent(scope.row)">删除</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png" />
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniu-util"
import { validateWord } from "../../utils/validate.js"
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: '教培项目',
curmbSecond: '项目组件',
idType:'',
masterAdministratorFlag: false,
searchParam: {
idType: '',
name: '',
status: '',
pageNo: 1,
pageSize: 15
},
statuSelect: [
{
label: '草稿',
value: '1'
},{
label: '未启用',
value: '2'
},{
label: '已启用',
value: '3'
},{
label: '已禁用',
value: '4'
}
],
tableData: [],
totalRows: 0,
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' },
],
}
}
},
computed: {
...mapGetters([
'_token',
// 'idType',
// 'masterAdministratorFlag'
])
},
created() {
vm = this
vm.search()
vm.idType = localStorage.getItem('storageIdType')
vm.masterAdministratorFlag = localStorage.getItem('storageMaster')
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight()
},
methods: {
// 列表查询
search(flag) {
if(flag) vm.searchParam.pageNo = 1
vm.searchParam.idType = vm.idType
openLoading(vm)
vm.GET('portal/portalComponent/queryPortalComponent',vm.searchParam).then((res) => {
closeLoading(vm)
if( res.code == '000000' ) {
vm.tableData = res.data.queryList
vm.totalRows = res.data.total
}else {
vm.$message.info(res.message)
}
})
},
// 重置
reseat() {
vm.searchParam = Object.assign({},{
idType: '',
name: '',
status: '',
pageNo: 1,
pageSize: 15
})
vm.search()
},
// 新建组件
createComponent() {
vm.$router.push({path: 'create-component'})
},
// 编辑(验证可编辑范围)
editComponentList(row) {
let req = {
token: vm._token,
componentId: row.id
}
vm.GET('portal/portalComponent/componentEditRange',req).then((res) => {
if(res.code == "000000") {
vm.$router.push({path: 'create-component',query: {id:row.id,status: row.status,resultFlag: res.data.resultFlag}})
}else {
vm.$message.info(res.message)
}
})
},
// 启用(禁用)
enableAndDisable(row,flag) {
let req = null
let text = ''
if(flag == 1) { // 启用
req = {
id: row.id,
status: 3
}
text = '组件一经启用,将无法进行修改,确定启用吗?'
}else if(flag == 2) { // 禁用
req = {
id: row.id,
status: 4
}
text = '确定禁用吗?'
}
vm.$confirm(text, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
vm.GET('portal/portalComponent/disableOrStart',req).then((res) => {
if(res.code == "000000") {
vm.$message({
type: 'success',
message: '操作成功!'
});
vm.search()
if(res.message != 'success') {
vm.$message({
message: res.message,
type: 'warning'
})
}
}else {
vm.$message.info(res.message)
}
}).catch(function (error) {
vm.$message.error(error);
});
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消'
});
});
},
// 删除
deleteComponent(row) {
vm.$confirm('确定要删除该组件吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
vm.GET('portal/portalComponent/deleteComponentById',{id: row.id}).then((res) => {
if(res.code == "000000") {
vm.$message({
type: 'success',
message: '删除成功!'
});
vm.search()
} else {
vm.$message.info(res.message)
}
}).catch(function (error) {
vm.$message.error(error);
});
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消'
})
})
},
handleSizeChange(value) {
vm.searchParam.pageSize = value
vm.search()
},
handleCurrentChange(value) {
vm.searchParam.pageNo = value
vm.search()
}
}
}
</script>
<style lang="scss">
.item-component-wrap {
.component-content {
padding: 10px;
background: #fff;
// margin: 84px 20px 20px;
.search-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.create-button {
padding: 0 0 15px;
margin-top: 0 !important;
text-align: right;
}
.table-empty {
img{
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
<template>
<div class="item-manager-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title">项目管理</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-col :span="5">
<el-form-item label="项目名称:">
<el-input v-model="formInline.projectName" size="small" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="项目时间:">
<el-date-picker
v-model="formInline.duringTime"
size="small"
type="daterange"
start-placeholder="请选择开始时间"
end-placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-col>-->
<el-col :span="6">
<el-form-item label="项目时间:">
<el-date-picker
v-model="formInline.projectBegintime"
size="small"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="~">
<el-date-picker
v-model="formInline.projectEndtime"
size="small"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="23:59:59"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="searchList">查询</el-button>
<el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-row>
<el-col :span="5">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-form-item label="发布状态:">
<el-select size="small" v-model="formInline.projectStatus" placeholder="请选择发布状态">
<el-option
v-for="item in optionStatus"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-form :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button class="add-button" :disabled="idType == 2 && masterAdministratorFlag == 'false'" size="small" type="primary" @click="toPage()">新建项目</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="createdName" label="创建人" align="center"></el-table-column>
<el-table-column
prop="projectIntro"
label="项目简介"
align="center"
min-width="100"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="projectBegintime" label="项目开始时间" min-width="90" align="center"></el-table-column>
<el-table-column prop="projectEndtime" label="项目结束时间" min-width="90" align="center"></el-table-column>
<el-table-column prop="projectStatus" label="状态" align="center">
<template slot-scope="scope">
<span>{{ [scope.row.projectStatus , idType] | statusProject }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="200" align="center">
<template slot-scope="scope">
<el-button
@click="changeStatus(scope.row,0)"
v-show="showButton(scope.row,0)"
type="primary"
size="small"
>编辑</el-button>
<el-button
@click="changeStatus(scope.row,1)"
v-show="showButton(scope.row,1)"
type="primary"
size="small"
>暂存</el-button>
<el-button
@click="changeStatus(scope.row,2)"
v-show="showButton(scope.row,2)"
type="primary"
size="small"
>完成</el-button>
<el-button
@click="changeStatus(scope.row,3)"
v-show="showButton(scope.row,3)"
type="primary"
size="small"
>上架</el-button>
<el-button
@click="changeStatus(scope.row,4)"
v-show="showButton(scope.row,4)"
type="primary"
size="small"
>通过</el-button>
<el-button
@click="changeStatus(scope.row,5)"
v-show="showButton(scope.row,5)"
type="primary"
size="small"
>下架</el-button>
<el-button
@click="changeStatus(scope.row,7)"
v-show="showButton(scope.row,7)"
type="primary"
size="small"
:disabled="scope.row.checkStatus==1"
>提醒审核</el-button>
<el-button
@click="changeStatus(scope.row,8)"
v-show="showButton(scope.row,8)"
type="primary"
size="small"
>取消审核</el-button>
<el-button
@click="changeStatus(scope.row,6)"
v-show="showButton(scope.row,6)"
type="primary"
size="small"
>拒绝</el-button>
<el-button
@click="delItem(scope.row,9)"
v-show="showButton(scope.row,9)"
type="primary"
size="small"
>删除</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formInline.pageNo"
:page-sizes="[10, 30, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { mapGetters } from 'vuex'
import { returnData } from "../../utils/mock";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import { setTimeout } from 'timers';
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
return {
idValue: '',
curmbFirst: "教培项目",
curmbSecond: "项目管理",
searchParam: {
name: "",
status: "",
pageNo: 1,
pageSize: 10
},
optionStatus: [
{
value: 1,
label: "草稿"
},
{
value: 2,
label: "未上架"
},
{
value: 3,
label: "审核中/待审核"
},
{
value: 4,
label: "已上架"
},
{
value: 5,
label: "已下架"
},
{
value: 6,
label: "已拒绝/未上架"
}
],
tableData: [],
totalRows: 0,
loading: true,
timingTime: "",
currentPage: 1,
formInline: {
projectName: "",
projectBegintime: "",
projectEndtime: "",
projectStatus: "",
pageNo: 1,
pageSize: 10
},
pickerOptions0: {
disabledDate: time => {
if (this.formInline.projectEndtime != "" && this.formInline.projectEndtime !=null) {
return (
time.getTime() >
new Date(this.formInline.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
time.getTime() <
new Date(this.formInline.projectBegintime).getTime()
); //减去一天的时间代表可以选择同一天;
}
},
idType: '',
masterAdministratorFlag: false
};
},
computed: {
...mapGetters([
"_token",
// "idType",
// "masterAdministratorFlag"
])
},
created() {
vm = this;
vm.idType = localStorage.getItem('storageIdType');
vm.masterAdministratorFlag = localStorage.getItem('storageMaster');
console.log('idType:',vm.idType);
this.$nextTick(function() {;
this.getProjectList();
});
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
toPage() {
this.$router.push("add-manager");
},
searchList() {
this.formInline.pageNo = 1;
this.getProjectList();
},
//查询项目列表
getProjectList() {
let req = {};
req = this.formInline;
openLoading(vm);
vm.GET("portal/portalInfo/getProjectList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.data;
//console.log(vm.tableData);
vm.totalRows = res.data.totalRows;
}
});
},
//按钮展示情况
showButton(row, type) {
// 按钮type类型: 0-编辑
// 1-暂存 2-完成 3-上架 4-通过 5-下架 6-拒绝
// 7- 提醒审核 8(2)-取消审核 9-删除
let projectStatus = row.projectStatus;
let idType = row.idType;
let level = row.level;
let flag = false;
let typeStr = parseInt(type);
//console.log("状态:"+projectStatus+ "等级:" + level + " 按钮类型:" + type);
//console.log('idType',idType);
let buttonStatus = "";
if (idType == 1) {
//内部项目
buttonStatus = returnData().buttonStatusIn;
} else {
//外部项目
buttonStatus = returnData().buttonStatusOut;
}
if (level != null) {
let statusSet = buttonStatus[projectStatus - 1][level];
let flagValue = statusSet.indexOf(typeStr);
if (flagValue >= 0) {
flag = true;
} else {
flag = false;
}
}
//flag = true;
return flag;
},
//改变状态
changeStatus(row, type) {
let projectId = row.id;
let level = row.level;
if (type === 0) {
//编辑
this.$router.push("add-manager?projectId=" + projectId +"&level="+level);
} else if (type === 7) {
//提醒审核
let req = {
portalProjectId: projectId,
warnType: 1
};
vm.GET("portal/portalCheck/remindPortalCheck", req).then(res => {
vm.$message.info(res.message);
vm.getProjectList();
if (res.code == "000000") {
console.log(res);
//vm.getProjectList();
}
});
} else {
if (type === 8) {
//取消审批值对应2
type = 2;
let req = {
portalProjectId: projectId,
warnType: 5
};
vm.GET("portal/portalCheck/remindPortalCheck", req).then(res => {
vm.$message.info(res.message);
if (res.code == "000000") {
console.log(res);
vm.getProjectList();
}
});
}
if (type == 4 || type == 6) {
//发送消息
let warnType = "";
if (type == 4) {
warnType = 3;
} else if (type == 6) {
warnType = 4;
}
let req = {
portalProjectId: projectId,
warnType: warnType
};
vm.GET("portal/portalCheck/remindPortalCheck", req).then(res => {
vm.$message.info(res.message);
if (res.code == "000000") {
console.log(res);
vm.getProjectList();
}
});
}
let req = {
projectId: projectId,
changeStatus: type
};
vm.POST("portal/portalInfo/changeStatus", req).then(res => {
vm.$message.info(res.message);
if (res.code == "000000") {
console.log(res);
vm.getProjectList();
}
});
}
},
//删除项目
delItem(row) {
let req = {};
console.log(row);
vm.DELETE("portal/portalInfo/delete/" + row.id, req).then(res => {
vm.$message.info(res.message);
if (res.code == "000000") {
console.log(res);
vm.getProjectList();
}
});
},
//重置表单
resetForm() {
vm.formInline = Object.assign(
{},
{
projectName: "",
projectBegintime: "",
projectEndtime: "",
projectStatus: "",
pageNo: 1,
pageSize: 10,
duringTime: ""
}
);
vm.getProjectList();
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formInline.pageSize = val;
this.handleCurrentChange(this.searchParam.pageNo);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.formInline.pageNo = val;
this.getProjectList();
//需要判断是否检索
// if (!this.flag) {
// this.currentChangePage(this.tableDataEnd);
// } else {
// this.currentChangePage(this.filterTableDataEnd);
// }
}, //组件自带监控当前页码
currentChangePage(list) {
let from = (this.currentPage - 1) * this.pageSize;
let to = this.currentPage * this.pageSize;
this.tableDataEnd = [];
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from]);
}
}
}
}
};
</script>
<style lang="scss">
.item-manager-wrap {
.component-content {
background: #fff;
//margin-top: 88px;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
// .table-option span {
// color: #409eff;
// }
.add-button {
float: right;
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
\ No newline at end of file
......@@ -63,21 +63,21 @@ export default {
icon: "el-icon-history-push",
index: "protocol-list"
},
{
title: "创建协议",
icon: "el-icon-document-add",
index: "create-protocol"
},
{
title: "查看协议",
icon: "el-icon-chat-line-square",
index: "protocol-detail"
},
{
title: "历史版本",
icon: "el-icon-chat-line-square",
index: "protocol-history"
}
// {
// title: "创建协议",
// icon: "el-icon-document-add",
// index: "create-protocol"
// },
// {
// title: "查看协议",
// icon: "el-icon-chat-line-square",
// index: "protocol-detail"
// },
// {
// title: "历史版本",
// icon: "el-icon-chat-line-square",
// index: "protocol-history"
// }
]
};
},
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册