feat: 新增 ele 用户管理模块

apps/web-ele/src/views/system/user/modules/assign-role-form.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { assignUserRole, getUserRoleList } from '#/api/system/permission';
+import { $t } from '#/locales';
+
+import { useAssignRoleFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignRoleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const values = await formApi.getValues();
+    try {
+      await assignUserRole({
+        userId: values.id,
+        roleIds: values.roleIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const roleIds = await getUserRoleList(data.id as number);
+      // 设置到 values
+      await formApi.setValues({
+        ...data,
+        roleIds,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="分配角色">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/system/user/modules/dept-tree.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { onMounted, ref } from 'vue';
+
+import { Search } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { ElInput, ElTree } from 'element-plus';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+
+const emit = defineEmits(['select']);
+const deptList = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTree = ref<any[]>([]); // 部门树
+const expandedKeys = ref<number[]>([]); // 展开的节点
+const loading = ref(false); // 加载状态
+const searchValue = ref(''); // 搜索值
+
+/** 处理搜索逻辑 */
+function handleSearch(value: string) {
+  searchValue.value = value;
+  const filteredList = value
+    ? deptList.value.filter((item) =>
+        item.name.toLowerCase().includes(value.toLowerCase()),
+      )
+    : deptList.value;
+  deptTree.value = handleTree(filteredList);
+  // 展开所有节点
+  expandedKeys.value = deptTree.value.map((node) => node.id as number);
+}
+
+/** 选中部门 */
+const handleSelect = (data: any) => {
+  emit('select', data);
+};
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    loading.value = true;
+    const data = await getSimpleDeptList();
+    deptList.value = data;
+    deptTree.value = handleTree(data);
+  } catch (error) {
+    console.error('获取部门数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-2">
+      <ElInput
+        placeholder="搜索部门"
+        clearable
+        v-model="searchValue"
+        @input="handleSearch"
+        class="w-full"
+      >
+        <template #prefix>
+          <Search class="size-4" />
+        </template>
+      </ElInput>
+    </div>
+    <div v-loading="loading">
+      <ElTree
+        class="pt-2"
+        v-if="deptTree.length > 0"
+        :data="deptTree"
+        :props="{ label: 'name', children: 'children' }"
+        @node-click="handleSelect"
+        default-expand-all
+        node-key="id"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </div>
+  </div>
+</template>

apps/web-ele/src/views/system/user/modules/form.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createUser, getUser, updateUser } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemUserApi.User>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['用户'])
+    : $t('ui.actionTitle.create', ['用户']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemUserApi.User;
+    try {
+      await (formData.value?.id ? updateUser(data) : createUser(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/system/user/modules/import-form.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { UploadRawFile } from 'element-plus';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElMessage, ElUpload } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { importUser, importUserTemplate } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importUser(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: UploadRawFile) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function onDownload() {
+  const data = await importUserTemplate();
+  downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="导入用户">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <ElUpload
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :auto-upload="false"
+            :before-upload="beforeUpload"
+          >
+            <ElButton type="primary"> 选择 Excel 文件 </ElButton>
+          </ElUpload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton @click="onDownload"> 下载导入模板 </ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>

apps/web-ele/src/views/system/user/modules/reset-password-form.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { resetUserPassword } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useResetPasswordFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useResetPasswordFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await resetUserPassword(data.id, data.newPassword);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 设置到 values
+    await formApi.setValues(data);
+  },
+});
+</script>
+
+<template>
+  <Modal title="重置密码">
+    <Form class="mx-4" />
+  </Modal>
+</template>