Commit 1330ee03 authored by tjy's avatar tjy

替换所有页面为schema写法

parent ab2785d4
......@@ -24,6 +24,13 @@ const MemberRoute = {
component: '@/pages/member/memberImport/index',
},
{
path: '/memberCenter/memberAbility/manage/importDetail',
name: 'importDetail',
key: 'importDetail',
hideInMenu: true,
component: '@/pages/member/components/memberDetail/index',
},
{
path: '/memberCenter/memberAbility/manage/addMember',
name: 'addMember',
key: 'addMember',
......@@ -37,6 +44,13 @@ const MemberRoute = {
component: '@/pages/member/memberMaintain/index',
},
{
path: '/memberCenter/memberAbility/manage/maintianDetail',
name: 'maintianDetail',
key: 'maintianDetail',
hideInMenu: true,
component: '@/pages/member/components/memberDetail/index',
},
{
path: '/memberCenter/memberAbility/manage/memberPrSubmit',
name: 'memberPrSubmit',
key: 'memberPrSubmit',
......
.flex-bet {
display : flex;
justify-content: space-between;
align-items : center;
}
.checkbox-tree-list {
display : flex;
flex-direction: column;
padding : 0;
li {
align-items: center;
height : 48px;
}
}
\ No newline at end of file
import React, { RefObject, useRef } from 'react';
import { Button, Checkbox } from 'antd';
import { useSelections } from '@umijs/hooks';
import { findTreeKeys } from '@/utils';
import './index.less';
export interface CheckboxTreeProps {
title?: React.ReactNode;
checkedNodes?: any[];
handleChange?(e?);
handleSubmit?();
showSave?;
disabled?: boolean;
actions?: RefObject<any>;
}
const CheckboxTree: React.FC<CheckboxTreeProps> = props => {
const {
title,
checkedNodes = [],
actions,
handleChange,
disabled,
showSave,
handleSubmit,
} = props;
const checkedKeys = findTreeKeys(checkedNodes, 'id');
const {
selected,
setSelected,
toggleAll,
toggle,
isSelected,
allSelected,
unSelectAll,
selectAll,
} = useSelections(checkedKeys, []);
if (actions) {
actions.current.selected = selected;
actions.current.setSelected = setSelected;
actions.current.getSelected = () => selected;
}
const toggleSelectAll = () => {
checkChange();
if (allSelected) {
unSelectAll();
} else {
selectAll();
}
};
const checkChange = (e?) => {
handleChange && handleChange(e);
};
return (
<div>
{title && (
<div className="flex-bet">
<div>{props.title}</div>
<div>
<Button onClick={toggleSelectAll} type="link" disabled={disabled}>
{allSelected ? '取消全选' : '全选'}
</Button>
{showSave && (
<Button onClick={handleSubmit} type="link" disabled={disabled}>
保存
</Button>
)}
</div>
</div>
)}
<ul className="checkbox-tree-list">
{checkedNodes &&
checkedNodes.map((v, i) => {
return (
<li key={v.id}>
<Checkbox
onChange={checkChange}
disabled={disabled}
onClick={() => toggle(v.id)}
checked={isSelected(v.id)}
>
{v.buttonName}
</Checkbox>
</li>
);
})}
</ul>
</div>
);
};
CheckboxTree.defaultProps = {
checkedNodes: [],
};
export default CheckboxTree;
This diff is collapsed.
......@@ -57,7 +57,9 @@ export default {
'menu.memberAbility.memberManage': '会员管理',
'menu.memberAbility.memberManage.memberImport': '会员导入',
'menu.memberAbility.memberManage.addMember': '新增会员',
'menu.memberAbility.memberManage.importDetail': '会员导入详情',
'menu.memberAbility.memberManage.memberMaintain': '会员维护',
'menu.memberAbility.memberManage.maintianDetail': '会员详情',
'menu.memberAbility.memberManage.memberPrSubmit': '待提交审核',
'menu.memberAbility.memberManage.auditPrSubmit': '待提交审核详情',
'menu.memberAbility.memberManage.memberPr1': '待审核(一级)',
......
This diff is collapsed.
import React, { useState, useRef, useEffect } from 'react';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import { Row, Col, Tabs, Steps, Badge } from 'antd';
import TabTree, {
useTreeActions,
createTreeActions,
} from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import { useTreeTabs } from '@/hooks/useTreeTabs';
import styles from './index.less';
interface PageProps {
detailData: any;
}
const { TabPane } = Tabs;
const { Step } = Steps;
const treeActions = createTreeActions();
const AuthDetail: React.FC<PageProps> = (props: any) => {
const { detailData } = props;
const { pageStatus, id } = usePageStatus();
const {
treeData,
handleSelect,
nodeRecord,
getTreeMaps,
setIsEditForm,
isEditForm,
setTreeData,
} = useTreeTabs({
// fetchItemDetailData: Promise.resolve({data: detailData})
});
useEffect(() => {
setTreeData(detailData?.auths);
}, []);
const actionRef = useRef({});
const formInitValue = nodeRecord ? getTreeMaps(nodeRecord.key) : null;
const [formValue, setFormValue] = useState<any>(null);
// 编辑和预览模式下需回显数据
const fetchRoleDetail = id => {
// 10秒缓存
// const res = await PublicApi.getRoleDetails(
// { id },
// { useCache: true, ttl: 10 * 1000 },
// );
// return res;
};
// 储存的按钮数据
const [buttonInfos, setButtonInfos] = useState<any>([]);
useEffect(() => {
if (!id) return;
// fetchRoleDetail(id).then(res => {
// const { data } = res;
// setFormValue(data);
// });
}, []);
useEffect(() => {
if (formInitValue) {
// 显示右侧checkbox
setButtonInfos(formInitValue.buttons || []);
// 回显右侧checkbox的值
// if (actionRef.current.setSelected) {
// PublicApi.getMenuRoleButtonList({
// memberId: id,
// menuId: formInitValue.id,
// }).then(res => {
// const { data } = res;
// actionRef.current.setSelected(data.ids);
// });
// }
}
}, [getTreeMaps]);
return (
<Row>
<Col className={styles['authCol']} span={15}>
<TabTree
title="菜单列表"
customKey="id"
checkable
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
disabled={pageStatus === PageStatus.PREVIEW}
/>
</Col>
<Col className={styles['authCol']} span={8} offset={1}>
<CheckboxTree
actions={actionRef}
disabled={pageStatus === PageStatus.PREVIEW}
handleChange={e => setIsEditForm(true)}
checkedNodes={buttonInfos}
title="菜单按钮访问权限"
/>
</Col>
</Row>
);
};
export default AuthDetail;
import React, { useState } from 'react';
import { Row, Col, Tabs, Steps, Badge } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import styles from './index.less';
interface PageProps {
detailData: any;
}
const { TabPane } = Tabs;
const { Step } = Steps;
const BaseDetail: React.FC<PageProps> = props => {
const { detailData } = props;
const [fActived, setfActived] = useState('1');
const [lActived, setlActived] = useState('1');
const columns: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '状态',
dataIndex: 'statusName',
align: 'center',
key: 'statusName',
render: (text: any, record: any) => <Badge color="#FFC400" text={text} />,
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'operateTime',
align: 'center',
key: 'operateTime',
},
{
title: '审核意见',
dataIndex: 'reason',
align: 'center',
key: 'reason',
},
];
const innerColumns: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '操作人',
dataIndex: 'operator',
align: 'center',
key: 'operator',
},
{
title: '部门',
dataIndex: 'org',
align: 'center',
key: 'org',
},
{
title: '职位',
dataIndex: 'jobTitle',
align: 'center',
key: 'jobTitle',
},
{
title: '状态',
dataIndex: 'innerStatusName',
align: 'center',
key: 'innerStatusName',
render: (text: any, record: any) => <Badge color="#FFC400" text={text} />,
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'operateTime',
align: 'center',
key: 'operateTime',
},
{
title: '审核意见',
dataIndex: 'reason',
align: 'center',
key: 'reason',
},
];
const renderInfoTemplate = (params: any) => {
const { type, item } = params;
return (
<>
<div className={styles['mainCol-title']}>{item.groupName}</div>
<div className={styles['mainCol-row']}>
{item.elements.map((items: any, indexs: string) => {
return (
<div className={styles['mainCol-row-col']} key={indexs}>
<div className={styles['mainCol-row-col-option']}>
{items.fieldCNName}
</div>
<div className={styles['mainCol-row-col-option']}>
{items.fieldValue}
</div>
</div>
);
})}
</div>
</>
);
};
return (
<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}
fetchTableData={(params: any) =>
Promise.resolve({ data: detailData?.history })
}
/>
</div>
</TabPane>
<TabPane tab="内部单据流转记录" key="2">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={innerColumns}
fetchTableData={(params: any) =>
Promise.resolve({ data: detailData?.innerHistory })
}
/>
</div>
</TabPane>
</Tabs>
</Col>
</Row>
);
};
export default BaseDetail;
import React, { useState } from 'react';
import { Row, Col, Tabs, Steps, Badge } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import styles from './index.less';
interface PageProps {
detailData: any;
}
const EquitiesDetail: React.FC<PageProps> = props => {
return <>123</>;
};
export default EquitiesDetail;
.nameCell {
text-align: left;
.nameCellTitle {
color : @main-color;
cursor: pointer;
}
.levelIcon1 {
width : 100%;
height : 16px;
background : url("/static/imgs/level1@2x.png") no-repeat;
background-size: 54px 16px;
margin-top : 8px;
}
.levelIcon2 {
width : 100%;
height : 16px;
background : url("/static/imgs/level2@2x.png") no-repeat;
background-size: 54px 16px;
margin-top : 8px;
}
.levelIcon3 {
width : 100%;
height : 16px;
background : url("/static/imgs/level3@2x.png") no-repeat;
background-size: 54px 16px;
margin-top : 8px;
}
}
.col {
margin-bottom: 16px;
&:nth-last-of-type(1) {
text-align: right;
}
}
.headerTop {
display : flex;
align-items: center;
font-size : 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
&-prefix {
width : 48px;
height : 48px;
line-height : 48px;
border-radius : 4px;
border : 1px solid #DFE1E6;
color : #fff;
text-align : center;
background-color: #8777D9;
}
&-name {
color : #172B4D;
margin: 0 8px 0 12px;
}
}
.mainCol {
background-color: #fff;
margin-bottom : 24px;
padding : 0 24px;
box-sizing : border-box;
&-title {
font-size : 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color : #172B4D;
padding : 20px 0;
}
&:nth-last-of-type(1) {
margin: 0;
}
&-row {
display : flex;
flex-wrap : wrap;
padding-bottom: 16px;
&-col {
display: flex;
width : calc(100% / 2);
padding: 16px 0;
&-option {
flex : 1;
font-size : 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color : #6B778C;
&:nth-last-of-type(1) {
flex : 3;
padding-right: 20px;
box-sizing : border-box;
color : #172B4D;
}
}
}
}
&-rows {
display : flex;
padding-bottom: 16px;
&-cols {
flex: 1;
.cols-main {
display: flex;
padding: 16px 0;
&:nth-last-of-type(1) {
padding-bottom: 0;
}
&-options {
flex : 1;
font-size : 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color : #6B778C;
&:nth-last-of-type(1) {
flex : 3;
padding-right: 20px;
box-sizing : border-box;
color : #172B4D;
}
}
}
}
}
&-chart {
display : flex;
padding-bottom: 28px;
&-main {
width: 30%;
&:nth-last-of-type(1) {
width : 70%;
background-color: greenyellow
}
&-card1 {
width : 338px;
height : 190px;
box-shadow : 0px 1px 2px 0px rgba(23, 43, 77, 0.12);
border-radius: 8px;
box-sizing : border-box;
padding : 32px 24px 16px;
background : url("/static/imgs/card1@2x.png") center center no-repeat;
h2 {
color : #A47268;
letter-spacing: 2px;
margin-bottom : 38px;
}
.progress {
width: 218px;
&-score {
display : flex;
justify-content: space-between;
}
}
}
&-card2 {
width : 338px;
height : 190px;
box-shadow : 0px 1px 2px 0px rgba(23, 43, 77, 0.12);
border-radius: 8px;
box-sizing : border-box;
padding : 32px 24px 16px;
background : url("/static/imgs/card2@2x.png") center center no-repeat;
h2 {
color : #5B6F92;
letter-spacing: 2px;
margin-bottom : 38px;
}
.progress {
width: 218px;
&-score {
display : flex;
justify-content: space-between;
}
}
}
&-card3 {
width : 338px;
height : 190px;
box-shadow : 0px 1px 2px 0px rgba(23, 43, 77, 0.12);
border-radius: 8px;
box-sizing : border-box;
padding : 32px 24px 16px;
background : url("/static/imgs/card3@2x.png") center center no-repeat;
h2 {
color : #987326;
letter-spacing: 2px;
margin-bottom : 38px;
}
.progress {
width: 218px;
&-score {
display : flex;
justify-content: space-between;
}
}
}
&-card4 {
width : 338px;
height : 190px;
box-shadow : 0px 1px 2px 0px rgba(23, 43, 77, 0.12);
border-radius: 8px;
box-sizing : border-box;
padding : 32px 24px 16px;
background : url("/static/imgs/card4@2x.png") center center no-repeat;
h2 {
color : #595B71;
letter-spacing: 2px;
margin-bottom : 38px;
}
.progress {
width: 218px;
&-score {
display : flex;
justify-content: space-between;
}
}
}
&-line {}
}
}
}
.authCol {
padding : 24px;
background-color: #fff;
}
.subRow {
width: 100%;
.subCol {
width : 100%;
text-align: right;
.select {
width : 160px;
margin : 0 0 16px 16px;
text-align: left;
&:nth-of-type(1) {
margin-left: 0;
}
}
}
}
.select {
width : 160px;
margin: 0 16px 16px 0;
&:nth-last-of-type(1) {
margin-right: 0;
}
}
.headerTop {
display : flex;
align-items: center;
span {
font-size : 14px;
font-weight: 400;
&:nth-last-of-type(1) {
font-size : 20px;
font-weight: 500;
color : #172B4D;
margin-left: 16px;
}
}
}
.saveBtn {
color : #fff;
background: @main-color
}
.required {
display : inline-block;
margin-right: 4px;
color : #ff4d4f;
font-size : 14px;
font-family : SimSun, sans-serif;
line-height : 1;
}
\ No newline at end of file
import React, { useState, useEffect, useRef, ReactNode } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { PageHeader, Tag, Badge, Tabs, Steps, Descriptions } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import styles from './index.less';
import BaseDetail from './baseDetail';
import AuthDetail from './authDetail';
import LevelDetail from './levelDetail';
import EquitiesDetail from './equitiesDetail';
import IntegrityDetail from './integrityDetail';
const { TabPane } = Tabs;
const { Step } = Steps;
const MemberDetail: React.FC<{}> = () => {
const { pageStatus, id } = usePageStatus();
const [hActived, setHActived] = useState('3');
const [detailData, setDetailData] = useState<any>({});
useEffect(() => {
const fetchDetailData = async () => {
const { data } = await PublicApi.getMemberValidateCommitDetail({
memberId: '2',
validateId: '63',
});
setDetailData(data);
};
fetchDetailData();
}, []);
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => window.history.back()}
title={
<>
<div className={styles['headerTop']}>
<div className={styles['headerTop-prefix']}>广</div>
<div className={styles['headerTop-name']}>
广州市极致皮具有限公司
</div>
<div className={styles[`levelIcon${'1'}`]}></div>
</div>
</>
}
footer={
<Tabs activeKey={hActived} onChange={val => setHActived(val)}>
<TabPane tab="基本信息" key="1" />
<TabPane tab="权限信息" key="2" />
<TabPane tab="等级信息" key="3" />
<TabPane tab="权益信息" key="4" />
<TabPane tab="诚信信息" key="5" />
</Tabs>
}
>
<Descriptions size="small" column={3} style={{ padding: '0 32px' }}>
<Descriptions.Item label="会员类型">{123}</Descriptions.Item>
<Descriptions.Item label="会员角色">{123}</Descriptions.Item>
<Descriptions.Item label="会员状态">
<Tag color="green"></Tag>
</Descriptions.Item>
<Descriptions.Item label="外部状态">
<Tag color="gold"></Tag>
</Descriptions.Item>
<Descriptions.Item label="内部状态">
<Badge color="#669EDE" text={123} />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
>
{hActived === '1' ? (
<BaseDetail detailData={detailData} />
) : hActived === '2' ? (
<AuthDetail detailData={detailData} />
) : hActived === '3' ? (
<LevelDetail detailData={detailData} />
) : hActived === '4' ? (
<EquitiesDetail detailData={detailData} />
) : (
<IntegrityDetail detailData={detailData} />
)}
</PageHeaderWrapper>
);
};
export default MemberDetail;
import React, { useState } from 'react';
import { Row, Col, Tabs, Steps, Badge } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import styles from './index.less';
interface PageProps {
detailData: any;
}
const IntegrityDetail: React.FC<PageProps> = props => {
return <>123</>;
};
export default IntegrityDetail;
import React, { useState } from 'react';
import { Row, Col, Progress, Form, Input } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import styles from './index.less';
interface PageProps {
detailData: any;
}
const LevelDetail: React.FC<PageProps> = props => {
const { detailData } = props;
return (
<Row>
<Col className={styles['mainCol']} span={24}>
<div className={styles['mainCol-title']}>会员等级</div>
<div className={styles['mainCol-chart']}>
<div className={styles['mainCol-chart-main']}>
<div
className={
styles[`mainCol-chart-main-card${detailData.level || '4'}`]
}
>
<h2>青铜会员</h2>
<div className={styles['progress']}>
<Progress
style={{ height: '4px' }}
strokeLinecap="square"
strokeColor={
detailData.level === '1'
? '#A47268'
: detailData.level === '2'
? '#576C8F'
: detailData.level === '3'
? '#B28525'
: '#595B71'
}
trailColor={
detailData.level === '1'
? '#E9BFA9'
: detailData.level === '2'
? '#ABC0DC'
: detailData.level === '3'
? '#D6C39D'
: '#A7AAC6'
}
showInfo={false}
percent={75}
/>
<div className={styles['progress-score']}>
<span>5000/15000</span>
<span>白银会员</span>
</div>
<div>当前活跃分</div>
</div>
</div>
</div>
<div className={styles['mainCol-chart-main']}>
<div className={styles['mainCol-chart-main-line']}>line</div>
</div>
</div>
</Col>
<Col className={styles['mainCol']} span={24}>
<div className={styles['mainCol-title']}>活跃分获取记录</div>
</Col>
</Row>
);
};
export default LevelDetail;
import React from 'react';
import MemberDetail from '../components/memberDetail';
const ImportDetail = () => {
return <MemberDetail />;
};
export default ImportDetail;
This diff is collapsed.
import React from 'react';
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const importSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
mageLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
......@@ -23,10 +22,9 @@ export const importSchema: ISchema = {
children: '{{controllerBtns}}',
},
},
name: {
cond: {
type: 'string',
'x-component': 'Search',
'x-mega-props': {},
'x-component-props': {
placeholder: '搜索',
},
......@@ -47,42 +45,31 @@ export const importSchema: ISchema = {
properties: {
memberType: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
default: 0,
enum: [],
'x-component-props': {},
},
roleId: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
default: 0,
enum: [],
'x-component-props': {},
},
level: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
default: 0,
enum: [],
'x-component-props': {},
},
source: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
default: 0,
enum: [],
'x-component-props': {},
},
timeRange: {
type: 'string',
'x-component-props': {
placeholder: '请选择',
defaultValue: 0,
},
default: 0,
enum: [
{ label: '时间范围(全部)', value: 0 },
{ label: '今天', value: 1 },
......@@ -93,6 +80,7 @@ export const importSchema: ISchema = {
{ label: '一年内', value: 6 },
{ label: '一年前', value: 7 },
],
'x-component-props': {},
},
submit: {
'x-component': 'Submit',
......@@ -110,6 +98,34 @@ export const importSchema: ISchema = {
},
};
export const auditModalSchema = props => {
let modalSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
},
properties: {
remark: {
type: 'string',
title: `会员${props.status === 1 ? '解冻' : '冻结'}原因`,
'x-component': 'textarea',
'x-component-props': {
placeholder: '在此输入你的内容,最长120个字符,60个汉字',
maxLength: 60,
},
'x-rules': [{ required: true, message: '请填写审核不通过原因' }],
},
},
},
},
};
return modalSchema;
};
const getCompnentValue = (elements: any) => {
let components = {};
for (let item of elements) {
......
import React, { ReactNode, useState, useRef, useEffect } from 'react';
import { history } from 'umi';
import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd';
import {
PlayCircleOutlined,
PauseCircleOutlined,
EyeOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import { PublicApi } from '@/services/api';
const data = [
{
key: '1',
id: '1',
level: '1',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 1,
},
{
key: '2',
id: '2',
level: '2',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 2,
},
{
key: '3',
id: '3',
level: '3',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 1,
},
{
key: '4',
id: '4',
level: '4',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 2,
},
];
const memberLevel: React.FC<[]> = () => {
const ref = useRef({});
const [keywords, setKeywords] = useState('');
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '会员等级',
dataIndex: 'level',
align: 'center',
key: 'level',
render: (text: any, record: any) => (
<div className={style[`levelIcon${record.level}`]}></div>
),
},
{
title: '会员等级标签',
dataIndex: 'levelTab',
align: 'center',
key: 'levelTab',
render: (text: any, record: any) => (
<span className={style.nameCellTitle} onClick={() => handleSee(record)}>
{text}&nbsp;
<EyeOutlined />
</span>
),
},
{
title: '会员等级类型',
dataIndex: 'levelType',
align: 'center',
key: 'levelType',
},
{
title: '升级分值标签',
dataIndex: 'scoreTab',
align: 'center',
key: 'scoreTab',
},
{
title: '会员角色名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '角色类型',
dataIndex: 'type',
align: 'center',
key: 'type',
},
{
title: '会员类型',
dataIndex: 'roleType',
align: 'center',
key: 'roleType',
},
{
title: '升级阈值',
dataIndex: 'thresvalue',
align: 'center',
key: 'thresvalue',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
key: 'status',
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<Popconfirm
title="确定要执行这个操作?"
onConfirm={confirm}
onCancel={cancel}
okText="是"
cancelText="否"
>
<Button
type="link"
onClick={() => handleModify(record)}
style={
record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
}
>
{record.status === 1 ? (
<>
<span>有效</span>
<PlayCircleOutlined />
</>
) : (
<>
<span>无效</span>
<PauseCircleOutlined />
</>
)}
</Button>
</Popconfirm>
);
return component;
},
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
render: (record: any) => (
<Button type="link" onClick={record => handleSet(record)}>
设置
</Button>
),
},
];
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
PublicApi.getMemberManageLevelPage({
cond: '',
current: params.current,
pageSize: params.pageSize,
}).then(res => {
resolve(res.data);
});
});
};
useEffect(() => {
console.log(keywords);
});
const handleSee = (record: any) => {};
const confirm = () => {
console.log('confirm');
};
const cancel = () => {
console.log('cancel');
};
const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据
console.log('执行状态修改', record);
};
const handleSearch = () => {};
const handleReset = () => {};
const handleSet = (record: any) => {
history.push('/memberAbility/manage/level/addEquity');
};
return (
<Card>
<StandardTable
tableProps={{ rowKey: 'id' }}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<Row>
<Col className={style.col} span={12} offset={12}>
<Tooltip
trigger={['focus']}
placement="top"
title={
<span>
输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索
</span>
}
>
<Input.Search
style={{ width: '232px' }}
value={keywords}
placeholder="搜索"
onChange={e => setKeywords(e.target.value)}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button className={style.resetBtn} onClick={() => handleReset()}>
重置
</Button>
</Col>
</Row>
}
/>
</Card>
);
};
export default memberLevel;
import React, { ReactNode, useState, useRef, useEffect } from 'react';
import React, { useRef } from 'react';
import { history } from 'umi';
import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd';
import {
PlayCircleOutlined,
PauseCircleOutlined,
EyeOutlined,
} from '@ant-design/icons';
import { Button, Card } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import { createFormActions } from '@formily/antd';
import EyePreview from '@/components/EyePreview';
import StatusSwitch from '@/components/StatusSwitch';
import NiceForm from '@/components/NiceForm';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { levelSchema } from './schema';
import { PublicApi } from '@/services/api';
import styles from './index.less';
const data = [
{
key: '1',
id: '1',
level: '1',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 1,
},
{
key: '2',
id: '2',
level: '2',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 2,
},
{
key: '3',
id: '3',
level: '3',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 1,
},
{
key: '4',
id: '4',
level: '4',
levelTab: '钻石会员',
levelType: '商户会员',
scoreTab: '交易分',
name: '采购商',
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 2,
},
];
const formActions = createFormActions();
const memberLevel: React.FC<[]> = () => {
const ref = useRef({});
const [keywords, setKeywords] = useState('');
const fetchData = async (params: any) => {
const res = await PublicApi.getMemberManageLevelPage(params);
return res.data;
};
const MemberLevel: React.FC<[]> = () => {
const ref = useRef<any>({});
const columns: ColumnType<any>[] = [
{
......@@ -83,148 +36,97 @@ const memberLevel: React.FC<[]> = () => {
align: 'center',
key: 'level',
render: (text: any, record: any) => (
<div className={style[`levelIcon${record.level}`]}></div>
<div className={styles[`levelIcon${record.level}`]}></div>
),
},
{
title: '会员等级标签',
dataIndex: 'levelTab',
dataIndex: 'levelTag',
align: 'center',
key: 'levelTab',
key: 'levelTag',
render: (text: any, record: any) => (
<span className={style.nameCellTitle} onClick={() => handleSee(record)}>
{text}&nbsp;
<EyeOutlined />
</span>
<EyePreview
url={`/memberCenter/memberAbility/manage/addEquity?id=${record.id}&preview=1`}
>
{text}
</EyePreview>
),
},
{
title: '会员等级类型',
dataIndex: 'levelType',
dataIndex: 'memberLevelType',
align: 'center',
key: 'levelType',
key: 'memberLevelType',
},
{
title: '升级分值标签',
dataIndex: 'scoreTab',
dataIndex: 'scoreTag',
align: 'center',
key: 'scoreTab',
key: 'scoreTag',
},
{
title: '会员角色名称',
dataIndex: 'name',
dataIndex: 'roleName',
align: 'center',
key: 'name',
key: 'roleName',
},
{
title: '角色类型',
dataIndex: 'type',
dataIndex: 'roleTypeName',
align: 'center',
key: 'type',
key: 'roleTypeName',
},
{
title: '会员类型',
dataIndex: 'roleType',
dataIndex: 'memberTypeName',
align: 'center',
key: 'roleType',
key: 'memberTypeName',
},
{
title: '升级阈值',
dataIndex: 'thresvalue',
dataIndex: 'levelUpPoint',
align: 'center',
key: 'thresvalue',
key: 'levelUpPoint',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
key: 'status',
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<Popconfirm
title="确定要执行这个操作?"
onConfirm={confirm}
onCancel={cancel}
okText="是"
cancelText="否"
>
<Button
type="link"
onClick={() => handleModify(record)}
style={
record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
}
>
{record.status === 1 ? (
<>
<span>有效</span>
<PlayCircleOutlined />
</>
) : (
<>
<span>无效</span>
<PauseCircleOutlined />
</>
)}
</Button>
</Popconfirm>
);
return component;
},
render: (text: any, record: any) => (
<StatusSwitch
handleConfirm={() => handleModify(record)}
record={record}
fieldNames="status"
/>
),
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
render: (record: any) => (
<Button type="link" onClick={record => handleSet(record)}>
render: (text: any, record: any) => (
<Button
type="link"
onClick={() =>
history.push(`/memberCenter/memberAbility/manage/addEquity?id=${record.id}`)
}
>
设置
</Button>
),
},
];
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
PublicApi.getMemberManageLevelPage({
cond: '',
current: params.current,
pageSize: params.pageSize,
}).then(res => {
resolve(res.data);
});
const handleModify = record => {
PublicApi.postMemberManageLevelStatus({
id: record.id,
status: record.status === 1 ? 0 : 1,
}).then(res => {
if (res.code === 1000) return ref.current.reload();
});
};
useEffect(() => {
console.log(keywords);
});
const handleSee = (record: any) => {};
const confirm = () => {
console.log('confirm');
};
const cancel = () => {
console.log('cancel');
};
const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据
console.log('执行状态修改', record);
};
const handleSearch = () => {};
const handleReset = () => {};
const handleSet = (record: any) => {
history.push('/memberAbility/manage/level/addEquity');
};
return (
<Card>
<StandardTable
......@@ -233,34 +135,26 @@ const memberLevel: React.FC<[]> = () => {
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<Row>
<Col className={style.col} span={12} offset={12}>
<Tooltip
trigger={['focus']}
placement="top"
title={
<span>
输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索
</span>
}
>
<Input.Search
style={{ width: '232px' }}
value={keywords}
placeholder="搜索"
onChange={e => setKeywords(e.target.value)}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button className={style.resetBtn} onClick={() => handleReset()}>
重置
</Button>
</Col>
</Row>
<NiceForm
actions={formActions}
onSubmit={values => ref.current.reload(values)}
effects={($, actions) => {
$('onFormInputChange').subscribe(state => {
ref.current.reload(state.values);
});
useStateFilterSearchLinkageEffect(
$,
actions,
'cond',
FORM_FILTER_PATH,
);
}}
schema={levelSchema}
/>
}
/>
</Card>
);
};
export default memberLevel;
export default MemberLevel;
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const levelSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUI: {
type: 'object',
'x-component': 'mega-layout',
properties: {
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
},
properties: {
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
},
},
},
},
},
},
},
};
This diff is collapsed.
import React from 'react';
import MemberDetail from '../components/memberDetail';
const MaintainDetail = () => {
return <MemberDetail />;
};
export default MaintainDetail;
......@@ -90,3 +90,191 @@ export const maintianSchema: ISchema = {
},
},
};
export const auditModalSchema = props => {
let modalSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
},
properties: {
remark: {
type: 'string',
title: `会员${props.status === 1 ? '解冻' : '冻结'}原因`,
'x-component': 'textarea',
'x-component-props': {
placeholder: '在此输入你的内容,最长120个字符,60个汉字',
maxLength: 60,
},
'x-rules': [{ required: true, message: '请填写审核不通过原因' }],
},
},
},
},
};
return modalSchema;
};
const getCompnentValue = (elements: any) => {
let components = {};
for (let item of elements) {
let xComponentProps =
item.fieldType === 'string'
? {
placeholder: item.fieldRemark,
}
: {
listType: 'card',
action: '/api/file/file/upload',
data: { fileType: 2 },
fileList: [],
onChange: file => console.log(file),
};
components[item.fieldName] = {
type: item.fieldType,
required: item.fieldEmpty === 0,
title: item.fieldCNName,
'x-component-props': xComponentProps,
};
}
return components;
};
export const initDetailSchema = (props: any) => {
let tabSchema = {
properties: {
'tab-1': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
tab: '基本信息',
},
properties: {
MEGA_LAYOUT1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 8,
labelAlign: 'left',
},
properties: {
memberTypeId: {
type: 'string',
required: true,
title: '会员类型',
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
roleId: {
type: 'string',
required: true,
title: '会员角色',
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
level: {
type: 'string',
required: true,
title: '会员等级',
enum: [],
'x-component-props': {
placeholder: '请选择',
},
},
MEGA_LAYOUT1_1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
label: '注册手机',
wrapperCol: 24,
required: true,
},
properties: {
MEGA_LAYOUT1_1_1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
full: true,
},
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,
},
},
},
},
},
memberEmail: {
type: 'string',
title: '邮箱',
'x-component-props': {},
},
},
},
},
},
},
};
if (Object.keys(props).length > 0) {
for (let [index, item] of props.groups.entries()) {
tabSchema.properties[`tab-${index + 2}`] = {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
tab: item.groupName,
},
properties: {
[`MEGA_LAYOUT${index + 2}`]: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 8,
labelAlign: 'left',
},
properties: getCompnentValue(item.elements),
},
},
};
}
}
let detailSchema = {
type: 'object',
properties: {
REPOSIT_TABS: {
type: 'object',
'x-component': 'tab',
'x-component-props': {},
...tabSchema,
},
},
};
const maintianDetailSchema: ISchema = detailSchema;
return maintianDetailSchema;
};
......@@ -2,7 +2,7 @@ import React from 'react';
import AuditDetail from '../components/auditDetail';
const auditPr = (props: any) => {
return <AuditDetail auditType="2" routeParams={props.location.query} />;
return <AuditDetail auditType="3" routeParams={props.location.query} />;
};
export default auditPr;
......@@ -2,7 +2,7 @@ import React from 'react';
import AuditDetail from '../components/auditDetail';
const auditPrConfirm = props => {
return <AuditDetail auditType="3" routeParams={props.location.query} />;
return <AuditDetail auditType="4" routeParams={props.location.query} />;
};
export default auditPrConfirm;
import React, { useState, useRef, ReactNode } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Input, Button } from 'antd';
import { ContainerOutlined } from '@ant-design/icons';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import {
IFormFilter,
IButtonFilter,
} from 'god/dist/src/standard-table/TableController';
import './index.less';
import { PublicApi } from '@/services/api';
const data = [
{
key: '1',
id: '1',
rule: 1,
explain: '完成交易订单后,按照交易订单金额的百分比记入获取的升级分值',
type: '商户会员',
score: '',
},
{
key: '2',
id: '2',
rule: 1,
explain: '完成交易订单后,按照交易订单金额的百分比记入获取的升级分值',
type: '渠道会员',
score: '',
},
{
key: '3',
id: '3',
rule: 2,
explain: '完成交易订单后,按照交易订单金额的百分比记入获取的升级分值',
type: '商户会员',
score: '',
},
{
key: '4',
id: '4',
rule: 3,
explain: '完成交易订单后,按照交易订单金额的百分比记入获取的升级分值',
type: '商户会员',
score: '',
},
];
const fetchData = async (params: any) => {
const res = await PublicApi.getMemberManageLevelRulePage(params);
return res.data;
};
const memberUpgradeRule: React.FC<[]> = () => {
const MemberUpgradeRule: React.FC<[]> = () => {
const ref = useRef({});
const columns: ColumnType<any>[] = [
......@@ -57,69 +23,67 @@ const memberUpgradeRule: React.FC<[]> = () => {
key: 'id',
},
{
title: '升级规则',
dataIndex: 'rule',
align: 'center',
key: 'rule',
render: (text: any, record: any) => (
<span>
{record.rule === 1 ? '交易' : record.rule === 2 ? '评价' : '登录'}
</span>
),
},
{
title: '升级规则说明',
dataIndex: 'explain',
title: '项目',
dataIndex: 'ruleName',
align: 'center',
key: 'explain',
key: 'ruleName',
render: (text: any, record: any) => <span>{text}</span>,
},
{
title: '适用会员等级类型',
dataIndex: 'type',
title: '项目说明',
dataIndex: 'remark',
align: 'center',
key: 'type',
key: 'remark',
},
{
title: '可获取的分值',
dataIndex: 'score',
dataIndex: 'point',
align: 'center',
key: 'score',
key: 'point',
render: (text: any, record: any) => {
let component: ReactNode = null;
component =
record.rule === 1 ? (
<Input addonAfter="%" defaultValue={record.score} />
record.id === 1 ? (
<Input
addonAfter="%"
value={record.point}
onChange={e => {
e.preventDefault();
record.point = e.target.value;
}}
/>
) : (
<Input defaultValue={record.score} />
<Input value={record.point} />
);
return component;
},
},
];
// 模拟请求
const fetchData = (params: any) => {
console.log(params);
return new Promise((resolve, reject) => {
PublicApi.getMemberManageLevelRulePage({
current: params.current,
pageSize: params.pageSize,
}).then(res => {
resolve(res.data);
});
});
};
const handleSubmit = () => {};
return (
<Card>
<StandardTable
tableProps={{ rowKey: 'id' }}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
</Card>
<PageHeaderWrapper
extra={
<Button
type="primary"
icon={<ContainerOutlined />}
onClick={handleSubmit}
>
保存
</Button>
}
>
<Card>
<StandardTable
tableProps={{ rowKey: 'id' }}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
</Card>
</PageHeaderWrapper>
);
};
export default memberUpgradeRule;
export default MemberUpgradeRule;
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