From 546029e4ad7e6518c6ce6c9528e70c9696a65958 Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Tue, 23 Aug 2022 15:17:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E8=AE=AD=E7=BC=96=E5=88=B6=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trainingManage.js                     |  25 +-
 .../QueryListPage/QueryListPage.vue           |   3 +
 src/i18n/langs/en/trainingManage.js           |  13 +-
 src/i18n/langs/zh/trainingManage.js           |  13 +-
 src/scripts/ConstConfig.js                    |   4 +-
 src/views/trainingManage/EditContent.vue      | 231 ++++++++++++------
 src/views/trainingManage/demonMenu.vue        |  12 +-
 src/views/trainingManage/trainingList.vue     |   1 -
 8 files changed, 222 insertions(+), 80 deletions(-)

diff --git a/src/api/trainingManage.js b/src/api/trainingManage.js
index 3d03fe652..1f6da9c1a 100644
--- a/src/api/trainingManage.js
+++ b/src/api/trainingManage.js
@@ -32,10 +32,17 @@ export function updateTraining(data) {
         data
     });
 }
+/** 查询步骤列表 */
+export function getTrainingStepList(trainingId) {
+    return request({
+        url: `/api/v2/draft/training/${trainingId}/step/list`,
+        method: 'get'
+    });
+}
 /** 修改实训所有步骤 */
 export function updateTrainingStep(id, data) {
     return request({
-        url: ` /api/v2/draft/training/${id}/step/update`,
+        url: `/api/v2/draft/training/${id}/step/update`,
         method: 'put',
         data: data
     });
@@ -71,3 +78,19 @@ export function getTrainingAll(trainingId) {
         method: 'get'
     });
 }
+/** 单独更新当前用户的某个实训草稿的初始背景 */
+export function updateTrainingBackgroud(data) {
+    return request({
+        url: `/api/v2/draft/training/update/content/backgroud`,
+        method: 'post',
+        data
+    });
+}
+/** 更新当前用户实训草稿定位 */
+export function updateTrainingMaplocation(data) {
+    return request({
+        url: `/api/v2/draft/training/update/content/maplocation`,
+        method: 'post',
+        data
+    });
+}
diff --git a/src/components/QueryListPage/QueryListPage.vue b/src/components/QueryListPage/QueryListPage.vue
index ffc413e88..43b60a9e0 100644
--- a/src/components/QueryListPage/QueryListPage.vue
+++ b/src/components/QueryListPage/QueryListPage.vue
@@ -657,4 +657,7 @@ export default {
     margin-left: 8px;
 }
 .pageContainerView{text-align: center; margin: 10px 0; height: 40px;}
+.hideOutContent {
+	min-height: 12px;
+}
 </style>
diff --git a/src/i18n/langs/en/trainingManage.js b/src/i18n/langs/en/trainingManage.js
index b354b8476..4c414f914 100644
--- a/src/i18n/langs/en/trainingManage.js
+++ b/src/i18n/langs/en/trainingManage.js
@@ -10,5 +10,16 @@ export default {
     modify: 'modify',
     delete: 'delete',
     publish: 'publish',
-    preview: 'preview'
+    preview: 'preview',
+    mapLocation: 'Save map positioning',
+    saveBackground: 'Save Background',
+    saveData: 'Save Data',
+    stepNum: 'Step number',
+    stepDescription: 'Steps describe',
+    rulesId: 'Please enter the step number',
+    rulesDescription: 'Enter the prompt information',
+    createStepInfo: 'Creating Procedure Information',
+    editStepInfo: 'Modifying Step Information',
+    saveStepData: 'Save Step Information',
+    roleSelect: 'role choices'
 };
