From 5443e46708f3b193c0ca3b6e85609247ba6aacf0 Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Tue, 23 Aug 2022 17:42:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E8=AE=AD=E4=BB=A3=E7=A0=81=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trainingManage.js                 |  2 +-
 src/views/trainingManage/create.vue       | 81 ++++++++++++++++++++---
 src/views/trainingManage/editDetails.vue  | 32 ++++++---
 src/views/trainingManage/trainingList.vue | 38 ++++++++---
 4 files changed, 126 insertions(+), 27 deletions(-)

diff --git a/src/api/trainingManage.js b/src/api/trainingManage.js
index 1f6da9c1a..9af992810 100644
--- a/src/api/trainingManage.js
+++ b/src/api/trainingManage.js
@@ -27,7 +27,7 @@ export function createTraining(data) {
 /** 更新当前用户的某个实训草稿 */
 export function updateTraining(data) {
     return request({
-        url: `/api/v2/draft/training`,
+        url: `/api/v2/draft/training/update/info`,
         method: 'post',
         data
     });
diff --git a/src/views/trainingManage/create.vue b/src/views/trainingManage/create.vue
index 2d2cdebc6..0bc6295c9 100644
--- a/src/views/trainingManage/create.vue
+++ b/src/views/trainingManage/create.vue
@@ -1,6 +1,30 @@
 <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" />
+    <el-form ref="form" :model="tagForm" label-width="60px">
+      <el-form-item label="标签">
+        <el-tag
+          v-for="tag in tagForm.dynamicTags"
+          :key="tag"
+          closable
+          :disable-transitions="false"
+          @close="handleClose(tag)"
+        >
+          {{ tag }}
+        </el-tag>
+        <el-input
+          v-if="inputVisible"
+          ref="saveTagInput"
+          v-model="inputValue"
+          autofocus
+          class="input-new-tag"
+          size="small"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"
+        />
+        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+      </el-form-item>
+    </el-form>
     <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>
@@ -23,8 +47,13 @@ export default {
                 name: '',
                 mapId: '',
                 description:'',
-                type: '',
-                labelJson: ''
+                type: ''
+                // labelJson: ''
+            },
+            inputVisible: false,
+            inputValue: '',
+            tagForm: {
+                dynamicTags: []
             }
         };
     },
@@ -42,8 +71,8 @@ export default {
                 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' }
+                    { prop: 'type', label: '类型', type: 'select', options: ConstConfig.ConstSelect.trainingType }
+                    // { prop: 'labelJson', label: '标签', type: 'text', placeholder: '多个请用逗号隔开' }
 
                 ]
             };
@@ -65,6 +94,20 @@ export default {
         }
     },
     methods: {
+        handleClose(tag) {
+            this.tagForm.dynamicTags.splice(this.tagForm.dynamicTags.indexOf(tag), 1);
+        },
+        showInput() {
+            this.inputVisible = true;
+        },
+        handleInputConfirm() {
+            const inputValue = this.inputValue;
+            if (inputValue) {
+                this.tagForm.dynamicTags.push(inputValue);
+            }
+            this.inputVisible = false;
+            this.inputValue = '';
+        },
         validateName(rule, value, callback) {
             if (value.trim().length == 0) {
                 this.formModel.name = this.formModel.name.replace(/\s/g, '');
@@ -85,24 +128,31 @@ export default {
             if (data) {
                 this.isCreate = false;
                 this.formModel = {...data};
+                Object.keys(this.formModel).forEach(key => {
+                    this.formModel[key] = data[key];
+                });
+                this.tagForm.dynamicTags = data.labelJson ? JSON.parse(data.labelJson) : [];
             } else {
                 this.isCreate = true;
                 this.formModel = {
                     name: '',
                     mapId: this.$route.query.mapId,
                     description:'',
-                    type: '',
-                    labelJson: ''
+                    type: ''
+                    // labelJson: ''
                 };
+                this.tagForm.dynamicTags = [];
             }
             this.dialogVisible = true;
         },
         doCreate() {
             this.$refs.dataform.validateForm(async() => {
+                const cpData = Object.assign({}, this.formModel);
+                cpData.labelJson = JSON.stringify(this.tagForm.dynamicTags);
                 if (this.isCreate) {
-                    await createTraining(this.formModel);
+                    await createTraining(cpData);
                 } else {
-                    await updateTraining(this.formModel);
+                    await updateTraining(cpData);
                 }
                 this.$emit('edit');
                 this.doClose();
@@ -119,4 +169,19 @@ export default {
 /deep/ .el-dialog--center .el-dialog__body{
     padding: 25px 65px 30px 10px;
 }
+.el-tag + .el-tag {
+	margin-left: 10px;
+}
+.button-new-tag {
+	margin-left: 10px;
+	height: 32px;
+	line-height: 30px;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.input-new-tag {
+	width: 90px;
+	margin-left: 10px;
+	vertical-align: bottom;
+}
 </style>
diff --git a/src/views/trainingManage/editDetails.vue b/src/views/trainingManage/editDetails.vue
index de128faf7..5eb166b7e 100644
--- a/src/views/trainingManage/editDetails.vue
+++ b/src/views/trainingManage/editDetails.vue
@@ -133,9 +133,14 @@ export default {
     },
     methods: {
         addStep() {
+            const lastIndex = this.queryList.data.length - 1;
+            let mId = '';
+            if (this.queryList.data[lastIndex]) {
+                mId = this.queryList.data[lastIndex].memberId || '';
+            }
             const obj = {
-                id: this.queryList.data.length + 1 + '',
-                memberId: '',
+                id: lastIndex + 2 + '',
+                memberId: mId,
                 description: ''
                 // triggerCondition: [],
                 // completionCondition:[],
@@ -146,7 +151,13 @@ export default {
         },
         handleDelete(index, row) {
             console.log('删除', index, row);
-            this.queryList.data.splice(index, 1);
+            this.$confirm('确定删除该条步骤数据?', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.queryList.data.splice(index, 1);
+            }).catch(e => {});
         },
         minisize() {
             this.dialogVisible = true;
@@ -167,10 +178,12 @@ export default {
                 list.push(obj);
             });
             updateTrainingStep(this.editData.id, list).then(res => {
-                console.log('更新大数据成功', res);
+                console.log('保存步骤成功！', res);
+                this.$message.success('保存步骤成功！');
                 this.doClose();
             }).catch(err => {
-                console.log('更新大数据错误', err);
+                console.log('保存步骤失败', err);
+                this.$message.error('保存步骤失败');
             });
         },
         doClose() {
@@ -204,21 +217,24 @@ export default {
             });
         },
         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);
+                console.log('保存地图定位成功！', res);
+                this.$message.success('保存地图定位成功！');
                 this.formModel.mapLocationJson = JSON.stringify(params);
             }).catch(err => {
-                console.log('保存背景失败', err);
+                console.log('保存地图定位失败', err);
+                this.$message.error('保存地图定位失败');
             });
         },
         saveScenesStage() {
             updateTrainingBackgroud({id: this.editData.id, groupId: this.group}).then(res => {
                 console.log('保存背景', res);
+                this.$message.success('保存背景成功！');
             }).catch(err => {
                 console.log('保存背景失败', err);
+                this.$message.error('保存背景失败');
             });
         }
     }
diff --git a/src/views/trainingManage/trainingList.vue b/src/views/trainingManage/trainingList.vue
index 5b272ef8f..d601bddfa 100644
--- a/src/views/trainingManage/trainingList.vue
+++ b/src/views/trainingManage/trainingList.vue
@@ -53,6 +53,7 @@ export default {
                     },
                     {
                         title: this.$t('trainingManage.type'),
+                        width: '70',
                         prop: 'type',
                         type: 'tag',
                         columnValue: (row) => { return this.covertData(row); },
@@ -60,12 +61,16 @@ export default {
                     },
                     {
                         title: this.$t('trainingManage.labelJson'),
-                        prop: 'labelJson'
+                        width: '200',
+                        prop: 'labelJson',
+                        type: 'tagMore',
+                        columnValue: (row) => { return this.labelJsonData(row); },
+                        tagType: (row) => { return ''; }
                     },
                     {
                         type: 'button',
                         title: this.$t('trainingManage.operate'),
-                        width: '450',
+                        width: '360',
                         buttons: [
                             {
                                 name: this.$t('trainingManage.record'),
@@ -139,6 +144,11 @@ export default {
             }
             return lastData.type;
         },
+        labelJsonData(row) {
+            const sList = row.labelJson ? JSON.parse(row.labelJson) : [];
+            const list = Object.prototype.toString.call(sList) === '[object Array]' ? sList : [sList];
+            return list;
+        },
         drawUp(index, row) {
             console.log('编辑', index, row);
             this.$emit('updateDetails', row);
@@ -151,22 +161,30 @@ export default {
         },
         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();
-            });
+            this.$confirm('确定删除该条实训数据?', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                if (!row.id) { return; }
+                deleteTraining([row.id]).then(res => {
+                    console.log('删除实训成功', res);
+                    this.getListData();
+                }).catch(err => {
+                    console.log('删除实训失败', err);
+                    this.getListData();
+                });
+            }).catch(e => {});
         },
         publishScript(index, row) {
             console.log('发布', index, row);
             if (!row.id) { return; }
             publishTraining({draftId: row.id}).then(res => {
                 console.log('发布实训成功', res);
+                this.$message.success('发布实训成功！');
             }).catch(err => {
                 console.log('发布实训失败', err);
+                this.$message.error('发布实训失败');
             });
         },
         previewScript(index, row) {