|
|
|
|
@ -1,13 +1,11 @@
|
|
|
|
|
import { Card, HTMLTable, Icon, InputGroup, Tooltip } from '@blueprintjs/core';
|
|
|
|
|
import { IObservableValue, observable } from 'mobx';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import * as React from 'react';
|
|
|
|
|
import { observable, IObservableValue } from 'mobx';
|
|
|
|
|
import { InputGroup, Icon, Classes, Card } 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';
|
|
|
|
|
import { PostJson, RequestStatus } from '../../Common/Request';
|
|
|
|
|
import { Pagination2 } from '../Components/SourceManage/Pagination';
|
|
|
|
|
|
|
|
|
|
export interface IGoodInfo
|
|
|
|
|
{
|
|
|
|
|
@ -28,9 +26,9 @@ export class GoodsList extends React.Component<IGoodsListProps> {
|
|
|
|
|
@observable searchStr = "";
|
|
|
|
|
@observable goods = [];
|
|
|
|
|
@observable info = {
|
|
|
|
|
count: 0,
|
|
|
|
|
count: 0,//一共有n个
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
pageCount: 20
|
|
|
|
|
pageCount: 22//每页20个
|
|
|
|
|
};
|
|
|
|
|
private isDesc: boolean;
|
|
|
|
|
UNSAFE_componentWillMount()
|
|
|
|
|
@ -42,7 +40,6 @@ export class GoodsList extends React.Component<IGoodsListProps> {
|
|
|
|
|
return (
|
|
|
|
|
this.props.open.get() &&
|
|
|
|
|
<>
|
|
|
|
|
|
|
|
|
|
<Card className="search-shop"
|
|
|
|
|
tabIndex={-1}
|
|
|
|
|
onKeyUp={this.handleKeyDown}
|
|
|
|
|
@ -53,58 +50,58 @@ export class GoodsList extends React.Component<IGoodsListProps> {
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
autoFocus
|
|
|
|
|
rightElement={<Icon icon="double-caret-vertical" />} />
|
|
|
|
|
<div className="title">
|
|
|
|
|
<span>编码</span>
|
|
|
|
|
<span>名称</span>
|
|
|
|
|
<span className="flex-between">厚度
|
|
|
|
|
<Icon
|
|
|
|
|
icon="double-caret-vertical"
|
|
|
|
|
style={{ padding: 0, cursor: "pointer" }}
|
|
|
|
|
onClick={this.handleOrderGoods}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
<span>材料</span>
|
|
|
|
|
<span>颜色</span>
|
|
|
|
|
<span>库存</span>
|
|
|
|
|
</div>
|
|
|
|
|
<ul className={Classes.LIST_UNSTYLED}>
|
|
|
|
|
{
|
|
|
|
|
this.goods.map(v =>
|
|
|
|
|
<HTMLTable bordered={true} interactive={true} condensed={true} striped={false}
|
|
|
|
|
style={{ lineHeight: 0.7 }}
|
|
|
|
|
>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>编码</th>
|
|
|
|
|
<th>名称</th>
|
|
|
|
|
<th onClick={this.handleOrderGoods}
|
|
|
|
|
style={{ cursor: "pointer", minWidth: 80 }
|
|
|
|
|
}>厚度<Icon icon={this.isDesc === undefined ? "double-caret-vertical" : (this.isDesc ? "chevron-up" : "chevron-down")} />
|
|
|
|
|
</th>
|
|
|
|
|
<th>材料</th>
|
|
|
|
|
<th>颜色</th>
|
|
|
|
|
<th>库存</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{
|
|
|
|
|
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 === "厚");
|
|
|
|
|
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);
|
|
|
|
|
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,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
return <tr
|
|
|
|
|
key={v.goods_id}
|
|
|
|
|
onClick={() => this.props.select(info)}
|
|
|
|
|
style={{ lineHeight: "normal" }}
|
|
|
|
|
>
|
|
|
|
|
<td>{v.goods_sn}</td>
|
|
|
|
|
<td><OneLineText text={v.goods_name} /></td>
|
|
|
|
|
<td>{thick ? thick.value : ""}</td>
|
|
|
|
|
<td><OneLineText text={matName} /></td>
|
|
|
|
|
<td><OneLineText text={colorName} /></td>
|
|
|
|
|
<td>{v.goods_stock}</td>
|
|
|
|
|
</tr>;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</tbody>
|
|
|
|
|
</HTMLTable>
|
|
|
|
|
{
|
|
|
|
|
this.info.count > 20 &&
|
|
|
|
|
<Pagination
|
|
|
|
|
pageData={this.info}
|
|
|
|
|
getImgListFun={this.handleSearch}
|
|
|
|
|
/>
|
|
|
|
|
this.info.count > this.info.pageCount &&
|
|
|
|
|
<Pagination2 count={Math.ceil(this.info.count / this.info.pageCount)} cursor={this.info.currentPage} onPaginate={this.handleSearch} />
|
|
|
|
|
}
|
|
|
|
|
</Card>
|
|
|
|
|
<div className="masking" onClick={this.handleHideSelect}></div>
|
|
|
|
|
@ -122,18 +119,19 @@ export class GoodsList extends React.Component<IGoodsListProps> {
|
|
|
|
|
await this.handleSearch();
|
|
|
|
|
}, 500);
|
|
|
|
|
};
|
|
|
|
|
handleSearch = async (opt: { curr_page: number; } = { curr_page: 1 }) =>
|
|
|
|
|
handleSearch = async (page = 1) =>
|
|
|
|
|
{
|
|
|
|
|
this.info.currentPage = opt.curr_page;
|
|
|
|
|
this.info.currentPage = page;
|
|
|
|
|
|
|
|
|
|
let order: string;
|
|
|
|
|
if (this.isDesc !== undefined)
|
|
|
|
|
order = this.isDesc ? "2" : "2 DESC";
|
|
|
|
|
const query: any = {
|
|
|
|
|
...opt,
|
|
|
|
|
curr_page: page,
|
|
|
|
|
goods_name: this.searchStr,
|
|
|
|
|
bind_type: 1,
|
|
|
|
|
goods_type: 1,
|
|
|
|
|
page_count: this.info.pageCount,
|
|
|
|
|
};
|
|
|
|
|
if (order)
|
|
|
|
|
query.order = order;
|
|
|
|
|
@ -164,7 +162,20 @@ export class GoodsList extends React.Component<IGoodsListProps> {
|
|
|
|
|
clearTimeout(this.timeId);
|
|
|
|
|
this.timeId = setTimeout(async () =>
|
|
|
|
|
{
|
|
|
|
|
await this.handleSearch({ curr_page: 1 });
|
|
|
|
|
await this.handleSearch(1);
|
|
|
|
|
}, 200);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const InLineStyle: React.CSSProperties = {
|
|
|
|
|
display: "-webkit-box",
|
|
|
|
|
WebkitBoxOrient: "vertical",
|
|
|
|
|
WebkitLineClamp: 1,
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
alignSelf: "center",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function OneLineText({ text }: { text: string; })
|
|
|
|
|
{
|
|
|
|
|
return <span style={InLineStyle}>{text}</span>;
|
|
|
|
|
}
|
|
|
|
|
|
ChenX
4 years ago