对接完已有接口

package.json

@@ -37,7 +37,7 @@
     "@umijs/test": "^3.2.0",
     "bizcharts": "^4.0.14",
     "copy-to-clipboard": "^3.3.1",
-    "god": "^0.1.25",
+    "god": "^0.1.26",
     "lingxi-design": "^1.0.7",
     "lingxi-design-ui": "^1.0.8",
     "lingxi-editor-core": "^1.0.6",

src/constants/index.ts

@@ -118,3 +118,7 @@ export const UPLOAD_TYPE = isDev ? 2 : 1
 export const VIP_RULE_TRANSACTION = 1;         // 交易
 export const VIP_RULE_LOGIN = 2;               // 登录
 export const VIP_RULE_COMMENT = 3;             // 评论
+
+// 会员状态
+export const MEMBER_STATUS_NORMAL = 1;                 // 正常的
+export const MEMBER_STATUS_FROZEN = 2;                 // 冻结的

src/pages/member/components/StatusTag/index.less

+.tag {
+  line-height: 22px;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #00B37A;
+  background: #EBF7F2;
+  border-radius: 4px;
+
+  &__success {
+    color: #00B37A;
+    background: #EBF7F2;
+  }
+  
+  &__warnning {
+    color: #FF991F;
+    background: #FFFAE6;
+  }
+  
+  &__default {
+    color: #42526E;
+    background: #F4F5F7;
+  }
+
+  &__danger {
+    color: #E63F3B;
+    background: #FFEBE6;
+  }
+}
\ No newline at end of file

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2020-08-31 17:52:14
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-08-31 18:59:18
+ * @Description: 状态 tag
+ */
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+interface StatusTagProps {
+  type: 'success' | 'warnning' | 'default' | 'danger';
+  title: string;
+};
+
+const StatusTag: React.FC<StatusTagProps> = ({ type, title }) => {
+  const cls = classNames(styles.tag, styles[`tag__${type}`]);
+  return (
+    <span className={cls}>{title}</span>
+  );
+};
+
+export default StatusTag;
\ No newline at end of file

src/pages/member/memberImport/index.tsx

@@ -28,11 +28,13 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
 import { importSchema, auditModalSchema } from './schema';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { PublicApi } from '@/services/api';
+import { GetMemberAbilitySubPageitemsResponse } from '@/services/MemberApi';
+import { coverColFiltersItem } from '../utils';
 
 const formActions = createFormActions();
 
