From 680a547df464975cc7572f40291d8c22a8178cf8 Mon Sep 17 00:00:00 2001
From: "haojie.shao" <haojie.shao@dfc.sh>
Date: Sun, 19 Jan 2020 18:14:53 +0800
Subject: [PATCH] fix drag group and attrs

---
 cmdb-ui/src/api/cmdb/CITypeAttr.js            | 16 ++++
 .../src/views/cmdb/modeling/ci_type/group.vue | 86 +++++++++++++------
 2 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/cmdb-ui/src/api/cmdb/CITypeAttr.js b/cmdb-ui/src/api/cmdb/CITypeAttr.js
index f1dd0b1..f68cc88 100644
--- a/cmdb-ui/src/api/cmdb/CITypeAttr.js
+++ b/cmdb-ui/src/api/cmdb/CITypeAttr.js
@@ -122,3 +122,19 @@ export function deleteCITypeAttributesById (CITypeId, data) {
     data: data
   })
 }
+
+export function transferCITypeAttrIndex (CITypeId, data) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeId}/attributes/transfer`,
+    method: 'POST',
+    data: data
+  })
+}
+
+export function transferCITypeGroupIndex (CITypeId, data) {
+  return axios({
+    url: `/v0.1/ci_types/${CITypeId}/attribute_groups/transfer`,
+    method: 'POST',
+    data: data
+  })
+}
diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue
index 24bf748..663e64a 100644
--- a/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue
+++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue
@@ -86,8 +86,7 @@
           v-model="CITypeGroup.attributes"
           group="properties"
           @start="drag=true"
-          @end="handleEnd"
-          @change="handleChange"
+          @change="(e)=>{handleChange(e, CITypeGroup.id)}"
           :filter="'.filter-empty'"
           :animation="100"
           tag="div"
@@ -164,8 +163,7 @@
         v-model="otherGroupAttributes"
         group="properties"
         @start="drag=true"
-        @end="handleEnd"
-        @change="handleChange"
+        @change="(e)=>{handleChange(e, -1)}"
         :animation="0"
         style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap">
 
@@ -251,14 +249,14 @@
 </template>
 
 <script>
-
+/* eslint-disable */
 import {
   deleteCITypeGroupById,
   getCITypeGroupById,
   createCITypeGroupById,
   updateCITypeGroupById
 } from '@/api/cmdb/CIType'
-import { getCITypeAttributesById, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr'
+import { getCITypeAttributesById, updateCITypeAttributesById, transferCITypeAttrIndex, transferCITypeGroupIndex } from '@/api/cmdb/CITypeAttr'
 import draggable from 'vuedraggable'
 
 export default {
@@ -272,6 +270,7 @@ export default {
       CITypeId: this.$route.params.CITypeId,
       CITypeName: this.$route.params.CITypeName,
       CITypeGroups: [],
+      addRemoveGroupFlag: {},
       attributes: [],
       otherGroupAttributes: [],
       addGroupBtnVisible: true,
@@ -312,7 +311,7 @@ export default {
         group.editable = false
         group.originOrder = group.order
         group.originName = group.name
-        group.attributes = group.attributes.sort((a, b) => a.order - b.order)
+        // group.attributes = group.attributes.sort((a, b) => a.order - b.order)
       })
 
       this.otherGroupAttributes = this.attributes.filter(x => !inGroupAttrKeys.includes(x.id)).sort((a, b) => a.order - b.order)
@@ -322,7 +321,7 @@ export default {
         attribute.originOrder = attribute.order
       })
 
-      console.log('setOtherGroupAttributes', this.CITypeGroups, this.otherGroupAttributes)
+      // console.log('setOtherGroupAttributes', this.CITypeGroups, this.otherGroupAttributes)
     },
     getCITypeGroupData () {
       const promises = [
@@ -387,13 +386,18 @@ export default {
     },
 
     handleMoveGroup (beforeIndex, afterIndex) {
-      const beforeGroup = this.CITypeGroups[beforeIndex]
-      this.CITypeGroups[beforeIndex] = this.CITypeGroups[afterIndex]
+      const fromGroupId = this.CITypeGroups[beforeIndex].id
+      const toGroupId = this.CITypeGroups[afterIndex].id
+      transferCITypeGroupIndex(this.CITypeId, { from: fromGroupId, to: toGroupId }).then(res => {
+        this.$message.success('操作成功')
+        const beforeGroup = this.CITypeGroups[beforeIndex]
+        this.CITypeGroups[beforeIndex] = this.CITypeGroups[afterIndex]
 
-      this.$set(this.CITypeGroups, beforeIndex, this.CITypeGroups[afterIndex])
-      this.$set(this.CITypeGroups, afterIndex, beforeGroup)
-
-      this.updatePropertyIndex()
+        this.$set(this.CITypeGroups, beforeIndex, this.CITypeGroups[afterIndex])
+        this.$set(this.CITypeGroups, afterIndex, beforeGroup)
+      }).catch(err => {
+        this.$httpError(err, '移动出错')
+      })
     },
     handleAddExistGroupAttr (index) {
       const group = this.CITypeGroups[index]
@@ -456,24 +460,50 @@ export default {
         })
         .catch(err => this.requestFailed(err))
     },
-    handleChange (e) {
-      console.log(e)
-      if (e.hasOwnProperty('moved')) {
-        this.shouldUpdatePropertyIndex = e.moved.newIndex !== e.moved.oldIndex
-      } else {
-        this.shouldUpdatePropertyIndex = true
+    handleChange (e, group) {
+      if (e.hasOwnProperty('moved') && e.moved.oldIndex !== e.moved.newIndex) {
+        if (group === -1) {
+          this.$message.error('更多属性不能进行排序, 如需排序需添加入其他分组中！')
+        } else {
+          transferCITypeAttrIndex(this.CITypeId,
+            {
+              from: { attr_id: e.moved.element.id, group_id: group > -1 ? group : null },
+              to: { order: e.moved.newIndex, group_id: group > -1 ? group : null }
+            }).then(res => this.$message.success('保存成功')).catch(err => {
+            this.$httpError(err)
+            this.abortDraggable()
+          })
+        }
+      }
+
+      if (e.hasOwnProperty('added')) {
+        this.addRemoveGroupFlag = { to: { group_id: group > -1 ? group : null, order: e.added.newIndex }, inited: true }
+      }
+
+      if (e.hasOwnProperty('removed')) {
+        this.$nextTick(() => {
+          transferCITypeAttrIndex(this.CITypeId,
+            {
+              from: { attr_id: e.removed.element.id, group_id: group > -1 ? group : null },
+              to: { group_id: this.addRemoveGroupFlag.to.group_id, order: this.addRemoveGroupFlag.to.order }
+            }).then(res => this.$message.success('保存成功')).catch(err => {
+            this.$httpError(err)
+            this.abortDraggable()
+          }).finally(() => {
+            this.addRemoveGroupFlag = {}
+          })
+        })
       }
     },
-    handleEnd (e) {
-      if (this.shouldUpdatePropertyIndex) {
-        this.updatePropertyIndex()
-        this.shouldUpdatePropertyIndex = false
-      }
+    abortDraggable () {
+      this.$nextTick(() => {
+        this.$router.push({name: 'ci_type'})
+      })
     },
     updatePropertyIndex () {
-      const attributes = []
-      let attributeOrder = 0
-      let groupOrder = 0
+      const attributes = []    // 全部属性
+      let attributeOrder = 0    // 属性组
+      let groupOrder = 0   // 组排序
       const promises = [
 
       ]