Skip to content

J
jinfa-platform
Commit ed7867bb authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix：商品货品区块更改为NiceForm筛选

parent 6331efc7
Hide whitespace changes
Inline Side-by-side
Showing with 492 additions and 672 deletions
src/pages/commodity/goods/effect/index.tsx 0 → 100644
View file @ ed7867bb
import React, { useEffect } from 'react'
import { ISchemaFormActions, FormEffectHooks, IFormActions } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
const { onFieldValueChange$ } = FormEffectHooks
// 高级筛选schema中用于输入搜索品牌的Effect
export const searchBrandOptionEffect = (context: any, fieldName: string) => {
context.getFieldState(fieldName, state => {
// console.log(state.props['x-component-props'].searchValue, 'pagesearchvalue') // 此处可以实时获取到输入并暂存在schema props的值
PublicApi.getProductSelectGetSelectBrand({ name: state.props['x-component-props'].searchValue }).then(res => {
context.setFieldState(fieldName, state => {
state.props['x-component-props'].dataoption = res.data
})
})
})
}
// 高级筛选schema中用于输入搜索商品品类的Effect
export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => {
context.getFieldState(fieldName, state => {
PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
context.setFieldState(fieldName, state => {
state.props['x-component-props'].dataoption = res.data
})
})
})
}
\ No newline at end of file
src/pages/commodity/goods/index.tsx
View file @ ed7867bb
......@@ -8,8 +8,6 @@ import {
EyeOutlined,
DownOutlined,
DeleteOutlined,
CaretUpOutlined,
CaretDownOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons'
import { StandardTable } from 'god'
......@@ -20,10 +18,11 @@ import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
import NiceForm from '@/components/NiceForm'
import { createFormActions, FormEffectHooks } from '@formily/antd'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect'
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
// import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect'
// import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
import { goodsSchema } from './schema'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
const { Option } = Select;
const { confirm } = Modal
......@@ -41,14 +40,6 @@ interface Item {
let timeChange: any;
interface paramItem {
name: string;
code: string;
brandId: number;
customerCategoryId: number;
batch: string;
}
const formActions = createFormActions();
const Goods: React.FC<{}> = () => {
......@@ -59,12 +50,6 @@ const Goods: React.FC<{}> = () => {
const [deleteBatchModal, setDeleteBatchModal] = useState(false)
const [modalTitle, setModalTitle] = useState('导入')
const [modalStep, setModalStep] = useState(0)
let [isHighSearch, setIsHighSearch] = useState(false)
const [filterParams, setFilterParams] = useState<paramItem>({ name: '', code: '', brandId: 0, customerCategoryId: 0, batch: '' })
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [classData, setClassData] = useState<any>([])
const [classValue, setClassValue] = useState(undefined)
const [batchDeleteKeys, setBatchDeleteKeys] = useState<any>([])
const [goodsRowSelection, goodsRowCtl] = useRowSelectionTable()
......@@ -327,53 +312,6 @@ const Goods: React.FC<{}> = () => {
console.log('取消删除')
}
const handleSearch = (val?: string) => {
console.log(val)
let obj = val ? { ...filterParams, name: val } : { ...filterParams }
setFilterParams(obj)
ref.current.reload(obj)
}
const handleReset = () => {
let restObj = { name: '', code: '', brandId: 0, customerCategoryId: 0, batch: '' }
setFilterParams(restObj)
setBrandValue(undefined)
setClassValue(undefined)
ref.current.reload(restObj)
}
const nameChange = (e: any) => {
console.log(e.target.value)
let obj = { ...filterParams, name: e.target.value }
setFilterParams(obj)
}
const handleBrandSearch = (value?: any) => { // end value
PublicApi.getProductSelectGetSelectBrand({ name: value }).then(res => {
if (res.code === 1000)
setBrandData(res.data)
})
}
const handleBrandChange = (value: any) => {
setBrandValue(value)
let obj = { ...filterParams, brandId: value }
setFilterParams(obj)
}
const handleClassSearch = (value?: any) => {
PublicApi.getProductSelectGetSelectCustomerCategory({ name: value }).then(res => {
if (res.code === 1000)
setClassData(res.data)
})
}
const handleClassChange = (value: any) => {
setClassValue(value)
let obj = { ...filterParams, customerCategoryId: value }
setFilterParams(obj)
}
const controllerBtns = (
<Space>
<Button
......@@ -402,129 +340,32 @@ const Goods: React.FC<{}> = () => {
fetchTableData={(params: any) => fetchData(params)}
controlRender={
// <NiceForm
// actions={formActions}
// onSubmit={values => ref.current.reload(values)}
// expressionScope={{
// controllerBtns,
// }}
// effects={($, actions) => {
// useStateFilterSearchLinkageEffect(
// $,
// actions,
// 'name',
// FORM_FILTER_PATH,
// );
// // useAsyncInitSelect(
// // ['memberType', 'roleId', 'level', 'source'],
// // fetchSearchItems,
// // );
// }}
// schema={goodsSchema}
// />
<Row>
<Col span={24}>
<Row gutter={[16,16]} justify="space-between" style={{marginBottom:0}}>
<Col span={12}>
<Button
type='primary'
onClick={()=>history.push('/memberCenter/commodityAbility/commodity/goods/add')}
>
<PlusOutlined />新建
</Button>
<Button style={{margin:'0 16px'}} onClick={()=>setImportModal(true)}>导入数据</Button>
<Dropdown overlay={menuMore} trigger={['click']}>
<Button>
更多 <DownOutlined />
</Button>
</Dropdown>
</Col>
<Col span={12} style={{display:'flex', justifyContent: 'flex-end'}}>
<Col span={8}>
<Input.Search
autoComplete="off"
name="name"
placeholder="货品名称"
value={filterParams.name}
onChange={(e)=>nameChange(e)} 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}>
<Input
name="code"
value={filterParams.code}
onChange={(e)=>setFilterParams({...filterParams, code: e.target.value})} placeholder="货号"
autoComplete="off"
/>
</Col>
<Col span={4}>
<Select
showSearch={true}
showArrow={true}
placeholder="品牌"
value={brandValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
onFocus={()=>handleBrandSearch(null)}
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={true}
showArrow={true}
placeholder="品类"
value={classValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleClassSearch}
onChange={handleClassChange}
onFocus={()=>handleClassSearch(null)}
notFoundContent={null}
style={{width:'100%'}}
>
{classData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Col>
<Col span={4}>
<Input
name="batch"
value={filterParams.batch}
onChange={(e)=>setFilterParams({...filterParams, batch: e.target.value})}
placeholder="导入批次"
autoComplete="off"
/>
</Col>
<Col>
<Button type="primary" onClick={()=>handleSearch()}>查询</Button>
</Col>
</Col>
</Row>
</Col>
:
''
}
</Row>
<NiceForm
actions={formActions}
onSubmit={values => ref.current.reload(values)}
expressionScope={{
controllerBtns,
}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
// useAsyncInitSelect(
// ['memberType', 'roleId', 'level', 'source'],
// fetchSearchItems,
// );
FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(actions, 'brandId')
})
FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(actions, 'customerCategoryId')
})
}}
schema={goodsSchema}
/>
}
/>
</Card>
......
src/pages/commodity/goods/schema/index.tsx
View file @ ed7867bb
......@@ -53,15 +53,30 @@ export const goodsSchema: ISchema = {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '品牌',
placeholder: '商品品牌',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px' },
searchValue: null,
dataoption: [],
},
},
customerCategoryId: {
type: 'string',
enum: [],
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '品类',
style: { width: '100%' }
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px' },
searchValue: null,
dataoption: []
},
},
batch: {
......
src/pages/commodity/products/addProducts.tsx
View file @ ed7867bb
......@@ -179,6 +179,7 @@ const AddProducts: React.FC<{}> = (props) => {
commodityAttributeList: productSelectAttribute,
commodityRemark: _productDescription,
isAllAttributePic: isAllAttributePic,
isUpdateAttribute: true,
}
// 处理地址
let _commodityAreaList: any = []
......
src/pages/commodity/products/addProductsItem/priceAttributeForm.tsx
View file @ ed7867bb
......@@ -349,8 +349,8 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
let _tempObj: any = { 索引: 0 ,商品名称: productName }
_tempObj['对应货品'] = selectedGoods.length > 0 ? selectedGoods[0].id : 0 // 编辑情况下 对应货品id和单价 特殊处理
// 携带unitPriceAndPicList的id字段
if(!productInfoByEdit.isUpdateAttribute){
_tempObj['规格ID'] = productInfoByEdit.unitPriceAndPicList[0]?.id
if(!productInfoByEdit?.isUpdateAttribute){
_tempObj['规格ID'] = productInfoByEdit?.unitPriceAndPicList[0]?.id
}
if(updateFlag.current){
_tempObj['单价'] = productInfoByEdit?.unitPriceAndPicList[0]?.unitPrice || {}
......
src/pages/commodity/products/fastModifyPrice.tsx
View file @ ed7867bb
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Input, Menu, InputNumber } from 'antd'
import { Button, Form, Card, Modal, Checkbox, Row, Col, Input, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
MinusOutlined,
CaretUpOutlined,
CaretDownOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import moment from 'moment'
import styles from "./index.less"
import { PublicApi } from '@/services/api'
import EyePreview from '@/components/EyePreview'
import NiceForm from '@/components/NiceForm'
import { createFormActions, FormEffectHooks } from '@formily/antd'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { searchCustomerCategoryOptionEffect, searchBrandOptionEffect } from './effect'
import { fastSchema } from './schema/productSchema'
import { FORM_FILTER_PATH } from '@/formSchema/const'
const { Option } = Select;
const { Item }:any = Form
// 定义选择的行数据的类型
interface Item {
key: string;
productName: string;
type: string;
brand: string;
unit: string;
price: string;
time: string;
status: string;
}
const formActions = createFormActions();
const FastModifyPrice: React.FC<{}> = () => {
const ref = useRef<any>({})
......@@ -37,18 +26,11 @@ const FastModifyPrice: React.FC<{}> = () => {
const [ladderPrice, setLadderPrice] = useState(false)
const [currentRow, setCurrentRow] = useState<any>()
let [isHighSearch, setIsHighSearch] = useState(false)
const layout = {
labelCol: { span: 24 },
wrapperCol: { span: 24 },
}
const [filterParams, setFilterParams] = useState<any>({})
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [classData, setClassData] = useState<any>([])
const [classValue, setClassValue] = useState(undefined)
const [priceType, setPriceType] = useState<number>(null)
const columns: ColumnType<any>[] = [
......@@ -187,7 +169,7 @@ const FastModifyPrice: React.FC<{}> = () => {
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
PublicApi.getProductCommodityGetCommodityDetailList({ ...filterParams, ...params, environment: 1 }).then(res => {
PublicApi.getProductCommodityGetCommodityDetailList({ ...params, environment: 1 }).then(res => {
const { data } = res
resolve(data)
})
......@@ -222,48 +204,6 @@ const FastModifyPrice: React.FC<{}> = () => {
})
}
const handleReset = () => {
setFilterParams({})
setBrandValue(undefined)
setClassValue(undefined)
setTimeout(() => {
ref.current.reload()
}, 500)
}
const handleBrandSearch = (value?: any) => { // end value
PublicApi.getProductSelectGetSelectBrand({ name: value }).then(res => {
if (res.code === 1000)
setBrandData(res.data)
})
}
const handleBrandChange = (value: any) => {
setBrandValue(value)
let obj = { ...filterParams, brandId: value }
setFilterParams(obj)
}
const handleClassSearch = (value?: any) => {
PublicApi.getProductSelectGetSelectCustomerCategory({ name: value }).then(res => {
if (res.code === 1000)
setClassData(res.data)
})
}
const handleClassChange = (value: any) => {
setClassValue(value)
let obj = { ...filterParams, customerCategoryId: value }
setFilterParams(obj)
}
const handleSearch = (val: string) => {
let obj = { ...filterParams, name: val }
setFilterParams(obj)
ref.current.reload(obj)
}
const handleOk = () => {
setForm.validateFields().then(v=>{
const { ladderPrice, ladderRange } = v
......@@ -295,15 +235,6 @@ const FastModifyPrice: React.FC<{}> = () => {
}
}
const handleHightSearch = (val?: string) => {
let _params: any = { ...filterParams }
if(_params.priceType)
_params.priceTypeList = [_params.priceType]
let obj = val ? {..._params, name: val} : { ..._params }
setFilterParams(obj)
ref.current.reload(obj)
}
// 校验阶梯范围
const validatorNumberRange = (rule, value, callback) => {
try {
......@@ -336,121 +267,25 @@ const FastModifyPrice: React.FC<{}> = () => {
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
autoComplete="off"
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 value={filterParams.priceType} onChange={(v) => setFilterParams({ ...filterParams, priceType: +v })} style={{ width: '100%' }} placeholder="商品定价">
<Option value={0}>所有</Option>
<Option value={1}>现货价格</Option>
{/* <Option value={2}>价格需要询价</Option> */}
<Option value={3}>积分兑换商品</Option>
</Select>
</Col>
<Col span={4}>
<Select
showSearch={true}
showArrow={true}
placeholder="商品品牌"
value={brandValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
onFocus={()=>handleBrandSearch(null)}
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={true}
showArrow={true}
placeholder="商品品类"
value={classValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleClassSearch}
onChange={handleClassChange}
onFocus={()=>handleClassSearch(null)}
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>
<InputNumber
style={{ width: '40%', textAlign: 'center' }}
min={0}
value={filterParams.min}
placeholder="最低价格"
onChange={(e) => setFilterParams({ ...filterParams, min: e })}
/>
<Input
style={{
width: '20%',
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
textAlign: 'center'
}}
placeholder="~"
disabled
/>
<InputNumber
style={{
width: '40%',
textAlign: 'center',
borderLeft: 0,
}}
min={0}
value={filterParams.max}
placeholder="最高价格"
onChange={(e) => setFilterParams({ ...filterParams, max: e })}
/>
</Input.Group>
</Col>
<Col>
<Button type="primary" onClick={()=>handleHightSearch()}>查询</Button>
</Col>
</Col>
</Row>
</Col>
:
''
}
</Row>
<NiceForm
actions={formActions}
onSubmit={values =>ref.current.reload(values)}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
)
FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(actions, 'brandId')
})
FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(actions, 'customerCategoryId')
})
}}
schema={fastSchema}
/>
}
/>
</Card>
......
src/pages/commodity/products/index.tsx
View file @ ed7867bb
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Input, Menu, Popconfirm, message, InputNumber } from 'antd'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Input, Menu, Space, message, InputNumber } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
......@@ -9,8 +9,6 @@ import {
QuestionCircleOutlined,
DownOutlined,
DeleteOutlined,
CaretUpOutlined,
CaretDownOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
......@@ -19,10 +17,13 @@ import moment from 'moment'
import styles from "./index.less"
import { PublicApi } from '@/services/api'
import { GetProductCommodityGetShopResponse } from '@/services/ProductApi'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import TableOperation from '@/components/TableOperation'
import { store } from '@/store'
import { productSchema } from './schema/productSchema'
import NiceForm from '@/components/NiceForm'
import { createFormActions, FormEffectHooks } from '@formily/antd'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
const { Option } = Select;
const { confirm } = Modal;
......@@ -39,21 +40,10 @@ interface Item {
status: string;
}
interface paramItem {
name: string;
code: string;
priceType?: number;
priceTypeList: number[];
min: any;
max: any;
brandId: number;
customerCategoryId: number;
status?: number;
statusList: number[];
}
let timeChange: any;
const formActions = createFormActions();
const Products: React.FC<{}> = () => {
const ref = useRef<any>({})
const judgeShopRef = useRef<boolean>(true)
......@@ -70,32 +60,7 @@ const Products: React.FC<{}> = () => {
const [checkedValues, setCheckedValues] = useState<any>([])
const [currentOptionId, setCurrentOptionId] = useState()
const [isDisabledOKbtn, setIsDisabledOKbtn] = useState<boolean>(false)
const [pageTotal, setPageTotal] = useState<number>() // 表格当前总数
const { ProductStore } = store
const {
currentPageInStore,
setCurrentPageInStore
} = ProductStore
const [currentPage, setCurrentPage] = useState<number>(currentPageInStore.current||1) // 表格当前页
const [currentPageSize, setCurrentPageSize] = useState<number>(currentPageInStore.pageSize||10)
let [isHighSearch, setIsHighSearch] = useState(false)
const [filterParams, setFilterParams] = useState<paramItem>({
name: '',
code: '',
priceType: null,
priceTypeList: null,
min: null,
max: null,
brandId: 0,
customerCategoryId: 0,
status: null,
statusList: null,
})
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [classData, setClassData] = useState<any>([])
const [classValue, setClassValue] = useState(undefined)
const [shopId, setShopId] = useState<any>()
const columns: ColumnType<any>[] = [
......@@ -270,14 +235,9 @@ const Products: React.FC<{}> = () => {
}
const fetchData = (params: any) => {
if(currentPageInStore.current){
params.current = currentPageInStore.current
params.pageSize = currentPageInStore.pageSize
}
return new Promise((resolve, reject) => {
PublicApi.getProductCommodityGetCommodityList({ ...filterParams, ...params}).then(res => {
PublicApi.getProductCommodityGetCommodityList(params).then(res => {
const { data } = res
setPageTotal(data.totalCount)
resolve(data)
})
})
......@@ -291,24 +251,6 @@ const Products: React.FC<{}> = () => {
history.push(`/memberCenter/commodityAbility/commodity/products/edit?id=${id}`)
}
// const confirm = () => {
// console.log('confirm')
// }
// const cancel = () => {
// console.log('cancel')
// }
const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据
console.log('执行状态修改', record)
}
const handleOk = () => {
console.log('ok')
setImportModal(false)
}
const handleCancel = () => {
console.log('cancel')
setImportModal(false)
......@@ -390,11 +332,6 @@ const Products: React.FC<{}> = () => {
const [time, setTime] = useState(0); // timer
useEffect(() => {
clearInterval(timeChange)
// 监听路由 清空页码数据
history.listen((location, action) => {
if(location.pathname.indexOf('/commodity/products') === -1)
setCurrentPageInStore({current: null, pageSize: null})
})
}, [])
useEffect(() => {
console.log(modalStep)
......@@ -598,63 +535,6 @@ const Products: React.FC<{}> = () => {
});
}
const handleReset = () => {
let restObj = { name: '', code: '', max: null, min: null, priceType: null, priceTypeList: null, brandId: 0, customerCategoryId: 0, status: null, statusList: null }
setFilterParams(restObj)
setBrandValue(undefined)
setClassValue(undefined)
ref.current.reload(restObj)
}
const handleBrandSearch = (value?:any) => { // end value
PublicApi.getProductSelectGetSelectBrand({name: value}).then(res=>{
if(res.code === 1000)
setBrandData(res.data)
})
}
const handleBrandChange = (value:any) => {
setBrandValue(value)
let obj = {...filterParams, brandId: value}
setFilterParams(obj)
}
const handleClassSearch = (value?:any) => {
PublicApi.getProductSelectGetSelectCustomerCategory({name: value}).then(res=>{
if(res.code === 1000)
setClassData(res.data)
})
}
const handleClassChange = (value:any) => {
setClassValue(value)
let obj = {...filterParams, customerCategoryId: value}
setFilterParams(obj)
}
const handleSearch = (val?: string) => {
let _params: any = { ...filterParams }
if(_params.priceType)
_params.priceTypeList = [_params.priceType]
if(_params.status)
_params.statusList = [_params.status]
let obj = val ? {..._params, name: val} : { ..._params }
setFilterParams(obj)
ref.current.reload(obj)
}
const onChangePage = (page, pageSize) => {
setCurrentPageInStore({ current: page, pageSize: pageSize })
setCurrentPage(page)
setCurrentPageSize(pageSize)
}
const onChangePageSize = (current, size) => {
setCurrentPageInStore({ current: 1, pageSize: size })
setCurrentPage(1)
setCurrentPageSize(size)
}
const menuMore = (
<Menu onClick={(e) => handleMenuClick(e)}>
<Menu.Item key="1" icon={<DeleteOutlined />}>
......@@ -666,6 +546,22 @@ const Products: React.FC<{}> = () => {
</Menu>
)
const controllerBtns = (
<Space>
<Button
type='primary'
onClick={()=>history.push('/memberCenter/commodityAbility/commodity/products/add')}
>
<PlusOutlined />新建
</Button>
<Button style={{margin:'0 16px'}} onClick={()=>setImportModal(true)}>导入数据</Button>
<Dropdown overlay={menuMore} trigger={['click']}>
<Button>
更多 <DownOutlined />
</Button>
</Dropdown>
</Space>
);
return (
<PageHeaderWrapper>
......@@ -676,161 +572,31 @@ const Products: React.FC<{}> = () => {
rowSelection={rowSelection}
tableProps={{
rowKey: 'id',
pagination: {
onChange: onChangePage,
current: currentPage,
total: pageTotal,
showTotal: total => `共 ${total} 条`,
size: 'small',
defaultPageSize: 10,
showSizeChanger: true,
pageSize: currentPageSize,
onShowSizeChange: onChangePageSize,
showQuickJumper: true
}
}}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<Row>
<Col span={24}>
<Row gutter={[16,16]} justify="space-between" style={{marginBottom:0}}>
<Col span={12}>
<Button
type='primary'
onClick={()=>history.push('/memberCenter/commodityAbility/commodity/products/add')}
>
<PlusOutlined />新建
</Button>
<Button style={{margin:'0 16px'}} onClick={()=>setImportModal(true)}>导入数据</Button>
<Dropdown overlay={menuMore} trigger={['click']}>
<Button>
更多 <DownOutlined />
</Button>
</Dropdown>
</Col>
<Col span={12} style={{display:'flex', justifyContent: 'flex-end'}}>
<Col span={8}>
<Input.Search
autoComplete="off"
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}>
<Input name="code" value={filterParams.code} onChange={(e)=>setFilterParams({...filterParams, code: e.target.value})} placeholder="商品编号"></Input>
</Col> */}
<Col span={4}>
<Select 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={true}
showArrow={true}
placeholder="商品品牌"
value={brandValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
onFocus={()=>handleBrandSearch(null)}
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={true}
showArrow={true}
placeholder="商品品类"
value={classValue}
defaultActiveFirstOption={false}
filterOption={false}
onSearch={handleClassSearch}
onChange={handleClassChange}
onFocus={()=>handleClassSearch(null)}
notFoundContent={null}
style={{width:'100%'}}
>
{classData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Col>
<Col span={4}>
<Select value={filterParams.status} onChange={(v)=>setFilterParams({...filterParams, status: +v})} style={{width:'100%'}} placeholder="商品状态">
<Option value={1}>待提交审核</Option>
<Option value={2}>待审核</Option>
<Option value={3}>审核不通过</Option>
<Option value={4}>审核通过</Option>
<Option value={5}>上架</Option>
<Option value={6}>下架</Option>
</Select>
</Col>
<Col span={4}>
<Input.Group compact>
<InputNumber
value={filterParams.min}
style={{ width: '40%', textAlign: 'center' }}
min={0}
placeholder="最低价格"
onChange={(e)=>setFilterParams({...filterParams, min: e})}
/>
<Input
style={{
width: '20%',
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
textAlign: 'center'
}}
placeholder="~"
disabled
/>
<InputNumber
value={filterParams.max}
style={{
width: '40%',
textAlign: 'center',
borderLeft: 0,
}}
min={0}
placeholder="最高价格"
onChange={(e)=>setFilterParams({...filterParams, max: e})}
/>
</Input.Group>
</Col>
<Col>
<Button type="primary" onClick={()=>handleSearch()}>查询</Button>
</Col>
</Col>
</Row>
</Col>
:
''
}
</Row>
<NiceForm
actions={formActions}
onSubmit={values =>ref.current.reload(values)}
expressionScope={{
controllerBtns,
}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
)
FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(actions, 'brandId')
})
FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(actions, 'customerCategoryId')
})
}}
schema={productSchema}
/>
}
/>
</Card>
......
src/pages/commodity/products/schema/channelSchema.tsx
View file @ ed7867bb
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
// 渠道商品列表高级搜索
export const channelSchema: ISchema = {
......
src/pages/commodity/products/schema/productSchema.tsx 0 → 100644
View file @ ed7867bb
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
// 商品列表高级搜索
export const productSchema: ISchema = {
type: 'object',
properties: {
mageLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
},
properties: {
ctl: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{controllerBtns}}',
},
},
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '商品名称',
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
},
properties: {
priceTypeList: {
type: 'string',
enum: [
{
label: '现货价格',
value: 1,
},
{
label: '价格需要询价',
value: 2,
},
{
label: '积分兑换商品',
value: 3,
}
],
'x-component-props': {
placeholder: '商品定价',
style: { width: '174px' },
},
},
brandId: {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品牌',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px' },
searchValue: null,
dataoption: [],
},
},
customerCategoryId: {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px' },
searchValue: null,
dataoption: []
},
},
statusList: {
type: 'string',
enum: [
{
label: '待提交审核',
value: 1,
},
{
label: '待审核',
value: 2,
},
{
label: '审核不通过',
value: 3,
},
{
label: '审核通过',
value: 4,
},
{
label: '上架',
value: 5,
},
{
label: '下架',
value: 6,
}
],
'x-component-props': {
placeholder: '商品状态',
style: { width: '174px' },
},
},
'NO_NAME_FIELD_$2': {
type: 'object',
'x-component': 'layout',
'x-component-props': {
style: { width: '174px', display: 'flex', justifyContent: 'flex-start' },
},
properties: {
min: {
type: 'string',
"x-component-props": {
placeholder: '最低价',
type: 'number',
min: 0,
style: { width: '70px', textAlign: 'center', borderRight: 0 }
}
},
"gap": {
type: 'string',
"x-component-props": {
style: {
width: '34px',
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
textAlign: 'center'
},
placeholder: "~",
disabled: true,
}
},
max: {
type: 'string',
"x-component-props": {
placeholder: '最高价',
type: 'number',
min: 0,
style: { width: '70px', textAlign: 'center', borderLeft: 0 }
}
},
}
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
},
},
};
// 快捷修改单价高级筛选
export const fastSchema: ISchema = {
type: 'object',
properties: {
mageLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
},
properties: {
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '商品名称',
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
},
properties: {
priceTypeList: {
type: 'string',
enum: [
{
label: '所有',
value: 0,
},
{
label: '现货价格',
value: 1,
},
{
label: '积分兑换商品',
value: 3,
}
],
'x-component-props': {
placeholder: '商品定价',
style: { width: '174px' },
},
},
brandId: {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品牌',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px' },
searchValue: null,
dataoption: [],
},
},
customerCategoryId: {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px' },
searchValue: null,
dataoption: []
},
},
'NO_NAME_FIELD_$2': {
type: 'object',
'x-component': 'layout',
'x-component-props': {
style: { width: '174px', display: 'flex', justifyContent: 'flex-start' },
},
properties: {
min: {
type: 'string',
"x-component-props": {
placeholder: '最低价',
type: 'number',
min: 0,
style: { width: '70px', textAlign: 'center', borderRight: 0 }
}
},
"gap": {
type: 'string',
"x-component-props": {
style: {
width: '34px',
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
textAlign: 'center'
},
placeholder: "~",
disabled: true,
}
},
max: {
type: 'string',
"x-component-props": {
placeholder: '最高价',
type: 'number',
min: 0,
style: { width: '70px', textAlign: 'center', borderLeft: 0 }
}
},
}
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
},
},
};
\ No newline at end of file
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