feat: 添加 会员规则配置 相关UI

src/pages/member/memberFlowRule/addFlowRule.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:26:41
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 16:26:41
+ * @Description: 新建会员管理流程规则
+ */
+import React from 'react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import FlowRuleForm from './components/FlowRuleForm';
+
+const MemberFlowRuleAdd: React.FC = () => {
+  const { id, validateId } = usePageStatus();
+  return (
+    <FlowRuleForm id={id} validateId={validateId} isEdit />
+  );
+};
+
+export default MemberFlowRuleAdd;

src/pages/member/memberFlowRule/components/FlowRuleForm/components/MemberRoleFormItem/index.less

+@import '~antd/es/style/themes/default.less';
+
+.memberRole {
+  &-action {
+    margin-bottom: @margin-sm;
+  }
+
+  &-stamp {
+    padding: @padding-md @padding-md 0;
+    background-color: #FFFFFF;
+    border: 1px solid #EBECF0;
+    border-left-color: @primary-color;
+  }
+}
\ No newline at end of file

src/pages/member/memberFlowRule/components/FlowRuleForm/components/MemberRoleFormItem/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 17:12:55
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 18:12:16
+ * @Description: 适用会员角色 Form Item
+ */
+import React, { useState, useRef } from 'react';
+import { Button, Descriptions, Drawer } from 'antd';
+import {
+  PlusOutlined,
+} from '@ant-design/icons';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import { createFormActions, useSchemaProps } from '@formily/antd';
+import { PublicApi } from '@/services/api';
+import NiceForm from '@/components/NiceForm';
+import querySchema from './schema';
+import styles from './index.less';
+
+const formActions = createFormActions();
+
+const fetchListData = async (params: any) => {
+  const payload = { ...params };
+  const res = await PublicApi.getMemberAbilitySubPage(payload);
+  if (res.code === 1000) {
+    return res.data;
+  }
+  return [];
+};
+
+const MemberRoleFormItem = (props) => {
+  const [visibleDrawer, setVisibleDrawer] = useState(false);
+
+  const ref = useRef<any>({});
+
+  const schemaProps = useSchemaProps();
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+    },
+    {
+      title: '会员角色',
+      dataIndex: 'roleName',
+    },
+    {
+      title: '角色类型',
+      dataIndex: 'roleName',
+    },
+    {
+      title: '会员类型',
+      dataIndex: 'memberTypeName',
+    },
+    {
+      title: '业务类型',
+      dataIndex: 'memberTypeName',
+    },
+  ];
+
+  const handleVisibleDrawer = (flag: boolean) => {
+    setVisibleDrawer(!!flag);
+  };
+
+  const handleConfirm = () => {
+
+  };
+
+  return (
+    <div className={styles.memberRole}>
+      <Button
+        type="dashed"
+        icon={<PlusOutlined />}
+        className={styles['memberRole-action']}
+        onClick={() => handleVisibleDrawer(true)}
+        block
+      >
+        选择
+      </Button>
+      <div className={styles['memberRole-stamp']}>
+        <Descriptions column={1}>
+          <Descriptions.Item label="会员角色" labelStyle={{ width: 104 }}>供应商</Descriptions.Item>
+          <Descriptions.Item label="角色类型" labelStyle={{ width: 104 }}>服务消费者</Descriptions.Item>
+          <Descriptions.Item label="企业类型" labelStyle={{ width: 104 }}>企业会员</Descriptions.Item>
+          <Descriptions.Item label="业务类型" labelStyle={{ width: 104 }}>商品销售</Descriptions.Item>
+        </Descriptions>
+      </div>
+
+      <Drawer
+        title="选择会员角色"
+        width={1000}
+        onClose={() => handleVisibleDrawer(false)}
+        visible={visibleDrawer}
+        footer={
+          <div
+            style={{
+              textAlign: 'right',
+            }}
+          >
+            <Button onClick={() => handleVisibleDrawer(false)} style={{ marginRight: 16 }}>
+              取 消
+            </Button>
+            <Button onClick={handleConfirm} type="primary">
+              确 定
+            </Button>
+          </div>
+        }
+      >
+        <StandardTable
+          tableProps={{
+            rowKey: 'validateId',
+          }}
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchListData(params)}
+          controlRender={
+            <NiceForm
+              actions={formActions}
+              onSubmit={values => ref.current.reload(values)}
+              effects={($, actions) => {
+
+              }}
+              schema={querySchema}
+            />
+          }
+        />
+      </Drawer>
+    </div>
+  );
+};
+
+MemberRoleFormItem.isFieldComponent = true;
+
+export default MemberRoleFormItem;

