CherrysChang
5 years ago
parent
1bc058616f
commit
a26f6b45d0
3 changed files with 556 additions and 31 deletions
@ -1,13 +1,542 @@ |
||||
<template> |
||||
<div>案例新增查看修改</div> |
||||
<div class="project-add"> |
||||
<el-container style="background-color: #eeeeee;"> |
||||
<!-- <el-header class="add-header" height="50px">--> |
||||
<!-- <div v-if="!isShowData">--> |
||||
<!-- <el-page-header @back="goBackList" content="项目配置" style="float: left;">--> |
||||
<!-- </el-page-header>--> |
||||
<!-- <el-button type="primary" @click="submitForm('dataForm')" style="float: right;" v-if="formAction !=2">{{formAction == 0 ? '创建' : '修改'}}</el-button>--> |
||||
<!-- </div>--> |
||||
<!-- <div v-else>--> |
||||
<!-- <el-page-header @back="goBackAdd" content="添加案例数据" style="float: left;">--> |
||||
<!-- </el-page-header>--> |
||||
<!-- <div style="float: right;">--> |
||||
<!-- <el-button type="primary" @click="doAddCaseData()">确定</el-button>--> |
||||
<!-- <el-button type="primary" @click="cancelAddCaseData()">取消</el-button>--> |
||||
<!-- </div>--> |
||||
<!-- </div>--> |
||||
<!-- </el-header>--> |
||||
<el-main style="background-color: white;margin-top: 10px;padding: 0 0;"> |
||||
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" class="demo-form-inline" label-width="90px" v-if="!isShowData"> |
||||
<el-card class="box-card" style="margin-bottom: 10px;"> |
||||
<div slot="header" class="clearfix"> |
||||
<span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>基本信息</span> |
||||
</div> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="8"> |
||||
<el-form-item label="项目名称" prop="name"> |
||||
<el-input v-model.trim="dataForm.name" :disabled="formAction==2" placeholder="项目名称" style="width: 280px;"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="项目权限" prop="type"> |
||||
<el-select v-model="dataForm.type" placeholder="项目权限" :disabled="formAction==2"> |
||||
<el-option label="练习" value="1"></el-option> |
||||
<el-option label="考核" value="2"></el-option> |
||||
<el-option label="竞赛" value="3"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
<el-card class="box-card" style="margin-bottom: 10px;"> |
||||
<div slot="header" class="clearfix"> |
||||
<span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>案例描述</span> |
||||
</div> |
||||
<el-row ::gutter="20"> |
||||
<el-col ::span="24"> |
||||
<el-form-item label="" label-width="0px;" class="content-item" prop="content"> |
||||
<el-input type="textarea" :autosize="{ minRows: 10, maxRows: 16}" v-model="dataForm.content" :disabled="formAction==2"></el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
<el-card class="box-card" style="margin-bottom: 10px;"> |
||||
<div slot="header" class="clearfix"> |
||||
<span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>案例数据</span> |
||||
<el-button icon="el-icon-plus" type="primary" style="float: right;" circle size="mini" @click="toAddCaseData" v-if="formAction !=2"></el-button> |
||||
</div> |
||||
<div v-if="dataForm.caseDataList.length>0"> |
||||
<el-row> |
||||
<el-col :span="8" v-for="(file,index) in selectedItemRows" :key="index" style="width:380px;height:420px;margin: 0 20px 20px 0;"> |
||||
<el-card :body-style="{ padding: '0px' }"> |
||||
<viewer :options="imageViewerOptions" :images="[getFileUrl(file)]"> |
||||
<img :src="getFileUrl(file)" :alt="file.name" class="image" style="width:380px;height:380px"> |
||||
</viewer> |
||||
<div style="padding: 14px;text-align: center;"> |
||||
<span>{{file.name}}</span> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
<div style="text-align:center" v-else> |
||||
<span>暂无数据</span> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="box-card" style="margin-bottom: 10px;"> |
||||
<div slot="header" class="clearfix"> |
||||
<span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>判分设置</span> |
||||
<span style="float: right;vertical-align: middle;line-height: 29px;">合计：{{dataForm.totalScore}} 分</span> |
||||
</div> |
||||
<div> |
||||
<div style="margin-bottom: 10px;"> |
||||
<span class="item-title-font" style="padding-right: 10px">流程判分指标</span> |
||||
<el-button icon="el-icon-plus" type="primary" circle size="mini" @click="toAddTrade" v-if="formAction !=2"></el-button> |
||||
<el-button type="danger" icon="el-icon-delete" circle size="mini" v-if="isShowTradeDelBtn" @click="removeTradeItemBatch"></el-button> |
||||
</div> |
||||
<div> |
||||
<el-table ref="multipleTable" :data="dataForm.tradeList" border style="width: 100%" |
||||
:summary-method="getScoreSummaries" show-summary @selection-change="handleTradeSelectionChange"> |
||||
<el-table-column type="selection" width="60" :selectable="checkboxIsEnabled"></el-table-column> |
||||
<el-table-column type="index" label="序号" width="50"></el-table-column> |
||||
<el-table-column prop="oneLevelName" label="一级流程" width="200" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="twoLevelName" label="二级流程" width="220" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="lastLevelName" label="工单页面" width="238" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="tradeScorePoint" label="判分点" width="248" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="score" label="分数"> |
||||
<template slot-scope="scope"> |
||||
<el-form-item :prop="'tradeList.'+scope.$index+'.score'" :rules="dataRule.score" class="score-input"> |
||||
<el-input size="small" v-model.trim="scope.row.score" :disabled="formAction == 2"></el-input> |
||||
</el-form-item> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="190" v-if="formAction !=2"> |
||||
<template slot-scope="scope"> |
||||
<el-button size="mini" :disabled="scope.$index===0" @click="moveUpTradeItem(scope.$index,scope.row)"> |
||||
<i class="el-icon-arrow-up"></i> |
||||
</el-button> |
||||
<el-button size="mini" :disabled="scope.$index===(dataForm.tradeList.length-1)" @click="moveDownTradeItem(scope.$index,scope.row)"> |
||||
<i class="el-icon-arrow-down"></i> |
||||
</el-button> |
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeTradeItem(scope.row)"></el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-form> |
||||
<dict-case-data :dictCaseDataList="dictCaseDataList" @getData="getCaseData" @select="handleItemSelectionChange" v-else></dict-case-data> |
||||
<dict-trade-list v-if="tradeDialogVisible" :dialogVisible="tradeDialogVisible" :tradeNotInIds="tradeNotInIds" @closeDialog="closeTradeDialog" @doAddSelectTrade="doAddSelectTrade"></dict-trade-list> |
||||
</el-main> |
||||
</el-container> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// import DictCaseData from "./dictCaseData"; |
||||
// import DictTradeList from "./dictTradeList"; |
||||
|
||||
export default { |
||||
name: "case-detail" |
||||
name: 'case-detail', |
||||
// components: {DictTradeList, DictCaseData}, |
||||
data() { |
||||
// 自定义校验规则 |
||||
var validateScore = (rule, value, callback) => { |
||||
if (!value) { |
||||
callback(new Error('请输入分数')); |
||||
} else if (!(/^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/.test(value)) || value > 100) { |
||||
callback(new Error('请输入0-100之间最多两位小数的数字')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
var validateContent = (rule, value, callback) => { |
||||
if (!value.trim()) { |
||||
callback(new Error('请填写案例描述')); |
||||
} else if (value.length > 3000) { |
||||
callback(new Error('长度在 1 到 3000 个字符')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
return { |
||||
isShowData: false, |
||||
tradeDialogVisible: false, |
||||
isShowTradeDelBtn: false, |
||||
formAction: 0, // 0：add,1:edit,2:view |
||||
dataForm: { |
||||
id: '', |
||||
type: '', |
||||
name: '', |
||||
content: '', |
||||
totalScore: 0, |
||||
caseDataList: [], |
||||
tradeList: [], |
||||
isAdmin: 1, // 默认 管理员内置 |
||||
}, |
||||
dataRule: { |
||||
name: [ |
||||
{ required: true, message: '请输入项目名称', trigger: 'blur' }, |
||||
{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' } |
||||
], |
||||
type: [ |
||||
{ required: true, message: '请选择项目权限', trigger: 'change' } |
||||
], |
||||
content: [ |
||||
{validator: validateContent, trigger: 'blur'} |
||||
], |
||||
score: [ |
||||
{validator: validateScore, trigger: 'blur'} |
||||
], |
||||
}, |
||||
dictCaseDataList: [], |
||||
selectedItemRows: [], |
||||
selectedTradeItems: [], |
||||
delTradeItems: [], |
||||
tradeNotInIds: [], |
||||
imageViewerOptions: { |
||||
"inline": false, |
||||
"button": true, |
||||
"navbar": false, |
||||
"title": true, |
||||
"toolbar": { |
||||
zoomIn: true, |
||||
zoomOut: true, |
||||
oneToOne: true, |
||||
reset: true, |
||||
prev: false, |
||||
play: true, |
||||
next: false, |
||||
rotateLeft: false, |
||||
rotateRight: false, |
||||
flipHorizontal: false, |
||||
flipVertical: false, |
||||
}, |
||||
"tooltip": true, |
||||
"movable": true, |
||||
"zoomable": true, |
||||
"rotatable": true, |
||||
"scalable": true, |
||||
"transition": false, |
||||
"fullscreen": true, |
||||
"keyboard": false, |
||||
}, |
||||
} |
||||
}, |
||||
created() { |
||||
if (this.$route.query.id) { |
||||
this.dataForm.id = this.$route.query.id; |
||||
this.$http.get('/authapi/bs_projectManage/getDetail?id=' + this.dataForm.id).then(response => { |
||||
this.dataForm = response; |
||||
// 下拉框标签回显问题 |
||||
this.dataForm.type = String(response.type); |
||||
// 回显案例数据 |
||||
this.selectedItemRows = this.dataForm.caseDataList; |
||||
// 计分交易赋值 |
||||
this.selectedTradeItems = this.dataForm.tradeList; |
||||
|
||||
if (this.$route.query.isEdit === 1) { |
||||
// 编辑 |
||||
this.formAction = 1; |
||||
if (this.selectedTradeItems && this.selectedTradeItems.length > 0) { |
||||
this.isShowTradeDelBtn = true;// 显示删除按钮 |
||||
} |
||||
} else { |
||||
// 查看 |
||||
this.formAction = 2; |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
methods: { |
||||
goBackList() { |
||||
this.$router.push({name: 'ProjectList'}); |
||||
}, |
||||
goBackAdd() { |
||||
this.isShowData = false; |
||||
}, |
||||
toAddCaseData() { |
||||
// 页面滚动条回到顶部 |
||||
window.scrollTo(0, 0); |
||||
this.isShowData = true; |
||||
this.getCaseData(null); |
||||
}, |
||||
getCaseData(condition) { |
||||
this.$http.get('/authapi/bs_projectManage/getDictCaseDataList', {params: condition}).then(response => { |
||||
this.dictCaseDataList = response; |
||||
|
||||
// 对于已经确定勾选的，在此打开选择界面，需回显已勾选的数据 |
||||
if (this.selectedItemRows && this.selectedItemRows.length > 0) { |
||||
let selectedItemIds = this.selectedItemRows.map(function (row) { |
||||
return row.id; |
||||
}); |
||||
this.dictCaseDataList.forEach(p => { |
||||
if (selectedItemIds.indexOf(p.id) > -1) { |
||||
p.checked = true; |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
handleItemSelectionChange(val) { |
||||
this.selectedItemRows = val; |
||||
}, |
||||
doAddCaseData() { |
||||
if (!this.selectedItemRows || this.selectedItemRows.length === 0) { |
||||
this.$notify.warning({ |
||||
title: '系统提示', |
||||
message: '您没选择任何数据，请先选择！', |
||||
duration: 2000, |
||||
}); |
||||
return; |
||||
} |
||||
this.isShowData = false; |
||||
this.dataForm.caseDataList = this.selectedItemRows; |
||||
}, |
||||
cancelAddCaseData() { |
||||
this.isShowData = false; |
||||
this.selectedItemRows = this.dataForm.caseDataList; |
||||
}, |
||||
getFileUrl(file) { |
||||
return window.SITE_CONFIG['serverUrl'] + file.imgUrl; |
||||
}, |
||||
toAddTrade() { // 打开添加计分点弹窗 |
||||
this.tradeDialogVisible = true; |
||||
// 获取已添加的交易id集合 |
||||
this.tradeNotInIds = this.selectedTradeItems.map(item => { |
||||
return item.id; |
||||
}); |
||||
}, |
||||
doAddSelectTrade(val) {// 添加已选中的计分点到新增界面 |
||||
if (this.selectedTradeItems && this.selectedTradeItems.length > 0) { |
||||
// 追加val数组的所有元素 |
||||
this.selectedTradeItems.push.apply(this.selectedTradeItems, val); |
||||
} else { |
||||
this.selectedTradeItems = val; |
||||
} |
||||
this.dataForm.tradeList = this.selectedTradeItems; |
||||
this.dataForm.tradeList.forEach(item => { |
||||
this.$set(item, 'score', ''); |
||||
// this.$set(item, 'tradeId', item.id); |
||||
}); |
||||
|
||||
this.isShowTradeDelBtn = true;// 显示删除按钮 |
||||
}, |
||||
closeTradeDialog() { // 关闭计分点弹窗 |
||||
this.tradeDialogVisible = false; |
||||
}, |
||||
handleTradeSelectionChange(val) { |
||||
this.delTradeItems = val; |
||||
}, |
||||
checkboxIsEnabled() { // 复选框是否可用 |
||||
if (this.formAction === 2) { |
||||
return false; |
||||
} else { |
||||
return true; |
||||
} |
||||
}, |
||||
removeTradeItemBatch() { // 批量移除选中项 |
||||
if (!this.delTradeItems || this.delTradeItems.length === 0) { |
||||
this.$notify.warning({ |
||||
title: '系统提示', |
||||
message: '您没选择任何数据，请先选择！', |
||||
duration: 2000, |
||||
}); |
||||
return; |
||||
} |
||||
// 遍历当前选中项 |
||||
this.delTradeItems.forEach(item => { |
||||
if (this.selectedTradeItems.indexOf(item) > -1) { |
||||
// 移除当前项 |
||||
this.selectedTradeItems.splice(this.selectedTradeItems.indexOf(item), 1); |
||||
// this.dataForm.tradeList.splice(this.dataForm.tradeList.indexOf(item), 1); |
||||
} |
||||
}); |
||||
if (this.selectedTradeItems.length === 0) { |
||||
this.isShowTradeDelBtn = false; // 隐藏删除按钮 |
||||
} |
||||
}, |
||||
removeTradeItem(row) { // 移除当前行 |
||||
let index = this.selectedTradeItems.findIndex(item => { |
||||
return item.id == row.id; |
||||
}); |
||||
if (index > -1) { |
||||
this.selectedTradeItems.splice(this.selectedTradeItems.indexOf(row), 1); |
||||
} |
||||
}, |
||||
moveUpTradeItem(index,row) { // 向上移动 |
||||
let that = this; |
||||
// console.log('上移', index, row); |
||||
// console.log(that.dataForm.tradeList[index]); |
||||
if (index > 0) { |
||||
let upDate = that.dataForm.tradeList[index - 1]; |
||||
that.dataForm.tradeList.splice(index - 1, 1); |
||||
that.dataForm.tradeList.splice(index, 0, upDate); |
||||
} else { |
||||
alert('已经是第一条，不可上移'); |
||||
} |
||||
}, |
||||
moveDownTradeItem(index,row) { // 向下移动 |
||||
let that = this; |
||||
// console.log('下移', index, row); |
||||
if ((index + 1) === that.dataForm.tradeList.length) { |
||||
alert('已经是最后一条，不可下移'); |
||||
} else { |
||||
// console.log(index); |
||||
let downDate = that.dataForm.tradeList[index + 1]; |
||||
that.dataForm.tradeList.splice(index + 1, 1); |
||||
that.dataForm.tradeList.splice(index, 0, downDate); |
||||
} |
||||
}, |
||||
getScoreSummaries(param) { // 计算总分 |
||||
const { columns, data } = param; |
||||
const sums = []; |
||||
let values = []; |
||||
columns.forEach((column, index) => { |
||||
if (index === 0) { |
||||
sums[index] = '总分'; |
||||
return; |
||||
} |
||||
|
||||
if (index === 6) { // 分数栏 |
||||
values = data.map(item => Number(item['score'])); |
||||
sums[index] = values.reduce((prev, curr) => { |
||||
const value = Number(curr); |
||||
if (!isNaN(value)) { |
||||
return prev + curr; |
||||
} else { |
||||
return prev; |
||||
} |
||||
}, 0); |
||||
// 给右上角总分赋值 |
||||
this.$set(this.dataForm,'totalScore',sums[index]); |
||||
sums[index] += ' 分'; |
||||
} else { |
||||
sums[index] = '--'; |
||||
} |
||||
}); |
||||
|
||||
return sums; |
||||
}, |
||||
submitForm(formName) { |
||||
let self = this; |
||||
self.$refs[formName].validate((valid) => { |
||||
if (valid) { |
||||
let totalScore = self.dataForm.totalScore; |
||||
if (totalScore === 0) { |
||||
self.$notify.error({ |
||||
title: '错误提示', |
||||
message: '判分设置模块没有添加计分点！', |
||||
duration: 2000, |
||||
}); |
||||
return; |
||||
} else if (totalScore > 100) { |
||||
self.$notify.error({ |
||||
title: '错误提示', |
||||
message: '判分设置模块总分超过100分！', |
||||
duration: 2000, |
||||
}); |
||||
return; |
||||
} else if (totalScore < 100) { |
||||
self.$notify.error({ |
||||
title: '错误提示', |
||||
message: '判分设置模块总分不足100分！', |
||||
duration: 2000, |
||||
}); |
||||
return; |
||||
} |
||||
// userType 0学生 1教师 2管理员 |
||||
if (self.formAction == 0 && self.$store.state.app.user.userType) { |
||||
self.dataForm.isAdmin = self.$store.state.app.user.userType == 1 ? 0 : 1; |
||||
} |
||||
|
||||
self.$http.post('/authapi/bs_projectManage/addOrUpdateProject', self.dataForm).then(response => { |
||||
if(response.status==1) { |
||||
self.dataForm = Object.assign({}, self.dataForm, response.id); |
||||
self.formAction = 1; |
||||
self.$notify.success({ |
||||
title: '操作成功！', |
||||
message: '新增项目成功！', |
||||
duration: 2000, |
||||
}); |
||||
self.goBackList(); |
||||
}else{ |
||||
self.$message.error(response.msg); |
||||
} |
||||
}).catch(error => { |
||||
self.$message.error(error); |
||||
}) |
||||
} else { |
||||
self.$notify.error({ |
||||
title: '错误提示', |
||||
message: '系统输入验证失败！', |
||||
duration: 2000, |
||||
}); |
||||
return false; |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
<style lang="scss" scoped> |
||||
.clearfix:before, |
||||
.clearfix:after { |
||||
display: table; |
||||
content: ""; |
||||
} |
||||
|
||||
.clearfix:after { |
||||
clear: both |
||||
} |
||||
|
||||
.box-card { |
||||
width: 100%; |
||||
} |
||||
|
||||
.project-add { |
||||
.add-header { |
||||
background-color: white; |
||||
padding: 5px 20px; |
||||
/deep/ .el-page-header__content { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
/deep/ .el-card__header { |
||||
border-bottom: 1px dashed #c9cacc; |
||||
padding-bottom: 10px; |
||||
padding-top: 10px; |
||||
height: auto; |
||||
} |
||||
|
||||
.content-item { |
||||
width: 100%; |
||||
/deep/ .el-form-item__content { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
/deep/ .el-form-item.is-required .el-form-item__label:after { |
||||
content: ''; |
||||
} |
||||
|
||||
.score-input { |
||||
margin-bottom: 0px; |
||||
/deep/ .el-form-item__error { |
||||
position: unset; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.icon-minus-rotated:before { |
||||
-ms-transform: rotate(90deg); /* IE 9 */ |
||||
-moz-transform: rotate(90deg); /* Firefox */ |
||||
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */ |
||||
-o-transform: rotate(90deg); /* Opera */ |
||||
transform: rotate(90deg); |
||||
display: inline-block; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.item-title-font { |
||||
font-weight: bold; |
||||
font-size: 15px; |
||||
vertical-align: middle; |
||||
line-height: 29px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue