mirror of https://gitee.com/cf-fz/WebCAD.git
!560 优化商品选择
ChenX
parent
279c7369ee
commit
a0630d10af
@ -0,0 +1,144 @@
|
||||
import * as React from 'react';
|
||||
import { observable, IObservableValue } from 'mobx';
|
||||
import { InputGroup, Icon, Classes } from '@blueprintjs/core';
|
||||
import { RequestStatus, PostJson } from '../../Common/Request';
|
||||
import { ShopUrls } from '../../Common/HostUrl';
|
||||
import { appCache } from '../../Common/AppCache';
|
||||
import { StoreageKeys } from '../../Common/StoreageKeys';
|
||||
import { Pagination } from '../Components/SourceManage/Pagination';
|
||||
import { observer } from 'mobx-react';
|
||||
import { KeyBoard } from '../../Common/KeyEnum';
|
||||
|
||||
export interface IGoodInfo
|
||||
{
|
||||
goods_id: string;
|
||||
name: string;
|
||||
color: string,
|
||||
material: string,
|
||||
}
|
||||
interface IGoodsListProps
|
||||
{
|
||||
select: (good: IGoodInfo) => void;
|
||||
open: IObservableValue<boolean>;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class GoodsList extends React.Component<IGoodsListProps> {
|
||||
private timeId: NodeJS.Timeout;
|
||||
@observable searchStr = "";
|
||||
@observable goods = [];
|
||||
@observable info = {
|
||||
count: 0,
|
||||
currentPage: 1,
|
||||
pageCount: 20
|
||||
}
|
||||
UNSAFE_componentWillMount()
|
||||
{
|
||||
this.handleSearch();
|
||||
}
|
||||
public render()
|
||||
{
|
||||
return (
|
||||
this.props.open.get() &&
|
||||
<>
|
||||
|
||||
<div className="search-shop"
|
||||
tabIndex={-1}
|
||||
onKeyUp={this.handleKeyDown}
|
||||
>
|
||||
<InputGroup
|
||||
placeholder="搜索要关联的商品"
|
||||
value={this.searchStr}
|
||||
onChange={this.handleChange}
|
||||
autoFocus
|
||||
rightElement={<Icon icon="double-caret-vertical" />} />
|
||||
<div className="title">
|
||||
<span>编码</span>
|
||||
<span>名称</span>
|
||||
<span>厚度</span>
|
||||
<span>材料</span>
|
||||
<span>颜色</span>
|
||||
<span>库存</span>
|
||||
</div>
|
||||
<ul className={Classes.LIST_UNSTYLED}>
|
||||
{
|
||||
this.goods.map(v =>
|
||||
{
|
||||
let mat = v.goods_param.find(p => p.name === "材料");
|
||||
let color = v.goods_param.find(p => p.name === "颜色");
|
||||
let thick = v.goods_param.find(p => p.name === "厚");
|
||||
|
||||
let matName = mat ? mat.value : "";
|
||||
let colorName = color ? color.value : "";
|
||||
let info = {
|
||||
goods_id: v.goods_id,
|
||||
name: v.goods_name,
|
||||
color: colorName,
|
||||
material: matName,
|
||||
}
|
||||
appCache.set(StoreageKeys.Goods + v.goods_id, info);
|
||||
|
||||
return <li
|
||||
value={v.goods_id}
|
||||
onClick={() => this.props.select(info)}
|
||||
>
|
||||
<span>{v.goods_sn}</span>
|
||||
<span>{v.goods_name}</span>
|
||||
<span>{thick ? thick.value : ""}</span>
|
||||
<span>{matName}</span>
|
||||
<span>{colorName}</span>
|
||||
<span>{v.goods_stock}</span>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
{
|
||||
this.info.count > 20 &&
|
||||
<Pagination
|
||||
pageData={this.info}
|
||||
getImgListFun={this.handleSearch}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className="masking" onClick={this.handleHideSelect}></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
{
|
||||
this.searchStr = e.target.value;
|
||||
if (this.timeId)
|
||||
clearTimeout(this.timeId);
|
||||
|
||||
this.timeId = setTimeout(async () =>
|
||||
{
|
||||
await this.handleSearch();
|
||||
}, 500);
|
||||
};
|
||||
handleSearch = async (opt: { curr_page: number } = { curr_page: 1 }) =>
|
||||
{
|
||||
this.info.currentPage = opt.curr_page;
|
||||
let data = await PostJson(ShopUrls.get, {
|
||||
...opt,
|
||||
goods_name: this.searchStr,
|
||||
bind_type: 1,
|
||||
goods_type: 1,
|
||||
});
|
||||
if (data.err_code === RequestStatus.Ok)
|
||||
{
|
||||
this.info.count = data.count;
|
||||
observable(this.goods).replace(data.goods);
|
||||
}
|
||||
};
|
||||
private handleKeyDown = (e: React.KeyboardEvent) =>
|
||||
{
|
||||
if (e.keyCode === KeyBoard.Escape)
|
||||
{
|
||||
this.handleHideSelect();
|
||||
}
|
||||
}
|
||||
private handleHideSelect = () =>
|
||||
{
|
||||
this.props.open.set(false);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue