组用户功能修订

src/views/group-user/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="page-wrapper tree-wrapper">
+    <div class="page-wrapper tree-wrapper group-user-page">
         <Group class="tree-container" v-model:curTreeNode="selectedNode" :treeApi="treeApi" @on-change="onTreeChange"
             @on-tree-data="onTreeData" />
         <div class="main-container">
@@ -7,22 +7,59 @@
                 <Button type="primary" @click="showAddUser">
                     <Icon type="md-add" style="margin-right: 4px" />新增用户
                 </Button>
+                <Button type="success" class="ml-15" @click="showImportUser">批量导入</Button>
+                <Button class="ml-15" @click="onExport">导出组用户</Button>
 
                 <Input placeholder="输入用户名 / 真实姓名搜索" class="fr" search clearable suffix="ios-search" style="width: 220px"
-                    v-model="keyword" @on-search="onSearch" @on-clear="onSearch" />
+                    v-model="keyword" @on-search="onSearch" @on-clear="onClear" />
             </div>
 
-            <TablePageAlovaNew ref="tableRef" :dataApi="tableApi" :columns="columns" :tableHeight="tableHeight" />
+            <TablePageAlovaNew ref="tableRef" :dataApi="tableApi" :columns="columns" :tableHeight="tableHeight">
+                <template #default="{ checkList }">
+                    <Button type="primary" ghost @click="openAdjust(checkList)">调整组</Button>
+                    <Button type="warning" class="ml-15" :disabled="!checkList?.length" @click="openBatchStatus(checkList)">设置状态</Button>
+                    <Button type="error" class="ml-15" :disabled="!checkList?.length" @click="openBatchDelete(checkList)">批量删除</Button>
+                </template>
+            </TablePageAlovaNew>
 
-            <!-- 容器组件：新增 / 编辑 -->
+            <!-- 容器组件：新增 / 编辑 / 调整组 / 批量导入 -->
             <AddUserContainer ref="addRef" />
             <EditUserContainer ref="editRef" />
+            <AdjustGroupContainer ref="adjustRef" />
+            <BatchImportUser v-model="importModal" :current-group-id="selectedNode?.id" @success="onImportSuccess" />
+            <UserSort v-model:visible="sortModal" :user-id="sortRow?.id ?? null"
+                :user-account="sortRow?.account || sortRow?.realName || ''"
+                :current-sort-no="sortRow?.sortNo ?? null" :group-id="selectedNode?.id ?? null" @saved="onSortSaved" />
+
+            <!-- 批量设置用户状态 -->
+            <Modal v-model="statusModal" title="设置用户的状态" :width="520" :mask-closable="false">
+                <div class="batch-status-body">
+                    <div class="user-list-row">
+                        <span class="user-list-label">需设置用户：</span>
+                        <ul class="user-list">
+                            <li v-for="item in statusSelectedRows" :key="item.id">{{ item.realName || item.account }}</li>
+                        </ul>
+                    </div>
+                    <div class="status-radio-row">
+                        <span class="status-label">选择设置状态：</span>
+                        <RadioGroup v-model="statusValue" type="button">
+                            <Radio :label="0">正常</Radio>
+                            <Radio :label="1">禁用</Radio>
+                        </RadioGroup>
+                    </div>
+                </div>
+                <template #footer>
+                    <Button type="primary" :loading="statusSubmitting" @click="confirmBatchStatus">确定</Button>
+                    <Button @click="statusModal = false">取消</Button>
+                </template>
+            </Modal>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
+import { Message } from "view-ui-plus";
 import useCurrentInstance from "@/utils/hook/useCurrentInstance";
 import MyConfirm from "@/components/MyConfirm";
 import TablePageAlovaNew from '@/components/TablePageAlovaNew.vue';
@@ -30,10 +67,13 @@ import { OperatorEnum } from '@/types';
 import Group from './group/index.vue'
 import AddUserContainer from './user/AddUserContainer.vue';
 import EditUserContainer from './user/EditUserContainer.vue';
+import AdjustGroupContainer from './AdjustGroupContainer.vue';
+import BatchImportUser from './user/BatchImportUser.vue';
+import UserSort from './user/UserSort.vue';
 
 defineOptions({ name: "GroupUser" });
 
-const { $utils } = useCurrentInstance();
+const { $utils, $conf } = useCurrentInstance();
 
 const treeApi = () => Apis.SysGroup.getTree();
 