-const fetchData = async (params: any) => {
-  let res = await PublicApi.getMemberMaintenancePage(params);
+const fetchListData = async (params: any) => {
+  let res = await PublicApi.getMemberAbilitySubPage(params);
   return res.data;
 };
 
@@ -48,13 +50,11 @@ const memberMaintain: React.FC<[]> = () => {
       title: 'ID',
       dataIndex: 'memberId',
       align: 'center',
-      key: 'memberId',
     },
     {
       title: '会员名称',
       dataIndex: 'name',
       align: 'center',
-      key: 'name',
       render: (text: any, record: any) => (
         <EyePreview
           url={`/memberCenter/memberAbility/manage/importDetail?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
@@ -67,21 +67,18 @@ const memberMaintain: React.FC<[]> = () => {
       title: '会员类型',
       dataIndex: 'memberTypeName',
       align: 'center',
-      key: 'memberTypeName',
       render: (text: any, record: any) => <>{text}</>,
     },
     {
       title: '会员角色',
       dataIndex: 'roleName',
       align: 'center',
-      key: 'roleName',
       render: (text: any, record: any) => <>{text}</>,
     },
     {
       title: '申请来源/时间',
       dataIndex: 'sourceName',
       align: 'center',
-      key: 'sourceName',
       render: (text: any, record: any) => {
         let component: ReactNode = null;
         component = (
@@ -99,7 +96,6 @@ const memberMaintain: React.FC<[]> = () => {
       title: '会员状态',
       dataIndex: 'statusName',
       align: 'center',
-      key: 'statusName',
       filters: [],
       // filteredValue: searchForm.memberStatus || ['0'],
       filterMultiple: false,
@@ -115,66 +111,47 @@ const memberMaintain: React.FC<[]> = () => {
       title: '外部状态',
       dataIndex: 'outerStatusName',
       align: 'center',
-      key: 'outerStatus',
       filters: [],
       // filteredValue: searchForm.outerStatus || ['0'],
       filterMultiple: false,
       render: (text: any, record: any) => <span>{text}</span>,
     },
     {
-      title: '内部状态',
-      dataIndex: 'innerStatusName',
-      align: 'center',
-      key: 'innerStatus',
-      filters: [],
-      // filteredValue: searchForm.innerStatus || ['0'],
-      filterMultiple: false,
-      render: (text: any, record: any) => <Badge color="#FFC400" text={text} />,
-    },
-    {
       title: '操作',
       dataIndex: 'option',
       align: 'center',
-      render: (text: any, record: any) => {
-        let component: ReactNode = null;
-        component = (
-          <>
-            {/* {record.innerStatusName === '审核通过' ? (
+      render: (text: any, record: any) => (
+        <>
+          {/* {record.innerStatusName === '审核通过' ? (
+            <Button
+              type="link"
+              onClick={() => {
+                setCurrentItem(record), setModalVisible(true);
+              }}
+              style={{ color: '#00B37A' }}
+            >
+              {record.status === 1 ? '解冻' : '冻结'}
+            </Button>
+          ) : (
+            ''
+          )} */}
+          {record.outerStatusName === '待审核' ? (
+            <>
               <Button
                 type="link"
-                onClick={() => {
-                  setCurrentItem(record), setModalVisible(true);
-                }}
-                style={{ color: '#00B37A' }}
+                onClick={() =>
+                  history.push(`/memberCenter/memberAbility/manage/addMember?id=${record.memberId}&validateId=${record.validateId}`)
+                }
               >
-                {record.status === 1 ? '解冻' : '冻结'}
+                编辑
               </Button>
-            ) : (
-              ''
-            )} */}
-            {record.outerStatusName === '待审核' ? (
-              <>
-                <Button
-                  type="link"
-                  onClick={() =>
-                    history.push(
-                      '/memberCenter/memberAbility/manage/addMember?type=change',
-                    )
-                  }
-                >
-                  编辑
-                </Button>
-                <Popconfirm title="确定要删除吗？" okText="是" cancelText="否">
-                  <Button type="link">删除</Button>
-                </Popconfirm>
-              </>
-            ) : (
-              ''
-            )}
-          </>
-        );
-        return component;
-      },
+              <Popconfirm title="确定要删除吗？" okText="是" cancelText="否">
+                <Button type="link">删除</Button>
+              </Popconfirm>
+            </>
+          ) : null}
+        </>
+      ),
     },
   ];
 
@@ -231,24 +208,44 @@ const memberMaintain: React.FC<[]> = () => {
 
   // 初始化高级筛选选项
   const fetchSelectOptions = async () => {
-    const res = await PublicApi.getMemberValidateCommitPageitems();
+    const res = await PublicApi.getMemberAbilitySubPageitems();
     
     if (res.code === 1000) {
-      const { data } = res;
+      const { data = {} }: any = res;
+      const { 
+        outerStatus = [], 
+        memberTypes = [], 
+        memberRoles = [], 
+        memberLevels = [], 
+      } = data;
+
+      const newColumns = columns.slice();
+
+      // filter 0 过滤掉全部选项
+      // 这里接口缺少会员状态哦
+      coverColFiltersItem(
+        newColumns, 
+        'statusName', 
+        [].map(item => ({ text: item.text, value: item.id })).filter(item => item.value !== 0),
+      );
+      coverColFiltersItem(
+        newColumns, 
+        'outerStatusName', 
+        outerStatus.map(item => ({ text: item.text, value: item.id })).filter(item => item.value !== 0),
+      );
+
+      setColumns(newColumns);
+
       return {
-        memberType: fetchFilterOptions(data.memberTypes),
-        roleId: fetchFilterOptions(data.memberRoles),
-        level: fetchFilterOptions(data.memberLevels),
-        source: fetchFilterOptions(data.memberSource),
+        outerStatus: outerStatus.map(item => ({ label: item.text, value: item.id })),
+        memberType: memberTypes.map(item => ({ label: item.memberTypeName, value: item.memberTypeId })),
+        roleId: memberRoles.map(item => ({ label: item.roleName, value: item.roleId })), 
+        level: memberLevels.map(item => ({ label: item.levelTag, value: item.level })), 
       };
     }
     return {};
   };
 
-  const fetchFilterOptions = data => {
-    return data.map(v => ({ label: v.text, value: v.id }));
-  };
-
   const controllerBtns = (
     <Space>
       <Button
@@ -280,7 +277,7 @@ const memberMaintain: React.FC<[]> = () => {
         }}
         columns={columns}
         currentRef={ref}
-        fetchTableData={(params: any) => fetchData(params)}
+        fetchTableData={(params: any) => fetchListData(params)}
         rowSelection={rowSelection}
         controlRender={
           <NiceForm
@@ -297,7 +294,7 @@ const memberMaintain: React.FC<[]> = () => {
                 FORM_FILTER_PATH,
               );
               useAsyncInitSelect(
-                ['memberType', 'roleId', 'level', 'source'],
+                ['memberType', 'roleId', 'level', 'source', 'innerStatus', 'outerStatus'],
                 fetchSelectOptions,
               );
             }}

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

 import { ISchema } from '@formily/antd';
 import { FORM_FILTER_PATH } from '@/formSchema/const';
-import { UPLOAD_TYPE } from '@/constants'
+import { UPLOAD_TYPE } from '@/constants';
+import { PATTERN_MAPS } from '@/constants/regExp';
 
 export const importSchema: ISchema = {
   type: 'object',
@@ -48,25 +49,49 @@ export const importSchema: ISchema = {
               type: 'string',
               default: undefined,
               enum: [],
-              'x-component-props': {},
+              'x-component-props': {
+                placeholder: '会员类型(全部)',
+              },
             },
             roleId: {
               type: 'string',
               default: undefined,
               enum: [],
-              'x-component-props': {},
+              'x-component-props': {
+                placeholder: '会员角色(全部)',
+              },
             },
             level: {
               type: 'string',
               default: undefined,
               enum: [],
-              'x-component-props': {},
+              'x-component-props': {
+                placeholder: '会员等级(全部)',
+              },
             },
             source: {
               type: 'string',
-              default: undefined,
+              'x-component-props': {
+                placeholder: '申请来源(全部)',
+                defaultValue: undefined,
+              },
+              enum: [],
+            },
+            outerStatus: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '外部状态(全部)',
+                defaultValue: undefined,
+              },
+              enum: [],
+            },
+            innerStatus: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '内部状态(全部)',
+                defaultValue: undefined,
+              },
               enum: [],
-              'x-component-props': {},
             },
             timeRange: {
               type: 'string',
@@ -81,7 +106,9 @@ export const importSchema: ISchema = {
                 { label: '一年内', value: 6 },
                 { label: '一年前', value: 7 },
               ],
-              'x-component-props': {},
+              'x-component-props': {
+                placeholder: '请选择',
+              },
             },
             submit: {
               'x-component': 'Submit',
@@ -130,7 +157,7 @@ export const auditModalSchema = props => {
 const FIELD_TYPE_MAP = {
   'string': 'string', 
   'long': 'string', 
-  'upload': 'upload', 
+  'upload': 'customUpload', 
 };
 
 const getXComponentProps = (type, item) => {
@@ -204,7 +231,7 @@ export const initDetailSchema = (props: any) => {
                   placeholder: '请选择',
                 },
               },
-              level: {
+              levelId: {
                 type: 'string',
                 required: true,
                 title: '会员等级',
@@ -222,7 +249,7 @@ export const initDetailSchema = (props: any) => {
                   inline: true, 
                 }, 
                 properties: {
-                  telCode: {
+                  countryCodeId: {
                     type: 'string', 
                     enum: [],
                     'x-component-props': {
@@ -230,7 +257,7 @@ export const initDetailSchema = (props: any) => {
                     }, 
                     required: true,
                   },
-                  tel: {
+                  phone: {
                     type: 'string', 
                     'x-component-props': {
                       placeholder: '请输入你的手机号码',
@@ -240,10 +267,16 @@ export const initDetailSchema = (props: any) => {
                   },
                 },
               },
-              memberEmail: {
+              email: {
                 type: 'string',
                 title: '邮箱',
                 'x-component-props': {},
+                'x-rules': [
+                  {
+                    pattern: PATTERN_MAPS.email, 
+                    message: '请输入正确格式的邮箱', 
+                  },
+                ],
               },
             },
           },
@@ -270,48 +303,44 @@ export const initDetailSchema = (props: any) => {
                 type: 'text', 
                 title: '渠道级别', 
               },
-              channelType: {
+              channelTypeId: {
                 type: 'string', 
-                enum: [
-                  { label: '电商渠道', value: '1' }, 
-                  { label: '线下渠道', value: '2' }, 
-                ],
+                enum: [],
                 title: '渠道类型', 
                 required: true, 
                 'x-component-props': {
-                  defaultValue: '1', 
+                  
                 },
               }, 
-              cities: {
+              areas: {
                 type: 'array',
                 title: '代理城市',
                 required: true, 
                 'x-component': 'CustomAddArray',
                 default: [
-                  { province: '1', city: '2' }, 
-                  { province: '2', city: '1' }, 
+                  { pcode: undefined, ccode: undefined }, 
                 ],
                 items: {
                   type: 'object',
                   properties: {
-                    province: {
+                    pcode: {
                       type: 'string', 
-                      enum: [
-                        { label: '广东省', value: '1' }, 
-                        { label: '湖南省', value: '2' }, 
-                      ],
+                      enum: [],
+                      'x-component-props': {
+                        allowClear: true, 
+                      },
                     },
-                    city: {
+                    ccode: {
                       type: 'string', 
-                      enum: [
-                        { label: '广州', value: '1' }, 
-                        { label: '深圳', value: '2' }, 
-                      ],
+                      enum: [],
+                      'x-component-props': {
+                        allowClear: true, 
+                      },
                     }
                   }
                 }
               },
-              desc: {
+              remark: {
                 type: 'string',
                 title: '渠道描述',
                 required: true, 
@@ -329,7 +358,7 @@ export const initDetailSchema = (props: any) => {
   };
 
   if (Object.keys(props).length > 0) {
-    for (let [index, item] of props.groups.entries()) {
+    for (let [index, item] of props.entries()) {
       tabSchema.properties[`tab-${index + 3}`] = {
         type: 'object',
         'x-component': 'TabPane',
@@ -352,14 +381,15 @@ export const initDetailSchema = (props: any) => {
     }
   }
 
-  let detailSchema = {
+  let detailSchema: ISchema = {
     type: 'object',
     properties: {
-      REPOSIT_TABS: {
+      tabs: {
         type: 'object',
         'x-component': 'Tab',
         'x-component-props': {
           type: 'card', 
+          hiddenKeys: ['tab-2'],
         },
         ...tabSchema,
       },

src/pages/member/memberMaintain/index.tsx

@@ -28,6 +28,8 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
 import { maintianSchema, auditModalSchema } from './schema';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { PublicApi } from '@/services/api';
+import StatusTag from '../components/StatusTag';
+import { coverColFiltersItem } from '../utils';
 
 const mock = [
   {
@@ -58,8 +60,8 @@ const mock = [
 
 const formActions = createFormActions();
 
-const fetchData = async (params: any) => {
-  let res = await PublicApi.getMemberMaintenancePage(params);
+const fetchListData = async (params: any) => {
+  let res = await PublicApi.getMemberAbilityMaintenancePage(params);
   return res.data;
 };
 
@@ -75,16 +77,14 @@ const memberMaintain: React.FC<[]> = () => {
       title: 'ID',
       dataIndex: 'memberId',
       align: 'center',
-      key: 'memberId',
     },
     {
       title: '会员名称',
       dataIndex: 'name',
       align: 'center',
-      key: 'name',
       render: (text: any, record: any) => (
         <EyePreview
-        url={`/memberCenter/memberAbility/manage/maintainDetail?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
+          url={`/memberCenter/memberAbility/manage/maintainDetail?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
         >
           {text}
         </EyePreview>
@@ -94,21 +94,18 @@ const memberMaintain: React.FC<[]> = () => {
       title: '会员类型',
       dataIndex: 'memberTypeName',
       align: 'center',
-      key: 'memberTypeName',
       render: (text: any, record: any) => <>{text}</>,
     },
     {
       title: '会员角色',
       dataIndex: 'roleName',
       align: 'center',
-      key: 'roleName',
       render: (text: any, record: any) => <>{text}</>,
     },
     {
       title: '申请来源/时间',
       dataIndex: 'sourceName',
       align: 'center',
-      key: 'sourceName',
       render: (text: any, record: any) => {
         let component: ReactNode = null;
         component = (
@@ -126,35 +123,33 @@ const memberMaintain: React.FC<[]> = () => {
       title: '会员状态',
       dataIndex: 'statusName',
       align: 'center',
-      key: 'statusName',
       filters: [],
-      // filteredValue: searchForm.memberStatus || ['0'],
+      onFilter: (value, record) => record.status === value,
       filterMultiple: false,
       render: (text: any, record: any) => (
-        <StatusSwitch
-          handleConfirm={() => handleModify(record)}
-          record={record}
-          fieldNames="status"
-        />
+        <StatusTag type="success" title="正常" />
+        // <StatusSwitch
+        //   handleConfirm={() => handleModify(record)}
+        //   record={record}
+        //   fieldNames="status"
+        // />
       ),
     },
     {
       title: '外部状态',
       dataIndex: 'outerStatusName',
       align: 'center',
-      key: 'outerStatus',
       filters: [],
-      // filteredValue: searchForm.outerStatus || ['0'],
+      onFilter: (value, record) => record.outerStatusName === value,
       filterMultiple: false,
-      render: (text: any, record: any) => <span>{text}</span>,
+      render: (text: any, record: any) => <StatusTag type="warnning" title="待审核" />,
     },
     {
       title: '内部状态',
       dataIndex: 'innerStatusName',
       align: 'center',
-      key: 'innerStatus',
       filters: [],
-      // filteredValue: searchForm.innerStatus || ['0'],
+      onFilter: (value, record) => record.innerStatusName === value,
       filterMultiple: false,
       render: (text: any, record: any) => <Badge color="#FFC400" text={text} />,
     },
@@ -214,49 +209,60 @@ const memberMaintain: React.FC<[]> = () => {
     });
   };
 
-  // 冻结与解冻
-  const handleSubmit = (values: any, type?: string) => {
-    if (!type) {
-      PublicApi.postMemberMaintenanceStatus({
-        memberId: currentItem.memberId,
-        validateId: currentItem.validateId,
-        status: currentItem.status,
-        remark: values.remark,
-      }).then(res => {
-        if (res.code === 1000) {
-          ref.current.reload();
-          setModalVisible(false);
-        }
-      });
-    } else {
-      setModalVisible(false);
-    }
-  };
-
   const handleMenuClick = (e: any) => {
     console.log('menu', e);
   };
 
   // 初始化高级筛选选项
   const fetchSelectOptions = async () => {
-    const res = await PublicApi.getMemberValidateCommitPageitems();
+    const res = await PublicApi.getMemberAbilityMaintenancePageitems();
 
     if (res.code === 1000) {
-      const { data } = res;
+      const { data = {} }: any = res;
+      const {
+        innerStatus = [], 
+        outerStatus = [], 
+        status = [], 
+        memberTypes = [], 
+        memberRoles = [], 
+        memberLevels = [], 
+        sources = [], 
+      } = data;
+
+      const newColumns = columns.slice();
+      
+      // filter 0 过滤掉全部选项
+      coverColFiltersItem(
+        newColumns, 
+        'statusName', 
+        status.map(item => ({ text: item.text, value: item.id })).filter(item => item.value !== 0),
+      );
+      coverColFiltersItem(
+        newColumns, 
+        'outerStatusName', 
+        outerStatus.map(item => ({ text: item.text, value: item.id })).filter(item => item.value !== 0),
+      );
+      coverColFiltersItem(
+        newColumns, 
+        'innerStatusName', 
+        innerStatus.map(item => ({ text: item.text, value: item.id })).filter(item => item.value !== 0),
+      );
+      
+      setColumns(newColumns);
+
       return {
-        memberType: fetchFilterOptions(data.memberTypes),
-        roleId: fetchFilterOptions(data.memberRoles),
-        level: fetchFilterOptions(data.memberLevels),
-        source: fetchFilterOptions(data.memberSource),
+        innerStatus: innerStatus.map(item => ({ label: item.text, value: item.id })),
+        outerStatus: outerStatus.map(item => ({ label: item.text, value: item.id })),
+        status: status.map(item => ({ label: item.text, value: item.id })),
+        memberType: memberTypes.map(item => ({ label: item.memberTypeName, value: item.memberTypeId })),
+        roleId: memberRoles.map(item => ({ label: item.roleName, value: item.roleId })),
+        level: memberLevels.map(item => ({ label: item.levelTag, value: item.level })),
+        source: sources.map(item => ({ label: item.text, value: item.id })),
       };
     }
     return {};
   };
 
-  const fetchFilterOptions = data => {
-    return data.map(v => ({ label: v.text, value: v.id }));
-  };
-
   const controllerBtns = (
     <Space>
       <Button
@@ -289,7 +295,7 @@ const memberMaintain: React.FC<[]> = () => {
         }}
         columns={columns}
         currentRef={ref}
-        fetchTableData={(params: any) => fetchData(params)}
+        fetchTableData={(params: any) => fetchListData(params)}
         rowSelection={rowSelection}
         controlRender={
           <NiceForm
@@ -306,7 +312,7 @@ const memberMaintain: React.FC<[]> = () => {
                 FORM_FILTER_PATH,
               );
               useAsyncInitSelect(
-                ['memberType', 'roleId', 'level', 'source'],
+                ['innerStatus', 'outerStatus', 'status', 'memberType', 'roleId', 'level', 'source'],
                 fetchSelectOptions,
               );
             }}
@@ -314,27 +320,7 @@ const memberMaintain: React.FC<[]> = () => {
           />
         }
       />
-      <Modal
-        title={currentItem.status === 1 ? '会员解冻' : '会员冻结'}
-        visible={modalVisible}
-        onOk={() => formActions.submit()}
-        onCancel={() => handleSubmit(false, 'cancel')}
-        destroyOnClose
-      >
-        <NiceForm
-          previewPlaceholder="' '"
-          effects={($, { setFieldState }) => {
-            FormEffectHooks.onFieldValueChange$('agree').subscribe(state => {
-              setFieldState('reason', targetState => {
-                targetState.visible = state.value != 1;
-              });
-            });
-          }}
-          onSubmit={handleSubmit}
-          actions={formActions}
-          schema={auditModalSchema(currentItem)}
-        />
-      </Modal>
+
       <UploadModal
         visibleModal={visibleModal}
         fileText="会员资料"

src/pages/member/memberMaintain/maintainDetail.tsx

 import React, { useState, useEffect } from 'react';
 import { history } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { PageHeader, Tag, Descriptions, Button } from 'antd';
+import { PageHeader, Tag, Descriptions, Button, Modal, Spin } from 'antd';
 import { SettingOutlined, StopOutlined } from '@ant-design/icons';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
 import { STATUS_COLOR_MAP, STATUS_COLOR_TXT } from '../constant';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import { PublicApi } from '@/services/api';
-import MellowCard from '@/components/MellowCard';
+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberApi';
+import { MEMBER_STATUS_NORMAL, MEMBER_STATUS_FROZEN } from '@/constants';
+import NiceForm from '@/components/NiceForm';
+import { auditModalSchema } from './schema';
 import HeadInfo from '../components/HeadInfo';
 import AuditProcess from '../components/AuditProcess';
 import BasicInfo from '../components/BasicInfo';
+import StatusTag from '../components/StatusTag';
 import styles from './index.less';
 
+const formActions = createFormActions();
+
 const maintainDetail: React.FC<{}> = () => {
   const { pageStatus, id, validateId } = usePageStatus();
-  const [detailed, setDetailed] = useState<any>({});
+  const [detailed, setDetailed] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [infoLoading, setInfoLoaading] = useState(false);
 
-  useEffect(() => {
+  const getDetailed = () => {
+    if (!id || !validateId) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code === 100) {
+        setDetailed(res.data);
+      }
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
 
+  useEffect(() => {
+    getDetailed();
   }, []);
 
+  // 冻结与解冻
+  const handleSubmit = (values: { remark: string }) => {
+    return PublicApi.postMemberMaintenanceStatus({
+      memberId: id,
+      validateId: validateId,
+      status: detailed.status === MEMBER_STATUS_NORMAL ? MEMBER_STATUS_FROZEN : MEMBER_STATUS_NORMAL,
+      remark: values.remark || '',
+    }).then(res => {
+      if (res.code === 1000) {
+        this.getDetailed();
+      }
+    });
+  };
+
   return (
-    <PageHeaderWrapper
-      title={
-        <>
-          <PageHeader
-            style={{ padding: '0' }}
-            onBack={() => history.goBack()}
-            title={
-              <HeadInfo 
-                info={{
-                  name: '广州市极致皮具有限公司', 
-                  level: 1,
-                }} 
-              />
-            }
-            extra={(
-              <>
-                <Button
-                  icon={<StopOutlined />}
-                  onClick={() => {}}
-                >
-                  冻结
-                </Button>
-                <Button
-                  type="primary"
-                  icon={<SettingOutlined />}
-                  onClick={() => {}}
-                >
-                  解冻
-                </Button>
-              </>
-            )}
-          >
-            <Descriptions 
-              size="small" 
-              column={3} 
-              style={{ 
-                padding: '0 32px', 
-              }}
+    <Spin spinning={infoLoading}>
+      <PageHeaderWrapper
+        title={
+          <>
+            <PageHeader
+              style={{ padding: '0' }}
+              onBack={() => history.goBack()}
+              title={
+                <HeadInfo 
+                  info={{
+                    name: '广州市极致皮具有限公司', 
+                    level: 1,
+                  }} 
+                />
+              }
+              extra={(
+                <>
+                  {detailed.status === MEMBER_STATUS_NORMAL ? (
+                    <Button
+                      icon={<StopOutlined />}
+                      onClick={() => {}}
+                    >
+                      冻结
+                    </Button>
+                  ) : (
+                    <Button
+                      type="primary"
+                      icon={<SettingOutlined />}
+                      onClick={() => {}}
+                    >
+                      解冻
+                    </Button>
+                  )}
+                </>
+              )}
             >
-              <Descriptions.Item label="会员类型">{123}</Descriptions.Item>
-              <Descriptions.Item label="会员角色" span={2}>{123}</Descriptions.Item>
-              <Descriptions.Item label="会员状态">
-                <Tag color={STATUS_COLOR_MAP[1]}>{STATUS_COLOR_TXT[1]}</Tag>
-              </Descriptions.Item>
-              <Descriptions.Item label="外部状态">
-                <Tag color={STATUS_COLOR_MAP[2]}>{STATUS_COLOR_TXT[2]}</Tag>
-              </Descriptions.Item>
-            </Descriptions>
-          </PageHeader>
-        </>
-      }
-    >
-      <div
-        style={{
-          marginBottom: 24, 
-        }}
+              <Descriptions 
+                size="small" 
+                column={3} 
+                style={{ 
+                  padding: '0 32px', 
+                }}
+              >
+                <Descriptions.Item label="会员类型">{123}</Descriptions.Item>
+                <Descriptions.Item label="会员角色" span={2}>{123}</Descriptions.Item>
+                <Descriptions.Item label="会员状态">
+                  {/* <Tag color={STATUS_COLOR_MAP[1]}>{STATUS_COLOR_TXT[1]}</Tag> */}
+                  <StatusTag type="success" title="正常" />
+                </Descriptions.Item>
+                <Descriptions.Item label="外部状态">
+                  <Tag color={STATUS_COLOR_MAP[2]}>{STATUS_COLOR_TXT[2]}</Tag>
+                </Descriptions.Item>
+              </Descriptions>
+            </PageHeader>
+          </>
+        }
       >
-        <AuditProcess />
-      </div>
+        <div
+          style={{
+            marginBottom: 24, 
+          }}
+        >
+          <AuditProcess />
+        </div>
+
+        <BasicInfo />
 
-      <BasicInfo />
-    </PageHeaderWrapper>
+        <Modal
+          title={detailed.status === 1 ? '会员解冻' : '会员冻结'}
+          visible={modalVisible}
+          onOk={() => formActions.submit()}
+          onCancel={() => setModalVisible(false)}
+          destroyOnClose
+        >
+          <NiceForm
+            previewPlaceholder="' '"
+            effects={($, { setFieldState }) => {
+              FormEffectHooks.onFieldInit$('remark').subscribe(state => {
+                setFieldState('remark', targetState => {
+                  targetState.props.title = `会员${detailed.status === 1 ? '解冻' : '冻结'}原因`;
+                });
+              });
+            }}
+            actions={formActions}
+            schema={auditModalSchema}
+            onSubmit={handleSubmit}
+          />
+        </Modal>
+      </PageHeaderWrapper>
+    </Spin>
   );
 };
 

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

@@ -30,7 +30,7 @@ export const maintianSchema: ISchema = {
             memberType: {
               type: 'string',
               'x-component-props': {
-                placeholder: '请选择',
+                placeholder: '会员类型(全部)',
                 defaultValue: undefined,
               },
               enum: [],
@@ -38,7 +38,7 @@ export const maintianSchema: ISchema = {
             roleId: {
               type: 'string',
               'x-component-props': {
-                placeholder: '请选择',
+                placeholder: '会员角色(全部)',
                 defaultValue: undefined,
               },
               enum: [],
@@ -46,7 +46,7 @@ export const maintianSchema: ISchema = {
             level: {
               type: 'string',
               'x-component-props': {
-                placeholder: '请选择',
+                placeholder: '会员等级(全部)',
                 defaultValue: undefined,
               },
               enum: [],
@@ -54,7 +54,31 @@ export const maintianSchema: ISchema = {
             source: {
               type: 'string',
               'x-component-props': {
-                placeholder: '请选择',
+                placeholder: '申请来源(全部)',
+                defaultValue: undefined,
+              },
+              enum: [],
+            },
+            innerStatus: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '内部状态(全部)',
+                defaultValue: undefined,
+              },
+              enum: [],
+            },
+            outerStatus: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '外部状态(全部)',
+                defaultValue: undefined,
+              },
+              enum: [],
+            },
+            status: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '会员状态(全部)',
                 defaultValue: undefined,
               },
               enum: [],
@@ -62,11 +86,10 @@ export const maintianSchema: ISchema = {
             timeRange: {
               type: 'string',
               'x-component-props': {
-                placeholder: '请选择',
+                placeholder: '时间范围(全部)',
                 defaultValue: undefined,
               },
               enum: [
-                { label: '时间范围(全部)', value: 0 },
                 { label: '今天', value: 1 },
                 { label: '一周内', value: 2 },
                 { label: '一个月内', value: 3 },
@@ -92,32 +115,30 @@ export const maintianSchema: ISchema = {
   },
 };
 
-export const auditModalSchema = props => {
-  let modalSchema: ISchema = {
-    type: 'object',
-    properties: {
-      MEGA_LAYOUT: {
-        type: 'object',
-        'x-component': 'mega-layout',
-        'x-component-props': {
-          labelAlign: 'top',
-        },
-        properties: {
-          remark: {
-            type: 'string',
-            title: `会员${props.status === 1 ? '解冻' : '冻结'}原因`,
-            'x-component': 'textarea',
-            'x-component-props': {
-              placeholder: '在此输入你的内容，最长120个字符，60个汉字',
-              maxLength: 60,
-            },
-            'x-rules': [{ required: true, message: '请填写审核不通过原因' }],
+export const auditModalSchema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      'x-component-props': {
+        labelAlign: 'top',
+      },
+      properties: {
+        remark: {
+          type: 'string',
+          title: '会员解冻原因',
+          'x-component': 'textarea',
+          'x-component-props': {
+            placeholder: '在此输入你的内容，最长120个字符，60个汉字',
+            maxLength: 60, 
+            rows: 5, 
           },
+          'x-rules': [{ required: true, message: '请填写原因' }],
         },
       },
     },
-  };
-  return modalSchema;
+  },
 };
 
 const getCompnentValue = (elements: any) => {

src/pages/member/utils.tsx

+export function coverColFiltersItem(
+  data: Array<{[key: string]: any}>, 
+  dataIndex: string, 
+  item: {[key: string]: any}
+) {
+  const index = data.findIndex(i => i.dataIndex === dataIndex);
+  
+  if (index !== -1) {
+    data.splice(index, 1, {
+      ...data[index],
+      filters: item, 
+    });
+  }
+};
\ No newline at end of file