Skip to content

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

组件基础信息接口联调

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