完善部门页面

src/pages/system/departments/components/DepartmentTree.tsx

@@ -0,0 +1,80 @@
+import { Empty, Spin, Tree } from 'antd'
+import { useStyle } from '../style.ts'
+import { useTranslation } from '@/i18n.ts'
+import { useSetAtom } from 'jotai'
+import { useDepartStore } from '../store.ts'
+import { FormInstance } from 'antd/lib'
+import { useAtomValue } from 'jotai/index'
+import { TreeNodeRender } from './TreeNodeRender.tsx'
+import { useRef } from 'react'
+import { flattenTree } from '@/utils'
+import { useDeepCompareEffect } from 'react-use'
+import { IDepartment } from '@/types/department'
+
+export const DepartmentTree = ({ form }: { form: FormInstance }) => {
+
+    const { selectedDepartAtom, departTreeAtom, batchIdsAtom } = useDepartStore()
+    const { styles } = useStyle()
+    const { t } = useTranslation()
+    const setIds = useSetAtom(batchIdsAtom)
+    const setCurrent = useSetAtom(selectedDepartAtom)
+    const { data = [], isLoading } = useAtomValue(departTreeAtom)
+    const flattenMenusRef = useRef<IDepartment[]>([])
+
+    useDeepCompareEffect(() => {
+
+        if (isLoading) return
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore array
+        if (data.length) {
+            // @ts-ignore flattenTree
+            flattenMenusRef.current = flattenTree<IDepartment[]>(data as any)
+            // console.log(flattenMenusRef.current)
+        }
+
+        return () => {
+            setCurrent({} as IDepartment)
+        }
+
+    }, [ data, isLoading ])
+
+    const renderEmpty = () => {
+        if ((data as any).length > 0 || isLoading) return null
+        return <Empty description={t('message.emptyDataAdd', '暂无数据，点击添加')}/>
+    }
+
+    return (<>
+                <Spin spinning={isLoading} style={{ minHeight: 200 }}>
+                    {
+                        renderEmpty()
+                    }
+                    <Tree.DirectoryTree
+                            className={styles.tree}
+                            treeData={data as any}
+                            defaultExpandAll={true}
+                            // draggable={true}
+                            titleRender={(node) => {
+                                return (<TreeNodeRender node={node as any} form={form}/>)
+                            }}
+                            fieldNames={{
+                                title: 'name',
+                                key: 'id'
+                            }}
+                            onSelect={(item) => {
+                                const current = flattenMenusRef.current?.find((menu) => menu.id === item[0])
+                                setCurrent(current as IDepartment)
+                                form.setFieldsValue({ ...current })
+                            }}
+                            onCheck={(item) => {
+                                setIds(item as number[])
+                            }}
+                            // checkable={true}
+                            showIcon={false}
+                    />
+                </Spin>
+            </>
+    )
+}
+
+export default DepartmentTree

src/pages/system/departments/components/TreeNodeRender.tsx

@@ -0,0 +1,59 @@
+import { memo } from 'react'
+import { MenuItem } from '@/types'
+import { Popconfirm, Space, TreeDataNode } from 'antd'
+import { FormInstance } from 'antd/lib'
+import { useTranslation } from '@/i18n.ts'
+import { useStyle } from '../style.ts'
+import { useAtomValue, useSetAtom } from 'jotai/index'
+import { useDepartStore } from '../store.ts'
+import { PlusOutlined } from '@ant-design/icons'
+import ActionIcon, { DeleteAction } from '@/components/icon/action'
+
+export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataNode, form: FormInstance }) => {
+    const { name } = node
+    const { t } = useTranslation()
+    const { styles } = useStyle()
+    const { selectedDepartAtom, deleteDepartAtom, defaultDepart } = useDepartStore()
+    const { mutate } = useAtomValue(deleteDepartAtom)
+
+    const setCurrent = useSetAtom(selectedDepartAtom)
+
+    return (
+            <div className={styles.treeNode}>
+                <span>{name as any}</span>
+                <span className={'actions'}>
+                    <Space size={'middle'}>
+                        <ActionIcon
+                                size={12}
+                                icon={<PlusOutlined/>}
+                                title={t('actions.add', '添加')}
+                                onClick={(e) => {
+                                    // console.log('add')
+                                    e.stopPropagation()
+                                    e.preventDefault()
+                                    const data = {
+                                        ...defaultDepart,
+                                        parent_id: node.id,
+                                    }
+                                    setCurrent(data)
+                                    form.setFieldsValue(data)
+
+                                }}/>
+                        <Popconfirm
+                                title={t('message.deleteConfirm', '确定要删除吗？')}
+                                onConfirm={() => {
+                                    mutate([ (node as any).id ])
+                                }}
+                        >
+                          <DeleteAction
+                                  size={12}
+                                  onClick={(e) => {
+                                      e.stopPropagation()
+                                      e.stopPropagation()
+                                  }}/>
+                        </Popconfirm>
+                    </Space>
+                </span>
+            </div>
+    )
+})

