joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

代码调整

Browse Source
This commit is contained in:
dong 2022-09-01 12:05:22 +08:00
parent 6b6d8ac871
commit 0b69add8bf
3 changed files with 138 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/trainingManage/demonMenu.vue
View File

@ -7,7 +7,7 @@
</el-button-group> </el-button-group>
</div> </div>
<TrainingList ref="trainingList" @updateDetails="updateDetails" @gradeRules="gradeRules" /> <TrainingList ref="trainingList" @updateDetails="updateDetails" @gradeRules="gradeRules" />
<EditDetails ref="editDetails" v-dialogDrag :edit-data="editData" @openEditOperate="openEditOperate" @handleCondition="handleCondition" /> <EditDetails ref="editDetails" :edit-data="editData" @openEditOperate="openEditOperate" @handleCondition="handleCondition" />
<EditCondition ref="editCondition" v-dialogDrag :materials-list="materialsList" @editConditionFn="editConditionFn" /> <EditCondition ref="editCondition" v-dialogDrag :materials-list="materialsList" @editConditionFn="editConditionFn" />
<edit-operate ref="editOperate" v-dialogDrag @backStepList="backStepList" /> <edit-operate ref="editOperate" v-dialogDrag @backStepList="backStepList" />
<grade-rules ref="gradeRules" /> <grade-rules ref="gradeRules" />

227
src/views/trainingManage/editDetails.vue
View File

