Skip to content

J
jinfa-admin
Commit e21752c4 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

chore: 添加父子不关联属性

parent 3d130f5e
Hide whitespace changes
Inline Side-by-side
Showing with 936 additions and 928 deletions
src/pages/member/components/PowerInfo/index.tsx
View file @ e21752c4
import React, { useState, useRef } from 'react';
import { Row, Col, Modal } from 'antd';
import { useTreeTabs, FormState } from '@/hooks/useTreeTabs';
import MellowCard from '@/components/MellowCard';
import TabTree, { createTreeActions } from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import styles from './index.less';
const treeActions = createTreeActions();
const PowerInfo: React.FC<{}> = () => {
const [powerLoading, setPowerLoading] = useState(false);
const [buttonInfos, setButtonInfos] = useState<any>([]);
const actionRef = useRef<any>({});
// 获取左侧已选择的项
const getMenuSelectData = async () => {
setPowerLoading(true);
const res = await PublicApi.getMemberValidateTreeCheckids({
memberId: id,
validateId: validateId,
});
setPowerLoading(false);
if (res.code === 1000) {
const { checkIds } = res.data;
return { data: { ids: checkIds } };
}
return {
data: {
ids: [],
},
};
};
// 获取左边菜单
const fetchMenuData = async () => {
const res = await PublicApi.getMemberValidateTree({
memberId: id,
validateId: validateId,
});
return res;
};
// 点击左侧菜单获取右侧按钮菜单、及已勾选的信息
const handleFindDetail = menuId => {
PublicApi.getMemberValidateCommitGetbutton({
menuId: menuId,
memberId: id,
validateId: validateId,
}).then(res => {
const { data } = res;
let buttons = data.buttons.map(v => ({ id: v.id, buttonName: v.name }));
setButtonInfos(buttons || []);
if (actionRef.current.setSelected) {
actionRef.current.setSelected(data.checkIds);
}
});
};
const customSelect = (selectKey?, node?) => {
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null);
setTreeStatus(FormState.ADD);
return;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
// 点击菜单，请求数据重置
handleFindDetail(selectKey);
setIsEditForm(false);
resolve();
},
onCancel() {
reject();
},
});
});
} else {
// 编辑页， 需回显
handleFindDetail(selectKey);
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
}
}
};
const {
treeData,
handleSelect,
nodeRecord,
setNodeRecord,
setTreeStatus,
setIsEditForm,
isEditForm,
} = useTreeTabs({
fetchMenuData,
selectCallback: customSelect,
});
// 更新右侧按钮
const handleSubmitAuth = async () => {
const buttonIds = [...actionRef.current.selected];
if (!nodeRecord) {
return;
}
if (isEditForm) {
// 更新右侧按钮
await PublicApi.postMemberValidateCommitUpdatebutton({
memberId: id,
validateId,
menuId: nodeRecord.id,
buttonIds: buttonIds,
});
}
setIsEditForm(false);
};
return (
<Row>
<Col span={15}>
<MellowCard>
<TabTree
title="菜单列表"
getMenuSelectData={getMenuSelectData}
customKey="id"
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
disabled={true}
checkable
/>
</MellowCard>
</Col>
<Col span={8} offset={1}>
<MellowCard>
<CheckboxTree
actions={actionRef}
disabled={true}
handleChange={e => setIsEditForm(true)}
checkedNodes={buttonInfos}
title="菜单按钮访问权限"
handleSubmit={handleSubmitAuth}
showSave
/>
</MellowCard>
</Col>
</Row>
);
};
import React, { useState, useRef } from 'react';
import { Row, Col, Modal } from 'antd';
import { useTreeTabs, FormState } from '@/hooks/useTreeTabs';
import MellowCard from '@/components/MellowCard';
import TabTree, { createTreeActions } from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import styles from './index.less';
const treeActions = createTreeActions();
const PowerInfo: React.FC<{}> = () => {
const [powerLoading, setPowerLoading] = useState(false);
const [buttonInfos, setButtonInfos] = useState<any>([]);
const actionRef = useRef<any>({});
// 获取左侧已选择的项
const getMenuSelectData = async () => {
setPowerLoading(true);
const res = await PublicApi.getMemberValidateTreeCheckids({
memberId: id,
validateId: validateId,
});
setPowerLoading(false);
if (res.code === 1000) {
const { checkIds } = res.data;
return { data: { ids: checkIds } };
}
return {
data: {
ids: [],
},
};
};
// 获取左边菜单
const fetchMenuData = async () => {
const res = await PublicApi.getMemberValidateTree({
memberId: id,
validateId: validateId,
});
return res;
};
// 点击左侧菜单获取右侧按钮菜单、及已勾选的信息
const handleFindDetail = menuId => {
PublicApi.getMemberValidateCommitGetbutton({
menuId: menuId,
memberId: id,
validateId: validateId,
}).then(res => {
const { data } = res;
let buttons = data.buttons.map(v => ({ id: v.id, buttonName: v.name }));
setButtonInfos(buttons || []);
if (actionRef.current.setSelected) {
actionRef.current.setSelected(data.checkIds);
}
});
};
const customSelect = (selectKey?, node?) => {
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null);
setTreeStatus(FormState.ADD);
return;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
// 点击菜单，请求数据重置
handleFindDetail(selectKey);
setIsEditForm(false);
resolve();
},
onCancel() {
reject();
},
});
});
} else {
// 编辑页， 需回显
handleFindDetail(selectKey);
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
}
}
};
const {
treeData,
handleSelect,
nodeRecord,
setNodeRecord,
setTreeStatus,
setIsEditForm,
isEditForm,
} = useTreeTabs({
fetchMenuData,
selectCallback: customSelect,
});
// 更新右侧按钮
const handleSubmitAuth = async () => {
const buttonIds = [...actionRef.current.selected];
if (!nodeRecord) {
return;
}
if (isEditForm) {
// 更新右侧按钮
await PublicApi.postMemberValidateCommitUpdatebutton({
memberId: id,
validateId,
menuId: nodeRecord.id,
buttonIds: buttonIds,
});
}
setIsEditForm(false);
};
return (
<Row>
<Col span={15}>
<MellowCard>
<TabTree
title="菜单列表"
getMenuSelectData={getMenuSelectData}
customKey="id"
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
disabled={true}
checkStrictly
checkable
/>
</MellowCard>
</Col>
<Col span={8} offset={1}>
<MellowCard>
<CheckboxTree
actions={actionRef}
disabled={true}
handleChange={e => setIsEditForm(true)}
checkedNodes={buttonInfos}
title="菜单按钮访问权限"
handleSubmit={handleSubmitAuth}
showSave
/>
</MellowCard>
</Col>
</Row>
);
};
export default PowerInfo
\ No newline at end of file
src/pages/member/components/auditDetail.tsx
View file @ e21752c4
import React, { useRef, useState, useEffect } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
PageHeader,
Row,
Col,
Button,
Tag,
Badge,
Tabs,
Steps,
Descriptions,
Modal,
} from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import TabTree, { createTreeActions } from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import { useTreeTabs, FormState } from '@/hooks/useTreeTabs';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import NiceForm from '@/components/NiceForm';
import { auditModalSchema } from './schema';
import { PublicApi } from '@/services/api';
import styles from './index.less';
const { TabPane } = Tabs;
const { Step } = Steps;
const treeActions = createTreeActions();
const auditAction = createFormActions();
interface ItemProps {
auditType: string;
routeParams: any;
}
const auditDetail: React.FC<ItemProps> = (props: any) => {
const { pageStatus, id, preview } = usePageStatus();
const { auditType, routeParams } = props;
const [hActived, setHActived] = useState('1');
const [fActived, setfActived] = useState('1');
const [lActived, setlActived] = useState('1');
const [detailData, setDetailData] = useState<any>({});
const [modalVisible, setModalVisible] = useState(false);
const fetchMenuData = async () => {
const res = await PublicApi.getMemberValidateTree({
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
});
return res;
};
const getMenuSelectData = async () => {
const res = await PublicApi.getMemberValidateTreeCheckids({
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
});
const { checkIds } = res.data;
return { data: { ids: checkIds } };
};
const handleFindDetail = menuId => {
PublicApi.getMemberValidateCommitGetbutton({
menuId: menuId,
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
}).then(res => {
const { data } = res;
let buttons = data.buttons.map(v => ({ id: v.id, buttonName: v.name }));
setButtonInfos(buttons || []);
if (actionRef.current.setSelected) {
actionRef.current.setSelected(data.checkIds);
}
});
};
const customSelect = (selectKey?, node?) => {
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null);
setTreeStatus(FormState.ADD);
return;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
// 点击菜单，请求数据重置
handleFindDetail(selectKey);
setIsEditForm(false);
resolve();
},
onCancel() {
reject();
},
});
});
} else {
// 编辑页， 需回显
handleFindDetail(selectKey);
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
}
}
};
const {
treeData,
handleSelect,
nodeRecord,
setNodeRecord,
setTreeStatus,
setIsEditForm,
isEditForm,
} = useTreeTabs({
fetchMenuData,
selectCallback: customSelect,
});
useEffect(() => {
let getDetailFn;
switch (auditType) {
case '1':
getDetailFn = PublicApi.getMemberValidateCommitDetail;
break;
case '2':
getDetailFn = PublicApi.getMemberValidateStep1Detail;
break;
case '3':
getDetailFn = PublicApi.getMemberValidateStep2Detail;
break;
case '4':
getDetailFn = PublicApi.getMemberValidateConfirmDetail;
break;
}
getDetailFn({
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
}).then(res => {
const { data } = res;
setDetailData(data);
});
}, []);
const actionRef = useRef<any>({});
// 储存的按钮数据
const [buttonInfos, setButtonInfos] = useState<any>([]);
const handleSubmitAuth = async () => {
const menuIds: any = [...treeActions.getSelectKeys()];
const buttonIds = [...actionRef.current.selected];
// 右侧有编辑过，则需要调按钮提交接口
await PublicApi.postMemberValidateCommitUpdatemenu(
{
memberId: routeParams.memberId,
validateId: routeParams.validateId,
checkIds: menuIds,
},
{
ctlType: isEditForm ? 'none' : 'message',
},
);
if (isEditForm) {
await PublicApi.postMemberValidateCommitUpdatebutton({
memberId: routeParams.memberId,
validateId: routeParams.validateId,
menuId: nodeRecord.id,
buttonIds: buttonIds,
});
}
setIsEditForm(false);
};
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>
</>
);
};
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 handleSubmit = (values: any, type?: string) => {
if (!type) {
let auditFn;
switch (auditType) {
case '1':
auditFn = PublicApi.postMemberValidateCommitSubmit;
break;
case '2':
auditFn = PublicApi.postMemberValidateStep1Submit;
break;
case '3':
auditFn = PublicApi.postMemberValidateStep2Submit;
break;
case '4':
auditFn = PublicApi.postMemberValidateConfirmSubmit;
break;
}
auditFn({
memberId: routeParams.memberId,
validateId: routeParams.validateId,
agree: values.agree,
reason: values.reason,
}).then(res => {
if (res.code === 1000) {
history.goBack();
}
});
} else {
setModalVisible(false);
}
};
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => window.history.back()}
title={
<>
<div className={styles['headerTop']}>
<div className={styles['headerTop-prefix']}>
{detailData?.name?.substr(0, 1).toUpperCase()}
</div>
<div className={styles['headerTop-name']}>
{detailData?.name}
</div>
<div className={styles[`levelIcon${'1'}`]}></div>
</div>
</>
}
extra={
<>
{pageStatus != PageStatus.PREVIEW ? (
<Button
className={styles['saveBtn']}
onClick={() => setModalVisible(true)}
>
提交
</Button>
) : (
''
)}
</>
}
footer={
<Tabs activeKey={hActived} onChange={val => setHActived(val)}>
<TabPane tab="详情" key="1" />
<TabPane tab="权限" key="2" />
</Tabs>
}
>
<Descriptions size="small" column={3} style={{ padding: '0 32px' }}>
<Descriptions.Item label="会员类型">
{detailData?.memberTypeName}
</Descriptions.Item>
<Descriptions.Item label="会员角色">
{detailData?.roleName}
</Descriptions.Item>
<Descriptions.Item label="会员状态">
<Tag color="green">{detailData?.statusName}</Tag>
</Descriptions.Item>
<Descriptions.Item label="外部状态">
<Tag color="gold">{detailData?.outerStatusName}</Tag>
</Descriptions.Item>
<Descriptions.Item label="内部状态">
<Badge color="#669EDE" text={detailData?.innerStatusName} />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
>
{hActived === '1' ? (
<Row>
<Col className={styles['mainCol']} span={24}>
<Tabs activeKey={fActived} onChange={val => setfActived(val)}>
<TabPane tab="外部审核流程" key="1">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData?.currentOuterStep - 1}
>
{detailData?.outerVerifySteps?.map((item, index) => {
return (
<Step
key={index}
title={item.roleName}
description={item.stepName}
/>
);
})}
</Steps>
</TabPane>
<TabPane tab="内部审核流程" key="2">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData?.currentInnerStep - 1}
>
{detailData?.innerVerifySteps?.map((item, index) => {
return (
<Step
key={index}
title={item.roleName}
description={item.stepName}
/>
);
})}
</Steps>
</TabPane>
</Tabs>
</Col>
{detailData?.groups?.map((item, index) => {
return (
<Col className={styles['mainCol']} span={24} key={index}>
{renderInfoTemplate({ type: '1', item })}
</Col>
);
})}
<Col className={styles['mainCol']} span={24}>
<Tabs activeKey={lActived} onChange={val => setlActived(val)}>
<TabPane tab="流转记录" key="1">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={columns}
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>
) : (
<Row>
<Col className={styles['authCol']} span={15}>
<TabTree
title="菜单列表"
getMenuSelectData={getMenuSelectData}
customKey="id"
checkable
showSave
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
handleSubmit={handleSubmitAuth}
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="菜单按钮访问权限"
showSave
handleSubmit={handleSubmitAuth}
/>
</Col>
</Row>
)}
<Modal
title={
auditType === '1'
? '待提交审核'
: auditType === '2'
? '待审核（一级）'
: auditType === '3'
? '待审核（二级）'
: '待确认审核'
}
visible={modalVisible}
onOk={() => auditAction.submit()}
onCancel={() => handleSubmit(false, 'cancel')}
destroyOnClose
>
<NiceForm
previewPlaceholder="loading..."
effects={($, { setFieldState }) => {
FormEffectHooks.onFieldValueChange$('agree').subscribe(state => {
setFieldState('reason', targetState => {
targetState.visible = state.value != 1;
});
});
}}
onSubmit={handleSubmit}
actions={auditAction}
schema={auditModalSchema}
/>
</Modal>
</PageHeaderWrapper>
);
};
export default auditDetail;
import React, { useRef, useState, useEffect } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
PageHeader,
Row,
Col,
Button,
Tag,
Badge,
Tabs,
Steps,
Descriptions,
Modal,
} from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import TabTree, { createTreeActions } from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import { useTreeTabs, FormState } from '@/hooks/useTreeTabs';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import NiceForm from '@/components/NiceForm';
import { auditModalSchema } from './schema';
import { PublicApi } from '@/services/api';
import styles from './index.less';
const { TabPane } = Tabs;
const { Step } = Steps;
const treeActions = createTreeActions();
const auditAction = createFormActions();
interface ItemProps {
auditType: string;
routeParams: any;
}
const auditDetail: React.FC<ItemProps> = (props: any) => {
const { pageStatus, id, preview } = usePageStatus();
const { auditType, routeParams } = props;
const [hActived, setHActived] = useState('1');
const [fActived, setfActived] = useState('1');
const [lActived, setlActived] = useState('1');
const [detailData, setDetailData] = useState<any>({});
const [modalVisible, setModalVisible] = useState(false);
const fetchMenuData = async () => {
const res = await PublicApi.getMemberValidateTree({
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
});
return res;
};
const getMenuSelectData = async () => {
const res = await PublicApi.getMemberValidateTreeCheckids({
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
});
const { checkIds } = res.data;
return { data: { ids: checkIds } };
};
const handleFindDetail = menuId => {
PublicApi.getMemberValidateCommitGetbutton({
menuId: menuId,
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
}).then(res => {
const { data } = res;
let buttons = data.buttons.map(v => ({ id: v.id, buttonName: v.name }));
setButtonInfos(buttons || []);
if (actionRef.current.setSelected) {
actionRef.current.setSelected(data.checkIds);
}
});
};
const customSelect = (selectKey?, node?) => {
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null);
setTreeStatus(FormState.ADD);
return;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
// 点击菜单，请求数据重置
handleFindDetail(selectKey);
setIsEditForm(false);
resolve();
},
onCancel() {
reject();
},
});
});
} else {
// 编辑页， 需回显
handleFindDetail(selectKey);
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
}
}
};
const {
treeData,
handleSelect,
nodeRecord,
setNodeRecord,
setTreeStatus,
setIsEditForm,
isEditForm,
} = useTreeTabs({
fetchMenuData,
selectCallback: customSelect,
});
useEffect(() => {
let getDetailFn;
switch (auditType) {
case '1':
getDetailFn = PublicApi.getMemberValidateCommitDetail;
break;
case '2':
getDetailFn = PublicApi.getMemberValidateStep1Detail;
break;
case '3':
getDetailFn = PublicApi.getMemberValidateStep2Detail;
break;
case '4':
getDetailFn = PublicApi.getMemberValidateConfirmDetail;
break;
}
getDetailFn({
memberId: pageStatus === PageStatus.PREVIEW ? id : routeParams.memberId,
validateId: routeParams.validateId,
}).then(res => {
const { data } = res;
setDetailData(data);
});
}, []);
const actionRef = useRef<any>({});
// 储存的按钮数据
const [buttonInfos, setButtonInfos] = useState<any>([]);
const handleSubmitAuth = async () => {
const menuIds: any = [...treeActions.getSelectKeys()];
const buttonIds = [...actionRef.current.selected];
// 右侧有编辑过，则需要调按钮提交接口
await PublicApi.postMemberValidateCommitUpdatemenu(
{
memberId: routeParams.memberId,
validateId: routeParams.validateId,
checkIds: menuIds,
},
{
ctlType: isEditForm ? 'none' : 'message',
},
);
if (isEditForm) {
await PublicApi.postMemberValidateCommitUpdatebutton({
memberId: routeParams.memberId,
validateId: routeParams.validateId,
menuId: nodeRecord.id,
buttonIds: buttonIds,
});
}
setIsEditForm(false);
};
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>
</>
);
};
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 handleSubmit = (values: any, type?: string) => {
if (!type) {
let auditFn;
switch (auditType) {
case '1':
auditFn = PublicApi.postMemberValidateCommitSubmit;
break;
case '2':
auditFn = PublicApi.postMemberValidateStep1Submit;
break;
case '3':
auditFn = PublicApi.postMemberValidateStep2Submit;
break;
case '4':
auditFn = PublicApi.postMemberValidateConfirmSubmit;
break;
}
auditFn({
memberId: routeParams.memberId,
validateId: routeParams.validateId,
agree: values.agree,
reason: values.reason,
}).then(res => {
if (res.code === 1000) {
history.goBack();
}
});
} else {
setModalVisible(false);
}
};
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => window.history.back()}
title={
<>
<div className={styles['headerTop']}>
<div className={styles['headerTop-prefix']}>
{detailData?.name?.substr(0, 1).toUpperCase()}
</div>
<div className={styles['headerTop-name']}>
{detailData?.name}
</div>
<div className={styles[`levelIcon${'1'}`]}></div>
</div>
</>
}
extra={
<>
{pageStatus != PageStatus.PREVIEW ? (
<Button
className={styles['saveBtn']}
onClick={() => setModalVisible(true)}
>
提交
</Button>
) : (
''
)}
</>
}
footer={
<Tabs activeKey={hActived} onChange={val => setHActived(val)}>
<TabPane tab="详情" key="1" />
<TabPane tab="权限" key="2" />
</Tabs>
}
>
<Descriptions size="small" column={3} style={{ padding: '0 32px' }}>
<Descriptions.Item label="会员类型">
{detailData?.memberTypeName}
</Descriptions.Item>
<Descriptions.Item label="会员角色">
{detailData?.roleName}
</Descriptions.Item>
<Descriptions.Item label="会员状态">
<Tag color="green">{detailData?.statusName}</Tag>
</Descriptions.Item>
<Descriptions.Item label="外部状态">
<Tag color="gold">{detailData?.outerStatusName}</Tag>
</Descriptions.Item>
<Descriptions.Item label="内部状态">
<Badge color="#669EDE" text={detailData?.innerStatusName} />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
>
{hActived === '1' ? (
<Row>
<Col className={styles['mainCol']} span={24}>
<Tabs activeKey={fActived} onChange={val => setfActived(val)}>
<TabPane tab="外部审核流程" key="1">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData?.currentOuterStep - 1}
>
{detailData?.outerVerifySteps?.map((item, index) => {
return (
<Step
key={index}
title={item.roleName}
description={item.stepName}
/>
);
})}
</Steps>
</TabPane>
<TabPane tab="内部审核流程" key="2">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData?.currentInnerStep - 1}
>
{detailData?.innerVerifySteps?.map((item, index) => {
return (
<Step
key={index}
title={item.roleName}
description={item.stepName}
/>
);
})}
</Steps>
</TabPane>
</Tabs>
</Col>
{detailData?.groups?.map((item, index) => {
return (
<Col className={styles['mainCol']} span={24} key={index}>
{renderInfoTemplate({ type: '1', item })}
</Col>
);
})}
<Col className={styles['mainCol']} span={24}>
<Tabs activeKey={lActived} onChange={val => setlActived(val)}>
<TabPane tab="流转记录" key="1">
<div style={{ marginBottom: '40px' }}>
<StandardTable
tableProps={{
pagination: false,
rowKey: 'id',
}}
columns={columns}
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>
) : (
<Row>
<Col className={styles['authCol']} span={15}>
<TabTree
title="菜单列表"
getMenuSelectData={getMenuSelectData}
customKey="id"
checkable
showSave
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
handleSubmit={handleSubmitAuth}
disabled={pageStatus === PageStatus.PREVIEW}
checkStrictly
/>
</Col>
<Col className={styles['authCol']} span={8} offset={1}>
<CheckboxTree
actions={actionRef}
disabled={pageStatus === PageStatus.PREVIEW}
handleChange={e => setIsEditForm(true)}
checkedNodes={buttonInfos}
title="菜单按钮访问权限"
showSave
handleSubmit={handleSubmitAuth}
/>
</Col>
</Row>
)}
<Modal
title={
auditType === '1'
? '待提交审核'
: auditType === '2'
? '待审核（一级）'
: auditType === '3'
? '待审核（二级）'
: '待确认审核'
}
visible={modalVisible}
onOk={() => auditAction.submit()}
onCancel={() => handleSubmit(false, 'cancel')}
destroyOnClose
>
<NiceForm
previewPlaceholder="loading..."
effects={($, { setFieldState }) => {
FormEffectHooks.onFieldValueChange$('agree').subscribe(state => {
setFieldState('reason', targetState => {
targetState.visible = state.value != 1;
});
});
}}
onSubmit={handleSubmit}
actions={auditAction}
schema={auditModalSchema}
/>
</Modal>
</PageHeaderWrapper>
);
};
export default auditDetail;
src/pages/member/memberMaintain/detailed/powerInfo.tsx
View file @ e21752c4
import React, { useState, useRef } from 'react';
import { Row, Col, Modal, Spin } from 'antd';
import { Prompt } from 'umi';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import { useTreeTabs, FormState } from '@/hooks/useTreeTabs';
import { PublicApi } from '@/services/api';
import MellowCard from '@/components/MellowCard';
import TabTree, { createTreeActions } from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import styles from './index.less';
const treeActions = createTreeActions();
const PowerInfo: React.FC<{}> = () => {
const { id, validateId, pageStatus } = usePageStatus();
const [buttonInfos, setButtonInfos] = useState<any>([]);
const [powerUnsaved, setPowerUnsaved] = useState(false);
const [btnsUnsaved, setBtnsUnsaved] = useState(false);
const [powerLoading, setPowerLoading] = useState(false);
const [submitAuthLoading, setSubmitAuthLoading] = useState(false);
const [submitBtnsLoading, setSubmitBtnsLoading] = useState(false);
const actionRef = useRef<any>({});
// 获取左侧已选择的项
const getMenuSelectData = async () => {
setPowerLoading(true);
const res = await PublicApi.getMemberMaintenanceDetailAuthMenuCheck({
memberId: id,
validateId: validateId,
});
setPowerLoading(false);
if (res.code === 1000) {
const { checkIds } = res.data;
return { data: { ids: checkIds } };
}
return {
data: {
ids: [],
},
};
};
// 获取左边菜单
const fetchMenuData = async () => {
const res = await PublicApi.getMemberMaintenanceDetailAuthMenu({
memberId: id,
validateId: validateId,
});
return res;
};
// 点击左侧菜单获取右侧按钮菜单、及已勾选的信息
const handleFindDetail = async menuId => {
// 右侧对应按钮
const authButtonRes = await PublicApi.getMemberMaintenanceDetailAuthButton({
menuId: menuId,
memberId: id,
validateId: validateId,
});
if (authButtonRes.code === 1000) {
const { data } = authButtonRes;
let buttons = data.map(v => ({ id: v.id, buttonName: v.name }));
setButtonInfos(buttons || []);
}
// 右侧选中按钮
const authButtonCheckRes = await PublicApi.getMemberMaintenanceDetailAuthButtonCheck({
menuId: menuId,
memberId: id,
validateId: validateId,
});
if (authButtonCheckRes.code === 1000) {
if (actionRef.current.setSelected) {
actionRef.current.setSelected(authButtonCheckRes.data.checkIds);
}
}
};
const customSelect = (selectKey?, node?) => {
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null);
setTreeStatus(FormState.ADD);
return;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
// 点击菜单，请求数据重置
handleFindDetail(selectKey);
setIsEditForm(false);
resolve();
},
onCancel() {
reject();
},
});
});
} else {
// 编辑页， 需回显
handleFindDetail(selectKey);
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
}
}
};
const {
treeData,
handleSelect,
nodeRecord,
setNodeRecord,
setTreeStatus,
setIsEditForm,
isEditForm,
} = useTreeTabs({
fetchMenuData,
selectCallback: customSelect,
});
const handleBtnsChange = () => {
setIsEditForm(true)
setBtnsUnsaved(true);
};
// 更新右侧按钮
const handleSubmitAuthBtns = async () => {
setSubmitBtnsLoading(true);
const buttonIds = [...actionRef.current.selected];
if (!nodeRecord) {
return;
}
if (isEditForm) {
// 更新右侧按钮
await PublicApi.postMemberMaintenanceDetailAuthButtonUpdate({
memberId: id,
validateId,
menuId: nodeRecord.id,
buttonIds: buttonIds,
});
}
setSubmitBtnsLoading(false);
setIsEditForm(false);
setBtnsUnsaved(false);
};
// 更新左侧菜单
const handleSubmitAuth = async () => {
setSubmitAuthLoading(true);
const menuIds: any = treeActions.getSelectKeys();
// 更新右侧按钮
await PublicApi.postMemberMaintenanceDetailAuthMenuUpdate({
memberId: id,
validateId,
menuIds,
});
const checkddRes = await getMenuSelectData();
const { data }: {[key: string]: any} = checkddRes;
treeActions.setSelectKeys(data.ids);
setSubmitAuthLoading(false);
setPowerUnsaved(false);
};
const handleCheck = () => {
setPowerUnsaved(true);
};
return (
<Spin spinning={powerLoading}>
<Row>
<Col span={15}>
<MellowCard>
<TabTree
title="菜单列表"
getMenuSelectData={getMenuSelectData}
customKey="id"
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
handleCheck={handleCheck}
saveLoading={submitAuthLoading}
handleSubmit={handleSubmitAuth}
checkable
showSave
/>
</MellowCard>
</Col>
<Col span={8} offset={1}>
<MellowCard>
<CheckboxTree
actions={actionRef}
handleChange={e => handleBtnsChange()}
checkedNodes={buttonInfos}
title="菜单按钮访问权限"
saveLoading={submitBtnsLoading}
handleSubmit={handleSubmitAuthBtns}
/>
</MellowCard>
</Col>
</Row>
<Prompt when={powerUnsaved || btnsUnsaved} message="您还有未保存的内容，是否确定要离开？" />
</Spin>
);
};
import React, { useState, useRef } from 'react';
import { Row, Col, Modal, Spin } from 'antd';
import { Prompt } from 'umi';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import { useTreeTabs, FormState } from '@/hooks/useTreeTabs';
import { PublicApi } from '@/services/api';
import MellowCard from '@/components/MellowCard';
import TabTree, { createTreeActions } from '@/components/TabTree';
import CheckboxTree from '@/components/CheckBoxTree';
import styles from './index.less';
const treeActions = createTreeActions();
const PowerInfo: React.FC<{}> = () => {
const { id, validateId, pageStatus } = usePageStatus();
const [buttonInfos, setButtonInfos] = useState<any>([]);
const [powerUnsaved, setPowerUnsaved] = useState(false);
const [btnsUnsaved, setBtnsUnsaved] = useState(false);
const [powerLoading, setPowerLoading] = useState(false);
const [submitAuthLoading, setSubmitAuthLoading] = useState(false);
const [submitBtnsLoading, setSubmitBtnsLoading] = useState(false);
const actionRef = useRef<any>({});
// 获取左侧已选择的项
const getMenuSelectData = async () => {
setPowerLoading(true);
const res = await PublicApi.getMemberMaintenanceDetailAuthMenuCheck({
memberId: id,
validateId: validateId,
});
setPowerLoading(false);
if (res.code === 1000) {
const { checkIds } = res.data;
return { data: { ids: checkIds } };
}
return {
data: {
ids: [],
},
};
};
// 获取左边菜单
const fetchMenuData = async () => {
const res = await PublicApi.getMemberMaintenanceDetailAuthMenu({
memberId: id,
validateId: validateId,
});
return res;
};
// 点击左侧菜单获取右侧按钮菜单、及已勾选的信息
const handleFindDetail = async menuId => {
// 右侧对应按钮
const authButtonRes = await PublicApi.getMemberMaintenanceDetailAuthButton({
menuId: menuId,
memberId: id,
validateId: validateId,
});
if (authButtonRes.code === 1000) {
const { data } = authButtonRes;
let buttons = data.map(v => ({ id: v.id, buttonName: v.name }));
setButtonInfos(buttons || []);
}
// 右侧选中按钮
const authButtonCheckRes = await PublicApi.getMemberMaintenanceDetailAuthButtonCheck({
menuId: menuId,
memberId: id,
validateId: validateId,
});
if (authButtonCheckRes.code === 1000) {
if (actionRef.current.setSelected) {
actionRef.current.setSelected(authButtonCheckRes.data.checkIds);
}
}
};
const customSelect = (selectKey?, node?) => {
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null);
setTreeStatus(FormState.ADD);
return;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
// 点击菜单，请求数据重置
handleFindDetail(selectKey);
setIsEditForm(false);
resolve();
},
onCancel() {
reject();
},
});
});
} else {
// 编辑页， 需回显
handleFindDetail(selectKey);
setNodeRecord(node);
setTreeStatus(FormState.EDIT);
}
}
};
const {
treeData,
handleSelect,
nodeRecord,
setNodeRecord,
setTreeStatus,
setIsEditForm,
isEditForm,
} = useTreeTabs({
fetchMenuData,
selectCallback: customSelect,
});
const handleBtnsChange = () => {
setIsEditForm(true)
setBtnsUnsaved(true);
};
// 更新右侧按钮
const handleSubmitAuthBtns = async () => {
setSubmitBtnsLoading(true);
const buttonIds = [...actionRef.current.selected];
if (!nodeRecord) {
return;
}
if (isEditForm) {
// 更新右侧按钮
await PublicApi.postMemberMaintenanceDetailAuthButtonUpdate({
memberId: id,
validateId,
menuId: nodeRecord.id,
buttonIds: buttonIds,
});
}
setSubmitBtnsLoading(false);
setIsEditForm(false);
setBtnsUnsaved(false);
};
// 更新左侧菜单
const handleSubmitAuth = async () => {
setSubmitAuthLoading(true);
const menuIds: any = treeActions.getSelectKeys();
// 更新右侧按钮
await PublicApi.postMemberMaintenanceDetailAuthMenuUpdate({
memberId: id,
validateId,
menuIds,
});
const checkddRes = await getMenuSelectData();
const { data }: {[key: string]: any} = checkddRes;
treeActions.setSelectKeys(data.ids);
setSubmitAuthLoading(false);
setPowerUnsaved(false);
};
const handleCheck = () => {
setPowerUnsaved(true);
};
return (
<Spin spinning={powerLoading}>
<Row>
<Col span={15}>
<MellowCard>
<TabTree
title="菜单列表"
getMenuSelectData={getMenuSelectData}
customKey="id"
actions={treeActions}
treeData={treeData}
handleSelect={handleSelect}
handleCheck={handleCheck}
saveLoading={submitAuthLoading}
handleSubmit={handleSubmitAuth}
checkStrictly
checkable
showSave
/>
</MellowCard>
</Col>
<Col span={8} offset={1}>
<MellowCard>
<CheckboxTree
actions={actionRef}
handleChange={e => handleBtnsChange()}
checkedNodes={buttonInfos}
title="菜单按钮访问权限"
saveLoading={submitBtnsLoading}
handleSubmit={handleSubmitAuthBtns}
/>
</MellowCard>
</Col>
</Row>
<Prompt when={powerUnsaved || btnsUnsaved} message="您还有未保存的内容，是否确定要离开？" />
</Spin>
);
};
export default PowerInfo;
\ No newline at end of file
src/pages/member/memberPr1/components/DetailInfo/index.tsx
View file @ e21752c4
......@@ -363,6 +363,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
treeData={treeData}
handleSelect={handleSelect}
disabled={true}
checkStrictly
checkable
/>
</MellowCard>
......
src/pages/member/memberPr2/components/DetailInfo/index.tsx
View file @ e21752c4
......@@ -364,6 +364,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
treeData={treeData}
handleSelect={handleSelect}
disabled={true}
checkStrictly
checkable
/>
</MellowCard>
......
src/pages/member/memberPrConfirm/components/DetailInfo/index.tsx
View file @ e21752c4
......@@ -368,6 +368,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
treeData={treeData}
handleSelect={handleSelect}
disabled={true}
checkStrictly
checkable
/>
</MellowCard>
......
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