src/pages/member/memberFlowRule/components/FlowRuleForm/components/MemberRoleFormItem/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 18:01:56
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 19:37:45
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+const querySchema: ISchema = {
+  type: 'object',
+  properties: {
+    mageLayout: {
+      type: 'object',
+      'x-component': 'Mega-Layout',
+      properties: {
+        name: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-component-props': {
+            placeholder: '搜索',
+            tip: '输入 会员角色名称 进行搜索',
+            advanced: false,
+          },
+        },
+      },
+    },
+  },
+};
+
+export default querySchema;

src/pages/member/memberFlowRule/components/FlowRuleForm/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:13:05
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 16:13:06
+ * @Description: 
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { history, Prompt } from 'umi';
+import { Badge, Button, Card, Spin, message } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { SaveOutlined } from '@ant-design/icons';
+import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
+import { Select, Input } from '@formily/antd-components'
+import { merge } from 'rxjs';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import ReutrnEle from '@/components/ReturnEle';
+import NiceForm from '@/components/NiceForm';
+import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
+import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilitySubGetResponse } from '@/services/MemberApi';
+import formSchema from './schema';
+import MemberRoleFormItem from './components/MemberRoleFormItem';
+
+const formActions = createFormActions();
+const {
+  onFieldValueChange$,
+  onFieldInputChange$,
+  onFormInputChange$,
+} = FormEffectHooks;
+
+interface MemberFormProps {
+  /**
+   * 数据id
+   */
+  id?: number;
+  /**
+   * 数据 审核id
+   */
+  validateId?: number;
+  /**
+   * 是否可编辑的
+   */
+  isEdit?: boolean,
+};
+
+const FlowRuleForm: React.FC<MemberFormProps> = ({
+  id,
+  validateId,
+  isEdit = false,
+}) => {
+  const areaRef = useRef<any[]>([])
+  const [memberItems, setMemberItems] = useState<any>({});
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [infoLoading, setInfoLoading] = useState(false);
+  const [unsaved, setUnsaved] = useState(false);
+
+  const getDetailedInfo = async () => {
+    
+  };
+
+  useEffect(() => {
+    getDetailedInfo();
+  }, []);
+
+  const handleSubmit = (values: any) => {
+    const {
+      memberTypeId,
+      roleId,
+      level,
+      countryCodeId,
+      phone,
+      email,
+      channelLevel,
+      channelTypeId,
+      areas = [],
+      remark,
+
+      outerStatus,
+      status,
+      statusName,
+      ...rest
+    } = values;
+
+    const filtered = areas.filter(item => item.pcode || item.ccode);
+
+    if (!id && !isEdit) {
+      setSubmitLoading(true);
+      const msg = message.loading({
+        content: '正在添加，请稍候...',
+        duration: 0,
+      });
+      PublicApi.postMemberAbilitySubAdd({
+        memberTypeId,
+        roleId,
+        level,
+        countryCodeId,
+        phone,
+        email,
+        channelTypeId,
+        areas: filtered,
+        remark,
+        detail: rest,
+      }, {
+        timeout: 0,
+      }).then(res => {
+        if (res.code !== 1000) {
+          return;
+        }
+        setUnsaved(false);
+        setTimeout(() => {
+          history.goBack();
+        }, 800);
+      }).finally(() => {
+        msg();
+        setSubmitLoading(false);
+      });
+
+      return;
+    }
+    if (id && validateId && isEdit) {
+      setSubmitLoading(true);
+      const msg = message.loading({
+        content: '正在保存，请稍候...',
+        duration: 0,
+      });
+      PublicApi.postMemberAbilitySubUpdate({
+        memberId: id,
+        validateId,
+        memberTypeId,
+        roleId,
+        level,
+        countryCodeId,
+        phone,
+        email,
+        channelTypeId,
+        areas: filtered,
+        remark,
+        detail: rest,
+      }, {
+        timeout: 0,
+      }).then(res => {
+        if (res.code !== 1000) {
+          return;
+        }
+        setUnsaved(false);
+        setTimeout(() => {
+          history.goBack();
+        }, 800);
+      }).finally(() => {
+        msg();
+        setSubmitLoading(false);
+      });
+    }
+  };
+
+  return (
+    <Spin spinning={infoLoading}>
+      <PageHeaderWrapper
+        style={{
+          padding: 24,
+        }}
+        onBack={() => history.goBack()}
+        backIcon={<ReutrnEle description="返回" />}
+        title={!id ? '新增会员管理流程规则' : '编辑会员管理流程规则会员'}
+        extra={[
+          <Button
+            key="1"
+            type="primary"
+            icon={<SaveOutlined />}
+            loading={submitLoading}
+            // onClick={() => formActions.submit()}
+          >
+            保存
+          </Button>,
+        ]}
+      >
+        <Card>
+          <NiceForm
+            onSubmit={handleSubmit}
+            actions={formActions}
+            initialValues={{}}
+            components={{
+              MemberRoleFormItem,
+            }}
+            effects={($, actions) => {
+              onFormInputChange$().subscribe(() => {
+                if (!unsaved) {
+                  setUnsaved(true);
+                }
+              });
+            }}
+            schema={formSchema}
+            editable={isEdit}
+          />
+        </Card>
+      </PageHeaderWrapper>
+
+      <Prompt when={unsaved} message="您还有未保存的内容，是否确定要离开？" />
+    </Spin>
+  );
+};
+
+FlowRuleForm.defaultProps = {
+  id: 0,
+  validateId: 0,
+  isEdit: false,
+};
+
+export default FlowRuleForm;