src/pages/system/departments/index.tsx

@@ -1,16 +1,156 @@
-import { PageContainer } from '@ant-design/pro-components'
-import {  createLazyFileRoute } from '@tanstack/react-router'
+import { PageContainer, ProCard } from '@ant-design/pro-components'
+import { Flexbox } from 'react-layout-kit'
+import { DraggablePanel } from '@/components/draggable-panel'
+import { useTranslation } from '@/i18n.ts'
+import { useStyle } from './style.ts'
+import DepartmentTree from './components/DepartmentTree.tsx'
+import { Alert, Button, Divider, Form, Input, InputNumber, InputRef, notification, TreeSelect } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import { useDepartStore } from './store.ts'
+import { useAtom, useAtomValue, } from 'jotai'
+import Glass from '@/components/glass'
+import { useEffect, useRef } from 'react'
 
 const Departments = () => {
+
+    const { t } = useTranslation()
+    const { styles, cx } = useStyle()
+    const [ form ] = Form.useForm()
+    const inputRef = useRef<InputRef>()
+    const { defaultDepart, selectedDepartAtom, departTreeAtom, saveOrUpdateDepartAtom } = useDepartStore()
+    const { data } = useAtomValue(departTreeAtom)
+    const { mutate, isPending, isError, error } = useAtomValue(saveOrUpdateDepartAtom)
+    const [ current, setCurrent ] = useAtom(selectedDepartAtom)
+
+    useEffect(() => {
+
+        if (isError) {
+            notification.error({
+                message: t('message.error', '错误'),
+                description: (error as any).message ?? t('message.saveFail', '保存失败'),
+            })
+        }
+    }, [ isError ])
+
+    useEffect(() => {
+        if (current.id === 0 && inputRef.current) {
+            inputRef.current.focus()
+        }
+    }, [ current ])
+
     return (
-            <PageContainer breadcrumbRender={false}>
+            <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
+                <Flexbox horizontal>
+                    <DraggablePanel expandable={false}
+                                    placement="left"
+                                    defaultSize={{ width: 300 }}
+                                    maxWidth={500}
+                                    style={{ position: 'relative' }}
+                    >
+                        <ProCard title={t('system.departments.title', '部门')}>
+                            <DepartmentTree form={form}/>
+                        </ProCard>
+                        <div className={styles.treeActions}>
+                            <Divider style={{ flex: 1, margin: '8px 0' }}/>
+                            <Button style={{ flex: 1 }} size={'small'}
+                                    block={true} type={'dashed'}
+                                    icon={<PlusOutlined/>}
+                                    onClick={() => {
+                                        const data = {
+                                            ...defaultDepart,
+                                            parent_id: current.id ?? 0,
+                                        }
+                                        setCurrent(data)
+                                        form.setFieldsValue(data)
+                                    }}
+                            >{t('actions.news')}</Button>
+                        </div>
+                    </DraggablePanel>
+                    <Flexbox className={styles.box}>
+                        <Glass
+                                enabled={current.id === undefined}
+                                description={<>
+                                    <Alert
+                                            message={t('message.infoTitle', '提示')}
+                                            description={t('system.departments.form.empty', '请从左侧选择一行数据操作')}
+                                            type="info"
+                                    />
+                                </>}
+                        >
+
+
+                            <ProCard title={t('system.departments.setting', '编辑')}>
+                                <Form form={form}
+                                      initialValues={current!}
+                                      labelAlign="left"
+                                      labelWrap
+                                      labelCol={{ span: 4 }}
+                                      wrapperCol={{ span: 12 }}
+                                      colon={false}
+                                      className={cx(styles.form, {
+                                          [styles.emptyForm]: current.id === undefined
+                                      })}
+                                >
+                                    <Form.Item hidden={true} label={'id'} name={'id'}>
+                                        <Input disabled={true}/>
+                                    </Form.Item>
+                                    <Form.Item
+                                            rules={[
+                                                { required: true, message: t('rules.required') }
+                                            ]}
+                                            label={t('system.departments.form.name', '部门名称')} name={'name'}>
+                                        <Input ref={inputRef as any}
+                                               placeholder={t('system.departments.form.name', '部门名称')}/>
+                                    </Form.Item>
+                                    <Form.Item label={t('system.departments.form.parent', '上级部门')}
+                                               name={'parent_id'}>
+                                        <TreeSelect
+                                                treeData={[
+                                                    { id: 0, name: '顶级', children: data as any },
+                                                ]}
+                                                treeDefaultExpandAll={true}
+                                                fieldNames={{
+                                                    label: 'name',
+                                                    value: 'id'
+                                                }}/>
+                                    </Form.Item>
+
+                                    <Form.Item label={t('system.departments.form.sort', '排序')} name={'sort'}>
+                                        <InputNumber/>
+                                    </Form.Item>
+                                    <Form.Item label={t('system.departments.form.manager_user_id', '负责人')}
+                                               name={'path'}>
+                                        <Input/>
+                                    </Form.Item>
+
+                                    <Form.Item label={t('system.departments.form.phone', '联系电话')}
+                                               name={'phone'}
+                                    >
+                                        <Input/>
+                                    </Form.Item>
+                                    <Form.Item label={' '}>
+                                        <Button type="primary"
+                                                htmlType={'submit'}
+                                                loading={isPending}
+                                                onClick={() => {
+                                                    form.validateFields().then((values) => {
+                                                        mutate(values)
+                                                    })
+                                                }}
+                                        >
+                                            {t('system.departments.form.save', '保存')}
+                                        </Button>
+                                    </Form.Item>
+
+                                </Form>
+                            </ProCard>
 
+                        </Glass>
+                    </Flexbox>
+                </Flexbox>
             </PageContainer>
     )
 }
 
