Skip to content

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

新增生产通知单对接

parent 3c1f07c8
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 100 deletions
src/pages/handling/assign/add/index.tsx
View file @ 5efb69a8
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, Radio, Table } from 'antd';
import { Button, Card, Select, DatePicker, Radio, Table, Space } from 'antd';
import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
......@@ -14,7 +14,7 @@ import ProcessProducts from '../../components/ProcessProducts';
import ProcessOrder from '../../components/ProcessOrder';
import {WrapUploadFile} from '../../components/UploadFile';
import { PublicApi } from '@/services/api';
import ProcessDetail from '../../components/ProcessDetail'
/*
* @Author: Bill
* @Date: 2020-10-12 11:36:38
......@@ -33,8 +33,6 @@ const Add: React.FC<{}> = () => {
const [modalProductVisible, setModalProductVisible] = useState<boolean>(false);
// 加工订单 modal 框
const [modalOrderVisible, setModalOrderVisible] = useState<boolean>(false);
//
// const [saveProcessProductRows, setSaveProcessProductionRow] =
/* --------以下是 element-------- */
// 选择加工企业 modal 层
......@@ -47,6 +45,34 @@ const Add: React.FC<{}> = () => {
</div>
)
const noticesDetailColumn = () => {
return [
{ title: '订单号', dataIndex: 'orderId' },
{ title: '商品ID', dataIndex: 'commodityId' },
{ title: '商品名称', dataIndex: 'name' },
{ title: '品类', dataIndex: 'customerCategoryName' },
{ title: '品牌', dataIndex: 'brandName' },
{ title: '单位', dataIndex: 'unitName' },
{ title: '订单数量', dataIndex: 'orderTotal' },
{ title: '剩余加工数量', dataIndex: 'restTotal' },
{ title: '加工数量', dataIndex: 'quantity' },
{ title: '加工单价', dataIndex: 'processUnitPrice' },
{ title: '加工费', dataIndex: 'cost'},
{
title: '操作',
render: (text, record) => {
return (
<Space>
<ProcessDetail id={record.commodityId} submit={handleChangeSomeList} />
<a>编辑</a>
<a>删除</a>
</Space>
)
}
},
]
}
// 选择弹框 element
const tableAddButton = () => {
return (
......@@ -85,7 +111,9 @@ const Add: React.FC<{}> = () => {
}
/* -------- element end-------- */
/* 逻辑 start */
/**
* formEffect, 表单联动操作放这里操作，包括表单的生命周期等操作
*/
const formEffects = () => () => {
onFieldValueChange$('source').subscribe((state) => {
if(state.mounted) {
......@@ -94,20 +122,35 @@ const Add: React.FC<{}> = () => {
}
})
// 当物流为 物流时，那么填充
onFieldMount$('receiveAddress').subscribe((state) => {
onFieldMount$('receiveAddressID').subscribe((state) => {
PublicApi.getLogisticsReceiverAddressPage({current: '1', pageSize: '10'})
.then((res) => {
let options = []
if(res.code === 1000) {
options = res.data.data.map((item) => {
return { label: `${item.fullAddress} / ${item.receiverName} / ${item.phone}`, value: item.id }}
return { label: `${item.fullAddress} / ${item.receiverName} / ${item.phone}`, value: `${item.fullAddress} / ${item.receiverName} / ${item.phone}` }}
)
}
formActions.setFieldState("receiveAddress", (state) => {
formActions.setFieldState("receiveAddressID", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
})
/**
* 当改变物流地址的时候，那么修改隐藏的3个字段，
* 1. receiveAddress 详细的物流地址
* 2. receiveUserName 收货人
* 3. receiveUserTel 收货人电话
*/
onFieldValueChange$('receiveAddressID').subscribe((state) => {
if(state.visible) {
const [receiveAddress, receiveUserName, receiveUserTel] = state.value && state.value.split("/");
formActions.setFieldValue("receiveAddress", receiveAddress.trim());
formActions.setFieldValue("receiveUserName", receiveUserName.trim());
formActions.setFieldValue("receiveUserTel", receiveUserTel.trim());
}
})
}
// 选择加工商品弹框控制
......@@ -153,16 +196,95 @@ const Add: React.FC<{}> = () => {
* 提交表单
*/
const handleSubmit = (values) => {
console.log(values);
console.log(values)
const SELF_MENTION = 2; // 自提
const {
deliveryDate,
receiveAddressID,
enclosure = [],
deliveryDesc = '',
payDesc = '',
taxDesc = '',
materialDesc = '',
packingDesc = '',
otherDesc = '',
...rest
} = values;
const deliveryDateFormat = deliveryDate.unix() * 1000;
const detailList = values.someLists.map((item) => {
return {
orederNo: null,
goodsId: item.commodityId,
goodsName: item.name,
category: item.customerCategoryName,
brand: item.brandName,
unit: item.unitName,
purchaseCount:null,
surplusProcessNum:null,
processNum: item.quantity || 0,
processPrice: item.processUnitPrice || 0,
deliveryDate: deliveryDateFormat,
property:{
specs: item.productProps.map((item) => {
return {
name: item.customerAttribute.name,
value: ''
}
}),
annex: item.files.map((item) => ({name: item.name, value: item.url}))
}
}
})
let postData = {
...rest,
deliveryDate: deliveryDateFormat,
otherAsk: {
annex: enclosure.map((item) => ({name: item.name, value: item.url})),
explain: [
{name: '交付说明', value: deliveryDesc},
{name: '付款说明', value: payDesc},
{name: '税费说明', value: taxDesc},
{name: '物资说明', value: materialDesc},
{name: '包装说明', value: packingDesc},
{name: '其他说明', value: otherDesc}
]
},
details:detailList
}
if(values.deliveryType == SELF_MENTION) {
delete postData.receiveAddress;
delete postData.receiveUserName;
delete postData.receiveUserTel
}
console.log(postData);
return ;
PublicApi.postEnhanceSupplierToBeAddAdd(postData)
.then(data => {
if(data.code === 1000) {
history.push('/memberCenter/handling/assign/tobeAddQuery')
}
})
}
useEffect(() => {
// 默认情况下选择订单加工，那么此时默认填写通知单摘要为订单商品的第一条数据
formActions.setFieldValue('Tabs.tab-1.layout.summary', "进口头层黄牛皮荔枝纹")
}, [])
const handleChangeSomeList = (values) => {
console.log("changeSOmeList");
let someList = formActions.getFieldValue('Tabs.tab-2.layout.someLists');
const index = someList.findIndex((item) => item.commodityId == values.id);
if(index > -1) {
someList[index] = {
...someList[index],
quantity: values.process.quantity,
processUnitPrice: values.process.processUnitPrice,
cost: values.process.quantity * values.process.processUnitPrice,
productProps: values.productProps,
files: values.files
}
console.log(someList)
formActions.setFieldValue('Tabs.tab-2.layout.someLists', [...someList])
}
}
/** 逻辑 end */
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
......@@ -170,7 +292,7 @@ const Add: React.FC<{}> = () => {
title="填写会员资料"
extra={[
<Button
key="1"
key={1}
type="primary"
icon={<SaveOutlined />}
loading={submitLoading}
......@@ -189,7 +311,8 @@ const Add: React.FC<{}> = () => {
connectProduct,
tableAddButton: tableAddButton(),
source: source(),
RadioBtnGroup: RadioBtnGroup()
RadioBtnGroup: RadioBtnGroup(),
noticesDetailColumn: noticesDetailColumn()
}}
onSubmit={handleSubmit}
effects={formEffects()}
......
src/pages/handling/assign/add/schema.tsx
View file @ 5efb69a8
......@@ -8,6 +8,7 @@
import React from 'react';
import { Space, Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import ProcessDetail from '../../components/ProcessDetail'
// 流转记录
export const historyColumn = [
......@@ -19,47 +20,6 @@ export const historyColumn = [
{ title: '审核意见', dataIndex: 'suggest'},
]
// 通知单明细
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
</Menu>
);
export const noticesDetailColumn = [
{ title: '订单号', dataIndex: 'orderId' },
{ title: 'ID', dataIndex: 'id' },
{ title: '商品名称', dataIndex: 'productName' },
{ title: '品类', dataIndex: 'type' },
{ title: '品牌', dataIndex: 'brand' },
{ title: '单位', dataIndex: 'unit' },
{ title: '订单数量', dataIndex: 'orderTotal' },
{ title: '剩余加工数量', dataIndex: 'restTotal' },
{ title: '加工数量', dataIndex: 'total' },
{ title: '加工单价', dataIndex: 'processUnitPrice' },
{ title: '加工费', dataIndex: 'cost' },
{ title: '交期', dataIndex: 'time' },
{
title: '是否退货',
render: (text, record) => {
return (
<Space>
<a>编辑</a>
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
Hover me <DownOutlined />
</a>
</Dropdown>
</Space>
)
}
},
]
const basicTab = {
'tab-1': {
type: 'object',
......@@ -73,7 +33,7 @@ const basicTab = {
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 8,
wrapperCol: 9,
labelAlign: 'left'
},
properties: {
......@@ -130,7 +90,7 @@ const basicTab = {
value: 2
}
],
default: 1
default: 2
},
deliveryDate: {
......@@ -163,12 +123,12 @@ const basicTab = {
'x-linkages': [
{
type: 'value:visible',
target: 'receiveAddress',
target: '*(receiveAddressID, receiveAddress,receiveUserName,receiveUserTel)',
condition: '{{$value == 1}}'
}
},
],
},
receiveAddress: {
receiveAddressID: {
type: 'string',
title: '收货地址',
'x-rules': [
......@@ -178,9 +138,20 @@ const basicTab = {
}
],
'x-component': 'Select',
'x-component-props': {
}
'x-component-props': {}
},
receiveAddress: {
type: 'string',
// title: 'address'
display: false
},
receiveUserName: {
type: 'string',
display: false,
},
receiveUserTel: {
type: 'string',
display: false
},
docNo: {
type: 'string',
......@@ -250,7 +221,7 @@ const detailTab = {
'x-component-props': {
rowKey: 'id',
prefix: "{{tableAddButton}}",
columns: noticesDetailColumn
columns: "{{noticesDetailColumn}}"
// columns: "{{tableColumns}}",
}
}
......
src/pages/handling/components/ProcessDetail/content.less
View file @ 5efb69a8
......@@ -31,7 +31,7 @@
flex-direction: column;
border-left: 1px solid #EEF0F3;
overflow: scroll;
overflow-x: hidden;
.common {
padding: 24px 24px 0 24px;
.header {
......
src/pages/handling/components/ProcessDetail/content.tsx
View file @ 5efb69a8
......@@ -2,6 +2,9 @@ import React, { useState, useRef } from 'react';
import styles from './content.less';
import { Row, Col } from 'antd';
import classnames from 'classnames';
import {FileList, UploadFile} from '../../components/UploadFile';
import NiceForm from '@/components/NiceForm';
const menuList = ["基本信息", "产地", "外观尺寸", "工艺", "特殊说明/其他", "附件", "加工要求"];
const HEIGHT_MAP = {
......@@ -14,7 +17,47 @@ const HEIGHT_MAP = {
'加工要求': 238 * 4 + 60
}
const Content = () => {
const schema = {
type: 'object',
properties: {
layout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 9,
labelAlign: 'left'
},
properties: {
quantity: {
type: 'string',
title: '加工数量',
'x-rules': [
{
required: true,
message: '请填写加工数量'
}
]
},
processUnitPrice: {
type: 'string',
title: '加工单价',
'x-rules': [
{
required: true,
message: '请填写加工单价'
}
]
}
}
}
}
}
const Content = (props) => {
const { id, name, category, brand, unitName, files, productProps = [] } = props;
const [active, setActive] = useState<string>("基本信息");
const ref = useRef(null);
......@@ -50,34 +93,76 @@ const Content = () => {
</div>
<div className={styles.body} ref={ref}>
<div className={styles.common} >
<div className={styles.header}>{"基本信息"}</div>
<div className={styles.info}>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品ID</Col>
<Col span={12}>{id}</Col>
</Row>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品名称</Col>
<Col span={12}>{name}</Col>
</Row>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品品类</Col>
<Col span={12}> {category}</Col>
</Row>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品品牌</Col>
<Col span={12}>{brand}</Col>
</Row>
</div>
</div>
{
menuList.map((item) => {
productProps.map((item) => {
const value = item.customerAttributeValueList.reduce((prev, current) => {
return prev += current.value + "，"
}, "")
return (
<div className={styles.common} key={item}>
<div className={styles.header}>{item}</div>
<div className={styles.common} key={item.id}>
<div className={styles.header}>{item.customerAttribute.name}</div>
<div className={styles.info}>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品ID</Col>
<Col span={12}>11101</Col>
</Row>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品名称</Col>
<Col span={12}>进口头层牛皮荔枝纹</Col>
</Row>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品品类</Col>
<Col span={12}> 牛皮</Col>
</Row>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品品牌</Col>
<Col span={12}>PELLE</Col>
<Col className={styles.label} span={4}>{item.customerAttribute.name}</Col>
<Col span={12}>{value}</Col>
</Row>
</div>
</div>
)
})
}
<div className={styles.common} >
<div className={styles.header}>{"附件"}</div>
<div className={styles.info}>
{
files.map((item,key) => {
return (
<FileList name={item.name} url={item.url} key={key} />
)
})
}
<UploadFile onChange={props.fileOnChange} fileMaxSize={20*1024} />
</div>
</div>
<div className={styles.common} >
<div className={styles.header}>{"加工"}</div>
<div className={styles.info}>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>单位</Col>
<Col span={12}>{unitName}</Col>
</Row>
</div>
<div className={styles.info}>
<NiceForm
schema={schema}
actions={props.actions}
onSubmit={props.formSubmit}
// effects={formEffects()}
/>
</div>
</div>
</div>
</div>
)
......
src/pages/handling/components/ProcessDetail/index.tsx
View file @ 5efb69a8
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Button, Drawer } from 'antd';
import Content from './content';
import { PublicApi } from '@/services/api'
import { createFormActions } from '@formily/antd'
const ProcessDetail = () => {
const actions = createFormActions();
const ProcessDetail = (props) => {
const [visible, setVisible] = useState(false);
const [info, setInfo] = useState<any>({})
const [files, setFiles] = useState([])
const onClose = () => {
setVisible(false)
......@@ -13,20 +19,71 @@ const ProcessDetail = () => {
setVisible(true)
}
useEffect(() => {
if(props.id && visible) {
PublicApi.getProductCommodityGetCommodity({id: props.id})
.then((data) => {
setInfo(data.data);
})
}
}, [props.id, visible])
const handleSubmit = () => {
actions.submit();
}
const formSubmit = (values) => {
props.submit({
files: files,
id: props.id,
process: values,
productProps: info?.commodityAttributeList
})
setVisible(false)
}
const fileOnChange = (values) => {
setFiles(values)
}
return (
<>
<Button type="primary" onClick={onOpen}>
<a onClick={onOpen}>
查看加工详情
</Button>
</a>
<Drawer
title="查看加工明细"
width={720}
onClose={onClose}
visible={visible}
bodyStyle={{ padding: '0'}}
footer={false}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button onClick={onClose} style={{ marginRight: 8 }}>
Cancel
</Button>
<Button onClick={handleSubmit} type="primary">
Submit
</Button>
</div>
}
>
<Content />
<Content
name={info?.name}
id={props.id}
brand={info?.brand?.name}
category={info?.customerCategory?.fullName}
unitName={info?.unitName}
actions={actions}
formSubmit={formSubmit}
fileOnChange={fileOnChange}
files={files}
productProps={info?.commodityAttributeList}
/>
</Drawer>
</>
)
......
src/pages/handling/components/ProcessProducts/index.tsx
View file @ 5efb69a8
......@@ -6,17 +6,24 @@ import { BasicForm, TablePagination, SearchForm } from '../ModalForTable'
import { createAsyncFormActions, FormEffectHooks } from '@formily/antd';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import { schema } from './schema';
import { getAuth } from '@/utils/auth';
const { onFieldInit$ } = FormEffectHooks
const actions = createAsyncFormActions();
const ENTERPRISE_MALL = [1,2];
const ProcessProducts = ({visible, cancel, ...restProps}) => {
const [selectRow, setSelectRow] = useRowSelectionTable({ customKey: 'id' });
const authInfo = getAuth();
const fetchData = async (params: any) => {
console.log(params);
// /product/commodity/common/getCommodityListByBuyer
let res = await PublicApi.getProductCommodityCommonGetCommodityListByBuyer(params);
const postData = {
shopType: ENTERPRISE_MALL.includes(authInfo.memberType) ? 1 : 3,
environment: 1,
...params,
}
let res = await PublicApi.getProductCommodityCommonGetCommodityListByBuyer(postData);
return res;
};
......
src/pages/handling/components/ProcessProducts/schema.tsx
View file @ 5efb69a8
......@@ -2,8 +2,8 @@ const columns = [
{ title: 'ID', dataIndex: 'id'},
{ title: '商品名称', dataIndex: 'name'},
{ title: '上架商城', dataIndex: 'shop'},
{ title: '品类', dataIndex: 'type'},
{ title: '品牌', dataIndex: 'brand'}
{ title: '品类', dataIndex: 'customerCategoryName'},
{ title: '品牌', dataIndex: 'brandName'}
]
export const schema = {
......@@ -125,7 +125,7 @@ export const schema = {
"x-component": "Table",
"x-component-props": {
"columns": columns,
"rowKey": "memberId",
"rowKey": "id",
"pagination":false,
"rowSelection": "{{rowSelection}}"
}
......
src/pages/handling/components/UploadFile/FileList.tsx
View file @ 5efb69a8
......@@ -13,7 +13,7 @@ interface Iprops {
* 删除回调函数
* @params {name: string} 文件名
*/
removeFile: (name: string) => void,
removeFile?: (name: string) => void,
/**
* 文件名
*/
......
src/pages/handling/components/UploadFile/index.less
View file @ 5efb69a8
......@@ -12,5 +12,6 @@
.tips {
color: #909399;
font-size: 12px;
margin-top: 10px;
}
}
\ No newline at end of file
src/pages/handling/components/UploadFile/index.tsx
View file @ 5efb69a8
import UploadFile from './UploadFile';
import WrapUploadFile from './WrapUploadFile';
import FileList from './FileList';
export {
UploadFile,
WrapUploadFile
WrapUploadFile,
FileList
}
\ No newline at end of file
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