diff --git a/src/i18n/langs/zh/trainingManage.js b/src/i18n/langs/zh/trainingManage.js
index 17c66bf3b..b84cbb897 100644
--- a/src/i18n/langs/zh/trainingManage.js
+++ b/src/i18n/langs/zh/trainingManage.js
@@ -10,5 +10,16 @@ export default {
     modify: '修改',
     delete: '删除',
     publish: '发布',
-    preview: '预览'
+    preview: '预览',
+    mapLocation: '保存地图定位',
+    saveBackground: '保存背景',
+    saveData: '保存数据',
+    stepNum: '步骤序号',
+    stepDescription: '步骤描述',
+    rulesId: '请输入步骤序号',
+    rulesDescription: '请输入步骤提示信息',
+    createStepInfo: '创建步骤信息',
+    editStepInfo: '修改步骤信息',
+    saveStepData: '保存步骤',
+    roleSelect: '角色选择'
 };
diff --git a/src/scripts/ConstConfig.js b/src/scripts/ConstConfig.js
index d0c665bf2..373696a28 100644
--- a/src/scripts/ConstConfig.js
+++ b/src/scripts/ConstConfig.js
@@ -255,8 +255,8 @@ export default {
             { label: 'SD', value: 'SD' }
         ],
         trainingType: [ // 实训类型
-            { enlabel: 'single operation', label: '单操', value: 'single'},
-            { enlabel: 'scene operation', label: '场景', value: 'scene'}
+            { enlabel: 'single operation', label: '单操', value: 'SINGLE'},
+            { enlabel: 'scene operation', label: '场景', value: 'SCENE'}
         ],
         ioDirectionList:[ // 出入口类型
             {value:'DOWN_IN_STATION', label:'下行进站'},
diff --git a/src/views/trainingManage/EditContent.vue b/src/views/trainingManage/EditContent.vue
index 7cfb29c14..685390074 100644
--- a/src/views/trainingManage/EditContent.vue
+++ b/src/views/trainingManage/EditContent.vue
@@ -5,115 +5,194 @@
         <span class="titleStyle">{{ $t('trainingManage.editTagTitle') }}</span>
       </div>
     </div>
-    <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" />
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :modal="false" :before-close="doClose" center>
+      <div class="stepListBox">
+        <el-button size="small" type="primary" @click="addStep">新增步骤</el-button>
+        <QueryListPage ref="queryListPage" :query-form="queryForm" :query-list="queryList" />
+      </div>
       <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>
+        <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>
   </div>
 </template>
 
 <script>
-import { updateTrainingContent, getTrainingAll } from '@/api/trainingManage';
+import { updateTrainingStep, getTrainingAll, updateTrainingBackgroud, getTrainingStepList, updateTrainingMaplocation } from '@/api/trainingManage';
 import Vue from 'vue';
+import {covertMemberData} from '@/views/newMap/displayNew/utils';
 
 export default {
     name: 'EditContent',
-    props: {},
+    components:{},
+    props: {
+        editData: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
     data() {
         return {
             tabVisible: false,
             dialogVisible: false,
-            editData: {
-                id: '',
-                mapId: '',
-                mapLocation: '',
-                bgScene: '',
-                runPlanId:'',
-                operaList: '',
-                stepList: '',
-                scoringRuleList: '',
-                memberList: '',
-                playerIdList: '',
-                failureCondition: ''
-            },
             formModel: {
-                id: '',
-                mapId: '',
                 mapLocationJson: '',
-                bgSceneJson: '',
-                runPlanId:'',
-                operaJson: '',
+                // runPlanId:'',
+                // operaJson: '',
                 stepJson: '',
                 scoringRuleJson: '',
-                memberJson: '',
-                playerIdJson: '',
+                // memberJson: '',
+                // playerIdJson: '',
                 failureConditionJson: ''
+            },
+            queryForm: {
+                show: false
+
+            },
+            queryList: {
+                height: '500px',
+                paginationHiden: true,
+                selectCheckShow: false,
+                data: [],
+                columns: [
+                    {
+                        title: this.$t('trainingManage.stepNum'),
+                        width: '80',
+                        prop: 'id',
+                        type: 'basic',
+                        edit: true
+                    },
+                    {
+                        title: this.$t('trainingManage.roleSelect'),
+                        width: '200',
+                        prop: 'memberId',
+                        type: 'select',
+                        options: []
+                    },
+                    {
+                        title: this.$t('trainingManage.stepDescription'),
+                        prop: 'description',
+                        type: 'basic',
+                        edit: true
+                    },
+                    {
+                        type: 'button',
+                        title: this.$t('global.operate'),
+                        width: '100',
+                        buttons: [
+                            {
+                                name: this.$t('global.delete'),
+                                type: 'danger',
+                                handleClick: this.handleDelete
+                            }
+                        ]
+                    }
+                ]
             }
         };
     },
     computed: {
         title() {
-            const t = '更新实训信息';
+            const t = this.$t('trainingManage.editTagTitle');
             return t;
         },
-        form() {
-            const form = {
-                labelWidth: '80px',
-                items: [
-                    { prop: 'mapLocationJson', label: '地图定位', type: 'text' },
-                    { prop: 'bgSceneJson', label: '初始背景', type: 'text' },
-                    { prop: 'runPlanId', label: '运行图', type: 'text' },
-                    { prop: 'operaJson', label: '操作列表', type: 'text' },
-                    { prop: 'stepJson', label: '步骤列表', type: 'text' },
-                    { prop: 'scoringRuleJson', label: '打分规则', type: 'text' },
-                    { prop: 'memberJson', label: '仿真成员', type: 'text' },
-                    { prop: 'playerIdJson', label: '参演成员', type: 'text' },
-                    { prop: 'failureConditionJson', label: '失败判定', type: 'text' }
-
-                ]
-            };
-            return form;
-        },
-        rules() {
-            const crules = {
-                type: [
-                    { required: true, message: '请选择实训类型', trigger: 'blur' }
-                ]
-            };
-            return crules;
+        group() {
+            return this.$route.query.group;
+        }
+    },
+    watch: {
+        '$store.state.training.memberList': function (val) {
+            if (val && val.length) {
+                const memberData = this.$store.state.training.memberData;
+                let activeTrainList = [];
+                if (this.$store.state.training.started) {
+                    activeTrainList = this.$store.state.map.activeTrainList;
+                }
+                // 获取仿真成员列表
+                const result = covertMemberData(activeTrainList, Object.values(memberData));
+                let list = [];
+                result.deviceListData.forEach(item => {
+                    list = list.concat(item);
+                });
+                list.forEach(every => {
+                    every.code = every.id;
+                    every.name = `${every.label}(${every.type})`;
+                });
+                const colObj = this.queryList.columns.find(item => {
+                    return item.prop == 'memberId';
+                });
+                if (colObj) {
+                    colObj.options = list;
+                }
+            }
         }
     },
     methods: {
+        addStep() {
+            const obj = {
+                id: this.queryList.data.length + 1 + '',
+                memberId: '',
+                description: ''
+                // triggerCondition: [],
+                // completionCondition:[],
+                // failureCondition: [],
+                // operations: []
+            };
+            this.queryList.data.push(obj);
+        },
+        handleDelete(index, row) {
+            console.log('删除', index, row);
+            this.queryList.data.splice(index, 1);
+        },
         minisize() {
             this.dialogVisible = true;
         },
         doShow(data) {
-            this.getTrainingAll(data);
+            // this.getTrainingAllInfo(data);
+            this.getStepList(data);
             this.dialogVisible = true;
             this.tabVisible = true;
         },
-        doCreate() {
-            this.$refs.dataform.validateForm(async() => {
-                console.log(this.formModel, '---this.formModel---');
-                updateTrainingContent(this.formModel).then(res => {
-                    console.log('更新大数据成功', res);
-                    this.doClose();
-                }).catch(err => {
-                    console.log('更新大数据错误', err);
-                });
+        saveStepData() {
+            const list = [];
+            this.queryList.data.forEach(item => {
+                const obj = {
+                    ...item
+                };
+                delete obj.isEdit;
+                list.push(obj);
+            });
+            updateTrainingStep(this.editData.id, list).then(res => {
+                console.log('更新大数据成功', res);
+                this.doClose();
+            }).catch(err => {
+                console.log('更新大数据错误', err);
             });
         },
         doClose() {
-            // this.$refs.dataform.resetForm();
             this.dialogVisible = false;
         },
-        getTrainingAll(data) {
+        getStepList(data) { // 获取步骤
+            getTrainingStepList(data.id).then(res => {
+                console.log(res, '获取步骤成功');
+                this.queryList.data = res.data;
+            }).catch(err => {
+                console.log(err, '获取步骤失败');
+                this.queryList.data = [];
+            });
+        },
+        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.queryList.data = Object.prototype.toString.call(sList) === '[object Array]' ? sList : [];
+                    }
                 });
                 console.log(res, this.formModel, '获取详细信息成功');
             }).catch(err => {
@@ -121,21 +200,31 @@ export default {
                 Object.keys(this.formModel).forEach(key => {
                     this.formModel[key] = '';
                 });
-                this.formModel.id = data.id;
-                this.formModel.mapId = data.mapId;
+                this.queryList.data = [];
+            });
+        },
+        updateMapLocation() {
+            console.log('更新地图定位');
+            const data = Vue.prototype.$jlmap.$options;
+            const params = {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
+            updateTrainingMaplocation({id: this.editData.id, mapLocationJson: JSON.stringify(params)}).then(res => {
+                console.log('保存背景', res);
+                this.formModel.mapLocationJson = JSON.stringify(params);
+            }).catch(err => {
+                console.log('保存背景失败', err);
             });
         },
         saveScenesStage() {
-            const data = Vue.prototype.$jlmap.$options;
-            return {scale: data.scaleRate, x: data.offsetX, y: data.offsetY};
+            updateTrainingBackgroud({id: this.editData.id, groupId: this.group}).then(res => {
+                console.log('保存背景', res);
+            }).catch(err => {
+                console.log('保存背景失败', err);
+            });
         }
     }
 };
 </script>
 <style lang="scss" scoped>
-/deep/ .el-dialog--center .el-dialog__body{
-    padding: 25px 65px 30px 10px;
-}
 .editContentTab{
     position: absolute;
     z-index: 10;
diff --git a/src/views/trainingManage/demonMenu.vue b/src/views/trainingManage/demonMenu.vue
index c9bc6779c..18cca23ca 100644
--- a/src/views/trainingManage/demonMenu.vue
+++ b/src/views/trainingManage/demonMenu.vue
@@ -7,12 +7,13 @@
       </el-button-group>
     </div>
     <TrainingList ref="trainingList" @editBlob="editBlob" />
-    <EditContent ref="EditBlob" v-dialogDrag />
+    <EditContent ref="EditBlob" v-dialogDrag :edit-data="editData" />
   </div>
 </template>
 <script>
 import TrainingList from './trainingList.vue';
-import EditContent from './EditContent.vue';
+import EditContent from './editContent.vue';
+
 export default {
     name:'DemonMenu',
     components:{
@@ -24,7 +25,8 @@ export default {
     data() {
         return {
             hoverBtn: false,
-            btnWidth: -600
+            btnWidth: -600,
+            editData: {}
         };
     },
     computed:{
@@ -53,6 +55,7 @@ export default {
             this.$refs.trainingList.doShow();
         },
         editBlob(data) {
+            this.editData = data;
             this.$refs.EditBlob.doShow(data);
         }
 
@@ -60,6 +63,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+/deep/ .el-dialog__wrapper{
+    overflow: hidden;
+}
 .display_top_draft{
 	position: absolute;
 	left: 5px;
diff --git a/src/views/trainingManage/trainingList.vue b/src/views/trainingManage/trainingList.vue
index a801e78a2..3b2b55c4b 100644
--- a/src/views/trainingManage/trainingList.vue
+++ b/src/views/trainingManage/trainingList.vue
@@ -8,7 +8,6 @@
       </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>