Commit 3b0b96f8 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
parents 2955d910 4bfa735f
@import './mixins/layout.less';
#root {
// 去除input type为number时的箭头
.ant-input-number-handler-wrap {
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.ant-page-header {
padding: 8px 24px;
}
.common_checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox .ant-checkbox-indeterminate {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
background-color: transparent;
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover,
&:active,
&:focus {
border-color: var(--mall_main_color);
}
&::after {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
// 去除数字输入框的箭头
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
......
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.getProductSelectGetSelectPlatformBrand({ 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.getProductSelectGetSelectCategory({ 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
......@@ -2,44 +2,23 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Button, Card, Select, Row, Col, Input, InputNumber } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
CaretUpOutlined,
CaretDownOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import moment from 'moment'
import { PublicApi } from '@/services/api'
import EyePreview from '@/components/EyePreview'
import { productWillSchema } from '../schema'
import NiceForm from '@/components/NiceForm'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import { createFormActions, FormEffectHooks } from '@formily/antd'
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from '../effect'
const { Option } = Select;
interface paramItem {
name: string;
code: string;
memberName: string;
min: any;
max: any;
brandId: number;
customerCategoryId: number;
}
const formActions = createFormActions();
const Products: React.FC<{}> = () => {
const ref = useRef<any>({})
let [isHighSearch, setIsHighSearch] = useState(false)
const [filterParams, setFilterParams] = useState<paramItem>({
name: '',
code: '',
memberName: '',
min: null,
max: null,
brandId: 0,
customerCategoryId: 0,
})
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [classData, setClassData] = useState<any>([])
const [classValue, setClassValue] = useState(undefined)
const columns: ColumnType<any>[] = [
{
......@@ -155,65 +134,14 @@ const Products: React.FC<{}> = () => {
];
const fetchData = (params: any) => {
// console.log(params, filterParams)
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.getProductCommodityGetPlatformCommodityList({ ...filterParams, ...params, status: 2 }).then(res => {
PublicApi.getProductCommodityGetPlatformCommodityList(params).then(res => {
const { data } = res
resolve(data)
})
})
}
const clickSubmitCheck = (record:any) => {
const { id } = record;
if(id)
PublicApi.postProductCommodityApplyCheckCommodity({id: id})
//@ts-ignore
ref.current.reload(restObj)
}
const handleReset = () => {
let restObj: any = { name: '', code: '', max: null, min: null, memberName: '', brandId: 0, customerCategoryId: 0 }
setFilterParams(restObj)
setBrandValue(undefined)
setClassValue(undefined)
//@ts-ignore
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 obj = val ? {...filterParams, name: val} : { ...filterParams }
setFilterParams(obj)
ref.current.reload(obj)
}
return (
<PageHeaderWrapper>
<Card>
......@@ -223,121 +151,25 @@ const Products: 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} style={{display:'flex', justifyContent: 'flex-start'}}>
<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-start'}}>
<Col span={4}>
<Input
name="memberName"
value={filterParams.memberName}
onChange={(e)=>setFilterParams({...filterParams, memberName: 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.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,
<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')
})
}}
min={0}
placeholder="最高价格"
onChange={(e)=>setFilterParams({...filterParams, max: e})}
schema={productWillSchema}
/>
</Input.Group>
</Col>
<Col>
<Button type="primary" onClick={()=>handleSearch()}>查询</Button>
</Col>
</Col>
</Row>
</Col>
:
''
}
</Row>
}
/>
</Card>
......
......@@ -2,58 +2,22 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react'
// import { history } from 'umi'
import { Button, Card, Select, Row, Col, Input, InputNumber } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
CaretUpOutlined,
CaretDownOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import moment from 'moment'
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 { FORM_FILTER_PATH } from '@/formSchema/const'
import { productSchema } from '../schema'
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from '../effect'
const { Option } = Select;
// 定义选择的行数据的类型
interface Item {
key: string;
productName: string;
type: string;
brand: string;
unit: string;
price: string;
time: string;
status: string;
}
interface paramItem {
name: string;
code: string;
memberName: string;
min: any;
max: any;
brandId: number;
customerCategoryId: number;
status: any;
}
const formActions = createFormActions();
const Products: React.FC<{}> = () => {
const ref = useRef<any>({})
let [isHighSearch, setIsHighSearch] = useState(false)
const [filterParams, setFilterParams] = useState<paramItem>({
name: '',
code: '',
memberName: '',
min: null,
max: null,
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>[] = [
{
......@@ -158,64 +122,14 @@ const Products: React.FC<{}> = () => {
];
const fetchData = (params: any) => {
// console.log(params, filterParams)
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.getProductCommodityGetPlatformCommodityList({ ...filterParams, ...params}).then(res => {
PublicApi.getProductCommodityGetPlatformCommodityList(params).then(res => {
const { data } = res
resolve(data)
})
})
}
const clickSubmitCheck = (record:any) => {
const { id } = record;
if(id)
PublicApi.postProductCommodityApplyCheckCommodity({id: id})
//@ts-ignore
ref.current.reload(restObj)
}
const handleReset = () => {
let restObj: any = { name: '', code: '', max: null, min: null, memberName: '', brandId: 0, customerCategoryId: 0, status: 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 obj = val ? {...filterParams, name: val} : { ...filterParams }
setFilterParams(obj)
ref.current.reload(obj)
}
return (
<PageHeaderWrapper>
<Card>
......@@ -225,132 +139,25 @@ const Products: 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} style={{display:'flex', justifyContent: 'flex-start'}}>
<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-start'}}>
<Col span={4}>
<Input
name="memberName"
value={filterParams.memberName}
onChange={(e)=>setFilterParams({...filterParams, memberName: 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}>
<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
type="number"
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,
<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')
})
}}
min={0}
placeholder="最高价格"
onChange={(e)=>setFilterParams({...filterParams, max: e})}
schema={productSchema}
/>
</Input.Group>
</Col>
<Col>
<Button type="primary" onClick={()=>handleSearch()}>查询</Button>
</Col>
</Col>
</Row>
</Col>
:
''
}
</Row>
}
/>
</Card>
......
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: {
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: {
memberName: {
type: 'string',
'x-component-props': {
placeholder: '商家名称',
},
},
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: []
},
},
status: {
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 productWillSchema: 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: {
memberName: {
type: 'string',
'x-component-props': {
placeholder: '商家名称',
},
},
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
......@@ -85,6 +85,12 @@ export const baseOrderListColumns: any[] = [
key: 'orderThe',
},
{
title: '采购会员',
align: 'center',
dataIndex: 'memberName',
key: 'memberName',
},
{
title: '供应会员',
align: 'center',
dataIndex: 'supplyMembersName',
......
......@@ -85,7 +85,7 @@ const modalPriceActions = createFormActions()
// 总计金额联动框
export const MoneyTotalBox = ({ dataSource, isEditData }) => {
const { orderProductRequests = [], receiverAddressId } = dataSource || {}
const sum = orderProductRequests.reduce((prev, next) => prev + parseInt((next.price || 0)), 0)
const sum = orderProductRequests.reduce((prev, next) => prev + Number((next.price || 0)), 0)
const modelRef = useRef<any>({})
const [freePrice, setFreePrice] = useState<number>(0)
const handleSetting = () => {
......
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