实训设计列表功能
This commit is contained in:
parent
fda477c08b
commit
b3652b84b0
58
src/api/trainingManage.js
Normal file
58
src/api/trainingManage.js
Normal file
@ -0,0 +1,58 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/** 获取当前用户的所有实训草稿数据 */
|
||||
export function getAllTrainingList(params) {
|
||||
return request({
|
||||
url: `/api/v2/draft/training/all`,
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
/** 分页获取当前用户的实训草稿数据 */
|
||||
export function getTrainingList(data) {
|
||||
return request({
|
||||
url: `/api/v2/draft/training/info/page`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
/** 创建实训草稿 */
|
||||
export function createTraining(data) {
|
||||
return request({
|
||||
url: `/api/v2/draft/training/create`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
/** 更新当前用户的某个实训草稿 */
|
||||
export function updateTraining(data) {
|
||||
return request({
|
||||
url: `/api/v2/draft/training`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
/** 修改实训所有步骤 */
|
||||
export function updateTrainingStep(id, data) {
|
||||
return request({
|
||||
url: ` /api/v2/draft/training/${id}/step/update`,
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
/** 删除当前用户的实训草稿 */
|
||||
export function deleteTraining(data) {
|
||||
return request({
|
||||
url: `/api/v2/draft/training`,
|
||||
method: 'delete',
|
||||
data: {trainingDraftIds: data}
|
||||
});
|
||||
}
|
||||
/** 当前用户发布自己的实训草稿 */
|
||||
export function publishTraining(data) {
|
||||
return request({
|
||||
url: `/api/v2/draft/training/publish`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
@ -253,6 +253,10 @@ export default {
|
||||
{ label: 'S', value: 'S' },
|
||||
{ label: 'SF', value: 'SF' },
|
||||
{ label: 'SD', value: 'SD' }
|
||||
],
|
||||
trainingType: [ // 实训类型
|
||||
{ enlabel: 'single operation', label: '单操', value: 'single'},
|
||||
{ enlabel: 'scene operation', label: '场景', value: 'scene'}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
@ -2,6 +2,7 @@
|
||||
<div class="train">
|
||||
<div v-show="maskOpen" class="trainMask" />
|
||||
<jlmap-visual ref="jlmapVisual" />
|
||||
<menu-demon ref="menuDemon" />
|
||||
<voice-chat-box v-if="$route.query.lineCode == '16'" ref="chatbox" :group="group" :user-role="userRole" />
|
||||
<chat-box v-else ref="chatbox" :group="group" :user-role="userRole" />
|
||||
<div class="trainBack">
|
||||
@ -19,11 +20,12 @@ import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import chatBox from '@/views/newMap/chatView/chatBox.vue';
|
||||
import VoiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
|
||||
|
||||
import MenuDemon from '@/views/trainingManage/demonMenu.vue';
|
||||
export default {
|
||||
name: 'TrainingDesign',
|
||||
components: {
|
||||
JlmapVisual,
|
||||
MenuDemon,
|
||||
chatBox,
|
||||
VoiceChatBox
|
||||
},
|
||||
|
122
src/views/trainingManage/create.vue
Normal file
122
src/views/trainingManage/create.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :modal="false" :before-close="doClose" center>
|
||||
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doCreate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createTraining, updateTraining } from '@/api/trainingManage';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
isCreate: true,
|
||||
formModel: {
|
||||
name: '',
|
||||
mapId: '',
|
||||
description:'',
|
||||
type: '',
|
||||
labelJson: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
let t = '新建实训';
|
||||
if (!this.isCreate) {
|
||||
t = '编辑实训';
|
||||
}
|
||||
return t;
|
||||
},
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '60px',
|
||||
items: [
|
||||
{ prop: 'name', label: '名称', type: 'text' },
|
||||
{ prop: 'description', label: '描述', type: 'textarea' },
|
||||
{ prop: 'type', label: '类型', type: 'select', options: ConstConfig.ConstSelect.trainingType },
|
||||
{ prop: 'labelJson', label: '标签', type: 'text' }
|
||||
|
||||
]
|
||||
};
|
||||
return form;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
name: [
|
||||
{ required: true, validator: this.validateName, trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ required: true, validator: this.validateDescription, trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择实训类型', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
return crules;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateName(rule, value, callback) {
|
||||
if (value.trim().length == 0) {
|
||||
this.formModel.name = this.formModel.name.replace(/\s/g, '');
|
||||
return callback(new Error('请输入实训名称'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
validateDescription(rule, value, callback) {
|
||||
if (value.trim().length == 0) {
|
||||
this.formModel.description = this.formModel.description.replace(/\s/g, '');
|
||||
return callback(new Error('请输入实训描述'));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
},
|
||||
doShow(data) {
|
||||
if (data) {
|
||||
this.isCreate = false;
|
||||
this.formModel = {...data};
|
||||
} else {
|
||||
this.isCreate = true;
|
||||
this.formModel = {
|
||||
name: '',
|
||||
mapId: this.$route.query.mapId,
|
||||
description:'',
|
||||
type: '',
|
||||
labelJson: ''
|
||||
};
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doCreate() {
|
||||
this.$refs.dataform.validateForm(async() => {
|
||||
if (this.isCreate) {
|
||||
await createTraining(this.formModel);
|
||||
} else {
|
||||
await updateTraining(this.formModel);
|
||||
}
|
||||
this.$emit('edit');
|
||||
this.doClose();
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.$refs.dataform.resetForm();
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-dialog--center .el-dialog__body{
|
||||
padding: 25px 65px 30px 10px;
|
||||
}
|
||||
</style>
|
86
src/views/trainingManage/demonMenu.vue
Normal file
86
src/views/trainingManage/demonMenu.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="display_top_draft">
|
||||
<div class="btn_hover" @click="menuClick">菜单</div>
|
||||
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:${btnWidth}px`">
|
||||
<el-button size="small" @click="showList">实训列表</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<TrainingList ref="trainingList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TrainingList from './trainingList.vue';
|
||||
export default {
|
||||
name:'DemonMenu',
|
||||
components:{
|
||||
TrainingList
|
||||
},
|
||||
props:{
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hoverBtn: false,
|
||||
btnWidth: -600
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
menuClick() {
|
||||
this.hoverBtn = !this.hoverBtn;
|
||||
if (this.hoverBtn) {
|
||||
this.btnWidth = 0; // 默认宽度
|
||||
} else {
|
||||
this.btnWidth = -600;
|
||||
}
|
||||
},
|
||||
showList() {
|
||||
this.$refs.trainingList.doShow();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.display_top_draft{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding-left: 44px;
|
||||
z-index: 35;
|
||||
.btn_hover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: #4e4d4d;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 32px;
|
||||
}
|
||||
.button_group_box{
|
||||
float: left;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
183
src/views/trainingManage/trainingList.vue
Normal file
183
src/views/trainingManage/trainingList.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag title="实训管理" :visible.sync="dialogVisible" width="1000px" :before-close="doClose" center>
|
||||
<div>
|
||||
<div class="scriptHeader">
|
||||
<div class="scriptList">实训草稿列表</div>
|
||||
<div class="flexNull" />
|
||||
<el-button size="small" type="primary" class="createScript" @click="handleCreate">{{ $t('scriptRecord.scriptCreate') }}</el-button>
|
||||
</div>
|
||||
<QueryListPage ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
|
||||
<Create ref="create" v-dialogDrag @edit="getListData" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTrainingList} from '@/api/trainingManage';
|
||||
import Cookies from 'js-cookie';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Create from './create.vue';
|
||||
import { deleteTraining, publishTraining } from '@/api/trainingManage';
|
||||
import { admin, superAdmin} from '@/router/index';
|
||||
|
||||
export default {
|
||||
name: 'TrainingList',
|
||||
components:{
|
||||
Create
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '100px',
|
||||
reset: true,
|
||||
show:false
|
||||
},
|
||||
queryList: {
|
||||
query: this.queryFunction,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: '实训名称',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
prop: 'description'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
prop: 'type',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.covertData(row); },
|
||||
tagType: (row) => { return ''; }
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
prop: 'labelJson'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
title: this.$t('scriptRecord.operate'),
|
||||
width: '450',
|
||||
buttons: [
|
||||
{
|
||||
name: this.$t('scriptRecord.scriptRecord'),
|
||||
handleClick: this.drawUp,
|
||||
type: 'success',
|
||||
showControl:(row) => { return row.id; }
|
||||
},
|
||||
{
|
||||
name: this.$t('scriptRecord.scriptModify'),
|
||||
handleClick: this.handleModify,
|
||||
type: 'primary',
|
||||
showControl:(row) => { return row.id; }
|
||||
},
|
||||
{
|
||||
name: this.$t('scriptRecord.scriptDelete'),
|
||||
handleClick: this.deleteScript,
|
||||
type: 'danger',
|
||||
showControl:(row) => { return row.id; }
|
||||
},
|
||||
{
|
||||
name: this.$t('scriptRecord.publish'),
|
||||
handleClick: this.publishScript,
|
||||
type: 'primary',
|
||||
showControl:(row) => { return row.id; }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
queryFunction(params) {
|
||||
return getTrainingList(params);
|
||||
},
|
||||
doShow() {
|
||||
this.getListData();
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handleCreate() {
|
||||
this.$refs.create.doShow(null);
|
||||
},
|
||||
covertData(row) {
|
||||
const releaseReview = ConstConfig.ConstSelect.trainingType;
|
||||
const lastData = Object.assign({}, row);
|
||||
if (Cookies.get('user_lang') == 'en') {
|
||||
releaseReview.forEach(function(element) {
|
||||
const rolename = element.value;
|
||||
if (lastData.type == rolename) {
|
||||
lastData.type = element.enlabel;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
releaseReview.forEach(function(element) {
|
||||
const rolename = element.value;
|
||||
if (lastData.type == rolename) {
|
||||
lastData.type = element.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
return lastData.type;
|
||||
},
|
||||
drawUp(index, row) {
|
||||
console.log('编辑', index, row);
|
||||
},
|
||||
handleModify(index, row) {
|
||||
console.log('修改', index, row);
|
||||
if (!row.id) { return; }
|
||||
this.$refs.create.doShow(row);
|
||||
},
|
||||
deleteScript(index, row) {
|
||||
console.log('删除', index, row);
|
||||
if (!row.id) { return; }
|
||||
deleteTraining([row.id]).then(res => {
|
||||
console.log('删除实训成功', res);
|
||||
this.getListData();
|
||||
}).catch(err => {
|
||||
console.log('删除实训失败', err);
|
||||
this.getListData();
|
||||
});
|
||||
},
|
||||
publishScript(index, row) {
|
||||
console.log('发布', index, row);
|
||||
if (!row.id) { return; }
|
||||
publishTraining({draftId: row.id}).then(res => {
|
||||
console.log('发布实训成功', res);
|
||||
}).catch(err => {
|
||||
console.log('发布实训失败', err);
|
||||
});
|
||||
},
|
||||
getListData() {
|
||||
this.$refs.queryListPage && this.$refs.queryListPage.commitQuery();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-dialog--center .el-dialog__body{
|
||||
padding: 10px 25px 10px 25px;
|
||||
}
|
||||
.scriptHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 5px;
|
||||
.flexNull {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user