src/pages/member/memberFlowRule/components/FlowRuleForm/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:13:26
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 17:24:01
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+import { PATTERN_MAPS } from '@/constants/regExp';
+
+const formSchema: ISchema = {
+  type: 'object',
+  properties: {
+    tabs: {
+      type: 'object',
+      'x-component': 'Tab',
+      'x-component-props': {
+        type: 'card', 
+      },
+      properties: {
+        'tab-1': {
+          type: 'object',
+          'x-component': 'TabPane',
+          'x-component-props': {
+            tab: '基本信息',
+          },
+          properties: {
+            MEGA_LAYOUT1: {
+              type: 'object',
+              'x-component': 'Mega-Layout',
+              'x-component-props': {
+                labelCol: 4,
+                wrapperCol: 8,
+                labelAlign: 'left',
+              },
+              properties: {
+                ruleName: {
+                  type: 'string',
+                  required: true,
+                  title: '流程规则名称',
+                  'x-component-props': {
+                    placeholder: '请输入',
+                  },
+                },
+                roleId: {
+                  type: 'string',
+                  required: true,
+                  title: '适用会员角色',
+                  'x-component': 'MemberRoleFormItem',
+                  'x-component-props': {
+
+                  },  
+                },
+              },
+            },
+          },
+        }, 
+        'tab-2': {
+          type: 'object',
+          'x-component': 'TabPane',
+          'x-component-props': {
+            tab: '渠道信息',
+          },
+          properties: {
+            MEGA_LAYOUT1: {
+              type: 'object',
+              'x-component': 'Mega-Layout',
+              'x-component-props': {
+                labelCol: 4,
+                wrapperCol: 12, 
+                labelAlign: 'left', 
+                full: true, 
+              },
+              properties: {
+                channelLevel: {
+                  type: 'text', 
+                  title: '渠道级别', 
+                },
+                channelTypeId: {
+                  type: 'string', 
+                  enum: [],
+                  title: '渠道类型', 
+                  required: true, 
+                  'x-component-props': {
+                    
+                  },
+                }, 
+                areas: {
+                  type: 'array',
+                  title: '代理城市',
+                  'x-component': 'CustomAddArray',
+                  default: [],
+                  items: {
+                    type: 'object',
+                    properties: {
+                      pcode: {
+                        type: 'string', 
+                        enum: [],
+                        'x-component-props': {
+                          allowClear: true, 
+                        },
+                      },
+                      ccode: {
+                        type: 'string', 
+                        enum: [],
+                        'x-component-props': {
+                          allowClear: true, 
+                        },
+                      }
+                    }
+                  }
+                },
+                remark: {
+                  type: 'string',
+                  title: '渠道描述',
+                  required: true, 
+                  'x-component': 'TextArea',
+                  'x-component-props': {
+                    rows: 4, 
+                    placeholder: '最大200个字符，100个汉字', 
+                  },
+                  'x-rules': [
+                    {
+                      limitByte: true,  // 自定义校验规则
+                      maxByte: 200, 
+                    }
+                  ],
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default formSchema;

src/pages/member/memberFlowRule/detail.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:25:57
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 16:31:10
+ * @Description: 会员管理流程规则详情
+ */
+import React from 'react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import FlowRuleForm from './components/FlowRuleForm';
+
+const MemberFlowRuleDetail: React.FC = () => {
+  const { id, validateId } = usePageStatus();
+  return (
+    <FlowRuleForm id={id} validateId={validateId} />
+  );
+};
+
+export default MemberFlowRuleDetail;

src/pages/member/memberFlowRule/editFlowRule.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:26:16
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 16:26:17
+ * @Description: 编辑会员管理流程规则
+ */
+import React from 'react';
+import FlowRuleForm from './components/FlowRuleForm';
+
+const MemberFlowRuleEdit: React.FC = () => {
+  return (
+    <FlowRuleForm isEdit />
+  );
+};
+
+export default MemberFlowRuleEdit;

src/pages/member/memberFlowRule/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:01:23
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 16:46:02
+ * @Description: 会员管理流程规则配置
+ */
+import React, { useState, useRef } from 'react';
+import { history } from 'umi';
+import {
+  Card,
+  Space,
+  Button,
+  Popconfirm,
+  message, 
+} from 'antd';
+import {
+  PlusOutlined,
+} from '@ant-design/icons';
+import { StandardTable } from 'god';
+import moment from 'moment';
+import { ColumnType } from 'antd/lib/table/interface';
+import { createFormActions } from '@formily/antd';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
+import { PublicApi } from '@/services/api';
+import { 
+  MEMBER_OUTER_STATUS_UNCOMMITTED, 
+  MEMBER_OUTER_STATUS_FAILED, 
+} from '@/constants/member';
+import EyePreview from '@/components/EyePreview';
+import NiceForm from '@/components/NiceForm';
+import StatusSwitch from '@/components/StatusSwitch';
+import StatusTag from '../components/StatusTag';
+import { querySchema } from './schema';
+import { coverColFiltersItem } from '../utils';
+import { MEMBER_OUTER_STATUS_TYPE } from '../constant';
+import styles from './index.less';
+
+const formActions = createFormActions();
+
+const fetchListData = async (params: any) => {
+  const { startDate = null, endDate = null } = params;
+  const payload = { ...params };
+
+  if (startDate) {
+    payload.startDate = moment(+startDate).format('YYYY-MM-DD');
+  }
+  if (endDate) {
+    payload.endDate = moment(+endDate).format('YYYY-MM-DD');
+  }
+  const res = await PublicApi.getMemberAbilitySubPage(payload);
+  
+  if (res.code === 1000) {
+    return res.data;
+  }
+  return [];
+};
+
+const MemberFlowRule: React.FC<[]> = () => {
+  const ref = useRef<any>({});
+
+  const handleDelete = (memberId: number, validateId: number) => {
+    const mesInstance = message.loading({
+      content: '正在删除',
+      duration: 0, 
+    });
+    PublicApi.postMemberAbilitySubDelete({
+      memberId, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      ref.current.reload();
+    }).finally(() => {
+      mesInstance();
+    });
+  };
+  
+  const handleCommit = (memberId: number, validateId: number) => {
+    PublicApi.postMemberAbilitySubCommit({
+      memberId, 
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      ref.current.reload();
+    });
+  };
+
+  const handleModify = record => {
+    
+  };
+
+  const defaultColumns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+    },
+    {
+      title: '流程规则名称',
+      dataIndex: 'name  ',
+      render: (text, record) => (
+        <>
+          <EyePreview
+            url={`/memberCenter/memberAbility/ruleConfiguration/memberFlowRule/detail?id=${record.memberId}&validateId=${record.validateId}`}
+          >
+            {text}
+          </EyePreview>
+        </>
+      ),
+    },
+    {
+      title: '会员角色',
+      dataIndex: 'roleName',
+    },
+    {
+      title: '角色类型',
+      dataIndex: 'roleName',
+    },
+    {
+      title: '会员类型',
+      dataIndex: 'memberTypeName',
+    },
+    {
+      title: '业务类型',
+      dataIndex: 'memberTypeName',
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'registerTime',
+    },
+    {
+      title: '状态',
+      dataIndex: 'outerStatusName',
+      filters: [],
+      render: (text, record) => (
+        <StatusSwitch
+          fieldNames="state"
+          handleConfirm={() => handleModify(record)}
+          record={record}
+        />
+      ),
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      width: '20%',
+      align: 'center',
+      render: (_, record: any) => (
+        <>
+          <Button
+            type="link"
+            onClick={() =>
+              history.push(`/memberCenter/memberAbility/ruleConfiguration/memberFlowRule/edit?id=${record.memberId}&validateId=${record.validateId}`)
+            }
+          >
+            编辑
+          </Button>
+          <Popconfirm 
+            title="确定要删除吗？" 
+            okText="是" 
+            cancelText="否"
+            onConfirm={() => handleDelete(record.memberId, record.validateId)}
+          >
+            <Button 
+              type="link"
+              danger
+            >
+              删除
+            </Button>
+          </Popconfirm>
+        </>
+      ),
+    },
+  ];
+
+  const [columns, setColumns] = useState<any[]>(defaultColumns);
+
+  const controllerBtns = (
+    <>
+      <Space>
+        <Button
+          type="primary"
+          onClick={() =>
+            history.push(`/memberCenter/memberAbility/ruleConfiguration/memberFlowRule/add`)
+          }
+        >
+          <PlusOutlined />
+          新建
+        </Button>
+      </Space>
+    </>
+  );
+
+  return (
+    <Card>
+      <StandardTable
+        tableProps={{
+          rowKey: 'validateId',
+        }}
+        columns={columns}
+        currentRef={ref}
+        fetchTableData={(params: any) => fetchListData(params)}
+        controlRender={
+          <NiceForm
+            actions={formActions}
+            onSubmit={values => ref.current.reload(values)}
+            expressionScope={{
+              controllerBtns,
+            }}
+            effects={($, actions) => {
+
+            }}
+            schema={querySchema}
+          />
+        }
+      />
+    </Card>
+  );
+};
+
+export default MemberFlowRule;

src/pages/member/memberFlowRule/schema/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-27 16:04:23
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-27 16:04:24
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+export const querySchema: ISchema = {
+  type: 'object',
+  properties: {
+    mageLayout: {
+      type: 'object',
+      'x-component': 'Mega-Layout',
+      properties: {
+        topLayout: {
+          type: 'object',
+          'x-component': 'Mega-Layout',
+          'x-component-props': {
+            grid: true,
+          },
+          properties: {
+            ctl: {
+              type: 'object',
+              'x-component': 'Children',
+              'x-component-props': {
+                children: '{{controllerBtns}}',
+              },
+            },
+            name: {
+              type: 'string',
+              'x-component': 'Search',
+              'x-component-props': {
+                placeholder: '搜索',
+                tip: '输入 流程规则名称 进行搜索',
+                advanced: false,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
\ No newline at end of file