@@ -44,6 +84,7 @@ const treeData = ref<any[]>([])
 function onTreeChange(node: any) {
     selectedNode.value = node;
     dataParams.value.groupId = node?.id ?? null;
+    dataParams.value.withSub = 0;
     tableRef.value?.refreshData();
 }
 function onTreeData(tree: any[]) {
@@ -51,6 +92,16 @@ function onTreeData(tree: any[]) {
 }
 function onSearch() {
     dataParams.value.name = keyword.value.trim() || undefined;
+    // 手动搜索：包含子组用户
+    dataParams.value.withSub = 1;
+    tableRef.value?.refreshData();
+}
+
+function onClear() {
+    keyword.value = '';
+    dataParams.value.name = undefined;
+    // 取消搜索：回到仅当前组浏览
+    dataParams.value.withSub = 0;
     tableRef.value?.refreshData();
 }
 
@@ -73,9 +124,12 @@ const keyword = ref('')
 const dataParams = ref<{
     name: string | undefined;
     groupId: number | null;
+    withSub: number;
 }>({
     name: undefined,
     groupId: null,
+    // 默认仅当前组；仅手动搜索时才包含子组
+    withSub: 0,
 });
 
 const tableApi = (params: { pageIndex: number; pageSize: number }) => {
@@ -83,8 +137,8 @@ const tableApi = (params: { pageIndex: number; pageSize: number }) => {
         params: {
             name: dataParams.value.name,
             groupId: dataParams.value.groupId ?? undefined,
-            // 选中组织时包含子组用户；未选中时不传
-            withSub: dataParams.value.groupId != null ? 1 : undefined,
+            // 默认仅当前组；手动搜索时置 1 才包含子组
+            withSub: dataParams.value.withSub,
             pageIndex: params.pageIndex,
             pageSize: params.pageSize,
         },
@@ -119,6 +173,7 @@ function describeRoles(roles: any): string {
 
 /* ================= 表格列 ================= */
 const columns = [
+    { type: 'selection', width: 55, align: 'center' },
     { type: 'index', title: '序号', width: 70, align: 'center' },
     { title: '用户名', key: 'account', minWidth: 120 },
     { title: '真实姓名', key: 'realName', minWidth: 120 },
@@ -133,6 +188,10 @@ const columns = [
             h('Tag', { color: row.disabled ? 'default' : 'success' },
                 row.disabled ? '已禁用' : '启用'),
     },
+    {
+        title: '排序号', key: 'sortNo', width: 90, align: 'center',
+        render: (h: any, { row }: any) => h('span', row.sortNo == null ? '-' : row.sortNo),
+    },
     {
         title: '操作', key: 'action', width: 220, align: 'center', fixed: 'right' as const,
         render: (h: any, { row }: any) => {
@@ -141,20 +200,51 @@ const columns = [
                     style: { marginRight: '8px', color: '#577afb' },
                     onClick: () => handleEdit(row),
                 }, '编辑'),
+            ];
+            // 仅「单组浏览」（withSub=0）时开放排序：此时每个用户都直接属于当前组，排序号语义明确；
+            // 含子组搜索（withSub=1）下用户可能属于子组，排序号归属不清，故隐藏。
+            if (dataParams.value.withSub === 0) {
+                opList.push(
+                    h('a', {
+                        style: { marginRight: '8px', color: '#2d8cf0' },
+                        onClick: () => openSort(row),
+                    }, '排序'),
+                );
+            }
+            opList.push(
                 h('a', {
-                    style: { marginRight: '8px', color: '#ed4014' },
+                    style: { color: '#ed4014' },
                     onClick: () => handleDelete(row),
                 }, '删除'),
-                h('a', {
-                    style: { color: row.disabled ? '#19be6b' : '#ff9900' },
-                    onClick: () => handleToggleStatus(row),
-                }, row.disabled ? '启用' : '禁用'),
-            ];
+            );
             return h('div', opList);
         },
     },
 ];
 
+/* ================= 导出组用户 ================= */
+function onExport() {
+    const gid = selectedNode.value?.id ?? null;
+    if (gid == null) {
+        Message.warning('请先选择要导出的组');
+        return;
+    }
+    const params = new URLSearchParams();
+    params.set('groupId', String(gid));
+    params.set('withSub', '1');
+    if (dataParams.value.name) params.set('name', dataParams.value.name);
+    window.open(`${$conf.serviceHost}/api/sysuser/Export?${params.toString()}`);
+}
+
+/* ================= 批量导入 ================= */
+const importModal = ref(false);
+function showImportUser() {
+    importModal.value = true;
+}
+function onImportSuccess() {
+    tableRef.value?.reloadData(OperatorEnum.sel);
+}
+
 /* ================= 新增 ================= */
 const addRef = ref();
 function showAddUser() {
@@ -172,14 +262,32 @@ function handleEdit(row: any) {
     });
 }
 
