Initial commit

src/views/system/organization/components/org-edit.vue

@@ -0,0 +1,229 @@
+<!-- 部门编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="620"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改部门' : '添加部门'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 7, sm: 24 } : { flex: '90px' }"
+      :wrapper-col="styleResponsive ? { md: 17, sm: 24 } : { flex: '1' }"
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="上级部门" name="parentId">
+            <org-select
+              :data="organizationList"
+              placeholder="请选择上级部门"
+              v-model:value="form.parentId"
+            />
+          </a-form-item>
+          <a-form-item label="部门简称" name="organizationName">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入部门名称"
+              v-model:value="form.organizationName"
+            />
+          </a-form-item>
+          <a-form-item label="部门全称" name="organizationFullName">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="请输入部门全称"
+              v-model:value="form.organizationFullName"
+            />
+          </a-form-item>
+          <a-form-item label="部门代码">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入部门代码"
+              v-model:value="form.organizationCode"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="类型" name="organizationType">
+            <org-type-select v-model:value="form.organizationType" />
+          </a-form-item>
+          <a-form-item label="排序号" name="sortNumber">
+            <a-input-number
+              :min="0"
+              :max="99999"
+              class="ele-fluid"
+              placeholder="请输入排序号"
+              v-model:value="form.sortNumber"
+            />
+          </a-form-item>
+          <a-form-item label="备注">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入备注"
+              v-model:value="form.comments"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import OrgSelect from './org-select.vue';
+  import OrgTypeSelect from './org-type-select.vue';
+  import {
+    addOrganization,
+    updateOrganization
+  } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Organization | null;
+    // 部门id
+    organizationId?: number;
+    // 全部部门
+    organizationList: Organization[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<Organization>({
+    organizationId: undefined,
+    parentId: undefined,
+    organizationName: '',
+    organizationFullName: '',
+    organizationCode: '',
+    organizationType: undefined,
+    sortNumber: undefined,
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    organizationName: [
+      {
+        required: true,
+        message: '请输入部门名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    organizationFullName: [
+      {
+        required: true,
+        message: '请输入部门全称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    organizationType: [
+      {
+        required: true,
+        message: '请选择部门类型',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const orgData = {
+          ...form,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateOrganization
+          : addOrganization;
+        saveOrUpdate(orgData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          form.parentId = props.organizationId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/system/organization/components/org-select.vue

@@ -0,0 +1,39 @@
+<!-- 机构选择下拉框 -->
+<template>
+  <a-tree-select
+    allow-clear
+    tree-default-expand-all
+    :placeholder="placeholder"
+    :value="value || undefined"
+    :tree-data="data"
+    :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+    @update:value="updateValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Organization } from '@/api/system/organization/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: string;
+      // 机构数据
+      data: Organization[];
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/system/organization/components/org-type-select.vue

@@ -0,0 +1,39 @@
+<!-- 机构类型选择下拉框 -->
+<template>
+  <a-select
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+  >
+    <a-select-option v-for="item in data" :key="item.label" :value="item.value">
+      {{ item.label }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择机构类型'
+    }
+  );
+
+  // 机构类型数据
+  const data = getDictionaryOptions('organizationType');
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+</script>

src/views/system/organization/components/org-user-edit.vue

@@ -0,0 +1,296 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改用户' : '新建用户'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 7, sm: 24 } : { flex: '90px' }"
+      :wrapper-col="styleResponsive ? { md: 17, sm: 24 } : { flex: '1' }"
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="所属部门">
+            <org-select
+              :data="organizationList"
+              placeholder="请选择所属部门"
+              v-model:value="form.organizationId"
+            />
+          </a-form-item>
+          <a-form-item label="账号" name="username">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入用户账号"
+              v-model:value="form.username"
+            />
+          </a-form-item>
+          <a-form-item label="姓名" name="realName">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入真实姓名"
+              v-model:value="form.realName"
+            />
+          </a-form-item>
+          <a-form-item label="性别" name="sex">
+            <sex-select v-model:value="form.sex" />
+          </a-form-item>
+          <a-form-item label="角色" name="roles">
+            <role-select v-model:value="form.roles" />
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="手机号" name="phone">
+            <a-input
+              allow-clear
+              :maxlength="11"
+              placeholder="请输入手机号"
+              v-model:value="form.phone"
+            />
+          </a-form-item>
+          <a-form-item label="邮箱" name="email">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="请输入邮箱"
+              v-model:value="form.email"
+            />
+          </a-form-item>
+          <a-form-item label="出生日期">
+            <a-date-picker
+              class="ele-fluid"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择出生日期"
+              v-model:value="form.birthday"
+            />
+          </a-form-item>
+          <a-form-item v-if="!isUpdate" label="登录密码" name="password">
+            <a-input-password
+              :maxlength="20"
+              v-model:value="form.password"
+              placeholder="请输入登录密码"
+            />
+          </a-form-item>
+          <a-form-item label="个人简介">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入个人简介"
+              v-model:value="form.introduction"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { emailReg, phoneReg } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import OrgSelect from './org-select.vue';
+  import RoleSelect from '../../user/components/role-select.vue';
+  import SexSelect from '../../user/components/sex-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  import type { Organization } from '@/api/system/organization/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+    // 全部部门
+    organizationList: Organization[];
+    // 部门id
+    organizationId?: number;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<User>({
+    userId: undefined,
+    organizationId: undefined,
+    username: '',
+    nickname: '',
+    realName: '',
+    sex: undefined,
+    roles: [],
+    email: '',
+    phone: '',
+    password: '',
+    introduction: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    username: [
+      {
+        required: true,
+        type: 'string',
+        validator: (_rule: Rule, value: string) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!value) {
+              return reject('请输入用户账号');
+            }
+            checkExistence('username', value, props.data?.userId)
+              .then(() => {
+                reject('账号已经存在');
+              })
+              .catch(() => {
+                resolve();
+              });
+          });
+        },
+        trigger: 'blur'
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入昵称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    realName: [
+      {
+        required: true,
+        message: '请输入真实姓名',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    // sex: [
+    //   {
+    //     required: true,
+    //     message: '请选择性别',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return Promise.resolve();
+          }
+          return Promise.reject('密码必须为5-18位非空白字符');
+        },
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        form.nickname = form.realName;
+        form.alias = form.realName;
+        const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          form.organizationId = props.organizationId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/system/organization/components/org-user-list.vue

@@ -0,0 +1,231 @@
+<template>
+  <!-- 表格 -->
+  <ele-pro-table
+    ref="tableRef"
+    row-key="userId"
+    :columns="columns"
+    :datasource="datasource"
+    height="calc(100vh - 290px)"
+    tool-class="ele-toolbar-form"
+    :scroll="{ x: 800 }"
+    tools-theme="default"
+    bordered
+    cache-key="proSystemOrgUserTable"
+    class="sys-org-table"
+  >
+    <template #toolbar>
+      <org-user-search @search="reload" @add="openEdit()" />
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'roles'">
+        <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
+          {{ item.roleName }}
+        </a-tag>
+      </template>
+      <template v-else-if="column.key === 'status'">
+        <a-switch
+          :checked="record.status === 0"
+          @change="(checked: boolean) => editStatus(checked, record)"
+        />
+      </template>
+
+      <template v-if="column.key === 'balance'">
+        <span class="ele-text-success">
+          ￥{{ formatNumber(record.balance) }}
+        </span>
+      </template>
+      <template v-else-if="column.key === 'action'">
+        <a-space>
+          <a @click="openEdit(record)">修改</a>
+          <a-divider type="vertical" />
+          <a-popconfirm
+            placement="topRight"
+            title="确定要删除此用户吗？"
+            @confirm="remove(record)"
+          >
+            <a class="ele-text-danger">删除</a>
+          </a-popconfirm>
+        </a-space>
+      </template>
+    </template>
+  </ele-pro-table>
+  <!-- 编辑弹窗 -->
+  <org-user-edit
+    :data="current"
+    v-model:visible="showEdit"
+    :organization-list="organizationList"
+    :organization-id="organizationId"
+    @done="reload"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading } from 'ele-admin-pro/es';
+  import OrgUserSearch from './org-user-search.vue';
+  import OrgUserEdit from './org-user-edit.vue';
+  import { timeAgo } from 'ele-admin-pro';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { pageUsers, removeUser, updateUserStatus } from '@/api/system/user';
+  import type { User, UserParam } from '@/api/system/user/model';
+  import type { Organization } from '@/api/system/organization/model';
+
+  const props = defineProps<{
+    // 部门 id
+    organizationId?: number;
+    // 部门列表
+    organizationList: Organization[];
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '用户账号',
+      dataIndex: 'username',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '姓名',
+      dataIndex: 'realName',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '余额',
+      dataIndex: 'balance',
+      key: 'balance',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '性别',
+      dataIndex: 'sexName',
+      width: 80,
+      align: 'center',
+      showSorterTooltip: false,
+      hideInTable: true,
+      ellipsis: true
+    },
+    {
+      title: '角色',
+      key: 'roles'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      showSorterTooltip: false,
+      hideInTable: true,
+      ellipsis: true,
+      customRender: ({ text }) => timeAgo(text)
+    },
+    {
+      title: '状态',
+      key: 'status',
+      sorter: true,
+      showSorterTooltip: false,
+      width: 80,
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      align: 'center'
+    }
+  ]);
+
+  // 当前编辑数据
+  const current = ref<User | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    if (props.organizationId) {
+      where.organizationId = props.organizationId;
+    }
+    return pageUsers({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: User) => {
+    const hide = messageLoading('请求中..', 0);
+    removeUser(row.userId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 修改用户状态 */
+  const editStatus = (checked: boolean, row: User) => {
+    const status = checked ? 0 : 1;
+    updateUserStatus(row.userId, status)
+      .then((msg) => {
+        row.status = status;
+        message.success(msg);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  // 监听部门 id 变化
+  watch(
+    () => props.organizationId,
+    () => {
+      reload();
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+</style>

src/views/system/organization/components/org-user-search.vue

@@ -0,0 +1,83 @@
+<!-- 搜索表单 -->
+<template>
+  <a-row :gutter="16">
+    <a-col
+      v-bind="
+        styleResponsive ? { xl: 6, lg: 8, md: 12, sm: 24, xs: 24 } : { span: 6 }
+      "
+    >
+      <a-input
+        v-model:value.trim="form.keywords"
+        placeholder="请输入关键词"
+        allow-clear
+      />
+    </a-col>
+    <!--    <a-col-->
+    <!--      v-bind="-->
+    <!--        styleResponsive ? { xl: 6, lg: 8, md: 12, sm: 24, xs: 24 } : { span: 6 }-->
+    <!--      "-->
+    <!--    >-->
+    <!--      <a-input-->
+    <!--        v-model:value.trim="form.nickname"-->
+    <!--        placeholder="请输入昵称"-->
+    <!--        allow-clear-->
+    <!--      />-->
+    <!--    </a-col>-->
+    <a-col
+      v-bind="
+        styleResponsive
+          ? { xl: 12, lg: 8, md: 24, sm: 24, xs: 24 }
+          : { span: 12 }
+      "
+    >
+      <a-space :size="10" style="flex-wrap: wrap">
+        <a-button type="primary" class="ele-btn-icon" @click="search">
+          <template #icon>
+            <search-outlined />
+          </template>
+          <span>查询</span>
+        </a-button>
+        <a-button type="primary" class="ele-btn-icon" @click="add">
+          <template #icon>
+            <plus-outlined />
+          </template>
+          <span>新建</span>
+        </a-button>
+      </a-space>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+    (e: 'add'): void;
+  }>();
+
+  // 表单数据
+  const { form } = useFormData<UserParam>({
+    keywords: '',
+    username: '',
+    nickname: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', form);
+  };
+
+  /*  添加 */
+  const add = () => {
+    emit('add');
+  };
+</script>

src/views/system/organization/components/role-select.vue

@@ -0,0 +1,71 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    allow-clear
+    mode="multiple"
+    :value="roleIds"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  >
+    <a-select-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+    >
+      {{ item.roleName }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { listRoles } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: Role[]): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      value?: Role[];
+      //
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  // 选中的角色id
+  const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
+
+  // 角色数据
+  const data = ref<Role[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: number[]) => {
+    emit(
+      'update:value',
+      value.map((v) => ({ roleId: v }))
+    );
+  };
+
+  /* 获取角色数据 */
+  listRoles()
+    .then((list) => {
+      data.value = list;
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/system/organization/components/sex-select.vue

@@ -0,0 +1,45 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择性别'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions('sex');
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/system/organization/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-split-layout
+        width="266px"
+        allow-collapse
+        :right-style="{ overflow: 'hidden' }"
+        :style="{ minHeight: 'calc(100vh - 152px)' }"
+      >
+        <div>
+          <ele-toolbar theme="default">
+            <a-space :size="10">
+              <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+                <template #icon>
+                  <plus-outlined />
+                </template>
+                <span>新建</span>
+              </a-button>
+              <a-button
+                type="primary"
+                :disabled="!current"
+                class="ele-btn-icon"
+                @click="openEdit(current)"
+              >
+                <template #icon>
+                  <edit-outlined />
+                </template>
+                <span>修改</span>
+              </a-button>
+              <a-button
+                danger
+                type="primary"
+                :disabled="!current"
+                class="ele-btn-icon"
+                @click="remove"
+              >
+                <template #icon>
+                  <delete-outlined />
+                </template>
+                <span>删除</span>
+              </a-button>
+            </a-space>
+          </ele-toolbar>
+          <div class="ele-border-split sys-organization-list">
+            <a-tree
+              :tree-data="(data as any)"
+              show-line
+              v-model:expanded-keys="expandedRowKeys"
+              v-model:selected-keys="selectedRowKeys"
+              @select="onTreeSelect"
+            />
+          </div>
+        </div>
+        <template #content>
+          <org-user-list
+            v-if="current"
+            :organization-list="data"
+            :organization-id="current.organizationId"
+          />
+        </template>
+      </ele-split-layout>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <org-edit
+      v-model:visible="showEdit"
+      :data="editData"
+      :organization-list="data"
+      :organization-id="current?.organizationId"
+      @done="query"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { messageLoading, toTreeData, eachTreeData } from 'ele-admin-pro/es';
+  import OrgUserList from './components/org-user-list.vue';
+  import OrgEdit from './components/org-edit.vue';
+  import {
+    listOrganizations,
+    removeOrganization
+  } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  // 加载状态
+  const loading = ref(true);
+
+  // 树形数据
+  const data = ref<Organization[]>([]);
+
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+
+  // 选中数据
+  const current = ref<Organization | null>(null);
+
+  // 是否显示表单弹窗
+  const showEdit = ref(false);
+
+  // 编辑回显数据
+  const editData = ref<Organization | null>(null);
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+    listOrganizations()
+      .then((list) => {
+        loading.value = false;
+        const eks: number[] = [];
+        list.forEach((d, i) => {
+          d.title = d.organizationName;
+          d.key = d.organizationId;
+          d.value = d.organizationId;
+
+          if (typeof d.key === 'number') {
+            eks.push(d.key);
+          }
+        });
+        expandedRowKeys.value = eks;
+        data.value = toTreeData({
+          data: list,
+          idField: 'organizationId',
+          parentIdField: 'parentId'
+        });
+        if (list.length) {
+          if (typeof list[0].key === 'number') {
+            selectedRowKeys.value = [list[0].key];
+          }
+          current.value = list[0];
+          current.value.organizationId = 0;
+        } else {
+          selectedRowKeys.value = [];
+          current.value = null;
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  /* 选择数据 */
+  const onTreeSelect = () => {
+    eachTreeData(data.value, (d) => {
+      if (typeof d.key === 'number' && selectedRowKeys.value.includes(d.key)) {
+        current.value = d;
+        return false;
+      }
+    });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (item?: Organization | null) => {
+    editData.value = item ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除 */
+  const remove = () => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的部门吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeOrganization(current.value?.organizationId)
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            query();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemOrganization'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-organization-list {
+    padding: 12px 6px;
+    height: calc(100vh - 242px);
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+</style>