From e8a8773005a887a0b69c7b44e100a324de97b2d6 Mon Sep 17 00:00:00 2001
From: bjdgyc <bjdgyc@163.com>
Date: Mon, 9 Sep 2024 16:52:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=83=E9=99=90=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/group/List.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/group/List.vue b/web/src/pages/group/List.vue
index 17c7fb6..8c4d997 100644
--- a/web/src/pages/group/List.vue
+++ b/web/src/pages/group/List.vue
@@ -191,7 +191,7 @@
         :close-on-click-modal="false"
         title="用户组"
         :visible.sync="user_edit_dialog"
-        width="750px"
+        width="850px"
         @close='closeDialog'
         center>
 
@@ -410,9 +410,17 @@
                 </el-col>
               </el-row>
 
+              <!--  添加拖拽功能  -->
+              <draggable v-model="ruleForm.link_acl" handle=".drag-handle" @end="onEnd">
+
               <el-row v-for="(item,index) in ruleForm.link_acl"
                       :key="index" style="margin-bottom: 5px" :gutter="1">
-                <el-col :span="10">
+
+                <el-col :span="1" class="drag-handle">
+                <i class="el-icon-rank"></i>
+                </el-col>
+
+                <el-col :span="9">
                   <el-input placeholder="请输入CIDR地址" v-model="item.val">
                     <el-select v-model="item.action" slot="prepend">
                       <el-option label="允许" value="allow"></el-option>
@@ -438,6 +446,8 @@
                              @click.prevent="removeDomain(ruleForm.link_acl,index)"></el-button>
                 </el-col>
               </el-row>
+              </draggable>
+
             </el-form-item>
           </el-tab-pane>
 
@@ -512,10 +522,11 @@
 
 <script>
 import axios from "axios";
+import draggable from 'vuedraggable'
 
 export default {
   name: "List",
-  components: {},
+  components: {draggable},
   mixins: [],
   created() {
     this.$emit('update:route_path', this.$route.path)
@@ -621,6 +632,9 @@ export default {
     }
   },
   methods: {
+    onEnd: function() {
+       window.console.log("onEnd", this.ruleForm.link_acl);
+    },
     setAuthData(row) {
       if (!row) {
         this.ruleForm.auth = JSON.parse(JSON.stringify(this.defAuth));
@@ -906,4 +920,9 @@ export default {
   flex: 1;
   overflow: auto;
 }
+
+.drag-handle {
+  cursor: move;
+}
+
 </style>