feat: 添加 终止弹窗

src/pages/afterService/components/StopModal/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-26 10:12:48
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-26 10:39:03
+ * @Description: 中止弹窗
+ */
+import React from 'react';
+import { Modal } from 'antd';
+import { createFormActions } from '@formily/antd';
+import { DatePicker } from '@formily/antd-components';
+import moment from 'moment';
+import NiceForm from '@/components/NiceForm';
+import schema from './schema';
+
+const formActions = createFormActions();
+
+export type ValuesType = {
+  /**
+   * 中止原因
+   */
+  remark: string,
+}
+
+interface StopModalProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * Form 确认事件
+   */
+  onSubmit: (values: ValuesType) => void,
+  /**
+   * 抽屉关闭事件
+   */
+  onClose: () => void,
+  /**
+   * 确认按钮 loading
+   */
+  submitLoading: boolean,
+}
+
+const StopModal: React.FC<StopModalProps> = (props) => {
+  const {
+    visible,
+    onSubmit,
+    onClose,
+    submitLoading,
+  } = props;
+
+  const handleSubmit = (values: ValuesType) => {
+    if (onSubmit) {
+      onSubmit(values);
+    }
+  };
+
+  return (
+    <Modal
+      title="中止原因"
+      visible={visible}
+      confirmLoading={submitLoading}
+      onOk={() => formActions.submit()}
+      onCancel={() => onClose?.()}
+      destroyOnClose
+    >
+      <NiceForm
+        initialValues={{
+          date: moment().format('YYYY-MM-DD HH:mm:ss'),
+        }}
+        previewPlaceholder="' '"
+        components={{
+          DatePicker,
+        }}
+        effects={() => {
+
+        }}
+        actions={formActions}
+        schema={schema}
+        onSubmit={handleSubmit}
+      />
+    </Modal>
+  );
+};
+
+export default StopModal;

src/pages/afterService/components/StopModal/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-26 10:21:44
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-26 11:05:12
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      'x-component-props': {
+        labelAlign: 'left',
+        labelCol: 4,
+        wrapperCol: 20,
+      },
+      properties: {
+        date: {
+          type: 'string',
+          title: '中止时间',
+          'x-component': 'DatePicker',
+          editable: false,
+        },
+        remark: {
+          type: 'string',
+          title: '中止原因',
+          'x-component': 'Textarea',
+          'x-component-props': {
+            placeholder: '在此输入你的内容，最长100个字符，50个汉字',
+            maxLength: 60, 
+            rows: 5, 
+          },
+          'x-rules': [
+            { 
+              required: true, 
+              message: '请填写原因',  
+            }, 
+            {
+              limitByte: true,  // 自定义校验规则
+              maxByte: 100, 
+            }
+          ],
+        },
+      },
+    },
+  },
+};
+
+export default schema;