Skip to content

J
jinfa-platform
Commit 062755a5 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:对接快捷修改单价列表页

parent fc8e3e98
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 204 deletions
src/global/styles/global.less
View file @ 062755a5
......@@ -50,14 +50,14 @@ h6 {
position: relative;
&::before {
content : "";
display : inline-block;
position : absolute;
left : 0;
top : 50%;
margin-top : -.42667rem;
width : 2px;
height : .85333rem;
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
margin-top: -.42667rem;
width: 2px;
height: .85333rem;
background-color: @primary-color;
box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
border-radius: 1px;
......@@ -83,6 +83,10 @@ h6 {
cursor: pointer;
}
.padLeft0 {
padding-left: 0!important;
}
// 公共状态 圆点
.commonStatus {
display: inline-block;
......@@ -124,7 +128,7 @@ h6 {
.sc-fzpans {
display: block;
width : 100%;
width: 100%;
}
......
src/pages/commodity/products/fastModifyPrice.tsx
View file @ 062755a5
import React, { useState, useEffect, useRef, ReactNode } from 'react'
// import { history } from 'umi'
import { Button, Form, Card, Modal, Input, Col, Row, Tooltip, Checkbox } from 'antd'
import { history } from 'umi'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Input, Menu, Popconfirm } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
EyeOutlined,
MinusOutlined,
PlusOutlined,
CaretUpOutlined,
CaretDownOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import { PublicApi } from '@/services/api'
import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController'
import moment from 'moment'
import styles from "./index.less"
import { PublicApi } from '@/services/api'
const {Item}:any = Form
const { Option } = Select;
const { Item }:any = Form
// 定义选择的行数据的类型
// interface Item {
// key: string;
// goodsName: string;
// type: string;
// brand: string;
// unit: string;
// price: string;
// checkTime: string;
// status: string;
// }
const layout = {
labelCol: { span: 24 },
wrapperCol: { span: 24 },
};
const data = [
{
key: '1',
goodsName: '百达翡丽',
type: '小羊皮',
brand: 'YSL',
unit: '寸',
price: '￥400 ~ ￥500',
checkTime: '2019-45-5 12:12:54',
status: '0'
},
{
key: '2',
goodsName: '万宝卡',
type: '小瓜皮',
brand: 'MAC',
unit: '克',
price: '￥400 ~ ￥500',
checkTime: '2019-45-5 12:12:54',
status: '1'
},
{
key: '3',
goodsName: '小宝SOD蜜',
type: '洗护一体',
brand: 'AOC',
unit: '吨',
price: '￥186 ~ ￥536',
checkTime: '2019-45-5 12:12:54',
status: '2'
},
{
key: '4',
goodsName: '大宝SOD蜜',
type: '洗护一体',
brand: 'AOC',
unit: '吨',
price: '￥186 ~ ￥536',
checkTime: '2019-45-5 12:12:54',
status: '3'
},
{
key: '5',
goodsName: '宝SOD蜜',
type: '洗护一体',
brand: 'AOC',
unit: '吨',
price: '￥186 ~ ￥536',
checkTime: '2019-45-5 12:12:54',
status: '4'
},
{
key: '6',
goodsName: 'SOD',
type: '洗护一体',
brand: 'AOC',
unit: '吨',
price: '￥186 ~ ￥536',
checkTime: '2019-45-5 12:12:54',
status: '5'
},
]
// 模拟请求
// const fetchData = (params:any) => {
// return new Promise((resolve, reject) => {
// const queryResult = data.find(v => v.key === params.keywords)
// setTimeout(() => {
// resolve({
// code: 200,
// message: '',
// data: queryResult ? [queryResult] : data
// })
// }, 1000)
// })
// }
interface Item {
key: string;
productName: string;
type: string;
brand: string;
unit: string;
price: string;
time: string;
status: string;
}
const fetchData = async (params:any) => {
const res = await PublicApi.getProductCommodityGetCommodityDetailList(params)
return res.data ? res.data : []
interface paramItem {
name: string;
code: string;
priceType: number;
Min: number;
Max: number;
brandId: number;
customerCategoryId: number;
status: number;
}
let timeChange: any;
const FastModifyPrice: React.FC<{}> = () => {
const ref = useRef({})
const [setForm] = Form.useForm()
const [modifyModal, setModifyModal] = useState(false)
const [ladderPrice, setLadderPrice] = useState(false)
let [isHighSearch, setIsHighSearch] = useState(false)
const layout = {
labelCol: { span: 24 },
wrapperCol: { span: 24 },
};
const [filterParams, setFilterParams] = useState<paramItem>({
name: '',
code: '',
priceType: null,
Min: 0,
Max: 0,
brandId: 0,
customerCategoryId: 0,
status: null,
})
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [classData, setClassData] = useState<any>([])
const [classValue, setClassValue] = useState(undefined)
const columns: ColumnType<any>[] = [
{
title: 'ID',
title: '商品ID',
dataIndex: 'id',
key: 'id',
},
{
title: '商品品名称',
title: '商品名称',
dataIndex: 'name',
key: 'name',
className: 'commonPickColor',
render: (text:any, record:any) => <span className="commonPickColor" onClick={()=>handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
render: (text: any, record: any) => <span className="commonPickColor" onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
},
{
title: '品类',
dataIndex: 'type',
key: 'type',
dataIndex: ['customerCategory', 'name'],
key: 'customerCategory.name',
},
{
title: '品牌',
dataIndex: 'brand',
key: 'brand',
dataIndex: ['brand', 'name'],
key: 'brand.name',
},
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
dataIndex: 'unitName',
key: 'unitName',
},
{
title: '价格',
dataIndex: 'price',
key: 'price',
dataIndex: 'min',
key: 'min',
render: (text: any, reocrd: any) => (<>￥{reocrd.min} ~ ￥{reocrd.max}</>)
},
{
title: '申请审核时间',
dataIndex: 'checkTime',
key: 'checkTime',
title: '审核时间',
dataIndex: 'applyTime',
key: 'applyTime',
render: (text: any, record: any) => text && moment(text).format('YYYY-MM-DD HH:mm:ss')
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text:any, record:any) => {
render: (text: any, record: any) => {
let component: ReactNode = null
// if(record.status === '0')
// component = (<><span className="commonStatusInvalid"></span>待提交</>)
// else if(record.status === '1')
// component = (<><span className="commonStatusModify"></span>待审核</>)
// else if(record.status === '2')
// component = (<><span className="commonStatusValid"></span>审核通过</>)
// else if(record.status === '3')
// component = (<><span className="commonStatusStop"></span>审核不通过</>)
// else if(record.status === '4')
component = (<span style={{color:'#00B37A',padding:'2px 5px',background:'rgba(235,247,242,1)',borderRadius:'4px'}}>已上架</span>)
// else if(record.status === '5')
// component = (<span style={{padding:'2px 5px',background:'rgba(244,245,247,1)',borderRadius:'4px'}}>已下架</span>)
if (record.status === 1)
component = (<><span className="commonStatusStop"></span>待提交审核</>)
else if (record.status === 2)
component = (<><span className="commonStatusModify"></span>待审核</>)
else if (record.status === 3)
component = (<><span className="commonStatusValid"></span>审核通过</>)
else if (record.status === 4)
component = (<><span className="commonStatusInvalid">审核不通过</span></>)
else if (record.status === 5)
component = (<span style={{ color: '#00B37A', padding: '2px 5px', background: 'rgba(235,247,242,1)', borderRadius: '4px' }}>已上架</span>)
else if (record.status === 6)
component = (<span style={{ padding: '2px 5px', background: 'rgba(244,245,247,1)', borderRadius: '4px' }}>已下架</span>)
return component
}
},
filters: [
{
text: '待提交审核',
value: 1,
},
{
text: '待审核',
value: 2,
},
{
text: '审核通过',
value: 3,
},
{
text: '审核不通过',
value: 4,
},
{
text: '已上架',
value: 5,
},
{
text: '已下架',
value: 6,
}
],
onFilter: (value, record) => record.status === value,
},
{
title: '操作',
dataIndex: 'option',
width: 128,
render: (text:any, record:any) => {
render: (text: any, record: any) => {
return (
<>
{/* {record.status==='0'?<Button type='link'>提交审核</Button>:''}
{(record.status==='2'||record.status==='5')?<Button type='link' onClick={()=>clickUp(1)}>上架</Button>:''}
{record.status==='4'?<Button type='link' onClick={()=>clickUp(0)}>下架</Button>:''}
<Button type='link'>复制</Button>
{record.status==='3'?<Button type='link'>修改</Button>:''}
<Button type='link'>删除</Button> */}
<Button type='link' onClick={()=>handleModify(record)}>修改价格</Button>
<Button type='link' className="padLeft0" onClick={() => handleModify(record)}>修改价格</Button>
</>
)
}
}
];
const search: IFormFilter[] = [
{
type: 'Input',
value: 'keywords',
col: 4,
placeHolder: '商品ID'
},
{
type: 'Input',
value: 'name',
col: 4,
placeHolder: '商品名称'
},
{
type: 'Input',
value: 'brand',
col: 4,
placeHolder: '商品品牌'
},
{
type: 'Input',
value: 'type',
col: 4,
placeHolder: '商品品类'
},
{
type: 'RangePicker', //...此处应为数值范围搜索控件
value: 'price',
col: 4,
placeHolder: '商品价格'
},
]
const searchBarActions: IButtonFilter[] = [
{
text: '查询',
handler: () => {
console.log('查询')
}
},
]
const fetchData = (params: any) => {
console.log(params, filterParams)
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.getProductCommodityGetCommodityDetailList({ ...filterParams, ...params }).then(res => {
const { data } = res
resolve(data)
})
})
}
const handleSee = (record:any) => {
const handleSee = (record: any) => {
console.log('see')
// history.push(`/commodity/products/viewProducts?id=${record.id}`)
history.push(`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`)
}
const handleModify = (record: object) => {
console.log('点击修改价格', record)
setModifyModal(true)
}
const handleReset = () => {
let restObj = { name: '', code: '', Max: 0, Min: 0, priceType: null, brandId: 0, customerCategoryId: 0, status: null }
setFilterParams(restObj)
setBrandValue(undefined)
setClassValue(undefined)
//@ts-ignore
ref.current.reload(restObj)
}
const handleBrandSearch = (value: any) => { // end value
console.log(value, 'handleBrandSearch')
if (value) {
PublicApi.getProductSelectGetSelectBrand({ name: value }).then(res => {
if (res.code === 1000)
setBrandData(res.data)
})
} else {
setBrandData([])
}
}
const handleBrandChange = (value: any) => {
setBrandValue(value)
console.log(value, 'handleBrandChange')
let obj = { ...filterParams, brandId: value }
setFilterParams(obj)
}
const handleClassSearch = (value: any) => {
console.log(value, 'handleClassSearch')
if (value) {
PublicApi.getProductSelectGetSelectCustomerCategory({ name: value }).then(res => {
if (res.code === 1000)
setClassData(res.data)
})
} else {
setClassData([])
}
}
const handleClassChange = (value: any) => {
setClassValue(value)
let obj = { ...filterParams, customerCategoryId: value }
setFilterParams(obj)
console.log(value, 'handleClassChange')
}
const handleSearch = (val: string) => {
console.log(val)
let obj = { ...filterParams, name: val }
setFilterParams(obj)
//@ts-ignore
ref.current.reload(obj)
}
const handleOk = () => {
setForm.validateFields().then(v=>{
setModifyModal(false)
......@@ -273,12 +274,120 @@ const FastModifyPrice: React.FC<{}> = () => {
<PageHeaderWrapper>
<Card>
<StandardTable
tableProps={{ rowKey: 'code'}}
columns={columns}
currentRef={ref}
fetchTableData={(params:any) => fetchData(params)}
formFilters={search}
buttonFilters={searchBarActions}
tableProps={{ rowKey: 'id' }}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<Row>
<Col span={24}>
<Row gutter={[16, 16]} justify="space-between" style={{ marginBottom: 0 }}>
<Col span={12}></Col>
<Col span={12} style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Col span={8}>
<Input.Search
name="name"
placeholder="商品名称"
value={filterParams.name}
onChange={(e) => setFilterParams({ ...filterParams, name: e.target.value })}
onSearch={(val) => handleSearch(val)}
/>
</Col>
<Col>
<Button onClick={() => setIsHighSearch(isHighSearch = !isHighSearch)}>高级筛选{isHighSearch ? <CaretUpOutlined /> : <CaretDownOutlined />}</Button>
</Col>
<Col>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
</Col>
</Row>
</Col>
{
isHighSearch ?
<Col span={24}>
<Row gutter={[16, 8]} justify="end">
<Col span={24} style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Col span={4}>
<Select allowClear value={filterParams.priceType} onChange={(v) => setFilterParams({ ...filterParams, priceType: +v })} style={{ width: '100%' }} placeholder="商品定价">
<Option value={1}>现货价格</Option>
<Option value={2}>价格需要询价</Option>
<Option value={3}>积分兑换商品</Option>
</Select>
</Col>
<Col span={4}>
<Select
showSearch
placeholder="商品品牌"
value={brandValue}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
notFoundContent={null}
style={{ width: '100%' }}
>
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Col>
<Col span={4}>
<Select
showSearch
placeholder="商品品类"
value={classValue}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={handleClassSearch}
onChange={handleClassChange}
notFoundContent={null}
style={{ width: '100%' }}
>
{classData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Col>
<Col span={4}>
<Input.Group compact>
<Input
type="number"
style={{ width: '40%', textAlign: 'center' }}
min={0}
placeholder="最低价格"
onChange={(e) => setFilterParams({ ...filterParams, Min: +e.target.value })}
/>
<Input
style={{
width: '20%',
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
textAlign: 'center'
}}
placeholder="~"
disabled
/>
<Input
type="number"
style={{
width: '40%',
textAlign: 'center',
borderLeft: 0,
}}
min={0}
placeholder="最高价格"
onChange={(e) => setFilterParams({ ...filterParams, Max: +e.target.value })}
/>
</Input.Group>
</Col>
</Col>
</Row>
</Col>
:
''
}
</Row>
}
/>
</Card>
<Modal
......@@ -307,25 +416,25 @@ const FastModifyPrice: React.FC<{}> = () => {
>
<Form.List name="ladderRange" key={Math.random()}>
{(fields, { add, remove }) => {
if(!fields.length){
if (!fields.length) {
add()
}
return (
<div>
{fields.map(field => (
<Row key={field.key} gutter={[0,10]}>
<Col span={20} style={{display:'flex'}}>
<Row key={field.key} gutter={[0, 10]}>
<Col span={20} style={{ display: 'flex' }}>
<Item
{...field}
name={[field.name, 'numberRange']}
fieldKey={[field.fieldKey, 'numberRange']}
key={'_'+field.fieldKey}
key={'_' + field.fieldKey}
noStyle
>
{/* <Input style={{ width: '50%' }} placeholder="请输入数量区间" /> */}
<Input.Group compact>
<Form.Item name={[field.name, 'numberRange', 'numberMin']} noStyle>
<Input style={{ width: 100,textAlign: 'center' }} placeholder="最小数量" />
<Input style={{ width: 100, textAlign: 'center' }} placeholder="最小数量" />
</Form.Item>
{/* <Input style={{ width: 100,textAlign: 'center' }} placeholder="最小数量" /> */}
<Input
......@@ -362,15 +471,15 @@ const FastModifyPrice: React.FC<{}> = () => {
{...field}
name={[field.name, 'numberPrice']}
fieldKey={[field.fieldKey, 'numberPrice']}
key={'__'+field.fieldKey}
key={'__' + field.fieldKey}
noStyle
>
<Input style={{ width:'50%',marginLeft:24 }} placeholder="请输入单价" />
<Input style={{ width: '50%', marginLeft: 24 }} placeholder="请输入单价" />
</Item>
</Col>
<Col span={4}>
<Button size="small" onClick={()=>add()} style={{marginLeft: 20, marginRight: 8}} icon={<PlusOutlined />} />
{ field.key > 0 && (<Button size="small" onClick={()=>remove(field.name)} icon={<MinusOutlined />} />) }
<Button size="small" onClick={() => add()} style={{ marginLeft: 20, marginRight: 8 }} icon={<PlusOutlined />} />
{field.key > 0 && (<Button size="small" onClick={() => remove(field.name)} icon={<MinusOutlined />} />)}
</Col>
</Row>
))}
......@@ -383,8 +492,8 @@ const FastModifyPrice: React.FC<{}> = () => {
name="uniquePrice"
rules={[{ required: true, message: '请输入单价!' }]}
>
<Input placeholder="请输入单价" />
</Form.Item>
<Input placeholder="请输入单价" />
</Form.Item>
}
</Form>
</Modal>
......
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