代码调整
This commit is contained in:
dong
parent
6b6d8ac871
commit
0b69add8bf
@ -7,7 +7,7 @@
|
||||
</el-button-group>
|
||||
</div>
|
||||
<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" />
|
||||
<edit-operate ref="editOperate" v-dialogDrag @backStepList="backStepList" />
|
||||
<grade-rules ref="gradeRules" />
|
||||
|
||||
@ -1,68 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="editContent" :class="{'active': dialogVisible}">
|
||||
<div class="editContentTab">
|
||||
<div v-if="tabVisible && record" class="editContentTabLable" @click="minisize">
|
||||
<span class="titleStyle">{{ $t('trainingManage.editTagTitle') }}</span>
|
||||
</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'}">
|
||||
<div class="stepListBox">
|
||||
<el-button size="small" type="primary" @click="addStep">新增步骤</el-button>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
height="500px"
|
||||
border
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="50" />
|
||||
<el-table-column :label="$t('trainingManage.roleSelect')" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.memberId" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.stepDescription')">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.description" placeholder="请输入步骤描述" size="mini" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.triggerCondition')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row, 'triggerCondition') }}</span>
|
||||
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'triggerCondition')">{{ $t('global.edit') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.completionCondition')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row, 'completionCondition') }}</span>
|
||||
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'completionCondition')">{{ $t('global.edit') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.operateCondition')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row, 'operateCondition') }}</span>
|
||||
<el-button style="margin-left: 10px" size="mini" @click="handleEditOperate(scope.$index, scope.row)">{{ $t('global.edit') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('global.operate')" width="90">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button size="mini" type="primary" @click="handleEditOperate(scope.$index, scope.row)">编辑操作</el-button> -->
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('global.delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" type="primary" @click="updateMapLocation">{{ $t('trainingManage.mapLocation') }}</el-button>
|
||||
<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>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="步骤列表" name="stepList">
|
||||
<div class="tabPaneBox">
|
||||
<div class="tabPaneHead">
|
||||
<el-button size="small" type="primary" @click="addStep">新增步骤</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:max-height="tableHeight"
|
||||
border
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="50" />
|
||||
<el-table-column :label="$t('trainingManage.roleSelect')" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.memberId" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.stepDescription')">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.description" placeholder="请输入步骤描述" size="mini" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.triggerCondition')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row, 'triggerCondition') }}</span>
|
||||
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'triggerCondition')">{{ $t('global.edit') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.completionCondition')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row, 'completionCondition') }}</span>
|
||||
<el-button style="margin-left: 10px" size="mini" @click="handleCondition(scope.$index, scope.row, 'completionCondition')">{{ $t('global.edit') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('trainingManage.operateCondition')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row, 'operateCondition') }}</span>
|
||||
<el-button style="margin-left: 10px" size="mini" @click="handleEditOperate(scope.$index, scope.row)">{{ $t('global.edit') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('global.operate')" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('global.delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="tabPaneFooter">
|
||||
<el-button size="small" type="success" @click="saveStepData">{{ $t('trainingManage.saveStepData') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -90,30 +118,19 @@ export default {
|
||||
dialogVisible: false,
|
||||
roleList: [],
|
||||
tableData: [],
|
||||
formModel: {
|
||||
mapLocationJson: '',
|
||||
// runPlanId:'',
|
||||
// operaJson: '',
|
||||
stepJson: '',
|
||||
scoringRuleJson: '',
|
||||
// memberJson: '',
|
||||
// playerIdJson: '',
|
||||
failureConditionJson: ''
|
||||
}
|
||||
activeName: 'stepList',
|
||||
mapLocationObj: {},
|
||||
bgSceneObj: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
record() { // 编制
|
||||
return this.$route.query.record;
|
||||
},
|
||||
title() {
|
||||
const t = this.$t('trainingManage.editTagTitle');
|
||||
return t;
|
||||
},
|
||||
dialogMarginLeft() {
|
||||
const w = this.$store.state.app.width;
|
||||
const ml = (w - parseInt(this.dialogWidth)) / 2;
|
||||
return ml;
|
||||
tableHeight() {
|
||||
const s = 160;
|
||||
const h = this.$store.state.app.height;
|
||||
return h - s;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
@ -135,6 +152,16 @@ export default {
|
||||
});
|
||||
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: {
|
||||
@ -218,10 +245,9 @@ export default {
|
||||
this.doClose();
|
||||
},
|
||||
minisize() {
|
||||
this.dialogVisible = true;
|
||||
this.dialogVisible = !this.dialogVisible;
|
||||
},
|
||||
doShow(data) {
|
||||
// this.getTrainingAllInfo(data);
|
||||
this.getStepList(data);
|
||||
this.dialogVisible = true;
|
||||
this.tabVisible = true;
|
||||
@ -259,20 +285,9 @@ export default {
|
||||
},
|
||||
getTrainingAllInfo(data) {
|
||||
getTrainingAll(data.id).then(res => {
|
||||
Object.keys(this.formModel).forEach(key => {
|
||||
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, '获取详细信息成功');
|
||||
console.log(res, '获取详细信息成功');
|
||||
}).catch(err => {
|
||||
console.log(err, '获取详细信息失败');
|
||||
Object.keys(this.formModel).forEach(key => {
|
||||
this.formModel[key] = '';
|
||||
});
|
||||
this.tableData = [];
|
||||
});
|
||||
},
|
||||
updateMapLocation() {
|
||||
@ -281,7 +296,7 @@ export default {
|
||||
updateTrainingMaplocation({id: this.editData.id, mapLocationJson: JSON.stringify(params)}).then(res => {
|
||||
console.log('保存地图定位成功！', res);
|
||||
this.$message.success('保存地图定位成功！');
|
||||
this.formModel.mapLocationJson = JSON.stringify(params);
|
||||
this.mapLocationObj = params;
|
||||
}).catch(err => {
|
||||
console.log('保存地图定位失败', err);
|
||||
this.$message.error('保存地图定位失败');
|
||||
@ -300,6 +315,20 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<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 {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@ -312,7 +341,7 @@ export default {
|
||||
.editContentTab{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 12px;
|
||||
left: -12px;
|
||||
top: calc(45% + 100px);
|
||||
}
|
||||
.editContentTabLable{
|
||||
@ -320,11 +349,21 @@ export default {
|
||||
background: #fff;
|
||||
border-radius: 5px 0px 0px 5px ;
|
||||
padding: 5px 0px;
|
||||
width: 23px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
cursor: pointer;
|
||||
top:-28px;
|
||||
}
|
||||
.tabPaneBox {
|
||||
padding: 0 20px;
|
||||
.tabPaneHead, .tabPaneFooter {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.tabPaneFooter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -196,13 +196,15 @@ export default {
|
||||
const mapLocation = JSON.parse(resp.data.mapLocationJson);
|
||||
this.$jlmap.updateTransform(mapLocation.scale, {x:mapLocation.x, y:mapLocation.y});
|
||||
}
|
||||
this.$emit('updateDetails', resp.data);
|
||||
this.doClose();
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.$emit('updateDetails', {});
|
||||
this.$message.error('获取实训详情信息失败！');
|
||||
});
|
||||
loadTrainingBg(this.$route.query.group, row.id).then(resp => {
|
||||
this.$emit('updateDetails', row);
|
||||
this.doClose();
|
||||
console.log('加载草稿实训背景', resp);
|
||||
}).catch(() => {
|
||||
this.$message.error('加载草稿实训背景失败！');
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user