feat: 添加审核Modal

src/pages/member/components/VerifyModal/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-25 11:46:35
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 11:46:36
+ * @Description: 审核 Modal
+ */
+import React from 'react';
+import { Modal } from 'antd';
+import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
+import NiceForm from '@/components/NiceForm';
+import schema from './schema';
+
+const formActions = createFormActions();
+const { 
+  onFieldValueChange$, 
+} = FormEffectHooks;
+
+interface IProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * Modal 关闭事件
+   */
+  onClose: () => void,
+  /**
+   * Form 提交事件
+   */
+  onSubmit: (value: any) => void,
+}
+
+const VerifyModal: React.FC<IProps> = (props: IProps) => {
+  const {
+    visible,
+    onClose,
+    onSubmit,
+  } = props;
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleSubmit = (values: any) => {
+    if (onSubmit) {
+      onSubmit(values);
+    }
+  };
+
+  return (
+    <Modal
+      title="单据审核"
+      visible={visible}
+      confirmLoading={false}
+      onOk={() => formActions.submit()}
+      onCancel={handleClose}
+      destroyOnClose
+    >
+      <NiceForm
+        effects={($, { setFieldState }) => {
+          onFieldValueChange$('agree').subscribe(fieldState => {
+            setFieldState('reason', state => {
+              state.visible = !fieldState.value;
+            });
+          });
+        }}
+        actions={formActions}
+        schema={schema}
+        onSubmit={handleSubmit}
+      />
+    </Modal>
+  );
+};
+
+export default VerifyModal;

src/pages/member/components/VerifyModal/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-25 11:50:00
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 11:50:00
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      'x-component-props': {
+        labelAlign: 'top',
+      },
+      properties: {
+        agree: {
+          type: 'string',
+          default: 1,
+          enum: [
+            { label: '审核通过', value: 1 },
+            { label: '审核不通过', value: 0 },
+          ],
+          'x-component': 'radio',
+          'x-component-props': {},
+        },
+        reason: {
+          type: 'string',
+          title: '审核不通过原因',
+          'x-component': 'textarea', 
+          required: true, 
+          'x-component-props': {
+            placeholder: '在此输入你的内容，最长120个字符，60个汉字',
+            rows: 5, 
+          },
+          'x-rules': [
+            {
+              limitByte: true,  // 自定义校验规则
+              maxByte: 120, 
+            }
+          ],
+        },
+      },
+    },
+  },
+};
+
+export default schema;