ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/globalManage/userManage/UserManage.vue

@@ -0,0 +1,631 @@
+<template>
+    <div class="external-app-page" id="user-manage-page-root"
+         v-shortcut:Ctrl+A="toggleTableRowsSelection">
+        <ManageHeader>
+            <template #title>用户管理</template>
+            <template #tools>
+                <el-space>
+                    <el-input :suffix-icon="Search" v-focus
+                              placeholder="请输入用户名、姓名、拼音或手机号查询"
+                              style="width: 300px" v-model="queryState.name"
+                              @input="throttleGetUsers"/>
+                    <ja-button
+                        type="success"
+                        size="default"
+                        :icon="Plus"
+                        @click="createUser"
+                        shortcut="Alt+N"
+                        tooltip="创建新用户">
+                        新建
+                    </ja-button>
+                    <ja-dropdown-button @command="bulkOperation"
+                                        type="primary"
+                                        plain
+                                        tooltip="批量操作"
+                                        shortcut="Alt+P"
+                                        button-text="批量操作">
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item
+                                    tabindex="0"
+                                    v-for="item in bulkOperationMenu"
+                                    :key="item.id"
+                                    :command="item">
+                                    <template v-if="item.id !== 'DeleteAccount'">
+                                        {{ item.name }} ({{ item.shortcut }})
+                                    </template>
+                                    <template v-else>
+                                        <span style="color: #c53434">
+                                            {{ item.name }} ({{ item.shortcut }})</span>
+                                    </template>
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </ja-dropdown-button>
+                    <ja-button size="default" @click="reloadData" tooltip="重新加载数据"
+                               plain shortcut="Alt+R" :icon="Refresh">
+                        刷新
+                    </ja-button>
+                    <ja-button size="default" @click="gotoRecycle"
+                               shortcut="Alt+B">
+                        回收站
+                        <el-icon>
+                            <ArrowRight/>
+                        </el-icon>
+                    </ja-button>
+                    <vxe-toolbar ref="toolbarRef" custom></vxe-toolbar>
+                </el-space>
+            </template>
+        </ManageHeader>
+        <div class="external-app-page__body">
+            <el-scrollbar class="department-menu">
+                <DepartmentSingleSelector
+                    show-no-department
+                    v-model="state.currentDepartmentId"
+                    @change="departmentFilterChange"
+                    realmIdChangeAutoRefresh
+                    :realm-id="props.realmId"
+                    @init-success="departmentFilterChange"
+                ></DepartmentSingleSelector>
+            </el-scrollbar>
+            <div class="user-list">
+                <vxe-table
+                    :loading="loading"
+                    size="small"
+                    stripe
+                    height="100%"
+                    ref="tableRef"
+                    :column-config="{resizable: true}"
+                    :row-config="{ isHover: true }"
+                    :sort-config="sortConfig"
+                    :checkbox-config="{range: true, checkField: 'isChecked'}"
+                    :data="queryState.users"
+                    class="vxe-table--scrollbar"
+                    @sort-change="onSort"
+                    @checkbox-all="selectAllChangeEvent"
+                    @checkbox-change="selectChangeEvent">
+                    <!-- <vxe-column type="seq" width="60"></vxe-column> -->
+                    <vxe-column fixed="left" type="checkbox" width="40"></vxe-column>
+                    <vxe-column fixed="left" field="username" title="用户名" sortable
+                                show-overflow
+                                show-header-overflow></vxe-column>
+                    <vxe-column field="fullName" title="姓名" sortable
+                                show-overflow
+                                width="180"
+                                show-header-overflow>
+                        <template #default="{ row }: { row: CheckableUser }">
+                            <ja-user-info-tag :full-name="row.fullName"
+                                              :user-id="row.id"></ja-user-info-tag>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="department" title="所属部门" sortable
+                                sort-by="department.sortPath" show-overflow
+                                show-header-overflow>
+                        <template #default="{ row }">{{ row.department?.name }}</template>
+                    </vxe-column>
+                    <vxe-column field="classifiedLevel" title="密级" sortable
+                                show-overflow show-header-overflow>
+                        <template #default="{ row }: { row: CheckableUser }">
+                            {{ userClassifiedLevel.get(row.classifiedLevel) }}
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="mobile" title="手机号" sortable
+                                show-overflow
+                                show-header-overflow></vxe-column>
+                    <vxe-column field="email" title="电子邮箱" sortable
+                                show-overflow
+                                show-header-overflow></vxe-column>
+                    <vxe-column field="enableIpBind" title="启用IP绑定" sortable
+                                show-overflow show-header-overflow>
+                        <template #default="{ row }">
+                            <!-- row.disabled -->
+                            <el-tag v-if="row.enableIpBind" type="success" effect="light">已启用
+                            </el-tag>
+                            <el-tag v-else type="danger" effect="light">已禁用</el-tag>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="disabled" title="启用账号" sortable show-overflow
+                                show-header-overflow>
+                        <template #default="{ row }">
+                            <!-- row.disabled -->
+                            <el-tag v-if="row.disabled" type="danger" effect="light">已禁用
+                            </el-tag>
+                            <el-tag v-else type="success" effect="light">已启用</el-tag>
+                        </template>
+                    </vxe-column>
+                    <vxe-column title="操作" fixed="right" width="160px">
+                        <template #default="{ row }">
+                            <!-- row.disabled -->
+                            <el-button link type="warning" :icon="Edit" @click="updateUser(row)"
+                            >编辑
+                            </el-button>
+                            <el-button link type="danger" :icon="Delete" @click="deleteUser(row)"
+                            >删除
+                            </el-button>
+                        </template>
+                    </vxe-column>
+                    <template #empty>
+                        <el-empty/>
+                    </template>
+                </vxe-table>
+            </div>
+            <div class="table-tools">
+                <el-pagination
+                    background
+                    :page-sizes="pageSizes"
+                    @current-change="queryUsers()"
+                    @size-change="getUsers()"
+                    layout="total, sizes, prev, pager, next"
+                    v-model:page-size="queryState.pageSize"
+                    v-model:current-page="queryState.currentPage"
+                    :total="queryState.total"/>
+            </div>
+        </div>
+        <!-- 用户创建/更新 -->
+        <Editor
+            v-model="state.editorVisible"
+            :type="state.editorType"
+            :realm-id="props.realmId"
+            :data="state.editorData"
+            @success="editorSuccess"
+        />
+        <!-- 批量修改用户涉密等级 -->
+        <ClassifiedLevelEditor
+            v-model="state.editClassifiedLevelVisible"
+            :users="checkedUsers"
+            @success="getUsers"
+        ></ClassifiedLevelEditor>
+        <!-- 批量修改用户部门 -->
+        <DepartmentEditor
+            v-model="state.editDepVisible"
+            :users="checkedUsers"
+            @success="getUsers"
+            :realm-id="props.realmId"
+        ></DepartmentEditor>
+        <!-- 批量修改用户过期 -->
+        <ExpirationEditor
+            v-model="state.editExpirationVisible"
+            :users="checkedUsers"
+            @success="getUsers"
+        ></ExpirationEditor>
+        <!--批量修改用户密码-->
+        <PasswordEditor
+            v-model="state.editPasswordVisible"
+            :users="checkedUsers"
+            @success="getUsers"
+        ></PasswordEditor>
+        <attribute-editor ref="dlgAttributeEditor"
+                          :user-ids="queryState.checkedUsers.map(u=>u.id)"></attribute-editor>
+        <max-session-editor v-model="state.editMaxSessionEditorVisible" :users="checkedUsers"
+                            @success="getUsers"/>
+        <!-- <ElDialog width="30%" title="修改扩展属性" v-model="state.editAttributesVisible"></ElDialog> -->
+        <!-- <ElDialog width="30%" title="设置过期" v-model="state.editExpirationVisible"></ElDialog> -->
+        <!-- <ElDialog width="30%" title="重置密碼" v-model="state.editPasswordVisible">
+            <ElForm></ElForm>
+        </ElDialog> -->
+        <div style="height: 0" v-for="item in bulkOperationMenu" :key="item.id">
+            <div v-shortcut:[item.shortcut]="()=>bulkOperation(item)"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {Plus, ArrowRight, Delete, Edit, Refresh} from "@element-plus/icons-vue";
+import {
+    useUserApi,
+    type User,
+    useLoading
+} from "@jari-ace/app-bolts";
+import ManageHeader from "../../../components/header/ManageHeader.vue";
+import {reactive, ref, onMounted, onUnmounted} from "vue";
+import {
+    type VxeTableEvents,
+    type VxeTableInstance,
+    type VxeTablePropTypes,
+    type VxeToolbarInstance
+} from "vxe-table";
+import {VxeColumn, VxeTable, VxeToolbar} from "vxe-table";
+import Editor from "./components/Editor.vue";
+import {computed, watch} from "vue";
+import ClassifiedLevelEditor from "./components/ClassifiedLevelEditor.vue";
+import DepartmentEditor from "./components/DepartmentEditor.vue";
+import ExpirationEditor from "./components/ExpirationEditor.vue";
+import PasswordEditor from "./components/PasswordEditor.vue";
+import {
+    DepartmentSingleSelector,
+} from "@/components/departmentSelector";
+import {useRouter} from "vue-router";
+import {
+    JaButton,
+    JaDropdownButton,
+    type TreeNodeType,
+    JaUserInfoTag
+} from "@jari-ace/element-plus-component"
+import {Search} from "@element-plus/icons-vue";
+import MaxSessionEditor from "@/views/globalManage/userManage/components/MaxSessionEditor.vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import AttributeEditor from "@/views/globalManage/userManage/components/AttributeEditor.vue";
+import {useUserQuery} from "@/hooks/useUserQuery";
+import {pageSizes} from "@/hooks/usePageSize";
+import {throttle} from "lodash-es";
+import {
+    useUserClassificationLevelMap
+} from "@jari-ace/element-plus-component";
+
+type MenuItemId =
+    | "ResetPassword"
+    | "MigrationDepartment"
+    | "DisableAccount"
+    | "EnableAccount"
+    | "EnableIpBinding"
+    | "ModifyClassifiedLevel"
+    | "SetExpiration"
+    | "ModifyingExtendedProperties"
+    | "DeleteAccount"
+    | "SetMaxSession";
+
+const router = useRouter();
+
+const bulkOperationMenu: {
+    name: string;
+    id: MenuItemId;
+    shortcut: string;
+}[] = [
+    {
+        name: "重置密码",
+        id: "ResetPassword",
+        shortcut: "Alt+W"
+    },
+    {
+        name: "迁移部门",
+        id: "MigrationDepartment",
+        shortcut: "Alt+M"
+    },
+    {
+        name: "禁用账号",
+        id: "DisableAccount",
+        shortcut: "Alt+D"
+    },
+    {
+        name: "启用账号",
+        id: "EnableAccount",
+        shortcut: "Alt+E"
+    },
+    {
+        name: "启用IP绑定",
+        id: "EnableIpBinding",
+        shortcut: "Alt+I"
+    },
+    {
+        name: "修改涉密等级",
+        id: "ModifyClassifiedLevel",
+        shortcut: "Alt+S"
+    },
+    {
+        name: "设置过期",
+        id: "SetExpiration",
+        shortcut: "Alt+X"
+    },
+    {
+        name: "设置最大会话数限制",
+        id: "SetMaxSession",
+        shortcut: "Alt+A"
+    },
+    {
+        name: "修改扩展属性",
+        id: "ModifyingExtendedProperties",
+        shortcut: "Alt+T"
+    },
+    {
+        name: "删除账号",
+        id: "DeleteAccount",
+        shortcut: "Alt+F"
+    },
+];
+const loading = useLoading()
+const userApi = useUserApi();
+
+const props = defineProps<{
+    realmId: string;
+}>();
+
+onMounted(() => {
+    // 将表格和工具栏进行关联
+    const $table = tableRef.value;
+    const $toolbar = toolbarRef.value;
+    if ($table && $toolbar) {
+        $table.connect($toolbar);
+    }
+});
+const userClassifiedLevel = ref(await useUserClassificationLevelMap())
+const tableRef = ref<VxeTableInstance<CheckableUser>>();
+const toolbarRef = ref<VxeToolbarInstance>();
+const sortConfig = ref<VxeTablePropTypes.SortConfig<CheckableUser>>({
+    remote: true,
+    trigger: 'cell'
+})
+type Checkable = { isChecked: boolean }
+type CheckableUser = User & Checkable;
+const state = reactive<{
+    editorVisible: boolean;
+    editorType: "create" | "update";
+    editorData: CheckableUser | null;
+    currentDepartmentId: string;
+    editDepVisible: boolean;
+    editClassifiedLevelVisible: boolean;
+    editAttributesVisible: boolean;
+    editExpirationVisible: boolean;
+    editPasswordVisible: boolean;
+    editMaxSessionEditorVisible: boolean;
+}>({
+    editorType: "create",
+    editorVisible: false,
+    editorData: null,
+    currentDepartmentId: '-1',
+    editDepVisible: false,
+    editClassifiedLevelVisible: false,
+    editAttributesVisible: false,
+    editExpirationVisible: false,
+    editPasswordVisible: false,
+    editMaxSessionEditorVisible: false
+});
+
+const {queryState, queryUsers} = useUserQuery();
+
+const checkedUsers = computed<string[]>(() => {
+    return queryState.value.checkedUsers.map((user) => user.id);
+});
+let allChecked = false;
+
+function toggleTableRowsSelection() {
+    allChecked = !allChecked;
+    tableRef.value?.setAllCheckboxRow(allChecked);
+    const rows = tableRef.value?.data as CheckableUser[];
+    for (const row of rows) {
+        const index = queryState.value.checkedUsers.indexOf(row);
+        if (index < 0 && allChecked) {
+            queryState.value.checkedUsers.push(row);
+        } else if (index >= 0 && !allChecked) {
+            queryState.value.checkedUsers.splice(index, 1);
+        }
+    }
+}
+
+
+const departmentFilterChange = (current: TreeNodeType) => {
+    queryState.value.currentDept = current;
+    queryState.value.currentPage = 1;
+    getUsers();
+};
+
+const getUsers = () => {
+    //将选择的用户置空
+    queryState.value.checkedUsers = [];
+    queryUsers()
+};
+const throttleGetUsers = throttle(getUsers, 500)
+const reloadData = () => {
+    queryState.value.name = "";
+    queryState.value.currentPage = 1;
+    getUsers();
+}
+
+const onSort: VxeTableEvents.SortChange<CheckableUser> = ({sortList}) => {
+    if (sortList && sortList.length > 0) {
+        queryState.value.currentSort = sortList.map((item) => {
+            return {
+                field: (
+                    item.column.sortBy ?? item.field
+                ) as string,
+                order: item.order
+            };
+        })[0];
+    } else {
+        queryState.value.currentSort = undefined;
+    }
+    getUsers();
+}
+
+const createUser = () => {
+    state.editorType = "create";
+    state.editorVisible = true;
+    state.editorData = null;
+};
+
+const updateUser = (data: CheckableUser) => {
+    state.editorType = "update";
+    state.editorData = data;
+    state.editorVisible = true;
+};
+
+const deleteUser = (data: CheckableUser) => {
+    ElMessageBox.confirm(`您确定要删除用户【${data.username}】吗？`, "删除用户", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+                .then(() => {
+                    userApi.recycle([data.id]).then(() => {
+                        // getUserGroup();
+                        queryUsers();
+                    });
+                });
+};
+const dlgAttributeEditor = ref<typeof AttributeEditor>()
+
+const bulkOperation = (command: { name: string; id: MenuItemId }) => {
+    if (queryState.value.checkedUsers.length === 0) {
+        ElMessage({
+            type: "warning",
+            message: `请选择用户后再进行${command.name}操作`,
+        });
+        return false;
+    }
+    if (command.id === "MigrationDepartment") {
+        state.editDepVisible = true;
+    } else if (command.id === "ModifyClassifiedLevel") {
+        state.editClassifiedLevelVisible = true;
+    } else if (command.id === "SetExpiration") {
+        state.editExpirationVisible = true;
+    } else if (command.id === "ResetPassword") {
+        state.editPasswordVisible = true;
+    } else if (command.id === "DisableAccount") {
+        ElMessageBox.confirm("您确定要禁用所选用户吗？", "批量禁用账号", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+        }).then(() => {
+            userApi
+                .batchDisable({
+                    userIds: checkedUsers.value,
+                })
+                .then(() => {
+                    getUsers();
+                });
+        });
+    } else if (command.id === "EnableAccount") {
+        ElMessageBox.confirm("您确定要启用所选用户吗？", "批量启用账号", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+        }).then(() => {
+            userApi
+                .batchEnable({
+                    userIds: checkedUsers.value,
+                }).then(() => {
+                getUsers();
+            });
+        });
+    } else if (command.id === "DeleteAccount") {
+        ElMessageBox.confirm(`您确定要删除所选用户吗？`, "删除用户", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        })
+                    .then(() => {
+                        userApi.recycle(checkedUsers.value).then(() => {
+                            // getUserGroup();
+                            queryUsers();
+                        });
+                    });
+    } else if (command.id === "EnableIpBinding") {
+        ElMessageBox.confirm(`您确定要启用IP绑定吗？`, "启用IP绑定", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        })
+                    .then(() => {
+                        userApi.batchEnableIpBind({userIds: checkedUsers.value}).then(() => {
+                            // getUserGroup();
+                            getUsers();
+                        });
+                    });
+    } else if (command.id === "SetMaxSession") {
+        state.editMaxSessionEditorVisible = true;
+    } else if (command.id === "ModifyingExtendedProperties") {
+        dlgAttributeEditor.value?.show();
+    }
+};
+
+const editorSuccess = () => {
+    getUsers();
+    state.editorType = 'update';
+};
+
+const selectAllChangeEvent = (data: { checked: boolean }) => {
+    if (data.checked) {
+        queryState.value.checkedUsers = queryState.value.users;
+    } else {
+        queryState.value.checkedUsers = [];
+    }
+};
+
+const selectChangeEvent = (data: { checked: boolean; row: CheckableUser; rowIndex: number }) => {
+    if (data.checked) {
+        queryState.value.checkedUsers.push(data.row);
+    } else {
+        queryState.value.checkedUsers = queryState.value.checkedUsers.filter((user) => user.id
+                                                                                       !== data.row.id);
+    }
+    // console.log("已选人员", state.checkedUsers);
+};
+
+const gotoRecycle = () => {
+    router.push({
+        name: "userRecycleBin",
+    });
+};
+
+watch(
+    () => props.realmId,
+    () => {
+        queryState.value.realmId = props.realmId;
+        getUsers();
+    }
+);
+
+onUnmounted(() => {
+    throttleGetUsers.cancel()
+})
+
+queryState.value.realmId = props.realmId;
+</script>
+
+<style scoped lang="scss">
+.external-app-page {
+    height: 100%;
+
+    .external-app-page__body {
+        height: calc(100% - 56px);
+
+        .department-menu {
+            float: left;
+            width: 300px;
+            height: 100%;
+            border-right: 1px solid rgba(0, 0, 0, 0.05);
+            padding: 12px;
+
+            > h3 {
+                padding: 0 12px;
+                font-size: 16px;
+                height: 40px;
+                line-height: 40px;
+            }
+
+            :deep(.department-tree) {
+                .custom-node-style {
+                    .el-tree-node__content {
+                        height: 40px;
+                    }
+                }
+            }
+        }
+
+        .user-list {
+            float: left;
+            width: calc(100% - 300px);
+            height: calc(100% - 56px);
+            overflow-y: auto;
+        }
+
+        .table-tools {
+            padding: 12px 16px;
+            display: flex;
+            flex-direction: row-reverse;
+        }
+    }
+
+    h3 {
+        margin: 0;
+    }
+
+    .el-dropdown-link {
+        cursor: pointer;
+        color: var(--el-color-primary);
+        display: flex;
+        align-items: center;
+    }
+}
+
+:deep(.vxe-table--border-line) {
+    border: 0 none !important;
+}
+</style>