@jiangood/open-admin 2.3.1 → 2.4.0

package/package.json

@@ -36,5 +36,5 @@
     "dev": "umi dev",
     "build": "umi build"
   },
-  "version": "2.3.1"
+  "version": "2.4.0"
 }

package/src/.umi-production/appData.json

@@ -38,7 +38,7 @@
       "dev": "umi dev",
       "build": "umi build"
     },
-    "version": "2.3.1"
+    "version": "2.4.0"
   },
   "pkgPath": "/home/runner/work/open-admin/open-admin/web/package.json",
   "plugins": {
@@ -51,7 +51,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -98,7 +98,7 @@
             0
           ]
         },
-        "register": 2
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -128,7 +128,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -142,7 +142,7 @@
       "time": {
         "hooks": {
           "modifyAppData": [
-            62
+            55
           ]
         },
         "register": 21
@@ -158,7 +158,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -208,7 +208,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "config"
     },
@@ -225,7 +225,7 @@
             0
           ]
         },
-        "register": 5
+        "register": 6
       },
       "enableBy": "register"
     },
@@ -1077,7 +1077,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "config"
     },
@@ -1120,7 +1120,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 97
+        "register": 95
       },
       "enableBy": "register"
     },
@@ -1133,7 +1133,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 28
+        "register": 29
       },
       "enableBy": "config"
     },
@@ -1163,7 +1163,7 @@
             1
           ]
         },
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1176,7 +1176,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1202,7 +1202,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 30
+        "register": 31
       }
     },
     "./node_modules/@umijs/preset-umi/dist/features/mpa/mpa": {
@@ -1227,7 +1227,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       }
     },
     "./node_modules/@umijs/preset-umi/dist/features/overrides/overrides": {
@@ -1281,7 +1281,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1384,7 +1384,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 2
+        "register": 1
       },
       "enableBy": "config"
     },
@@ -1397,7 +1397,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 2
       },
       "enableBy": "register"
     },
@@ -1436,7 +1436,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "config"
     },
@@ -1449,7 +1449,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 3
+        "register": 4
       }
     },
     "./node_modules/@umijs/preset-umi/dist/features/monorepo/redirect": {
@@ -1474,7 +1474,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       }
     },
     "./node_modules/@umijs/preset-umi/dist/features/clickToComponent/clickToComponent": {
@@ -1486,7 +1486,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       }
     },
     "./node_modules/@umijs/preset-umi/dist/features/legacy/legacy": {
@@ -1498,7 +1498,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "config"
     },
@@ -1511,7 +1511,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "config"
     },
@@ -1540,7 +1540,7 @@
             0
           ]
         },
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1602,7 +1602,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 28
+        "register": 27
       }
     },
     "./node_modules/@umijs/preset-umi/dist/features/forget/forget": {
@@ -1640,7 +1640,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 3
+        "register": 4
       },
       "enableBy": "register"
     },
@@ -1653,7 +1653,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 45
+        "register": 42
       },
       "enableBy": "register"
     },
@@ -1666,7 +1666,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 16
+        "register": 17
       }
     },
     "./node_modules/@umijs/preset-umi/dist/commands/help": {
@@ -1678,7 +1678,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1691,7 +1691,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1756,7 +1756,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1769,7 +1769,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1782,7 +1782,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1795,7 +1795,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1808,7 +1808,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1834,7 +1834,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1847,7 +1847,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1860,7 +1860,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 1
+        "register": 0
       },
       "enableBy": "register"
     },
@@ -1873,7 +1873,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -1925,7 +1925,7 @@
       "config": {},
       "time": {
         "hooks": {},
-        "register": 0
+        "register": 1
       },
       "enableBy": "register"
     },
@@ -2085,7 +2085,7 @@
       "parentId": "@@/global-layout",
       "file": "system/dict/index.jsx",
       "absPath": "/system/dict",
