Commit 259dff07 authored by Bill's avatar Bill

Merge branch 'dev' of 10.0.0.22:lingxi/lingxi-business-paltform into dev

parents bfb1899d 8ff562b6
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import { Table } from 'antd' import { Table } from 'antd'
import { TableProps, ColumnsType } from 'antd/es/table' import { TableProps, ColumnsType, TablePaginationConfig } from 'antd/es/table'
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons' import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons'
export interface NestTableProps extends TableProps<any> { export interface NestTableProps extends TableProps<any> {
...@@ -9,15 +9,17 @@ export interface NestTableProps extends TableProps<any> { ...@@ -9,15 +9,17 @@ export interface NestTableProps extends TableProps<any> {
*/ */
NestColumns: ColumnsType<any>[], NestColumns: ColumnsType<any>[],
// 指定获得的子集数据类型 // 指定获得的子集数据类型
childrenDataKey: string childrenDataKey: string,
childPagination?: false | TablePaginationConfig,
childRowSelection?: any,
} }
/** /**
* 嵌套表格 * 嵌套表格
* @todo 实现无限嵌套, 目前暂时实现两层 * @todo 实现无限嵌套, 目前暂时实现两层
*/ */
const NestTable:React.FC<NestTableProps> = (props) => { const NestTable: React.FC<NestTableProps> = (props) => {
const { NestColumns, childrenDataKey, dataSource, ...resetProps } = props const { NestColumns, childrenDataKey, dataSource, pagination = false, childPagination = false, childRowSelection = null, ...resetProps } = props
if (NestColumns.length > 2) { if (NestColumns.length > 2) {
throw new Error('暂时不支持2项以上的嵌套table') throw new Error('暂时不支持2项以上的嵌套table')
} }
...@@ -27,11 +29,15 @@ const NestTable:React.FC<NestTableProps> = (props) => { ...@@ -27,11 +29,15 @@ const NestTable:React.FC<NestTableProps> = (props) => {
const childRenderTable = useCallback((record) => { const childRenderTable = useCallback((record) => {
return <Table return <Table
columns={childColumns} columns={childColumns}
size="middle"
dataSource={record[childrenDataKey] || []} dataSource={record[childrenDataKey] || []}
rowClassName={(_, index) => (index % 2) === 0 && "tb_bg"}
rowKey='id' rowKey='id'
rowSelection={childRowSelection}
pagination={childPagination}
/> />
}, [childColumns, childrenDataKey]) }, [childColumns, childrenDataKey])
return ( return (
<Table <Table
columns={parentColumns} columns={parentColumns}
...@@ -39,13 +45,13 @@ const NestTable:React.FC<NestTableProps> = (props) => { ...@@ -39,13 +45,13 @@ const NestTable:React.FC<NestTableProps> = (props) => {
expandable={{ expandable={{
expandedRowRender: childRenderTable, expandedRowRender: childRenderTable,
expandIcon: ({ expanded, onExpand, record }) => expandIcon: ({ expanded, onExpand, record }) =>
expanded ? ( expanded ? (
<CaretDownOutlined onClick={e => onExpand(record, e)} /> <CaretDownOutlined onClick={e => onExpand(record, e)} />
) : ( ) : (
<CaretRightOutlined onClick={e => onExpand(record, e)} /> <CaretRightOutlined onClick={e => onExpand(record, e)} />
) )
}} }}
pagination={false} pagination={pagination}
{...resetProps} {...resetProps}
/> />
) )
......
.search_form {
position: relative;
margin-bottom: 16px;
:global {
.ant-form-item {
margin-bottom: 0;
}
}
.daterangegpicker_wrap {
display: flex;
}
}
\ No newline at end of file
import React, { useState } from 'react'
import { Form, Row, Col, Input, Button, Select, DatePicker } from 'antd'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
import styles from './index.less'
const { RangePicker } = DatePicker
interface SearchItemType {
type: any,
component: any,
key: any,
placeholder: any,
span?: number,
option?: {
label: string,
value: any
}[]
}
interface OperationItemType {
searchList: SearchItemType[],
highSearchList: SearchItemType[]
}
interface SearchFormPropsType {
option: OperationItemType
}
const SearchForm: React.FC<SearchFormPropsType> = (props) => {
const { option } = props
const [isHighSearch, setIsHighSearch] = useState<boolean>(false)
const [form] = Form.useForm()
const handleSearch = () => {
}
const handleReset = () => {
}
const renderFormItemByCompnent = (detail: SearchItemType) => {
switch (detail.component) {
case 'Search':
return (
<Form.Item
name={detail.key}
>
<Input.Search
style={{ width: 256 }}
placeholder={detail.placeholder}
allowClear
onSearch={handleSearch}
/>
</Form.Item>
)
case 'Input':
return (
<Form.Item
name={detail.key}
>
<Input
style={{ width: '100%' }}
placeholder={detail.placeholder}
allowClear
/>
</Form.Item >
)
case 'Select':
return (
<Form.Item
name={detail.key}
>
<Select
style={{ width: '100%' }}
placeholder={detail.placeholder}
allowClear
>
{
detail.option.map((item, index) => (
<Select.Option key={`option_${index}`} value={item.value}>{item.label}</Select.Option>
))
}
</Select>
</Form.Item >
)
case 'DateRangePicker':
return (
<Form.Item
name={detail.key}
>
<RangePicker
style={{ width: '100%' }}
// format={dateFormat}
/>
</Form.Item>
// <span className={styles.daterangegpicker_wrap}>
// <Form.Item
// name={detail.key[0]}
// >
// <DatePicker placeholder={detail.placeholder[0]} />
// </Form.Item>
// <Form.Item
// name={detail.key[1]}
// >
// <DatePicker placeholder={detail.placeholder[1]} />
// </Form.Item>
// </span>
)
}
}
return (
<div className={styles.search_form}>
<Form form={form}>
<Row>
<Col span={24}>
<Row gutter={[16, 16]} style={{ marginBottom: 0 }}>
{/* <Col span={6}></Col> */}
<Col span={18} style={{ display: 'flex', justifyContent: 'flex-start', padding: '0 8px' }}>
{
option.searchList && option.searchList.map((item, index) => (
<Col key={`searchList_item_${index}`}>
{
renderFormItemByCompnent(item)
}
</Col>
))
}
{
option.highSearchList && (
<Col>
<Button onClick={() => setIsHighSearch(!isHighSearch)}>高级筛选{isHighSearch ? <CaretUpOutlined /> : <CaretDownOutlined />}</Button>
</Col>
)
}
<Col>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
</Col>
</Row>
</Col>
{
isHighSearch &&
<Col span={24}>
<Row gutter={[16, 16]} justify="end">
<Col span={24} style={{ display: 'flex', justifyContent: 'flex-start' }}>
{
option.highSearchList && option.highSearchList.map((hignSearchItem, hignSearchIndex) => (
<Col key={`hignSearchList_item_${hignSearchIndex}`} span={hignSearchItem.span || 4}>
{
renderFormItemByCompnent(hignSearchItem)
}
</Col>
))
}
</Col>
</Row>
</Col>
}
</Row>
</Form>
</div>
)
}
export default SearchForm
...@@ -814,7 +814,7 @@ export const SaleOrderInsideWorkStateTexts = { ...@@ -814,7 +814,7 @@ export const SaleOrderInsideWorkStateTexts = {
8: '提交二级审核订单不通过', 8: '提交二级审核订单不通过',
9: '不接受订单', 9: '不接受订单',
10: '待确认支付结果', 10: '待确认支付结果',
16: '支付结果确认到账', 16: '支付结果确认到账',
17: '支付结果没到账', 17: '支付结果没到账',
18: '发货单创建', 18: '发货单创建',
......
...@@ -27,6 +27,7 @@ margin; ...@@ -27,6 +27,7 @@ margin;
.hide { .hide {
display: none; display: none;
} }
// antd default // antd default
h1, h1,
h2, h2,
...@@ -37,6 +38,21 @@ h6 { ...@@ -37,6 +38,21 @@ h6 {
color: #909399; color: #909399;
} }
.tb_bg {
background-color: #FAFBFC;
}
.common_tb {
.ant-table-thead>tr>th {
background-color: #FFF;
}
tr.ant-table-expanded-row>td,
tr.ant-table-expanded-row:hover>td {
background: #FFF;
}
}
.@{prefix}-margin_content { .@{prefix}-margin_content {
.center-margin; .center-margin;
width: 1190px; width: 1190px;
...@@ -152,38 +168,40 @@ h6 { ...@@ -152,38 +168,40 @@ h6 {
background: none; background: none;
} }
} }
.white-wrapper { .white-wrapper {
background-color: #fff; background-color: #fff;
} }
//addonAfter 有选择弹窗时 //addonAfter 有选择弹窗时
.input_addonAfter{ .input_addonAfter {
.ant-input-group-addon{ .ant-input-group-addon {
padding: 0 !important; padding: 0 !important;
} }
} }
/* 有关联或选择按钮的input输入框 */ /* 有关联或选择按钮的input输入框 */
// 此样式用于input的父级以上元素 // 此样式用于input的父级以上元素
.useConnectBtnWrapper { .useConnectBtnWrapper {
.ant-input-group-addon { .ant-input-group-addon {
padding: 0; padding: 0;
border: none; border: none;
} }
.connectBtn {
width: 80px; .connectBtn {
height: 32px; width: 80px;
line-height: 32px; height: 32px;
background: #909399; line-height: 32px;
color: #fff; background: #909399;
text-align: center; color: #fff;
cursor: pointer; text-align: center;
} cursor: pointer;
}
} }
/* 带树的模态框 */ /* 带树的模态框 */
// 此样式用于模态框上面 // 此样式用于模态框上面
.useTreeModalWrapper{ .useTreeModalWrapper {
.ant-tree .ant-tree-treenode { .ant-tree .ant-tree-treenode {
padding-bottom: 0; padding-bottom: 0;
padding-right: 16px; padding-right: 16px;
...@@ -197,6 +215,7 @@ h6 { ...@@ -197,6 +215,7 @@ h6 {
border-color: @main-color; border-color: @main-color;
background: @tree-node_hover; background: @tree-node_hover;
} }
&.ant-tree-treenode:hover { &.ant-tree-treenode:hover {
border-color: @main-color; border-color: @main-color;
background: @tree-node_hover; background: @tree-node_hover;
...@@ -209,7 +228,7 @@ h6 { ...@@ -209,7 +228,7 @@ h6 {
} }
} }
.tree-node-circle { .tree-node-circle {
width: 4px; width: 4px;
...@@ -260,8 +279,7 @@ h6 { ...@@ -260,8 +279,7 @@ h6 {
cursor: pointer; cursor: pointer;
} }
.editable-row:hover .editable-row:hover .editable-cell-value-wrap {
.editable-cell-value-wrap {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-radius: 4px; border-radius: 4px;
padding: 4px 11px; padding: 4px 11px;
...@@ -273,8 +291,8 @@ h6 { ...@@ -273,8 +291,8 @@ h6 {
font-size: 12px; font-size: 12px;
} }
// 强制覆盖下拉框固定位置 // 强制覆盖下拉框固定位置
.fixed-ant-selected-down { .fixed-ant-selected-down {
.ant-select-dropdown { .ant-select-dropdown {
top: 36px !important; top: 36px !important;
} }
......
.modal_wrap {
position: relative;
.modal_tb_wrap {
position: relative;
height: 60vh;
overflow-y: auto;
}
.modal_tb_pagination {
position: relative;
text-align: right;
margin-top: 24px;
}
}
\ No newline at end of file
import React, { useState } from 'react'
import { Modal, Pagination } from 'antd'
import NestTable from '@/components/NestTable'
import { exchangeGoodsModalTableColumn, exchangeGoodsModalChildTableColumn } from '../../model/exchangeGoodsTable'
import SearchForm from '@/components/SearchForm'
import styles from './index.less'
interface AddModalPropsType {
visible: boolean;
onOk: Function;
onCancel: Function;
}
const AddModal: React.FC<AddModalPropsType> = (props) => {
const { visible = false, onOk, onCancel } = props
const [totalCount, setTotalCount] = useState<number>(4)
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10)
const mockData = [
{
id: 1,
orderNo: 'SPTY12',
applyAbstract: '进口头层黄牛皮荔枝纹',
supplierName: '广州白马皮具交易中心',
createTime: '2020-05-12 08:08',
orderStatus: '已完成',
orderType: '询价采购',
orderDeliveryProducts: [
{
id: 1,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 2,
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: '询价采购',
orderDeliveryProducts: [
{
id: 3,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 4,
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: '询价采购',
orderDeliveryProducts: [
{
id: 5,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 6,
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: '询价采购',
orderDeliveryProducts: [
{
id: 7,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
},
{
id: 8,
productId: 1110,
productName: '进口头层黄牛皮荔枝纹/红色',
category: '牛皮',
brand: 'PELLE',
unit: '尺',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 4000,
replaceCount: 1000,
}
]
},
]
const handleRowSelectionChangge = (selectedRowKeys, selectedRows) => {
console.log(selectedRowKeys, selectedRows)
}
const searchOption = {
searchList: [
{
type: 'string',
component: 'Search',
key: 'orderNo',
placeholder: '搜索',
}
],
highSearchList: [
{
type: 'string',
component: 'Input',
key: 'applyAbstract',
placeholder: '订单摘要',
},
{
type: 'array',
component: 'DateRangePicker',
key: ['startTime', 'endTime'],
span: 6,
placeholder: ['开始时间', '结束时间'],
},
{
type: 'string',
component: 'Input',
key: 'supplierName',
placeholder: '供应会员',
},
{
type: 'string',
component: 'Select',
key: 'orderType',
placeholder: '订单类型',
option: [
{
label: '所有',
value: 0
}
]
},
]
}
return (
<Modal
title="选择换货商品"
width={1200}
visible={visible}
centered
onOk={() => onOk()}
onCancel={() => onCancel()}
>
<div className={styles.modal_wrap}>
<SearchForm option={searchOption} />
<div className={styles.modal_tb_wrap}>
<NestTable
NestColumns={[exchangeGoodsModalTableColumn, exchangeGoodsModalChildTableColumn]}
rowKey='id'
className="common_tb"
rowClassName={(_, index) => (index % 2) === 0 && "tb_bg"}
childrenDataKey='orderDeliveryProducts'
dataSource={mockData}
childRowSelection={{
onChange: handleRowSelectionChangge
}}
/>
</div>
<div className={styles.modal_tb_pagination}>
<Pagination
showQuickJumper
showSizeChanger
pageSize={pageSize}
current={current}
total={totalCount}
showTotal={total => `共 ${total} 条`}
/>
</div>
</div>
</Modal>
)
}
export default AddModal
...@@ -16,6 +16,39 @@ ...@@ -16,6 +16,39 @@
} }
} }
.operation_btn_group {
display: flex;
align-items: center;
.opration_btn_split {
position: relative;
height: 16px;
width: 1px;
background: #EEF0F3;
margin: 0 15px;
}
.operation_btn {
position: relative;
padding: 5.6px 0;
}
}
.tb_wrap { .tb_wrap {
margin-top: 24px; margin-top: 24px;
.exchange_goods_tb {
position: relative;
:global {
.ant-table-thead>tr>th {
background-color: #FFF;
}
}
}
.tb_bg {
background-color: #FAFBFC;
}
} }
\ No newline at end of file
import React from 'react' import React, { useState } from 'react'
import { PlusOutlined } from '@ant-design/icons' import { PlusOutlined } from '@ant-design/icons'
import { exchangeGoodsTableColumn } from './model/exchangeGoodsTable' import { exchangeGoodsTableColumn } from './model/exchangeGoodsTable'
import AddModal from './components/addModal'
import styles from './index.less' import styles from './index.less'
import { Table } from 'antd' import { Table, Button } from 'antd'
interface ExchangeGoodsProps { interface ExchangeGoodsProps {
} }
const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => { const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => {
const [addVisible, setAddvisible] = useState<boolean>(true)
const data = [ const data = [
{ {
...@@ -23,18 +25,108 @@ const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => { ...@@ -23,18 +25,108 @@ const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => {
purchaseAmount: 40000, purchaseAmount: 40000,
replaceCount: 2000, replaceCount: 2000,
replaceReason: '质量检查不合格', replaceReason: '质量检查不合格',
},
{
id: 2,
orderNo: 'SPTY12',
productId: '1110',
productName: '进口头层黄牛皮荔枝纹/红色/XXL',
category: 'category',
unit: '',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 40000,
replaceCount: 2000,
replaceReason: '质量检查不合格',
},
{
id: 3,
orderNo: 'SPTY12',
productId: '1110',
productName: '进口头层黄牛皮荔枝纹/红色/XXL',
category: 'category',
unit: '',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 40000,
replaceCount: 2000,
replaceReason: '质量检查不合格',
},
{
id: 4,
orderNo: 'SPTY12',
productId: '1110',
productName: '进口头层黄牛皮荔枝纹/红色/XXL',
category: 'category',
unit: '',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 40000,
replaceCount: 2000,
replaceReason: '质量检查不合格',
},
{
id: 5,
orderNo: 'SPTY12',
productId: '1110',
productName: '进口头层黄牛皮荔枝纹/红色/XXL',
category: 'category',
unit: '',
purchaseCount: 2000,
purchasePrice: 20,
purchaseAmount: 40000,
replaceCount: 2000,
replaceReason: '质量检查不合格',
} }
] ]
const columns = exchangeGoodsTableColumn.concat([
{
title: '操作',
dataIndex: 'opration',
render: () => {
return <div className={styles.operation_btn_group}>
<Button type="link" className={styles.operation_btn}>编辑</Button>
<div className={styles.opration_btn_split}></div>
<Button type="link" className={styles.operation_btn}>删除</Button>
</div>
}
},
])
/**
* 确认添加换货商品
*/
const handldAddOk = () => {
}
/**
* 取消添加
*/
const handleAddCancel = () => {
setAddvisible(false)
}
return ( return (
<div> <div>
<div className={styles.add_btn}> <div className={styles.add_btn} onClick={() => setAddvisible(true)}>
<PlusOutlined /> <PlusOutlined />
<span>选择换货商品</span> <span>选择换货商品</span>
</div> </div>
<div className={styles.tb_wrap}> <div className={styles.tb_wrap}>
<Table dataSource={data} columns={exchangeGoodsTableColumn} /> <Table
className={styles.exchange_goods_tb}
rowKey="id"
rowClassName={(_, index) => (index === 0 || (index % 2) === 0) && styles.tb_bg}
dataSource={data}
columns={columns}
/>
</div> </div>
<AddModal
visible={addVisible}
onOk={handldAddOk}
onCancel={handleAddCancel}
/>
</div> </div>
) )
} }
......
...@@ -61,9 +61,95 @@ export const exchangeGoodsTableColumn: any[] = [ ...@@ -61,9 +61,95 @@ export const exchangeGoodsTableColumn: any[] = [
dataIndex: 'replaceReason', dataIndex: 'replaceReason',
ellipsis: true, ellipsis: true,
}, },
]
export const exchangeGoodsModalTableColumn: any[] = [
{ {
title: '操作', title: '订单号',
dataIndex: 'opration', dataIndex: 'orderNo',
ellipsis: true, key: 'orderNo'
},
{
title: '订单摘要',
dataIndex: 'applyAbstract',
key: 'applyAbstract',
},
{
title: '供应会员',
dataIndex: 'supplierName',
key: 'supplierName',
// render: text => formatTimeString(text)
},
{
title: '下单时间',
dataIndex: 'createTime',
key: 'createTime',
},
{
title: '订单状态',
dataIndex: 'orderStatus',
key: 'orderStatus'
},
{
title: '订单类型',
dataIndex: 'orderType',
key: 'orderType',
},
]
export const exchangeGoodsModalChildTableColumn: any[] = [
{
title: 'ID',
dataIndex: 'productId',
key: 'productId',
},
{
title: '商品名称',
dataIndex: 'productName',
key: 'productName',
},
{
title: '品类',
dataIndex: 'category',
key: 'category',
},
{
title: '品牌',
dataIndex: 'brand',
key: 'brand',
},
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
},
{
title: '订单数量',
dataIndex: 'purchaseCount',
key: 'purchaseCount',
},
{
title: '采购单价',
dataIndex: 'purchasePrice',
key: 'purchasePrice',
},
{
title: '采购金额',
dataIndex: 'purchaseAmount',
key: 'purchaseAmount',
},
{
title: '已换货数量',
dataIndex: 'replaceCount',
key: 'replaceCount',
}, },
] ]
\ No newline at end of file
...@@ -43,8 +43,12 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => { ...@@ -43,8 +43,12 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
const [goodsIds, setGoodsIds] = useState<any>([]) const [goodsIds, setGoodsIds] = useState<any>([])
const [totalCount, setTotalCount] = useState<number>(0) const [totalCount, setTotalCount] = useState<number>(0)
const [filterParam, setFilterParam] = useState() const [filterParam, setFilterParam] = useState()
const [spinLoading, setSpinLoading] = useState<boolean>(false)
const [newProps, setNewProps] = useState(props) const [newProps, setNewProps] = useState(props)
const [categoryResponseList, setCategoryResponseList] = useState<any>([])
const [noSelectBrands, setNoSelectBrands] = useState<any[]>([])
const changeNewProps = (key: string, data: any) => { const changeNewProps = (key: string, data: any) => {
const newProps = { ...props } const newProps = { ...props }
newProps[key] = data newProps[key] = data
...@@ -52,6 +56,44 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => { ...@@ -52,6 +56,44 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
} }
useEffect(() => { useEffect(() => {
fetchBrandsList()
fetchCategoryList()
}, [])
const fetchCategoryList = () => {
let param = {
categoryId: categoryid,
templateId: templateid
}
setSpinLoading(true)
//@ts-ignore
PublicApi.getTemplatePlatformFindCategoryList(param).then(res => {
const data = res.data
setCategoryResponseList(data.categoryBOList || [])
setSpinLoading(false)
})
}
const fetchBrandsList = () => {
let param = {
type: 0,
templateId: templateid,
categoryId: categoryid,
current: 1,
pageSize: 100
}
//@ts-ignore
PublicApi.getTemplatePlatformFindBrandList(param).then((res: any) => {
if (res.code === 1000) {
const dataInfo = res.data
setNoSelectBrands(dataInfo.data || [])
}
})
}
useEffect(() => {
fetchGoodsList() fetchGoodsList()
}, [filterParam]) }, [filterParam])
...@@ -293,7 +335,9 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => { ...@@ -293,7 +335,9 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
className={styles.mar_bot_0} className={styles.mar_bot_0}
> >
<Select placeholder="品类" style={{ width: 180 }}> <Select placeholder="品类" style={{ width: 180 }}>
<Select.Option value="1">1</Select.Option> {
categoryResponseList.map((item, index) => <Select.Option kye={`select_category_item_${index}`} value={item.categoryId}>{item.categoryName}</Select.Option>)
}
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
...@@ -303,7 +347,9 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => { ...@@ -303,7 +347,9 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
className={styles.mar_bot_0} className={styles.mar_bot_0}
> >
<Select placeholder="品牌" style={{ width: 180 }}> <Select placeholder="品牌" style={{ width: 180 }}>
<Select.Option value="1">1</Select.Option> {
noSelectBrands.map((item, index) => (<Select.Option kye={`select_brand_item_${index}`} value={item.brandId}>{item.brandName}</Select.Option>))
}
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
......
...@@ -245,6 +245,9 @@ const CommodityDetail = (props) => { ...@@ -245,6 +245,9 @@ const CommodityDetail = (props) => {
* 加入进货单 * 加入进货单
*/ */
const handleAddToPurchase = () => { const handleAddToPurchase = () => {
if (!checkoutUserInfo()) {
return
}
if (!selectCommodityId) { if (!selectCommodityId) {
message.destroy() message.destroy()
message.info("请选择商品属性") message.info("请选择商品属性")
...@@ -302,10 +305,31 @@ const CommodityDetail = (props) => { ...@@ -302,10 +305,31 @@ const CommodityDetail = (props) => {
return link return link
} }
const checkoutUserInfo = () => {
const userInfo = getAuth()
if (userInfo) {
if (userInfo.memberRoleType !== 2) {
message.info('当前角色无法购买')
return false
}
if (userInfo.memberId === commodityDetail.memberId) {
message.info("不能购买自己的商品")
return false
}
return true
} else {
message.info("请先登录")
return false
}
}
/** /**
* 立即购买 * 立即购买
*/ */
const handleToBuy = (priceType: COMMODITY_TYPE = COMMODITY_TYPE.prompt) => { const handleToBuy = (priceType: COMMODITY_TYPE = COMMODITY_TYPE.prompt) => {
if (!checkoutUserInfo()) {
return
}
if (!selectCommodityId) { if (!selectCommodityId) {
message.destroy() message.destroy()
message.info("请选择商品属性") message.info("请选择商品属性")
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { PublicApi } from '@/services/api' import { PublicApi } from '@/services/api'
import ImageBox from '@/components/ImageBox'
import styles from './index.less' import styles from './index.less'
interface NewJoinPropsType { interface NewJoinPropsType {
...@@ -40,7 +41,7 @@ const NewJoin: React.FC<NewJoinPropsType> = (props) => { ...@@ -40,7 +41,7 @@ const NewJoin: React.FC<NewJoinPropsType> = (props) => {
newJoinShopList && newJoinShopList.map(item => ( newJoinShopList && newJoinShopList.map(item => (
<div className={styles.new_join_list_item} key={`new_join_list_item_${item.id}`}> <div className={styles.new_join_list_item} key={`new_join_list_item_${item.id}`}>
<div className={styles.new_join_logo}> <div className={styles.new_join_logo}>
<img src={item.logo} /> <ImageBox width={32} height={32} imgUrl={item.logo} direction="column" />
</div> </div>
<div className={styles.new_join_name}> <div className={styles.new_join_name}>
<a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`}> <a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`}>
......
...@@ -5,6 +5,7 @@ import { Rate } from 'antd' ...@@ -5,6 +5,7 @@ import { Rate } from 'antd'
import shop_icon from '@/assets/imgs/shop_icon.png' import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png' import credit_icon from '@/assets/imgs/credit_icon.png'
import { priceFormat } from '@/utils/numberFomat' import { priceFormat } from '@/utils/numberFomat'
import ImageBox from '@/components/ImageBox'
import styles from './list.less' import styles from './list.less'
interface CommodityListPropsType { interface CommodityListPropsType {
...@@ -46,7 +47,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => { ...@@ -46,7 +47,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
<div className={styles.shop_list_left}> <div className={styles.shop_list_left}>
<div className={styles.shop_list_info}> <div className={styles.shop_list_info}>
<div className={styles.shop_list_info_imgbox}> <div className={styles.shop_list_info_imgbox}>
<div className={styles.shop_list_info_imgbox_img} style={{ backgroundImage: `url(${item.logo})` }}></div> <ImageBox width={70} height={70} imgUrl={item.logo} direction="column" />
</div> </div>
<div className={styles.shop_list_info_box}> <div className={styles.shop_list_info_box}>
<div className={styles.shop_list_info_name}> <div className={styles.shop_list_info_name}>
......
...@@ -4,6 +4,7 @@ import { StandardTable } from 'god'; ...@@ -4,6 +4,7 @@ import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { createFormActions } from '@formily/antd'; import { createFormActions } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'; import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect'; import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { FORM_FILTER_PATH } from '@/formSchema/const'; import { FORM_FILTER_PATH } from '@/formSchema/const';
...@@ -48,7 +49,7 @@ const QuotaMenage: React.FC = () => { ...@@ -48,7 +49,7 @@ const QuotaMenage: React.FC = () => {
const defaultColumns: ColumnType<any>[] = [ const defaultColumns: ColumnType<any>[] = [
{ {
title: '会员归属', title: '会员归属',
dataIndex: 'memberName', dataIndex: 'parentMemberName',
align: 'center', align: 'center',
render: (text, record) => ( render: (text, record) => (
<EyePreview <EyePreview
...@@ -60,34 +61,34 @@ const QuotaMenage: React.FC = () => { ...@@ -60,34 +61,34 @@ const QuotaMenage: React.FC = () => {
}, },
{ {
title: '会员类型', title: '会员类型',
dataIndex: 'memberType', dataIndex: 'memberTypeName',
align: 'center', align: 'center',
}, },
{ {
title: '会员角色', title: '会员角色',
dataIndex: 'memberRole', dataIndex: 'memberRoleName',
align: 'center', align: 'center',
render: (text, record) => <>{text}</>, render: (text, record) => <>{text}</>,
}, },
{ {
title: '所属会员等级', title: '所属会员等级',
dataIndex: 'memberLevel', dataIndex: 'memberLevelName',
align: 'center', align: 'center',
render: (text, record) => <>{text}</>, render: (text, record) => <>{text}</>,
}, },
{ {
title: '剩余可用额度(元)', title: '剩余可用额度(元)',
dataIndex: 'available', dataIndex: 'canUseQuota',
align: 'center', align: 'center',
}, },
{ {
title: '总额度/已用额度(元)', title: '总额度/已用额度(元)',
dataIndex: 'count', dataIndex: 'quota',
align: 'center', align: 'center',
render: (text, record) => ( render: (text, record) => (
<> <>
<div>总额度:{text}</div> <div>总额度:{text}</div>
<div>已使用:{record.used}</div> <div>已使用:{record.useQuota}</div>
</> </>
), ),
}, },
...@@ -98,7 +99,7 @@ const QuotaMenage: React.FC = () => { ...@@ -98,7 +99,7 @@ const QuotaMenage: React.FC = () => {
render: (text, record) => ( render: (text, record) => (
<Progress <Progress
type="circle" type="circle"
percent={40} percent={Math.floor(record.useQuota / record.quota)}
strokeColor="#41CC9E" strokeColor="#41CC9E"
strokeWidth={12} strokeWidth={12}
width={40} width={40}
...@@ -108,28 +109,41 @@ const QuotaMenage: React.FC = () => { ...@@ -108,28 +109,41 @@ const QuotaMenage: React.FC = () => {
}, },
{ {
title: '还款状态', title: '还款状态',
dataIndex: 'repaymentStatus', dataIndex: 'repayStatusName',
align: 'center', align: 'center',
render: (text, record) => ( render: (text, record) => (
<StatusTag type="warnning" title="逾期 3 天" /> <StatusTag type="warnning" title={text} />
), ),
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'statusName',
align: 'center', align: 'center',
filters: [], filters: [],
onFilter: (value, record) => record.innerStatus === value, onFilter: (value, record) => record.innerStatus === value,
render: (text, record) => <Badge color="#41CC9E" text="正常" />, render: (text, record) => <Badge color="#41CC9E" text={text} />,
}, },
]; ];
const [columns, setColumns] = useState<any[]>(defaultColumns); const [columns, setColumns] = useState<any[]>(defaultColumns);
const fetchListData = (params: any) => { const fetchListData = (params: any) => {
return Promise.resolve({ const { status = 0, rePayStatus = 0, ...rest } = params;
total: 2, return new Promise((resolve, reject) => {
data: mock, PublicApi.getPayCreditApplyPageCredit({
status,
rePayStatus,
...rest,
})
.then(res => {
if (res.code === 1000) {
resolve(res.data);
}
reject();
})
.catch(() => {
reject();
});
}); });
}; };
...@@ -156,7 +170,7 @@ const QuotaMenage: React.FC = () => { ...@@ -156,7 +170,7 @@ const QuotaMenage: React.FC = () => {
useStateFilterSearchLinkageEffect( useStateFilterSearchLinkageEffect(
$, $,
actions, actions,
'name', 'parentMemberName',
FORM_FILTER_PATH, FORM_FILTER_PATH,
); );
useAsyncInitSelect( useAsyncInitSelect(
......
...@@ -16,7 +16,7 @@ export const listSearchSchema: ISchema = { ...@@ -16,7 +16,7 @@ export const listSearchSchema: ISchema = {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'mega-layout',
properties: { properties: {
name: { parentMemberName: {
type: 'string', type: 'string',
'x-component': 'Search', 'x-component': 'Search',
'x-component-props': { 'x-component-props': {
...@@ -35,7 +35,7 @@ export const listSearchSchema: ISchema = { ...@@ -35,7 +35,7 @@ export const listSearchSchema: ISchema = {
columns: 6, columns: 6,
}, },
properties: { properties: {
repaymentStatus: { rePayStatus: {
type: 'string', type: 'string',
default: undefined, default: undefined,
enum: [], enum: [],
......
...@@ -78,13 +78,13 @@ const Commodity: React.FC = () => { ...@@ -78,13 +78,13 @@ const Commodity: React.FC = () => {
return ( return (
<div className={styles.commodity_price}> <div className={styles.commodity_price}>
<span></span> <span></span>
<label>{commodity.min}</label> <label>{commodity.min === commodity.max ? numFormat(commodity.min) : `${numFormat(commodity.min)}~${numFormat(commodity.max)}`}</label>
</div> </div>
) )
case COMMODITY_TYPE.integral: case COMMODITY_TYPE.integral:
return ( return (
<div className={styles.commodity_point}> <div className={styles.commodity_point}>
{numFormat(commodity.min)}~{numFormat(commodity.max)}积分 {commodity.min === commodity.max ? numFormat(commodity.min) : `${numFormat(commodity.min)}~${numFormat(commodity.max)}`}积分
</div> </div>
) )
case COMMODITY_TYPE.inquiry: case COMMODITY_TYPE.inquiry:
...@@ -104,9 +104,14 @@ const Commodity: React.FC = () => { ...@@ -104,9 +104,14 @@ const Commodity: React.FC = () => {
content: `是否要取消收藏?`, content: `是否要取消收藏?`,
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let param = { let param: any = {
commodityId: detail.id commodityId: detail.commodity.id,
type: detail.type
} }
if ([3, 4, 5].includes(detail.type)) {
param.channelMemberId = detail.channelMemberId
}
console.log(param, "param")
PublicApi.postSearchShopCommodityCollectDeleteCommodityCollect(param).then(res => { PublicApi.postSearchShopCommodityCollectDeleteCommodityCollect(param).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
fetchCollectCommodityList() fetchCollectCommodityList()
...@@ -160,7 +165,7 @@ const Commodity: React.FC = () => { ...@@ -160,7 +165,7 @@ const Commodity: React.FC = () => {
</div> </div>
<div className={cx(styles.commodity_list_item_item)}> <div className={cx(styles.commodity_list_item_item)}>
<div className={styles.collection_state_wrap}> <div className={styles.collection_state_wrap}>
<div className={cx(styles.collection_state)} onClick={() => handleCancelCollect(item.commodity)}> <div className={cx(styles.collection_state)} onClick={() => handleCancelCollect(item)}>
<StarFilled /> <StarFilled />
<label>收藏</label> <label>收藏</label>
</div> </div>
......
...@@ -15,7 +15,7 @@ const Collection: React.FC = () => { ...@@ -15,7 +15,7 @@ const Collection: React.FC = () => {
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<div className={styles.collection_wrap}> <div className={styles.collection_wrap}>
<Tabs defaultActiveKey="shops" className={styles.collection_tabs} > <Tabs defaultActiveKey="commodity" className={styles.collection_tabs} >
<TabPane tab="商品收藏" key="commodity"> <TabPane tab="商品收藏" key="commodity">
<Commodity /> <Commodity />
</TabPane> </TabPane>
......
...@@ -230,7 +230,7 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => { ...@@ -230,7 +230,7 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
{ label: '对应报价单号', name: 'quotationNo', span: 8, render: text => <Link to={'/'}>{text}</Link> }, { label: '对应报价单号', name: 'quotationNo', span: 8, render: text => <Link to={'/'}>{text}</Link> },
{ label: '订单摘要', name: 'orderThe', span: 8 }, { label: '订单摘要', name: 'orderThe', span: 8 },
{ label: '供应会员', name: 'supplyMembersName', span: 8 }, { label: '供应会员', name: 'supplyMembersName', span: 8 },
{ label: '下单模式', name: 'orderModel', span: 8, render: text => GlobalConfig.web.orderMode[text].label }, { label: '下单模式', name: 'orderModel', span: 8, render: text => GlobalConfig.web.orderMode.find(v => v.value === text)?.label || '' },
{ label: '订单类型', name: 'type', span: 8, render: text => orderTypeLabel[text] }, { label: '订单类型', name: 'type', span: 8, render: text => orderTypeLabel[text] },
{ label: '下单时间', name: 'createTime', span: 8, render: text => formatTimeString(text) }, { label: '下单时间', name: 'createTime', span: 8, render: text => formatTimeString(text) },
{ label: '外部状态', name: 'externalState', span: 8, render: text => <StatusColors type='out' status={text}/> }, { label: '外部状态', name: 'externalState', span: 8, render: text => <StatusColors type='out' status={text}/> },
......
...@@ -520,8 +520,8 @@ const AddBills: React.FC<{}> = (props: any) => { ...@@ -520,8 +520,8 @@ const AddBills: React.FC<{}> = (props: any) => {
goodsId: item.id, goodsId: item.id,
itemName: item.name, itemName: item.name,
specifications: item.type, specifications: item.type,
category: item.customerCategory.name, category: item.customerCategory ? item.customerCategory.name : '',
brand: item.brand.name, brand: item.brand ? item.brand.name : '',
unit: item.unitName, unit: item.unitName,
costPrice: item.costPrice, costPrice: item.costPrice,
product: undefined, product: undefined,
......
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