Skip to content

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

fix

parent 60abf477
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 240 deletions
src/pages/handling/assign/add/columns.tsx 0 → 100644
View file @ f2a736d1
import React from 'react';
export const productColumns = [
// { title: '订单号', dataIndex: 'orderNo' },
{ title: '商品ID', dataIndex: 'commodityId' },
{ title: '商品名称', dataIndex: 'name' },
{ title: '品类', dataIndex: 'customerCategoryName' },
{ title: '品牌', dataIndex: 'brandName' },
{ title: '单位', dataIndex: 'unitName' },
// { title: '订单数量', dataIndex: 'orderTotal' },
// { title: '剩余加工数量', dataIndex: 'restTotal' },
{ title: '加工数量', dataIndex: 'processNum' },
{ title: '加工单价', dataIndex: 'processUnitPrice' },
{ title: '加工费', dataIndex: 'processTotalPrice'},
]
export const orderColumns = [
{ title: '订单号', dataIndex: 'orderNo' },
{ title: '商品ID', dataIndex: 'commodityId' },
{ title: '商品名称', dataIndex: 'name' },
{ title: '品类', dataIndex: 'customerCategoryName' },
{ title: '品牌', dataIndex: 'brandName' },
{ title: '单位', dataIndex: 'unitName' },
{ title: '订单数量', dataIndex: 'orderTotal' },
{ title: '剩余加工数量', dataIndex: 'restTotal' },
{ title: '加工数量', dataIndex: 'processNum' },
{ title: '加工单价', dataIndex: 'processUnitPrice' },
{ title: '加工费', dataIndex: 'processTotalPrice'},
]
src/pages/handling/assign/add/formEffects.tsx
View file @ f2a736d1
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { PublicApi } from '@/services/api';
const { onFieldValueChange$, onFieldMount$ } = FormEffectHooks
/**
* formEffect, 表单联动操作放这里操作，包括表单的生命周期等操作
*/
export const formEffects = () => {
const formActions = createFormActions()
// 当物流为 物流时，那么填充
onFieldMount$('receivefullAddress').subscribe((state) => {
PublicApi.getLogisticsReceiverAddressPage({current: '1', pageSize: '99'})
.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
}}
)
}
formActions.setFieldState("receivefullAddress", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
})
/**
* 当改变物流地址的时候，那么修改隐藏的3个字段，
* 1. receiveAddress 详细的物流地址
* 2. receiveUserName 收货人
* 3. receiveUserTel 收货人电话
*/
onFieldValueChange$('receivefullAddress').subscribe((state) => {
if(state.visible) {
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)
}
}
})
}
src/pages/handling/assign/add/index.tsx
View file @ f2a736d1
......@@ -19,16 +19,16 @@ import { getAuth } from '@/utils/auth';
import { ENTERPRISE_MALL } from '../../common';
import { usePageStatus } from '@/hooks/usePageStatus';
import moment from 'moment';
import { productColumns, orderColumns } from './columns';
import { formEffects } from './formEffects';
const formActions = createFormActions();
const { onFieldValueChange$, onFieldMount$ } = FormEffectHooks
const Add: React.FC<{}> = () => {
const authInfo = getAuth();
const pathname = history.location.pathname;
const { id } = usePageStatus();
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const [activeSource, setActiveSource] = useState('加工订单')
// 加工企业 modal 框
const [modalEnterPriseVisible, setEnterPriseModalVisible] = useState<boolean>(false);
// 加工商品 modal 框
......@@ -72,6 +72,7 @@ const Add: React.FC<{}> = () => {
disabled: record.purchaseCount - (record.processNum || 0) <= 0,
}),
});
const enterpriseTableRowSelection = useRowSelection({primaryKey: 'id', type: 'radio'});
// 选择加工企业 modal 层
const connectProduct = (
......@@ -98,9 +99,9 @@ const Add: React.FC<{}> = () => {
explain.forEach((item, index) => {
descValue[descArr[index]] = item.value
})
setActiveSource(data.source === 1 ? "加工订单" : "加工商品");
const isOrderProcess = data.source === 1;
const someLists = details.map((item) => {
const orderData = data.source === 1
const orderData = isOrderProcess
? {
id: item.productId, // 当前id是错误的
fullId: item.orderDetailId,
......@@ -123,185 +124,150 @@ const Add: React.FC<{}> = () => {
processTotalPrice: item.processTotalPrice,
restTotal: item.surplusProcessNum,
files: item.property.annex,
productProps: item.property.specs,
...orderData
}
})
const keys = someLists.map((item) => item.id);
if(isOrderProcess) {
orderTableRowSelection.setSelectedKeys(keys);
orderTableRowSelection.setSelectedRows(someLists);
} else {
productTableRowSelection.setSelectedKeys(keys);
productTableRowSelection.setSelectedRows(someLists);
}
enterpriseTableRowSelection.setSelectedKeys([data.processMemberId]);
enterpriseTableRowSelection.setSelectedRows([{
id: data.processMemberId,
memberId: data.processMemberId,
name: data.processName,
roleId: data.processRoleId
}])
setEditInfo({
...descValue,
...rest,
createTime: moment(data.createTime).format('YYYY-MM-DD'),
receivefullAddress: data.receiverAddressId,
deliveryDate: moment(deliveryDate),
enclosure: annex,
someLists: someLists,
...descValue,
...rest
orderList: isOrderProcess ? someLists : [],
productList: !isOrderProcess ? someLists : [],
outerWorkFlow: data.outerWorkflowRecordsList,
innerWorkFlow: data.innerWorkflowRecordsList
})
}
})
}
}, [id])
const noticesDetailColumn = () => {
const blackList = ["orderNo", "orderTotal", "restTotal"];
const tempColumns = [
{ title: '订单号', dataIndex: 'orderNo' },
{ title: '商品ID', dataIndex: 'commodityId' },
{ title: '商品名称', dataIndex: 'name' },
{ title: '品类', dataIndex: 'customerCategoryName' },
{ title: '品牌', dataIndex: 'brandName' },
{ title: '单位', dataIndex: 'unitName' },
{ title: '订单数量', dataIndex: 'orderTotal' },
{ title: '剩余加工数量', dataIndex: 'restTotal' },
{ title: '加工数量', dataIndex: 'processNum' },
{ title: '加工单价', dataIndex: 'processUnitPrice' },
{ title: '加工费', dataIndex: 'processTotalPrice'},
{
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}
productId={record.commodityId}
brand={record.brandName}
category={record.customerCategoryName}
productName={record.name}
unitName={record.unitName}
>
<a>查看</a>
</ProcessDetail>
<ProcessDetail
skuId={record.id}
uniqueID={uniqueID}
type={"edit"}
submit={handleChangeSomeList}
quantity={record.processNum}
processUnitPrice={record.processUnitPrice}
productId={record.commodityId}
brand={record.brandName}
category={record.customerCategoryName}
productName={record.name}
unitName={record.unitName}
>
<a>编辑</a>
</ProcessDetail>
<a onClick={() => handleRemoveRow(uniqueID)}>删除</a>
</Space>
)
}
},
]
return activeSource !== '加工订单' ? tempColumns.filter((item) => !blackList.includes(item.dataIndex)) : tempColumns;
useEffect(() => {
if(pathname.includes("add")) {
setEditInfo({
source: 1,
createTime: " ",
noticeNo: " "
})
}
}, [])
const actionColumns = [{
title: '操作',
render: (text, record) => {
// 只有加工订单才有fullId
const uniqueID = "fullId" in record ? record.fullId : record.id;
const files = record.files || [];
return (
<Space>
<ProcessDetail
skuId={record.id}
uniqueID={uniqueID}
type={"view"}
quantity={record.processNum}
processUnitPrice={record.processUnitPrice}
productId={record.commodityId}
brand={record.brandName}
category={record.customerCategoryName}
productName={record.name}
unitName={record.unitName}
files={files}
>
<a>查看</a>
</ProcessDetail>
<ProcessDetail
skuId={record.id}
uniqueID={uniqueID}
type={"edit"}
submit={handleChangeSomeList}
quantity={record.processNum}
processUnitPrice={record.processUnitPrice}
productId={record.commodityId}
brand={record.brandName}
category={record.customerCategoryName}
productName={record.name}
unitName={record.unitName}
files={files}
>
<a>编辑</a>
</ProcessDetail>
<a onClick={() => handleRemoveRow(uniqueID)}>删除</a>
</Space>
)
}
}];
const renderProductColumn = () => {
const newColumn = [...productColumns, ...actionColumns];
return newColumn
}
const renderOrderColumn = () => {
const newColumn = [...orderColumns, ...actionColumns];
return newColumn
}
// 选择弹框 element
const tableAddButton = () => {
// 选择弹框 element 订单
const tableProductAddButton = () => {
return (
<div>
<Button
onClick={handleShowProcessModal}
onClick={() => setModalProductVisible(true)}
style={{marginBottom: 16}}
block
icon={<PlusOutlined/>}
type='dashed'
>
选择{activeSource}
选择加工商品
</Button>
</div>
)
}
// 通知单明细 -> 通知单来源
const source = () => {
return (
<Radio checked={true}>{activeSource}</Radio>
)
}
// 流转记录
const RadioBtnGroup = () => {
const tableOrderAddButton = () => {
return (
<Radio.Group
options={
[
{ label: '外部流转(0)', value: 1 },
{ label: '内部流转(0)', value: 2 }
]
}
optionType="button"
/>
<div>
<Button
onClick={() => setModalOrderVisible(true)}
style={{marginBottom: 16}}
block
icon={<PlusOutlined/>}
type='dashed'
>
选择加工订单
</Button>
</div>
)
}
/**
* formEffect, 表单联动操作放这里操作，包括表单的生命周期等操作
*/
const formEffects = () => () => {
onFieldValueChange$('source').subscribe((state) => {
if(state.mounted) {
const value = state.value == 1 ? '加工订单' : '加工商品';
setActiveSource(value);
formActions.setFieldValue("Tabs.tab-2.layout.someLists", []);
}
})
// 当物流为 物流时，那么填充
onFieldMount$('receivefullAddress').subscribe((state) => {
PublicApi.getLogisticsReceiverAddressPage({current: '1', pageSize: '99'})
.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
}}
)
}
formActions.setFieldState("receivefullAddress", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
})
/**
* 当改变物流地址的时候，那么修改隐藏的3个字段，
* 1. receiveAddress 详细的物流地址
* 2. receiveUserName 收货人
* 3. receiveUserTel 收货人电话
*/
onFieldValueChange$('receivefullAddress').subscribe((state) => {
if(state.visible) {
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)
}
}
})
}
// 选择加工商品弹框控制
const handleShowProcessModal = () => {
const source = formActions.getFieldValue('source');
if(source == 1) {
setModalOrderVisible(true);
} else {
setModalProductVisible(true)
}
}
/**
* 加工企业modal框 行勾选
* @param rows
*/
const enterPriseOnOk = (rows) => {
const { memberId, name, roleId } = rows.selectRow[0];
const enterPriseOnOk = () => {
const row = enterpriseTableRowSelection.hasSelectedRows;
const { memberId, name, roleId, id } = row[0];
formActions.setFieldValue('Tabs.tab-1.layout.processName', name);
formActions.setFieldValue('Tabs.tab-1.layout.processMemberId', memberId);
formActions.setFieldValue('Tabs.tab-1.layout.processMemberId', id);
formActions.setFieldValue('Tabs.tab-1.layout.processRoleId', roleId);
}
......@@ -310,7 +276,7 @@ const Add: React.FC<{}> = () => {
* @param rows
*/
const processProductSelected = () => {
formActions.setFieldValue('Tabs.tab-2.layout.someLists', productTableRowSelection.hasSelectedRows)
formActions.setFieldValue('Tabs.tab-2.layout.productList', productTableRowSelection.hasSelectedRows)
}
/**
......@@ -318,7 +284,7 @@ const Add: React.FC<{}> = () => {
* @param row
*/
const processOrderOnok = () => {
formActions.setFieldValue('Tabs.tab-2.layout.someLists', orderTableRowSelection.hasSelectedRows)
formActions.setFieldValue('Tabs.tab-2.layout.orderList', orderTableRowSelection.hasSelectedRows)
}
/**
......@@ -337,10 +303,14 @@ const Add: React.FC<{}> = () => {
materialDesc = '',
packingDesc = '',
otherDesc = '',
someLists,
// someLists,
productList,
orderList,
...rest
} = values;
const deliveryDateFormat = deliveryDate.unix() * 1000;
const isProcessProduct = values.source === 2;
const someLists = isProcessProduct ? productList : orderList;
const isSomeFieldNotFill = someLists.some((item) => {
return typeof item.processNum === 'undefined' || typeof item.processUnitPrice === 'undefined'
})
......@@ -349,7 +319,7 @@ const Add: React.FC<{}> = () => {
message.error("通知单明细中有加工商品的加工数量或加工单价未填写");
return
}
console.log(someLists);
const {isSuccess, data} = await judgeSameWorkFlow(someLists);
console.log(data);
if(!isSuccess) {
......@@ -414,7 +384,9 @@ const Add: React.FC<{}> = () => {
delete postData.receiverAddressId
}
console.log(postData);
PublicApi.postEnhanceSupplierToBeAddAdd(postData)
const service = pathname.includes("edit") ? PublicApi.postEnhanceSupplierToBeAddUpdate : PublicApi.postEnhanceSupplierToBeAddAdd
const withId = pathname.includes("edit") ? { id: editInfo.id, ...postData}: postData;
service(withId)
.then(data => {
setSubmitLoading(false);
if(data.code === 1000) {
......@@ -426,8 +398,10 @@ const Add: React.FC<{}> = () => {
}
const handleChangeSomeList = (values: any) => {
let someList = formActions.getFieldValue('Tabs.tab-2.layout.someLists');
const primaryKey = activeSource === '加工订单' ? 'fullId' : 'id'
const isProcessProduct = formActions.getFieldValue('source') === 2;
const keyName = isProcessProduct ? 'Tabs.tab-2.layout.productList' : 'Tabs.tab-2.layout.orderList'
let someList = formActions.getFieldValue(keyName);
const primaryKey = !isProcessProduct ? 'fullId' : 'id'
const index = someList.findIndex((item) => item[primaryKey] == values.uniqueID);
if(index > -1) {
someList[index] = {
......@@ -439,7 +413,7 @@ const Add: React.FC<{}> = () => {
files: values.files
}
console.log(someList)
formActions.setFieldValue('Tabs.tab-2.layout.someLists', [...someList])
formActions.setFieldValue(keyName, [...someList])
}
}
......@@ -449,13 +423,15 @@ const Add: React.FC<{}> = () => {
* @param id
*/
const handleRemoveRow = (id: number) => {
const currentList = formActions.getFieldValue('Tabs.tab-2.layout.someLists');
const primaryKey = activeSource === '加工订单' ? 'fullId' : 'id'
const isProcessProduct = formActions.getFieldValue('source') === 2;
const keyName = isProcessProduct ? 'Tabs.tab-2.layout.productList' : 'Tabs.tab-2.layout.orderList'
const currentList = formActions.getFieldValue(keyName);
const primaryKey = !isProcessProduct ? 'fullId' : 'id'
const newList = currentList.filter((item) => item[primaryKey] !== id);
formActions.setFieldValue('Tabs.tab-2.layout.someLists', newList)
formActions.setFieldValue(keyName, newList)
const newSelectedKeys = newList.map((item) => item[primaryKey]);
const newSelectedRows = newList;
if(activeSource === '加工订单') {
if(!isProcessProduct) {
orderTableRowSelection.setSelectedRows(newSelectedRows);
orderTableRowSelection.setSelectedKeys(newSelectedKeys);
} else {
......@@ -486,19 +462,22 @@ const Add: React.FC<{}> = () => {
initialValues={editInfo}
schema={schema}
actions={formActions}
components={{WrapUploadFile, DatePicker, Select, Table}}
components={{WrapUploadFile, DatePicker, Select, Table, aaa: Radio.Group}}
expressionScope={{
connectProduct,
tableAddButton: tableAddButton(),
source: source(),
RadioBtnGroup: RadioBtnGroup(),
noticesDetailColumn: noticesDetailColumn()
tableOrderAddButton: tableOrderAddButton(),
tableProductAddButton: tableProductAddButton(),
renderProductColumn: renderProductColumn(),
renderOrderColumn: renderOrderColumn(),
}}
onSubmit={handleSubmit}
effects={formEffects()}
effects={() => {
formEffects()
}}
/>
{/* 加工企业 Modal 框 */}
<EnterPrise
rowSelection={enterpriseTableRowSelection.rowSelection}
visible={modalEnterPriseVisible}
cancel={() => setEnterPriseModalVisible(false)}
onOk={enterPriseOnOk}
......
src/pages/handling/assign/add/schema.tsx
View file @ f2a736d1
/*
* @Author: your name
* @Date: 2020-10-12 13:37:06
* @LastEditTime: 2020-10-16 16:55:22
* @Description: 新建生产通知单 schema
*/
import React from 'react';
import { Space, Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import ProcessDetail from '../../components/ProcessDetail'
import { innerWorkFlowRecordColumn, outerWorkflowRecordsColumn} from '../detail/columns';
// 流转记录
export const historyColumn = [
......@@ -90,7 +80,18 @@ const basicTab = {
value: 2
}
],
default: 1
"x-linkages": [
{
"type": "value:visible",
"target": "*(orderList, orderSource)",
"condition": "{{ $self.value === 1 }}"
},
{
"type": "value:visible",
"target": "*(productList, productSource)",
"condition": "{{ $self.value === 2 }}"
},
]
},
deliveryDate: {
......@@ -157,17 +158,19 @@ const basicTab = {
type: 'string',
display: false
},
docNo: {
noticeNo: {
type: 'string',
title: '通知单号',
'x-component': 'Text'
editable: false,
// 'x-component': 'Text'
},
docTime: {
createTime: {
type: 'string',
title: '单据时间',
'x-component': 'Text'
editable: false
// 'x-component': 'I'
},
status: {
outerStatus: {
type: 'string',
title: '外部状态',
'x-component': 'Children',
......@@ -175,7 +178,7 @@ const basicTab = {
children: '待提交通知单'
}
},
status2: {
innerStatus: {
type: 'string',
title: '内部状态',
'x-component': 'Children',
......@@ -209,14 +212,53 @@ const detailTab = {
labelAlign: 'left'
},
properties: {
selectedSource: {
orderSource: {
type: 'string',
title: '通知单来源',
'x-component': 'Children',
'x-component': 'Radio',
'x-component-props': {
options: [{
label: '加工订单',
value: 1,
}],
defaultValue: 1,
},
},
productSource: {
type: 'string',
title: '通知单来源',
'x-component': 'Radio',
'x-component-props': {
children: '{{source}}',
options: [{
label: '加工商品',
value: 2,
}],
defaultValue: 2,
},
},
someLists: {
// 加工商品
productList: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
},
'x-component': 'MultTable',
'x-component-props': {
rowKey: (record) => record.id + "_" + record.fullId,
prefix: "{{tableProductAddButton}}",
columns: "{{renderProductColumn}}"
// columns: "{{tableColumns}}",
},
'x-rules': [
{
required: true,
message: '请选择要加工的商品'
}
],
},
// 订单
orderList: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
......@@ -224,8 +266,8 @@ const detailTab = {
'x-component': 'MultTable',
'x-component-props': {
rowKey: (record) => record.id + "_" + record.fullId,
prefix: "{{tableAddButton}}",
columns: "{{noticesDetailColumn}}"
prefix: "{{tableOrderAddButton}}",
columns: "{{renderOrderColumn}}"
// columns: "{{tableColumns}}",
},
'x-rules': [
......@@ -234,7 +276,7 @@ const detailTab = {
message: '请选择要加工的商品'
}
]
}
},
}
}
}
......@@ -380,19 +422,49 @@ const historyRecord = {
properties: {
controller: {
type: 'object',
'x-component': 'Children',
"x-component": 'aaa',
"x-component-props": {
options: [
{ label: '外部流转', value: 1 },
{ label: '内部流转', value: 2 }
],
optionType: 'button',
},
'x-linkages': [
{
type: 'value:visible',
target: 'outerWorkFlow',
condition: '{{$value === 1}}'
},
{
type: 'value:visible',
target: 'innerWorkFlow',
condition: '{{$value === 2}}'
},
],
},
outerWorkFlow: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
},
'x-component': 'MultTable',
'x-component-props': {
children: '{{RadioBtnGroup}}'
columns: outerWorkflowRecordsColumn
}
},
historyTable: {
type: 'object',
'x-component': 'Table',
innerWorkFlow: {
type: 'array:number',
'x-mega-props': {
wrapperCol: 24,
},
'x-component': 'MultTable',
'x-component-props': {
columns: historyColumn
}
rowKey: (record) => record.id ,
columns: innerWorkFlowRecordColumn
// columns: "{{tableColumns}}",
},
}
}
}
......
src/pages/handling/common/useRowSelection.tsx
View file @ f2a736d1
......@@ -11,9 +11,9 @@ export const useRowSelection = (options) => {
type: type,
selectedRowKeys: selectedKeys,
onSelect: async (record: any, selected: boolean, selectedRows: any[], nativeEvent) => {
const tempKey = record[primaryKey];
// const tempKey = record[primaryKey];
if(type === 'radio') {
setSelectedKeys(record[tempKey]);
setSelectedKeys([record[primaryKey]]);
setSelectedRows(selectedRows);
return ;
}
......
src/pages/handling/components/EnterPrise/index.tsx
View file @ f2a736d1
......@@ -9,15 +9,15 @@ import { schema } from './schema';
const actions = createAsyncFormActions();
const { onFieldInit$, onFieldMount$ } = FormEffectHooks
const EnterPrise = ({visible, cancel, ...restProps}) => {
const [selectRow, memberRowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio'});
const EnterPrise = ({visible, cancel, rowSelection, ...restProps}) => {
// const [selectRow, memberRowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio'});
const fetchData = useCallback(async (params: any) => {
let res = await PublicApi.getMemberManageLowerPageBynamerole(params);
return res;
}, []);
const onOk = () => {
restProps.onOk(memberRowCtl)
restProps.onOk()
cancel();
}
......@@ -51,7 +51,7 @@ const EnterPrise = ({visible, cancel, ...restProps}) => {
schema={schema}
actions={actions}
effects={effects}
expressionScope={{rowSelection: selectRow}}
expressionScope={{rowSelection: rowSelection}}
></SearchForm>
: null
}
......
src/pages/handling/components/ProcessDetail/content.tsx
View file @ f2a736d1
......@@ -93,7 +93,7 @@ const Content: React.FC<Iprops> = React.forwardRef((props, conftentRef) => {
height = height + 112;
flag = true;
return {
name: item.name,
name: item.name,
min: prevHeight,
max: height
}
......@@ -110,6 +110,9 @@ const Content: React.FC<Iprops> = React.forwardRef((props, conftentRef) => {
const handleFormSubmit = (value) => {
props.formSubmit(value);
}
console.log(files);
return (
<div className={styles.container}>
<div className={styles.menu}>
......@@ -123,7 +126,7 @@ const Content: React.FC<Iprops> = React.forwardRef((props, conftentRef) => {
})
}
</div>
<div className={styles.body} ref={ref}>
<div className={styles.common} >
<div className={styles.header}>{"基本信息"}</div>
......@@ -140,7 +143,7 @@ const Content: React.FC<Iprops> = React.forwardRef((props, conftentRef) => {
<Col className={styles.label} span={4}>商品品类</Col>
<Col span={12}> {category}</Col>
</Row>
<Row className={styles.infoRow}>
<Row className={styles.infoRow}>
<Col className={styles.label} span={4}>商品品牌</Col>
<Col span={12}>{brand}</Col>
</Row>
......@@ -165,20 +168,19 @@ const Content: React.FC<Iprops> = React.forwardRef((props, conftentRef) => {
<div className={styles.header}>{"附件"}</div>
<div className={styles.info}>
{
files.length === 0 && props.type != 'edit'
files.length === 0
? <p>无</p>
: null
}
{
files.map((item,key) => {
return (
<FileList name={item.name} url={item.url} key={key} />
)
})
: props.type != 'edit'
? files.map((item,key) => {
return (
<FileList name={item.name} url={item.url} key={key} />
)
})
: null
}
{
props.type == 'edit'
? <UploadFile onChange={props.fileOnChange} fileMaxSize={20*1024} />
? <UploadFile fileList={files} onChange={props.fileOnChange} fileMaxSize={20*1024} />
: null
}
</div>
......@@ -224,4 +226,4 @@ const Content: React.FC<Iprops> = React.forwardRef((props, conftentRef) => {
)
})
export default React.memo(Content);
\ No newline at end of file
export default React.memo(Content);
src/pages/handling/components/ProcessDetail/index.tsx
View file @ f2a736d1
......@@ -17,6 +17,7 @@ interface Iprops {
productName: string,
unitName: string,
uniqueID: string,
files: any[],
}
interface IfileProps {
......@@ -28,7 +29,7 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
const {skuId, type, productName, ...rest} = props;
const [visible, setVisible] = useState<boolean>(false);
const [info, setInfo] = useState<any>({})
const [files, setFiles] = useState<IfileProps[]>([])
const [files, setFiles] = useState<IfileProps[]>(() => props.files)
const contentRef = useRef(null)
const onClose = () => {
......@@ -68,8 +69,11 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
}
}
useEffect(() => {
setFiles(props.files);
}, [props.files])
const formSubmit = (values) => {
console.log(values);
!!props.submit && props.submit({
files: files,
uniqueID: props.uniqueID,
......@@ -112,11 +116,11 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
>
{
visible
? <Content
name={info?.name}
id={info?.productId}
? <Content
name={info?.name}
id={info?.productId}
brand={info?.brand}
category={info?.category}
category={info?.category}
unitName={info?.unitName}
productProps={info?.attributes}
quantity={info?.quantity}
......@@ -130,10 +134,10 @@ const ProcessDetail: React.FC<Iprops> = (props) => {
/>
: null
}
</Drawer>
</>
)
}
export default ProcessDetail;
\ No newline at end of file
export default ProcessDetail;
src/pages/handling/components/UploadFile/UploadFile.tsx
View file @ f2a736d1
......@@ -4,7 +4,6 @@ import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons'
import { UPLOAD_TYPE } from '@/constants'
import FileListItem from './FileList';
import url from '*.svg';
const UploadFile = (props) => {
const { fileList = [], onChange, fileMaxSize = 20 } = props
......@@ -51,8 +50,7 @@ const UploadFile = (props) => {
};
const removeFile = (key) => {
const res = fileList.filter((item) => item != key);
console.log(res);
const res = fileList.filter((item) => item.name != key);
onChange(res);
}
......@@ -62,10 +60,10 @@ const UploadFile = (props) => {
{
fileList.map((item, key) => {
return (
<FileListItem
key={item}
name={item.name}
url={item.url}
<FileListItem
key={key}
name={item.name}
url={item.url}
removeFile={removeFile}
/>
)
......@@ -77,8 +75,7 @@ const UploadFile = (props) => {
</Upload>
<div className={styles.tips}>一次上传一个文件，每个附件大小不能超过{fileMaxSize / 1024}M</div>
</div>
)
}
export default UploadFile;
\ No newline at end of file
export default UploadFile;
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