-export const Route = createLazyFileRoute("/system/departments")({
-    component: Departments
-})
 
 export default Departments

src/pages/system/departments/store.ts

@@ -0,0 +1,89 @@
+import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
+import systemServ from '@/service/system.ts'
+import { IApiResult, IPage } from '@/types'
+import { IDepartment } from '@/types/department'
+import { atom, createStore } from 'jotai'
+import { t } from 'i18next'
+import { message } from 'antd'
+
+
+const store = createStore()
+
+const departPageAtom = atom<IPage>({})
+
+const defaultDepart = {
+    id: 0,
+    parent_id: 0,
+    name: '',
+    manager_user_id: 0,
+    phone: '',
+    sort: 0,
+} as IDepartment
+
+const batchIdsAtom = atom<number[]>([])
+
+const selectedDepartAtom = atom<IDepartment>({} as IDepartment)
+
+const departTreeAtom = atomWithQuery(() => {
+
+    return {
+        queryKey: [ 'departTree' ],
+        queryFn: async () => {
+            return await systemServ.dept.tree()
+        },
+        select: (res) => {
+            return res.data.tree ?? []
+        }
+    }
+})
+
+const saveOrUpdateDepartAtom = atomWithMutation<IApiResult, IDepartment>((get) => {
+
+    return {
+        mutationKey: [ 'saveOrUpdateDepart', get(selectedDepartAtom) ],
+        mutationFn: async (data: IDepartment) => {
+            if (data.id) {
+                return await systemServ.dept.update(data)
+            }
+            return await systemServ.dept.add(data)
+        },
+        onSuccess: (res) => {
+            const isAdd = !!res.data?.id
+            message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
+            store.set(selectedDepartAtom, prev => ({
+                ...prev,
+                ...(isAdd ? res.data : {})
+            }))
+            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree', get(departPageAtom) ] }).then()
+        }
+    }
+
+})
+
+
+const deleteDepartAtom = atomWithMutation<IApiResult, number[]>((get) => {
+
+    return {
+        mutationKey: [ 'deleteDepart', get(batchIdsAtom) ],
+        mutationFn: async (ids: number[]) => {
+            return await systemServ.dept.batchDelete(ids)
+        },
+        onSuccess: () => {
+            message.success(t('message.deleteSuccess', '删除成功'))
+            store.set(batchIdsAtom, [])
+            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree', get(departPageAtom) ] }).then()
+
+        }
+    }
+
+})
+
+export const useDepartStore = () => ({
+    defaultDepart,
+    departPageAtom,
+    selectedDepartAtom,
+    departTreeAtom,
+    deleteDepartAtom,
+    batchIdsAtom,
+    saveOrUpdateDepartAtom,
+})

