Commit 17c0bcfc authored by 前端-许佳敏's avatar 前端-许佳敏

merge

parents 872c7822 c857db9d
...@@ -71,6 +71,7 @@ export const useLinkEnumEffect = (childKey, transformFn?) => { ...@@ -71,6 +71,7 @@ export const useLinkEnumEffect = (childKey, transformFn?) => {
type: 'value:linkage', type: 'value:linkage',
resolve: ({ origin, target }, { setFieldState, getFieldState }) => { resolve: ({ origin, target }, { setFieldState, getFieldState }) => {
getFieldState(origin, state => { getFieldState(origin, state => {
console.log('origin', origin, 'state', state)
const { originData = [] } = state const { originData = [] } = state
setFieldState(target, targetState => { setFieldState(target, targetState => {
if (state.value === undefined) { if (state.value === undefined) {
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Modal, Result, Progress, Button } from 'antd'; import { Modal, Result, Progress, Upload, Button } from 'antd';
import { FileExcelOutlined } from '@ant-design/icons'; import { FileExcelOutlined } from '@ant-design/icons';
import styles from './index.less'; import styles from './index.less';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
...@@ -8,6 +8,7 @@ interface Uploader { ...@@ -8,6 +8,7 @@ interface Uploader {
visibleModal: boolean; visibleModal: boolean;
fileText: string; fileText: string;
onCancel: Function; onCancel: Function;
uploadUrl?: string;
} }
let timeChange: any; let timeChange: any;
...@@ -15,6 +16,8 @@ let timeChange: any; ...@@ -15,6 +16,8 @@ let timeChange: any;
const UploadModal: React.FC<Uploader> = props => { const UploadModal: React.FC<Uploader> = props => {
const [modalTitle, setModalTitle] = useState('导入'); const [modalTitle, setModalTitle] = useState('导入');
const [modalStep, setModalStep] = useState(0); const [modalStep, setModalStep] = useState(0);
const [file, setFile] = useState();
const [fileList, setFileList] = useState([]);
const downLoadTemplate = () => {}; const downLoadTemplate = () => {};
...@@ -143,8 +146,18 @@ const UploadModal: React.FC<Uploader> = props => { ...@@ -143,8 +146,18 @@ const UploadModal: React.FC<Uploader> = props => {
/> />
); );
const beforeUpload = file => {
let extension = file.name.split('.')[1];
if (['xlsx', 'xls'].includes[extension]) {
setTimeout(() => {
setExceptionCheck(true);
}, 250);
}
return false;
};
// 上传 // 上传
const handleUpload = (type: string, step: number = 0) => { const handleUpload = (type: string, file?: any, step: number = 0) => {
let title = ''; let title = '';
switch (type) { switch (type) {
case 'continue': case 'continue':
...@@ -162,6 +175,7 @@ const UploadModal: React.FC<Uploader> = props => { ...@@ -162,6 +175,7 @@ const UploadModal: React.FC<Uploader> = props => {
} }
setModalStep(step); setModalStep(step);
setModalTitle(title); setModalTitle(title);
if (step === 1) return false;
}; };
const exportErrorLog = () => {}; const exportErrorLog = () => {};
...@@ -190,13 +204,20 @@ const UploadModal: React.FC<Uploader> = props => { ...@@ -190,13 +204,20 @@ const UploadModal: React.FC<Uploader> = props => {
icon={<FileExcelOutlined />} icon={<FileExcelOutlined />}
title={step0Description} title={step0Description}
extra={ extra={
<Button // <Upload
style={{ width: '100%' }} // name="file"
type="primary" // action=""
onClick={() => handleUpload('upload')} // fileList={fileList}
> // beforeUpload={file => beforeUpload(file)}
上传 // customRequest={file => console.log(file)}
</Button> // >
// <Button type="primary">导入</Button>
// </Upload>
<>
<Button type="primary" onClick={() => handleUpload('upload')}>
导入
</Button>
</>
} }
/> />
</> </>
......
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 => {
console.log(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
import React, { ReactNode, useState, useRef } from 'react'; import React, { ReactNode, useState, useRef } from 'react';
import { history } from 'umi'; import { history } from 'umi';
import { import { Space, Card, Button } from 'antd';
Row, import { ClockCircleOutlined } from '@ant-design/icons';
Col,
Card,
Tooltip,
Button,
Popconfirm,
Select,
Input,
} from 'antd';
import {
EyeOutlined,
UpOutlined,
DownOutlined,
ClockCircleOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god'; import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less'; import { createFormActions } from '@formily/antd';
import EyePreview from '@/components/EyePreview';
import NiceForm from '@/components/NiceForm';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { auditSchema } from './schema';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { PublicApi } from '@/services/api';
interface PageProps { interface PageProps {
pageType: string; // 页面类型 1 待提交审核 2 待审核 3 待确认审核 pageType: string; // 页面类型 1 待提交审核 2 待审核 3 待确认审核
} }
const { Option } = Select; const formActions = createFormActions();
const data = [ // 模拟请求
{ const fetchData = async (params: any) => {
key: '1', const res = await PublicApi.getMemberMaintenancePage(params);
id: '1', return res.data;
level: '1', };
name: '温州隆昌皮具有限公司1',
type: 1,
role: 1,
applyTime: '2020-05-12 08:08',
status: 1,
source: 1,
outSideStatus: 1,
inSideStatus: 1,
externalStatus: '待提交',
},
{
key: '2',
id: '2',
level: '2',
name: '温州隆昌皮具有限公司2',
type: 2,
role: 2,
applyTime: '2020-05-12 08:08',
status: -1,
source: 2,
outSideStatus: 1,
inSideStatus: 2,
externalStatus: '待提交',
},
{
key: '3',
id: '3',
level: '3',
name: '温州隆昌皮具有限公司3',
type: 1,
role: 3,
applyTime: '2020-05-12 08:08',
status: 1,
source: 3,
outSideStatus: 2,
inSideStatus: 3,
externalStatus: '待提交',
},
{
key: '4',
id: '4',
level: '3',
name: '温州隆昌皮具有限公司4',
type: 2,
role: 4,
applyTime: '2020-05-12 08:08',
status: 1,
source: 4,
outSideStatus: 4,
inSideStatus: 4,
externalStatus: '待提交',
},
{
key: '5',
id: '5',
level: '3',
name: '温州隆昌皮具有限公司4',
type: 2,
role: 5,
applyTime: '2020-05-12 08:08',
status: 1,
source: 4,
outSideStatus: 4,
inSideStatus: 2,
externalStatus: '待提交',
},
{
key: '6',
id: '6',
level: '3',
name: '温州隆昌皮具有限公司4',
type: 2,
role: 6,
applyTime: '2020-05-12 08:08',
status: 1,
source: 4,
outSideStatus: 4,
inSideStatus: 2,
externalStatus: '待提交',
},
];
const auditList: React.FC<PageProps> = props => { const auditList: React.FC<PageProps> = props => {
const ref = useRef({}); const ref = useRef<any>({});
let [isSearch, setIsSearch] = useState(false); const { pageType } = props;
const [searchForm, setSearchForm] = useState({ const [searchForm, setSearchForm] = useState({
memberIdorName: '', memberIdorName: '',
memberType: '', memberType: '',
...@@ -142,17 +54,18 @@ const auditList: React.FC<PageProps> = props => { ...@@ -142,17 +54,18 @@ const auditList: React.FC<PageProps> = props => {
align: 'center', align: 'center',
key: 'name', key: 'name',
render: (text: any, record: any) => { render: (text: any, record: any) => {
let path =
pageType === '1'
? 'auditPrSubmit'
: pageType === '2'
? 'auditPr'
: 'auditPrComfirm';
return ( return (
<div className={style.nameCell}> <EyePreview
<div url={`/memberCenter/memberAbility/manage/${path}?id=${record.id}&preview=1`}
className={style.nameCellTitle} >
onClick={() => handleSee(record)} {text}
> </EyePreview>
{text}&nbsp;
<EyeOutlined />
</div>
<div className={style[`levelIcon${record.level}`]}></div>
</div>
); );
}, },
}, },
...@@ -322,9 +235,9 @@ const auditList: React.FC<PageProps> = props => { ...@@ -322,9 +235,9 @@ const auditList: React.FC<PageProps> = props => {
let component: ReactNode = null; let component: ReactNode = null;
component = ( component = (
<Button type="link" onClick={() => handleChange(record)}> <Button type="link" onClick={() => handleChange(record)}>
{props.pageType === '1' {pageType === '1'
? '提交审核' ? '提交审核'
: props.pageType === '2' : pageType === '2'
? '审核' ? '审核'
: '确认审核'} : '确认审核'}
</Button> </Button>
...@@ -334,6 +247,21 @@ const auditList: React.FC<PageProps> = props => { ...@@ -334,6 +247,21 @@ const auditList: React.FC<PageProps> = props => {
}, },
]; ];
// 初始化高级筛选选项
const fetchSelectOptions = async () => {
const { data } = await PublicApi.getMemberMaintenancePageitems();
return {
memberType: fetchSomeOptions(data.memberTypes),
roleId: fetchSomeOptions(data.memberRoles),
level: fetchSomeOptions(data.memberLevels),
source: fetchSomeOptions(data.memberSource),
};
};
const fetchSomeOptions = data => {
return data.map(v => ({ label: v.text, value: v.id }));
};
const rowSelection = { const rowSelection = {
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => { onChange: (selectedRowKeys: any, selectedRows: any) => {
...@@ -346,42 +274,30 @@ const auditList: React.FC<PageProps> = props => { ...@@ -346,42 +274,30 @@ const auditList: React.FC<PageProps> = props => {
}, },
}; };
// 模拟请求
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 handleSearch = () => {};
const handleDel = (e: any) => {};
const handleReset = () => {};
const handleSee = (record: any) => {}; const handleSee = (record: any) => {};
const handleSubmit = (val: any) => {
console.log(val);
};
const handleChange = (record: object) => { const handleChange = (record: object) => {
let path = let path =
props.pageType === '1' pageType === '1'
? 'auditPrSubmit' ? 'auditPrSubmit'
: props.pageType === '2' : pageType === '2'
? 'auditPr' ? 'auditPr'
: 'auditPrComfirm'; : 'auditPrComfirm';
history.push(`/memberCenter/memberAbility/manage/${path}`); history.push(`/memberCenter/memberAbility/manage/${path}`);
}; };
const controllerBtns = (
<Space>
<Button>
{pageType === '1'
? '批量提交审核'
: pageType === '2'
? '批量审核通过'
: '批量确认审核通过'}
</Button>
</Space>
);
return ( return (
<Card> <Card>
<StandardTable <StandardTable
...@@ -390,155 +306,26 @@ const auditList: React.FC<PageProps> = props => { ...@@ -390,155 +306,26 @@ const auditList: React.FC<PageProps> = props => {
fetchTableData={(params: any) => fetchData(params)} fetchTableData={(params: any) => fetchData(params)}
rowSelection={rowSelection} rowSelection={rowSelection}
controlRender={ controlRender={
<Row> <NiceForm
<Col className={style.col} span={2}> actions={formActions}
<Button> onSubmit={values => ref.current.reload(values)}
{props.pageType === '1' expressionScope={{
? '批量提交审核' controllerBtns,
: props.pageType === '2' }}
? '批量审核通过' effects={($, actions) => {
: '批量确认审核通过'} useStateFilterSearchLinkageEffect(
</Button> $,
</Col> actions,
<Col 'search',
className={style.col} FORM_FILTER_PATH,
span={20} );
offset={2} useAsyncInitSelect(
style={{ textAlign: 'right' }} ['memberType', 'roleId', 'level', 'source'],
> fetchSelectOptions,
<Tooltip );
trigger={['focus']} }}
placement="top" schema={auditSchema}
title={<span>输入ID、会员名称&nbsp;&nbsp;进行搜索</span>} />
>
<Input.Search
style={{ width: '232px' }}
value={searchForm.memberIdorName}
placeholder="搜索"
onChange={e =>
setSearchForm({
...searchForm,
memberIdorName: e.target.value,
})
}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button
style={{ margin: '0 16px' }}
onClick={() => setIsSearch((isSearch = !isSearch))}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
{isSearch ? (
<Row className={style.subRow}>
<Col className={style.subCol}>
<Select
className={style.select}
value={searchForm.memberType}
onChange={val =>
setSearchForm({ ...searchForm, memberType: val })
}
>
<Option value="">会员类型(全部)</Option>
<Option value="1">企业会员</Option>
<Option value="2">个人会员</Option>
<Option value="3">渠道企业会员</Option>
<Option value="4">渠道个人会员</Option>
</Select>
<Select
className={style.select}
value={searchForm.memberRole}
onChange={val =>
setSearchForm({ ...searchForm, memberRole: val })
}
>
<Option value="">会员角色(全部)</Option>
<Option value="1">供应商</Option>
<Option value="2">采购商</Option>
<Option value="3">加工企业</Option>
<Option value="4">金融服务商</Option>
<Option value="5">物流服务商</Option>
<Option value="6">渠道供应商</Option>
<Option value="7">渠道采购商</Option>
</Select>
<Select
className={style.select}
value={searchForm.memberLevel}
onChange={val =>
setSearchForm({ ...searchForm, memberLevel: val })
}
>
<Option value="">会员等级(全部)</Option>
<Option value="1">青铜会员</Option>
<Option value="2">白银会员</Option>
<Option value="3">黄金会员</Option>
<Option value="4">钻石会员</Option>
</Select>
<Select
className={style.select}
value={searchForm.applySource}
onChange={val =>
setSearchForm({ ...searchForm, applySource: val })
}
>
<Option value="">申请来源(全部)</Option>
<Option value="1">WEB企业商城申请</Option>
<Option value="2">H5企业商城申请</Option>
<Option value="3">WEB渠道商城申请</Option>
<Option value="4">H5渠道商城申请</Option>
<Option value="5">商户代录入</Option>
<Option value="6">渠道代录入</Option>
</Select>
<Select
className={style.select}
value={searchForm.outSideStatus}
onChange={val =>
setSearchForm({ ...searchForm, outSideStatus: val })
}
>
<Option value="">外部状态(全部)</Option>
<Option value="1">待审核</Option>
<Option value="2">审核通过</Option>
<Option value="3">审核不通过</Option>
</Select>
<Select
className={style.select}
value={searchForm.insideStatus}
onChange={val =>
setSearchForm({ ...searchForm, insideStatus: val })
}
>
<Option value="">内部状态(全部)</Option>
<Option value="1">待提交审核</Option>
<Option value="2">待审核</Option>
<Option value="3">审核通过</Option>
<Option value="4">审核不通过</Option>
</Select>
<Select
className={style.select}
value={searchForm.TimeRange}
onChange={val =>
setSearchForm({ ...searchForm, TimeRange: val })
}
>
<Option value="">时间范围(全部)</Option>
<Option value="1">今天</Option>
<Option value="2">一周内</Option>
<Option value="3">一个月内</Option>
<Option value="4">三个月内</Option>
<Option value="5">六个月内</Option>
<Option value="6">一年内</Option>
<Option value="7">一年前</Option>
</Select>
</Col>
</Row>
) : (
''
)}
</Row>
} }
/> />
</Card> </Card>
......
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const auditSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
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}}',
},
},
search: {
type: 'string',
'x-component': 'Search',
'x-mega-props': {},
'x-component-props': {
placeholder: '搜索',
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
},
properties: {
memberType: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
roleId: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
level: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
source: {
type: 'string',
'x-component-props': {
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: '查询',
},
},
},
},
},
},
},
};
...@@ -2,24 +2,12 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react'; ...@@ -2,24 +2,12 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react';
import { history } from 'umi'; import { history } from 'umi';
import { Tabs, Badge, Button, Card, Row, Col, message, Upload } from 'antd'; import { Tabs, Badge, Button, Card, Row, Col, message, Upload } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { import { SaveOutlined } from '@ant-design/icons';
ContainerOutlined,
PlusOutlined,
SaveOutlined,
} from '@ant-design/icons';
import { createFormActions } from '@formily/antd'; import { createFormActions } from '@formily/antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import {
IFormFilter,
IButtonFilter,
} from 'god/dist/src/standard-table/TableController';
import ReutrnEle from '@/components/ReturnEle'; import ReutrnEle from '@/components/ReturnEle';
import styles from './index.less';
import NiceForm from '@/components/NiceForm'; import NiceForm from '@/components/NiceForm';
import { initDetailSchema } from './schema'; import { initDetailSchema } from './schema';
import style from './index.less';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
const { TabPane } = Tabs; const { TabPane } = Tabs;
...@@ -27,19 +15,7 @@ const { TabPane } = Tabs; ...@@ -27,19 +15,7 @@ const { TabPane } = Tabs;
const addSchemaAction = createFormActions(); const addSchemaAction = createFormActions();
const addMember: React.FC<any> = props => { const addMember: React.FC<any> = props => {
const ref = useRef({}); const ref = useRef<any>({});
const selectList: any = [
{
label: '',
// (
// <>
// <img src={ChinaImg} style={{ width: 24, height: 17 }} /> +86
// </>
// )
value: '1',
},
];
/* 会员类型、会员角色、会员等级、注册手机号选项 */ /* 会员类型、会员角色、会员等级、注册手机号选项 */
const [memberItems, setMemberItems] = useState<any>({}); const [memberItems, setMemberItems] = useState<any>({});
......
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import { history } from 'umi'; import { history } from 'umi';
import { import { Space, Dropdown, Button, Card, Menu, Popconfirm } from 'antd';
Tooltip, import { DeleteOutlined, PlusOutlined, DownOutlined } from '@ant-design/icons';
Input,
Select,
Button,
Card,
Dropdown,
Menu,
Row,
Col,
Popconfirm,
} from 'antd';
import {
PlusOutlined,
EyeOutlined,
UpOutlined,
DeleteOutlined,
DownOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god'; import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less'; import { createFormActions } from '@formily/antd';
import EyePreview from '@/components/EyePreview';
import NiceForm from '@/components/NiceForm';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { importSchema } from './schema';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import UploadModal from '@/components/UploadModal'; import UploadModal from '@/components/UploadModal';
import { PublicApi } from '@/services/api';
const { Option } = Select; const formActions = createFormActions();
const data = [ // 模拟请求
{ const fetchData = async (params: any) => {
key: '1', const res = await PublicApi.getMemberMaintenancePage(params);
id: '1', return res.data;
level: '1', };
name: '温州隆昌皮具有限公司',
type: '企业会员',
role: '供应商',
applyTime: '2020-05-12 08:08',
status: '正常',
externalStatus: '待提交',
},
{
key: '2',
id: '2',
level: '2',
name: '温州隆昌皮具有限公司',
type: '企业会员',
role: '供应商',
applyTime: '2020-05-12 08:08',
status: '正常',
externalStatus: '待提交',
},
{
key: '3',
id: '3',
level: '3',
name: '温州隆昌皮具有限公司',
type: '企业会员',
role: '供应商',
applyTime: '2020-05-12 08:08',
status: '正常',
externalStatus: '待提交',
},
];
const memberImport: React.FC<{}> = () => { const memberImport: React.FC<{}> = () => {
const ref = useRef({}); const ref = useRef<any>({});
let [isSearch, setIsSearch] = useState(false); const [searchForm, setSearchForm] = useState<any>({
const [searchForm, setSearchForm] = useState({ innerStatus: 0, // 内部状态
memberIdorName: '', outerStatus: 0, // 外部状态
memberType: '', status: 0, // 会员状态
memberRole: '', timeRange: 0, // 申请时间
memberLevel: '', startDate: '', // 申请开始时间
applySource: '', endDate: '', // 申请结束时间
insideStatus: '',
outSideStatus: '',
memberStatus: '',
TimeRange: '',
}); });
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]); const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const columns: ColumnType<any>[] = [ const columns: ColumnType<any>[] = [
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'memberId',
align: 'center', align: 'center',
key: 'id', key: 'memberId',
}, },
{ {
title: '会员名称', title: '会员名称',
dataIndex: 'name', dataIndex: 'name',
align: 'center', align: 'center',
key: 'name', key: 'name',
render: (text: any, record: any) => { render: (text: any, record: any) => (
return ( <EyePreview
<div className={style.nameCell}> url={`/memberCenter/memberAbility/manage/addMember?id=${record.id}&preview=1`}
<div >
className={style.nameCellTitle} {text}
onClick={() => </EyePreview>
history.push('/memberCenter/memberAbility/manage/addMember?type=check') ),
}
>
{text}&nbsp;
<EyeOutlined />
</div>
<div className={style[`levelIcon${record.level}`]}></div>
</div>
);
},
}, },
{ {
title: '会员类型', title: '会员类型',
...@@ -159,7 +105,9 @@ const memberImport: React.FC<{}> = () => { ...@@ -159,7 +105,9 @@ const memberImport: React.FC<{}> = () => {
<Button <Button
type="link" type="link"
onClick={() => onClick={() =>
history.push('/memberCenter/memberAbility/manage/addMember?type=change') history.push(
`/memberCenter/memberAbility/manage/addMember?id=${record.id}`,
)
} }
> >
编辑 编辑
...@@ -186,42 +134,47 @@ const memberImport: React.FC<{}> = () => { ...@@ -186,42 +134,47 @@ const memberImport: React.FC<{}> = () => {
onChange: (selectedRowKeys: any, selectedRows: any) => {}, onChange: (selectedRowKeys: any, selectedRows: any) => {},
}; };
// 模拟请求 // 初始化高级筛选选项
const fetchData = (params: any) => { const fetchSelectOptions = async () => {
return new Promise((resolve, reject) => { const { data } = await PublicApi.getMemberMaintenancePageitems();
const queryResult = data.find(v => v.key === params.keywords); return {
setTimeout(() => { memberType: fetchSomeOptions(data.memberTypes),
resolve({ roleId: fetchSomeOptions(data.memberRoles),
code: 200, level: fetchSomeOptions(data.memberLevels),
message: '', source: fetchSomeOptions(data.memberSource),
data: queryResult ? [queryResult] : data, };
});
}, 1000);
});
}; };
const handleTableChange = (filters: any) => { const fetchSomeOptions = data => {
console.log(filters); return data.map(v => ({ label: v.text, value: v.id }));
};
const handleSee = (record: any) => {};
const handleSearch = () => {
//@ts-ignore
ref.current.reload();
};
const handleReset = () => {
for (let key in searchForm) {
searchForm[key] = '';
}
setSearchForm({ ...searchForm });
}; };
const handleMenuClick = (e: any) => { const handleMenuClick = (e: any) => {
console.log('menu', e); console.log('menu', e);
}; };
const controllerBtns = (
<Space>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() =>
history.push('/memberCenter/memberAbility/manage/addMember')
}
>
新建
</Button>
<Button onClick={() => setVisibleModal(true)}>导入</Button>
<Dropdown.Button
overlay={menu}
trigger={['click']}
icon={<DownOutlined />}
>
更多
</Dropdown.Button>
</Space>
);
return ( return (
<Card> <Card>
<StandardTable <StandardTable
...@@ -230,172 +183,27 @@ const memberImport: React.FC<{}> = () => { ...@@ -230,172 +183,27 @@ const memberImport: React.FC<{}> = () => {
currentRef={ref} currentRef={ref}
rowSelection={rowSelection} rowSelection={rowSelection}
fetchTableData={(params: any) => fetchData(params)} fetchTableData={(params: any) => fetchData(params)}
onChange={handleTableChange}
controlRender={ controlRender={
<Row> <NiceForm
<Col className={style.col} span={8}> actions={formActions}
<Button onSubmit={values => ref.current.reload(values)}
type="primary" expressionScope={{
onClick={() => controllerBtns,
history.push('/memberCenter/memberAbility/manage/addMember?type=add') }}
} effects={($, actions) => {
> useStateFilterSearchLinkageEffect(
<PlusOutlined /> $,
新建 actions,
</Button> 'search',
<Button FORM_FILTER_PATH,
className={style.importBtn} );
onClick={() => setVisibleModal(true)} useAsyncInitSelect(
> ['memberType', 'roleId', 'level', 'source'],
导入 fetchSelectOptions,
</Button> );
<Dropdown.Button }}
overlay={menu} schema={importSchema}
trigger={['click']} />
icon={<DownOutlined />}
>
更多
</Dropdown.Button>
</Col>
<Col
className={style.col}
span={12}
offset={4}
style={{ textAlign: 'right' }}
>
<Tooltip
trigger={['focus']}
placement="top"
title={<span>输入ID、会员名称&nbsp;&nbsp;进行搜索</span>}
>
<Input.Search
style={{ width: '232px' }}
value={searchForm.memberIdorName}
placeholder="搜索"
onChange={e =>
setSearchForm({
...searchForm,
memberIdorName: e.target.value,
})
}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button
className={style.importBtn}
onClick={() => setIsSearch((isSearch = !isSearch))}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
{isSearch ? (
<Row className={style.subRow}>
<Col className={style.subCol}>
<Select
className={style.select}
value={searchForm.memberType}
onChange={val =>
setSearchForm({ ...searchForm, memberType: val })
}
>
<Option value="">会员类型(全部)</Option>
<Option value="1">企业会员</Option>
<Option value="2">个人会员</Option>
<Option value="3">渠道企业会员</Option>
<Option value="4">渠道个人会员</Option>
</Select>
<Select
className={style.select}
value={searchForm.memberRole}
onChange={val =>
setSearchForm({ ...searchForm, memberRole: val })
}
>
<Option value="">会员角色(全部)</Option>
<Option value="1">供应商</Option>
<Option value="2">采购商</Option>
<Option value="3">加工企业</Option>
<Option value="4">金融服务商</Option>
<Option value="5">物流服务商</Option>
<Option value="6">渠道供应商</Option>
<Option value="7">渠道采购商</Option>
</Select>
<Select
className={style.select}
value={searchForm.memberLevel}
onChange={val =>
setSearchForm({ ...searchForm, memberLevel: val })
}
>
<Option value="">会员等级(全部)</Option>
<Option value="1">青铜会员</Option>
<Option value="2">白银会员</Option>
<Option value="3">黄金会员</Option>
<Option value="4">钻石会员</Option>
</Select>
<Select
className={style.select}
value={searchForm.applySource}
onChange={val =>
setSearchForm({ ...searchForm, applySource: val })
}
>
<Option value="">申请来源(全部)</Option>
<Option value="1">WEB企业商城申请</Option>
<Option value="2">H5企业商城申请</Option>
<Option value="3">WEB渠道商城申请</Option>
<Option value="4">H5渠道商城申请</Option>
<Option value="5">商户代录入</Option>
<Option value="6">渠道代录入</Option>
</Select>
<Select
className={style.select}
value={searchForm.outSideStatus}
onChange={val =>
setSearchForm({ ...searchForm, outSideStatus: val })
}
>
<Option value="">外部状态(全部)</Option>
<Option value="1">待审核</Option>
<Option value="2">审核通过</Option>
<Option value="3">审核不通过</Option>
</Select>
<Select
className={style.select}
value={searchForm.insideStatus}
onChange={val =>
setSearchForm({ ...searchForm, insideStatus: val })
}
>
<Option value="">内部状态(全部)</Option>
<Option value="1">待提交审核</Option>
<Option value="2">待审核</Option>
<Option value="3">审核通过</Option>
<Option value="4">审核不通过</Option>
</Select>
<Select
className={style.select}
value={searchForm.TimeRange}
onChange={val =>
setSearchForm({ ...searchForm, TimeRange: val })
}
>
<Option value="">时间范围(全部)</Option>
<Option value="1">今天</Option>
<Option value="2">一周内</Option>
<Option value="3">一个月内</Option>
<Option value="4">三个月内</Option>
<Option value="5">六个月内</Option>
<Option value="6">一年内</Option>
<Option value="7">一年前</Option>
</Select>
</Col>
</Row>
) : (
''
)}
</Row>
} }
/> />
<UploadModal <UploadModal
......
...@@ -2,57 +2,103 @@ import React from 'react'; ...@@ -2,57 +2,103 @@ import React from 'react';
import { ISchema } from '@formily/antd'; import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const'; import { FORM_FILTER_PATH } from '@/formSchema/const';
export const maintianSchema: ISchema = { export const importSchema: ISchema = {
type: 'object', type: 'object',
properties: { properties: {
megaLayout: { megaLayout: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'mega-layout',
properties: { properties: {
search: { topLayout: {
type: 'string', type: 'object',
'x-component': 'Search', 'x-component': 'mega-layout',
'x-mega-props': {},
'x-component-props': { 'x-component-props': {
placeholder: '请输入仓位名称', grid: true,
},
properties: {
ctl: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{controllerBtns}}',
},
},
search: {
type: 'string',
'x-component': 'Search',
'x-mega-props': {},
'x-component-props': {
placeholder: '搜索',
},
},
}, },
}, },
[FORM_FILTER_PATH]: { [FORM_FILTER_PATH]: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'flex-layout',
visible: false,
'x-component-props': { 'x-component-props': {
inline: true, rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
}, },
properties: { properties: {
productName: { memberType: {
type: 'string', type: 'string',
'x-component-props': { 'x-component-props': {
placeholder: '商品名称', placeholder: '请选择',
defaultValue: 0,
}, },
enum: [],
}, },
productId: { roleId: {
type: 'string', type: 'string',
'x-component-props': { 'x-component-props': {
placeholder: '商品ID', placeholder: '请选择',
defaultValue: 0,
}, },
enum: [],
}, },
category: { level: {
type: 'string', type: 'string',
'x-component-props': { 'x-component-props': {
placeholder: '请选择品类', placeholder: '请选择',
defaultValue: 0,
}, },
enum: [], enum: [],
}, },
brand: { source: {
type: 'string', type: 'string',
'x-component-props': { 'x-component-props': {
placeholder: '请选择品牌', placeholder: '请选择',
defaultValue: 0,
}, },
enum: [], 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: { submit: {
'x-component': 'Submit', 'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': { 'x-component-props': {
children: '查询', children: '查询',
}, },
...@@ -64,8 +110,6 @@ export const maintianSchema: ISchema = { ...@@ -64,8 +110,6 @@ export const maintianSchema: ISchema = {
}, },
}; };
const registryPhone = <></>;
const getCompnentValue = (elements: any) => { const getCompnentValue = (elements: any) => {
let components = {}; let components = {};
for (let item of elements) { for (let item of elements) {
......
...@@ -44,7 +44,6 @@ ...@@ -44,7 +44,6 @@
.subCol { .subCol {
width : 100%; width : 100%;
text-align: right;
.select { .select {
width : 160px; width : 160px;
......
import React, { ReactNode, useState, useEffect, useRef } from 'react'; import React, { ReactNode, useState, useEffect, useRef } from 'react';
import { history } from 'umi'; import { history } from 'umi';
import { import { Button, Card, Modal } from 'antd';
Row, import { ClockCircleOutlined } from '@ant-design/icons';
Col,
Tooltip,
Input,
Select,
Button,
Card,
Dropdown,
Menu,
Popconfirm,
Modal,
Space,
} from 'antd';
import {
PlusOutlined,
DeleteOutlined,
EyeOutlined,
ClockCircleOutlined,
UpOutlined,
DownOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god'; import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import { import {
SchemaForm, SchemaForm,
SchemaMarkupField as Field, SchemaMarkupField as Field,
createFormActions, createFormActions,
Submit,
Reset,
} from '@formily/antd'; } from '@formily/antd';
import { FormMegaLayout, Input as oInput } from '@formily/antd-components'; import { FormMegaLayout, Input } from '@formily/antd-components';
import moment from 'moment';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
import style from './index.less';
import UploadModal from '@/components/UploadModal'; import UploadModal from '@/components/UploadModal';
import { timeRange } from '@/utils/index'; import { timeRange } from '@/utils/index';
import EyePreview from '@/components/EyePreview';
import NiceForm from '@/components/NiceForm';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { maintianSchema } from './schema';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
const { Option } = Select; const formActions = createFormActions();
const actions = createFormActions(); // 模拟请求
const fetchData = async (params: any) => {
const res = await PublicApi.getMemberMaintenancePage(params);
return res.data;
};
const memberMaintain: React.FC<[]> = () => { const memberMaintain: React.FC<[]> = () => {
const ref = useRef<any>({}); const ref = useRef<any>({});
const [isFirst, setIsFirst] = useState(false);
const [isSearch, setIsSearch] = useState(false);
const [searchName, setSearchName] = useState('');
const [searchForm, setSearchForm] = useState<any>({ const [searchForm, setSearchForm] = useState<any>({
roleId: 0, // id
memberType: 0, // 会员类型
level: 0, // 会员等级
source: 0, // 注册来源
innerStatus: 0, // 内部状态 innerStatus: 0, // 内部状态
outerStatus: 0, // 外部状态 outerStatus: 0, // 外部状态
status: 0, // 会员状态 status: 0, // 会员状态
...@@ -59,12 +38,14 @@ const memberMaintain: React.FC<[]> = () => { ...@@ -59,12 +38,14 @@ const memberMaintain: React.FC<[]> = () => {
startDate: '', // 申请开始时间 startDate: '', // 申请开始时间
endDate: '', // 申请结束时间 endDate: '', // 申请结束时间
}); });
const [searchItem, setSearchItem] = useState<any>({});
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [modalState, setModalState] = useState({ const [modalState, setModalState] = useState({
visibleModal: false, visibleModal: false,
title: '', title: '',
}); });
const [filterOptions, setFilterOptions] = useState({
status: [],
});
const [currentItem, setCurrentItem] = useState<any>({}); const [currentItem, setCurrentItem] = useState<any>({});
const defaultColumns: ColumnType<any>[] = [ const defaultColumns: ColumnType<any>[] = [
...@@ -79,24 +60,13 @@ const memberMaintain: React.FC<[]> = () => { ...@@ -79,24 +60,13 @@ const memberMaintain: React.FC<[]> = () => {
dataIndex: 'name', dataIndex: 'name',
align: 'center', align: 'center',
key: 'name', key: 'name',
render: (text: any, record: any) => { render: (text: any, record: any) => (
return ( <EyePreview
<div className={style.nameCell}> url={`/memberCenter/memberAbility/manage/addMember?id=${record.id}&preview=1`}
<div >
className={style.nameCellTitle} {text}
onClick={() => </EyePreview>
history.push( ),
'/memberCenter/memberAbility/manage/addMember?type=check',
)
}
>
{text}&nbsp;
<EyeOutlined />
</div>
<div className={style[`levelIcon${record.level}`]}></div>
</div>
);
},
}, },
{ {
title: '会员类型', title: '会员类型',
...@@ -135,7 +105,7 @@ const memberMaintain: React.FC<[]> = () => { ...@@ -135,7 +105,7 @@ const memberMaintain: React.FC<[]> = () => {
dataIndex: 'status', dataIndex: 'status',
align: 'center', align: 'center',
key: 'memberStatus', key: 'memberStatus',
filters: [], filters: [{ text: '1', value: '1' }],
filteredValue: searchForm.memberStatus || ['0'], filteredValue: searchForm.memberStatus || ['0'],
render: (text: any, record: any) => { render: (text: any, record: any) => {
let component: ReactNode = null; let component: ReactNode = null;
...@@ -238,105 +208,31 @@ const memberMaintain: React.FC<[]> = () => { ...@@ -238,105 +208,31 @@ const memberMaintain: React.FC<[]> = () => {
}, },
]; ];
const menu = (
<Menu onClick={e => handleMenuClick(e)}>
<Menu.Item key="1" icon={<DeleteOutlined />}>
删除导入批次
</Menu.Item>
</Menu>
);
const [columns, setColumns] = useState<any[]>(defaultColumns); const [columns, setColumns] = useState<any[]>(defaultColumns);
// 模拟请求 // const handleSearch = (params: any, filter: any) => {
const fetchData = (params: any) => { // let obj = {
return new Promise((resolve, reject) => { // ...searchForm,
PublicApi.getMemberMaintenancePage({ // status: filter.memberStatus || 0,
...searchForm, // outerStatus: filter.outerStatus || 0,
name: params.name || '', // innerStatus: filter.innerStatus || 0,
current: params.current, // };
pageSize: params.pageSize, // setSearchForm(obj);
}).then(res => { // };
resolve(res.data);
});
});
};
const advancedFilter = (
<Button
style={{ marginRight: '16px' }}
onClick={() => setIsSearch(!isSearch)}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button>
);
// 初始化表头筛选项接收的数据类型
const processData = (data: any) => {
for (let elem of data) {
elem.value = elem.id;
}
};
const handleSearch = (params: any, filter: any) => { // 初始化高级筛选选项
let obj = { const fetchSelectOptions = async () => {
...searchForm, const { data } = await PublicApi.getMemberMaintenancePageitems();
status: filter.memberStatus || 0, return {
outerStatus: filter.outerStatus || 0, memberType: fetchSomeOptions(data.memberTypes),
innerStatus: filter.innerStatus || 0, roleId: fetchSomeOptions(data.memberRoles),
level: fetchSomeOptions(data.memberLevels),
source: fetchSomeOptions(data.memberSource),
}; };
setSearchForm(obj);
}; };
useEffect(() => { const fetchSomeOptions = data => {
if (!isFirst) return; return data.map(v => ({ label: v.text, value: v.id }));
let timeRanges = timeRange(searchForm.timeRange);
setIsFirst(false);
setSearchForm({
...searchForm,
startDate: timeRanges.st,
endDate: timeRanges.et,
});
}, [searchForm.timeRange]);
useEffect(() => {
if (!isFirst) return setIsFirst(true);
ref.current.reload();
}, [searchForm]);
useEffect(() => {
PublicApi.getMemberMaintenancePageitems().then(res => {
Promise.all([
processData(res.data.memberStatus),
processData(res.data.innerStatus),
processData(res.data.outerStatus),
setSearchItem(res.data),
]).then(() => {
defaultColumns.find((target: any) => {
if (target.filters) {
target.filters = res.data[target.key];
}
});
setColumns([...defaultColumns]);
});
});
}, ['searchItem']);
const handleReset = () => {
let searchKey = {
roleId: 0,
name: '',
memberType: 0,
level: 0,
source: 0,
innerStatus: 0,
outerStatus: 0,
status: 0,
timeRange: 0,
startDate: '',
endDate: '',
};
setSearchForm({ ...searchKey });
}; };
const handleSubmit = (values: any, type: string) => { const handleSubmit = (values: any, type: string) => {
...@@ -366,219 +262,42 @@ const memberMaintain: React.FC<[]> = () => { ...@@ -366,219 +262,42 @@ const memberMaintain: React.FC<[]> = () => {
<StandardTable <StandardTable
tableProps={{ tableProps={{
rowKey: 'memberId', rowKey: 'memberId',
onChange: (pagination: any, filter: any) => // onChange: (pagination: any, filter: any) =>
handleSearch(pagination, filter), // handleSearch(pagination, filter),
}} }}
columns={columns} columns={columns}
currentRef={ref} currentRef={ref}
fetchTableData={(params: any) => fetchData(params)} fetchTableData={(params: any) => fetchData(params)}
controlRender={ controlRender={
<Row> <NiceForm
<Col className={style.col} span={8}> actions={formActions}
<Space> onSubmit={values => ref.current.reload(values)}
<Button effects={($, actions) => {
type="primary" useStateFilterSearchLinkageEffect(
onClick={() => $,
history.push( actions,
'/memberCenter/memberAbility/manage/addMember?type=add', 'search',
) FORM_FILTER_PATH,
} );
> useAsyncInitSelect(
<PlusOutlined /> ['memberType', 'roleId', 'level', 'source'],
新建 fetchSelectOptions,
</Button> );
<Button onClick={() => setVisibleModal(true)}>导入</Button> }}
<Dropdown.Button schema={maintianSchema}
overlay={menu} />
trigger={['click']}
icon={<DownOutlined />}
>
更多
</Dropdown.Button>
</Space>
</Col>
<Col
className={style.col}
span={12}
offset={4}
style={{ textAlign: 'right' }}
>
<Tooltip
trigger={['focus']}
placement="top"
title={<span>输入ID、会员名称&nbsp;&nbsp;进行搜索</span>}
>
<Input.Search
style={{ width: '232px' }}
value={searchName}
placeholder="搜索"
onChange={e => setSearchName(e.target.value)}
onSearch={val => setSearchForm({ ...searchForm, name: val })}
/>
</Tooltip>
<Button
style={{ margin: '0 16px' }}
onClick={() => setIsSearch(!isSearch)}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
{isSearch ? (
<Row className={style.subRow}>
<Col className={style.subCol}>
<Select
className={style.select}
value={searchForm.memberType}
onChange={val =>
setSearchForm({ ...searchForm, memberType: val })
}
>
{searchItem.memberTypes &&
searchItem.memberTypes.map((item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
})}
</Select>
<Select
className={style.select}
value={searchForm.roleId}
onChange={val =>
setSearchForm({ ...searchForm, roleId: val })
}
>
{searchItem.memberRoles &&
searchItem.memberRoles.map((item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
})}
</Select>
<Select
className={style.select}
value={searchForm.level}
onChange={val =>
setSearchForm({ ...searchForm, level: val })
}
>
{searchItem.memberLevels &&
searchItem.memberLevels.map(
(item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
},
)}
</Select>
<Select
className={style.select}
value={searchForm.source}
onChange={val =>
setSearchForm({ ...searchForm, source: val })
}
>
{searchItem.memberSource &&
searchItem.memberSource.map(
(item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
},
)}
</Select>
{/* <Select
className={style.select}
value={searchForm.innerStatus}
onChange={val =>
setSearchForm({ ...searchForm, innerStatus: val })
}
>
{searchItem.innerStatus &&
searchItem.innerStatus.map((item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
})}
</Select>
<Select
className={style.select}
value={searchForm.outerStatus}
onChange={val =>
setSearchForm({ ...searchForm, outerStatus: val })
}
>
{searchItem.outerStatus &&
searchItem.outerStatus.map((item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
})}
</Select>
<Select
className={style.select}
value={searchForm.status}
onChange={val =>
setSearchForm({ ...searchForm, status: val })
}
>
{searchItem.memberStatus &&
searchItem.memberStatus.map(
(item: any, index: string) => {
return (
<Option value={item.id} key={index}>
{item.text}
</Option>
);
},
)}
</Select> */}
<Select
className={style.select}
value={searchForm.timeRange}
onChange={val =>
setSearchForm({ ...searchForm, timeRange: val })
}
>
<Option value={0}>时间范围(全部)</Option>
<Option value={1}>今天</Option>
<Option value={2}>一周内</Option>
<Option value={3}>一个月内</Option>
<Option value={4}>三个月内</Option>
<Option value={5}>六个月内</Option>
<Option value={6}>一年内</Option>
<Option value={7}>一年前</Option>
</Select>
</Col>
</Row>
) : (
''
)}
</Row>
} }
/> />
<Modal <Modal
title={modalState.title} title={modalState.title}
visible={modalState.visibleModal} visible={modalState.visibleModal}
onOk={() => actions.submit()} onOk={() => formActions.submit()}
onCancel={() => handleSubmit(false, 'cancel')} onCancel={() => handleSubmit(false, 'cancel')}
destroyOnClose destroyOnClose
> >
<SchemaForm <SchemaForm
components={{ TextArea: oInput.TextArea }} components={{ TextArea: Input.TextArea }}
actions={actions} actions={formActions}
onSubmit={values => handleSubmit(values, 'confirm')} onSubmit={values => handleSubmit(values, 'confirm')}
> >
<FormMegaLayout labelAlign="top"> <FormMegaLayout labelAlign="top">
......
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const maintianSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
search: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
full: true,
autoRow: true,
columns: 6,
},
properties: {
memberType: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
roleId: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
level: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
enum: [],
},
source: {
type: 'string',
'x-component-props': {
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: '查询',
},
},
},
},
},
},
},
};
...@@ -12,26 +12,34 @@ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilte ...@@ -12,26 +12,34 @@ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilte
import { FORM_FILTER_PATH } from '@/formSchema/const'; import { FORM_FILTER_PATH } from '@/formSchema/const';
import { billsSchema } from './schema'; import { billsSchema } from './schema';
import UploadModal from '@/components/UploadModal'; import UploadModal from '@/components/UploadModal';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
const formActions = createFormActions(); const formActions = createFormActions();
// 模拟请求
const fetchData = async (params: any) => {
const res = await PublicApi.getWarehouseInvoicesList(params);
return res.data;
};
const Bills: React.FC<{}> = () => { const Bills: React.FC<{}> = () => {
const ref = useRef<any>({}); const ref = useRef<any>({});
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]); const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [moreVisible, setMoreVisible] = useState(false); const [moreVisible, setMoreVisible] = useState(false);
const [searchKey, setSearchKey] = useState({
invoicesNo: '', // 获取单据类型
invoicesType: '', const fetchInvoicesType = async () => {
invoicesAbstract: '', const { data } = await PublicApi.getWarehouseInvoicesTypeAll();
memberName: '', return data.map(v => ({ label: v.name, value: v.id }));
inventoryId: '', };
startTransactionTime: '',
endTransactionTime: '', // 获取对应仓库
orderNo: '', const fetchInventory = async () => {
state: '', const { data } = await PublicApi.getWarehouseWarehouseAll();
}); return data.map(v => ({ label: v.name, value: v.id }));
};
const menu = ( const menu = (
<Menu onClick={e => handleBatchDel(e)}> <Menu onClick={e => handleBatchDel(e)}>
...@@ -108,8 +116,8 @@ const Bills: React.FC<{}> = () => { ...@@ -108,8 +116,8 @@ const Bills: React.FC<{}> = () => {
dataIndex: 'state', dataIndex: 'state',
key: 'state', key: 'state',
filters: [ filters: [
{ text: 'Male', value: 'male' }, { text: '未审核', value: 1 },
{ text: 'Female', value: 'female' }, { text: '已审核', value: 2 },
], ],
filterMultiple: false, filterMultiple: false,
render: (text: any, record: any) => ( render: (text: any, record: any) => (
...@@ -149,21 +157,6 @@ const Bills: React.FC<{}> = () => { ...@@ -149,21 +157,6 @@ const Bills: React.FC<{}> = () => {
}, },
]; ];
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
PublicApi.getWarehouseInvoicesList({
...searchKey,
current: params.current,
pageSize: params.pageSize,
}).then(res => {
resolve(res.data);
});
});
};
const handleAdd = () => {};
const rowSelection = { const rowSelection = {
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {}, onChange: (selectedRowKeys: any, selectedRows: any) => {},
...@@ -213,9 +206,11 @@ const Bills: React.FC<{}> = () => { ...@@ -213,9 +206,11 @@ const Bills: React.FC<{}> = () => {
useStateFilterSearchLinkageEffect( useStateFilterSearchLinkageEffect(
$, $,
actions, actions,
'search', 'invoicesNo',
FORM_FILTER_PATH, FORM_FILTER_PATH,
); );
useAsyncSelect('invoicesType', fetchInvoicesType);
useAsyncSelect('inventory', fetchInventory);
}} }}
schema={billsSchema} schema={billsSchema}
/> />
...@@ -223,7 +218,7 @@ const Bills: React.FC<{}> = () => { ...@@ -223,7 +218,7 @@ const Bills: React.FC<{}> = () => {
/> />
<UploadModal <UploadModal
visibleModal={visibleModal} visibleModal={visibleModal}
fileText="会员资料" fileText="单据资料"
onCancel={() => setVisibleModal(false)} onCancel={() => setVisibleModal(false)}
/> />
</Card> </Card>
......
...@@ -22,33 +22,28 @@ export const billsSchema: ISchema = { ...@@ -22,33 +22,28 @@ export const billsSchema: ISchema = {
children: '{{controllerBtns}}', children: '{{controllerBtns}}',
}, },
}, },
search: { invoicesNo: {
type: 'string', type: 'string',
'x-component': 'Search', 'x-component': 'Search',
'x-mega-props': {}, 'x-mega-props': {},
'x-component-props': { 'x-component-props': {
placeholder: '请输入仓位名称', placeholder: '搜索',
}, },
}, },
}, },
}, },
[FORM_FILTER_PATH]: { [FORM_FILTER_PATH]: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'flex-layout',
visible: false,
'x-component-props': { 'x-component-props': {
grid: true, rowStyle: {
full: true, flexWrap: 'nowrap',
autoRow: true, },
columns: 8, colStyle: {
marginLeft: 20,
},
}, },
properties: { properties: {
invoicesNo: {
type: 'string',
'x-component-props': {
placeholder: '单据号',
},
},
invoicesAbstract: { invoicesAbstract: {
type: 'string', type: 'string',
'x-component-props': { 'x-component-props': {
...@@ -81,19 +76,29 @@ export const billsSchema: ISchema = { ...@@ -81,19 +76,29 @@ export const billsSchema: ISchema = {
}, },
enum: [], enum: [],
}, },
state: { transactionTime: {
type: 'string', type: 'string',
'x-component-props': { 'x-component-props': {
placeholder: '请选择单据状态', placeholder: '请选择交易时间',
}, },
enum: [], enum: [
{ label: '今天', value: 1 },
{ label: '一周内', value: 2 },
{ label: '一个月内', value: 3 },
{ label: '三个月内', value: 4 },
{ label: '六个月内', value: 5 },
{ label: '一年内', value: 6 },
{ label: '一年前', value: 7 },
],
}, },
time: { submit: {
type: 'string', 'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': { 'x-component-props': {
placeholder: '请选择交易时间', children: '查询',
}, },
enum: [],
}, },
}, },
}, },
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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