Skip to content

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

组件基础信息接口联调

上级 91340a9a
隐藏空白字符变更
内嵌 并排
正在显示 包含 225 行增加 和 63 行删除
src/utils/qiniuUtil.js
浏览文件 @ 82704c5c
......@@ -352,7 +352,7 @@ export const getFilePath = (file,fileName,folder) => {
//文件全路径(文件路径 + 文件名) 扩展名​/年/月/日/
// var filePath = ext + "/" + date.format('yyyy/MM/dd') + "/" + (isEmptyUtils(folder) ? "" : (folder + "/")) + fileName;
//var filePath = ext + "/" + "common/" + file.name.split('.')[0] + '-' + timeStamp(date) + "." + suffix;
var filePath = ext + "/" + "common/" + timeStamp(date) + "." + suffix;
var filePath = ext + "/" + "protal/project/" + timeStamp(date) + "." + suffix;
console.log('filePath==============',filePath);
return filePath;
......
src/utils/validate.js
浏览文件 @ 82704c5c
......@@ -31,9 +31,9 @@ export function isvalidUsername(str) {
return reg.test(str)
}
// 2-20个中文
export function validateWord(str) {
const reg = /^[\u4e00-\u9fa5]{2,20}$/
// 2-150个中文
export function validateWord150(str) {
const reg = /^[\u4e00-\u9fa5]{2,150}$/
return reg.test(str)
}
/* 通用密码验证(数字、字母、下划线或特殊字符且长度为0-150位) */
......
src/views/education/create-component.vue
浏览文件 @ 82704c5c
......@@ -15,30 +15,30 @@
<el-step title="选择模块" :class="stepNum == 2 ? 'class-1-text' : 'class-2-text'"></el-step>
</el-steps>
<div class="btn-container">
<el-button type="default" size="small" @click="justStorage">暂存</el-button>
<el-button v-if="stepNum == 1" @click="nextStep" type="primary" size="small" style="margin-left:0;">下一步</el-button>
<el-button v-if="componentStatus == 1 || !componentStatus" type="default" size="small" @click="storageAndNext(1)">暂存</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" @click="finishConponent" type="primary" size="small" style="margin-left:0;">完成</el-button>
</div>
</div>
<div class="first-step" v-if="stepNum == 1">
<el-form ref="basicInfoForm" class="basic-form" :model="componentList" :rules="basicRule" label-width="125px" label-suffix=":" size="mini" style="margin-bottom:30px;">
<el-form ref="basicInfoForm" class="basic-form" :model="portalComponent" :rules="isStorage ? basicStorageRule : basicRule" label-width="125px" label-suffix=":" size="mini" style="margin-bottom:30px;">
<el-form-item label="组件名称" prop="name">
<el-input type="text" v-model="componentList.name" size="mini" placeholder="请输入组件名称" style="width:30%;"></el-input>
<el-input type="text" v-model="portalComponent.name" size="mini" placeholder="请输入组件名称" style="width:30%;"></el-input>
<span class="word-num">0/20</span>
</el-form-item>
<el-form-item label="组件简介" prop="introduce">
<el-input type="textarea" rows="4" cols="10" v-model="componentList.introduce" size="mini" placeholder="请输入组件简介" style="width:37%;"></el-input>
<el-input type="textarea" rows="4" cols="10" v-model="portalComponent.introduce" size="mini" placeholder="请输入组件简介" style="width:37%;"></el-input>
<span class="word-num">0/150</span>
</el-form-item>
<el-form-item label="组件图片" prop="imageUrl">
<el-upload
v-model="componentList.imageUrl"
v-model="portalComponent.imageUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="componentList.imageUrl" :src="componentList.imageUrl" class="bg-img">
<img v-if="!componentList.imageUrl" class="bg-img" src="../../assets/image/small.png">
<img v-if="portalComponent.imageUrl" :src="portalComponent.imageUrl" class="bg-img">
<img v-if="!portalComponent.imageUrl" class="bg-img" src="../../assets/image/small.png">
<div class="limit-text">
<p>尺寸大小:750*420</p>
<p>限制大小: 2.0 Mb</p>
......@@ -57,7 +57,7 @@
</el-col>
<el-col :span="10" v-if="hasCertificate">
<el-form-item label="选择证书" prop="certificateId">
<el-select v-model="componentList.certificateId" @change="selectChange" placeholder="请选择资源包" style="width:60%;">
<el-select v-model="portalComponent.certificateId" @change="selectChange" placeholder="请选择资源包" style="width:60%;">
<el-option
v-for="(item,index) in certificateIdSelect"
:key="index"
......@@ -70,7 +70,7 @@
</el-row>
<el-form-item v-if="hasCertificate" label="获得证书完成率" prop="certificateCondition">
<el-input-number
v-model="componentList.certificateCondition"
v-model="portalComponent.certificateCondition"
controls-position="right"
@change="handleChange"
:step="10"
......@@ -246,8 +246,30 @@
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniuUtil"
import { validateWord, isValidPassword } from "../../utils/validate.js"
import { validateWord150 } from "../../utils/validate.js"
let vm = null
let validateRepeatWord = function(rule, value, callback, message) {
const reg = /^[\u4e00-\u9fa5]{2,20}$/
if(!reg.test(value)) {
callback(new Error(message))
return
}
let req = {
token: 'C1C5360EEC754092B9EC244147B35BB7',
name: value,
idType: 1 // 1内部 2外部
}
vm.GET('portalComponent/checkComponentName',req).then((res) => {
if(res.code == '000000') {
if(res.data.resultFlag == 2) {
callback(new Error('该组件名称已存在，请使用一个新的组件名称'))
return
}else {
callback()
}
}
})
}
export default {
components: {
BreadCrumb
......@@ -256,6 +278,9 @@ export default {
return {
columnFormVisible: false,
stepNum: 1,
isStorage: true,
componentId: '',
componentStatus: '',
dialogTitle: '选择模板',
curmbFirst: '教培项目',
curmbSecond: '项目组件',
......@@ -273,20 +298,23 @@ export default {
testIdSelect: [], // 考试ID下拉列表
certificateIdSelect: [], // 证书下拉列表
courseIdSelect: [], // 课程下拉列表
componentList: {
portalComponent: {
idType: 1,
name: '',
id: '',
introduce: '',
imageUrl:'',
seqNo: '',
certificateId: '', // 0 没有证书
certificateCondition: '60',
certificateId: '', // 0 没有证书,配置证书为否
certificateCondition: '60', // 证书完成率
status: ''
},
componentList: {
id: '',
moduleModelList: [{
name: '',
openFlag: '', // 1不开放 2开放
templetModelList: [
]
templetModelList: []
}]
},
resourceArray: [],
......@@ -296,18 +324,27 @@ export default {
selectModuleForm: {
test: '否'
},
basicStorageRule: {
"name": [
{ required: true, message: '输入组件名称', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateRepeatWord(rule, value, callback, '输入长度为2-20个中文')
},
trigger: 'blur' }
]
},
basicRule: {
"name": [
{ required: true, message: '输入组件名称', trigger: 'blur' },
{ validator: function(rule, value, callback) {
validateWord(rule, value, callback, '输入长度为2-20个中文')
validateRepeatWord(rule, value, callback, '输入长度为2-20个中文')
},
trigger: 'blur' }
],
"introduce": [
{ required: true, message: '请输入组件简介', trigger: 'blur' },
{ validator: function(rule, value, callback) {
isValidPassword(rule, value, callback, '超出可输入的最大长度')
validateWord150(rule, value, callback, '超出可输入的最大长度')
},
trigger: 'blur' }
],
......@@ -344,20 +381,81 @@ export default {
},
created() {
vm = this
vm.getCertificateList()
vm.componentId = this.$route.query.id
vm.componentStatus = this.$route.query.status
vm.getCertificateList() // 获取证书列表
vm.componentBasicInfo() // 根据ID查询组件基本信息
},
methods: {
// 暂存
justStorage() {
// 根据ID查询组件基本信息
componentBasicInfo() {
if(vm.componentId) {
vm.GET('portalComponent/queryPortalComponentById',{id: vm.componentId}).then((res) => {
if( res.code == '000000') {
vm.portalComponent = res.data.portalComponent
if(!vm.portalComponent.certificateId) {
vm.hasCertificate = false
vm.openLable = '否'
}
}
})
}
},
// 是否配置证书
selectCertificate(val) {
if(val == '否') {
vm.portalComponent.certificateId = 0
vm.hasCertificate = false
vm.portalComponent.certificateCondition = 0
}else{
vm.portalComponent.certificateId = 1
vm.hasCertificate = true
vm.portalComponent.certificateCondition = 60
}
},
// 获取组件完成率
handleChange(value) {
vm.portalComponent.certificateCondition = value
},
// 获取证书下拉列表
getCertificateList() {
vm.GET('portalComponent/CertificateList').then((res) => {
if( res.code == '000000') {
vm.certificateIdSelect = res.data.certificateList
}
})
},
// 暂存(下一步)
storageAndNext(flag) {
if(vm.componentId) { // 编辑
vm.submitBasicData(flag,'portalComponent/updatePortalComponent')
}else{ // 新增
vm.submitBasicData(flag,'portalComponent/insertPortalComponent')
}
},
// 下一步
nextStep() {
vm.stepNum = 2
vm.getTemplateData()
vm.getModuleData()
vm.getTestListData()
vm.getCourseData()
submitBasicData(flag,url) {
if(flag == 1) { // 暂存
vm.portalComponent.status = 1
vm.isStorage = true
}else{ // 下一步
vm.portalComponent.status = ''
vm.isStorage = false
}
vm.$refs.basicInfoForm.validate((valid) => {
if (valid) {
vm.POST(url,{ model: vm.portalComponent }).then((res) => {
if( res.code == '000000') {
vm.stepNum = 2
vm.getTemplateData()
vm.getModuleData()
vm.getTestListData()
vm.getCourseData()
}
})
} else {
return false;
}
})
},
// 上传组件图片
beforeAvatarUpload(file) {
......@@ -382,29 +480,13 @@ export default {
vm.$message.info('上传图片宽度不合适，请重新上传')
}else {
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
vm.componentList.imageUrl = path.fullPath
vm.portalComponent.imageUrl = path.fullPath
vm.$message.success('上传成功')
});
}
}
}
},
// 是否配置证书
selectCertificate(val) {
vm.hasCertificate = val == '否' ? false : true
},
// 获取组件完成率
handleChange(value) {
},
// 获取证书下拉列表
getCertificateList() {
vm.GET('portalComponent/CertificateList').then((res) => {
if( res.code == '000000') {
vm.certificateIdSelect = res.data.certificateList
}
})
},
// 获取考试下拉列表
getTestListData() {
vm.GET('portalComponent/OnlineExamList').then((res) => {
......
src/views/education/item-component.vue
浏览文件 @ 82704c5c
......@@ -26,8 +26,8 @@
</el-form-item>
</el-col>
<el-col :span="13" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small">查询</el-button>
<el-button type="default" size="small" style="margin-left:0;">重置</el-button>
<el-button type="primary" size="small" @click="search">查询</el-button>
<el-button type="default" size="small" @click="reseat" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
......@@ -45,10 +45,10 @@
</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" size="small" @click="enable(scope.row)">启用</el-button>
<el-button type="primary" size="small">禁用</el-button>
<el-button type="primary" size="small">删除</el-button>
<el-button type="primary" v-if="scope.row.status == 1 ||scope.row.status == 2" size="small" @click="editComponentList(scope.row)">编辑</el-button>
<el-button type="primary" v-if="scope.row.status == 1 ||scope.row.status == 2" 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>
</el-table>
......@@ -87,7 +87,21 @@ export default {
pageNo: 1,
pageSize: 15
},
statuSelect: [],
statuSelect: [
{
label: '草稿',
value: '1'
},{
label: '未启用',
value: '2'
},{
label: '已启用',
value: '3'
},{
label: '已禁用',
value: '4'
}
],
tableData: [],
totalRows: 0,
basicRule: {
......@@ -120,19 +134,85 @@ export default {
}
})
},
// 重置
reseat() {
vm.searchParam = Object.assign({},{
name: '',
status: '',
pageNo: 1,
pageSize: 15
})
vm.search()
},
// 新建组件
createComponent() {
vm.$router.push({path: 'create-component'})
},
// 编辑
editComponentList(row) {
vm.$router.push({path: 'create-component',query: {id:row.id,status: row.status}})
},
handleSizeChange() {
// 启用(禁用)
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('portalComponent/disableOrStart',req).then((res) => {
if(res.code == "000000") {
vm.$message({
type: 'success',
message: '操作成功!'
});
vm.search()
}
}).catch(function (error) {
vm.$message.error(error);
});
}).catch(() => {
vm.$message({
type: 'info',
message: '已取消'
});
});
},
handleCurrentChange() {
// 删除
deleteComponent(row) {
vm.GET('portalComponent/deleteComponentById',{id: row.id}).then((res) => {
if(res.code == "000000") {
vm.$message({
type: 'success',
message: '删除成功!'
});
vm.search()
}
}).catch(function (error) {
vm.$message.error(error);
});
},
handleSizeChange(value) {
vm.searchParam.pageSize = value
vm.search()
},
handleCurrentChange(value) {
vm.searchParam.pageNo = value
vm.search()
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或