src/pages/system/departments/style.ts

@@ -0,0 +1,72 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
+    const prefix = `${prefixCls}-${token?.proPrefix}-department-page`
+
+
+    const tree = css`
+    .ant-tree {
+      overflow: auto;
+      height: 100%;
+      border-right: 1px solid ${token.colorBorder};
+      background: ${token.colorBgContainer};
+
+    }
+
+    .ant-tree-directory .ant-tree-treenode-selected::before {
+      background: ${token.colorBgTextHover};
+    }
+
+    .ant-tree-treenode:before {
+      border-radius: ${token.borderRadius}px;
+    }
+  `
+
+    const treeNode = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .actions {
+      display: none;
+      padding: 0 10px;
+    }
+
+    &:hover .actions { {
+      display: flex;
+    }
+
+  `
+    const treeActions = css`
+    padding: 0 24px 16px;
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: ${token.colorBgContainer};
+  `
+
+    const box = css`
+    flex: 1;
+    background: ${token.colorBgContainer};
+  `
+    const form = css`
+        //display: flex;
+        //flex-wrap: wrap;
+        min-width: 300px;
+        max-width: 800px;
+    `
+    const emptyForm = css`
+  `
+
+    return {
+        container: cx(prefix),
+        box,
+        form,
+        emptyForm,
+        tree,
+        treeNode,
+        treeActions
+    }
+})

src/pages/system/menus/components/MenuTree.tsx

@@ -6,7 +6,7 @@ import { useSetAtom } from 'jotai'
 import { batchIdsAtom, menuDataAtom, selectedMenuAtom } from '../store.ts'
 import { FormInstance } from 'antd/lib'
 import { useAtomValue } from 'jotai/index'
-import { TreeNodeRender } from '../components/TreeNodeRender.tsx'
+import { TreeNodeRender } from './TreeNodeRender.tsx'
 import { useRef } from 'react'
 import { flattenTree } from '@/utils'
 import { useDeepCompareEffect } from 'react-use'

src/pages/system/menus/index.tsx

@@ -14,15 +14,13 @@ import { MenuItem } from '@/types'
 import MenuTree from './components/MenuTree.tsx'
 import BatchButton from '@/pages/system/menus/components/BatchButton.tsx'
 import { useEffect, useRef } from 'react'
-import { createLazyFileRoute } from '@tanstack/react-router'
-
 
 const Menus = () => {
 
   const { styles, cx } = useStyle()
   const { t } = useTranslation()
   const [ form ] = Form.useForm()
-  const { mutate, isPending, isSuccess, error, isError } = useAtomValue(saveOrUpdateMenuAtom)
+  const { mutate, isPending, error, isError } = useAtomValue(saveOrUpdateMenuAtom)
   const { data = [] } = useAtomValue(menuDataAtom)
   const [ currentMenu, setMenuData ] = useAtom<MenuItem>(selectedMenuAtom) ?? {}
   const menuInputRef = useRef<InputRef | undefined>(undefined)
@@ -35,7 +33,7 @@ const Menus = () => {
         description: (error as any).message ?? t('message.saveFail', '保存失败'),
       })
     }
-  }, [ isError, isSuccess ])
+  }, [ isError  ])
 
   useEffect(() => {
     if (currentMenu.id === 0 && menuInputRef.current) {
@@ -71,7 +69,7 @@ const Menus = () => {
                     onClick={() => {
                       const menu = {
                         ...defaultMenu,
-                        parent_id: 0,
+                        parent_id: currentMenu.id ?? 0,
                       }
                       setMenuData(menu)
                       form.setFieldsValue(menu)
@@ -97,7 +95,7 @@ const Menus = () => {
                   labelWrap
                   wrapperCol={{ flex: 1 }}
                   colon={false}
-                  className={cx(styles.form, styles.emptyForm, {
+                  className={cx(styles.form, {
                     [styles.emptyForm]: currentMenu.id === undefined
                   })}
             >
@@ -209,9 +207,4 @@ const Menus = () => {
   )
 }
 
-export const Route = createLazyFileRoute('/system/menus')({
-  component: Menus
-})
-
-
 export default Menus

src/pages/system/menus/style.ts

@@ -3,24 +3,6 @@ import { createStyles } from '@/theme'
 export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
   const prefix = `${prefixCls}-${token?.proPrefix}-menu-page`
 
-  const tree = css`
-    .ant-tree {
-      overflow: auto;
-      height: 100%;
-      border-right: 1px solid ${token.colorBorder};
-      background: ${token.colorBgContainer};
-
-    }
-
-    .ant-tree-directory .ant-tree-treenode-selected::before {
-      background: ${token.colorBgTextHover};
-    }
-
-    .ant-tree-treenode:before {
-      border-radius: ${token.borderRadius}px;
-    }
-  `
-
   const box = css`
     flex: 1;
     background: ${token.colorBgContainer};
@@ -44,6 +26,24 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
 
   `
 
+  const tree = css`
+    .ant-tree {
+      overflow: auto;
+      height: 100%;
+      border-right: 1px solid ${token.colorBorder};
+      background: ${token.colorBgContainer};
+
+    }
+
+    .ant-tree-directory .ant-tree-treenode-selected::before {
+      background: ${token.colorBgTextHover};
+    }
+
+    .ant-tree-treenode:before {
+      border-radius: ${token.borderRadius}px;
+    }
+  `
+
   const treeNode = css`
     display: flex;
     justify-content: space-between;

src/pages/system/roles/index.tsx

@@ -7,7 +7,6 @@ import {
   ProTable,
   BetaSchemaForm, ProFormColumnsType,
 } from '@ant-design/pro-components'
-import { createLazyFileRoute } from '@tanstack/react-router'
 import { useStyle } from './style.ts'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useAtom, useAtomValue } from 'jotai'
