update 片区管理 项目管理

web-react/src/pages/system/dict/form.jsx

@@ -1,11 +1,166 @@
 import React, { Component } from 'react'
+import { Form, Input, Radio, InputNumber, TreeSelect, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+import getDictData from 'util/dic'
+import { EMPTY_ID } from 'util/global'
+import { api } from 'common/api'
 
+const initialValues = {
+    type: 1,
+    sort: 100
+}
 export default class form extends Component {
+
+    state = {
+        // 加载状态
+        loading: true,
+        options: {
+            dicTreeData: []
+        }
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+         * mount后回调
+         */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    /**
+         * 填充数据
+         * 可以在设置this.record之后对其作出数据结构调整
+         * [异步,必要]
+         * @param {*} params 
+         */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+        const treeData = await this.loadDicTreeData()
+        this.setState({
+            options: {
+                dicTreeData: treeData
+            }
+        })
+
+        this.record = {
+            pid: params.pid,
+            ...this.record
+        }
+
+        if (this.record.code) {
+            this.record.type = 2;
+            this.setState({
+                type: 2
+            })
+        }
+
+        this.form.current.setFieldsValue(this.record)
+
+        this.setState({
+            loading: false
+        })
+    }
+
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns 
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            if (this.record) {
+                postData.id = this.record.id
+            }
+            //#region 从前段转换后端所需格式
+            //#endregion
+            return postData
+        }
+    }
+    //#region 自定义方法
+    async loadDicTreeData() {
+        const { data } = await api.sysDictTypeTree()
+        return [{
+            id: EMPTY_ID,
+            parentId: undefined,
+            title: '顶级',
+            value: EMPTY_ID,
+            pid: undefined,
+            children: data,
+        }]
+    }
+
+    //#endregion
+
     render() {
         return (
-            <div>
-                123
-            </div>
+            <Form
+                initialValues={initialValues}
+                ref={this.form}
+                className="yo-form"
+                onValuesChange={(changeValues) => {
+                    if (changeValues.hasOwnProperty('type')) {
+                        this.setState({
+                            type: changeValues.type
+                        })
+                    }
+                }}
+            >
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        {/* 表单控件 */}
+                        <Form.Item label="类型名称" name="name" rules={[{ required: true, message: '请输入类型名称' }]}>
+                            <Input autoComplete="off" placeholder="请输入类型名称" />
+                        </Form.Item>
+                        <Form.Item label="类型" name="type" rules={[{ required: true, message: '请选择需要添加的数据类型' }]}>
+                            <Radio.Group>
+                                <Radio.Button value={1}>
+                                    目录
+                                </Radio.Button>
+                                <Radio.Button value={2}>
+                                    字典类型
+                                </Radio.Button>
+                            </Radio.Group>
+                        </Form.Item>
+                        <Form.Item label="父结点" name="pid" rules={[{ required: true, message: '请选择父结点' }]}>
+                            <TreeSelect
+                                treeData={this.state.options.dicTreeData}
+                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                                treeDefaultExpandAll
+                                placeholder="请选择父结点"
+                            />
+                        </Form.Item>
+                        {this.state.type == 2 &&
+                            <>
+                                <Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码' }]}>
+                                    <Input autoComplete="off" placeholder="请输入唯一编码" />
+                                </Form.Item>
+                            </>
+                        }
+                        <Form.Item label="排序" name="sort">
+                            <InputNumber
+                                min={0}
+                                placeholder="请输入排序"
+                                className="w-100-p"
+                            />
+                        </Form.Item>
+                        <Form.Item label="备注" name="remark">
+                            <Input.TextArea placeholder="请输入备注" />
+                        </Form.Item>
+                        {/* ... */}
+                    </div>
+                </Spin>
+            </Form>
         )
     }
 }