角色管理修改

src/pages/demo/crud/index.jsx

@@ -11,9 +11,7 @@ import UpdateForm from './components/UpdateForm'
 
 // 详情数据
 const initDetail = {
-  id: null,
-  field1: '',
-  field2: '',
+  id: null
 }
 
 const CrudList = () => {

src/pages/role/components/CreateForm.jsx

+import React, { useState, useRef, useEffect, useImperativeHandle } from 'react'
+import { Form, Input, InputNumber, Select, AutoComplete } from 'antd'
+import { SageForm } from '@/components/Common'
+
+const CreateForm = (props, ref) => {
+
+  const formRef = useRef()
+
+  const onFinish = (values) => {
+    if (props.onFinish) {
+      props.onFinish(values)
+    }
+  }
+
+  const onFinishFailed = ({ values }) => {
+    console.log(values)
+  }
+
+  // 表单字段设置
+  const formFields = [
+    {
+      name: 'roleName',
+      label: '角色名',
+      type: 'input',
+      rules: [{ required: true }]
+    },
+    {
+      name: 'remarks',
+      label: '备注',
+      type: 'textarea'
+    }
+  ]
+
+  // 暴露外部方法
+  useImperativeHandle(ref, () => ({
+    submit: () => formRef.current.submit(),
+    validateFields: (nameList) => formRef.current.validateFields(nameList),
+    getFieldsValue: (nameList) => formRef.current.getFieldsValue(nameList),
+    setFieldsValue: (values) => formRef.current.setFieldsValue(values),
+    resetFields: (fields) => formRef.current.resetFields(fields)
+  }))
+
+  return (
+    <SageForm
+      ref={formRef}
+      formFields={formFields}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    />
+  )
+}
+
+export default React.forwardRef(CreateForm)

src/pages/role/components/UpdateForm.jsx

+import React, { useState, useRef, useEffect, useImperativeHandle } from 'react'
+import { Form, Input, InputNumber, Select, AutoComplete } from 'antd'
+import { SageForm } from '@/components/Common'
+
+const UpdateForm = (props, ref) => {
+
+  const formRef = useRef()
+
+  const onFinish = (values) => {
+    if (props.onFinish) {
+      props.onFinish(values)
+    }
+  }
+
+  const onFinishFailed = ({ values }) => {
+    console.log(values)
+  }
+
+  // 表单字段设置
+  const formFields = [
+    {
+      name: 'roleName',
+      label: '角色名',
+      type: 'input',
+      rules: [{ required: true }]
+    },
+    {
+      name: 'remarks',
+      label: '备注',
+      type: 'textarea'
+    }
+  ]
+
+  // 暴露外部方法
+  useImperativeHandle(ref, () => ({
+    submit: () => formRef.current.submit(),
+    validateFields: (nameList) => formRef.current.validateFields(nameList),
+    getFieldsValue: (nameList) => formRef.current.getFieldsValue(nameList),
+    setFieldsValue: (values) => formRef.current.setFieldsValue(values),
+    resetFields: (fields) => formRef.current.resetFields(fields)
+  }))
+
+  return (
+    <SageForm
+      ref={formRef}
+      formFields={formFields}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    />
+  )
+}
+
+export default React.forwardRef(UpdateForm)

src/pages/role/index.jsx

@@ -5,6 +5,9 @@ import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, sageMessage,
 import { MenuTree } from '@/components/Business'
 import { PlusOutlined, CheckOutlined } from '@ant-design/icons';
 import { queryRule, updateRule, addRule, removeRule, getRuleDetail } from './service';
+import CreateForm from './components/CreateForm'
+import UpdateForm from './components/UpdateForm'
+
 
 const initDetail = {
   id: null,
@@ -17,12 +20,14 @@ const TableList = () => {
   // 状态
   const [detail, setDetail] = useState(initDetail) // 详情
   const [status, setStatus] = useState('') // 状态 1、add 2、update 3、detail
+  const [modalLoading, setModalLoading] = useState(false) // 窗口loading
   const [role, setRole] = useState({})   // 菜单分配对象
 
   // ref对象
   const tableRef = useRef();
   const modalRef = useRef();
-  const formRef = useRef();
+  const createFormRef = useRef();
+  const updateFormRef = useRef();
   const menutreeRef = useRef();
 
   // 查询条件
@@ -69,7 +74,7 @@ const TableList = () => {
 
     modalRef.current.setTitle('编辑角色')
     modalRef.current.setVisible(true)
-    formRef.current.setFieldsValue({
+    updateFormRef.current.setFieldsValue({
       roleName: roleData.roleName,
       remarks: roleData.remarks
     })
@@ -149,8 +154,8 @@ const TableList = () => {
       setDetail(initDetail)
       modalRef.current.setTitle('新增角色')
       modalRef.current.setVisible(true)
-      if (formRef.current) {
-        formRef.current.setFieldsValue(initDetail)
+      if (createFormRef.current) {
+        createFormRef.current.resetFields()
       }
     }
   }
@@ -169,15 +174,20 @@ const TableList = () => {
 
   // 窗口确认按钮
   const onOk = async () => {
-    if (formRef.current) {
-      formRef.current.submit();
+    if (status === 'add' && createFormRef.current) {
+      createFormRef.current.submit();
+    }
+    if (status === 'update' && updateFormRef.current) {
+      updateFormRef.current.submit();
     }
   }
 
   // 表单提交成功
   const onFinish = async (values) => {
     const formData = Object.assign({}, values)
+
     let res = null
+    setModalLoading(true)
     switch (status) {
       case 'add':
         res = await addRule(formData)
@@ -189,6 +199,7 @@ const TableList = () => {
       default:
         break;
     }
+    setModalLoading(false)
 
     if (res.isSuccess) {
       sageMessage.success('保存成功')
@@ -242,12 +253,23 @@ const TableList = () => {
       <SageModal
         ref={modalRef}
         onOk={onOk}
+        confirmLoading={modalLoading}
       >
-        <SageForm
-          ref={formRef}
-          initialValues={detail}
-          onFinish={onFinish}
-        />
+        {
+          status === 'add' ?
+          <CreateForm
+            ref={createFormRef}
+            onFinish={onFinish}
+          /> : null
+        }
+        {
+          status === 'update' ?
+          <UpdateForm
+            ref={updateFormRef}
+            detail={detail}
+            onFinish={onFinish}
+          /> : null
+        }
       </SageModal>
 
     </PageHeaderWrapper>