-/* ================= 删除 ================= */
+/* ================= 调整组 ================= */
+const adjustRef = ref();
+function openAdjust(checkList: number[]) {
+    if (!checkList?.length) {
+        Message.error('请选择待调整用户！');
+        return;
+    }
+    const rows = tableRef.value?.list.filter((r: any) => checkList.includes(r.id)) || [];
+    adjustRef.value?.open(checkList, rows, treeData.value, () => {
+        tableRef.value?.reloadData(OperatorEnum.sel);
+    });
+}
+
+/* ================= 删除（从当前组移除） ================= */
 async function handleDelete(row: any) {
+    const gid = selectedNode.value?.id ?? null;
+    if (gid == null) {
+        Message.warning('请先选择组');
+        return;
+    }
     await MyConfirm({
         msg: `确定删除用户「${row.realName || row.account}」吗？`,
         info: '删除后不可恢复！',
         async onOk() {
             try {
-                await Apis.SysUser.delete({ pathParams: { id: row.id } });
+                await Apis.SysUser.deleteFromGroup({ pathParams: { userId: row.id, groupId: gid } });
                 Message.success('删除成功！');
                 tableRef.value?.reloadData(OperatorEnum.del);
             } catch (e: any) {
@@ -189,26 +297,132 @@ async function handleDelete(row: any) {
     });
 }
 
-/* ================= 禁用 / 启用 ================= */
-async function handleToggleStatus(row: any) {
-    const isDisabled = !!row.disabled;
+/* ================= 批量删除 ================= */
+const batchDeleteSelected = ref<number[]>([]);
+async function openBatchDelete(checkList: number[]) {
+    if (!checkList?.length) {
+        Message.error('请选择待删除用户！');
+        return;
+    }
+    batchDeleteSelected.value = checkList;
+    const rows = tableRef.value?.list.filter((r: any) => checkList.includes(r.id)) || [];
+    const names = rows.map((r: any) => r.realName || r.account).join('，');
     await MyConfirm({
-        msg: `确定要${isDisabled ? '启用' : '禁用'}用户「${row.realName || row.account}」吗？`,
+        msg: `确定删除用户「${names}」这些用户吗？`,
+        info: '删除后不可恢复！',
         async onOk() {
             try {
-                if (isDisabled) {
-                    await Apis.SysUser.enable({ pathParams: { id: row.id } });
-                } else {
-                    await Apis.SysUser.disable({ pathParams: { id: row.id } });
+                const gid = selectedNode.value?.id ?? null;
+                if (gid == null) {
+                    Message.warning('请先选择组');
+                    return;
                 }
-                Message.success(isDisabled ? '已启用！' : '已禁用！');
-                tableRef.value?.reloadData(OperatorEnum.sel);
+                await Apis.SysUser.batchDelete({
+                    data: { userIds: batchDeleteSelected.value, groupId: gid }
+                });
+                Message.success('删除成功！');
+                tableRef.value?.reloadData(OperatorEnum.del);
             } catch (e: any) {
-                Message.error(e?.message || '操作失败');
+                Message.error(e?.message || '删除失败');
             }
         },
     });
 }
+
+/* ================= 批量设置状态 ================= */
+const statusModal = ref(false);
+const statusSubmitting = ref(false);
+const statusValue = ref<number>(0);
+const statusSelectedRows = ref<any[]>([]);
+
+function openBatchStatus(checkList: number[]) {
+    if (!checkList?.length) {
+        Message.error('请选择待设置用户！');
+        return;
+    }
+    const rows = tableRef.value?.list.filter((r: any) => checkList.includes(r.id)) || [];
+    statusSelectedRows.value = rows;
+    // 默认以第一个选中用户当前状态作为默认选中项
+    statusValue.value = rows[0]?.disabled ? 1 : 0;
+    statusModal.value = true;
+}
+
+async function confirmBatchStatus() {
+    if (!statusSelectedRows.value.length) return;
+    statusSubmitting.value = true;
+    try {
+        const userIds = statusSelectedRows.value.map(r => r.id);
+        await Apis.SysUser.batchChangeStatus({
+            data: { userIds, disabled: statusValue.value === 1 }
+        });
+        Message.success('设置成功！');
+        statusModal.value = false;
+        tableRef.value?.reloadData(OperatorEnum.sel);
+    } catch (e: any) {
+        Message.error(e?.message || '设置失败');
+    } finally {
+        statusSubmitting.value = false;
+    }
+}
+
+/* ================= 组内排序 ================= */
+const sortModal = ref(false);
+const sortRow = ref<any>(null);
+function openSort(row: any) {
+    sortRow.value = row;
+    sortModal.value = true;
+}
+function onSortSaved() {
+    tableRef.value?.reloadData(OperatorEnum.sel);
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.group-user-page .page-panel {
+    left: 348px !important;
+}
+
+.batch-status-body {
+    padding: 8px 12px;
+
+    .user-list-row {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 24px;
+    }
+
+    .user-list-label {
+        flex-shrink: 0;
+        color: #666;
+        line-height: 22px;
+        padding-top: 2px;
+    }
+
+    .user-list {
+        flex: 1;
+        margin: 0;
+        padding-left: 18px;
+        color: #333;
+        line-height: 22px;
+
+        li {
+            margin-bottom: 6px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .status-radio-row {
+        display: flex;
+        align-items: center;
+    }
+
+    .status-label {
+        flex-shrink: 0;
+        color: #666;
+        margin-right: 12px;
+    }
+}
+</style>