@ -1,68 +1,96 @@
<template> <template>
<div> <div class="editContent" :class="{'active': dialogVisible}">
<div class="editContentTab"> <div class="editContentTab">
<div v-if="tabVisible && record" class="editContentTabLable" @click="minisize"> <div v-if="tabVisible && record" class="editContentTabLable" @click="minisize">
<span class="titleStyle">{{ $t('trainingManage.editTagTitle') }}</span> <span class="titleStyle">{{ $t('trainingManage.editTagTitle') }}</span>
</div> </div>
</div> </div>
<el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" :modal="false" :close-on-click-modal="false" :before-close="doClose" center :style="{'margin-left': dialogMarginLeft + 'px'}"> <el-tabs v-model="activeName" type="card">
<div class="stepListBox"> <el-tab-pane label="步骤列表" name="stepList">
<el-button size="small" type="primary" @click="addStep">新增步骤</el-button> <div class="tabPaneBox">
<el-table <div class="tabPaneHead">
:data="tableData" <el-button size="small" type="primary" @click="addStep">新增步骤</el-button>
height="500px" </div>
border <el-table
> :data="tableData"
<el-table-column type="index" label="序号" width="50" /> :max-height="tableHeight"
<el-table-column :label="$t('trainingManage.roleSelect')" width="200"> border
<template slot-scope="scope"> >
<el-select v-model="scope.row.memberId" placeholder="请选择" size="mini"> <el-table-column type="index" label="序号" width="50" />
<el-option <el-table-column :label="$t('trainingManage.roleSelect')" width="200">
v-for="item in roleList" <template slot-scope="scope">
:key="item.id" <el-select v-model="scope.row.memberId" placeholder="请选择" size="mini">
:label="item.label" <el-option
:value="item.id" v-for="item in roleList"
/> :key="item.id"
</el-select> :label="item.label"
</template> :value="item.id"
</el-table-column> />
<el-table-column :label="$t('trainingManage.stepDescription')"> </el-select>
<template slot-scope="scope"> </template>
<el-input v-model="scope.row.description" placeholder="请输入步骤描述" size="mini" /> </el-table-column>
</template> <el-table-column :label="$t('trainingManage.stepDescription')">
</el-table-column> <template slot-scope="scope">
<el-table-column :label="$t('trainingManage.triggerCondition')"> <el-input v-model="scope.row.description" placeholder="请输入步骤描述" size="mini" />
<template slot-scope="scope"> </template>
<span>{{ getConditionName(scope.row, 'triggerCondition') }}</span> </el-table-column>
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'triggerCondition')">{{ $t('global.edit') }}</el-button> <el-table-column :label="$t('trainingManage.triggerCondition')">
</template> <template slot-scope="scope">
</el-table-column> <span>{{ getConditionName(scope.row, 'triggerCondition') }}</span>
<el-table-column :label="$t('trainingManage.completionCondition')"> <el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'triggerCondition')">{{ $t('global.edit') }}</el-button>
<template slot-scope="scope"> </template>
<span>{{ getConditionName(scope.row, 'completionCondition') }}</span> </el-table-column>
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'completionCondition')">{{ $t('global.edit') }}</el-button> <el-table-column :label="$t('trainingManage.completionCondition')">
</template> <template slot-scope="scope">
</el-table-column> <span>{{ getConditionName(scope.row, 'completionCondition') }}</span>
<el-table-column :label="$t('trainingManage.operateCondition')"> <el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'completionCondition')">{{ $t('global.edit') }}</el-button>
<template slot-scope="scope"> </template>
<span>{{ getConditionName(scope.row, 'operateCondition') }}</span> </el-table-column>
<el-button style="margin-left: 10px" size="mini" @click="handleEditOperate(scope.$index, scope.row)">{{ $t('global.edit') }}</el-button> <el-table-column :label="$t('trainingManage.operateCondition')">
</template> <template slot-scope="scope">
</el-table-column> <span>{{ getConditionName(scope.row, 'operateCondition') }}</span>
<el-table-column :label="$t('global.operate')" width="90"> <el-button style="margin-left: 10px" size="mini" @click="handleEditOperate(scope.$index, scope.row)">{{ $t('global.edit') }}</el-button>
<template slot-scope="scope"> </template>
<!-- <el-button size="mini" type="primary" @click="handleEditOperate(scope.$index, scope.row)">编辑操作</el-button> --> </el-table-column>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('global.delete') }}</el-button> <el-table-column :label="$t('global.operate')" width="90">
</template> <template slot-scope="scope">
</el-table-column> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('global.delete') }}</el-button>
</el-table> </template>
</div> </el-table-column>
<span slot="footer" class="dialog-footer"> </el-table>
<el-button size="small" type="primary" @click="updateMapLocation">{{ $t('trainingManage.mapLocation') }}</el-button> <div class="tabPaneFooter">
<el-button size="small" type="primary" @click="saveScenesStage">{{ $t('trainingManage.saveBackground') }}</el-button> <el-button size="small" type="success" @click="saveStepData">{{ $t('trainingManage.saveStepData') }}</el-button>
<el-button size="small" type="success" @click="saveStepData">{{ $t('trainingManage.saveStepData') }}</el-button> </div>
</span> </div>
</el-dialog> </el-tab-pane>
<el-tab-pane label="地图定位" name="mapLocation">
<div class="tabPaneBox">
<div>
<el-form ref="form" :model="mapLocationObj" label-width="80px">
<el-form-item label="X坐标">
<span>{{ mapLocationObj.x || '' }}</span>
</el-form-item>
<el-form-item label="Y坐标">
<span>{{ mapLocationObj.y || '' }}</span>
</el-form-item>
<el-form-item label="缩放">
<span>{{ mapLocationObj.scale || '' }}</span>
</el-form-item>
</el-form>
</div>
<div class="tabPaneFooter">
<el-button size="small" type="primary" @click="updateMapLocation">{{ $t('trainingManage.mapLocation') }}</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="背景" name="Background">
<div class="tabPaneBox">
<div class="tabPaneFooter">
<el-button size="small" type="primary" @click="saveScenesStage">{{ $t('trainingManage.saveBackground') }}</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div> </div>
</template> </template>
@ -90,30 +118,19 @@ export default {
dialogVisible: false, dialogVisible: false,
roleList: [], roleList: [],
tableData: [], tableData: [],
formModel: { activeName: 'stepList',
mapLocationJson: '', mapLocationObj: {},
// runPlanId:'', bgSceneObj: {}
// operaJson: '',
stepJson: '',
scoringRuleJson: '',
// memberJson: '',
// playerIdJson: '',
failureConditionJson: ''
}
}; };
}, },
computed: { computed: {
record() { // 编制 record() { // 编制
return this.$route.query.record; return this.$route.query.record;
}, },
title() { tableHeight() {
const t = this.$t('trainingManage.editTagTitle'); const s = 160;
return t; const h = this.$store.state.app.height;
}, return h - s;
dialogMarginLeft() {
const w = this.$store.state.app.width;
const ml = (w - parseInt(this.dialogWidth)) / 2;
return ml;
}, },
group() { group() {
return this.$route.query.group; return this.$route.query.group;
@ -135,6 +152,16 @@ export default {
}); });
this.roleList = list; this.roleList = list;
} }
},
editData() {
this.mapLocationObj = {};
if (this.editData['mapLocationJson']) {
this.mapLocationObj = JSON.parse(this.editData['mapLocationJson']);
}
this.bgSceneObj = {};
if (this.editData['bgSceneJson']) {
this.bgSceneObj = JSON.parse(this.editData['bgSceneJson']);
}
} }
}, },
methods: { methods: {
@ -218,10 +245,9 @@ export default {
this.doClose(); this.doClose();
}, },
minisize() { minisize() {
this.dialogVisible = true; this.dialogVisible = !this.dialogVisible;
}, },
doShow(data) { doShow(data) {
// this.getTrainingAllInfo(data);
this.getStepList(data); this.getStepList(data);
this.dialogVisible = true; this.dialogVisible = true;
this.tabVisible = true; this.tabVisible = true;
@ -259,20 +285,9 @@ export default {
}, },
getTrainingAllInfo(data) { getTrainingAllInfo(data) {
getTrainingAll(data.id).then(res => { getTrainingAll(data.id).then(res => {
Object.keys(this.formModel).forEach(key => { console.log(res, '获取详细信息成功');
this.formModel[key] = res.data[key] || '';
if (key == 'stepJson') {
const sList = res.data[key] ? JSON.parse(res.data[key]) : [];
this.tableData = Object.prototype.toString.call(sList) === '[object Array]' ? sList : [];
}
});
console.log(res, this.formModel, '获取详细信息成功');
}).catch(err => { }).catch(err => {
console.log(err, '获取详细信息失败'); console.log(err, '获取详细信息失败');
Object.keys(this.formModel).forEach(key => {
this.formModel[key] = '';
});
this.tableData = [];
}); });
}, },
updateMapLocation() { updateMapLocation() {
@ -281,7 +296,7 @@ export default {
updateTrainingMaplocation({id: this.editData.id, mapLocationJson: JSON.stringify(params)}).then(res => { updateTrainingMaplocation({id: this.editData.id, mapLocationJson: JSON.stringify(params)}).then(res => {
console.log('保存地图定位成功！', res); console.log('保存地图定位成功！', res);
this.$message.success('保存地图定位成功！'); this.$message.success('保存地图定位成功！');
this.formModel.mapLocationJson = JSON.stringify(params); this.mapLocationObj = params;
}).catch(err => { }).catch(err => {
console.log('保存地图定位失败', err); console.log('保存地图定位失败', err);
this.$message.error('保存地图定位失败'); this.$message.error('保存地图定位失败');
@ -300,6 +315,20 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.editContent {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 800px;
transform: translateX(800px);
transition: all 0.4s;
z-index: 35;
background: #fff;
&.active{
transform: translateX(0px);
}
}
/deep/ .el-dialog__wrapper { /deep/ .el-dialog__wrapper {
width: 1px; width: 1px;
height: 1px; height: 1px;
@ -312,7 +341,7 @@ export default {
.editContentTab{ .editContentTab{
position: absolute; position: absolute;
z-index: 10; z-index: 10;
right: 12px; left: -12px;
top: calc(45% + 100px); top: calc(45% + 100px);
} }
.editContentTabLable{ .editContentTabLable{
@ -320,11 +349,21 @@ export default {
background: #fff; background: #fff;
border-radius: 5px 0px 0px 5px ; border-radius: 5px 0px 0px 5px ;
padding: 5px 0px; padding: 5px 0px;
width: 23px; width: 24px;
text-align: center; text-align: center;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
cursor: pointer; cursor: pointer;
top:-28px; top:-28px;
} }
.tabPaneBox {
padding: 0 20px;
.tabPaneHead, .tabPaneFooter {
padding: 10px 0;
}
.tabPaneFooter {
display: flex;
justify-content: center;
}
}
</style> </style>

6
src/views/trainingManage/trainingList.vue
View File

@ -196,13 +196,15 @@ export default {
const mapLocation = JSON.parse(resp.data.mapLocationJson); const mapLocation = JSON.parse(resp.data.mapLocationJson);
this.$jlmap.updateTransform(mapLocation.scale, {x:mapLocation.x, y:mapLocation.y}); this.$jlmap.updateTransform(mapLocation.scale, {x:mapLocation.x, y:mapLocation.y});
} }
this.$emit('updateDetails', resp.data);
this.doClose();
}).catch((e) => { }).catch((e) => {
console.error(e); console.error(e);
this.$emit('updateDetails', {});
this.$message.error('获取实训详情信息失败！'); this.$message.error('获取实训详情信息失败！');
}); });
loadTrainingBg(this.$route.query.group, row.id).then(resp => { loadTrainingBg(this.$route.query.group, row.id).then(resp => {
this.$emit('updateDetails', row); console.log('加载草稿实训背景', resp);
this.doClose();
}).catch(() => { }).catch(() => {
this.$message.error('加载草稿实训背景失败！'); this.$message.error('加载草稿实训背景失败！');
}); });