Skip to content

J
jinfa-platform
Commit 7f845688 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

对接售后维修中...

parent a5d255d2
Hide whitespace changes
Inline Side-by-side
Showing with 418 additions and 258 deletions
src/pages/afterService/repairApplication/repairPrSubmit/components/GoodsDrawer/index.less
View file @ 7f845688
.goods {
.order {
display: flex;
flex-direction: column;
height: 100%;
&-head {
flex-shrink: 0;
}
&-body {
flex: 1;
}
&-foot {
flex-shrink: 0;
margin-top: 32px;
text-align: right;
}
}
\ No newline at end of file
src/pages/afterService/repairApplication/repairPrSubmit/components/GoodsDrawer/index.tsx
View file @ 7f845688
......@@ -2,17 +2,20 @@
* @Author: XieZhiXiong
* @Date: 2020-11-04 15:09:09
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-11-04 16:36:32
* @LastEditTime: 2020-11-12 18:15:53
* @Description: 维修商品抽屉组件
*/
import React, { useState } from 'react';
import { Drawer, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import { Drawer, Button, Pagination } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { createFormActions } from '@formily/antd';
import { ColumnType } from 'antd/lib/table/interface';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
import { GetOrderOneBatchOrderListResponse } from '@/services/OrderApi';
import { PurchaseOrderInsideWorkStateTexts, ORDER_TYPE2 } from '@/constants';
import NiceForm from '@/components/NiceForm';
import NestTable from '@/components/NestTable';
import { listSearchSchema } from './schema';
......@@ -20,164 +23,88 @@ import styles from './index.less';
const formActions = createFormActions();
const mockData = [
{
id: 1,
orderNo: 'SPTY12',
applyAbstract: '进口头层黄牛皮荔枝纹',
supplierName: '广州白马皮具交易中心',
createTime: '2020-05-12 08:08',
orderStatus: '已完成',
orderType: '询价采购',
childData: [
{
id: 11,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 12,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
}
]
},
{
id: 2,
orderNo: 'SPTY12',
applyAbstract: '进口头层黄牛皮荔枝纹',
supplierName: '广州白马皮具交易中心',
createTime: '2020-05-12 08:08',
orderStatus: '已完成',
orderType: '询价采购',
childData: [
{
id: 23,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 24,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
}
]
},
{
id: 3,
orderNo: 'SPTY12',
applyAbstract: '进口头层黄牛皮荔枝纹',
supplierName: '广州白马皮具交易中心',
createTime: '2020-05-12 08:08',
orderStatus: '已完成',
orderType: '询价采购',
childData: [
{
id: 35,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 36,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
}
]
},
{
id: 4,
orderNo: 'SPTY12',
applyAbstract: '进口头层黄牛皮荔枝纹',
supplierName: '广州白马皮具交易中心',
createTime: '2020-05-12 08:08',
orderStatus: '已完成',
orderType: '询价采购',
childData: [
{
id: 47,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 48,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
}
]
},
]
const PAGE_SIZE = 5;
interface goodItem {
// ID
id: string;
// 商品ID
productId: string;
// 订单ID
orderId: string;
// productName
productName: string;
// 品类
category: string;
// 品牌
brand: string;
// 单位
unit: string;
// 价格
price: number;
// 采购数量
purchaseCount: number;
// 退货数据
returnCount: number;
// 换货数量
replaceCount: number;
// 维修数量
repairCount: number;
// 一加工数量
processNum: number;
};
interface GoodsDrawer {
interface GoodsDrawerProps {
// 是否可见的
visible: boolean;
// 关闭事件
onClose: () => void;
// 确定时间
onConfirm: (values: goodItem[]) => void;
};
interface GoodsDrawerState {
page: number;
size: number;
searchVal: {
orderNo: string,
orderThe: string,
supplyMembersName: string,
startCreateTime: string,
endCreateTime: string,
type: string,
},
dataSource: GetOrderOneBatchOrderListResponse;
selectedRowKeys: number[];
childSelectedRowKeys: number[];
loading: boolean;
};
const GoodsDrawer: React.FC<GoodsDrawer> = ({
visible = false,
onClose,
}) => {
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([])
const [childSelectedRowKeys, setChildSelectedRowKeys] = useState<any>([])
class GoodsDrawer extends React.Component<GoodsDrawerProps, GoodsDrawerState> {
constructor(props) {
super(props);
this.state = {
page: 1,
size: PAGE_SIZE,
searchVal: {
orderNo: '',
orderThe: '',
supplyMembersName: '',
startCreateTime: undefined,
endCreateTime: undefined,
type: undefined,
},
dataSource: {
totalCount: 0,
data: [],
},
selectedRowKeys: [],
childSelectedRowKeys: [],
loading: false,
};
};
const tableColumn: ColumnType<any>[] = [
tableColumn: ColumnType<any>[] = [
{
title: '订单号',
dataIndex: 'orderNo',
......@@ -185,12 +112,12 @@ const GoodsDrawer: React.FC<GoodsDrawer> = ({
},
{
title: '订单摘要',
dataIndex: 'applyAbstract',
dataIndex: 'orderThe',
align: 'center',
},
{
title: '供应会员',
dataIndex: 'supplierName',
dataIndex: 'supplyMembersName',
align: 'center',
},
{
......@@ -200,17 +127,19 @@ const GoodsDrawer: React.FC<GoodsDrawer> = ({
},
{
title: '订单状态',
dataIndex: 'orderStatus',
align: 'center',
dataIndex: 'externalState',
align: 'center',
render: text => PurchaseOrderInsideWorkStateTexts[text],
},
{
title: '订单类型',
dataIndex: 'orderType',
align: 'center',
dataIndex: 'type',
align: 'center',
render: text => ORDER_TYPE2[text],
},
]
];
const childTableColumn: ColumnType<any>[] = [
childTableColumn: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'productId',
......@@ -242,96 +171,304 @@ const GoodsDrawer: React.FC<GoodsDrawer> = ({
align: 'center',
},
]
];
// 获取订单列表
getOrderList = () => {
const { page, size, searchVal } = this.state;
const handleClose = () => {
if (onClose) {
onClose();
this.setState({ loading: true });
PublicApi.getOrderOneBatchOrderList({
current: `${page}`,
pageSize: `${size}`,
...searchVal,
})
.then(res => {
if (res.code === 1000) {
this.setState({ dataSource: res.data });
}
})
.finally(() => {
this.setState({ loading: false });
});
};
componentDidUpdate(prevProps) {
if (
!prevProps.visible &&
this.props.visible &&
!this.state.loading
) {
this.getOrderList();
}
}
handlePaginationChange = (page, size) => {
this.setState({
page,
size
}, () => {
this.getOrderList();
});
};
// 子表格选中行
const handleChildSelectChange = () => {
handleClose = () => {
if (this.props.onClose) {
this.props.onClose();
}
};
handleSetChildSelectedRowKeys = keys => {
this.setState({
childSelectedRowKeys: keys,
});
};
handleSetSelectedRowKeys = keys => {
this.setState({
selectedRowKeys: keys,
});
};
// 子表格选中行
handleChildSelectChange = (record: any, selected: any, selectedRows: any) => {
const {
selectedRowKeys,
childSelectedRowKeys,
dataSource: {
data,
},
} = this.state;
let childArr: any = [...childSelectedRowKeys];
// 第一步 判断selected true：选中，将 id值 添加到childArr，false：取消选中，将 id值 从childArr中移除
if (selected) {
childArr.push(record.id);
} else {
childArr.splice(childArr.findIndex((item: any) => item === record.id), 1);
}
　　// 必须去除undefined，否则selectedRows会将其他子Table中选中的 id值 放到数组中，但是值为undefined，如：[ undefined，1，uundefined]
selectedRows = selectedRows.filter((a: any) => a !== undefined);
// 第二步，判断selectedRows的长度是否为data中child的长度，相等，就将父table选中，不等就不选中
for (let item of data) {
if (item.productDateilss.find((d: any) => d.id === record.id)) {
let parentArr: any = [...selectedRowKeys];
if (item.productDateilss.length === selectedRows.length) {
parentArr.push(item.id);
} else {
if (parentArr.length && parentArr.find((d: any) => d === item.id)) {
parentArr.splice(parentArr.findIndex((item1: any) => item1 === item.id), 1);
}
}
this.handleSetSelectedRowKeys(parentArr);
break;
}
}
this.handleSetChildSelectedRowKeys(childArr);
};
// 子表格选中所有行
const handleChildSelectAll = () => {
handleChildSelectAll = (selected: any, selectedRows: any, changeRows: any) => {
const {
selectedRowKeys,
childSelectedRowKeys,
dataSource: {
data,
},
} = this.state;
// 第一步：判断selected，true：将子Table全部选中，false：将子Table全部取消选中
let childArr: any = [...childSelectedRowKeys];
if (selected) {
// 全选
childArr = Array.from(new Set([...childArr, ...changeRows.map((item: any) => item.id)]));
} else {
// 取消全选
childArr = childArr.filter((item: any) => !changeRows.some((e: any) => e.id === item));
}
// 第二步：找到子Table对应的父Table的所在行，再判断selected，true：将父Table所在行选中，false：将父Table所在行取消选中
for (let item of data) {
if (item.productDateilss.find((d: any) => d.id === changeRows[0].id)) {
let parentArr: any = [...selectedRowKeys];
if (selected) {
// 全选
parentArr.push(item.id);
} else {
// 取消全选
parentArr.splice(parentArr.findIndex((item: any) => item === item.id), 1);
}
this.handleSetSelectedRowKeys(parentArr);
break;
}
}
this.handleSetChildSelectedRowKeys(childArr);
};
// 表格选中行
const handleParentSelectChange = () => {
handleParentSelectChange = (record: any, selected: any, selectedRows: any) => {
const {
selectedRowKeys,
childSelectedRowKeys,
dataSource: {
data,
},
} = this.state;
let parentArr: any = [...selectedRowKeys];
let childArr: any = [...childSelectedRowKeys];
// setChildArr：选择父Table下的所有子选项
let setChildArr = data.find((d: any) => d.id === record.id).productDateilss.map((item: any) => item.id);
// 第一步 判断selected true：选中，false，取消选中
if (selected) {
// 第二步，父Table选中，子Table全选中（全部整合到一起，然后去重）
parentArr.push(record.id);
childArr = Array.from(new Set([...setChildArr, ...childArr]));
} else {
// 第二步，父Table取消选中，子Table全取消选中（针对childArr，过滤掉取消选中的父Table下的所有子Table的 id）
parentArr.splice(parentArr.findIndex((item: any) => item === record.id), 1);
childArr = childArr.filter((item: any) => !setChildArr.some((e: any) => e === item));
}
// 第三步，设置父，子的SelectedRowKeys
this.handleSetSelectedRowKeys(parentArr);
this.handleSetChildSelectedRowKeys(childArr);
};
// 表格选中所有行
const hanldeParentSelectAll = () => {
hanldeParentSelectAll = (selected: any, selectedRows: any, changeRows: any) => {
const {
selectedRowKeys,
childSelectedRowKeys,
dataSource: {
data,
},
} = this.state;
let parentArr: any = [...selectedRowKeys];
let setChildArr: any = [];
　　// 将改变的父Table下的子Table下的 id 都添加到setChildArr中
changeRows.forEach((item: any) => {
setChildArr = [...setChildArr, ...item.productDateilss.map((item: any) => item.id)];
});
// 第一步判断 selected true：全选，false：取消全选
if (selected) {
// 第二步：父Table选中，子Table全选中，设置子Table 的 SelectedRowKeys
parentArr = Array.from(new Set([...parentArr, ...changeRows.map((item: any) => item.id)]));
this.handleSetChildSelectedRowKeys(setChildArr);
} else {
// 第二步：父Table取消选中，子Table 全取消选中，设置子 Table 的 SelectedRowKeys
parentArr = parentArr.filter((item: any) => !changeRows.some((e: any) => e.id === item));
this.handleSetChildSelectedRowKeys([]);
}
// 第三步：设置父Table的SelectedRowKeys
this.handleSetSelectedRowKeys(parentArr);
};
return (
<Drawer
title="选择维修商品"
width={1200}
onClose={handleClose}
visible={visible}
bodyStyle={{ paddingBottom: 80 }}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button onClick={onClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={handleClose} type="primary">
确定
</Button>
</div>
}
>
<div className={styles.goods}>
<div className={styles['goods-head']}>
<NiceForm
actions={formActions}
onSubmit={values => {}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'applyNo',
FORM_FILTER_PATH,
);
}}
schema={listSearchSchema}
/>
</div>
handleConfirm = () => {
const {
childSelectedRowKeys,
dataSource: {
data,
},
} = this.state;
const { onConfirm } = this.props;
<div>
<NestTable
NestColumns={[tableColumn, childTableColumn]}
className="common_tb"
rowClassName={(_, index) => (index % 2) === 0 && 'tb_bg'}
rowKey="id"
childrenDataKey="childData"
dataSource={mockData}
childRowSelection={{
selectedRowKeys: childSelectedRowKeys,
onSelect: handleChildSelectChange,
onSelectAll: handleChildSelectAll,
}}
rowSelection={{
selectedRowKeys: selectedRowKeys,
onSelect: handleParentSelectChange,
onSelectAll: hanldeParentSelectAll,
if (onConfirm) {
// 从选中的子表格行 key，找到完整的信息
const fullDate = [];
data.forEach(item => {
item.productDateilss.forEach(product => {
if (childSelectedRowKeys.find(key => key === product.id)) {
fullDate.push(product);
}
});
});
onConfirm(fullDate);
}
this.handleClose();
};
render() {
const {
page,
size,
dataSource,
childSelectedRowKeys,
selectedRowKeys,
loading,
} = this.state;
const {
visible = false,
} = this.props;
return (
<Drawer
title="选择维修商品"
width={1200}
onClose={this.handleClose}
visible={visible}
footer={
<div
style={{
textAlign: 'right',
}}
/>
>
<Button onClick={this.handleClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={this.handleConfirm} type="primary">
确定
</Button>
</div>
}
>
<div className={styles.order}>
<div className={styles['order-head']}>
<NiceForm
actions={formActions}
onSubmit={values => {}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'orderNo',
FORM_FILTER_PATH,
);
}}
schema={listSearchSchema}
/>
</div>
<div className={styles['order-body']}>
<NestTable
NestColumns={[this.tableColumn, this.childTableColumn]}
className="common_tb"
rowClassName={(_, index) => (index % 2) === 0 && 'tb_bg'}
rowKey="id"
childrenDataKey="productDateilss"
dataSource={dataSource.data}
loading={loading}
childRowSelection={{
selectedRowKeys: childSelectedRowKeys,
onSelect: this.handleChildSelectChange,
onSelectAll: this.handleChildSelectAll,
}}
rowSelection={{
selectedRowKeys: selectedRowKeys,
onSelect: this.handleParentSelectChange,
onSelectAll: this.hanldeParentSelectAll,
}}
/>
</div>
<div className={styles['order-foot']}>
<Pagination
current={page}
pageSize={size}
total={dataSource.totalCount}
onChange={this.handlePaginationChange}
showQuickJumper
/>
</div>
</div>
</div>
</Drawer>
);
</Drawer>
);
};
};
export default GoodsDrawer;
\ No newline at end of file
src/pages/afterService/repairApplication/repairPrSubmit/components/GoodsDrawer/schema/index.ts
View file @ 7f845688
......@@ -7,7 +7,17 @@
*/
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { UPLOAD_TYPE } from '@/constants';
import {
ORDER_TYPE2_INQUIRY,
ORDER_TYPE2_DEMAND,
ORDER_TYPE2_SPOT,
ORDER_TYPE2_CENTRALIZED,
ORDER_TYPE2_POINTS,
ORDER_TYPE2_CHANNEL_DIRECT,
ORDER_TYPE2_CHANNEL_SPOT,
ORDER_TYPE2_CHANNEL_POINTS,
ORDER_TYPE2,
} from '@/constants';
export const listSearchSchema: ISchema = {
type: 'object',
......@@ -16,13 +26,13 @@ export const listSearchSchema: ISchema = {
type: 'object',
'x-component': 'mega-layout',
properties: {
applyNo: {
orderNo: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
tip: '输入 申请单号 进行搜索',
tip: '输入 订单号 进行搜索',
},
},
[FORM_FILTER_PATH]: {
......@@ -35,47 +45,47 @@ export const listSearchSchema: ISchema = {
columns: 6,
},
properties: {
abstract: {
orderThe: {
type: 'string',
'x-component-props': {
placeholder: '申请单摘要',
placeholder: '订单摘要',
allowClear: true,
},
},
'[startTime, endTime]': {
supplyMembersName: {
type: 'string',
default: '',
'x-component': 'dateSelect',
'x-component-props': {
placeholder: '单据时间(全部)',
placeholder: '供应会员',
allowClear: true,
},
},
supplier: {
'[startCreateTime, endCreateTime]': {
type: 'string',
default: '',
'x-component': 'dateSelect',
'x-component-props': {
placeholder: '供应会员(全部)',
placeholder: '下单时间(全部)',
allowClear: true,
},
},
outerStatus: {
type: {
type: 'string',
default: undefined,
enum: [],
enum: [
{ label: ORDER_TYPE2[ORDER_TYPE2_INQUIRY], value: ORDER_TYPE2_INQUIRY },
{ label: ORDER_TYPE2[ORDER_TYPE2_DEMAND], value: ORDER_TYPE2_DEMAND },
{ label: ORDER_TYPE2[ORDER_TYPE2_SPOT], value: ORDER_TYPE2_SPOT },
{ label: ORDER_TYPE2[ORDER_TYPE2_CENTRALIZED], value: ORDER_TYPE2_CENTRALIZED },
{ label: ORDER_TYPE2[ORDER_TYPE2_POINTS], value: ORDER_TYPE2_POINTS },
{ label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_DIRECT], value: ORDER_TYPE2_CHANNEL_DIRECT },
{ label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_SPOT], value: ORDER_TYPE2_CHANNEL_SPOT },
{ label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_POINTS], value: ORDER_TYPE2_CHANNEL_POINTS },
],
'x-component-props': {
placeholder: '外部状态(全部)',
allowClear: true,
},
},
innerStatus: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: '内部状态(全部)',
allowClear: true,
},
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
......
src/pages/afterService/repairApplication/repairPrSubmit/components/RepairForm/index.tsx
View file @ 7f845688
......@@ -95,6 +95,10 @@ const RepairForm: React.FC<BillsFormProps> = ({
}
};
const handleGoodsConfirm = values => {
console.log('values', values);
};
return (
<Spin spinning={infoLoading}>
<PageHeaderWrapper
......@@ -156,6 +160,7 @@ const RepairForm: React.FC<BillsFormProps> = ({
<GoodsDrawer
visible={visibleDrawer}
onClose={() => setVisibleDrawer(false)}
onConfirm={handleGoodsConfirm}
/>
<Prompt when={unsaved} message="您还有未保存的内容，是否确定要离开？" />
......
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