feat: 添加 审核Modal 组件

src/pages/transaction/marketingAbility/merchantCoupon/components/VerifyModal/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-28 16:36:53
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-28 16:36:54
+ * @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;
+
+export type ValueType = {
+  /**
+   * 是否同意
+   */
+  agree: number,
+  /**
+   * 理由
+   */
+  reason: string,
+}
+
+interface IProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * Modal 关闭事件
+   */
+  onClose: () => void,
+  /**
+   * Form 提交事件
+   */
+  onSubmit: (value: any) => void,
+  /**
+   * 提交loading
+   */
+  submitLoading: boolean,
+}
+
+const VerifyModal: React.FC<IProps> = (props: IProps) => {
+  const {
+    visible,
+    onClose,
+    onSubmit,
+    submitLoading,
+  } = props;
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleSubmit = (values: ValueType) => {
+    if (onSubmit) {
+      onSubmit(values);
+    }
+  };
+
+  return (
+    <Modal
+      title="单据审核"
+      visible={visible}
+      confirmLoading={submitLoading}
+      onOk={() => formActions.submit()}
+      onCancel={handleClose}
+      destroyOnClose
+    >
+      <NiceForm
+        effects={($, { setFieldState }) => {
+          onFieldValueChange$('agree').subscribe(fieldState => {
+            setFieldState('reason', state => {
+              state.title = fieldState.value === 0 ? '不通过原因' : '通过原因';
+              state.rules = fieldState.value === 0 ? [...state.rules, { required: true }] : [];
+              state.required = fieldState.value === 0;
+              setTimeout(() => {
+                formActions.validate('reason');
+              }, 0);
+            });
+          });
+        }}
+        actions={formActions}
+        schema={schema}
+        onSubmit={handleSubmit}
+      />
+    </Modal>
+  );
+};
+
+export default VerifyModal;

src/pages/transaction/marketingAbility/merchantCoupon/components/VerifyModal/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-28 16:37:02
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-28 16:37:02
+ * @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;