fix:将填写弹窗修改为选择弹窗

src/views/user/UserGroup.vue

@@ -141,13 +141,29 @@
           <el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
         </el-form-item>
         <el-form-item label="下一级用户组ID">
-          <el-input-number 
-            v-model="groupForm.higher_level_id" 
-            :min="0" 
-            placeholder="请输入下一级用户组ID"
-            style="width: 100%"
-          />
+          <div class="selector-field">
+            <div class="selector-info" v-if="selectedHigherGroupInfo">
+              <el-tag type="primary" effect="plain">
+                ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
+              </el-tag>
+            </div>
+            <div class="selector-actions">
+              <el-button type="primary" @click="groupSelectorVisible = true">
+                <el-icon><Connection /></el-icon>
+                {{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
+              </el-button>
+              <el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
+            </div>
+          </div>
         </el-form-item>
+        
+        <!-- 用户组选择器 -->
+        <UserGroupSelector
+          v-model="groupSelectorVisible"
+          :current-group-id="groupForm.higher_level_id"
+          :exclude-group-id="groupForm.group_id"
+          @confirm="handleHigherGroupSelect"
+        />
         <el-form-item label="升级所需消费金额">
           <el-input-number 
             v-model="groupForm.floor_price" 
@@ -258,7 +274,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, Edit, User, Delete } from '@element-plus/icons-vue'
+import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
 import { 
   getUserGroupList, 
   getUserGroupMemberList, 
@@ -268,6 +284,7 @@ import {
   addUserGroupMember 
 } from '@/api/admin/user'
 import { formatTime } from '@/utils/tool'
+import UserGroupSelector from '@/components/admin/UserGroupSelector.vue'
 
 // 查询参数
 const queryParams = reactive({
@@ -327,6 +344,10 @@ const dialogType = ref('add')
 const groupFormRef = ref(null)
 const memberFormRef = ref(null)
 
+// 用户组选择器相关
+const groupSelectorVisible = ref(false)
+const selectedHigherGroupInfo = ref(null)
+
 // 获取用户组列表
 const fetchGroupList = async () => {
   loading.value = true
@@ -418,6 +439,7 @@ const handleMemberCurrentChange = (page) => {
 const handleAdd = () => {
   dialogType.value = 'add'
   dialogVisible.value = true
+  selectedHigherGroupInfo.value = null
   Object.assign(groupForm, {
     group_id: undefined,
     name: '',
@@ -433,6 +455,7 @@ const handleAdd = () => {
 const handleEdit = (row) => {
   dialogType.value = 'edit'
   dialogVisible.value = true
+  selectedHigherGroupInfo.value = null
   
   const groupId = row.group_id || row.GroupId || row.id || row.Id
   const groupName = row.group_name || row.name || row.Name
@@ -449,6 +472,20 @@ const handleEdit = (row) => {
     floor_price: floorPrice,
     fixed: fixed
   })
+  
+  // 查找下一级用户组信息用于显示
+  if (higherLevelId) {
+    const higherGroup = groupList.value.find(item => {
+      const itemId = item.group_id || item.GroupId || item.id || item.Id
+      return itemId === higherLevelId
+    })
+    if (higherGroup) {
+      selectedHigherGroupInfo.value = higherGroup
+    } else {
+      // 如果在列表中找不到，创建一个简单的对象用于显示
+      selectedHigherGroupInfo.value = { group_id: higherLevelId, name: `用户组${higherLevelId}` }
+    }
+  }
 }
 
 // 查看成员
@@ -555,6 +592,18 @@ const submitAddMember = () => {
   })
 }
 
+// 下一级用户组选择处理
+const handleHigherGroupSelect = (group) => {
+  const groupId = group.group_id || group.GroupId || group.id || group.Id
+  groupForm.higher_level_id = groupId
+  selectedHigherGroupInfo.value = group
+}
+
+const clearHigherGroup = () => {
+  groupForm.higher_level_id = undefined
+  selectedHigherGroupInfo.value = null
+}
+
 // 初始化
 onMounted(() => {
   fetchGroupList()
@@ -697,4 +746,23 @@ onMounted(() => {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
+
+/* 选择器字段样式 */
+.selector-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.selector-info {
+  display: flex;
+  align-items: center;
+}
+
+.selector-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 </style>