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