update 角色管理

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

@@ -0,0 +1,104 @@
+import React, { Component } from 'react'
+import { Form, Input, InputNumber, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
+
+const initialValues = {
+    sort: 100
+}
+
+export default class form extends Component {
+
+    state = {
+        // 加载状态
+        loading: true,
+    }
+
+    // 表单实例
+    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)
+        //#region 从后端转换成前段所需格式
+        //#endregion
+        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 自定义方法
+    //#endregion
+
+    render() {
+        return (
+            <Form
+                initialValues={initialValues}
+                ref={this.form}
+                className="yo-form"
+            >
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        <Form.Item label="角色名" name="name" rules={[{ required: true, message: '请输入应用名称', trigger: 'blur' }]}>
+                            <Input autoComplete="off" placeholder="请输入角色名" />
+                        </Form.Item>
+                        <Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码', trigger: 'blur' }]}>
+                            <Input autoComplete="off" placeholder="请输入唯一编码" />
+                        </Form.Item>
+                        <Form.Item label="排序" name="sort">
+                            <InputNumber
+                                max={1000}
+                                min={0}
+                                className="w-100-p"
+                                autoComplete="off"
+                                placeholder="请输入排序"
+                            />
+                        </Form.Item>
+                        <Form.Item label="备注" name="remark">
+                            <Input.TextArea rows={4} autoComplete="off" placeholder="请输入备注" />
+                        </Form.Item>
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}