Skip to content

J
jinfa-platform
Commit 20aabded authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 完善 会员规则新增表单 UI

parent db3712c1
Hide whitespace changes
Inline Side-by-side
Showing with 836 additions and 62 deletions
src/pages/member/memberFlowRule/components/FlowRuleForm/components/ComingConfigTable/index.tsx 0 → 100644
View file @ 20aabded
/*
* @Author: XieZhiXiong
* @Date: 2021-05-28 15:24:56
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-28 15:24:57
* @Description:
*/
import React from 'react';
import { Popconfirm, Button } from 'antd';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
const ComingConfigTable = () => {
const columns: EditableColumns[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
},
{
title: '中文名称',
dataIndex: 'name',
},
{
title: '分组信息',
dataIndex: 'groupName',
},
{
title: '操作',
dataIndex: 'option',
width: '20%',
align: 'center',
render: (text: any, record: any) => (
<>
<Popconfirm
title="确定要删除吗？"
okText="是"
cancelText="否"
onConfirm={() => {}}
>
<Button
type="link"
danger
>
删除
</Button>
</Popconfirm>
</>
),
},
];
return (
<PolymericTable
rowKey="id"
dataSource={[
{
id: 1,
name: '企业名称',
groupName: '营业执照信息',
},
{
id: 2,
name: '住所',
groupName: '营业执照信息',
},
{
id: 3,
name: '企业类型',
groupName: '营业执照信息',
},
]}
columns={columns}
loading={false}
pagination={null}
/>
);
};
export default ComingConfigTable;
src/pages/member/memberFlowRule/components/FlowRuleForm/components/ComingCtl/index.tsx 0 → 100644
View file @ 20aabded
/*
* @Author: XieZhiXiong
* @Date: 2021-05-28 15:19:56
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-28 15:48:37
* @Description: 入库资料操作组
*/
import React, { useState, useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Space, Button, Drawer } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import { createFormActions, useSchemaProps } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import NiceForm from '@/components/NiceForm';
import querySchema from './schema';
const formActions = createFormActions();
const fetchListData = async (params: any) => {
const payload = { ...params };
const res = await PublicApi.getMemberAbilitySubPage(payload);
if (res.code === 1000) {
// return res.data;
return {
data: [
{
validateId: 1,
id: 1,
roleName: '白银会员',
roleType: '白银会员2',
},
{
validateId: 2,
id: 2,
roleName: '白银会员3',
roleType: '白银会员3',
},
{
validateId: 3,
id: 3,
roleName: '白银会员4',
roleType: '白银会员4',
},
],
totalCount: 3,
};
}
return [];
};
const ComingCtl: React.FC = () => {
const [visibleDrawer, setVisibleDrawer] = useState(false);
const ref = useRef<any>({});
const schemaProps = useSchemaProps();
const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'validateId' });
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: '会员角色',
dataIndex: 'roleName',
},
{
title: '角色类型',
dataIndex: 'roleType',
},
{
title: '会员类型',
dataIndex: 'memberTypeName',
},
{
title: '业务类型',
dataIndex: 'memberTypeName',
},
];
const handleVisibleDrawer = (flag: boolean) => {
setVisibleDrawer(!!flag);
};
const handleConfirm = () => {
console.log('RowCtlRowCtlRowCtl', RowCtl);
// props.mutators.change([]);
};
return (
<div>
<Space size="middle">
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => handleVisibleDrawer(true)}
>
新建入库资料
</Button>
<Button>
预览入库资料
</Button>
</Space>
<Drawer
title="选择入库资料"
width={1000}
onClose={() => handleVisibleDrawer(false)}
visible={visibleDrawer}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button onClick={() => handleVisibleDrawer(false)} style={{ marginRight: 16 }}>
取 消
</Button>
<Button onClick={handleConfirm} type="primary">
确 定
</Button>
</div>
}
>
<StandardTable
tableProps={{
rowKey: 'validateId',
}}
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
actions={formActions}
onSubmit={values => ref.current.reload(values)}
effects={($, actions) => {
}}
schema={querySchema}
/>
}
/>
</Drawer>
</div>
);
};
export default ComingCtl;
src/pages/member/memberFlowRule/components/FlowRuleForm/components/ComingCtl/schema.ts 0 → 100644
View file @ 20aabded
/*
* @Author: XieZhiXiong
* @Date: 2021-05-27 18:01:56
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-28 11:07:18
* @Description:
*/
import { ISchema } from '@formily/antd';
const querySchema: ISchema = {
type: 'object',
properties: {
MAGE_LAYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
properties: {
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
tip: '输入 中文名称 进行搜索',
advanced: false,
align: 'flex-left',
},
},
},
},
},
};
export default querySchema;
src/pages/member/memberFlowRule/components/FlowRuleForm/components/FlowListFormItem/index.less 0 → 100644
View file @ 20aabded
@import '~antd/es/style/themes/default.less';
.list {
padding: 0;
margin: 0;
&-item {
padding: 8px 14px;
width: 549px;
margin-bottom: 20px;
position: relative;
line-height: 28px;
list-style: none;
border: 1px solid #EEF0F3;
color: #303133;
background-color: #FFFFFF;
cursor: pointer;
&-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: @margin-sm;
}
&-desc {
color: @text-color-secondary;
}
&.active {
border: 1px solid @primary-color;
background-color: color(~`colorPalette('@{primary-color}', 0.04) `);
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid @primary-color;
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
}
&.disabled {
cursor: not-allowed;
}
&.hide {
display: none;
}
}
}
.more {
text-align: center;
cursor: pointer;
}
\ No newline at end of file
src/pages/member/memberFlowRule/components/FlowRuleForm/components/FlowListFormItem/index.tsx 0 → 100644
View file @ 20aabded
/*
* @Author: XieZhiXiong
* @Date: 2021-05-28 11:20:47
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-28 14:59:42
* @Description: 流程列表 Form Item
*/
import React, { useState } from 'react';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import StatusTag, { StatusTagProps } from '@/components/StatusTag';
import styles from './index.less';
interface AddressItem {
/**
* 数据id
*/
id: string;
/**
* 标题
*/
title: string;
/**
* 流程
*/
flow: string;
/**
* 描述
*/
description: string;
};
interface IProps extends Pick<StatusTagProps, 'type'> {
/**
* 值
*/
value: AddressItem;
/**
* 列表数据
*/
dataSource: AddressItem[];
/**
* 默认展示的条数，默认值 3
*/
showCount?: number;
/**
* 数据选择改变触发事件
*/
onChange: (id: string) => {};
/**
* 是否是禁用的，默认 false
*/
disabled?: boolean;
/**
* 是否是只读的，默认 false
*/
readOnly?: boolean;
};
const FlowListFormItem = (props: IProps) => {
const {
value,
showCount = 3,
dataSource = [],
onChange,
disabled = false,
readOnly,
type,
} = props;
const [showMore, setShowMore] = useState(false);
const showDataSource = !showMore && !readOnly ? [...dataSource].splice(0, showCount) : dataSource;
const handleToogleMore = () => {
setShowMore(!showMore)
};
const handleSelectItem = record => {
if (onChange && !disabled) {
onChange(record);
}
};
return (
<div className={styles.flowList}>
<ul className={styles.list}>
{showDataSource.map(item => (
<li
className={classNames(styles['list-item'], {
[styles.active]: item.id === (value && value.id),
[styles.disabled]: disabled,
[styles.hide]: readOnly && item.id !== (value && value.id),
})}
onClick={() => handleSelectItem(item)}
key={item.id}
>
<div className={styles['list-item-head']}>
<div className={styles['list-item-title']}>
{item.title}
</div>
<StatusTag title={item.flow} type={type} />
</div>
<div className={styles['list-item-desc']}>
{item.description}
</div>
</li>
))}
</ul>
{(dataSource.length > showCount) && !readOnly && (
<div
className={styles.more}
onClick={handleToogleMore}
>
{!showMore ? '显示更多' : '隐藏更多'}
{!showMore ? <CaretDownOutlined /> : <CaretUpOutlined />}
</div>
)}
</div>
);
};
FlowListFormItem.defaultProps = {
showCount: 3,
disabled: false,
readOnly: false,
};
export default FlowListFormItem;
src/pages/member/memberFlowRule/components/FlowRuleForm/components/MemberRoleFormItem/index.tsx
View file @ 20aabded
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2021-05-27 17:12:55
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 18:12:16
* @LastEditTime: 2021-05-28 11:16:25
* @Description: 适用会员角色 Form Item
*/
import React, { useState, useRef } from 'react';
......@@ -14,6 +14,7 @@ import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import { createFormActions, useSchemaProps } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import NiceForm from '@/components/NiceForm';
import querySchema from './schema';
import styles from './index.less';
......@@ -24,7 +25,30 @@ const fetchListData = async (params: any) => {
const payload = { ...params };
const res = await PublicApi.getMemberAbilitySubPage(payload);
if (res.code === 1000) {
return res.data;
// return res.data;
return {
data: [
{
validateId: 1,
id: 1,
roleName: '白银会员',
roleType: '白银会员2',
},
{
validateId: 2,
id: 2,
roleName: '白银会员3',
roleType: '白银会员3',
},
{
validateId: 3,
id: 3,
roleName: '白银会员4',
roleType: '白银会员4',
},
],
totalCount: 3,
};
}
return [];
};
......@@ -35,6 +59,7 @@ const MemberRoleFormItem = (props) => {
const ref = useRef<any>({});
const schemaProps = useSchemaProps();
const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'validateId', type: 'radio' });
const columns: ColumnType<any>[] = [
{
......@@ -47,7 +72,7 @@ const MemberRoleFormItem = (props) => {
},
{
title: '角色类型',
dataIndex: 'roleName',
dataIndex: 'roleType',
},
{
title: '会员类型',
......@@ -64,7 +89,8 @@ const MemberRoleFormItem = (props) => {
};
const handleConfirm = () => {
console.log('RowCtlRowCtlRowCtl', RowCtl);
// props.mutators.change([]);
};
return (
......@@ -113,6 +139,7 @@ const MemberRoleFormItem = (props) => {
}}
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
......
src/pages/member/memberFlowRule/components/FlowRuleForm/components/MemberRoleFormItem/schema.ts
View file @ 20aabded
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2021-05-27 18:01:56
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 19:37:45
* @LastEditTime: 2021-05-28 11:07:18
* @Description:
*/
import { ISchema } from '@formily/antd';
......@@ -10,7 +10,7 @@ import { ISchema } from '@formily/antd';
const querySchema: ISchema = {
type: 'object',
properties: {
mageLayout: {
MAGE_LAYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
properties: {
......@@ -19,8 +19,9 @@ const querySchema: ISchema = {
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
tip: '输入 会员角色名称 进行搜索',
tip: '输入 中文名称 进行搜索',
advanced: false,
align: 'flex-left',
},
},
},
......
src/pages/member/memberFlowRule/components/FlowRuleForm/components/PlatformConfigTable/index.tsx 0 → 100644
View file @ 20aabded
/*
* @Author: XieZhiXiong
* @Date: 2021-05-28 15:06:41
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-28 15:15:47
* @Description: 平台注册资料
*/
import React from 'react';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
const PlatformConfigTable = () => {
const columns: EditableColumns[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
},
{
title: '中文名称',
dataIndex: 'name',
},
{
title: '分组信息',
dataIndex: 'groupName',
},
];
return (
<PolymericTable
rowKey="id"
dataSource={[
{
id: 1,
name: '企业名称',
groupName: '营业执照信息',
},
{
id: 2,
name: '住所',
groupName: '营业执照信息',
},
{
id: 3,
name: '企业类型',
groupName: '营业执照信息',
},
]}
columns={columns}
loading={false}
pagination={null}
/>
);
};
export default PlatformConfigTable;
src/pages/member/memberFlowRule/components/FlowRuleForm/components/Search/index.less 0 → 100644
View file @ 20aabded
.search {
display: flex;
justify-content: flex-end;
}
\ No newline at end of file
src/pages/member/memberFlowRule/components/FlowRuleForm/components/Search/index.tsx 0 → 100644
View file @ 20aabded
/*
* @Author: XieZhiXiong
* @Date: 2021-05-28 14:30:06
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-28 15:04:40
* @Description: 搜索组件
*/
import React from 'react';
import { Input, Button } from 'antd';
import styles from './index.less';
interface IProps {
/**
* 值
*/
value: string,
/**
* 输入改变触发事件
*/
onChange: (value: string) => void,
/**
* 搜索事触发事件
*/
onSearch: (value: string) => void,
/**
* 点击重置按钮触发事件
*/
onReset?: () => void,
/**
* 是否在点击重置按钮的时候调用 onSearch 事件，默然为 true
*/
searchOnResetAction?: boolean,
}
const MySearch: React.FC<IProps> = (props: IProps) => {
const {
value,
onChange,
onSearch,
onReset,
searchOnResetAction,
...rest
} = props;
const handleChange = (e) => {
console.log('e', e)
if (onChange) {
onChange(e.target.value);
}
};
const handleSearch = (next) => {
if (onSearch) {
onSearch(next);
}
};
const handleReset = () => {
if (searchOnResetAction) {
onSearch(value);
}
if (onReset) {
onReset();
}
};
return (
<div className={styles.search}>
<Input.Search
style={{ width: '200px', marginRight: 16 }}
value={props.value || ''}
onChange={handleChange}
onSearch={handleSearch}
{...rest}
/>
<Button
onClick={handleReset}
>
重置
</Button>
</div>
);
};
MySearch.defaultProps = {
onReset: undefined,
searchOnResetAction: true,
};
export default MySearch;
src/pages/member/memberFlowRule/components/FlowRuleForm/index.tsx
View file @ 20aabded
......@@ -2,16 +2,16 @@
* @Author: XieZhiXiong
* @Date: 2021-05-27 16:13:05
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 16:13:06
* @LastEditTime: 2021-05-28 15:14:38
* @Description:
*/
import React, { useState, useEffect, useRef } from 'react';
import { history, Prompt } from 'umi';
import { Badge, Button, Card, Spin, message } from 'antd';
import { Button, Card, Spin, Tooltip, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import { SaveOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import { Select, Input } from '@formily/antd-components'
import { Checkbox } from '@formily/antd-components';
import { merge } from 'rxjs';
import { usePageStatus } from '@/hooks/usePageStatus';
import ReutrnEle from '@/components/ReturnEle';
......@@ -23,6 +23,11 @@ import { PublicApi } from '@/services/api';
import { GetMemberAbilitySubGetResponse } from '@/services/MemberApi';
import formSchema from './schema';
import MemberRoleFormItem from './components/MemberRoleFormItem';
import FlowListFormItem from './components/FlowListFormItem';
import Search from './components/Search';
import PlatformConfigTable from './components/PlatformConfigTable';
import ComingCtl from './components/ComingCtl';
import ComingConfigTable from './components/ComingConfigTable';
const formActions = createFormActions();
const {
......@@ -156,6 +161,24 @@ const FlowRuleForm: React.FC<MemberFormProps> = ({
}
};
const createRichTextUtils = () => {
return {
text(...args) {
return React.createElement('span', {}, ...args)
},
help(text, offset = 3) {
return React.createElement(
Tooltip,
{ title: text },
<QuestionCircleOutlined
style={{ margin: '0 3px', cursor: 'default', marginLeft: offset }}
size={16}
/>
)
},
}
}
return (
<Spin spinning={infoLoading}>
<PageHeaderWrapper
......@@ -184,6 +207,16 @@ const FlowRuleForm: React.FC<MemberFormProps> = ({
initialValues={{}}
components={{
MemberRoleFormItem,
FlowListFormItem,
MySearch: Search,
ComingCtl,
Checkbox,
CheckboxGroup: Checkbox.Group
}}
expressionScope={{
...createRichTextUtils(),
PlatformConfigTable: <PlatformConfigTable />,
ComingConfigTable: <ComingConfigTable />,
}}
effects={($, actions) => {
onFormInputChange$().subscribe(() => {
......
src/pages/member/memberFlowRule/components/FlowRuleForm/schema.ts
View file @ 20aabded
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2021-05-27 16:13:26
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-27 17:24:01
* @LastEditTime: 2021-05-28 15:45:23
* @Description:
*/
import { ISchema } from '@formily/antd';
......@@ -59,7 +59,7 @@ const formSchema: ISchema = {
type: 'object',
'x-component': 'TabPane',
'x-component-props': {
tab: '渠道信息',
tab: '会员入库流程',
},
properties: {
MEGA_LAYOUT1: {
......@@ -67,64 +67,173 @@ const formSchema: ISchema = {
'x-component': 'Mega-Layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 12,
labelAlign: 'left',
full: true,
wrapperCol: 8,
labelAlign: 'left',
},
properties: {
channelLevel: {
type: 'text',
title: '渠道级别',
comingRule: {
type: 'string',
required: true,
title: '流程选择',
'x-component': 'FlowListFormItem',
'x-component-props': {
dataSource: [
{
id: 1,
title: 'XGG1',
flow: '会员入库流程',
description: '1-确认入库',
},
{
id: 2,
title: 'XGG1',
flow: '会员入库流程',
description: '1-确认入库',
},
{
id: 3,
title: 'XGG1',
flow: '会员入库流程',
description: '1-确认入库',
},
],
type: 'success',
},
},
channelTypeId: {
type: 'string',
enum: [],
title: '渠道类型',
required: true,
},
},
},
},
'tab-3': {
type: 'object',
'x-component': 'TabPane',
'x-component-props': {
tab: '平台注册资料',
},
properties: {
MEGA_LAYOUT1: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelCol: 8,
wrapperCol: 10,
labelAlign: 'left',
grid: true,
},
properties: {
usePlatformConfig: {
type: 'string',
title: "{{ text('平台注册资料', help('会员在平台注册时已填写的资料')) }}",
'x-component': 'CheckboxGroup',
default: '1',
enum: [
{ label: '使用平台注册资料(默认)', value: '1' },
]
},
searchPlatformConfig: {
type: 'object',
'x-component': 'MySearch',
'x-component-props': {
placeholder: '搜索',
},
},
},
},
platformConfigTable: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{PlatformConfigTable}}',
},
},
},
},
'tab-4': {
type: 'object',
'x-component': 'TabPane',
'x-component-props': {
tab: '入库资料',
},
properties: {
MEGA_LAYOUT1: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
grid: true,
},
properties: {
comingCtl: {
type: 'object',
'x-component': 'ComingCtl',
},
searchComingConfig: {
type: 'object',
'x-component': 'MySearch',
'x-component-props': {
placeholder: '搜索',
},
},
areas: {
type: 'array',
title: '代理城市',
'x-component': 'CustomAddArray',
default: [],
items: {
type: 'object',
properties: {
pcode: {
type: 'string',
enum: [],
'x-component-props': {
allowClear: true,
},
},
ccode: {
type: 'string',
enum: [],
'x-component-props': {
allowClear: true,
},
}
}
}
},
remark: {
},
},
comingConfigTable: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{ComingConfigTable}}',
},
},
},
},
'tab-5': {
type: 'object',
'x-component': 'TabPane',
'x-component-props': {
tab: '会员表更流程',
},
properties: {
MEGA_LAYOUT1: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 8,
labelAlign: 'left',
},
properties: {
changeRule: {
type: 'string',
title: '渠道描述',
required: true,
'x-component': 'TextArea',
required: true,
title: '流程选择',
'x-component': 'FlowListFormItem',
'x-component-props': {
rows: 4,
placeholder: '最大200个字符，100个汉字',
dataSource: [
{
id: 1,
title: 'XGG1',
flow: '会员表更流程',
description: '1-确认入库',
},
{
id: 2,
title: 'XGG1',
flow: '会员表更流程',
description: '1-确认入库',
},
{
id: 3,
title: 'XGG1',
flow: '会员表更流程',
description: '1-确认入库',
},
{
id: 4,
title: 'XGG4',
flow: '会员表更流程',
description: '1-确认入库',
},
],
type: 'warning',
},
'x-rules': [
{
limitByte: true, // 自定义校验规则
maxByte: 200,
}
],
},
},
},
......
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