@@ -241,8 +240,4 @@ const Roles = memo(() => {
   )
 })
 
-export const Route = createLazyFileRoute('/system/roles')({
-  component: Roles
-})
-
 export default Roles

src/pages/system/users/index.tsx

@@ -1,5 +1,4 @@
 import { PageContainer } from '@ant-design/pro-components'
-import {  createLazyFileRoute } from '@tanstack/react-router'
 
 const Users = () => {
     return (
@@ -9,8 +8,5 @@ const Users = () => {
     )
 }
 
-export const Route = createLazyFileRoute("/system/users")({
-    component: Users
-})
 
 export default Users

src/service/system.ts

@@ -5,10 +5,14 @@ import { LoginRequest, LoginResponse } from '@/types/login'
 import { createCURD } from '@/service/base.ts'
 import { IMenu } from '@/types/menus'
 import { IRole } from '@/types/roles'
+import { IDepartment } from '@/types/department'
 
 const systemServ = {
   dept: {
-    ...createCURD('/sys/dept')
+    ...createCURD<any, IDepartment>('/sys/dept'),
+    tree: () => {
+      return request.get<{ tree: IDepartment }>('/sys/dept/tree')
+    }
   },
   menus: {
     ...createCURD<any, IMenu>('/sys/menu')

src/types/department.d.ts

@@ -8,6 +8,8 @@ export interface IDepartment {
     sort: number,
     status: string,
     remark: string
+
+    children?: IDepartment[]
 }
 
 export interface DepartmentRequest extends IDepartment {