Skip to content

J
jinfa-platform
Commit b0c877be authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

Merge branch 'dev' into test

parents 7f44cb57 4ad13e89
Hide whitespace changes
Inline Side-by-side
Showing with 970 additions and 391 deletions
config/routes/logisticsRoutes.ts
View file @ b0c877be
......@@ -127,13 +127,6 @@ const LogisticsRoute: RouterChild = {
path: '/memberCenter/logisticsAbility/logisticsSubmit',
name: 'logisticsSubmit',
routes: [
// 新增
{
path: '/memberCenter/logisticsAbility/logisticsSubmit/addLogistics',
name: 'addToOrderSubmit',
component: '@/pages/logistics/addLogistics',
hideInMenu: true
},
// 快递单查询
{
path: '/memberCenter/logisticsAbility/logisticsSubmit/orderSubmitSearchList',
......@@ -154,31 +147,17 @@ const LogisticsRoute: RouterChild = {
component: '@/pages/logistics/logisticsSubmit/toOrderSumitList',
},
// 待提交物流单-新增
// {
// path: '/memberCenter/logisticsAbility/logisticsSubmit/toOrderSumitList/add',
// name: 'addToOrderSubmit',
// component: '@/pages/logistics/logisticsSubmit/toOrderSubmitDetail',
// hideInMenu: true
// },
// 待提交物流单-新增
{
path: '/memberCenter/logisticsAbility/logisticsSubmit/toOrderSumitList/add',
name: 'addToOrderSubmit',
component: '@/pages/logistics/logisticsSubmit/detail',
component: '@/pages/logistics/addLogistics',
hideInMenu: true
},
// 待提交物流单-编辑
// {
// path: '/memberCenter/logisticsAbility/logisticsSubmit/toOrderSumitList/edit',
// name: 'editToOrderSubmit',
// component: '@/pages/logistics/logisticsSubmit/toOrderSubmitDetail',
// hideInMenu: true
// },
// 待提交物流单-编辑
{
path: '/memberCenter/logisticsAbility/logisticsSubmit/toOrderSumitList/edit',
name: 'editToOrderSubmit',
component: '@/pages/logistics/logisticsSubmit/detail',
component: '@/pages/logistics/addLogistics',
hideInMenu: true
},
]
......
src/pages/logistics/addLogistics/components/ModalTableOrder.tsx 0 → 100644
View file @ b0c877be
import React, { ReactText, useRef, useEffect, useLayoutEffect, useState } from 'react';
import { StandardTable } from 'god';
import { ISchema } from '@formily/antd';
import NestTable from '@/components/NestTable';
import { IStandardTableProps } from 'god/dist/src/standard-table';
import { Row, Col, Modal, Form, Radio } from 'antd';
import Search from '@/components//NiceForm/components/Search';
import SearchSelect from '@/components//NiceForm/components/SearchSelect';
import Submit from '@/components//NiceForm/components/Submit';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import DateSelect from '@/components//NiceForm/components/DateSelect';
import { PublicApi } from '@/services/api';
export interface ModalTableProps extends IStandardTableProps<any> {
width?: number,
confirm?: Function,
cancel?(),
visible?: boolean,
resetModal?: object,
useNestTable?: boolean, // 是否使用嵌套表格
nestColumns?: any[],
nestTableProps?: any,
// fix: 新增参数， 为true时每次开启弹窗都会重新reload接口
forceRender?: boolean,
invoicesNo?: string, // 对应订单号/售后单号
relevanceType?: number, //对应单据类型
}
export const logisticsDeliverySearchSchema: ISchema = {
type: 'object',
properties: {
invoicesNo: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '单据号',
align: 'flex-left',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
style: {
marginRight: 0
}
},
colStyle: {
marginTop: 20,
},
},
properties: {
orderNo: {
type: 'string',
"x-component-props": {
placeholder: '会员名称',
style: {
width: 160
}
}
},
invoicesAbstract: {
type: 'string',
"x-component-props": {
placeholder: '单据摘要',
style: {
width: 160
}
}
},
"[startTransactionTime,endTransactionTime]": {
type: 'string',
"x-component": "dateSelect",
"x-component-props": {
placeholder: '单据时间（全部）',
}
},
submit: {
"x-component": 'Submit',
"x-mega-props": {
span: 1
},
"x-component-props": {
children: '查询'
}
}
}
}
}
}
export const otherSearchSchema: ISchema = {
type: 'object',
properties: {
applyNo: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '申请单号',
align: 'flex-left',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
style: {
marginRight: 0
}
},
colStyle: {
marginTop: 20,
},
},
properties: {
memberName: {
type: 'string',
"x-component-props": {
placeholder: '会员名称',
style: {
width: 160
}
}
},
applyAbstract: {
type: 'string',
"x-component-props": {
placeholder: '单据摘要',
style: {
width: 160
}
}
},
"[startTime,endTime]": {
type: 'string',
"x-component": "dateSelect",
"x-component-props": {
placeholder: '单据时间（全部）',
}
},
submit: {
"x-component": 'Submit',
"x-mega-props": {
span: 1
},
"x-component-props": {
children: '查询'
}
}
}
}
}
}
const ModalTableOrder: React.FC<ModalTableProps> = (props) => {
const { width = 704, confirm, cancel, visible, currentRef, resetModal, forceRender, useNestTable = false, nestColumns, nestTableProps, invoicesNo, relevanceType, ...resetTable } = props
const selfRef = currentRef || useRef<any>({})
useEffect(() => {
if (visible && forceRender) {
// 重新开启时需reload接口
// fix: 去掉自动reload接口, 防止重复请求
// fix: 新增forceRender接口， 用于控制弹窗是否需要reload
selfRef.current.reload && selfRef.current.reload()
} else {
selfRef.current.resetField && selfRef.current.resetField({
validate: false
})
}
}, [visible])
const [form] = Form.useForm();
const [type, setType] = useState<number>(1);
const [modalTitle, setmodalTitle] = useState<string>('订单');
useEffect(() => {
console.log(relevanceType)
setType(relevanceType)
}, [visible])
useEffect(() => {
form.setFieldsValue({
radio: type
})
}, [type])
const fetchData = (parmas?: any) => {
return new Promise(resolve => {
switch (type) {
case 1:
PublicApi.getOrderLogisticsOrderList({ ...parmas }).then(res => {
if (res.code === 1000) {
res.data.data.forEach((item:any) => {
item.applyNo = item.orderNo
item.applyAbstract = item.orderThe
item.applyTime = item.createTime
})
resolve(res.data)
}
})
break;
case 2:
PublicApi.getAsReplaceGoodsPageToBeAddReturnByLogistics({ ...parmas }).then((res:any) => {
if (res.code === 1000) {
res.data.data.forEach((item:any) => {
item.id = item.applyId
})
resolve(res.data)
}
})
break;
case 3:
PublicApi.getAsReplaceGoodsPageToBeAddReplaceByLogistics({ ...parmas }).then((res:any) => {
if (res.code === 1000) {
res.data.data.forEach((item:any) => {
item.id = item.applyId
})
resolve(res.data)
}
})
break;
case 4:
PublicApi.getAsReturnGoodsPageByLogistics({ ...parmas }).then((res:any) => {
if (res.code === 1000) {
res.data.data.forEach((item:any) => {
item.id = item.applyId
})
resolve(res.data)
}
})
break;
}
})
}
return (
<Modal
width={width}
title={modalTitle}
onOk={() => confirm(type)}
onCancel={cancel}
visible={visible}
{...resetModal}
maskClosable={false}
>
{
useNestTable ? (
<NestTable
NestColumns={nestColumns}
className="common_tb"
rowClassName={(_, index) => (index % 2) === 0 && "tb_bg"}
{...nestTableProps}
/>
) : (
<StandardTable
tableType='small'
currentRef={selfRef}
fetchTableData={(params) => fetchData(params)}
formRender={(child, ps) => <Row justify='space-between' style={{ marginBottom: 16 }}>
<Col span={18} style={{ zIndex: 99 }}>
<Form form={form}>
<Form.Item name='radio' label='单据选择'>
<Radio.Group onChange={(e) => { setType(e.target.value); selfRef.current.reload(); }}>
<Radio value={1}>订单</Radio>
<Radio value={2}>换货申请单（退货发货）</Radio>
<Radio value={3}>换货申请单（换货发货）</Radio>
<Radio value={4}>退货申请单</Radio>
</Radio.Group>
</Form.Item>
</Form>
</Col>
<Col style={{ marginTop: 4 }}>{ps}</Col>
<Col span={18} style={{ zIndex: 99 }}>{child}</Col>
</Row >}
formilyProps={
{
ctx: {
schema: type === 1 ? logisticsDeliverySearchSchema : otherSearchSchema,
components: { ModalSearch: Search, SearchSelect, Submit, DateSelect },
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
type === 1 ? 'invoicesNo' : 'applyNo',
FORM_FILTER_PATH,
);
}
}
}
}
{...resetTable}
/>
)
}
</Modal>
)
}
ModalTableOrder.defaultProps = {}
export default ModalTableOrder
src/pages/logistics/addLogistics/index.tsx
View file @ b0c877be
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import styles from './index.less';
import ReturnEle from '@/components/ReturnEle';
import { ColumnType } from 'antd/lib/table/interface';
import { Tabs, Button, Card, Form, Input, Select, Table, Row, Col, Statistic } from 'antd';
import { Tabs, Button, Card, Form, Input, Select, Table, Row, Col, Statistic, message, Badge } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { LinkOutlined, PlusOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import ModalTable from '@/components/ModalTable';
import { SelectGoodsColumns } from './components/columns';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import moment from 'moment';
import ModalTableOrder from './components/ModalTableOrder';
const { TabPane } = Tabs;
const { Search } = Input;
const { Option } = Select;
......@@ -19,41 +21,52 @@ const layout: any = {
wrapperCol: { span: 9 },
labelAlign: "left"
};
const TabFormErrors = (props) => {
return (
<Badge size="small" count={props.dot} offset={[6, -5]}>
{props.children}
</Badge>
)
}
/**
* @id: 订单id
* @shipmentOrderCode: 对应发货单号
* @relevanceOrderCode: 对应订单号/售后单
* @relevanceType: 1-销售订单 2-换货申请单(退货发货) 3-换货申请单(换货发货) 4-退货申请单 -> (自新建的时候才有这个)
* @createType: 1-物流能力创建2-销售发货订单创建3-生产通知订单创建4-换货申请创建5-换货处理创建6-退货申请创建,-> (默认没有为自新建)
* ps: 列表得返回这个物流的是哪个createType的,才能进行对象的接口请求
*/
const AddLogistics: React.FC<{}> = () => {
const ref = useRef<any>();
const { id, shipmentOrderCode, relevanceOrderCode, relevanceType } = history.location.query;
const [data, setdata] = useState<any>([]); //表格列表数据
const [detailList, setdetailList] = useState<any>([]); //表格列表数据
const [query, setQuery] = useState<any>({}); //表提交的数据
const [visible, setvisible] = useState<boolean>(false);
const [createType, setCreateType] = useState<number>(Number(history.location.query.createType)); /**创建方式 */
const [goodsRowSelection, goodsRowCtl] = useRowSelectionTable({ customKey: 'productId' })
const [shippingvisible, setshippingvisible] = useState<boolean>(false);
const [invoicesvisible, setinvoicesvisible] = useState<boolean>(false);
const [shippingRowSelection, shippingRowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio' });
const [invoicesRowSelection, invoicesRowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio' });
const [id, setId] = useState<any>(history.location.query.id);
const [relevanceType, setrelevanceType] = useState<number>(1)
const [createType, setCreateType] = useState<number>(Number(history.location.query.createType) || 1); /**创建方式 */
const [goodsRowSelection, goodsRowCtl] = useRowSelectionTable({ customKey: 'id' })
const [listShipperAddress, setListShipperAddress] = useState<any>([]); //发货地址
const [listMemberCompany, setListMemberCompany] = useState<any>([]); //物流服务商
const [badge, setbadge] = useState<any>([0, 0]);
const [memberInfo, setmemberInfo] = useState<any>({});
const [form] = Form.useForm();
const [goodsForm] = Form.useForm();
/**输入框输入 */
const inputOnchange = (id, e, name) => {
const { value } = e.target
data.forEach(v => {
detailList.forEach(v => {
if (v.productId === id) {
v[name] = value
}
})
setdata([...data])
setdetailList([...detailList])
countTotal(name)
}
/** 计算总数 */
const countTotal = (name?: string) => {
let num: any = 0
data.forEach((item: any, idx: number) => {
detailList.forEach((item: any, idx: number) => {
if (name === 'carton') {
num += item.carton ? Number(item.carton) : 0
} else if (name === 'weight') {
......@@ -136,7 +149,7 @@ const AddLogistics: React.FC<{}> = () => {
title: '操作',
key: 'options',
dataIndex: 'options',
render: (text: any, record: any, index: number) => <Button type='link' onClick={() => onHandleDelect(index)}>删除</Button>
render: (text: any, record: any, index: number) => <Button type='link' onClick={() => handleDelect(index)}>删除</Button>
}
]
/**接口请求 */
......@@ -162,11 +175,6 @@ const AddLogistics: React.FC<{}> = () => {
setListShipperAddress(res)
}).catch(error => console.log(error));
switch (Number(createType)) {
case 1:
if(id) {
}
break;
case 2:
PublicApi.getWarehouseInvoicesDetails({ invoicesId: id }).then((res: any) => {
if (res.code === 1000) {
......@@ -177,7 +185,9 @@ const AddLogistics: React.FC<{}> = () => {
shipmentOrderCode: res.data.invoicesNo,
relevanceOrderCode: res.data.orderNo,
voucherTime: res.data.transactionTime,
externalState: res.data.state
externalState: res.data.state,
shipmentOrderId: res.data.invoicesTypeId,
relevanceOrderId: res.data.relevanceInvoicesId,
}
form.setFieldsValue(obj);
setQuery({ ...obj })
......@@ -194,7 +204,9 @@ const AddLogistics: React.FC<{}> = () => {
shipmentOrderCode: res.data.deliveryNo,
relevanceOrderCode: res.data.orderNo,
voucherTime: res.data.transactionTime,
externalState: res.data.state
externalState: res.data.state,
shipmentOrderId: res.data.deliveryId,
relevanceOrderId: res.data.id,
}
form.setFieldsValue(obj);
setQuery({ ...obj })
......@@ -202,7 +214,7 @@ const AddLogistics: React.FC<{}> = () => {
})
break;
case 4:
PublicApi.getAsReplaceGoodsPageReturnDetailByLogistics({replaceId: id}).then((res: any) => {
PublicApi.getAsReplaceGoodsPageReturnDetailByLogistics({ replaceId: id }).then((res: any) => {
if (res.code === 1000) {
const obj = {
receiverName: res.data.receiveUserName,
......@@ -210,6 +222,7 @@ const AddLogistics: React.FC<{}> = () => {
receiverFullAddress: res.data.receiveAddress,
relevanceOrderCode: res.data.applyNo,
voucherTime: res.data.applyTime,
relevanceOrderId: res.data.applyId,
externalState: res.data.state,
digest: res.data.applyAbstract
}
......@@ -219,7 +232,7 @@ const AddLogistics: React.FC<{}> = () => {
})
break;
case 5:
PublicApi.getAsReplaceGoodsPageReplaceDetailByLogistics({replaceId: id}).then((res: any) => {
PublicApi.getAsReplaceGoodsPageReplaceDetailByLogistics({ replaceId: id }).then((res: any) => {
if (res.code === 1000) {
const obj = {
receiverName: res.data.receiveUserName,
......@@ -227,6 +240,7 @@ const AddLogistics: React.FC<{}> = () => {
receiverFullAddress: res.data.receiveAddress,
relevanceOrderCode: res.data.applyNo,
voucherTime: res.data.applyTime,
relevanceOrderId: res.data.applyId,
externalState: res.data.state,
digest: res.data.applyAbstract
}
......@@ -243,6 +257,7 @@ const AddLogistics: React.FC<{}> = () => {
receiverPhone: res.data.receiveUserTel,
receiverFullAddress: res.data.receiveAddress,
relevanceOrderCode: res.data.applyNo,
relevanceOrderId: res.data.applyId,
voucherTime: res.data.applyTime,
externalState: res.data.state,
digest: res.data.applyAbstract
......@@ -253,6 +268,40 @@ const AddLogistics: React.FC<{}> = () => {
})
break;
}
/**进来编辑的时候回显数据 */
const { pathname, query } = history.location;
const path = pathname.split('/')[pathname.split('/').length - 1];
if (path === 'edit') {
PublicApi.getLogisticsOrderWaitSubmitGet({ id: query.id }).then(res => {
if (res.code === 1000) {
const obj = {
id: query.id,
digest: res.data.digest,
createType: res.data.createType,
relevanceType: res.data.relevanceType,
companyName: res.data.companyName,
companyId: res.data.companyId,
logisticsOrderNo: res.data.logisticsOrderNo,
receiverName: res.data.receiverName,
receiverPhone: res.data.receiverPhone,
receiverFullAddress: res.data.receiverFullAddress,
shipmentOrderCode: res.data.shipmentOrderCode,
shipmentOrderId: res.data.shipmentOrderId,
relevanceOrderCode: res.data.relevanceOrderCode,
relevanceOrderId: res.data.relevanceOrderId,
voucherTime: res.data.invoicesTime,
externalState: res.data.status,
shipperAddressId: res.data.shipperAddressId,
shipperFullAddress: res.data.shipperFullAddress,
}
setQuery(obj)
setId(query.id)
setCreateType(res.data.createType)
setdetailList(res.data.detailList)
}
})
}
}, [])
/** 选择物流服务伤 */
......@@ -260,6 +309,7 @@ const AddLogistics: React.FC<{}> = () => {
const obj = { ...query }
obj.companyId = option.value
obj.companyName = option.children
setmemberInfo({ memberId: option.memberid, roleId: option.roleid })
setQuery(obj)
}
......@@ -275,35 +325,42 @@ const AddLogistics: React.FC<{}> = () => {
const fetchData = (params?: any) => {
return new Promise(resolve => {
switch (Number(createType)) {
case 1:
case 2:
case 3:
PublicApi.getWarehouseInvoicesProductList({...params, invoicesId: id}).then(res => {
if(res.code === 1000) {
PublicApi.getWarehouseInvoicesProductList({ ...params, invoicesId: id }).then((res:any) => {
if (res.code === 1000) {
res.data.data.forEach(item => {
item.category = item.categoryName
item.brand = item.brandName
})
resolve(res.data)
}
})
break;
case 4:
PublicApi.getAsReplaceGoodsPageReturnCommodityByLogistics({...params, dataId: id}).then(res => {
if(res.code === 1000) {
PublicApi.getAsReplaceGoodsPageReturnCommodityByLogistics({ ...params, dataId: id }).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
break;
case 5:
PublicApi.getAsReplaceGoodsPageReplaceCommodityByLogistics({...params, dataId: id}).then(res => {
if(res.code === 1000) {
PublicApi.getAsReplaceGoodsPageReplaceCommodityByLogistics({ ...params, dataId: id }).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
break;
case 6:
PublicApi.getAsReturnGoodsPageCommodityByLogistics({...params, dataId: id}).then(res => {
if(res.code === 1000) {
PublicApi.getAsReturnGoodsPageCommodityByLogistics({ ...params, dataId: id }).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
break;
default:
break;
}
})
}
......@@ -325,21 +382,231 @@ const AddLogistics: React.FC<{}> = () => {
volume: item.volume
})
})
setdata([...arr])
setdetailList([...arr])
setvisible(false)
console.log(selectRow, 10086)
}
/***表头区域 */
const ShippingColumns: ColumnType<any>[] = [
{
title: '发货单号',
dataIndex: 'invoicesNo',
},
{
title: '对应订单号',
dataIndex: 'orderNo',
},
{
title: '单据摘要',
dataIndex: 'invoicesAbstract',
},
{
title: '对应仓库',
dataIndex: 'inventory',
},
{
title: '单据类型',
dataIndex: 'invoicesType',
},
{
title: '单据时间',
dataIndex: 'transactionTime',
render: (text: any) => <>{moment(text).format('YYYY-MM-DD HH:mm:ss')} </>
}
]
const invoicesColumns: ColumnType<any>[] = [
{
title: '单据号',
dataIndex: 'applyNo',
},
{
title: '单据摘要',
dataIndex: 'applyAbstract',
},
{
title: '会员名称',
dataIndex: 'memberName',
},
{
title: '单据时间',
dataIndex: 'applyTime',
}
]
/** 选择发货单 列表数据 */
const fetchShippingData = (params: any) => {
return new Promise(resolve => {
PublicApi.getWarehouseInvoicesList({ ...params }).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
/**确定发货单 */
const handleShipping = () => {
const data = { ...query };
const selectRow = shippingRowCtl.selectRow[0]
data.shipmentOrderId = selectRow.id
data.shipmentOrderCode = selectRow.invoicesNo;//发货单号
data.receiverPhone = selectRow.phone;
data.receiverName = selectRow.receiverName;//收货方名称
data.receiverFullAddress = selectRow.fullAddress;
data.receiverMemberName = selectRow.memberName;
form.setFieldsValue({
shipmentOrderCode: selectRow.invoicesNo
})
setQuery({ ...data })
setId(selectRow.id)
setCreateType(1)
setshippingvisible(false);
}
/**确定对应订单号/售后单 */
const conditions = (selectRow: any) => {
const data = { ...query };
if (!data.shipmentOrderId) {
data.receiverPhone = selectRow.receiveUserTel;
data.receiverName = selectRow.receiveUserName;//收货方名称
data.receiverFullAddress = selectRow.receiveAddress;
data.receiverMemberName = selectRow.memberName;
data.receiverAddressId = selectRow.receiveId;
}
data.relevanceOrderId = selectRow.applyId
data.relevanceOrderCode = selectRow.applyNo
form.setFieldsValue({
relevanceOrderCode: selectRow.applyNo
})
setQuery({ ...data })
setId(selectRow.applyId)
}
/**确定选择对应订单号/售后单 */
const handleInvoices = (type: number) => {
const selectRow = invoicesRowCtl.selectRow[0]
const data = { ...query };
data.relevanceType = type;
setrelevanceType(type)
switch (type) {
case 1:
if (!data.shipmentOrderId) {
data.receiverPhone = selectRow.phone;
data.receiverName = selectRow.receiverName;//收货方名称
data.receiverAddressId = selectRow.receiverAddressId;
data.receiverFullAddress = selectRow.fullAddress;
data.receiverMemberName = selectRow.memberName;
}
data.relevanceOrderId = selectRow.id
data.relevanceOrderCode = selectRow.orderNo
form.setFieldsValue({
relevanceOrderCode: selectRow.orderNo
})
setQuery({ ...data });
setId(selectRow.id)
setCreateType(2)
break;
case 2:
conditions(selectRow)
setCreateType(4)
break;
case 3:
conditions(selectRow)
setCreateType(5)
break;
case 4:
conditions(selectRow)
setCreateType(6)
break;
}
setinvoicesvisible(false);
}
const handleDelect = (idx: number) => {
const list = [...detailList];
list.splice(idx, 1);
goodsRowCtl.setSelectRow(list)
goodsRowCtl.setSelectedRowKeys(list.map(v => v.productId));
setdetailList([...list])
goodsForm.resetFields();
}
/**打开选择商品 */
const handleVisible = () => {
console.log(query)
if(query.shipmentOrderId || query.relevanceOrderId) {
setvisible(true)
} else {
message.error('请先选择要操作的对应发货单号或对应订单号/售后单')
}
}
/** 提交数据 */
const handleSubmit = async () => {
const basicRef = await form.validateFields().then(res => { return true }).catch(error => { return error });
const goodsRef = await goodsForm.validateFields().then(res => { return true }).catch(error => { return error });
const data = [...badge]
if (basicRef.errorFields) {
data[0] = basicRef.errorFields.length;
setbadge(data);
} else {
data[0] = 0;
setbadge(data)
if (detailList.length > 0) {
if (goodsRef.errorFields) {
data[1] = goodsRef.errorFields.length;
setbadge(data);
} else {
data[1] = 0;
setbadge(data)
const { pathname } = history.location;
const path = pathname.split('/')[pathname.split('/').length - 1];
const params = {...query};
params.detailList = detailList
if(path === 'edit') {
PublicApi.postLogisticsOrderWaitSubmitUpdate({...params }).then(res => {
if (res.code === 1000) {
history.goBack()
}
})
} else {
PublicApi.postLogisticsOrderWaitSubmitAdd({ ...params }).then(res => {
if (res.code === 1000) {
history.goBack()
}
})
}
}
} else {
message.error('请先添加商品')
}
}
}
/**结算方式 */
useEffect(() => {
if (Object.keys(memberInfo).length > 0) {
PublicApi.getSettleAccountsPlatformConfigGetSettlementWay({ ...memberInfo }).then(res => {
if (res.code === 1000) {
const data = {...query}
data.settlementWay = res.data;
setQuery(data)
}
}).catch(error => {
message.error(error.message)
})
}
}, [memberInfo])
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReturnEle description='返回' />}
extra={<Button type="primary"> 保存</Button>}
extra={<Button type="primary" onClick={handleSubmit}> 保存</Button>}
>
<Card>
<Tabs type="card">
{/** 基本信息 */}
<TabPane key='tab-1' tab='基本信息' forceRender>
<TabPane key='tab-1' tab={<TabFormErrors dot={badge[0]}>基本信息</TabFormErrors>} forceRender>
<Form
{...layout}
form={form}
......@@ -359,12 +626,12 @@ const AddLogistics: React.FC<{}> = () => {
</Form.Item>
<Form.Item label="物流单号" name='receiverName1'><span></span></Form.Item>
<Form.Item label='对应发货单号' name='shipmentOrderCode'>
<Search disabled={createType} readOnly value={Object.keys(query).length > 0 ? query.shipmentOrderCode : undefined} enterButton={<><LinkOutlined /> 选择</>} />
<Button type='link'>查看单号详情</Button>
<Search disabled={!!history.location.query.createType} readOnly value={Object.keys(query).length > 0 ? query.shipmentOrderCode : undefined} enterButton={<><LinkOutlined /> 选择</>} onSearch={() => setshippingvisible(true)} />
{query.shipmentOrderCode && <Button type='link'>查看单号详情</Button>}
</Form.Item>
<Form.Item label='对应订单号/售后单' name='relevanceOrderCode'>
<Search disabled={createType} readOnly value={Object.keys(query).length > 0 ? query.relevanceOrderCode : undefined} enterButton={<><LinkOutlined /> 选择</>} />
<Button type='link'>查看单号详情</Button>
<Search disabled={!!history.location.query.createType} readOnly value={Object.keys(query).length > 0 ? query.relevanceOrderCode : undefined} enterButton={<><LinkOutlined /> 选择</>} onSearch={() => setinvoicesvisible(true)} />
{query.relevanceOrderCode && <Button type='link'>查看单号详情</Button>}
</Form.Item>
<Form.Item label="收货方" name='receiverName'><span>{query.receiverName}/{query.receiverPhone}</span></Form.Item>
<Form.Item label="收货地址" name='receiverFullAddress'>
......@@ -384,10 +651,10 @@ const AddLogistics: React.FC<{}> = () => {
</Form>
</TabPane>
{/** 物流单明细 */}
<TabPane key='tab-2' tab='物流单明细' forceRender>
<Button block type='dashed' style={{ marginBottom: '24px' }} onClick={() => setvisible(true)}><PlusOutlined />选择商品</Button>
<Form form={form}>
<Table columns={columns} dataSource={data} rowKey={'productId'} pagination={false} />
<TabPane key='tab-2' tab={<TabFormErrors dot={badge[1]}>物流单明细</TabFormErrors>} forceRender>
<Button block type='dashed' style={{ marginBottom: '24px' }} onClick={handleVisible}><PlusOutlined />选择商品</Button>
<Form form={goodsForm}>
<Table columns={columns} dataSource={detailList} rowKey={'productId'} pagination={false} />
</Form>
<Row gutter={[24, 24]} style={{ margin: '0 0 0 65%', width: '35%' }}>
<Col span={8}><Statistic title="总箱数（箱）" value={countTotal('carton')} /></Col>
......@@ -402,7 +669,7 @@ const AddLogistics: React.FC<{}> = () => {
<span></span>
</Form.Item>
<Form.Item label='结算方式'>
<span></span>
<span>{query.settlementWay}</span>
</Form.Item>
</Form>
</TabPane>
......@@ -410,11 +677,40 @@ const AddLogistics: React.FC<{}> = () => {
<TabPane key='tab-4' tab='流转记录' forceRender></TabPane>
</Tabs>
</Card>
{/* 选择对应发货单 - createType === 1的时候才显示 */}
<ModalTable
width={900}
modalTitle='选择发货单'
columns={ShippingColumns}
visible={shippingvisible}
rowSelection={shippingRowSelection}
cancel={() => setshippingvisible(false)}
confirm={handleShipping}
fetchTableData={params => fetchShippingData(params)}
resetModal={{ destroyOnClose: true }}
tableProps={{ rowKey: 'id' }}
modalType='logisticsDelivery'
searchName='invoicesNo'
/>
{/* 选择对应订单号/售后单 */}
<ModalTableOrder
width={900}
visible={invoicesvisible}
columns={invoicesColumns}
invoicesNo={query.invoicesNo}
relevanceType={relevanceType}
resetModal={{ destroyOnClose: true }}
tableProps={{ rowKey: 'id' }}
rowSelection={invoicesRowSelection}
cancel={() => setinvoicesvisible(false)}
confirm={handleInvoices}
/>
{/* 选择商品 */}
<ModalTable
modalTitle='选择商品'
visible={visible}
columns={SelectGoodsColumns}
forceRender={true}
fetchTableData={(params) => fetchData(params)}
cancel={() => setvisible(false)}
confirm={handleConfirm}
......@@ -422,7 +718,7 @@ const AddLogistics: React.FC<{}> = () => {
modalType='selectGoodsSchema'
searchName='productName'
tableProps={{
rowKey: 'productId'
rowKey: 'id'
}}
/>
</PageHeaderWrapper>
......
src/pages/logistics/logisticsSubmit/detail/components/ModalTableOrder.tsx
View file @ b0c877be
......@@ -156,7 +156,7 @@ export const otherSearchSchema: ISchema = {
}
}
const ModalTableOrder: React.FC<ModalTableProps> = (props) => {
const { width = 704, confirm, cancel, visible, currentRef, resetModal, forceRender, useNestTable = false, nestColumns, nestTableProps, invoicesNo, relevanceType, ...resetTable } = props
const { width = 704, confirm, cancel, visible, currentRef, resetModal, forceRender, useNestTable = false, nestColumns, nestTableProps, invoicesNo, relevanceType=1, ...resetTable } = props
const selfRef = currentRef || useRef<any>({})
useEffect(() => {
if (visible && forceRender) {
......
src/pages/logistics/logisticsSubmit/detail/components/goods.tsx
View file @ b0c877be
import React, { useEffect, useState } from 'react';
import { Button, Input, Table, Row, Col, Statistic, message, Form } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { PlusOutlined } from '@ant-design/icons';
import ModalTable from '@/components/ModalTable'
import { PublicApi } from '@/services/api';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
interface goodsParamsProps {
currentRef?: any,
set?: any,
onGet?: Function,
onBadge?: Function,
addId?: Number,
createType?: any
}
const AddGoods: React.FC<goodsParamsProps> = (props) => {
const { currentRef, set, onGet, onBadge, addId, createType } = props;
const [form] = Form.useForm();
const [visible, setvisible] = useState<boolean>(false);
const [rowSelection, SelectionRowCtl] = useRowSelectionTable({ customKey: 'productId' });
const [data, setdata] = useState<Array<any>>([]);
const columns: ColumnType<any>[] = [
{
title: 'ID',
key: 'productId',
dataIndex: 'productId'
},
{
title: '商品名称',
key: 'productName',
dataIndex: 'productName'
},
{
title: '品类',
key: 'categoryName',
dataIndex: 'categoryName'
},
{
title: '品牌',
key: 'brandName',
dataIndex: 'brandName'
},
{
title: '单位',
key: 'unitName',
dataIndex: 'unitName'
},
{
title: '数量',
key: 'amount',
width: 120,
dataIndex: 'amount',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`amount${index}`} initialValue={record.amount} rules={[{ required: true, message: '请输入数量' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'amount')} />
</Form.Item>
},
{
title: '箱数',
key: 'carton',
width: 120,
dataIndex: 'carton',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`carton${index}`} initialValue={record.carton} rules={[{ required: true, message: '请输入箱数' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'carton')} />
</Form.Item>
},
{
title: '重量 (KG)',
key: 'weight',
width: 120,
dataIndex: 'weight',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`weight${index}`} initialValue={record.weight} rules={[{ required: true, message: '请输入重量 (KG)' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'weight')} />
</Form.Item>
},
{
title: '体积 (M3)',
key: 'volume',
width: 120,
dataIndex: 'volume',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`volume${index}`} initialValue={record.volume} rules={[{ required: true, message: '请输入体积 (M3)' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'volume')} />
</Form.Item>
},
{
title: '操作',
key: 'options',
dataIndex: 'options',
render: (text: any, record: any, index: number) => <Button type='link' onClick={() => onHandleDelect(index)}>删除</Button>
}
]
/** 删除 */
const onHandleDelect = (idx: number) => {
const list = [...data];
list.splice(idx, 1);
SelectionRowCtl.setSelectRow(list)
SelectionRowCtl.setSelectedRowKeys(list.map(v => v.productId));
setdata([...list])
form.resetFields();
console.log(idx)
}
/**选择商品弹框表头 */
const columnsTable: ColumnType<any>[] = [
{
title: 'ID',
key: 'productId',
dataIndex: 'productId'
},
{
title: '商品名称',
key: 'productName',
dataIndex: 'productName'
},
{
title: '品类',
key: 'categoryName',
dataIndex: 'categoryName'
},
{
title: '品牌',
key: 'brandName',
dataIndex: 'brandName'
}
]
/**获取商品列表 */
const fetchProductList = (params: any) => {
return new Promise(resolve => {
PublicApi.getOrderProcurementOrderProductPageList({ id: set.shipmentOrderId, ...params }).then(res => {
if (res.code === 1000) {
const arr: any = [];
res.data.data.forEach((item: any) => {
arr.push({
productId: item.productId,
productName: item.productName,
categoryName: item.category,
brandName: item.brand,
unitName: item.unit,
amount: item.amount,
carton: item.carton,
weight: item.weight,
volume: item.volume
})
})
res.data.data = arr
resolve(res.data)
}
})
})
}
/**用户循环改变列表返回的字段 */
const forKeyValue = (data: any) => {
const arr: any = [];
data.forEach((item:any) => {
arr.push({
productId: item.id,
productName: item.productName,
categoryName: item.category,
brandName: item.brand,
unitName: item.unit,
amount: item.productCount,
carton: item.carton,
weight: item.weight,
volume: item.volume
})
})
setdata([...arr])
}
/** 打开添加商品 */
const openModal = () => {
const dataInfo = { ...set };
if (Object.keys(dataInfo).length > 0 && dataInfo.shipmentOrderId) {
if (data.length > 0) {
SelectionRowCtl.setSelectRow([...data])
}
setvisible(true)
} else {
message.error('请先选择要操作的对应发货单号或对应订单号/售后单')
}
}
/** 确定添加商品 */
const onconfirm = () => {
const list = SelectionRowCtl.selectRow;
const arr: any[] = []
list.forEach((item: any) => {
arr.push({
productId: item.productId,
productName: item.productName,
categoryName: item.categoryName,
brandName: item.brandName,
unitName: item.unitName,
amount: item.amount,
carton: item.carton,
weight: item.weight,
volume: item.volume
})
})
setdata([...arr])
setvisible(false)
}
/**输入框输入 */
const inputOnchange = (id, e, name) => {
const { value } = e.target
data.forEach(v => {
if (v.productId === id) {
v[name] = value
}
})
onGet([...data]) // 返回给父级
setdata([...data])
countTotal(name)
}
/** 计算总数 */
const countTotal = (name?: string) => {
let num: any = 0
data.forEach((item: any, idx: number) => {
if (name === 'carton') {
num += item.carton ? Number(item.carton) : 0
} else if (name === 'weight') {
num += item.weight ? Number(item.weight) : 0
} else if (name === 'volume') {
num += item.volume ? Number(item.volume) : 0
}
})
return num
}
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
if (data.length > 0) {
resolve({
state: true,
name: 'goods',
})
onBadge(0, 1)
} else {
resolve({
state: false,
name: 'goods',
})
onBadge(1, 1)
}
}).catch(error => {
if (error && error.errorFields) {
onBadge(error.errorFields.length, 1)
}
})
})
}
})
/**编辑回显 */
useEffect(() => {
if (set.id) {
setdata([...set.detailList])
SelectionRowCtl.setSelectRow(set.detailList);
SelectionRowCtl.setSelectedRowKeys(set.detailList.map(v => v = v.productId))
}
}, [set.id])
/**别处单据过来 */
useEffect(() => {
switch (Number(createType)) {
case 2:
PublicApi.getWarehouseInvoicesDetailsList({invoicesId: addId.toString()}).then(res => {
if(res.code === 1000) {
forKeyValue(res.data)
}
})
break
case 3:
break
case 4:
break
}
}, [addId])
return (
<>
<Button disabled={!!addId} block type='dashed' style={{ marginBottom: '24px' }} onClick={openModal}><PlusOutlined />添加商品</Button>
<Form form={form}>
<Table columns={columns} dataSource={data} rowKey={'productId'} pagination={false} />
</Form>
<Row gutter={[24, 24]} style={{ margin: '0 0 0 65%', width: '35%' }}>
<Col span={8}><Statistic title="总箱数（箱）" value={countTotal('carton')} /></Col>
<Col span={8}><Statistic title="总重量（KG）" value={countTotal('weight')} /></Col>
<Col span={8}><Statistic title="总体积（M3）" value={countTotal('volume')} /></Col>
</Row>
{/* 选择商品弹框 */}
<ModalTable
width={900}
modalTitle='选择商品'
columns={columnsTable}
visible={visible}
rowSelection={rowSelection}
fetchTableData={params => fetchProductList(params)}
resetModal={{ destroyOnClose: true }}
tableProps={{ rowKey: 'productId' }}
cancel={() => setvisible(false)}
confirm={() => onconfirm()}
/>
</>
)
}
export default AddGoods;
import React, { useEffect, useState } from 'react';
import { Button, Input, Table, Row, Col, Statistic, message, Form } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { PlusOutlined } from '@ant-design/icons';
import ModalTable from '@/components/ModalTable'
import { PublicApi } from '@/services/api';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
interface goodsParamsProps {
currentRef?: any,
set?: any,
onGet?: Function,
onBadge?: Function,
addId?: Number,
createType?: any
}
const AddGoods: React.FC<goodsParamsProps> = (props) => {
const { currentRef, set, onGet, onBadge, addId, createType } = props;
const [form] = Form.useForm();
const [visible, setvisible] = useState<boolean>(false);
const [rowSelection, SelectionRowCtl] = useRowSelectionTable({ customKey: 'productId' });
const [data, setdata] = useState<Array<any>>([]);
const columns: ColumnType<any>[] = [
{
title: 'ID',
key: 'productId',
dataIndex: 'productId'
},
{
title: '商品名称',
key: 'productName',
dataIndex: 'productName'
},
{
title: '品类',
key: 'categoryName',
dataIndex: 'categoryName'
},
{
title: '品牌',
key: 'brandName',
dataIndex: 'brandName'
},
{
title: '单位',
key: 'unitName',
dataIndex: 'unitName'
},
{
title: '数量',
key: 'amount',
width: 120,
dataIndex: 'amount',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`amount${index}`} initialValue={record.amount} rules={[{ required: true, message: '请输入数量' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'amount')} />
</Form.Item>
},
{
title: '箱数',
key: 'carton',
width: 120,
dataIndex: 'carton',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`carton${index}`} initialValue={record.carton} rules={[{ required: true, message: '请输入箱数' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'carton')} />
</Form.Item>
},
{
title: '重量 (KG)',
key: 'weight',
width: 120,
dataIndex: 'weight',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`weight${index}`} initialValue={record.weight} rules={[{ required: true, message: '请输入重量 (KG)' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'weight')} />
</Form.Item>
},
{
title: '体积 (M3)',
key: 'volume',
width: 120,
dataIndex: 'volume',
render: (text: any, record: any, index: number) =>
<Form.Item noStyle name={`volume${index}`} initialValue={record.volume} rules={[{ required: true, message: '请输入体积 (M3)' }]}>
<Input type='number' min={1} onBlur={(e) => inputOnchange(record.productId, e, 'volume')} />
</Form.Item>
},
{
title: '操作',
key: 'options',
dataIndex: 'options',
render: (text: any, record: any, index: number) => <Button type='link' onClick={() => onHandleDelect(index)}>删除</Button>
}
]
/** 删除 */
const onHandleDelect = (idx: number) => {
const list = [...data];
list.splice(idx, 1);
SelectionRowCtl.setSelectRow(list)
SelectionRowCtl.setSelectedRowKeys(list.map(v => v.productId));
setdata([...list])
form.resetFields();
console.log(idx)
}
/**选择商品弹框表头 */
const columnsTable: ColumnType<any>[] = [
{
title: 'ID',
key: 'productId',
dataIndex: 'productId'
},
{
title: '商品名称',
key: 'productName',
dataIndex: 'productName'
},
{
title: '品类',
key: 'categoryName',
dataIndex: 'categoryName'
},
{
title: '品牌',
key: 'brandName',
dataIndex: 'brandName'
}
]
/**获取商品列表 */
const fetchProductList = (params: any) => {
return new Promise(resolve => {
PublicApi.getOrderProcurementOrderProductPageList({ id: set.shipmentOrderId, ...params }).then(res => {
if (res.code === 1000) {
const arr: any = [];
res.data.data.forEach((item: any) => {
arr.push({
productId: item.productId,
productName: item.productName,
categoryName: item.category,
brandName: item.brand,
unitName: item.unit,
amount: item.amount,
carton: item.carton,
weight: item.weight,
volume: item.volume
})
})
res.data.data = arr
resolve(res.data)
}
})
})
}
/**用户循环改变列表返回的字段 */
const forKeyValue = (data: any) => {
const arr: any = [];
data.forEach((item:any) => {
arr.push({
productId: item.id,
productName: item.productName,
categoryName: item.category,
brandName: item.brand,
unitName: item.unit,
amount: item.productCount,
carton: item.carton,
weight: item.weight,
volume: item.volume
})
})
setdata([...arr])
}
/** 打开添加商品 */
const openModal = () => {
const dataInfo = { ...set };
if (Object.keys(dataInfo).length > 0 && dataInfo.shipmentOrderId) {
if (data.length > 0) {
SelectionRowCtl.setSelectRow([...data])
}
setvisible(true)
} else {
message.error('请先选择要操作的对应发货单号或对应订单号/售后单')
}
}
/** 确定添加商品 */
const onconfirm = () => {
const list = SelectionRowCtl.selectRow;
const arr: any[] = []
list.forEach((item: any) => {
arr.push({
productId: item.productId,
productName: item.productName,
categoryName: item.categoryName,
brandName: item.brandName,
unitName: item.unitName,
amount: item.amount,
carton: item.carton,
weight: item.weight,
volume: item.volume
})
})
setdata([...arr])
setvisible(false)
}
/**输入框输入 */
const inputOnchange = (id, e, name) => {
const { value } = e.target
data.forEach(v => {
if (v.productId === id) {
v[name] = value
}
})
onGet([...data]) // 返回给父级
setdata([...data])
countTotal(name)
}
/** 计算总数 */
const countTotal = (name?: string) => {
let num: any = 0
data.forEach((item: any, idx: number) => {
if (name === 'carton') {
num += item.carton ? Number(item.carton) : 0
} else if (name === 'weight') {
num += item.weight ? Number(item.weight) : 0
} else if (name === 'volume') {
num += item.volume ? Number(item.volume) : 0
}
})
return num
}
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
if (data.length > 0) {
resolve({
state: true,
name: 'goods',
})
onBadge(0, 1)
} else {
resolve({
state: false,
name: 'goods',
})
onBadge(1, 1)
}
}).catch(error => {
if (error && error.errorFields) {
onBadge(error.errorFields.length, 1)
}
})
})
}
})
/**编辑回显 */
useEffect(() => {
if (set.id) {
setdata([...set.detailList])
SelectionRowCtl.setSelectRow(set.detailList);
SelectionRowCtl.setSelectedRowKeys(set.detailList.map(v => v = v.productId))
}
}, [set.id])
/**别处单据过来 */
useEffect(() => {
switch (Number(createType)) {
case 2:
PublicApi.getWarehouseInvoicesDetailsList({invoicesId: addId.toString()}).then(res => {
if(res.code === 1000) {
forKeyValue(res.data)
}
})
break
case 3:
break
case 4:
break
}
}, [addId])
return (
<>
<Button disabled={!!addId} block type='dashed' style={{ marginBottom: '24px' }} onClick={openModal}><PlusOutlined />添加商品</Button>
<Form form={form}>
<Table columns={columns} dataSource={data} rowKey={'productId'} pagination={false} />
</Form>
<Row gutter={[24, 24]} style={{ margin: '0 0 0 65%', width: '35%' }}>
<Col span={8}><Statistic title="总箱数（箱）" value={countTotal('carton')} /></Col>
<Col span={8}><Statistic title="总重量（KG）" value={countTotal('weight')} /></Col>
<Col span={8}><Statistic title="总体积（M3）" value={countTotal('volume')} /></Col>
</Row>
{/* 选择商品弹框 */}
<ModalTable
width={900}
modalTitle='选择商品'
columns={columnsTable}
visible={visible}
rowSelection={rowSelection}
fetchTableData={params => fetchProductList(params)}
resetModal={{ destroyOnClose: true }}
tableProps={{ rowKey: 'productId' }}
cancel={() => setvisible(false)}
confirm={() => onconfirm()}
/>
</>
)
}
export default AddGoods;
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