-      "__content": "import React from \"react\";\nimport {Button, Form, Input, InputNumber, Modal, Popconfirm, Splitter, Tag, Tree, Typography} from \"antd\";\nimport {PlusOutlined} from \"@ant-design/icons\";\n\nimport {\n    ButtonList,\n    FieldBoolean, FieldDictSelect, FieldRemoteSelect,\n    HttpUtils,\n    Page,\n    ProTable,\n    ViewBooleanEnableDisable, ViewText\n} from \"../../../framework\";\n\nexport default class extends React.Component {\n\n    state = {\n        formValues: {},\n        formOpen: false\n    }\n\n    formRef = React.createRef()\n    tableRef = React.createRef()\n\n\n\n\n    handleAdd = () => {\n        this.setState({formOpen: true, formValues: {}})\n    }\n\n    handleEdit = record => {\n        this.setState({formOpen: true, formValues: record})\n    }\n\n    onFinish = values => {\n        const isNew = !values.id;\n        const url = isNew ? 'admin/dict/create' : 'admin/dict/update';\n        HttpUtils.post(url, values).then(rs => {\n            this.setState({formOpen: false})\n            this.tableRef.current.reload()\n        })\n    }\n\n    handleDelete = row => {\n        HttpUtils.post('admin/dict/delete', row).then(rs => {\n            this.tableRef.current.reload()\n        })\n    }\n\n    columns = [\n        {\n            title: '类型标签',\n            dataIndex: 'typeLabel',\n        },\n        {\n            title: '类型编码',\n            dataIndex: 'typeCode',\n        },\n        {\n            title: '标签',\n            dataIndex: 'label',\n        },\n        {\n            title: '编码',\n            dataIndex: 'code',\n        },\n\n        {\n            title: '启用',\n            dataIndex: 'enabled',\n            render(v) {\n                return <ViewBooleanEnableDisable value={v}/>\n            }\n\n        },\n        {\n            title: '显示颜色',\n            dataIndex: 'color',\n            render(v) {\n                if (v) {\n                    return <Tag color={v.toLowerCase()}>{v}</Tag>\n                }\n\n            }\n        },\n\n        {\n            title: '序号',\n            dataIndex: 'seq',\n        },\n        {\n            title: '操作',\n            dataIndex: 'option',\n            render: (_, record) => {\n                return (\n                    <ButtonList>\n                        <Button size='small' perm='sys-dict:update'\n                                onClick={() => this.handleEdit(record)}> 编辑 </Button>\n                        <Popconfirm perm='sys-dict:delete' title='是否确定删除字典项'\n                                    onConfirm={() => this.handleDelete(record)}>\n                            <Button size='small'>删除</Button>\n                        </Popconfirm>\n                    </ButtonList>\n                );\n            },\n        },\n    ]\n\n    render() {\n        return <Page>\n            <ProTable\n                rowKey='uid'\n                actionRef={this.tableRef}\n                toolBarRender={() => {\n                    return <ButtonList>\n                        <Button perm='sys-dict:create' type='primary' onClick={this.handleAdd} >\n                            <PlusOutlined/> 新增\n                        </Button>\n                    </ButtonList>\n                }}\n                request={(params) => {\n                    params.typeCode = this.state.typeCode\n                    return HttpUtils.get('admin/dict/page', params);\n                }}\n                columns={this.columns}\n                showToolbarSearch={true}\n            />\n            <Modal\n                title='编辑数据字典项'\n                open={this.state.formOpen}\n                onOk={() => this.formRef.current.submit()}\n                onCancel={() => this.setState({formOpen: false})}\n                destroyOnHidden\n            >\n\n                <Form ref={this.formRef} labelCol={{flex: '100px'}}\n                      initialValues={this.state.formValues}\n                      onFinish={this.onFinish}>\n                    <Form.Item name='id' noStyle></Form.Item>\n                    <Form.Item label='类型' name='color' rules={[{required: true}]} >\n                       <ViewText />\n                    </Form.Item>\n                    <Form.Item label='类型' name='typeCode' rules={[{required: true}]} >\n                        <FieldRemoteSelect url='/admin/dict/type-options' />\n                    </Form.Item>\n                    <Form.Item label='编码' name='code' rules={[{required: true}]}>\n                        <Input/>\n                    </Form.Item>\n                    <Form.Item label='标签' name='label' rules={[{required: true}]} help='显示文本'>\n                        <Input/>\n                    </Form.Item>\n                    <Form.Item label='颜色' name='color' rules={[{required: true}]}>\n                        <FieldDictSelect typeCode='statusColor' />\n                    </Form.Item>\n                    <Form.Item label='序号' name='seq' rules={[{required: true}]}>\n                        <InputNumber/>\n                    </Form.Item>\n\n                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>\n                        <FieldBoolean/>\n                    </Form.Item>\n\n                </Form>\n            </Modal>\n        </Page>\n\n\n    }\n\n\n}\n",
+      "__content": "import {DeleteOutlined, EditOutlined, PlusOutlined, SyncOutlined} from '@ant-design/icons';\nimport {Button, Card, Empty, Form, Input, InputNumber, Modal, Popconfirm, Space, Splitter, Tree, Tag, TreeSelect} from 'antd';\nimport React from 'react';\nimport {\n    ButtonList,\n    FieldBoolean,\n    FieldDictSelect,\n    Gap,\n    HttpUtils,\n    Page,\n    ProTable,\n    ViewBooleanEnableDisable,\n} from \"../../../framework\";\n\nexport default class extends React.Component {\n\n    state = {\n        typeTree: [],\n        treeLoading: false,\n        selectedType: null,\n        selectedTypeCode: null,\n\n        formOpen: false,\n        formValues: {},\n        typeFormOpen: false,\n        typeFormValues: {},\n    }\n\n    formRef = React.createRef();\n    typeFormRef = React.createRef();\n    tableRef = React.createRef();\n\n    componentDidMount() {\n        this.loadTree()\n    }\n\n    loadTree = () => {\n        this.setState({treeLoading: true})\n        HttpUtils.get('admin/dict/type-tree').then(rs => {\n            this.setState({typeTree: rs})\n        }).finally(() => {\n            this.setState({treeLoading: false})\n        })\n    }\n\n    handleTypeAdd = () => {\n        this.setState({\n            typeFormOpen: true,\n            typeFormValues: {pid: this.state.selectedType?.id, enabled: true},\n        })\n    }\n\n    handleTypeEdit = () => {\n        const {selectedType} = this.state\n        if (!selectedType) return\n        this.setState({typeFormOpen: true, typeFormValues: {...selectedType}})\n    }\n\n    handleTypeDelete = () => {\n        const {selectedType} = this.state\n        if (!selectedType) return\n        HttpUtils.post('admin/dict/type-delete', {id: selectedType.id}).then(() => {\n            this.setState({selectedType: null, selectedTypeCode: null})\n            this.loadTree()\n        })\n    }\n\n    handleTypeFormFinish = values => {\n        const isNew = !values.id\n        const url = isNew ? 'admin/dict/type-create' : 'admin/dict/type-update'\n        HttpUtils.post(url, values).then(rs => {\n            this.setState({typeFormOpen: false})\n            this.loadTree()\n        })\n    }\n\n    onTreeSelect = (selectedKeys) => {\n        if (selectedKeys.length === 0) {\n            this.setState({selectedType: null, selectedTypeCode: null})\n            return\n        }\n        const findNode = (nodes, key) => {\n            for (const n of nodes) {\n                if (n.id === key) return n\n                if (n.children) {\n                    const found = findNode(n.children, key)\n                    if (found) return found\n                }\n            }\n            return null\n        }\n        const node = findNode(this.state.typeTree, selectedKeys[0])\n        this.setState({\n            selectedType: node,\n            selectedTypeCode: node?.typeCode || null\n        },()=>this.tableRef.current.reload())\n    }\n\n    handleItemAdd = () => {\n        this.setState({formOpen: true, formValues: {typeCode: this.state.selectedTypeCode}})\n    }\n\n    handleItemEdit = record => {\n        this.setState({formOpen: true, formValues: record})\n    }\n\n    handleItemDelete = row => {\n        HttpUtils.post('admin/dict/delete', row).then(rs => {\n            this.tableRef.current.reload()\n        })\n    }\n\n    onItemFormFinish = values => {\n        const isNew = !values.id\n        const url = isNew ? 'admin/dict/create' : 'admin/dict/update'\n        HttpUtils.post(url, values).then(rs => {\n            this.setState({formOpen: false})\n            this.tableRef.current.reload()\n        })\n    }\n\n    columns = [\n        {title: '编码', dataIndex: 'code'},\n        {title: '标签', dataIndex: 'label'},\n        {\n            title: '颜色', dataIndex: 'color',\n            render(v) {\n                if (v) return <Tag color={v.toLowerCase()}>{v}</Tag>\n            }\n        },\n        {\n            title: '启用', dataIndex: 'enabled',\n            render(v) {\n                return <ViewBooleanEnableDisable value={v}/>\n            }\n        },\n        {title: '序号', dataIndex: 'seq'},\n        {\n            title: '操作', dataIndex: 'option',\n            render: (_, record) => {\n                return (\n                    <ButtonList>\n                        <Button size='small' perm='sys-dict:update'\n                                onClick={() => this.handleItemEdit(record)}>编辑</Button>\n                        <Popconfirm perm='sys-dict:delete' title='是否确定删除字典项'\n                                    onConfirm={() => this.handleItemDelete(record)}>\n                            <Button size='small'>删除</Button>\n                        </Popconfirm>\n                    </ButtonList>\n                );\n            },\n        },\n    ]\n\n    render() {\n        const {selectedType, selectedTypeCode} = this.state\n        const hasTypeSelected = selectedType != null && selectedTypeCode != null\n\n        return <Page>\n            <Splitter>\n                <Splitter.Panel defaultSize={300}>\n                    <Card loading={this.state.treeLoading}\n                          title='字典类型'\n                          extra={<Space>\n                              <Button size='small' shape='round' icon={<SyncOutlined/>}\n                                      onClick={this.loadTree}/>\n                          </Space>}\n                    >\n                        <ButtonList>\n                            <Button type='primary' size='small' onClick={this.handleTypeAdd}>\n                                <PlusOutlined/> 新增类型\n                            </Button>\n                            <Button size='small' disabled={!selectedType} onClick={this.handleTypeEdit}>\n                                <EditOutlined/> 编辑\n                            </Button>\n                            <Popconfirm title='是否确定删除此类型及其所有子类型和字典项？'\n                                        disabled={!selectedType}\n                                        onConfirm={this.handleTypeDelete}>\n                                <Button size='small' disabled={!selectedType}>\n                                    <DeleteOutlined/> 删除\n                                </Button>\n                            </Popconfirm>\n                        </ButtonList>\n                        <Gap/>\n                        <Tree\n                            treeData={this.state.typeTree}\n                            onSelect={this.onTreeSelect}\n                            fieldNames={{title: 'typeLabel', key: 'id'}}\n                            showLine\n                            defaultExpandAll\n                            blockNode\n                        />\n                        {this.state.typeTree.length === 0 && <Empty/>}\n\n\n                    </Card>\n                </Splitter.Panel>\n\n                <Splitter.Panel>\n                    <Card title={hasTypeSelected ? `${selectedType.typeLabel} 的字典项` : '字典项'}\n                          extra={\n                              hasTypeSelected\n                                  ? <Button type='primary' onClick={this.handleItemAdd}>\n                                      <PlusOutlined/> 新增\n                                  </Button>\n                                  : null\n                          }\n                    >\n                        {!hasTypeSelected\n                            ? <Empty description='请在左侧选择一个字典类型'/>\n                            : <ProTable\n                                rowKey='uid'\n                                actionRef={this.tableRef}\n                                request={(params) => {\n                                    params.typeCode = selectedTypeCode\n                                    return HttpUtils.get('admin/dict/page', params)\n                                }}\n                                columns={this.columns}\n                                showToolbarSearch\n                            />\n                        }\n                    </Card>\n                </Splitter.Panel>\n            </Splitter>\n\n            <Modal title={this.state.typeFormValues?.id ? '编辑字典类型' : '新增字典类型'}\n                   open={this.state.typeFormOpen}\n                   onOk={() => this.typeFormRef.current.submit()}\n                   onCancel={() => this.setState({typeFormOpen: false})}\n                   destroyOnClose\n            >\n                <Form ref={this.typeFormRef} labelCol={{flex: '100px'}}\n                      initialValues={this.state.typeFormValues}\n                      onFinish={this.handleTypeFormFinish}\n                >\n                    <Form.Item name='id' noStyle/>\n                    <Form.Item label='父类型' name='pid'>\n                        <TreeSelect treeData={this.state.typeTree}\n                                    fieldNames={{label: 'typeLabel', value: 'id'}}\n                                    allowClear\n                        />\n                    </Form.Item>\n                    <Form.Item label='类型编码' name='typeCode' rules={[{required: true}]}>\n                        <Input placeholder='举例: orderStatus'/>\n                    </Form.Item>\n                    <Form.Item label='类型名称' name='typeLabel' rules={[{required: true}]}>\n                        <Input placeholder='举例: 订单状态'/>\n                    </Form.Item>\n                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>\n                        <FieldBoolean/>\n                    </Form.Item>\n                    <Form.Item label='序号' name='seq'>\n                        <InputNumber/>\n                    </Form.Item>\n                </Form>\n            </Modal>\n\n            <Modal title='编辑字典项'\n                   open={this.state.formOpen}\n                   onOk={() => this.formRef.current.submit()}\n                   onCancel={() => this.setState({formOpen: false})}\n                   destroyOnClose\n            >\n                <Form ref={this.formRef} labelCol={{flex: '100px'}}\n                      initialValues={this.state.formValues}\n                      onFinish={this.onItemFormFinish}\n                >\n                    <Form.Item name='id' noStyle/>\n                    <Form.Item label='类型编码' name='typeCode'>\n                        <Input disabled/>\n                    </Form.Item>\n                    <Form.Item label='编码' name='code' rules={[{required: true}]}>\n                        <Input/>\n                    </Form.Item>\n                    <Form.Item label='标签' name='label' rules={[{required: true}]} help='显示文本'>\n                        <Input/>\n                    </Form.Item>\n                    <Form.Item label='颜色' name='color'>\n                        <FieldDictSelect typeCode='statusColor'/>\n                    </Form.Item>\n                    <Form.Item label='序号' name='seq'>\n                        <InputNumber/>\n                    </Form.Item>\n                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>\n                        <FieldBoolean/>\n                    </Form.Item>\n                </Form>\n            </Modal>\n        </Page>\n    }\n}\n",
       "__isJSFile": true,
       "__absFile": "/home/runner/work/open-admin/open-admin/web/src/pages/system/dict/index.jsx"
     },

