Skip to content

J
jinfa-admin
Commit c31233c9 authored by tjy's avatar tjy
Browse files
Options

调整会员

parent 53199f9e
Hide whitespace changes
Inline Side-by-side
Showing with 620 additions and 621 deletions
config/routes/memberAbility.ts
View file @ c31233c9
......@@ -37,26 +37,26 @@ const memberAbility =
{
path: '/memberAbility/manage/memberPr1',
name: 'memberPr1',
component: '@/pages/member/memberPr/index',
component: '@/pages/member/memberPr1/index',
},
{
path: '/memberAbility/manage/auditPr1',
name: 'auditPr1',
hideInMenu: true,
hidePageHeader: true,
component: '@/pages/member/memberPr/auditPr1',
component: '@/pages/member/memberPr1/auditPr1',
},
{
path: '/memberAbility/manage/memberPr2',
name: 'memberPr2',
component: '@/pages/member/memberPr/index',
component: '@/pages/member/memberPr2/index',
},
{
path: '/memberAbility/manage/auditPr2',
name: 'auditPr2',
hideInMenu: true,
hidePageHeader: true,
component: '@/pages/member/memberPr/auditPr2',
component: '@/pages/member/memberPr2/auditPr2',
},
{
path: '/memberAbility/manage/memberPrConfirm',
......
src/components/EyePreview/index.tsx 0 → 100644
View file @ c31233c9
import React from 'react'
import { Link } from 'umi'
import { EyeOutlined } from '@ant-design/icons'
import { Button } from 'antd'
export interface EyePreviewProps {
url?: string,
type?: 'button' | 'link',
handleClick?()
}
const EyePreview:React.FC<EyePreviewProps> = (props) => {
return (
props.type === 'link' ?
<Link to={props.url || ''}>
{props.children} <EyeOutlined />
</Link>
:
<Button onClick={props.handleClick} type='link'>
{props.children} <EyeOutlined />
</Button>
)
}
EyePreview.defaultProps = {
type: 'link'
}
export default EyePreview
\ No newline at end of file
src/components/StatusSwitch/index.tsx 0 → 100644
View file @ c31233c9
import React from 'react'
import { Popconfirm, Button } from 'antd'
import { PlayCircleOutlined } from '@ant-design/icons'
export interface StatusSwitchProps {
record: any,
handleConfirm?(),
handleCancel?()
}
const StatusSwitch:React.FC<StatusSwitchProps> = (props) => {
const { record } = props
return (
<Popconfirm
title="确定要执行这个操作?"
onConfirm={props.handleConfirm}
onCancel={props.handleCancel}
okText="是"
cancelText="否"
>
<Button type="link" style={record.state===1?{color:'#00B37A'}:{color:'red'}}>{record.state===1?'有效':'无效'} <PlayCircleOutlined /></Button>
</Popconfirm>
)
}
StatusSwitch.defaultProps = {}
export default StatusSwitch
\ No newline at end of file
src/formSchema/effects/useAsyncInitSelect.ts 0 → 100644
View file @ c31233c9
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd'
import { useLinkageUtils } from '@/utils/formEffectUtils'
const { onFormInit$ } = FormEffectHooks
/**
* @description 处理异步请求的下拉选择
* @param name 待处理的表单路径
* @param service 触发的异步函数， 需返回一个{label: any, value: any}形式的数组
*/
export const useAsyncInitSelect = (name: string[], service?: () => Promise<any>) => {
const { dispatch, setFieldState } = createFormActions()
const linkage = useLinkageUtils()
onFormInit$().subscribe(() => {
setFieldState(name, state => {
FormPath.setIn(state, 'props.x-props.hasFeedback', true)
})
name.forEach(v => linkage.loaded(v))
service().then(res => {
name.forEach(v => {
linkage.loaded(v)
linkage.enum(v, res[v])
})
//请求结束可以dispatch一个自定义事件收尾，方便后续针对该事件做联动
dispatch('requestAsyncSelect', {
name,
payload: res
})
}).catch(err => {
// linkage.loaded(name)
// linkage.enum(name, [])
})
})
}
\ No newline at end of file
src/formSchema/effects/useAsyncSelect.ts 0 → 100644
View file @ c31233c9
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd'
import { useLinkageUtils } from '@/utils/formEffectUtils'
const { onFormInit$ } = FormEffectHooks
/**
* @description 处理异步请求的下拉选择
* @param name 待处理的表单路径
* @param service 触发的异步函数， 需返回一个{label: any, value: any}形式的数组
*/
export const useAsyncSelect = (name, service: () => Promise<any[]>) => {
const { dispatch, setFieldState } = createFormActions()
const linkage = useLinkageUtils()
onFormInit$().subscribe(() => {
setFieldState(name, state => {
FormPath.setIn(state, 'props.x-props.hasFeedback', true)
})
linkage.loading(name)
service().then(res => {
linkage.loaded(name)
linkage.enum(name, res)
//请求结束可以dispatch一个自定义事件收尾，方便后续针对该事件做联动
dispatch('requestAsyncSelect', {
name,
payload: res
})
}).catch(err => {
linkage.loaded(name)
linkage.enum(name, [])
})
})
}
\ No newline at end of file
src/formSchema/effects/useInitValue.ts 0 → 100644
View file @ c31233c9
import { usePageStatus } from '@/hooks/usePageStatus'
import { useEffect, useState } from 'react'
/**
* 初始化表单数据, 可传入给NiceForm的initialValues
* @param service 必须保证返回数据中有data属性 并且匹配NiceForm
*/
export const useInitValue = (service) => {
const { id } = usePageStatus()
const [state, setState] = useState<any>(null)
useEffect(() => {
if (id) {
service({id}).then(({data}) => {
setState(data)
})
}
}, [])
return state
}
\ No newline at end of file
src/formSchema/effects/useSyncValues.ts 0 → 100644
View file @ c31233c9
import { FormEffectHooks } from '@formily/antd'
import { useLinkageUtils } from '@/utils/formEffectUtils'
const { onFieldValueChange$ } = FormEffectHooks
/**
* @description 用于同步表单的值
* @param target 同步的目标路径
* @param syncArr 被同步的表单字段
*/
export const useSyncValues = (target: string, syncArr: string[]) => {
const linkage = useLinkageUtils()
onFieldValueChange$(target).subscribe(state => {
syncArr.forEach(v => {
linkage.value(v, state.value)
})
})
}
\ No newline at end of file
src/hooks/useHttpRequest.ts 0 → 100644
View file @ c31233c9
import React, { useState } from 'react';
import { IApiRequest } from '@/utils/request';
export interface IHttpRequestReturn<T> {
data: T | null,
loading: boolean,
err: any,
run(params?: any)
}
/**
* 简易版本的useRequest hooks， 用于处理带有loading的业务场景
* @auth xjm
*/
export function useHttpRequest<T>(api: (params?, config?) => Promise<T>, config?: IApiRequest): IHttpRequestReturn<T> {
const [loading, setLoading] = useState(false)
const [data, setData] = useState<T | null>(null)
const [err, setErr] = useState()
const run = (params) => {
setLoading(true)
api(params).then((res: any) => {
setData(res.data)
}).catch(err => {
setErr(err)
}).finally(() => {
setTimeout(() => {
setLoading(false)
}, 200)
})
}
return {
data,
loading,
err,
run
}
}
\ No newline at end of file
src/hooks/usePageStatus.ts 0 → 100644
View file @ c31233c9
import { history } from 'umi'
import { useState } from 'react'
export enum PageStatus {
ADD,
EDIT,
PREVIEW
}
export const usePageStatus = () => {
const { preview, id = '' } = history.location.query
// 默认预览状态
let pageStatus = PageStatus.PREVIEW
if (preview === '1') {
pageStatus = PageStatus.PREVIEW
} else {
if (id) {
pageStatus = PageStatus.EDIT
} else {
pageStatus = PageStatus.ADD
}
}
return {
pageStatus,
id,
preview
}
}
\ No newline at end of file
src/hooks/useRowSelectionTable.ts 0 → 100644
View file @ c31233c9
import { useState } from 'react'
import { TableRowSelection } from 'antd/es/table/interface'
interface useRowSelectionTableCtl {
selectRow: any[],
selectedRowKeys: any[],
setSelectRow(rows: any[]),
setSelectedRowKeys(rows: any)
}
interface useRowSelectionOptions {
type?: 'checkbox' | 'radio'
}
/**
* 用于处理table 多选或者单选时的hooks
* @auth xjm
*/
export const useRowSelectionTable = (options: useRowSelectionOptions = {}): [TableRowSelection<any>, useRowSelectionTableCtl] => {
const { type = 'checkbox' } = options
const [selectRow, setSelectRow] = useState<any[]>([]) // 模态框选择的行数据
const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(() => [])
const rowSelection = {
selectedRowKeys: selectedRowKeys,
type,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectRow(selectedRows);
setSelectedRowKeys(selectedRowKeys);
}
}
return [rowSelection, { selectRow, setSelectRow, selectedRowKeys, setSelectedRowKeys }]
}
\ No newline at end of file
src/pages/member/components/auditDetail.tsx
View file @ c31233c9
......@@ -16,7 +16,8 @@ import {
} from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import styles from './index.less';
import { PublicApi } from '@/services/api';
const { TabPane } = Tabs;
......@@ -40,46 +41,48 @@ const data = [
];
const auditDetail: React.FC<ItemProps> = (props: any) => {
const { auditType, routeParams } = props;
const ref = useRef({});
const [hActived, setHActived] = useState('2');
const [fActived, setfActived] = useState('1');
const [lActived, setlActived] = useState('1');
const [detailData, setDetailData] = useState<any>({
step: {
current: 0,
items: [
{
title: '会员',
desc: '申请注册',
},
{
title: '平台',
desc: '审核会员',
},
{
title: '完成',
desc: '',
},
],
},
fileList: [
{
uid: '-1',
name: 'image.png',
status: 'done',
url:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-2',
name: 'image.png',
status: 'done',
url:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
],
previewVisible: false,
previewImage: '',
previewTitle: '',
// step: {
// current: 0,
// items: [
// {
// title: '会员',
// desc: '申请注册',
// },
// {
// title: '平台',
// desc: '审核会员',
// },
// {
// title: '完成',
// desc: '',
// },
// ],
// },
// fileList: [
// {
// uid: '-1',
// name: 'image.png',
// status: 'done',
// url:
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// },
// {
// uid: '-2',
// name: 'image.png',
// status: 'done',
// url:
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// },
// ],
// previewVisible: false,
// previewImage: '',
// previewTitle: '',
});
const infoTem = {
......@@ -152,22 +155,21 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
*（营业执照、法定代表人信息）
*/
const renderInfoTemplate = (params: any) => {
const { type, item } = params;
return (
<>
<div className={style['mainCol-title']}>
{infoTem[params.key].title}
</div>
<div className={styles['mainCol-title']}>{item.groupName}</div>
{params.type === '1' ? (
<>
<div className={style['mainCol-row']}>
{infoTem[params.key].elem.map((item: any, index: string) => {
<div className={styles['mainCol-row']}>
{item.elements.map((items: any, indexs: string) => {
return (
<div className={style['mainCol-row-col']} key={index}>
<div className={style['mainCol-row-col-option']}>
{item.title}
<div className={styles['mainCol-row-col']} key={indexs}>
<div className={styles['mainCol-row-col-option']}>
{items.fieldCNName}
</div>
<div className={style['mainCol-row-col-option']}>
185 2929 6547
<div className={styles['mainCol-row-col-option']}>
{items.fieldValue}
</div>
</div>
);
......@@ -176,7 +178,7 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
</>
) : (
<>
<div className={style['mainCol-rows']}>
{/* <div className={style['mainCol-rows']}>
<div className={style['mainCol-rows-cols']}>
{infoTem[params.key].leftElem.map(
(item: any, index: string) => {
......@@ -229,7 +231,7 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
},
)}
</div>
</div>
</div> */}
</>
)}
</>
......@@ -281,11 +283,15 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
];
useEffect(() => {
PublicApi.getMemberValidateCommitDetail({
memberId: props.routeParams.memberId,
validateId: props.routeParams.validateId,
}).then(res => {});
});
const fetchDetailData = async () => {
const { data } = await PublicApi.getMemberValidateCommitDetail({
memberId: routeParams.memberId,
validateId: routeParams.validateId,
});
setDetailData(data);
};
fetchDetailData();
}, []);
// 模拟请求
const fetchData = (params: any) => {
......@@ -306,20 +312,20 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
onBack={() => window.history.back()}
title={
<>
<div className={style['headerTop']}>
<div className={style['headerTop-prefix']}>广</div>
<div className={style['headerTop-name']}>
<div className={styles['headerTop']}>
<div className={styles['headerTop-prefix']}>广</div>
<div className={styles['headerTop-name']}>
广州市极致皮具有限公司
</div>
<div className={style[`levelIcon${'1'}`]}></div>
<div className={styles[`levelIcon${'1'}`]}></div>
</div>
</>
}
extra={
<>
{props.auditType === '1' ? (
{auditType === '1' ? (
<>
<Button className={style['saveBtn']}>提交</Button>
<Button className={styles['saveBtn']}>提交</Button>
</>
) : (
<>
......@@ -327,7 +333,7 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
<StopOutlined />
审核不通过
</Button>
<Button className={style['saveBtn']}>
<Button className={styles['saveBtn']}>
<CheckSquareOutlined />
审核通过
</Button>
......@@ -336,123 +342,133 @@ const auditDetail: React.FC<ItemProps> = (props: any) => {
</>
}
content={
<div className={style['headerMain']}>
<div className={style['headerMain-left']}>
<div className={style['headerMain-left-option']}>
<div className={styles['headerMain']}>
<div className={styles['headerMain-left']}>
<div className={styles['headerMain-left-option']}>
<div>会员类型：</div>
<div>企业会员</div>
<div>{detailData.memberTypeName}</div>
</div>
<div className={style['headerMain-left-option']}>
<div className={styles['headerMain-left-option']}>
<div>会员角色：</div>
<div>供应商</div>
<div>{detailData.roleName}</div>
</div>
<div className={style['headerMain-left-option']}>
<div className={styles['headerMain-left-option']}>
<div>会员状态：</div>
<div>
<Tag color="green">正常</Tag>
<Tag color="green">12</Tag>
</div>
</div>
<div className={style['headerMain-left-option']}>
<div className={styles['headerMain-left-option']}>
<div>外部状态：</div>
<div>
<Tag color="gold">待审核</Tag>
<Tag color="gold">{detailData.outerStatusName}</Tag>
</div>
</div>
<div className={style['headerMain-left-option']}>
<div className={styles['headerMain-left-option']}>
<div>内部状态：</div>
<div>
<Badge color="#669EDE" text="待提交审核" />
<Badge color="#669EDE" text={detailData.innerStatusName} />
</div>
</div>
</div>
</div>
}
>
<Row>
<Col className={style['mainCol']} span={24}>
<Tabs activeKey={fActived} onChange={val => setfActived(val)}>
<TabPane tab="外部审核流程" key="1">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData.step.current}
>
{detailData.step.items.map((item, index) => {
return (
<Step
key={index}
title={item.title}
description={item.desc}
<Tabs
activeKey={hActived}
tabBarStyle={{ backgroundColor: '#fff', padding: '0 24px' }}
onChange={val => setHActived(val)}
>
<TabPane tab="详情" key="1">
<Row>
<Col className={styles['mainCol']} span={24}>
<Tabs activeKey={fActived} onChange={val => setfActived(val)}>
<TabPane tab="外部审核流程" key="1">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData?.currentOuterStep - 1}
>
{detailData?.outerVerifySteps?.map((item, index) => {
return (
<Step
key={index}
title={item.roleName}
description={item.stepName}
/>
);
})}
</Steps>
</TabPane>
<TabPane tab="内部审核流程" key="2">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData?.currentInnerStep - 1}
>
{detailData?.innerVerifySteps?.map((item, index) => {
return (
<Step
key={index}
title={item.roleName}
description={item.stepName}
/>
);
})}
</Steps>
</TabPane>
</Tabs>
</Col>
{detailData?.groups?.map((item, index) => {
return (
<Col className={styles['mainCol']} span={24} key={index}>
{renderInfoTemplate({ type: '1', item })}
</Col>
);
})}
<Col className={styles['mainCol']} span={24}>
<Tabs activeKey={lActived} onChange={val => setlActived(val)}>
<TabPane tab="流转记录" key="1">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
);
})}
</Steps>
</TabPane>
<TabPane tab="内部审核流程" key="2">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData.step.current}
>
{detailData.step.items.map((item, index) => {
return (
<Step
key={index}
title={item.title}
description={item.desc}
</div>
</TabPane>
<TabPane tab="内部单据流转记录" key="2">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
);
})}
</Steps>
</TabPane>
</Tabs>
</Col>
<Col className={style['mainCol']} span={24}>
{renderInfoTemplate({ type: '1', key: 'base' })}
</Col>
<Col className={style['mainCol']} span={24}>
{renderInfoTemplate({ type: '1', key: 'channel' })}
</Col>
<Col className={style['mainCol']} span={24}>
{renderInfoTemplate({ type: '2', key: 'license' })}
</Col>
<Col className={style['mainCol']} span={24}>
{renderInfoTemplate({ type: '2', key: 'legal' })}
</Col>
<Col className={style['mainCol']} span={24}>
{renderInfoTemplate({ type: '1', key: 'contact' })}
</Col>
<Col className={style['mainCol']} span={24}>
<Tabs activeKey={lActived} onChange={val => setlActived(val)}>
<TabPane tab="流转记录" key="1">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
</div>
</TabPane>
<TabPane tab="内部单据流转记录" key="2">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
</div>
</TabPane>
</Tabs>
</Col>
</Row>
</div>
</TabPane>
</Tabs>
</Col>
</Row>
</TabPane>
<TabPane tab="权限" key="2">
<Row>
<Col style={{ backgroundColor: 'green' }} span={15}>
123
</Col>
<Col style={{ backgroundColor: 'tomato' }} span={8} offset={1}>
456
</Col>
</Row>
</TabPane>
</Tabs>
</PageHeaderWrapper>
);
};
......
src/pages/member/components/auditList.tsx
View file @ c31233c9
......@@ -20,6 +20,7 @@ import {
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import EyePreview from '@/components/EyePreview';
import { PublicApi } from '@/services/api';
import { timeRange } from '@/utils/index';
......@@ -62,16 +63,11 @@ const auditList: React.FC<PageProps> = props => {
key: 'name',
render: (text: any, record: any) => {
return (
<div className={style.nameCell}>
<div
className={style.nameCellTitle}
onClick={() => handleChange(record, 'check')}
>
{text}&nbsp;
<EyeOutlined />
</div>
<div className={style[`levelIcon${record.level}`]}></div>
</div>
<EyePreview
url={`/memberCenter/tranactionAbility/stockSellStorage/addWarehouse?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
);
},
},
......
src/pages/member/memberMaintain/addMember.tsx
View file @ c31233c9
import React, { useState, useEffect, useRef, ReactNode } from 'react';
import { history } from 'umi';
import { Tabs, Badge, Button, Card, Row, Col, message, Upload } from 'antd';
import { Badge, Button, Card, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
ContainerOutlined,
PlusOutlined,
SaveOutlined,
} from '@ant-design/icons';
import { SaveOutlined } from '@ant-design/icons';
import { createFormActions } from '@formily/antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import {
IFormFilter,
IButtonFilter,
} from 'god/dist/src/standard-table/TableController';
import ReutrnEle from '@/components/ReturnEle';
import styles from './index.less';
import NiceForm from '@/components/NiceForm';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { initDetailSchema } from './schema';
import style from './index.less';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { PublicApi } from '@/services/api';
const { TabPane } = Tabs;
const addSchemaAction = createFormActions();
const formActions = createFormActions();
const addMember: React.FC<any> = props => {
const ref = useRef({});
const selectList: any = [
{
label: '',
// (
// <>
// <img src={ChinaImg} style={{ width: 24, height: 17 }} /> +86
// </>
// )
value: '1',
},
];
/* 会员类型、会员角色、会员等级、注册手机号选项 */
const ref = useRef<any>({});
const [memberItems, setMemberItems] = useState<any>({});
const data = [
......@@ -99,6 +76,12 @@ const addMember: React.FC<any> = props => {
},
];
useEffect(() => {
PublicApi.getMemberMaintenanceAddpageitems().then(res => {
setMemberItems(res.data);
});
}, []);
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
......@@ -117,22 +100,25 @@ const addMember: React.FC<any> = props => {
console.log(values);
};
// 处理数据
const processData = (data: any) => {
for (let elem of data) {
elem.label = elem.text;
elem.value = elem.id;
}
// 会员类型、会员角色、会员等级选项
const fetchSelectOptions = async () => {
const { data } = await PublicApi.getMemberMaintenanceAddpageitems();
return {
memberTypeId: fetchSomeOptions(data.memberTypes),
roleId: fetchSomeOptions(data.memberRoles),
level: fetchSomeOptions(data.memberLevels),
};
};
useEffect(() => {
PublicApi.getMemberMaintenanceAddpageitems().then(res => {
processData(res.data.memberLevels);
processData(res.data.memberRoles);
processData(res.data.memberTypes);
setMemberItems(res.data);
});
}, ['memberItems']);
// 获取手机code
const fetchTelCode = async () => {
const { data } = await PublicApi.getManageGetTelCode();
return data;
};
const fetchSomeOptions = data => {
return data.map(v => ({ label: v.text, value: v.id }));
};
const beforeUpload = (file: any) => {
const isJpgOrPng =
......@@ -165,7 +151,7 @@ const addMember: React.FC<any> = props => {
key="1"
type="primary"
icon={<SaveOutlined />}
onClick={() => addSchemaAction.submit()}
onClick={() => formActions.submit()}
>
保存
</Button>,
......@@ -174,7 +160,20 @@ const addMember: React.FC<any> = props => {
<Card>
<NiceForm
onSubmit={handleSubmit}
actions={addSchemaAction}
actions={formActions}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
useAsyncInitSelect(
['memberTypeId', 'roleId', 'level'],
fetchSelectOptions,
);
useAsyncSelect('telCode', fetchTelCode);
}}
schema={initDetailSchema(memberItems)}
/>
</Card>
......
src/pages/member/memberMaintain/addMember1.tsx deleted 100644 → 0
View file @ 53199f9e
import React, { useState, useEffect, useRef, ReactNode } from 'react';
import { history } from 'umi';
import { Tabs, Badge, Button, Card, Row, Col, message, Upload } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ContainerOutlined, PlusOutlined } from '@ant-design/icons';
import { Form, FormItem, createFormActions } from '@formily/antd';
import { Select, Input } from '@formily/antd-components';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import { PublicApi } from '@/services/api';
const { TabPane } = Tabs;
const actions = createFormActions();
const addMember: React.FC<any> = props => {
const ref = useRef({});
const [actived, setActived] = useState('-1');
const [editable, setEditable] = useState(
props.location.query.type != 'check',
);
const selectList: any = [
{
label: '',
// (
// <>
// <img src={ChinaImg} style={{ width: 24, height: 17 }} /> +86
// </>
// )
value: '1',
},
{ label: '', value: '2' },
{ label: '', value: '3' },
{ label: '', value: '4' },
{ label: '', value: '5' },
];
/* 会员类型、会员角色、会员等级、注册手机号选项 */
const [memberItems, setMemberItems] = useState<any>({});
const [fileList, setFileList] = useState([]);
const data = [
{
key: '1',
sn: '1',
roleName: '供应商',
status: '1',
operation: '申请注册',
useTime: '2020-05-12 08:08',
result: '无',
},
];
const columns: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'sn',
align: 'center',
key: 'sn',
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
key: 'status',
render: (text: any, record: any) => {
let component: ReactNode = null;
component = <Badge color="#FFC400" text="待审核" />;
return component;
},
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'useTime',
align: 'center',
key: 'useTime',
},
{
title: '审核意见',
dataIndex: 'result',
align: 'center',
key: 'result',
},
];
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data,
});
}, 1000);
});
};
const handleSubmit = (values: any) => {
console.log(values);
};
// 处理数据
const processData = (data: any) => {
for (let elem of data) {
elem.label = elem.text;
elem.value = elem.id;
}
};
useEffect(() => {
PublicApi.getMemberMaintenanceAddpageitems().then(res => {
processData(res.data.memberLevels);
processData(res.data.memberRoles);
processData(res.data.memberTypes);
setMemberItems(res.data);
});
}, ['memberItems']);
const beforeUpload = (file: any) => {
const isJpgOrPng =
file.type === 'image/jpeg' ||
file.type === 'image/png' ||
file.type === 'image/jpg';
if (!isJpgOrPng) {
message.error('仅支持上传JPEG/JPG/PNG文件!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('上传图片不超过2MB!');
}
return isJpgOrPng && isLt2M;
};
// const handleChange = (items: any, file: any, fileList: any) => {
// console.log(file);
// for (let elem of file) {
// elem.url = elem.data;
// }
// };
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
title={
<>
<div className={style.headerTop}>
<span>返回</span>
<span>
{props.location.query.type === 'add'
? '新建会员'
: props.location.query.type === 'change'
? '编辑会员'
: '查看会员'}
</span>
</div>
</>
}
extra={
<>
<Button
className={style.saveBtn}
icon={<ContainerOutlined />}
onClick={() => actions.submit()}
>
保存
</Button>
</>
}
>
<Card>
<Form
editable={editable}
labelCol={3}
wrapperCol={10}
labelAlign="left"
actions={actions}
>
<Tabs
tabBarGutter={30}
activeKey={actived}
onChange={activeKey => setActived(activeKey)}
>
<TabPane
tab={
// <Badge count={tabCount['1']} offset={[10, 0]}>
'基本信息'
// </Badge>
}
key="-1"
>
<FormItem
label="会员类型"
name="memberTypes"
dataSource={memberItems.memberTypes}
rules={[{ required: true, message: '请选择会员类型!' }]}
component={Select}
/>
<FormItem
label="会员角色"
name="memberRoles"
dataSource={memberItems.memberRoles}
rules={[{ required: true, message: '请选择会员角色!' }]}
component={Select}
/>
<FormItem
label="会员等级"
name="memberLevels"
dataSource={memberItems.memberLevels}
rules={[{ required: true, message: '请选择会员等级!' }]}
component={Select}
/>
<FormItem
label={
<>
<span className={style.required}>*</span>
注册手机号
</>
}
name="registry"
>
<Row gutter={10}>
<Col span={6}>
<FormItem
itemStyle={{ marginBottom: 0 }}
name="country"
dataSource={memberItems.countryCodes}
rules={[{ required: true, message: '请选择会员角色!' }]}
component={Select}
/>
</Col>
<Col span={18}>
<FormItem
name="phoneMobile"
itemStyle={{ marginBottom: 0 }}
rules={[{ required: true, message: '请选择会员角色!' }]}
component={Input}
/>
</Col>
</Row>
</FormItem>
<FormItem
label="注册邮箱"
name="memberEmail"
itemStyle={{ marginBottom: 0 }}
component={Input}
/>
</TabPane>
{memberItems.groups &&
memberItems.groups.map((item: any, index: number) => {
return (
<TabPane
tab={
// <Badge count={tabCount['1']} offset={[10, 0]}>
item.groupName
// </Badge>
}
key={index}
>
{item.elements.map((items: any, indexs: number) => {
return (
<div key={indexs}>
{items.fieldType === 'String' ? (
<FormItem
itemStyle={
item.elements.length - 1 === indexs
? { marginBottom: 0 }
: {}
}
label={items.fieldCNName}
name={items.fieldName}
required={items.fieldEmpty === 0}
// rules={items.checkRules}
component={Input}
key={indexs}
/>
) : (
<FormItem
itemStyle={
item.elements.length - 1 === indexs
? { marginBottom: 0 }
: {}
}
label={items.fieldCNName}
name={items.fieldName}
>
<Upload
action="/api/file/file/upload"
listType="picture-card"
fileList={fileList}
data={{ fileType: 2 }}
onChange={(info: any) =>
setFileList(info.fileList)
}
>
{fileList.length >= 8 ? null : (
<div>
<PlusOutlined />
<div className="ant-upload-text">
Upload
</div>
</div>
)}
</Upload>
</FormItem>
// <FormItem
// itemStyle={
// item.elements.length - 1 === indexs
// ? { marginBottom: 0 }
// : {}
// }
// label={items.fieldCNName}
// name={items.fieldName}
// action="/api/file/file/upload"
// listType="picture-card"
// required={items.fieldEmpty === 0}
// fileList={fileList}
// // rules={items.checkRules}
// data={{ fileType: 2 }}
// beforeUpload={beforeUpload}
// onChange={(file: any, fileList: any) =>
// handleChange(items, file, fileList)
// }
// showUploadList={{
// showRemoveIcon:
// items.value && items.value.length > 0,
// }}
// key={indexs}
// component={Upload}
// />
)}
</div>
);
})}
</TabPane>
);
})}
</Tabs>
</Form>
</Card>
</PageHeaderWrapper>
);
};
export default addMember;
src/pages/member/memberMaintain/index.tsx
View file @ c31233c9
......@@ -303,8 +303,6 @@ const memberMaintain: React.FC<[]> = () => {
]);
useEffect(() => {
// if (!isFirst) return;
// setIsFirst(false);
let timeRanges = timeRange(searchForm.timeRange);
setSearchForm({
...searchForm,
......@@ -312,7 +310,6 @@ const memberMaintain: React.FC<[]> = () => {
endDate: timeRanges.et,
});
ref.current.reload();
// console.log(timeRanges);
}, [searchForm.timeRange]);
useEffect(() => {
......
src/pages/member/memberMaintain/schema/index.tsx
View file @ c31233c9
......@@ -2,57 +2,103 @@ import React from 'react';
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const maintianSchema: ISchema = {
export const importSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
search: {
type: 'string',
'x-component': 'Search',
'x-mega-props': {},
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
placeholder: '请输入仓位名称',
grid: true,
},
properties: {
ctl: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{controllerBtns}}',
},
},
name: {
type: 'string',
'x-component': 'Search',
'x-mega-props': {},
'x-component-props': {
placeholder: '搜索',
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'mega-layout',
visible: false,
'x-component': 'flex-layout',
'x-component-props': {
inline: true,
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
},
properties: {
productName: {
memberType: {
type: 'string',
'x-component-props': {
placeholder: '商品名称',
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
productId: {
roleId: {
type: 'string',
'x-component-props': {
placeholder: '商品ID',
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
category: {
level: {
type: 'string',
'x-component-props': {
placeholder: '请选择品类',
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
brand: {
source: {
type: 'string',
'x-component-props': {
placeholder: '请选择品牌',
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
timeRange: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [
{ label: '时间范围(全部)', value: 0 },
{ label: '今天', value: 1 },
{ label: '一周内', value: 2 },
{ label: '一个月内', value: 3 },
{ label: '三个月内', value: 4 },
{ label: '六个月内', value: 5 },
{ label: '一年内', value: 6 },
{ label: '一年前', value: 7 },
],
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
......@@ -64,8 +110,6 @@ export const maintianSchema: ISchema = {
},
};
const registryPhone = <></>;
const getCompnentValue = (elements: any) => {
let components = {};
for (let item of elements) {
......@@ -78,6 +122,8 @@ const getCompnentValue = (elements: any) => {
listType: 'card',
action: '/api/file/file/upload',
data: { fileType: 2 },
fileList: [],
onChange: file => console.log(file),
};
components[item.fieldName] = {
type: item.fieldType,
......@@ -108,54 +154,69 @@ export const initDetailSchema = (props: any) => {
labelAlign: 'left',
},
properties: {
memberTypes: {
memberTypeId: {
type: 'string',
required: true,
title: '会员类型',
enum: props.memberTypes,
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
memberRoles: {
roleId: {
type: 'string',
required: true,
title: '会员角色',
enum: props.memberRoles,
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
memberLevels: {
level: {
type: 'string',
required: true,
title: '会员等级',
enum: [{ label: '1', value: 1 }],
// enum: props.memberLevels,
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
memberPhone: {
MEGA_LAYOUT1_1: {
type: 'object',
required: true,
title: '注册手机',
'x-component': 'CustomRegistryPhone',
'x-component': 'mega-layout',
'x-component-props': {
dataSource: [
{
text: '+86',
id: 1,
url: require('../../../../../public/static/imgs/level1@2x.png'),
label: '注册手机',
wrapperCol: 24,
required: true,
},
properties: {
MEGA_LAYOUT1_1_1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
full: true,
},
{
text: '+126',
id: 2,
url: require('../../../../../public/static/imgs/level2@2x.png'),
properties: {
telCode: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '请选择',
},
required: true,
},
tel: {
type: 'string',
'x-mega-props': { span: 2 },
'x-component-props': {
placeholder: '请输入你的手机号码',
maxLength: 11,
},
required: true,
},
},
],
selectPh: '请选择',
inputPh: '请输入你的手机号码',
},
},
},
memberEmail: {
......
src/utils/formEffectUtils.ts 0 → 100644
View file @ c31233c9
import { createFormActions, FormPath } from '@formily/antd'
export const useLinkageUtils = () => {
const { setFieldState } = createFormActions()
const linkage = (key, defaultValue?) => (path, value?) =>
setFieldState(path, state => {
FormPath.setIn(state, key, value !== undefined ? value : defaultValue)
})
return {
hide: linkage('visible', false),
show: linkage('visible', true),
visible: linkage('visible'),
enum: linkage('props.enum', []),
loading: linkage('loading', true),
loaded: linkage('loading', false),
value: linkage('value')
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment