队伍拖动按钮实现

队伍新增
式神属性编辑保留上一次编辑结果

src/components/ShikigamiProperty.vue

@@ -168,15 +168,11 @@ export default {
   },
   watch: {
     showProperty(newVal, oldVal) {
-      console.log("==aaaaaaa=====>>>> ", newVal, oldVal);
+      // this.shikigami = this.currentShikigami;
+          console.log("currentShikigami", JSON.stringify(this.currentShikigami));
       this.show = newVal;
     },
     currentShikigami(newVal, oldVal) {
-      console.log("confirm====" + JSON.stringify(newVal))
-
-      console.log("confirm====" + JSON.stringify(oldVal))
-
-      console.log("===item====>>>> ", newVal, oldVal);
       if (newVal.properties != undefined && newVal.properties.edit == true) {
         this.shikigami = newVal.properties;
       }
@@ -184,8 +180,6 @@ export default {
     },
     'shikigami.yuhun.target': {
       handler(newVal, oldVal) {
-        console.log(newVal)
-        console.log(JSON.stringify(this.shikigami.yuhun))
         switch (newVal) {
             //<el-option label="伤害输出" value="1"/>
           case "1": {
@@ -283,48 +277,35 @@ export default {
   },
   methods: {
     editShikigami() {
-      console.log("==== 选择御魂 ===");
       // this.currentShikigami = item;
       this.showYuhunSelect = true;
       // this.index = index;
     },
     closeYuhunSelect() {
-      console.log("==== 关闭御魂选择 ===");
       // this.currentShikigami = item;
       this.showYuhunSelect = false;
       // this.index = index;
     },
     updateYuhunSelect(yuhun) {
       this.showYuhunSelect = false;
-      console.log("==== 完成御魂选择 ===");
-      console.log(yuhun);
-      console.log(this.shikigami.yuhun.yuhunSetEffect);
       let length = this.shikigami.yuhun.yuhunSetEffect.length;
       this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
-      console.log(this.shikigami.yuhun.yuhunSetEffect);
-      console.log(this.shikigami.yuhun.yuhunSetEffect[0]);
 
     },
     cancel() {
-      console.log("cancel====");
       this.$emit("closeProperty");
+      Object.assign(this.$data, this.$options.data())
     },
     confirm() {
-      console.log("confirm====");
-      console.log("confirm====" + JSON.stringify(this.shikigami.edit))
       // if (null == this.shikigami[this.index].properties) {
       this.shikigami.edit = true
       this.$emit("updateProperty", JSON.parse(JSON.stringify(this.shikigami)));
       Object.assign(this.$data, this.$options.data())
-      console.log("confirm====" + JSON.stringify(this.shikigami.edit))
 
       // }
     },
     updateSkillRequired(index, value) {
-      console.log(index)
-      console.log(value)
       this.shikigami.skillRequired[index] = value;
-      console.log(this.shikigami.skillRequired)
     },
   },
 };

src/components/Yys.vue

@@ -12,34 +12,64 @@
       @closeProperty="closeProperty"
       @updateProperty="updateProperty"
   />
+  <draggable :list="groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
+             handle=".drag-handle">
 
-<!--  <el-row :span="10">-->
+    <template #item="{ element: group, index: groupIndex }">
-    <draggable :list="items" item-key="name" style="display: flex;flex-direction: row">
+
-      <template #item="{element, index}">
+      <el-row :span="24">
         <div>
-          <el-col>
+          <div style="display: flex; justify-content: flex-end;">
-            <el-card :body-style="{ padding: '0px' }">
+            <el-button class="drag-handle" type="primary" icon="Rank" circle></el-button>
-              <img :src="element.avatar || '/assets/Shikigami/default.png'" class="image" @click="editShikigami(index, element)"/>
+            <el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
-              <div style="padding: 14px">
+            <el-button type="primary" icon="Plus" circle @click="addGroup"></el-button>
-                <span>{{ element.name || "" }}</span>
+          </div>
-                <div v-if="element.properties">
+          <div>
-                  <span>已配置属性：</span>
+            <draggable :list="group" item-key="name" style="display: flex; flex-direction: row; width: 20%;">
-                  <div v-for="(value, key, index) in element.properties">
+              <template #item="{element : position, index:positionIndex}">
-                    <span>{{ key }}</span> : <span>{{ value || '-' }}</span>
+                <div>
-                  </div>
+                  <el-col>
+                    <el-card :body-style="{ padding: '0px' } ">
+                      <img :src="position.avatar || '/assets/Shikigami/default.png'" class="image"
+                           @click="editShikigami(groupIndex,positionIndex)"/>
+                      <div style="padding: 14px; width: 95px">
+
+                        <span>{{ position.name || "" }}</span>
+                        <div class="bottom">
+                          <el-button @click="editProperties(groupIndex,positionIndex)">配置属性</el-button>
+                        </div>
+                        <!--                        properties-->
+                        <!--                        {"edit":true,"yuhun":{"yuhunSetEffect":[{"name":"狰","type":"attack","avatar":"/assets/Yuhun/狰.png"}],"target":"伤害输出","property2":["Attack"],"property4":["Attack"],"property6":["Crit","CritDamage"]},"levelRequired":"40","speed":"","skillRequiredMode":"all","skillRequired":["技能一","技能二","技能三"]}-->
+                        <div v-if="position.properties">
+                          <span>已配置属性：</span>
+                          <div>
+                            <span>{{ position.properties.yuhun.yuhunSetEffect.map(item => item.name).join(' ') }}</span>
+
+                          </div>
+                          <div v-for="(value, key, index) in position.properties">
+                            <span>{{ key }}</span> : <span>{{ value || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </el-card>
+                  </el-col>
+                  <!-- Add delete button here -->
+                  <el-button type="danger" icon="Delete" circle
+                             @click="removeGroupElement(groupIndex, positionIndex)"></el-button>
+                  <el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"></el-button>
                 </div>
-                <div class="bottom">
+              </template>
-                  <el-button @click="editProperties(index, element)">配置属性</el-button>
+            </draggable>
-                </div>
+
-              </div>
+          </div>
-            </el-card>
-          </el-col>
         </div>
+      </el-row>
 
-      </template>
-    </draggable>
-<!--  </el-row>-->
 
+    </template>
+
+    <!--    </el-row>-->
+  </draggable>
   <div style="margin: 20px">
     <span>配置结果</span>
   </div>
@@ -62,10 +92,12 @@ const activeName = ref('first')
 export default {
   data() {
     return {
-      shikigamiData: shikigamiData,
       showSelectShikigami: false,
       showProperty: false,
-      items: [{}, {}, {}, {}, {}],
+      groups: [
+        [{}, {}, {}, {}, {}],
+        [{}, {}, {}, {}, {}]
+      ],
       // items: [
       //   {
       //     "name": "妖刀姬",
@@ -83,7 +115,8 @@ export default {
       //     "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
       //   }
       // ],
-      index: 0,
+      groupIndex: 0,
+      positionIndex: 0,
       currentShikigami: {},
       drag: false,
     };
@@ -101,36 +134,61 @@ export default {
       this.showSelectShikigami = false;
       this.currentShikigami = {};
     },
-    editShikigami(index, item) {
+    editShikigami(groupIndex, positionIndex) {
-      console.log("==== 选择式神 ===", index, item);
+      console.log("==== 选择式神 ===", groupIndex, positionIndex);
-      this.currentShikigami = item;
       this.showSelectShikigami = true;
-      this.index = index;
+      this.groupIndex = groupIndex;
+      this.positionIndex = positionIndex;
     },
     updateShikigami(shikigami) {
       console.log("parent====> ", shikigami);
       this.showSelectShikigami = false;
-      this.items[this.index] = shikigami;
+
+      const oldProperties = this.groups[this.groupIndex][this.positionIndex].properties;
+      this.groups[this.groupIndex][this.positionIndex] = shikigami;
+      this.groups[this.groupIndex][this.positionIndex].properties = oldProperties;
       // this.items[this.index].name = shikigami.name;
       // this.currentShikigami = {};
     },
-    editProperties(index, item) {
+    editProperties(groupIndex, positionIndex) {
-      console.log("add properties", index, item);
+
       this.showProperty = true;
-      this.currentShikigami = item;
+      this.groupIndex = groupIndex;
-      this.index = index;
+      this.positionIndex = positionIndex;
+      this.currentShikigami = this.groups[this.groupIndex][this.positionIndex];
+      console.log("currentShikigami", JSON.stringify(this.currentShikigami));
     },
     closeProperty() {
-      console.log("close property ===");
       this.showProperty = false;
-      this.currentShikigami = {};
+      this.currentShikigami = this.groups[this.groupIndex][this.positionIndex];
     },
     updateProperty(property) {
-      console.log("parent property====> ", property);
       this.showProperty = false;
       this.currentShikigami = {};
-      this.items[this.index].properties = property;
+      this.groups[this.groupIndex][this.positionIndex].properties = property;
+    },
+    removeGroupElement(groupIndex, positionIndex) {
+      this.groups[groupIndex].splice(positionIndex, 1);
+    },
+    removeGroup(groupIndex) {
+      this.groups.splice(groupIndex, 1);
+    },
+    addGroup() {
+      this.groups.push([{}, {}, {}, {}, {}]);
+    },
+    addGroupElement(groupIndex) {
+      this.groups[groupIndex].push({});
     },
   },
 };
 </script>
+
+<style scoped>
+.drag-handle {
+  cursor: move;
+}
+
+.position-drag-handle {
+  cursor: move;
+}
+</style>