feat: 单位详情新增同步功能

src/pages/Customer/Company/components/CompanyDetail/SyncClient.jsx

@@ -0,0 +1,156 @@
+import consts from '@/consts'
+import { syncToClient } from '@/services/customer'
+import ProTable from '@ant-design/pro-table'
+import { Copy } from '@icon-park/react'
+import { Button, Checkbox, message, Modal } from 'antd'
+import { useState } from 'react'
+// import { useDispatch } from 'umi'
+
+const SyncClient = ({ customer, client }) => {
+  // const dispatch = useDispatch()
+  const [state, setState] = useState({
+    visible: false,
+    selectedKeys: null,
+    checkValues: ['district', 'address']
+  })
+
+  // const refreshCompany = () => {
+  //   dispatch({
+  //     type: 'refresh/commitAction',
+  //     payload: 'company'
+  //   })
+  // }
+
+  // eslint-disable-next-line consistent-return
+  const handleOnConfirm = async () => {
+    const { checkValues = [], selectedKeys = [] } = state
+    if (checkValues?.length < 2) {
+      return message.error('同步选项至少选中一个')
+    }
+    if (!selectedKeys?.length) {
+      return message.error('未勾选待同步的客户')
+    }
+    const params = { customerId: customer.id, clientIds: selectedKeys }
+    checkValues.forEach(item => {
+      params[item] = true
+    })
+    const { code = -1 } = await syncToClient(params)
+    if (code === consts.RET_CODE.SUCCESS) {
+      // refreshCompany()
+      setState({ ...state, visible: false })
+      return message.success('同步成功')
+    }
+  }
+
+  const columns = [
+    {
+      dataIndex: 'clientName',
+      title: '客户名称',
+      width: '15%',
+      ellipsis: true
+    },
+    {
+      dataIndex: 'districtName',
+      title: '客户地区',
+      width: '15%',
+      ellipsis: true,
+      renderText: text => text?.replaceAll(' / ', ',')
+    },
+    {
+      dataIndex: 'address',
+      title: '地址',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      dataIndex: 'ride',
+      title: '乘车路线',
+      width: '20%',
+      ellipsis: true
+    },
+    {
+      dataIndex: 'landmarks',
+      title: '地标建筑',
+      width: '15%',
+      ellipsis: true
+    },
+    {
+      dataIndex: 'stay',
+      title: '参考住宿',
+      width: '15%',
+      ellipsis: true
+    }
+  ]
+
+  const { visible } = state
+  return (
+    <>
+      <Button size="small" onClick={() => setState({ visible: true })}>
+        <div className="flex items-center justify-center">
+          <Copy theme="two-tone" fill={['#333', '#535A5D']} />
+          <span className="ml-1">同步地址信息</span>
+        </div>
+      </Button>
+      <Modal
+        width="70%"
+        title={`同步 ${customer.companyName} 信息`}
+        getContainer={false}
+        visible={visible}
+        onCancel={() => setState({ ...state, visible: false })}
+        onOk={handleOnConfirm}>
+        <div className="rounded-3 p-4 mb-2">
+          <Checkbox.Group
+            defaultValue={['district', 'address']}
+            onChange={e => setState({ ...state, checkValues: e })}>
+            <div>
+              <Checkbox value={'district'}>
+                <div className="w-100px text-left">地区</div>
+              </Checkbox>
+              <span>{customer.districtName?.replaceAll(' / ', ',')}</span>
+            </div>
+            <div>
+              <Checkbox value={'address'}>
+                <div className="w-100px text-left">地址</div>
+              </Checkbox>
+              <span>{customer.address}</span>
+            </div>
+            <div>
+              <Checkbox value={'ride'}>
+                <div className="w-100px text-left">乘车路线</div>
+              </Checkbox>
+              <span>{customer.ride}</span>
+            </div>
+            <div>
+              <Checkbox value={'landmarks'}>
+                <div className="w-100px text-left">地标建筑</div>
+              </Checkbox>
+              <span>{customer.landmarks}</span>
+            </div>
+            <div>
+              <Checkbox value={'stay'}>
+                <div className="w-100px text-left">参考住宿</div>
+              </Checkbox>
+              <span>{customer.stay}</span>
+            </div>
+          </Checkbox.Group>
+        </div>
+        <ProTable
+          search={false}
+          rowKey="id"
+          toolBarRender={false}
+          size="small"
+          columns={columns}
+          dataSource={client}
+          bordered
+          scroll={{ y: 400 }}
+          pagination={false}
+          rowSelection={{
+            onChange: selectedRowKeys => setState({ ...state, selectedKeys: selectedRowKeys })
+          }}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export default SyncClient

src/pages/Customer/Company/components/CompanyDetail/TabList.jsx

@@ -10,6 +10,7 @@ import ProTable from '@ant-design/pro-table'
 import { useModal } from '@/components/Modal'
 import { useDispatch } from 'umi'
 import AddRecord from '@/pages/Customer/Client/components/ClientDetail/AddRecord'
+import SyncClient from './SyncClient'
 
 const CompanyTabList = ({ initData, customerId, client, software, customer }) => {
   const dispatch = useDispatch()
@@ -184,7 +185,7 @@ const CompanyTabList = ({ initData, customerId, client, software, customer }) =>
           </TabPane>
         </Tabs>
       </div>
-      <div className="sheet-btns pl-15px pt-15px">
+      <div className="sheet-btns pl-15px pt-15px flex items-center">
         <AddContact
           onConfirm={handleAddClient}
           buttonProps={{ size: 'small', ghost: 'true' }}
@@ -197,6 +198,7 @@ const CompanyTabList = ({ initData, customerId, client, software, customer }) =>
           }}
         />
         <AddRecord onConfirm={handleAddCustomerService} />
+        <SyncClient customer={customer} client={client.client} />
       </div>
     </div>
   )

src/pages/Customer/Company/components/PermSelect.tsx

@@ -1,6 +1,6 @@
 import { useModal } from '@/components/Modal'
 import { useModel } from 'umi'
-import { Select, Tooltip } from 'antd'
+import { Button, Select, Tooltip } from 'antd'
 import CustomPerm from './CustomPerm'
 import { getAuthCache, setAuthCache } from '@/utils/auth'
 import { PERMISSION_SELECT_KEY } from '@/utils/cache/cacheEnum'
@@ -70,13 +70,9 @@ const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetPr
       />
       {state.showSetting ? (
         <Tooltip title="自定义权限">
-          {/* <Button
-            type="primary"
-            shape="circle"
-            className="ml-3"
-            icon={}
-          /> */}
-          <SettingOutlined className="ml-3" onClick={() => handleOnChange('custom')} />
+          <Button className="ml-3">
+            <SettingOutlined onClick={() => handleOnChange('custom')} />
+          </Button>
         </Tooltip>
       ) : null}
     </>

src/services/customer.js

@@ -226,3 +226,10 @@ export async function changeGroupStatus(params) {
     data: params
   })
 }
+
+/** 同步单位信息到客户 */
+export async function syncToClient(params) {
+  return request.post('/customer/sync/client', {
+    data: params
+  })
+}