package/src/pages/system/dict/index.jsx

@@ -1,103 +1,149 @@
-import React from "react";
-import {Button, Form, Input, InputNumber, Modal, Popconfirm, Splitter, Tag, Tree, Typography} from "antd";
-import {PlusOutlined} from "@ant-design/icons";
-
+import {DeleteOutlined, EditOutlined, PlusOutlined, SyncOutlined} from '@ant-design/icons';
+import {Button, Card, Empty, Form, Input, InputNumber, Modal, Popconfirm, Space, Splitter, Tree, Tag, TreeSelect} from 'antd';
+import React from 'react';
 import {
     ButtonList,
-    FieldBoolean, FieldDictSelect, FieldRemoteSelect,
+    FieldBoolean,
+    FieldDictSelect,
+    Gap,
     HttpUtils,
     Page,
     ProTable,
-    ViewBooleanEnableDisable, ViewText
+    ViewBooleanEnableDisable,
 } from "../../../framework";
 
 export default class extends React.Component {
 
     state = {
+        typeTree: [],
+        treeLoading: false,
+        selectedType: null,
+        selectedTypeCode: null,
+
+        formOpen: false,
         formValues: {},
-        formOpen: false
+        typeFormOpen: false,
+        typeFormValues: {},
     }
 
-    formRef = React.createRef()
-    tableRef = React.createRef()
+    formRef = React.createRef();
+    typeFormRef = React.createRef();
+    tableRef = React.createRef();
 
+    componentDidMount() {
+        this.loadTree()
+    }
 
+    loadTree = () => {
+        this.setState({treeLoading: true})
+        HttpUtils.get('admin/dict/type-tree').then(rs => {
+            this.setState({typeTree: rs})
+        }).finally(() => {
+            this.setState({treeLoading: false})
+        })
+    }
 
+    handleTypeAdd = () => {
+        this.setState({
+            typeFormOpen: true,
+            typeFormValues: {pid: this.state.selectedType?.id, enabled: true},
+        })
+    }
 
-    handleAdd = () => {
-        this.setState({formOpen: true, formValues: {}})
+    handleTypeEdit = () => {
+        const {selectedType} = this.state
+        if (!selectedType) return
+        this.setState({typeFormOpen: true, typeFormValues: {...selectedType}})
     }
 
-    handleEdit = record => {
-        this.setState({formOpen: true, formValues: record})
+    handleTypeDelete = () => {
+        const {selectedType} = this.state
+        if (!selectedType) return
+        HttpUtils.post('admin/dict/type-delete', {id: selectedType.id}).then(() => {
+            this.setState({selectedType: null, selectedTypeCode: null})
+            this.loadTree()
+        })
     }
 
-    onFinish = values => {
-        const isNew = !values.id;
-        const url = isNew ? 'admin/dict/create' : 'admin/dict/update';
+    handleTypeFormFinish = values => {
+        const isNew = !values.id
+        const url = isNew ? 'admin/dict/type-create' : 'admin/dict/type-update'
         HttpUtils.post(url, values).then(rs => {
-            this.setState({formOpen: false})
-            this.tableRef.current.reload()
+            this.setState({typeFormOpen: false})
+            this.loadTree()
         })
     }
 
-    handleDelete = row => {
+    onTreeSelect = (selectedKeys) => {
+        if (selectedKeys.length === 0) {
+            this.setState({selectedType: null, selectedTypeCode: null})
+            return
+        }
+        const findNode = (nodes, key) => {
+            for (const n of nodes) {
+                if (n.id === key) return n
+                if (n.children) {
+                    const found = findNode(n.children, key)
+                    if (found) return found
+                }
+            }
+            return null
+        }
+        const node = findNode(this.state.typeTree, selectedKeys[0])
+        this.setState({
+            selectedType: node,
+            selectedTypeCode: node?.typeCode || null
+        },()=>this.tableRef.current.reload())
+    }
+
+    handleItemAdd = () => {
+        this.setState({formOpen: true, formValues: {typeCode: this.state.selectedTypeCode}})
+    }
+
+    handleItemEdit = record => {
+        this.setState({formOpen: true, formValues: record})
+    }
+
+    handleItemDelete = row => {
         HttpUtils.post('admin/dict/delete', row).then(rs => {
             this.tableRef.current.reload()
         })
     }
 
-    columns = [
-        {
-            title: '类型标签',
-            dataIndex: 'typeLabel',
-        },
-        {
-            title: '类型编码',
-            dataIndex: 'typeCode',
-        },
-        {
-            title: '标签',
-            dataIndex: 'label',
-        },
-        {
-            title: '编码',
-            dataIndex: 'code',
-        },
+    onItemFormFinish = values => {
+        const isNew = !values.id
+        const url = isNew ? 'admin/dict/create' : 'admin/dict/update'
+        HttpUtils.post(url, values).then(rs => {
+            this.setState({formOpen: false})
+            this.tableRef.current.reload()
+        })
+    }
 
+    columns = [
+        {title: '编码', dataIndex: 'code'},
+        {title: '标签', dataIndex: 'label'},
         {
-            title: '启用',
-            dataIndex: 'enabled',
+            title: '颜色', dataIndex: 'color',
             render(v) {
-                return <ViewBooleanEnableDisable value={v}/>
+                if (v) return <Tag color={v.toLowerCase()}>{v}</Tag>
             }
-
         },
         {
-            title: '显示颜色',
-            dataIndex: 'color',
+            title: '启用', dataIndex: 'enabled',
             render(v) {
-                if (v) {
-                    return <Tag color={v.toLowerCase()}>{v}</Tag>
-                }
-
+                return <ViewBooleanEnableDisable value={v}/>
             }
         },
-
-        {
-            title: '序号',
-            dataIndex: 'seq',
-        },
+        {title: '序号', dataIndex: 'seq'},
         {
-            title: '操作',
-            dataIndex: 'option',
+            title: '操作', dataIndex: 'option',
             render: (_, record) => {
                 return (
                     <ButtonList>
                         <Button size='small' perm='sys-dict:update'
-                                onClick={() => this.handleEdit(record)}> 编辑 </Button>
+                                onClick={() => this.handleItemEdit(record)}>编辑</Button>
                         <Popconfirm perm='sys-dict:delete' title='是否确定删除字典项'
-                                    onConfirm={() => this.handleDelete(record)}>
+                                    onConfirm={() => this.handleItemDelete(record)}>
                             <Button size='small'>删除</Button>
                         </Popconfirm>
                     </ButtonList>
@@ -107,41 +153,121 @@ export default class extends React.Component {
     ]
 
     render() {
+        const {selectedType, selectedTypeCode} = this.state
+        const hasTypeSelected = selectedType != null && selectedTypeCode != null
+
         return <Page>
-            <ProTable
-                rowKey='uid'
-                actionRef={this.tableRef}
-                toolBarRender={() => {
-                    return <ButtonList>
-                        <Button perm='sys-dict:create' type='primary' onClick={this.handleAdd} >
-                            <PlusOutlined/> 新增
-                        </Button>
-                    </ButtonList>
-                }}
-                request={(params) => {
-                    params.typeCode = this.state.typeCode
-                    return HttpUtils.get('admin/dict/page', params);
-                }}
-                columns={this.columns}
-                showToolbarSearch={true}
-            />
-            <Modal
-                title='编辑数据字典项'
-                open={this.state.formOpen}
-                onOk={() => this.formRef.current.submit()}
-                onCancel={() => this.setState({formOpen: false})}
-                destroyOnHidden
+            <Splitter>
+                <Splitter.Panel defaultSize={300}>
+                    <Card loading={this.state.treeLoading}
+                          title='字典类型'
+                          extra={<Space>
+                              <Button size='small' shape='round' icon={<SyncOutlined/>}
+                                      onClick={this.loadTree}/>
+                          </Space>}
+                    >
+                        <ButtonList>
+                            <Button type='primary' size='small' onClick={this.handleTypeAdd}>
+                                <PlusOutlined/> 新增类型
+                            </Button>
+                            <Button size='small' disabled={!selectedType} onClick={this.handleTypeEdit}>
+                                <EditOutlined/> 编辑
+                            </Button>
+                            <Popconfirm title='是否确定删除此类型及其所有子类型和字典项？'
+                                        disabled={!selectedType}
+                                        onConfirm={this.handleTypeDelete}>
+                                <Button size='small' disabled={!selectedType}>
+                                    <DeleteOutlined/> 删除
+                                </Button>
+                            </Popconfirm>
+                        </ButtonList>
+                        <Gap/>
+                        <Tree
+                            treeData={this.state.typeTree}
+                            onSelect={this.onTreeSelect}
+                            fieldNames={{title: 'typeLabel', key: 'id'}}
+                            showLine
+                            defaultExpandAll
+                            blockNode
+                        />
+                        {this.state.typeTree.length === 0 && <Empty/>}
+
+
+                    </Card>
+                </Splitter.Panel>
+
+                <Splitter.Panel>
+                    <Card title={hasTypeSelected ? `${selectedType.typeLabel} 的字典项` : '字典项'}
+                          extra={
+                              hasTypeSelected
+                                  ? <Button type='primary' onClick={this.handleItemAdd}>
+                                      <PlusOutlined/> 新增
+                                  </Button>
+                                  : null
+                          }
+                    >
+                        {!hasTypeSelected
+                            ? <Empty description='请在左侧选择一个字典类型'/>
+                            : <ProTable
+                                rowKey='uid'
+                                actionRef={this.tableRef}
+                                request={(params) => {
+                                    params.typeCode = selectedTypeCode
+                                    return HttpUtils.get('admin/dict/page', params)
+                                }}
+                                columns={this.columns}
+                                showToolbarSearch
+                            />
+                        }
+                    </Card>
+                </Splitter.Panel>
+            </Splitter>
+
+            <Modal title={this.state.typeFormValues?.id ? '编辑字典类型' : '新增字典类型'}
+                   open={this.state.typeFormOpen}
+                   onOk={() => this.typeFormRef.current.submit()}
+                   onCancel={() => this.setState({typeFormOpen: false})}
+                   destroyOnClose
             >
+                <Form ref={this.typeFormRef} labelCol={{flex: '100px'}}
+                      initialValues={this.state.typeFormValues}
+                      onFinish={this.handleTypeFormFinish}
+                >
+                    <Form.Item name='id' noStyle/>
+                    <Form.Item label='父类型' name='pid'>
+                        <TreeSelect treeData={this.state.typeTree}
+                                    fieldNames={{label: 'typeLabel', value: 'id'}}
+                                    allowClear
+                        />
+                    </Form.Item>
+                    <Form.Item label='类型编码' name='typeCode' rules={[{required: true}]}>
+                        <Input placeholder='举例: orderStatus'/>
+                    </Form.Item>
+                    <Form.Item label='类型名称' name='typeLabel' rules={[{required: true}]}>
+                        <Input placeholder='举例: 订单状态'/>
+                    </Form.Item>
+                    <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
+                        <FieldBoolean/>
+                    </Form.Item>
+                    <Form.Item label='序号' name='seq'>
+                        <InputNumber/>
+                    </Form.Item>
+                </Form>
+            </Modal>
 
+            <Modal title='编辑字典项'
+                   open={this.state.formOpen}
+                   onOk={() => this.formRef.current.submit()}
+                   onCancel={() => this.setState({formOpen: false})}
+                   destroyOnClose
+            >
                 <Form ref={this.formRef} labelCol={{flex: '100px'}}
                       initialValues={this.state.formValues}
-                      onFinish={this.onFinish}>
-                    <Form.Item name='id' noStyle></Form.Item>
-                    <Form.Item label='类型' name='color' rules={[{required: true}]} >
-                       <ViewText />
-                    </Form.Item>
-                    <Form.Item label='类型' name='typeCode' rules={[{required: true}]} >
-                        <FieldRemoteSelect url='/admin/dict/type-options' />
+                      onFinish={this.onItemFormFinish}
+                >
+                    <Form.Item name='id' noStyle/>
+                    <Form.Item label='类型编码' name='typeCode'>
+                        <Input disabled/>
                     </Form.Item>
                     <Form.Item label='编码' name='code' rules={[{required: true}]}>
                         <Input/>
@@ -149,23 +275,17 @@ export default class extends React.Component {
                     <Form.Item label='标签' name='label' rules={[{required: true}]} help='显示文本'>
                         <Input/>
                     </Form.Item>
-                    <Form.Item label='颜色' name='color' rules={[{required: true}]}>
-                        <FieldDictSelect typeCode='statusColor' />
+                    <Form.Item label='颜色' name='color'>
+                        <FieldDictSelect typeCode='statusColor'/>
                     </Form.Item>
-                    <Form.Item label='序号' name='seq' rules={[{required: true}]}>
+                    <Form.Item label='序号' name='seq'>
                         <InputNumber/>
                     </Form.Item>
-
                     <Form.Item label='启用' name='enabled' rules={[{required: true}]}>
                         <FieldBoolean/>
                     </Form.Item>
-
                 </Form>
             </Modal>
         </Page>
-
-
     }
-
-
 }