Commit 17fe950c authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

fix:商品列表操作按钮

parent 2517a999
......@@ -36,7 +36,7 @@
"@umijs/test": "^3.2.0",
"bizcharts": "^4.0.7",
"copy-to-clipboard": "^3.3.1",
"god": "0.1.20",
"god": "^0.1.20",
"lingxi-design-ui": "^1.0.6",
"lint-staged": "^10.0.7",
"mobx": "^5.15.4",
......
......@@ -20,7 +20,6 @@ const { Option } = Select
// }
const CustomInputSearch = props => {
console.log(props, 'props')
const { form } = props
const justifyAlign = props.props['x-component-props'].align || 'flex-end'
const option = props.props['x-component-props'].dataOption
......
......@@ -13,9 +13,17 @@ import { StandardTable } from 'god'
import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController';
import ReutrnEle from '@/components/ReturnEle';
import styles from './index.less'
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import NiceForm from '@/components/NiceForm';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect';
import { addChannelSchema } from './schema/channelSchema';
import { PublicApi } from '@/services/api';
import ModalTable from '@/components/ModalTable'
const {Item}:any = Form
// const { Option } = Select
// 定义选择的行数据的类型
interface Item {
......@@ -91,36 +99,24 @@ const dataSetMember = [
class: '铁皮会员',
},
]
// 模拟请求
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)
})
}
const productFormActions = createFormActions()
const AddDirectChannel:React.FC<{}> = (props) => {
const ref = useRef({})
const ref = useRef<any>({})
const [form] = Form.useForm()
const [setForm] = Form.useForm()
const [origin, setOrigin] = useState(0)
const [origin, setOrigin] = useState(1)
const [memberType, setMemberType] = useState(0)
const [visibleAddTabs, setVisibleAddTabs] = useState(false)
const [modifyModal, setModifyModal] = useState(false)
const [ladderPrice, setLadderPrice] = useState(false)
const [visibleChannelMember, setVisibleChannelMember] = useState(false)
const [selectRow, setSelectRow] = useState<Item[]>([]) // 模态框选择的行数据
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
const [visibleAddSpec, setVisibleAddSpec] = useState(false)
const [productRowSelection, productRowCtl] = useRowSelectionTable()
const columns: ColumnType<any>[] = [
{
......@@ -192,6 +188,21 @@ const AddDirectChannel:React.FC<{}> = (props) => {
value:'2'
}]
},
{
type: 'Select',
value: 'parent',
col: 6,
placeHolder: '上级渠道',
statusList: [{
type: 'Select',
label:'AAAAA',
value:'1'
},{
type: 'Select',
label: 'BBBBB',
value:'2'
}]
},
]
const searchBarActions: IButtonFilter[] = [
......@@ -301,13 +312,41 @@ const AddDirectChannel:React.FC<{}> = (props) => {
}
]
// 获取渠道商品
const fetchProductData = (params: any) => {
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.getProductChannelCommodityGetCommodityList(params).then(res => {
console.log(res, 'res')
const { data } = res
resolve(data)
})
})
}
const fetchData = (params:any) => {
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.getProductChannelCommodityGetCommodityList(params).then(res => {
console.log(res, 'res')
const { data } = res
resolve(data)
})
})
}
const callback = (key: any) => {
console.log(key)
}
const handleOriginChange = (v:any) => {
setOrigin(v.target.value)
console.log(v.target.value,'v')
productFormActions.setFieldState('parentMemberId', state => {
console.log(state, 'state')
state.visible = v.target.value?true:false
})
}
const handleMemberTypeChange = (v:any) => {
......@@ -433,20 +472,21 @@ const AddDirectChannel:React.FC<{}> = (props) => {
initialValue={origin}
>
<Radio.Group onChange={handleOriginChange}>
<Radio value={0}>上级渠道商品</Radio>
<Radio value={1}>渠道自有商品</Radio>
<Radio value={1}>上级渠道商品</Radio>
<Radio value={0}>渠道自有商品</Radio>
</Radio.Group>
</Form.Item>
</Form>
<Button onClick={handleAddButton} style={{width:'100%', marginTop: 24, backgroundColor: '#fafbfc'}}>
<PlusOutlined /> 新增{origin?'渠道自有商品':'上级渠道商品'}
<Button onClick={handleAddButton} style={{width:'100%', marginTop: 24, marginBottom: 24, backgroundColor: '#fafbfc'}}>
<PlusOutlined /> 新增{origin?'上级渠道商品':'渠道自有商品'}
</Button>
<Table dataSource={[]} columns={columnsSetPrice} rowSelection={{type: 'checkbox',...rowSelectionSetPrice}} />
</TabPane>
<TabPane tab="设置价格" key="2">
<Button onClick={handleAddSpecificationButton} style={{width:'100%', marginBottom: 24, backgroundColor: '#fafbfc'}}>
<PlusOutlined /> 选择商品规格
</Button>
<Table dataSource={dataSetPrice} columns={columnsSetPrice} rowSelection={{type: 'checkbox',...rowSelectionSetPrice,}} />
<Table dataSource={dataSetPrice} columns={columnsSetPrice} rowSelection={{type: 'checkbox',...rowSelectionSetPrice}} />
</TabPane>
<TabPane tab="适用会员" key="3">
<Form
......@@ -455,6 +495,12 @@ const AddDirectChannel:React.FC<{}> = (props) => {
name="add-direct-channel"
labelAlign="left"
>
<Form.Item>
<Radio.Group defaultValue="1" buttonStyle="solid" className={styles.customizeRadio}>
<Radio.Button value="1">渠道采购商</Radio.Button>
<Radio.Button value="2">渠道自有采购商</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item
name="memberType"
label="选择渠道会员"
......@@ -475,26 +521,88 @@ const AddDirectChannel:React.FC<{}> = (props) => {
<Button onClick={handleAddMemberBtn} style={{width:'100%', marginBottom: 24, backgroundColor: '#fafbfc'}}>
<PlusOutlined /> 选择指定会员
</Button>
<Table dataSource={dataSetMember} columns={columnsSetMember} rowSelection={{type: 'checkbox',...rowSelectionSetMember,}} />
<Table dataSource={dataSetMember} columns={columnsSetMember} rowSelection={{type: 'checkbox',...rowSelectionSetMember}} />
</> : ''
}
</TabPane>
</Tabs>
<Modal
title={origin?'选择渠道自有商品':'选择上级渠道商品'}
<ModalTable
modalTitle={origin?'选择上级渠道商品':'选择渠道自有商品'}
confirm={handleOkAddTabs}
cancel={handleCancelAddTabs}
visible={visibleAddTabs}
columns={columns}
rowSelection={productRowSelection}
fetchTableData={(params:any) => fetchProductData(params)}
tableProps={{
rowKey: 'id',
onRow: (record) => ({
onClick: () => {
productRowCtl.setSelectRow([record]);
productRowCtl.setSelectedRowKeys([record.id]);
},
})
}}
controlRender={
<NiceForm
actions={productFormActions}
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={addChannelSchema}
/>
}
/>
{/* <Modal
title={origin?'选择上级渠道商品':'选择渠道自有商品'}
visible={visibleAddTabs}
onOk={handleOkAddTabs}
onCancel={handleCancelAddTabs}
width={704}
>
<StandardTable
columns={columns}
rowSelection={rowSelection}
rowSelection={channelRowSelection}
currentRef={ref}
fetchTableData={(params:any) => fetchData(params)}
formFilters={search}
buttonFilters={searchBarActions}
fetchTableData={(params:any) => fetchProductData(params)}
tableProps={{ rowKey: "id" }}
controlRender={
<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={addChannelSchema}
/>
</Modal>
}
/>
</Modal> */}
<Modal
title="设置价格"
visible={modifyModal}
......
......@@ -185,7 +185,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
// _tempObj['单价'] = {}
if(productInfoByEdit?.id){
// 编辑的时候,先指定数据中的货品id,如果是重新组合的不存在id就使用选择的货品中的第一个,如果没有置为0;同理,不存在单价就置为{}
_tempObj['对应货品'] = productInfoByEdit.unitPriceAndPicList[i]?.goods?.id || selectedGoods[0].id || 0
_tempObj['对应货品'] = productInfoByEdit.unitPriceAndPicList[i]?.goods?.id || selectedGoods[0]?.id || 0
_tempObj['单价'] = productInfoByEdit.unitPriceAndPicList[i]?.unitPrice || {}
}else{
_tempObj['对应货品'] = selectedGoods.length > 0 ? selectedGoods[0].id : 0
......
......@@ -37,7 +37,7 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
const { id } = history.location.query
if(id){
let _goodsArr: any = productInfoByEdit?.unitPriceAndPicList.map(_ => _.goods)
let goodsArr: any = _goodsArr.toString() && _goodsArr.length>0 && Object.values(_goodsArr.reduce((item, next)=>{
let goodsArr: any = _goodsArr.indexOf(null)===-1 && _goodsArr.length>0 && Object.values(_goodsArr.reduce((item, next)=>{
item[next.id] = next;
return item
},{}))
......
......@@ -24,6 +24,7 @@ import { PublicApi } from '@/services/api'
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
import EyePreview from '@/components/EyePreview'
import moment from 'moment'
// 定义选择的行数据的类型
interface Item {
......@@ -48,18 +49,6 @@ const DirectChannel: React.FC<{}> = () => {
const [isUp, setIsUp] = useState(1) // 1上0下架状态
const [upDownModal, setUpDownModal] = useState(false)
// brand: {id: 33, name: "沙县",…}
// code: "P00002M"
// customerCategory: {id: 49, name: "男装"}
// id: 85
// name: "沙县沙滩裤"
// parentMemberId: null
// parentMemberName: null
// priceType: 1
// source: null
// status: 5
// unitName: "件"
const columns: ColumnType<any>[] = [
{
title: 'ID',
......@@ -106,17 +95,17 @@ const DirectChannel: React.FC<{}> = () => {
title: '商品来源',
dataIndex: 'source',
key: 'source',
render: (text, record) => text === 1 ? '上级渠道' : '渠道自有'
},
{
title: '操作时间',
dataIndex: 'batch',
align: 'center',
key: 'batch',
dataIndex: 'createTime',
key: 'createTime',
render: (text, record) => moment(text).format('YYYY-MM-DD HH:mm:ss')
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
key: 'status',
render: (text:any, record:any) => {
let component: ReactNode = null
......@@ -149,9 +138,8 @@ const DirectChannel: React.FC<{}> = () => {
const fetchData = (params: any) => {
console.log(params, 'params')
return new Promise((resolve, reject) => {
PublicApi.getProductChannelCommodityGetCommodityList(params).then(res => {
PublicApi.getProductChannelCommodityGetChannelCommodityList(params).then(res => {
const { data } = res
console.log(data,'data')
resolve(data)
})
})
......
......@@ -261,6 +261,7 @@ const FastModifyPrice: React.FC<{}> = () => {
_priceRange['0-0'] = v.uniquePrice
}
console.log(_priceRange)
// @ts-ignore
PublicApi.postProductCommodityUpdateCommodityPrice({ commodityId: currentRow.id, unitPriceAndPicId: currentRow.commodityId, unitPrice: _priceRange }).then(res => {
if(res.code === 100){
ref.current.reload()
......
......@@ -211,3 +211,18 @@
.site-input-right:focus {
border-right-width: 1px;
}
// 添加渠道
.customizeRadio{
:global {
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
background-color: #6B778C !important;
border-color: #6B778C !important;
background: #6B778C !important;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
background-color: #6B778C !important;
}
}
}
\ No newline at end of file
......@@ -10,7 +10,8 @@ import {
DownOutlined,
DeleteOutlined,
CaretUpOutlined,
CaretDownOutlined
CaretDownOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
......@@ -20,6 +21,7 @@ import { PublicApi } from '@/services/api'
import { GetProductCommodityGetShopResponse } from '@/services'
const { Option } = Select;
const { confirm } = Modal;
// 定义选择的行数据的类型
interface Item {
......@@ -203,45 +205,70 @@ const Products: React.FC<{}> = () => {
title: '操作',
dataIndex: 'option',
align: 'center',
render: (text: any, record: any) => {
render: (text: any, record: any) => renderOptionButton(record)
// {
// return (
// <>
// <Popconfirm
// title="确定要执行这个操作?"
// onConfirm={() => handleBatchDelete([record.id])}
// onCancel={cancel}
// okText="是"
// cancelText="否"
// >
// <Button type='link'>删除</Button>
// </Popconfirm>
// <Dropdown overlay={
// <Menu>
// <Menu.Item>
// {record.status === 1 ? <Button type='link' onClick={()=>clickSubmitCheck(record)}>提交审核</Button> : ''}
// </Menu.Item>
// {(record.status === 4 || record.status === 6) ? <Menu.Item><Button type='link' onClick={() => clickUp(1, record.id)}>上架</Button></Menu.Item> : ''}
// {record.status === 5 ? <Menu.Item><Button type='link' onClick={() => clickUp(0, record.id)}>下架</Button></Menu.Item> : ''}
// {record.status === 3 || record.status === 1 ? <Menu.Item><Button type='link' onClick={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
// <Menu.Item>
// <Button type='link' onClick={()=>clickCopy(record)}>复制</Button>
// </Menu.Item>
// </Menu>
// }>
// <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
// 更多 <CaretDownOutlined />
// </a>
// </Dropdown>
// </>
// )
// }
}
];
const renderOptionButton = (record: any) => {
return (
<>
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => handleBatchDelete([record.id])}
onCancel={cancel}
okText="是"
cancelText="否"
>
<Button type='link'>删除</Button>
</Popconfirm>
<Dropdown overlay={
<Button type='link' onClick={()=>clickCopy(record)}>复制</Button>
{
record.status === 5 ? <Button type='link' onClick={() => clickUp(0, record.id)}>下架</Button> :
(
record.status !== 2 && <Dropdown overlay={
<Menu>
<Menu.Item>
{record.status === 1 ? <Button type='link' onClick={()=>clickSubmitCheck(record)}>提交审核</Button> : ''}
</Menu.Item>
{record.status === 1 ? <Menu.Item><Button type='link' onClick={()=>clickSubmitCheck(record)}>提交审核</Button></Menu.Item> : ''}
{(record.status === 4 || record.status === 6) ? <Menu.Item><Button type='link' onClick={() => clickUp(1, record.id)}>上架</Button></Menu.Item> : ''}
{record.status === 5 ? <Menu.Item><Button type='link' onClick={() => clickUp(0, record.id)}>下架</Button></Menu.Item> : ''}
{record.status === 3 || record.status === 1 ? <Menu.Item><Button type='link' onClick={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
<Menu.Item>
<Button type='link' onClick={()=>clickCopy(record)}>复制</Button>
</Menu.Item>
{(record.status !== 5) ? <Menu.Item><Button type='link' onClick={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
{(record.status === 1 || record.status === 3) ? <Menu.Item><Button type='link' onClick={() => confirmDelete(record.id)}>删除</Button></Menu.Item> : ''}
</Menu>
}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
更多 <CaretDownOutlined />
</a>
</Dropdown>
</>
)
}
</>
)
}
];
const fetchData = (params: any) => {
console.log(params, filterParams)
return new Promise((resolve, reject) => {
//@ts-ignore
PublicApi.getProductCommodityGetCommodityList({ ...filterParams, ...params}).then(res => {
console.log(res, 'res')
const { data } = res
......@@ -259,13 +286,13 @@ const Products: React.FC<{}> = () => {
history.push(`/memberCenter/commodityAbility/commodity/products/addProducts?id=${id}`)
}
const confirm = () => {
console.log('confirm')
}
// const confirm = () => {
// console.log('confirm')
// }
const cancel = () => {
console.log('cancel')
}
// const cancel = () => {
// console.log('cancel')
// }
const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据
......@@ -497,6 +524,22 @@ const Products: React.FC<{}> = () => {
})
}
const confirmDelete = (paramId: any) => {
confirm({
title: '确定要执行删除操作?',
icon: <ExclamationCircleOutlined />,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk() {
handleBatchDelete([paramId])
},
onCancel() {
console.log('Cancel');
},
});
}
const handleReset = () => {
let restObj = { name: '', code: '', max: null, min: null, priceType: null, brandId: 0, customerCategoryId: 0, status: null }
setFilterParams(restObj)
......
......@@ -2,6 +2,7 @@ import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
// 渠道商品列表高级搜索
export const channelSchema: ISchema = {
type: 'object',
properties: {
......@@ -44,10 +45,10 @@ export const channelSchema: ISchema = {
},
},
properties: {
id: {
memberName: {
type: 'string',
'x-component-props': {
placeholder: '商品ID'
placeholder: '会员名称'
},
},
brandId: {
......@@ -90,6 +91,22 @@ export const channelSchema: ISchema = {
{
label: '待审核',
value: 2,
},
{
label: '审核不通过',
value: 3,
},
{
label: '审核通过',
value: 4,
},
{
label: '上架',
value: 5,
},
{
label: '下架',
value: 6,
}
],
'x-component-props': {
......@@ -97,12 +114,27 @@ export const channelSchema: ISchema = {
style: { width: '174px' },
},
},
// price: {
// type: 'string',
// 'x-component-props': {
// placeholder: '商品价格'
// },
// },
priceType: {
type: 'string',
enum: [
{
label: '现货价格',
value: 1,
},
{
label: '价格需要询价',
value: 2,
},
{
label: '积分兑换商品',
value: 3,
}
],
'x-component-props': {
placeholder: '产品定价',
style: { width: '174px' },
},
},
'NO_NAME_FIELD_$2': {
type: 'object',
'x-component': 'layout',
......@@ -160,3 +192,100 @@ export const channelSchema: ISchema = {
},
},
};
// 添加渠道商品模态框高级筛选
export const addChannelSchema: 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',
justifyContent: 'flex-start'
},
colStyle: {
marginLeft: 20,
},
},
properties: {
brandId: {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品牌',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
searchValue: null,
dataOption: [],
},
},
customerCategoryId: {
type: 'string',
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
searchValue: null,
dataOption: []
},
},
parentMemberId: {
type: 'string',
enum: [
{
label: '渠道1',
value: 1,
},
{
label: '渠道2',
value: 2,
},
],
'x-component-props': {
placeholder: '上级渠道',
},
},
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