Commit 79ad14e5 authored by XieZhiXiong's avatar XieZhiXiong
parents 29109a26 b93d4c2d
import React, { ReactNode, useRef, useState } from 'react' import React, { ReactNode, useRef, useState } from 'react'
import { history } from 'umi' import { history } from 'umi'
import { Button, Popconfirm, Card, message } from 'antd' import { Button, Popconfirm, Card, Modal, Tooltip, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { import {
PlusOutlined, PlusOutlined,
PlayCircleOutlined, PlayCircleOutlined,
EyeOutlined, EyeOutlined,
PauseCircleOutlined PauseCircleOutlined,
QuestionCircleOutlined
} from '@ant-design/icons' } from '@ant-design/icons'
import { StandardTable } from 'god' import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface' import { ColumnType } from 'antd/lib/table/interface'
...@@ -15,6 +16,12 @@ import { PublicApi } from '@/services/api' ...@@ -15,6 +16,12 @@ import { PublicApi } from '@/services/api'
const Attribute: React.FC<{}> = () => { const Attribute: React.FC<{}> = () => {
const ref = useRef<any>({}) const ref = useRef<any>({})
const syncRef = useRef<any>({})
const [syncVisible, setSyncVisible] = useState<boolean>(false)
const [selectRow, setSelectRow] = useState<any[]>([]) // 模态框选择的行数据
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
const [syncLoading, setSyncLoading] = useState<boolean>(false)
const fetchData = (params?: any) => { const fetchData = (params?: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
...@@ -24,6 +31,14 @@ const Attribute: React.FC<{}> = () => { ...@@ -24,6 +31,14 @@ const Attribute: React.FC<{}> = () => {
}) })
} }
const fetchPlatformData = (params?: any) => {
return new Promise((resolve, reject) => {
PublicApi.getProductPlatformGetAttributeList({ ...params, name: params.name || '', groupName: params.groupName || '', isEnable: true }).then(res => {
resolve(res.data)
})
})
}
const columns: ColumnType<any>[] = [ const columns: ColumnType<any>[] = [
{ {
title: 'ID', title: 'ID',
...@@ -118,6 +133,36 @@ const Attribute: React.FC<{}> = () => { ...@@ -118,6 +133,36 @@ const Attribute: React.FC<{}> = () => {
console.log('cancel') console.log('cancel')
} }
const syncAttribute = () => {
setSyncVisible(true)
}
const rowSelection: any = {
type: 'checkbox',
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectRow(selectedRows)
setSelectedRowKeys(selectedRowKeys)
}
};
const handleAsyncOk = () => {
setSyncLoading(true)
if(selectedRowKeys.length) {
// @ts-ignore
PublicApi.postProductCustomerSyncAttribute({idList: selectedRowKeys}).then(res => {
if(res.code === 1000) {
ref.current.reload()
}
setSyncVisible(false)
setSyncLoading(false)
})
} else {
message.error('请选择需要同步的属性')
setSyncLoading(false)
}
}
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<Card> <Card>
...@@ -168,10 +213,62 @@ const Attribute: React.FC<{}> = () => { ...@@ -168,10 +213,62 @@ const Attribute: React.FC<{}> = () => {
<Button type="primary" icon={<PlusOutlined />} onClick={() => { history.push('/memberCenter/commodityAbility/classAndProperty/attribute/add') }}> <Button type="primary" icon={<PlusOutlined />} onClick={() => { history.push('/memberCenter/commodityAbility/classAndProperty/attribute/add') }}>
新建 新建
</Button> </Button>
<span>
<Button type="default" style={{marginLeft: 16}} onClick={syncAttribute}>平台属性同步</Button>
<Tooltip title="同步平台维护的属性,同步时按属性结构进行同步。">
&nbsp;<QuestionCircleOutlined />
</Tooltip>
</span>
</> </>
) )
}} }}
/> />
<Modal
title="同步平台属性"
visible={syncVisible}
onOk={handleAsyncOk}
onCancel={() => setSyncVisible(false)}
okText="确认"
cancelText="取消"
width={704}
destroyOnClose={true}
confirmLoading={syncLoading}
>
<StandardTable
columns={columns}
currentRef={syncRef}
tableProps={{
rowKey: 'id'
}}
rowSelection={rowSelection}
fetchTableData={(params: any) => fetchPlatformData(params)}
formilyLayouts={{
justify: 'space-between'
}}
formilyProps={{
ctx: {
schema: {
type: 'object',
properties: {
groupName: {
type: 'string',
'x-component-props': {
placeHolder: '属性组名称'
}
},
name: {
type: 'string',
'x-component-props': {
placeHolder: '属性名称'
},
'x-component': 'Search'
},
}
}
}
}}
/>
</Modal>
</Card> </Card>
</PageHeaderWrapper> </PageHeaderWrapper>
) )
......
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
LoadingOutlined, LoadingOutlined,
PlusOutlined, PlusOutlined,
LinkOutlined, LinkOutlined,
QuestionCircleOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree'; import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
...@@ -26,6 +27,7 @@ let flag = false; // 全局变量 用于控制表单编辑退出提示 ...@@ -26,6 +27,7 @@ let flag = false; // 全局变量 用于控制表单编辑退出提示
const formActions = createFormActions() const formActions = createFormActions()
const treeActions = createTreeActions() const treeActions = createTreeActions()
const syncTreeActions = createTreeActions()
const fetchClassTreeData = async (params?) => { // 商品品类树 const fetchClassTreeData = async (params?) => { // 商品品类树
const res = await PublicApi.getProductCustomerGetCustomerCategoryTree() const res = await PublicApi.getProductCustomerGetCustomerCategoryTree()
...@@ -38,12 +40,15 @@ const fetchPlatformTreeData = async (params?) => { // 平台后台树 ...@@ -38,12 +40,15 @@ const fetchPlatformTreeData = async (params?) => { // 平台后台树
} }
const ClassProperty: React.FC<{}> = () => { const ClassProperty: React.FC<{}> = () => {
const [syncVisible, setSyncVisible] = useState(false)
const [plateformVisible, setPlateformVisible] = useState(false) const [plateformVisible, setPlateformVisible] = useState(false)
const [plateformSelectNode, setPlateformSelectNode] = useState<any>() const [plateformSelectNode, setPlateformSelectNode] = useState<any>()
const plateformTreeActions = useTreeActions() const plateformTreeActions = useTreeActions()
const [customPlateformExpandkeys, setCustomPlateformExpandkeys] = useState<any>() const [customPlateformExpandkeys, setCustomPlateformExpandkeys] = useState<any>()
const [syncLoading, setSyncLoading] = useState<boolean>(false)
/* 选择品类树 */ /* 选择品类树 */
const { const {
treeStatus, treeStatus,
...@@ -75,8 +80,21 @@ const ClassProperty: React.FC<{}> = () => { ...@@ -75,8 +80,21 @@ const ClassProperty: React.FC<{}> = () => {
fetchMenuData: fetchPlatformTreeData, fetchMenuData: fetchPlatformTreeData,
}) })
/* 同步树 */
const {
treeStatus: syncTreeStatus,
setTreeStatus: setSyncTreeStatus,
treeData: syncTreeData,
nodeRecord: syncNodeRecord,
setNodeRecord: setSyncNodeRecord,
handleSelect: handleSyncSelect,
getTreeMaps: getSyncTreeMaps,
setTreeMaps: setSyncTreeMaps,
} = useTreeTabs({
treeActions: syncTreeActions,
})
const onFinish = (values) => { const onFinish = (values) => {
console.log(values, nodeRecord)
const editOrAdd = nodeRecord && treeStatus === FormState.EDIT const editOrAdd = nodeRecord && treeStatus === FormState.EDIT
const params = editOrAdd ? { ...values, parentId: nodeRecord.parentId } : { const params = editOrAdd ? { ...values, parentId: nodeRecord.parentId } : {
...values, ...values,
...@@ -127,7 +145,34 @@ const ClassProperty: React.FC<{}> = () => { ...@@ -127,7 +145,34 @@ const ClassProperty: React.FC<{}> = () => {
flag = false flag = false
} }
// 关联平台品类input // 同步平台品类
const asyncClass = () => {
setSyncVisible(true)
}
const handleSyncOk = () => {
setSyncLoading(true)
const syncIds = syncTreeActions.getSelectKeys()
if(syncIds.length) {
// @ts-ignore
PublicApi.postProductCustomerSyncCategory({idList: syncIds}).then(res => {
if(res.code === 1000) {
resetMenu()
}
setSyncVisible(false)
setSyncLoading(false)
})
} else {
message.error('请选择需要同步的品类')
setSyncLoading(false)
}
}
const handleSyncCancel = () => {
setSyncVisible(false)
}
const connectCategory = <div className='connectBtn' onClick={handleConnectCategroyBtn}><LinkOutlined style={{marginRight: 4}}/>关联</div> const connectCategory = <div className='connectBtn' onClick={handleConnectCategroyBtn}><LinkOutlined style={{marginRight: 4}}/>关联</div>
return <PageHeaderWrapper return <PageHeaderWrapper
...@@ -137,7 +182,15 @@ const ClassProperty: React.FC<{}> = () => { ...@@ -137,7 +182,15 @@ const ClassProperty: React.FC<{}> = () => {
<Row gutter={[36, 36]}> <Row gutter={[36, 36]}>
<Col span={8}> <Col span={8}>
<Card> <Card>
<h3 className="mb-30">选择要编辑的项目</h3> <p style={{display: 'flex', justifyContent: 'space-between'}}>
<h3 className="mb-30">选择要编辑的品类</h3>
<p>
<Button type="default" onClick={asyncClass}>平台品类同步</Button>
<Tooltip title="同步平台维护的品类,同步时按品类结构进行同步。">
&nbsp;<QuestionCircleOutlined />
</Tooltip>
</p>
</p>
{ {
treeData && treeData.length > 0 treeData && treeData.length > 0
? <TabTree ? <TabTree
...@@ -223,7 +276,28 @@ const ClassProperty: React.FC<{}> = () => { ...@@ -223,7 +276,28 @@ const ClassProperty: React.FC<{}> = () => {
customExpandkeys={customPlateformExpandkeys} customExpandkeys={customPlateformExpandkeys}
/> />
</Modal> </Modal>
<Modal
title="同步平台品类"
visible={syncVisible}
onOk={handleSyncOk}
onCancel={handleSyncCancel}
okText="平台品类同步"
cancelText="取消"
forceRender
getContainer='#root'
confirmLoading={syncLoading}
>
<TabTree
fetchData = {params => fetchPlatformTreeData(params)}
treeData={plateformTreeData}
handleSelect={handleSyncSelect}
actions={syncTreeActions}
customKey="id"
enableSearch
customExpandkeys={customPlateformExpandkeys}
checkable={true}
/>
</Modal>
</PageHeaderWrapper> </PageHeaderWrapper>
} }
......
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