游戏-用户管理-优化表格和表单样式

web/src/views/backend/game/user/popupForm.vue

@@ -75,22 +75,19 @@
                         prop="status"
                         :input-attr="{ content: { '0': t('game.user.status 0'), '1': t('game.user.status 1') } }"
                     />
-                    <FormItem
-                        :label="t('game.user.game_channel_id')"
-                        type="remoteSelect"
-                        v-model="baTable.form.items!.game_channel_id"
-                        prop="game_channel_id"
-                        :input-attr="{ pk: 'game_channel.id', field: 'name', remoteUrl: '/admin/game.Channel/index' }"
-                        :placeholder="t('Please select field', { field: t('game.user.game_channel_id') })"
-                    />
-                    <FormItem
-                        :label="t('game.user.admin_id')"
-                        type="remoteSelect"
-                        v-model="baTable.form.items!.admin_id"
-                        prop="admin_id"
-                        :input-attr="{ pk: 'admin.id', field: 'username', remoteUrl: '/admin/auth.Admin/index' }"
-                        :placeholder="t('Please select field', { field: t('game.user.admin_id') })"
-                    />
+                    <el-form-item :label="t('game.user.game_channel_id')" prop="admin_id">
+                        <el-tree-select
+                            v-model="baTable.form.items!.admin_id"
+                            class="w100"
+                            clearable
+                            filterable
+                            :data="channelAdminTree"
+                            :props="treeProps"
+                            :render-after-expand="false"
+                            :placeholder="t('Please select field', { field: t('game.user.admin_id') })"
+                            @change="onAdminTreeChange"
+                        />
+                    </el-form-item>
                 </el-form>
             </div>
         </el-scrollbar>
@@ -107,12 +104,13 @@
 
 <script setup lang="ts">
 import type { FormItemRule } from 'element-plus'
-import { inject, reactive, useTemplateRef } from 'vue'
+import { inject, onMounted, reactive, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import FormItem from '/@/components/formItem/index.vue'
 import { useConfig } from '/@/stores/config'
 import type baTableClass from '/@/utils/baTable'
-import { buildValidatorData } from '/@/utils/validate'
+import { buildValidatorData, regularPassword } from '/@/utils/validate'
+import createAxios from '/@/utils/axios'
 
 const config = useConfig()
 const formRef = useTemplateRef('formRef')
@@ -120,15 +118,92 @@ const baTable = inject('baTable') as baTableClass
 
 const { t } = useI18n()
 
+type TreeNode = {
+    value: string
+    label: string
+    disabled?: boolean
+    children?: TreeNode[]
+    channel_id?: number
+    is_leaf?: boolean
+}
+
+const channelAdminTree = ref<TreeNode[]>([])
+const adminIdToChannelId = ref<Record<string, number>>({})
+
+const treeProps = {
+    value: 'value',
+    label: 'label',
+    children: 'children',
+    disabled: 'disabled',
+}
+
+const loadChannelAdminTree = async () => {
+    const res = await createAxios({
+        url: '/admin/game.Channel/adminTree',
+        method: 'get',
+    })
+    const list = (res.data?.list ?? []) as TreeNode[]
+    channelAdminTree.value = list
+
+    const map: Record<string, number> = {}
+    const walk = (nodes: TreeNode[]) => {
+        for (const n of nodes) {
+            if (n.children && n.children.length) {
+                walk(n.children)
+            } else if (n.is_leaf && n.channel_id !== undefined) {
+                map[n.value] = n.channel_id
+            }
+        }
+    }
+    walk(list)
+    adminIdToChannelId.value = map
+}
+
+const onAdminTreeChange = (val: string | number | null) => {
+    if (val === null || val === undefined || val === '') {
+        return
+    }
+    const key = typeof val === 'number' ? String(val) : val
+    const channelId = adminIdToChannelId.value[key]
+    if (channelId !== undefined) {
+        baTable.form.items!.game_channel_id = channelId
+    }
+}
+
+onMounted(() => {
+    loadChannelAdminTree()
+})
+
+watch(
+    () => baTable.form.items?.admin_id,
+    (val) => {
+        if (val === undefined || val === null || val === '') return
+        onAdminTreeChange(val as any)
+    }
+)
+
+const validatorGameUserPassword = (rule: any, val: string, callback: (error?: Error) => void) => {
+    const operate = baTable.form.operate
+    const v = typeof val === 'string' ? val.trim() : ''
+
+    // 新增：必填
+    if (operate === 'Add') {
+        if (!v) return callback(new Error(t('Please input field', { field: t('game.user.password') })))
+        if (!regularPassword(v)) return callback(new Error(t('validate.Please enter the correct password')))
+        return callback()
+    }
+
+    // 编辑：可空；非空则校验格式
+    if (!v) return callback()
+    if (!regularPassword(v)) return callback(new Error(t('validate.Please enter the correct password')))
+    return callback()
+}
+
 const rules: Partial<Record<string, FormItemRule[]>> = reactive({
     username: [buildValidatorData({ name: 'required', title: t('game.user.username') })],
-    password: [
-        buildValidatorData({ name: 'password', title: t('game.user.password') }),
-        buildValidatorData({ name: 'required', title: t('game.user.password') }),
-    ],
+    password: [{ validator: validatorGameUserPassword, trigger: 'blur' }],
     phone: [buildValidatorData({ name: 'required', title: t('game.user.phone') })],
     coin: [buildValidatorData({ name: 'number', title: t('game.user.coin') })],
-    game_channel_id: [buildValidatorData({ name: 'required', title: t('game.user.game_channel_id') })],
     admin_id: [buildValidatorData({ name: 'required', title: t('game.user.admin_id') })],
     create_time: [buildValidatorData({ name: 'date', title: t('game.user.create_time') })],
     update_time: [buildValidatorData({ name: 'date', title: t('game.user.update_time') })],