import React, { useCallback, useEffect, useMemo } from 'react';
import {DataSet, Table, Modal, Form, Button, Select, T
extField,
NumberField} from 'choerodon-ui/pro';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { getCurrentOrganizationId } from 'utils/utils';
import intl from 'utils/intl';
import {API_HOST, WMS_INV } from 'wmsUtils/config';
import { Button as ButtonPermission } from 'components/Permission';
import FieldUploadButton from 'comComponents/FileUpload';
import ExcelExport from 'components/ExcelExport';
import { handleReportPrint } from 'wms-front-common/src/components/ReportPrint';
import { observer } from 'mobx-react-lite';
import notification from 'utils/notification';
import { tablePropsDs, formInDs, formOutDs } from './indexDs';
import {handleDelete} from "./api";
export default function tablePage(props) {
const tableDs = useMemo(() => new DataSet(tablePropsDs()), []);
const columns = useMemo(
() =>
[
{
name: 'trackNumber',
},
{
name: 'goodsName',
},
{
name: 'qty',
},
{
name: 'weight',
},
{
name: 'place',
},
{
name: 'poNumber',
},
{
name: 'recipient',
},
{
name: 'realRecipient',
},
{
name: 'mobile',
},
{
name: 'department',
},
{
name: 'attribute1',
},
{
name: 'stockStatus',
},
{
name: 'receiveUser',
},
{
name: 'shippedUser',
},
{
name: 'placementDate',
},
{
name: 'takeDate',
},
{
header: intl.get('winv.common.table.column.option').d('操作'),
name: 'action',
align: 'left',
lock: 'right',
renderer: ({ record }) => {
return (
<div style={{display: 'flex', alignItems: 'center'}}>
<a
style={{marginRight: '10px'}}
onClick={() => {
const data = record.toData();
if(data.stockStatus==='NORMAL_OUT') {
openModal('out',data)
}else {
openModal('In',data)
}
}}
>
编辑
</a>
<FieldUploadButton record={record} objectType='attachment' />
</div>
);
},
},
],
[]
);
useEffect(() => {
tableDs.query();
}, []);
// 点击打开弹窗
const openModal = (type, record) =>{
let FormDs = type==='In'?new DataSet(formInDs('')) :new DataSet(formOutDs(''))
let title = type==='In'?'新建代收品入库':'新建代收品出库'
if(record?.id){
FormDs = type==='In'?new DataSet(formInDs(record?.id)) :new DataSet(formOutDs(record?.id))
FormDs.query()
title = type==='In'?'编辑代收品入库':'编辑代收品出库'
}else{
if(type==='out'){
const recordData = {
trackNumber: record.trackNumber,
goodsName: record.goodsName,
poNumber: record.poNumber,
place: record.place,
qty: record.qty,
recipient: record.recipient,
attribute1: record.attribute1,
}
FormDs.create(recordData)
}else{
FormDs.create();
}
}
Modal.open({
title,
children: (
<Form dataSet={FormDs} labelWidth={120}>
<T
extField name='trackNumber' />
<T
extField name='goodsName' />
<T
extField name='poNumber' />
<T
extField name='place' />
<
NumberField name='qty' />
<T
extField name='recipient' />
<T
extField name='mobile' />
<
NumberField name='weight' />
<T
extField name='department' />
<Select name='attribute1' />
{
type==='out'&&<
NumberField name='outQty' />
}
{
type==='out'&&<T
extField name='realRecipient' />
}
</Form>
),
onOk: async () => {
if(type==='out'){
const data = FormDs.current?.toData();
if(Number(data.qty)<Number(data.outQty)){
notification.warning({
message: '出库数量必须小于等于在库数量，请检查！',
description: '',
})
return false
}
}
await FormDs.submit().then(()=>{
tableDs.query();
});
// const isFlag = await FormDs.current?.validate();
// if(isFlag){
//
// }else{
// return false
// }
},
});
}
const getExportQueryParams = ()=> {
const queryData = tableDs.queryDataSet?.toData()[0];
for (const item in queryData) {
if (!queryData[item]) {
delete queryData[item];
}
}
const idList = tableDs.currentSelected.map(item =>
item.get('id'),
);
return {
idList,
...queryData,
};
}
const HeaderButtons = observer(propsr => {
//@ts-ignore
const { dataSet, name, url, handleFunction, icon, style, engName } = propsr
const isDisabled = dataSet?.selected?.
length === 0;
return (
<>
<ButtonPermission
type="c7n-pro"
key="create"
color="primary"
funcType="flat"
icon="playlist_add"
permissionList={[
{
code: '/winv/zx/collection-management/collectDetailInfoIn',
type: 'button',
meaning: '入库单-新建行',
},
]}
onClick={() =>
openModal('In',{})
}
>
入库
</ButtonPermission>
<ButtonPermission
type="c7n-pro"
key="create"
color="primary"
funcType="flat"
disabled={isDisabled}
onClick={() =>
handleReportPrint(tableDs, {
reportCode: 'CUX.ZX.COLLECT_DETAIL_REPORT',
idsKey:['id','ids']
})
}
permissionList={[
{
code: '/winv/zx/collection-management/reportPrint',
type: 'button',
meaning: '入库单-新建行',
},
]}
>
打印
</ButtonPermission>
<ButtonPermission
type="c7n-pro"
key="create"
color="primary"
funcType="flat"
icon="playlist_add"
disabled={ dataSet?.selected?.
length!==1}
permissionList={[
{
code: '/winv/zx/collection-management/collectDetailInfoOut',
type: 'button',
meaning: '入库单-新建行',
},
]}
onClick={() =>{
const recordData = dataSet?.selected[0].toData()
if(recordData.stockStatus==='NORMAL_IN' && recordData.qty>0){
openModal('out',{
trackNumber: recordData.trackNumber,
goodsName: recordData.goodsName,
poNumber: recordData.poNumber,
place: recordData.place,
qty: recordData.qty,
recipient: recordData.recipient,
attribute1: recordData.attribute1,
})
}else{
notification.warning({
message: '运单号状态、件数（数量）不满足要求，请检查！',
description:''
})
}
}}
>
出库
</ButtonPermission>
<ButtonPermission
type="c7n-pro"
key="delete"
color="red"
funcType="flat"
icon="delete"
disabled={isDisabled}
onClick={()=>{
const recordData = dataSet?.selected.map((item)=>{
return item.toData();
})
Modal.confirm({
title: '是否要删除，删除操作不可逆，是否删除',
onOk: async () => {
const res = await handleDelete(recordData)
if(res&&res.message){
notification.error({
message: res.message,
description: '',
})
}else{
await tableDs.query();
}
},
});
}}
permissionList={[
{
code: '/winv/zx/collectionManagement/delete',
type: 'button',
meaning: '入库单-删除行',
},
]}
>
{intl.get('winv.common.button.delete').d('删除')}
</ButtonPermission>
</>
);
});
// @ts-ignore
const buttons = [<HeaderButtons dataSet={tableDs} />];
return (
<PageHeaderWrapper
title="代收品管理"
header={[
<ExcelExport
requestUrl={`${API_HOST}${WMS_INV}/v1/${getCurrentOrganizationId()}/cux-collect-detail-infos/export`}
queryParams={getExportQueryParams}
otherButtonProps={{ className: 'label-btn' }}
exportAsync
/>,
]}
>
<Table
dataSet={tableDs}
columns={columns}
buttons={buttons}
customizedCode='ZX.COLLECTION.MANAGEMENT'
/>
</PageHeaderWrapper>
);
}
解释代码
本文介绍了一种重载Ext.js框架中NumberField组件的maxLength方法，限制输入框的字符长度为2，并实现初始化值的正确赋值。
扫一扫
2436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
