Skip to content

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

fix:表格多项操作抽离

parent 4ed4296e
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 79 deletions
src/pages/classAndProperty/attribute/index.tsx
View file @ d424825d
......@@ -14,10 +14,9 @@ import { PublicApi } from '@/services/api'
// import styles from './index.less'
const Attribute: React.FC<{}> = () => {
const ref = useRef({})
const ref = useRef<any>({})
const fetchData = (params?: any) => {
console.log(params, '搜索参数')
return new Promise((resolve, reject) => {
PublicApi.getProductCustomerGetCustomerAttributeList({ ...params, name: params.name || '' }).then(res => {
resolve(res.data)
......@@ -100,16 +99,13 @@ const Attribute: React.FC<{}> = () => {
}
const confirm = (record: any) => {
console.log(record, 'record')
PublicApi.postProductCustomerUpdateCustomerAttributeStatus({id: record.id, isEnable: !record.isEnable}).then(res=>{
//@ts-ignore
ref.current.reload()
})
}
const clickDelete = (record: any) => {
PublicApi.postProductCustomerDeleteCustomerAttribute({ id: record.id }).then(res=>{
//@ts-ignore
ref.current.reload()
})
}
......
src/pages/commodity/products/TableOperation/index.tsx 0 → 100644
View file @ d424825d
import React, { useEffect, useState } from 'react'
import { Popconfirm, Button, Dropdown, Menu } from 'antd'
import { CaretDownOutlined } from '@ant-design/icons'
export interface TableOperationProps {
record: any,
statusOperationMap: any, // 所有状态和操作名称的映射
operationHandler: any, // 所有的操作句柄
priorityOperationName?: string, // 优先靠前的操作名称
}
const TableOperation:React.FC<TableOperationProps> = (props) => {
const { record, statusOperationMap, operationHandler, priorityOperationName } = props
const [operationName, setOperationName] = useState<string[]>([])
useEffect(() => {
// let maps = statusOperationMap[record.status]
// if(maps.length > 2){
// setOperationName(() => statusOperationMap[record.status].filter(_ => _ != priorityOperationName))
// }else{
// }
setOperationName(() => statusOperationMap[record.status])
}, [])
return ( <>
{
operationName.length > 2
?
<>
{/* {
priorityOperationName
?
<Button type='link' onClick={operationHandler[priorityOperationName]}>{priorityOperationName}</Button>
: */}
<Button type='link' onClick={operationHandler[operationName[0]]}>{operationName[0]}</Button>
{/* } */}
<Dropdown overlay={
<Menu>
{
operationName.slice(1, operationName.length).map(_ => (
<Menu.Item>
<Button type='link' onClick={operationHandler[_]}>{ _ }</Button>
</Menu.Item>
))
}
</Menu>
}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
更多 <CaretDownOutlined />
</a>
</Dropdown>
</>
:
operationName.map(_ => (<Button type='link' onClick={operationHandler[_]}>{ _ }</Button>))
}
</>
)
}
TableOperation.defaultProps = {}
export default TableOperation
\ No newline at end of file
src/pages/commodity/products/addProducts.tsx
View file @ d424825d
......@@ -381,38 +381,6 @@ const AddProducts: React.FC<{}> = (props) => {
<BasicInfoForm
onRef={(refs) => setFormRefs([...formRefs, refs])}
onChangeAttributeList={(_lists: any) => setAttributeList(_lists)} />
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>选择货品</Badge>} key="2">
<SelectGoodsForm />
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>商品属性</Badge>} key="3">
<ProductAttributeForm
onRef={(refs) => setFormRefs([...formRefs, refs])}
attributesData={attributeList}
/>
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>价格设置</Badge>} key="4">
<PriceAttributeForm
onRef={(refs) => setFormRefs([...formRefs, refs])}
/>
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>商品图片</Badge>} key="5">
<ProductImageForm />
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>商品描述</Badge>} key="6">
{
renderTemplate()
}
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>物流信息</Badge>} key="7">
<LogisticsForm
onRef={(refs) => setFormRefs([...formRefs, refs])}
/>
</TabPane>
<TabPane tab={<Badge count={1} offset={[12, 0]}>其他</Badge>} key="8">
<OtherForm
onRef={(refs) => setFormRefs([...formRefs, refs])}
/>
</TabPane> */}
</Tabs>
......
src/pages/commodity/products/addProductsItem/selectGoodsForm.tsx
View file @ d424825d
......@@ -6,7 +6,7 @@ import { PublicApi } from '@/services/api'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import { EyeOutlined } from '@ant-design/icons'
import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
import { GetProductGoodsGetGoodsListResponseDetail } from '@/services/ProductApi';
import { inject, observer } from 'mobx-react'
import { store } from '@/store'
......
src/pages/commodity/products/index.tsx
View file @ d424825d
......@@ -18,7 +18,9 @@ import { ColumnType } from 'antd/lib/table/interface'
import moment from 'moment'
import styles from "./index.less"
import { PublicApi } from '@/services/api'
import { GetProductCommodityGetShopResponse } from '@/services'
import { GetProductCommodityGetShopResponse } from '@/services/ProductApi'
import TableOperation from './TableOperation'
import { store } from '@/store'
......@@ -235,26 +237,34 @@ const Products: React.FC<{}> = () => {
];
const renderOptionButton = (record: any) => {
// 操作常量
const statusAndOperationList = {
'1': ['复制', '提交审核', '修改', '删除'],
'2': ['复制'],
'3': ['复制', '修改'],
'4': ['复制', '上架', '修改'],
'5': ['复制', '下架'],
'6': ['复制', '上架', '修改'],
}
const operationHandler = {
'复制': () => clickCopy(record),
'提交审核': () => clickSubmitCheck(record),
'修改': () => clickModify(record.id),
'删除': () => confirmDelete(record.id),
'上架': () => clickUp(1, record.id),
'下架': () => clickUp(0, record.id),
}
return (
<>
<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>
{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={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
{(record.status === 1 && !record.checkTime) ? <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>
)
}
<TableOperation
record={record}
statusOperationMap={statusAndOperationList}
operationHandler={operationHandler}
priorityOperationName="提交审核"
/>
</>
)
}
......
src/pages/trademark/index.tsx
View file @ d424825d
import React, { ReactNode, useRef, useEffect } from 'react'
import { history } from 'umi'
import { Button, Popconfirm, Card, message, Dropdown, Menu } from 'antd'
import { Button, Popconfirm, Card, message, Dropdown, Menu, Modal } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
PlayCircleOutlined,
EyeOutlined,
PauseCircleOutlined,
CaretDownOutlined
CaretDownOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import moment from 'moment'
import { PublicApi } from '@/services/api'
const { confirm } = Modal
const Trademark: React.FC<{}> = () => {
const ref = useRef<any>({})
......@@ -54,7 +57,7 @@ const Trademark: React.FC<{}> = () => {
component = (
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => confirm(record)}
onConfirm={() => confirmUpdate(record)}
onCancel={cancel}
okText="是"
cancelText="否"
......@@ -91,25 +94,17 @@ const Trademark: React.FC<{}> = () => {
dataIndex: 'option',
render: (text: any, record: any) => {
return (
<>
(record.status !== 2) ? <>
{
(record.status !== 2) ? <>
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => handelDelete(record)}
onCancel={cancel}
okText="是"
cancelText="否"
>
<Button type='link'>删除</Button>
</Popconfirm>
record.status === 1 ? <>
<Button type='link' onClick={()=>handleApplyCheck(record)}>提交审核</Button>
<Dropdown overlay={
<Menu>
<Menu.Item>
<Button type='link' onClick={()=>history.push(`/memberCenter/commodityAbility/trademark/addBrand?id=${record.id}`)}>修改</Button>
</Menu.Item>
<Menu.Item>
{record.status === 1 ? <Button type='link' onClick={()=>handleApplyCheck(record)}>提交审核</Button> : ''}
<Button onClick={() => handelDelete(record)} type='link'>删除</Button>
</Menu.Item>
</Menu>
}>
......@@ -117,9 +112,13 @@ const Trademark: React.FC<{}> = () => {
更多 <CaretDownOutlined />
</a>
</Dropdown>
</> : ''
</> :
<>
<Button type='link' onClick={()=>history.push(`/memberCenter/commodityAbility/trademark/addBrand?id=${record.id}`)}>修改</Button>
<Button onClick={() => handelDelete(record)} type='link'>删除</Button>
</>
}
</>
</> : ''
)
}
}
......@@ -130,7 +129,7 @@ const Trademark: React.FC<{}> = () => {
history.push(`/memberCenter/commodityAbility/trademark/viewBrand?id=${record.id}`)
}
const confirm = (record: any) => {
const confirmUpdate = (record: any) => {
PublicApi.postProductBrandUpdateBrandEnable({ id: record.id, isEnable: !record.isEnable }).then(res => {
ref.current.reload()
})
......@@ -141,10 +140,22 @@ const Trademark: React.FC<{}> = () => {
}
const handelDelete = (record: any) => {
PublicApi.postProductBrandDeleteBrand({ id: record.id }).then(res => {
if(res.code === 1000)
ref.current.reload()
})
confirm({
title: '确定要执行删除操作?',
icon: <ExclamationCircleOutlined />,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk() {
PublicApi.postProductBrandDeleteBrand({ id: record.id }).then(res => {
if(res.code === 1000)
ref.current.reload()
})
},
onCancel() {
cancel()
},
});
}
const handleApplyCheck = (record:any) => {
......
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