feat：商品区块品类属性添加同步平台品类和属性的操作

src/pages/classAndProperty/attribute/index.tsx

 import React, { ReactNode, useRef, useState } from 'react'
 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 {
   PlusOutlined,
   PlayCircleOutlined,
   EyeOutlined,
-  PauseCircleOutlined
+  PauseCircleOutlined,
+  QuestionCircleOutlined
 } from '@ant-design/icons'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
@@ -15,6 +16,12 @@ import { PublicApi } from '@/services/api'
 
 const Attribute: React.FC<{}> = () => {
   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) => {
     return new Promise((resolve, reject) => {
@@ -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>[] = [
     {
       title: 'ID',
@@ -118,6 +133,36 @@ const Attribute: React.FC<{}> = () => {
     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 (
     <PageHeaderWrapper>
       <Card>
@@ -168,10 +213,62 @@ const Attribute: React.FC<{}> = () => {
                 <Button type="primary" icon={<PlusOutlined />} onClick={() => { history.push('/memberCenter/commodityAbility/classAndProperty/attribute/add') }}>
                   新建
                 </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>
     </PageHeaderWrapper>
   )

src/pages/classAndProperty/class/index.tsx

@@ -4,6 +4,7 @@ import {
   LoadingOutlined,
   PlusOutlined,
   LinkOutlined,
+  QuestionCircleOutlined,
 } from '@ant-design/icons';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
@@ -26,6 +27,7 @@ let flag = false; // 全局变量 用于控制表单编辑退出提示
 
 const formActions = createFormActions()
 const treeActions = createTreeActions()
+const syncTreeActions = createTreeActions()
 
 const fetchClassTreeData = async (params?) => { // 商品品类树
   const res = await PublicApi.getProductCustomerGetCustomerCategoryTree()
@@ -38,12 +40,15 @@ const fetchPlatformTreeData = async (params?) => { // 平台后台树
 }
 
 const ClassProperty: React.FC<{}> = () => {
+  const [syncVisible, setSyncVisible] = useState(false)
   const [plateformVisible, setPlateformVisible] = useState(false)
   const [plateformSelectNode, setPlateformSelectNode] = useState<any>()
   const plateformTreeActions = useTreeActions()
 
   const [customPlateformExpandkeys, setCustomPlateformExpandkeys] = useState<any>()
 
+  const [syncLoading, setSyncLoading] = useState<boolean>(false)
+
   /* 选择品类树 */
   const {
     treeStatus,
@@ -75,8 +80,21 @@ const ClassProperty: React.FC<{}> = () => {
     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) => {
-    console.log(values, nodeRecord)
     const editOrAdd = nodeRecord && treeStatus === FormState.EDIT
     const params = editOrAdd ? { ...values, parentId: nodeRecord.parentId } : {
       ...values,
@@ -127,7 +145,34 @@ const ClassProperty: React.FC<{}> = () => {
     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>
 
   return  <PageHeaderWrapper
@@ -137,7 +182,15 @@ const ClassProperty: React.FC<{}> = () => {
       <Row gutter={[36, 36]}>
         <Col span={8}>
           <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
               ?  <TabTree
@@ -223,7 +276,28 @@ const ClassProperty: React.FC<{}> = () => {
           customExpandkeys={customPlateformExpandkeys}
         />
       </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>
 }