Skip to content

J
jinfa-platform
Commit 5d47ea7f authored by Bill's avatar Bill
Browse files
Options

修改首页布局，对接加工

parent 0ca4ecdc
Show whitespace changes
Inline Side-by-side
Showing with 332 additions and 839 deletions
config/routes/handlingRoute.ts
View file @ 5d47ea7f
......@@ -178,12 +178,12 @@ const HandlingRoute = {
component: '@/pages/handling/confirm/Query',
},
// 确认生产通知单 -> 新建加工发货单
{
path: '/memberCenter/handling/confirm/createProcessInvoice',
name: 'createProcessInvoice',
icon: 'smile',
component: '@/pages/handling/confirm/createProcessInvoice'
},
// {
// path: '/memberCenter/handling/confirm/createProcessInvoice',
// name: 'createProcessInvoice',
// icon: 'smile',
// component: '@/pages/handling/confirm/createProcessInvoice'
// },
// 确认生产通知单 -> 待新增物流单
{
path: '/memberCenter/handling/confirm/pendingAddLogistics',
......@@ -192,12 +192,12 @@ const HandlingRoute = {
component: '@/pages/handling/confirm/Query',
},
// 确认生产通知单 -> 新建物流单
{
path: '/memberCenter/handling/confirm/createLogisticsOrder',
name: 'createLogisticsOrder',
icon: 'smile',
component: '@/pages/handling/confirm/createLogisticsOrder',
},
// {
// path: '/memberCenter/handling/confirm/createLogisticsOrder',
// name: 'createLogisticsOrder',
// icon: 'smile',
// component: '@/pages/handling/confirm/createLogisticsOrder',
// },
// 确认生产通知单 -> 待发货生产通知单
{
path: '/memberCenter/handling/confirm/pendingDelivered',
......
src/app.tsx
View file @ 5d47ea7f
......@@ -164,11 +164,14 @@ export function onRouteChange({ routes, matchedRoutes, location, action }) {
console.log('onRouteChange')
// 路由切换时， 自动回到顶部
document.body.scrollTop = document.documentElement.scrollTop = 0;
// 路由切换的时候记住，使用LRU算法，为首页使用，就是要找到面包屑对应的url衔接，
if(location.pathname.includes("memberCenter")) {
// 路由切换的时候记住，使用LRU算法，为首页使用，就是要找到面包屑对应的url衔接，这个算法需要修改一下
const breadCrumb = matchedRoutes.slice(2).reduce((prev, current) => {
return prev += "." + current.route.name
}, 'menu')
recent.put(breadCrumb, location.pathname + location.search);
}
if (isDev) {
return;
}
......
src/pages/handling/assign/add/index.tsx
View file @ 5d47ea7f
......@@ -45,7 +45,8 @@ const Add: React.FC<{}> = () => {
)
const noticesDetailColumn = () => {
return [
const blackList = ["orderNo", "orderTotal", "restTotal"];
const tempColumns = [
{ title: '订单号', dataIndex: 'orderNo' },
{ title: '商品ID', dataIndex: 'commodityId' },
{ title: '商品名称', dataIndex: 'name' },
......@@ -60,10 +61,12 @@ const Add: React.FC<{}> = () => {
{
title: '操作',
render: (text, record) => {
const uniqueID = activeSource == '加工订单'? record.fullId : record.id
return (
<Space>
<ProcessDetail
skuId={record.id}
uniqueID={uniqueID}
type={"view"}
quantity={record.processNum}
processUnitPrice={record.processUnitPrice}
......@@ -77,6 +80,7 @@ const Add: React.FC<{}> = () => {
</ProcessDetail>
<ProcessDetail
skuId={record.id}
uniqueID={uniqueID}
type={"edit"}
submit={handleChangeSomeList}
quantity={record.processNum}
......@@ -86,17 +90,16 @@ const Add: React.FC<{}> = () => {
category={record.customerCategoryName}
productName={record.name}
unitName={record.unitName}
>
<a>编辑</a>
</ProcessDetail>
<a onClick={() => handleRemoveRow(record.id)}>删除</a>
<a onClick={() => handleRemoveRow(uniqueID)}>删除</a>
</Space>
)
}
},
]
return activeSource !== '加工订单' ? tempColumns.filter((item) => !blackList.includes(item.dataIndex)) : tempColumns;
}
// 选择弹框 element
const tableAddButton = () => {
......@@ -143,20 +146,23 @@ const Add: React.FC<{}> = () => {
if(state.mounted) {
const value = state.value == 1 ? '加工订单' : '加工商品';
setActiveSource(value);
formActions.setFieldValue("someList", []);
formActions.setFieldValue("Tabs.tab-2.layout.someLists", []);
}
})
// 当物流为 物流时，那么填充
onFieldMount$('receiveAddressID').subscribe((state) => {
onFieldMount$('receivefullAddress').subscribe((state) => {
PublicApi.getLogisticsReceiverAddressPage({current: '1', pageSize: '10'})
.then((res) => {
let options = []
let options = [];
if(res.code === 1000) {
options = res.data.data.map((item) => {
return { label: `${item.fullAddress} / ${item.receiverName} / ${item.phone}`, value: `${item.fullAddress} / ${item.receiverName} / ${item.phone}` }}
return {
label: `${item.fullAddress} / ${item.receiverName} / ${item.phone}`,
value: item.id
}}
)
}
formActions.setFieldState("receiveAddressID", (state) => {
formActions.setFieldState("receivefullAddress", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
......@@ -168,12 +174,18 @@ const Add: React.FC<{}> = () => {
* 2. receiveUserName 收货人
* 3. receiveUserTel 收货人电话
*/
onFieldValueChange$('receiveAddressID').subscribe((state) => {
onFieldValueChange$('receivefullAddress').subscribe((state) => {
if(state.visible) {
const [receiveAddress, receiveUserName, receiveUserTel] = state.value && state.value.split("/");
const options = state.props["x-component-props"]["options"];
const target = options.filter((item) => item.value == state.value)[0];
if(target) {
const [receiveAddress, receiveUserName, receiveUserTel] = target.label.split("/");
formActions.setFieldValue("receiveAddress", receiveAddress.trim());
formActions.setFieldValue("receiveUserName", receiveUserName.trim());
formActions.setFieldValue("receiveUserTel", receiveUserTel.trim());
formActions.setFieldValue("receiverAddressId", state.value)
}
}
})
}
......@@ -200,20 +212,16 @@ const Add: React.FC<{}> = () => {
}
/**
* 加工商品Modal框 行勾选回调
* @param rows
*/
const processProductSelected = (rows) => {
const getChangeRows = (rows, primaryKey) => {
const {selectedRowKeys, selectRow} = rows;
const currentList = formActions.getFieldValue('Tabs.tab-2.layout.someLists');
// 首先去除掉没有在selectedRowkeys 的那些数据
const inKeys = [];
const hasRemovedList = currentList.filter(
(item) => {
const flag = selectedRowKeys.includes(item.id)
const flag = selectedRowKeys.includes(item[primaryKey])
if(flag) {
inKeys.push(item.id);
inKeys.push(item[primaryKey]);
}
return flag
}
......@@ -221,8 +229,17 @@ const Add: React.FC<{}> = () => {
// 找到没有在数组中的key，即新增加的key
const newAddKeys = selectedRowKeys.filter((item) => { return !inKeys.includes(item)});
const appendRow = selectRow.filter((item) => newAddKeys.includes(item.id));
const newRows = hasRemovedList.concat(appendRow);
const appendRow = selectRow.filter((item) => newAddKeys.includes(item[primaryKey]));
const newRows = hasRemovedList.concat(appendRow); // 最新的数组
return newRows
}
/**
* 加工商品Modal框 行勾选回调
* @param rows
*/
const processProductSelected = (rows) => {
const newRows = getChangeRows(rows, "id")
formActions.setFieldValue('Tabs.tab-2.layout.someLists', newRows)
}
......@@ -231,7 +248,8 @@ const Add: React.FC<{}> = () => {
* @param row
*/
const processOrderOnok = (rows) => {
formActions.setFieldValue('Tabs.tab-2.layout.someLists', rows.selectRow)
const newRows = getChangeRows(rows, "fullId")
formActions.setFieldValue('Tabs.tab-2.layout.someLists', newRows)
}
/**
......@@ -243,7 +261,8 @@ const Add: React.FC<{}> = () => {
const SELF_MENTION = 2; // 自提
const {
deliveryDate,
receiveAddressID,
receivefullAddress,
// receiveAddressID,
enclosure = [],
deliveryDesc = '',
payDesc = '',
......@@ -258,8 +277,8 @@ const Add: React.FC<{}> = () => {
const detailList = someLists.map((item) => {
return {
orederNo: null,
goodsId: item.commodityId,
goodsName: item.name,
productId: item.id, // skuid
productName: item.name,
category: item.customerCategoryName,
brand: item.brandName,
unit: item.unitName,
......@@ -270,12 +289,7 @@ const Add: React.FC<{}> = () => {
processTotalPrice: item.processTotalPrice,
deliveryDate: deliveryDateFormat,
property:{
specs: item.productProps && item.productProps.map((item) => {
return {
name: item.customerAttribute.name,
value: item.customerAttributeValue.value
}
}) || [],
specs: item.productProps || [],
annex: item.files.map((item) => ({name: item.name, value: item.url}))
}
}
......@@ -301,6 +315,7 @@ const Add: React.FC<{}> = () => {
delete postData.receiveAddress;
delete postData.receiveUserName;
delete postData.receiveUserTel
delete postData.receiverAddressId
}
console.log(postData);
// return ;
......@@ -315,7 +330,8 @@ const Add: React.FC<{}> = () => {
const handleChangeSomeList = (values: any) => {
let someList = formActions.getFieldValue('Tabs.tab-2.layout.someLists');
const index = someList.findIndex((item) => item.id == values.skuId);
const primaryKey = activeSource === '加工订单' ? 'fullId' : 'id'
const index = someList.findIndex((item) => item[primaryKey] == values.uniqueID);
if(index > -1) {
someList[index] = {
...someList[index],
......@@ -332,7 +348,8 @@ const Add: React.FC<{}> = () => {
const handleRemoveRow = (id: number) => {
const currentList = formActions.getFieldValue('Tabs.tab-2.layout.someLists');
const newList = currentList.filter((item) => item.id !== id);
const primaryKey = activeSource === '加工订单' ? 'fullId' : 'id'
const newList = currentList.filter((item) => item[primaryKey] !== id);
formActions.setFieldValue('Tabs.tab-2.layout.someLists', newList)
}
......
src/pages/handling/assign/add/schema.tsx
View file @ 5d47ea7f
......@@ -123,12 +123,12 @@ const basicTab = {
'x-linkages': [
{
type: 'value:visible',
target: '*(receiveAddressID, receiveAddress,receiveUserName,receiveUserTel)',
target: '*(receivefullAddress, receiveAddressID, receiveAddress,receiveUserName,receiveUserTel)',
condition: '{{$value == 1}}'
},
],
},
receiveAddressID: {
receivefullAddress: {
type: 'string',
title: '收货地址',
'x-rules': [
......@@ -140,6 +140,10 @@ const basicTab = {
'x-component': 'Select',
'x-component-props': {}
},
receiverAddressId: {
type: 'string',
display: false,
},
receiveAddress: {
type: 'string',
// title: 'address'
......
src/pages/handling/assign/detail/index.tsx
View file @ 5d47ea7f
......@@ -38,6 +38,7 @@ const Detail: React.FC<{}> = () => {
const [info, setInfo] = useState<any>({})
const { id } = usePageStatus();
const pathname = history.location.pathname;
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
if(id) {
SERVICE_MAP[pathname]({id: id})
......@@ -55,10 +56,12 @@ const Detail: React.FC<{}> = () => {
id: id,
status: status
}
setLoading(true)
const postData = status == 1 ? tempData : {...tempData, cause: text};
EXAM_SERVICE[pathname](postData)
.then(({code, data}) => {
if(code == 1000) {
setLoading(false)
history.go(-1)
}
})
......@@ -68,14 +71,32 @@ const Detail: React.FC<{}> = () => {
* 待提交生产通知单，提交生产通知到哪
*/
const submit = () => {
setLoading(true)
PublicApi.postEnhanceSupplierToBeSubmitSubmit({id: id})
.then(({data, code}) => {
if(code === 1000) {
history.go(-1);
}
setLoading(false)
})
}
const renderExtra = () => {
const ExamineComponent = (
<ExamineModal onOk={examOnOk} modalType={"basic"}>
<Button loading={loading} type="primary" >单据审核</Button>
</ExamineModal>
)
const SubmitBtn = <Button icon={<FormOutlined />} onClick={submit} type="primary"> 提交通知单</Button>
const Component_MAP = {
'/memberCenter/handling/assign/pendingSubmit/detail': SubmitBtn,
'/memberCenter/handling/assign/pendingFirst': ExamineComponent,
'/memberCenter/handling/assign/pendingSecond': ExamineComponent
}
return (Component_MAP[pathname] || null)
}
return (
<PageHeaderWrapper
title={
......@@ -113,11 +134,8 @@ const Detail: React.FC<{}> = () => {
</Col>
<Col span={2}>
{
pathname == '/memberCenter/handling/assign/pendingSubmit/detail'
? <Button icon={<FormOutlined />} onClick={submit} type="primary"> 提交通知单</Button>
: <ExamineModal onOk={examOnOk}/>
renderExtra()
}
</Col>
</Row>
......@@ -136,7 +154,7 @@ const Detail: React.FC<{}> = () => {
</Card>
</div>
<div style={{marginTop: '20px', display: info?.pnoReceiveDeliverDetailDOList ? 'block' : 'none'}}>
<div style={{marginTop: '20px', display: info.pnoReceiveDeliverDetailDOList?.length > 0 ? 'block' : 'none'}}>
<Card bodyStyle={{padding: '10px 24px 24px 24px'}}>
<Tabs>
<TabPane tab="收发货统计" key="1">
......
src/pages/handling/components/Appendix/index.tsx
View file @ 5d47ea7f
......@@ -7,6 +7,7 @@
import React from 'react';
import { Card } from 'antd';
import pdf_icon from '@/assets/imgs/pdf_icon.png';
const styles = {
display: 'flex',
......@@ -14,7 +15,7 @@ const styles = {
alignItem: 'center',
color: '#00B37A',
backgroundColor: '#F4F5F7',
padding: '10px 15px',
padding: '10px 10px',
cursor: 'pointer',
height: '100%'
}
......@@ -22,7 +23,10 @@ const styles = {
const AppendixItem = (props) => {
return (
<div style={styles}>{props.name}</div>
<div style={styles}>
<img src={pdf_icon} style={{width: '20px', marginRight: '15px'}} />
<div >{props.name}</div>
</div>
)
}
......
src/pages/handling/components/ExamineModal/index.tsx
View file @ 5d47ea7f
......@@ -91,7 +91,13 @@ const ExamineModal: React.FC<Iprops> = (props) => {
return (
<div>
<Button type="primary" onClick={() => setVisible(true)}>单据审核</Button>
<div onClick={() => setVisible(true)}>
{
props.children
}
{/* <Button type="primary" >单据审核</Button> */}
</div>
<Modal
visible={visible}
title="单据审核"
......
src/pages/handling/components/ProcessDetail/content.tsx
View file @ 5d47ea7f
......@@ -5,7 +5,6 @@ import classnames from 'classnames';
import {FileList, UploadFile} from '../../components/UploadFile';
import NiceForm from '@/components/NiceForm';
const schema = {
type: 'object',
properties: {
......@@ -40,8 +39,6 @@ const schema = {
}
}
}
}
}
......@@ -122,11 +119,11 @@ const Content = (props) => {
productProps && productProps.map((item, key) => {
return (
<div className={styles.common} key={key}>
<div className={styles.header}>{item.customerAttribute?.name || item.name}</div>
<div className={styles.header}>{item.name}</div>
<div className={styles.info}>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>{item.customerAttribute?.name || item.name}</Col>
<Col span={12}>{item.customerAttributeValue?.value || item.value}</Col>
<Col className={styles.label} span={4}>{item.name}</Col>
<Col span={12}>{item.value}</Col>
</Row>
</div>
</div>
......
src/pages/handling/components/ProcessDetail/index.tsx
View file @ 5d47ea7f
......@@ -19,6 +19,7 @@ interface Iprops {
category: string
productName: string,
unitName: string,
uniqueID: string,
}
interface IfileProps {
......@@ -27,7 +28,7 @@ interface IfileProps {
}
const ProcessDetail: React.FC<Iprops> = (props) => {
const {skuId, type, ...rest} = props;
const {skuId, type, productName, ...rest} = props;
const [visible, setVisible] = useState<boolean>(false);
const [info, setInfo] = useState<any>({})
const [files, setFiles] = useState<IfileProps[]>([])
......@@ -45,11 +46,16 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
PublicApi.getProductCommodityGetCommodityAttributeByUnitPriceAndPicId({
unitPriceAndPicId: props.skuId
}).then(({data, code}) => {
console.log(data);
if(code === 1000) {
setInfo({
...rest,
attributes: data
name: productName,
attributes: data.map((item) => {
return {
name: item.customerAttribute.name,
value: item.customerAttributeValueList.length > 0 && item.customerAttributeValueList[0].value || ''
}
})
})
}
})
......@@ -65,10 +71,9 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
}
const formSubmit = (values) => {
!!props.submit && props.submit({
files: files,
skuId: props.skuId,
uniqueID: props.uniqueID,
process: values,
productProps: info?.attributes
})
......@@ -78,7 +83,6 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
const fileOnChange = (values) => {
setFiles(values)
}
return (
<>
<div onClick={onOpen}>
......
src/pages/handling/components/ProcessOrder/index.tsx
View file @ 5d47ea7f
......@@ -17,27 +17,15 @@ const expandRowColumn = [
{ title: '品牌', dataIndex: 'brandName'},
{ title: '单价', dataIndex: 'price'},
{ title: '订单数量', dataIndex: 'orderTotal' },
{
title: '剩余加工数量',
dataIndex: 'restTotal',
render: (text, record) => {
return record.purchaseCount - (record.hasProcessNum || 0)
}
},
{
title: '已加工数量',
dataIndex: 'hasProcessNum',
render: (text) => {
return text || 0;
}
}
{ title: '剩余加工数量', dataIndex: 'restTotal'},
{ title: '已加工数量', dataIndex: 'hasProcessNum'}
];
const ProcessProducts = ({visible, cancel, ...restProps}) => {
// const [mainTableSelectRow, mainTableSelectRowCtl] = useRowSelectionTable({customKey: 'id'});
const [selectRow, selectRowCtl] = useRowSelectionTable({
customKey: 'id',
customKey: 'fullId',
extendsSelection: {
getCheckboxProps: record => ({
disabled: record.purchaseCount - (record.processNum || 0) <= 0,
......@@ -65,25 +53,26 @@ const ProcessProducts = ({visible, cancel, ...restProps}) => {
return {
orderNo: record.orderNo,
commodityId: item.productId, // 商品id
id: item.id,
id: item.productId,
name: item.productName,
customerCategoryName: item.category,
brandName: item.brand,
unitName: item.unit,
orderTotal: item.purchaseCount,
restTotal: item.purchaseCount - (item.processNum),
restTotal: item.purchaseCount - (item.processNum || 0),
processNum: '',
processUnitPrice: '',
processTotalPrice: '',
price: item.price, //单价，
hasProcessNum: item.processNum
hasProcessNum: item.processNum || 0,
fullId: item.id
}
}
)
return (
<Table
columns={expandRowColumn}
rowKey={"id"}
rowKey={(row) => row.fullId}
rowSelection={selectRow}
dataSource={renderData}
pagination={false}
......
src/pages/handling/components/Query/contants.tsx
View file @ 5d47ea7f
......@@ -106,7 +106,7 @@ export const FILTER_NAMES = {
export const DETAIL_PATH = {
[QUERY_PATH]: '/memberCenter/handling/assign/query/detail',
[TO_BE_ADD_QUERY_PATH]: '/memberCenter/handling/assign/query/detail',
[TO_BE_ADD_QUERY_PATH]: '/memberCenter/handling/assign/tobeAddQuery/detail',
[PENDING_FIRST]: '/memberCenter/handling/assign/pendingFirst/detail',
[PENDING_SECOND]: '/memberCenter/handling/assign/pendingSecond/detail',
[PENDING_SUBMIT]: '/memberCenter/handling/assign/pendingSubmit/detail',
......
src/pages/handling/components/UploadFile/FileList.tsx
View file @ 5d47ea7f
......@@ -31,8 +31,8 @@ const FileList: React.FC<Iprops> = (props) => {
<div className={styles.icon}>
<img src={pdf_icon} className={styles.img} />
</div>
<div className={styles.fileName}>交付要求</div>
<div className={styles.remove} onClick={() => props.removeFile(name)}>
<div className={styles.fileName}>{name}</div>
<div className={styles.remove} onClick={() => !!props.removeFile && props.removeFile(name)}>
<DeleteOutlined />
</div>
</div>
......
src/pages/handling/confirm/createLogisticsOrder/index.tsx deleted 100644 → 0
View file @ 0ca4ecdc
/**
* @author Bill
* @description 新建物流单
*/
import React, { useState, useCallback, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import { Button, Card, Select, DatePicker, Input, InputNumber } from 'antd';
import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import NiceForm from '@/components/NiceForm';
import schema from './schema';
import { LinkOutlined, PlusOutlined } from '@ant-design/icons';
import SelectGoods from '../../components/SelectGoods';
import { PublicApi } from '@/services/api';
import { usePageStatus } from '@/hooks/usePageStatus';
const formActions = createFormActions();
const CreateLogisticsOrder: React.FC = () => {
const { id } = usePageStatus();
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const [info, setInfo] = useState<any>({})
// 选择货品
const [modalProducVisible, setModalProductVisible] = useState<boolean>(false);
useEffect(() => {
if(id) {
PublicApi.getEnhanceProcessToBeAddLogisticsDetails({id: id})
.then(({data, code}) => {
if(code === 1000) {
setInfo(data)
}
})
}
}, [id])
const tableAddButton = (
<div>
<Button
onClick={() => setModalProductVisible(true)}
style={{marginBottom: 16}}
block
icon={<PlusOutlined/>}
type='dashed'
>
新建单据明细
</Button>
</div>
)
/**单据明细 */
const docDetailColumn = () => {
return [
{ title: '货号', dataIndex: 'no' },
{ title: '货品名称', dataIndex: 'name' },
{ title: '规格/size', dataIndex: 'size' },
{ title: '品类', dataIndex: 'category' },
{ title: '品牌', dataIndex: 'brand' },
{ title: '单位', dataIndex: 'unit' },
{ title: '成本价', dataIndex: 'cost' },
{
title: '加工商品名称',
dataIndex: 'productName',
render: (text, record) => {
const options = [{
lable: 'test',
value: 1
}]
return <Select options={options}></Select>
}
},
{ title: '商品ID', dataIndex: 'productId' },
{ title: '订单号', dataIndex: 'orderId' },
{ title: '单价', dataIndex: 'unitPrice' },
{
title: '入库数量',
dataIndex: 'total',
render: (text, reocrd) => {
return (
<InputNumber />
)
} },
{ title: '入库金额', dataIndex: 'price' },
{ title: '操作', render: (text, record) => (<a>删除</a>)}
];
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title="新建加工发货单"
extra={[
<Button
key="1"
type="primary"
icon={<SaveOutlined />}
loading={submitLoading}
onClick={() => formActions.submit()}
>
保存
</Button>,
]}
>
<Card>
<NiceForm
initialValues={info}
schema={schema}
actions={formActions}
components={{ DatePicker, Select}}
expressionScope={{
tableAddButton,
tableColumns: docDetailColumn()
}}
/>
{/* 加工商品Modal框 */}
<SelectGoods
visible={modalProducVisible}
cancel={() => setModalProductVisible(false)}
></SelectGoods>
</Card>
</PageHeaderWrapper>
);
}
export default CreateLogisticsOrder
\ No newline at end of file
src/pages/handling/confirm/createLogisticsOrder/schema.tsx deleted 100644 → 0
View file @ 0ca4ecdc
/**
* @author Bill
* @description 新建物流通知单
*/
import { ISchema } from '@formily/antd';
const basicTab = {
'tab-1': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
'tab': '基本信息'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 8,
labelAlign: 'left'
},
properties: {
no: {
title: '物流单号',
type: 'text',
},
digest: {
type: 'string',
title: '单据摘要',
"x-rules": [
{
required: true,
message: '请选择对应仓库'
}
],
},
companyId: {
type: 'string',
title: '物流服务商',
enum: [],
"x-rules": [
{
required: true,
message: '物流服务商'
},
]
},
processingInvoiceNumber: {
type: 'text',
title: '对应加工发货单号'
},
correspondingProductionNotice: {
type: 'text',
title: '对应生产通知单号'
},
receiveUserName: {
type: 'text',
title: '收货方',
},
receiveAddress: {
type: 'text',
title: '收货地址'
},
deliveryAddress: {
type: 'text',
title: '发货地址'
},
createTime: {
type: 'text',
title: '单据时间'
},
outerStatusName: {
type: 'text',
title: '外部状态'
},
}
}
}
}
}
const detailTab = {
'tab-2': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
tab: '单据明细'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 24,
labelAlign: 'left'
},
properties: {
someLists: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
},
'x-component': 'MultTable',
'x-component-props': {
rowKey: 'id',
prefix: "{{tableAddButton}}",
columns: "{{tableColumns}}",
}
}
}
}
}
}
}
const costTab = {
'tab-3': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
tab: '单据明细'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 24,
labelAlign: 'left'
},
properties: {
cost: {
title: '运费',
type: 'text'
},
costMethods: {
title: '结算方式',
type: 'text'
}
}
}
}
}
}
const recordColumns = [
{title: '序号', dataIndex: 'id'},
{title: '操作角色', dataIndex: 'role'},
{title: '状态', dataIndex: "status"},
{title: '操作', dataIndex: 'operate'},
{title: '操作时间', dataIndex: 'time'},
{title: '审核意见', dataIndex: 'cause'}
]
const recordTab = {
'tab-4': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
tab: '流转记录'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 24,
labelAlign: 'left'
},
properties: {
recordList: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
},
'x-component': 'MultTable',
'x-component-props': {
rowKey: 'id',
columns: recordColumns,
}
}
}
}
}
}
}
const schema: ISchema = {
type: 'object',
properties: {
'Tabs': {
type: 'object',
'x-component': 'tab',
'x-component-props': {
type: 'card'
},
properties: {
...basicTab,
...detailTab,
...costTab,
...recordTab
}
}
}
}
export default schema
\ No newline at end of file
src/pages/handling/confirm/createProcessInvoice/index.tsx deleted 100644 → 0
View file @ 0ca4ecdc
/**
* @author Bill
* @description 新建加工发货单
*/
import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import { Button, Card, Select, DatePicker, Input, InputNumber } from 'antd';
import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import NiceForm from '@/components/NiceForm';
import schema from './schema';
import { LinkOutlined, PlusOutlined } from '@ant-design/icons';
import SelectGoods from '../../components/SelectGoods'
const formActions = createFormActions();
const createProcessStock: React.FC<{}> = () => {
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
// 选择货品
const [modalProducVisible, setModalProductVisible] = useState<boolean>(false);
const tableAddButton = (
<div>
<Button
onClick={() => setModalProductVisible(true)}
style={{marginBottom: 16}}
block
icon={<PlusOutlined/>}
type='dashed'
>
新建单据明细
</Button>
</div>
)
/**单据明细 */
const docDetailColumn = () => {
return [
{ title: '货号', dataIndex: 'no' },
{ title: '货品名称', dataIndex: 'name' },
{ title: '规格/size', dataIndex: 'size' },
{ title: '品类', dataIndex: 'category' },
{ title: '品牌', dataIndex: 'brand' },
{ title: '单位', dataIndex: 'unit' },
{ title: '成本价', dataIndex: 'cost' },
{
title: '加工商品名称',
dataIndex: 'productName',
render: (text, record) => {
const options = [{
lable: 'test',
value: 1
}]
return <Select options={options}></Select>
}
},
{ title: '商品ID', dataIndex: 'productId' },
{ title: '订单号', dataIndex: 'orderId' },
{ title: '单价', dataIndex: 'unitPrice' },
{
title: '入库数量',
dataIndex: 'total',
render: (text, reocrd) => {
return (
<InputNumber />
)
} },
{ title: '入库金额', dataIndex: 'price' },
{ title: '操作', render: (text, record) => (<a>删除</a>)}
];
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title="新建加工发货单"
extra={[
<Button
key="1"
type="primary"
icon={<SaveOutlined />}
loading={submitLoading}
onClick={() => formActions.submit()}
>
保存
</Button>,
]}
>
<Card>
<NiceForm
schema={schema}
actions={formActions}
components={{ DatePicker, Select}}
expressionScope={{
tableAddButton,
tableColumns: docDetailColumn()
}}
/>
{/* 加工商品Modal框 */}
<SelectGoods
visible={modalProducVisible}
cancel={() => setModalProductVisible(false)}
></SelectGoods>
</Card>
</PageHeaderWrapper>
)
}
export default createProcessStock
src/pages/handling/confirm/createProcessInvoice/schema.tsx deleted 100644 → 0
View file @ 0ca4ecdc
/**
* @author Bill
* @description 新建加工发货单 schema
*/
import { ISchema } from '@formily/antd';
const basicTab = {
'tab-1': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
'tab': '基本信息'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 8,
labelAlign: 'left'
},
properties: {
type: {
title: '单据类型',
type: 'string',
enum: [],
'x-rules': [
{
required: true, // 自定义校验规则
message: '请选择单据类型'
}
],
},
warehouse: {
type: 'string',
title: '对应仓库',
enum: [],
"x-rules": [
{
required: true,
message: '请选择对应仓库'
}
],
},
desc: {
type: 'string',
title: '单据摘要',
"x-rules": [
{
required: true,
message: '请填写单据摘要'
},
{
limitByte: true, // 自定义校验规则
maxByte: 60
}
]
},
time: {
type: 'string',
title: '单据时间',
'x-component': 'DatePicker',
'x-rules': [
{
required: true,
message: '请选择单据时间'
}
]
},
warehousePeople: {
type: 'string',
title: '仓库人员',
'x-rules': [
{
required: true,
message: '请选择单据时间'
}
]
},
correspondingDoc: {
type: 'radio',
title: '对应单据',
required: true,
enum: [
{
label: '生产通知单',
value: 1
}
],
default: 1
},
connectDoc: {
type: 'text',
title: '关联单据'
},
memberName: {
type: 'text',
title: '会员名称'
},
address: {
type: 'text',
title: '收货地址',
},
method: {
type: 'text',
title: '配送方式'
}
}
}
}
}
}
const detailTab = {
'tab-2': {
type: 'object',
'x-component': 'tabpane',
'x-component-props': {
tab: '单据明细'
},
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 24,
labelAlign: 'left'
},
properties: {
someLists: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
},
'x-component': 'MultTable',
'x-component-props': {
rowKey: 'id',
prefix: "{{tableAddButton}}",
columns: "{{tableColumns}}",
}
}
}
}
}
}
}
const schema: ISchema = {
type: 'object',
properties: {
'Tabs': {
type: 'object',
'x-component': 'tab',
'x-component-props': {
type: 'card'
},
properties: {
...basicTab,
...detailTab,
}
}
}
}
export default schema
\ No newline at end of file
src/pages/home/components/Authorize/index.tsx 0 → 100644
View file @ 5d47ea7f
import React from 'react';
import { getAuth } from '@/utils/auth';
interface Iprops {
url: string
}
const Authorize: React.FC<Iprops> = (props) => {
const auth = getAuth();
const authUrls = auth.urls;
return (
<>
{
authUrls.includes(props.url)
? props.children
: null
}
</>
)
}
export default Authorize
\ No newline at end of file
src/pages/home/components/Centers/Container.less
View file @ 5d47ea7f
.container {
padding: 24px 24px 0 24px ;
padding: 24px 24px 16px 24px ;
background-color: #fff;
.header {
display: flex;
......
src/pages/home/components/Centers/Container.tsx
View file @ 5d47ea7f
......@@ -35,7 +35,6 @@ const AbilityContainer: React.FC<Iprops> = (props) => {
props.request &&
props.request()
.then(({code, data}) => {
console.log(123);
if(code === 1000) {
setData(data)
}
......
src/pages/home/components/Centers/LogisticsCenter.tsx
View file @ 5d47ea7f
......@@ -49,7 +49,6 @@ const LogisticsCenter: React.FC<Iprops> = () => {
>
{
({loading, requestData}) => {
console.log(requestData);
return (
<>
{
......
src/pages/home/components/Centers/ProcessCenter.tsx
View file @ 5d47ea7f
......@@ -12,12 +12,6 @@ const KEY_TITLE = {
}
const ProcessCenter: React.FC<Iprops> = () => {
const data = [
{
id: 1,
list: [1,2,3,4]
},
]
///report/member/home/getEnhanceTally
const request = useCallback(async () => {
const res = await PublicApi.getReportMemberHomeGetEnhanceTally();
......@@ -34,8 +28,6 @@ const ProcessCenter: React.FC<Iprops> = () => {
>
{
({loading, requestData}) => {
console.log(requestData);
const isArray = Array.isArray(requestData);
return (
<>
{
......
src/pages/home/components/Centers/SettlementCenter.tsx
View file @ 5d47ea7f
......@@ -9,6 +9,7 @@ import settlement_accountPayable from '@/assets/imgs/settlement_accountPayable.p
import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
import { PublicApi } from '@/services/api'
import { Link } from 'umi'
import { getAuth } from '@/utils/auth';
interface Iprops {};
const KEY_TITLE = {
......@@ -18,31 +19,36 @@ const KEY_TITLE = {
receivableList: '应收账款结算'
}
const SettlementCenter: React.FC<Iprops> = () => {
const userAuth = getAuth();
const urls = userAuth.urls;
const tagsList = [
{
icon: settlement_platformCollection,
text: '平台代收款结算'
text: '平台代收款结算',
url: '/memberCenter/balance/platformSettlement/accountReceivable'
},
{
icon: settlement_integrate,
text: '平台积分结算'
text: '平台积分结算',
url: '/memberCenter/balance/platformSettlement/integral'
},
{
icon: settlement_accountReceive,
text: '应收账款结算'
text: '应收账款结算',
url: '/memberCenter/balance/accountsReceivable/settlementList'
},
{
icon: settlement_accountPayable,
text: '应付账款结算'
text: '应付账款结算',
url: '/memberCenter/balance/accountsPayable/settlementList'
},
{
icon: settlement_invoice,
text: '开票管理'
text: '开票管理',
url: '/memberCenter/balance/accountsReceivable/invoice'
}
]
const request = useCallback(async () => {
///report/member/home/getSettleAccountTally
const res = await PublicApi.getReportMemberHomeGetSettleAccountTally();
return res;
}, [])
......@@ -50,9 +56,6 @@ const SettlementCenter: React.FC<Iprops> = () => {
<AbilityContainer
title="结算中心"
tips="提供资资金结算、发票管理等功能"
extra={
<a>进入资金与结算中心</a>
}
request={request}
>
{
......@@ -66,13 +69,17 @@ const SettlementCenter: React.FC<Iprops> = () => {
<div className={styles.tags}>
{
tagsList.map((item) => {
const hasAuth = !urls.includes(item.url);
if(!hasAuth) {
return null
}
return (
<div className={styles.tagsItem} key={item.text}>
<Link to={item.url} className={styles.tagsItem} key={item.text}>
<div className={styles.icon}>
<img src={item.icon} />
</div>
<div className={styles.text}>{item.text}</div>
</div>
</Link>
)
})
}
......
src/pages/home/components/Centers/ShopCenter.tsx
View file @ 5d47ea7f
......@@ -3,28 +3,38 @@ import AbilityContainer from './Container';
import styles from './center.less'
import create_shop from '@/assets/imgs/create_shop.png';
import { BellOutlined } from '@ant-design/icons'
import { getAuth } from '@/utils/auth';
import { Link } from 'umi';
import Authorize from '../Authorize';
interface Iprops {}
const SHOP_CENTER = '/memberCenter/shopAbility/template'
const CREATE_SHOP = '/memberCenter/shopAbility/infoManage';
const ShopCenter: React.FC<Iprops> = () => {
return (
<AbilityContainer
title="店铺中心"
tips="轻松完成店铺的创建、店铺风格选择、店铺个性化装修"
extra={
<Authorize url={SHOP_CENTER}>
<div>
<a>进入店铺中心</a>
<Link to={SHOP_CENTER}>进入店铺中心</Link>
</div>
</Authorize>
}
>
<div className={styles.tags}>
<Authorize url={CREATE_SHOP}>
<div className={styles.tagsSpecial} >
<div className={styles.tagsItem}>
<Link to={CREATE_SHOP} className={styles.tagsItem}>
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>创建店铺</div>
</div>
</Link>
<div className={styles.ding_tips}>
<div className={styles.ding_icon}>
<BellOutlined />
......@@ -32,18 +42,23 @@ const ShopCenter: React.FC<Iprops> = () => {
<span>你还没有创建店铺，请先创建店铺</span>
</div>
</div>
<div className={styles.tagsItem} >
</Authorize>
<Authorize url={SHOP_CENTER}>
<Link to={SHOP_CENTER} className={styles.tagsItem} >
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>店铺模板</div>
</div>
<div className={styles.tagsItem} >
</Link>
</Authorize>
<Authorize url={SHOP_CENTER}>
<Link to={SHOP_CENTER} className={styles.tagsItem} >
<div className={styles.icon}>
<img src={create_shop} />
</div>
<div className={styles.text}>店铺装修</div>
</div>
</Link>
</Authorize>
</div>
</AbilityContainer>
)
......
src/pages/home/components/Centers/center.less
View file @ 5d47ea7f
......@@ -37,7 +37,7 @@
}
.tags {
padding: 24px 0;
padding: 24px 0 10px 0;
display: flex;
flex-direction: row;
align-items: center;
......
src/pages/home/components/CustomWorkBench/Card.tsx
View file @ 5d47ea7f
......@@ -27,6 +27,8 @@ export interface CardProps {
text: string
index: number
moveCard: (dragIndex: number, hoverIndex: number) => void
isShow: string,
handleChangeShow: (index: number, isShow: boolean) => void
}
interface DragItem {
......@@ -34,7 +36,7 @@ interface DragItem {
id: string
type: string
}
export const Card: React.FC<CardProps> = ({ id, text, index, moveCard }) => {
export const Card: React.FC<CardProps> = ({ id, text, index, moveCard, isShow, handleChangeShow }) => {
const ref = useRef<HTMLDivElement>(null)
const [, drop] = useDrop({
accept: ItemTypes.CARD,
......@@ -75,6 +77,10 @@ export const Card: React.FC<CardProps> = ({ id, text, index, moveCard }) => {
}),
})
const handleChange = (index, e) => {
handleChangeShow(index, e.target.checked);
}
const opacity = isDragging ? 0 : 1
drag(drop(ref))
return (
......@@ -82,7 +88,7 @@ export const Card: React.FC<CardProps> = ({ id, text, index, moveCard }) => {
<span>
{text}
</span>
<Checkbox />
<Checkbox checked={isShow == '1'} onChange={(e) => handleChange(index, e)}/>
</div>
)
}
src/pages/home/components/CustomWorkBench/DragSortList.tsx
View file @ 5d47ea7f
import React, { useState, useCallback, useEffect } from 'react'
import { Card } from './Card'
import update from 'immutability-helper'
const style = {
height: "500px",
......@@ -20,27 +19,30 @@ export interface ContainerState {
interface Iprops {
cards: any[],
moveCard: (dragIndex: number, hoverIndex: number) => void
moveCard: (dragIndex: number, hoverIndex: number) => void,
handleChangeShow: (index: number, isShow: boolean) => void
}
const Container: React.FC<Iprops> = (props) => {
const { cards } = props;
const renderCard = (card: { id: number; text: string }, index: number) => {
const renderCard = (card: any, index: number) => {
return (
<Card
key={card.id}
key={card.code}
index={index}
id={card.id}
text={card.text}
id={card.code}
text={card.name}
isShow={card.isShow}
moveCard={props.moveCard}
handleChangeShow={props.handleChangeShow}
/>
)
}
return (
<>
<div style={style}>{cards.map((card, i) => renderCard(card, i))}</div>
<div style={style}> {cards.map((card, i) => renderCard(card, i))}</div>
</>
)
}
......
src/pages/home/components/CustomWorkBench/index.tsx
View file @ 5d47ea7f
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, useCallback, useReducer } from 'react';
import { Modal } from 'antd';
import styles from './index.less';
import { CloseOutlined } from '@ant-design/icons';
......@@ -9,22 +9,12 @@ import update from 'immutability-helper';
import home_workBench from '@/assets/imgs/home_workBench.png';
interface Iprops {
centerOrder: any,
handleChangeOrder: (list: any[]) => void
}
const TEXT = {
["shop"]: '店铺中心',
["trade"]: '交易中心',
["process"]: '加工中心',
["settlement"]: '资金与结算中心',
["afterSold"]: "售后中心",
["logistics"]: '物流中心',
["product"]: '商品中心'
handleChangeOrder: (list: any[]) => void,
layouts: any[],
}
const CustomWorkBench: React.FC<Iprops> = (props) => {
const { centerOrder } = props;
const { layouts } = props;
const [ cards, setCards ] = useState([]);
const [visible, setVisible] = useState<boolean>(false);
const handleVisible = () => {
......@@ -36,17 +26,12 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
}
useEffect(() => {
const data = Object.keys(centerOrder).map((item) => ({
id: centerOrder[item],
key: item,
text: TEXT[item]
}))
setCards(data)
}, [centerOrder])
if(visible) {
setCards(layouts);
}
}, [visible]);
const moveCard = useCallback(
(dragIndex: number, hoverIndex: number) => {
const moveCard = useCallback((dragIndex: number, hoverIndex: number) => {
const dragCard = cards[dragIndex]
setCards(
update(cards, {
......@@ -56,12 +41,24 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
],
}),
)
},
[cards],
)
}, [cards])
const handleChangeShow = useCallback((index, isShow) => {
setCards((state) => {
const item = state[index];
item.isShow = isShow ? 1 : 0
return [...state]
})
}, [])
const handleOk = () => {
props.handleChangeOrder && props.handleChangeOrder(cards);
const sortedData = cards.map((item, key) => {
return {
...item,
sort: key + 1
}
})
props.handleChangeOrder && props.handleChangeOrder(sortedData);
setVisible(false);
}
......@@ -94,7 +91,7 @@ const CustomWorkBench: React.FC<Iprops> = (props) => {
</div>
<div className={styles.content}>
<DndProvider backend={HTML5Backend}>
<DragSortList cards={cards} moveCard={moveCard} />
<DragSortList cards={cards} moveCard={moveCard} handleChangeShow={handleChangeShow} />
</DndProvider>
</div>
<div className={styles.footer}>
......
src/pages/home/components/UserCenter/index.less
View file @ 5d47ea7f
......@@ -59,7 +59,11 @@
height: 56px;
margin-right: 12px;
border-radius: 50%;
background-color: red;
// background-color: red;
img {
width: 100%;
height: 100%;
}
}
.wrapper {
......
src/pages/home/components/UserCenter/index.tsx
View file @ 5d47ea7f
import React from 'react';
import styles from './index.less';
import moment from 'moment';
import { Row, Col, Tag, Badge } from 'antd';
import { Row, Col, Badge } from 'antd';
import level1 from '@/assets/imgs/level1.png';
import level2 from '@/assets/imgs/level2.png';
import home_user from '@/assets/imgs/home_user.png';
import level3 from '@/assets/imgs/level3.png';
import level4 from '@/assets/imgs/level4.png';
import { Link } from 'umi';
import { getAuth } from '@/utils/auth';
import StatusTag from '@/components/StatusTag';
import home_user from '@/assets/imgs/home_user.png';
interface Iprops {}
const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"]
const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"];
const LEVEL_IMAGE = [level1, level2, level3, level4];
const EDIT_USER_URL = '/memberCenter/memberAbility/query';
const USER_CENTER_URL = '/memberCenter/memberAbility/manage/maintain'
const UserCenter: React.FC<Iprops> = () => {
const today = moment();
const userAuth = getAuth();
const hasChangeMemberAuth = userAuth?.urls.includes(EDIT_USER_URL);
const hasCenterAuth = userAuth?.urls.includes(USER_CENTER_URL);
return (
<div className={styles.container}>
<div className={styles.header}>
......@@ -31,31 +40,37 @@ const UserCenter: React.FC<Iprops> = () => {
<div className={styles.content}>
<Row className={styles.row}>
<Col span={11} className={styles.user}>
<div className={styles.pic}></div>
<div className={styles.pic} style={!userAuth.logo ? {display: 'none'} : {}}>
<img src={userAuth.logo} />
</div>
<div className={styles.wrapper}>
<div className={styles.company}>
<span>温州市隆昌皮业有限公司</span>
<span>{userAuth.company}</span>
<div className={styles.tags}>
<Tag>采购商</Tag>
<Tag>采购商</Tag>
{
userAuth.roles.map((item, key) => {
return (
<StatusTag type="success" key={key} title={item.memberRoleName} />
)
})
}
</div>
</div>
<div className={styles.status}>
<Badge status={"error"} text={"审核不通过"}></Badge>
<Badge status={"error"} text={userAuth.validateStatusDesc}></Badge>
</div>
</div>
</Col>
<Col span={3}>
<a>修改会员信息</a>
<Col span={3} style={hasChangeMemberAuth ? {} : {display: 'none'}}>
<Link to={EDIT_USER_URL}>修改会员信息</Link>
</Col>
<Col span={4}>
<span>会员等级： </span>
<img src={level2} className={styles.level} />
<img src={LEVEL_IMAGE[userAuth.level]} className={styles.level} />
</Col>
<Col span={3}>平台积分: <strong>10,000</strong></Col>
<Col span={3}>
<a>进入会员中心</a>
<Col span={3}>平台积分: <strong>{userAuth.score}</strong></Col>
<Col span={3} style={!hasCenterAuth ? { display: 'none'} : null}>
<Link to={USER_CENTER_URL}>进入会员中心</Link>
</Col>
</Row>
</div>
......
src/pages/home/index.tsx
View file @ 5d47ea7f
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Row, Col, Button } from 'antd';
import { Row, Col, Button, message } from 'antd';
import UseGuaid from './components/UseGuaid';
import UserCenter from './components/UserCenter';
import CustomWorkBench from './components/CustomWorkBench';
......@@ -11,28 +11,47 @@ import AdvertisementContainer from './components/AdvertisementSpace';
import { TradeCenter,FundCenter, ShopCenter, ProductCenter, SettlementCenter, AfterSoldCenter, LogisticsCenter, ProcessCenter } from './components/Centers';
import styles from './index.less'
import { CompassFilled } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
const ComponentSelect = {
"交易中心": TradeCenter,
"店铺中心": ShopCenter,
"商品中心": ProductCenter,
"资金账户管理中心": FundCenter,
"结算中心": SettlementCenter,
"售后中心": AfterSoldCenter,
"物流中心": LogisticsCenter,
"加工中心": ProcessCenter,
"数据中心": '',
"风控中心": ''
}
const Home: React.FC<{}> = () => {
const [visible, setVisible] = useState<boolean>(false);
const [centerOrder, setCenterOrder] = useState<any>({
trade: 1,
shop: 2,
product: 3,
settlement: 4,
afterSold: 5,
logistics: 6,
process: 7
const [loading, setLoading] = useState<boolean>(false);
const [layout, setLayout] = useState<any>([]);
useEffect(() => {
setLoading(true);
PublicApi.getReportMemberHomeGetDataLayout()
.then(({data, code}) => {
if(code === 1000) {
console.log(data);
setLayout(data)
}
}).finally(() => {
setLoading(false)
})
}, [])
const handleChangeOrder = (list) => {
console.log(list);
let res = {}
list.forEach((item, index) => {
res[item.key] = index + 1
PublicApi.postReportMemberHomeUpdateDataLayout(list)
.then(({ code, data }) => {
if(code === 1000) {
setLayout(list);
}
})
console.log(res);
setCenterOrder(res);
}
return (
<PageHeaderWrapper>
<>
......@@ -44,34 +63,31 @@ const Home: React.FC<{}> = () => {
<div>
<UserCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["trade"]}}>
<TradeCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["shop"]}}>
<ShopCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["product"]}}>
<ProductCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["product"]}}>
<FundCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["settlement"]}}>
<SettlementCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["afterSold"]}}>
<AfterSoldCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["logistics"]}}>
<LogisticsCenter />
</div>
<div className={styles.ability} style={{order: centerOrder["process"]}}>
<ProcessCenter />
{
layout.map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{
RenderComponent &&
<RenderComponent />
}
</div>
)
})
}
</div>
<div className={styles.rightSide}>
<Row gutter={24}>
<Col><CustomWorkBench centerOrder={centerOrder} handleChangeOrder={handleChangeOrder} /></Col>
<Col>
<CustomWorkBench
handleChangeOrder={handleChangeOrder}
layouts={layout}
/></Col>
<Col>
<div className={styles.controller} onClick={() => setVisible((state) => !state)}>
<CompassFilled className={styles.icon} />
......
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