From b3652b84b06ca5007ff87d0fc726e15ab11a433d Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Thu, 18 Aug 2022 15:35:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E8=AE=AD=E8=AE=BE=E8=AE=A1=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trainingManage.js                   |  58 +++++++
 src/scripts/ConstConfig.js                  |   4 +
 src/views/designPlatform/trainingDesign.vue |   4 +-
 src/views/trainingManage/create.vue         | 122 +++++++++++++
 src/views/trainingManage/demonMenu.vue      |  86 +++++++++
 src/views/trainingManage/trainingList.vue   | 183 ++++++++++++++++++++
 6 files changed, 456 insertions(+), 1 deletion(-)
 create mode 100644 src/api/trainingManage.js
 create mode 100644 src/views/trainingManage/create.vue
 create mode 100644 src/views/trainingManage/demonMenu.vue
 create mode 100644 src/views/trainingManage/trainingList.vue

diff --git a/src/api/trainingManage.js b/src/api/trainingManage.js
new file mode 100644
index 000000000..6c9647bff
--- /dev/null
+++ b/src/api/trainingManage.js
@@ -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
+    });
+}
diff --git a/src/scripts/ConstConfig.js b/src/scripts/ConstConfig.js
index 2459fa196..d4c4be54c 100644
--- a/src/scripts/ConstConfig.js
+++ b/src/scripts/ConstConfig.js
@@ -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'}
         ]
     }
 };
diff --git a/src/views/designPlatform/trainingDesign.vue b/src/views/designPlatform/trainingDesign.vue
index 4f7904ca8..a11058c73 100644
--- a/src/views/designPlatform/trainingDesign.vue
+++ b/src/views/designPlatform/trainingDesign.vue
@@ -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
     },
diff --git a/src/views/trainingManage/create.vue b/src/views/trainingManage/create.vue
new file mode 100644
index 000000000..2d2cdebc6
--- /dev/null
+++ b/src/views/trainingManage/create.vue
@@ -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>
diff --git a/src/views/trainingManage/demonMenu.vue b/src/views/trainingManage/demonMenu.vue
new file mode 100644
index 000000000..83709498b
--- /dev/null
+++ b/src/views/trainingManage/demonMenu.vue
@@ -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>
diff --git a/src/views/trainingManage/trainingList.vue b/src/views/trainingManage/trainingList.vue
new file mode 100644
index 000000000..641d416fc
--- /dev/null
+++ b/src/views/trainingManage/trainingList.vue
@@ -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>