update

src/pages/Setting/Users/components/edit.tsx

@@ -6,7 +6,7 @@ import { Card, Col, Form, Row, Tree, message, Switch, Button, TreeSelect, Radio,
 import { useEffect, useRef, useState } from "react";
 import { history } from "umi";
 
-import type { ProFormInstance } from "@ant-design/pro-form";
+import type { FormInstance, ProFormInstance } from "@ant-design/pro-form";
 import type { UserModel } from "../data";
 import type { CurrentUser } from '@/models/user';
 
@@ -16,6 +16,9 @@ import { getRoleList, getSystemMenuTree, handleAnalysisPermission, handleSupplie
 import BusinessManDrawer from "@/pages/basicManage/businessMan/components/businessManDrawer";
 import session from "@/utils/session";
 import moment from 'moment'
+import close from '@/assets/ai/close.png'
+import searchIcon from '@/assets/ai/searchIcon.png'
+import './style.less'
 
 // 提交账号数据
 const handleAddUpdate = async (item: UserModel, type: boolean) => {
@@ -57,6 +60,7 @@ const handelResetPassWord = async (item: any) => {
  */
 const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab, pageType, BUSINESSMAN_ID, onShow }: { onShow?: boolean, BUSINESSMAN_ID?: any, pageType?: string, selectTab?: any, tableTab?: any, openType?: string, detail?: UserModel, reloadTable: any, currentUser: CurrentUser | undefined }) => {
   const detailForm = useRef<ProFormInstance>() // 表单对象
+  const searchTreeRef = useRef<FormInstance>();
   const [checkedRole, setCheckedRole] = useState<React.Key[]>(); // 当前选中的行 角色 id
   const [checkedServerpart, setCheckedServerpart] = useState<React.Key[]>(); // 当前选中的行 服务区id
   const [checkedShop, setCheckedShop] = useState<React.Key[]>(); // 当前选中的行 服务区门店id
@@ -80,6 +84,12 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
   const [checkManageerCenterList, setCheckManageerCenterList] = useState<any>()
   // 当前这个用户实际的管理中心权限
   const [currentUserInfoManager, setCurrentUserInfoManager] = useState<any>()
+  // 显示服务区树搜索框
+  const [showServiceSearchBox, setShowServiceSearchBox] = useState<boolean>(false)
+  // 显示的管理中心数据
+  const [wareHouseList, setWareHouseList] = useState<any>()
+  // 全部的管理中心数据
+  const [allWareHouseList, setAllWareHouseList] = useState<any>()
 
   // const { data: roleTree } = useRequest(async () => {
   //   if (currentUser?.UserPattern===9000){
@@ -132,10 +142,10 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
     return data.map(n => n.children ? n : { ...n, children: [] })
   })
   // 查询可配置的管理中心
-  const { data: wareHouseList } = useRequest(async () => {
+  const { data: wareHouseListData } = useRequest(async () => {
     let req: any = {
       SearchParameter: {
-        // PROVINCE_CODE: detail?.USER_PROVINCE || "",
+        PROVINCE_CODES: detail?.USER_PROVINCE || "",
         WAREHOUSE_STATE: 1
       },
       SortStr: "SELLER_ID,WAREHOUSE_TYPE,WAREHOUSE_ID",
@@ -143,7 +153,8 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
       PageSize: 999999
     }
     const data = await handleGetWareHouseList(req)
-    console.log('wareHouseListwareHouseList', data);
+    setWareHouseList(data)
+    setAllWareHouseList(data)
     return data
   })
 
@@ -156,8 +167,6 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
   // 查询可选商家
   const { run: handleGetMerchantTree, data: merchantTree } = useRequest(async () => {
     const data = await getMerchantTreeNosessoin()
-    console.log('3213123123213123213123', data);
-
     return data
   }, { manual: true })
 
@@ -320,9 +329,27 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
       WAREHOUSE_ID: checkManageerCenterList.toString()
     }
     const data = await handleSynchroRTSELLERPASSPORT(req)
-    console.log('data321wfDSFSDFSFS', data);
   }
 
+  // 管理中心权限 
+  const handleFilterManagerList = (values: any) => {
+    console.log('values', values);
+    console.log('allWareHouseListallWareHouseList', allWareHouseList);
+    let list: any = JSON.parse(JSON.stringify(allWareHouseList))
+    if (list && list.length > 0) {
+      if (values) {
+        let res: any = []
+        list.forEach((item: any) => {
+          if (item.WAREHOUSE_NAME.includes(values)) {
+            res.push(item)
+          }
+        })
+        setWareHouseList(res)
+      } else {
+        setWareHouseList(allWareHouseList)
+      }
+    }
+  }
 
   // 判断账号的正则
   // 1表示全数字  0 表示 默认 
@@ -441,6 +468,8 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
               console.log('list', list);
 
               setCheckManageerCenterList(list)
+            } else {
+              setCheckManageerCenterList([])
             }
 
             // 请求获取该账户绑定的角色拥有的模块权限
@@ -1258,7 +1287,7 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
 
         {
           initialDetail.USER_PATTERN === 1000 || initialDetail.USER_PATTERN === 4000 ?
-            <Card title="授权管理中心" style={{ marginTop: 24 }} bordered={false} size="default">
+            <Card className="managerCardBox" title="授权管理中心" style={{ marginTop: 24 }} bordered={false} size="default">
               <Row gutter={24}>
                 <Col span={8}>
                   {
@@ -1267,10 +1296,51 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
                       style={{ borderColor: "#97D6FE", height: 424 }}
                       size="small"
                       title="管理中心权限" headStyle={{ backgroundColor: '#E7F7FF' }}
-                      extra={<a onClick={() => {
+                      extra={<div className="managerCardTopBox">
-                        setCheckManageerCenterList([])
+                        <img style={{ width: '20px', height: '20px', cursor: 'pointer', marginLeft: '5px' }} src={searchIcon} onClick={() => {
+                          setShowServiceSearchBox(true)
+                        }} />
+                        <div className="fixedBox" style={{ display: showServiceSearchBox ? 'flex' : 'none' }}>
+                          <ProForm
+                            formRef={searchTreeRef}
+                            layout={'horizontal'}
+                            submitter={{
+                              render: () => {
+                                return []
+                              }
+                            }}
+                            isKeyPressSubmit
+                            onFinish={(values: any) => {
+                              return handleFilterManagerList(values?.searchValue || '')
+                            }}
+                          >
+                            <Row>
+                              <Col span={15} className={'noBottom'}>
+                                <ProFormText
+                                  name={'searchValue'}
+                                  fieldProps={{
+                                    placeholder: '请输入管理中心名称'
+                                  }}
+                                  allowClear
+                                />
+                              </Col>
+                              <Col span={2}></Col>
+                              <Col span={5}>
+                                <Button type={'primary'} onClick={() => {
+                                  searchTreeRef.current?.submit()
+                                }}>查询</Button>
+                              </Col>
+                            </Row>
 
-                      }}>取消选择</a>}>
+                          </ProForm>
+                          <img style={{ width: '20px', height: '20px', cursor: 'pointer', marginLeft: '5px' }} src={close} onClick={() => {
+                            setShowServiceSearchBox(false)
+                          }} />
+                        </div>
+                        <a onClick={() => {
+                          setCheckManageerCenterList([])
+                        }}>取消选择</a>
+                      </div>}>
                       <Form.Item name="ServerpartList" style={{ marginBottom: 0 }}>
                         <Tree
                           checkedKeys={checkManageerCenterList}
@@ -1283,7 +1353,21 @@ const Edit = ({ tableTab, openType, detail, reloadTable, currentUser, selectTab,
                             key: 'WAREHOUSE_ID'
                           }}
                           onCheck={(checkedKeys: React.Key[] | any) => {
+                            // 若showServiceSearchBox 是true 那么就是搜索模式 就是加入新选的内容 
+                            // 若 为false 那么就是正常的 就是根据 选择的 
+                            if (showServiceSearchBox) {
+                              let list: any = JSON.parse(JSON.stringify(checkManageerCenterList))
+                              if (checkedKeys && checkedKeys.length > 0) {
+                                checkedKeys.forEach((item: any) => {
+                                  if (list.indexOf(item) === -1) {
+                                    list.push(item)
+                                  }
+                                })
+                              }
+                              setCheckManageerCenterList(list)
+                            } else {
                               setCheckManageerCenterList(checkedKeys)
+                            }
                             return checkedKeys
                           }}
                         ></Tree>

src/pages/Setting/Users/components/style.less

@@ -0,0 +1,32 @@
+.managerCardBox {
+    .managerCardTopBox {
+        position: relative;
+
+        .searchIcon {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            margin-right: 15px;
+        }
+
+        .fixedBox {
+            position: absolute;
+            width: 300px;
+            background: #fff;
+            right: -10px;
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+            border-radius: 8px;
+            box-sizing: border-box;
+            padding: 12px;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+
+            .noBottom {
+                .ant-form-item {
+                    margin-bottom: 0 !important;
+                }
+            }
+        }
+    }
+}

src/pages/basicManage/ServerpartShop/index.tsx

@@ -13,7 +13,7 @@ import ProTable from "@ant-design/pro-table";
 import useRequest from "@ahooksjs/use-request";
 import { getFieldEnum, getFieldEnumTree, getServerpartOption, getServerpartTree } from "@/services/options";
 import { MenuFoldOutlined, PlusOutlined } from "@ant-design/icons";
-import { ModalForm, ProFormDatePicker, ProFormSelect, ProFormText } from "@ant-design/pro-form";
+import ProForm, { ModalForm, ProFormDatePicker, ProFormSelect, ProFormText } from "@ant-design/pro-form";
 import { PageContainer } from "@ant-design/pro-layout";
 import { Button, Tree, Col, Row, Drawer, message, Popconfirm, Space, Menu, Avatar, Form, TreeSelect, Modal } from "antd";
 import type { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
@@ -36,12 +36,14 @@ import LogTable from "./component/logTable";
 import Draggable from "react-draggable";
 import React from "react";
 import BusinessInforForm from "./component/businessInforForm";
+import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
 
 
 // 服务区门店组件主体
 const ServerpartShopTable: React.FC<{ currentUser: CurrentUser }> = ({ currentUser }) => {
     const actionRef = useRef<ActionType>()
     const formRef = useRef<FormInstance>()
+    const updateShopStateModalFormRef = useRef<FormInstance>()
     const BusinessInforFormRef = useRef<any>()
     const ShopOperateRef = useRef<any>()
     const formDetailRef = useRef<any>()
@@ -49,14 +51,21 @@ const ServerpartShopTable: React.FC<{ currentUser: CurrentUser }> = ({ currentUs
     const [showDetail, setShowDetail] = useState<boolean>()
     const [currenMenu, setCurrenMenu] = useState<any>(); // 当前选中的左侧菜单
     const [modalVisible, handleModalVisible] = useState<boolean>()
-    const [serverpartId, setServerpartId] = useState<string>()
+    const [serverpartId, setServerpartId] = useState<any>()
-    // const [serverpartId, setServerpartId] = useState<[]>([])
     const [collapsible, setCollapsible] = useState<boolean>(false)
+    // 同步门店状态的悬浮框
+    const [updateShopStateModal, setUpdateShopStateModal] = useState<boolean>(false)
     // 添加经营信息的悬浮框
     const [showAddBusinessModal, setShowAddBusinessModal] = useState<boolean>(false)
     const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
     const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
     const draggleRef = React.createRef<any>()
+    // 选择的服务区
+    const [selectServerPartList, setSelectServerPartList] = useState<any>()
+    // 门店更新状态的loading
+    const [updateShopStateLoading, setUpdateShopStateLoading] = useState<boolean>()
+
+    const businessStateList = session.get('businessStateList')
     const onDraggaleStart = (event, uiData) => {
         const { clientWidth, clientHeight } = window.document.documentElement;
         const targetRect = draggleRef.current?.getBoundingClientRect();
@@ -83,6 +92,7 @@ const ServerpartShopTable: React.FC<{ currentUser: CurrentUser }> = ({ currentUs
     })
     const ServerpartIdsList = session.get('ServerpartIdsList')
 
+
     const columns: ProColumns<ServerpartShopModel>[] = [
         {
             dataIndex: 'SHOPNAME',
@@ -268,57 +278,52 @@ const ServerpartShopTable: React.FC<{ currentUser: CurrentUser }> = ({ currentUs
         })
     }
 
+    // 同步门店经营状态
+    const handleUpdateShopState = async (value: any) => {
+        setUpdateShopStateLoading(true)
+        setUpdateShopStateLoading(false)
+
+    }
+
     return (
-        <PageContainer header={{
+        <div>
-            title: '',
+            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
-            breadcrumb: {},
+                <LeftSelectTree setSelectedId={setServerpartId} setCollapsible={setCollapsible} collapsible={collapsible} />
+                <div style={{
+                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    paddingRight: 0
                 }}>
-            <ProCard split="vertical" style={{ height: 'calc(100vh - 127px)', overflowY: 'scroll', backgroundColor: '#fff' }}>
+                    <ProTable
-                <ProCard
-                    className="pageTable-leftnav"
-                    bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20 }}
-                    extra={<MenuFoldOutlined onClick={() => { setCollapsible(!collapsible) }} />}
-                    colSpan={!collapsible ? "240px" : "60px"}
-                    title={!collapsible ? "请选择服务区" : ""}
-                    headerBordered
-                    collapsed={collapsible}
-                >
-                    <Tree
-                        checkable
-                        treeData={!severpartLoading ? severpartTree : []}
-                        fieldNames={{
-                            title: "label",
-                            // value: "value",
-                            key: "key"
-                        }}
-                        blockNode
-                        // onSelect={onSelect}
-                        onCheck={(checkedKeys: React.Key[] | any, info) => {
-                            const serverparts = info.checkedNodes.filter(n => n?.type === 1)
-                            setServerpartId(serverparts.map(n => n?.value)?.toString() || '')
-                            actionRef?.current?.reload()
-                        }}
-                    // switcherIcon={<PlusOutlined />}
-                    >
-                    </Tree>
-                </ProCard>
-                <ProCard bodyStyle={{ paddingTop: 0, paddingBottom: 0, paddingRight: 0 }}>
-                    <ProTable<ServerpartShopModel>
                         rowKey="SERVERPARTSHOP_ID"
                         headerTitle="门店列表"
                         request={async (params) => {
                             if (serverpartId && serverpartId.length > 0) {
-                                const data = await getList({ ...params, SERVERPART_IDS: serverpartId })
+                                const data = await getList({
+                                    ...params,
+                                    SERVERPART_IDS: serverpartId,
+                                    current: 1,
+                                    pageSize: 999999
+                                })
                                 return data
                             }
                             return { data: [], success: true }
                         }}
+                        scroll={{ x: "100%", y: "calc(100vh - 450px)" }}
                         actionRef={actionRef}
                         search={{ span: 6 }}
                         columns={columns}
                         bordered
                         toolbar={{
                             actions: [
+                                <Button type="primary" onClick={() => {
+                                    if (selectServerPartList && selectServerPartList.length > 0) {
+                                        setUpdateShopStateModal(true)
+                                    } else {
+                                        message.error('请先选择门店！')
+                                    }
+                                }}>批量更新</Button>,
                                 <Button
                                     key="new"
                                     icon={<PlusOutlined />}
@@ -326,14 +331,72 @@ const ServerpartShopTable: React.FC<{ currentUser: CurrentUser }> = ({ currentUs
                                     onClick={() => {
                                         handleModalVisible(true)
                                     }}
-                                >门店</Button>,
+                                >门店</Button>
                             ]
                         }}
                         options={false}
-                        pagination={{ defaultPageSize: 10, showSizeChanger: false }}
+                        rowSelection={{
+                            type: 'checkbox',
+                            selectedRowKeys: selectServerPartList,
+                            preserveSelectedRowKeys: true,
+                            onChange: (selectedRowKeys: any, selectedRows: any) => {
+                                console.log('selectedRowKeys', selectedRowKeys);
+                                setSelectServerPartList(selectedRowKeys)
+                            }
+                        }}
                     />
-                </ProCard>
+                </div>
-            </ProCard>
+            </div>
+
+            {/* 同步门店状态的悬浮框 */}
+            <Modal
+                title="批量同步门店状态"
+                width={800}
+                bodyStyle={{ padding: 16 }}
+                open={updateShopStateModal}
+                destroyOnClose={true}
+                onCancel={() => {
+                    setUpdateShopStateModal(false)
+                }}
+                confirmLoading={updateShopStateLoading}
+                onOk={() => {
+                    updateShopStateModalFormRef.current?.validateFields().then((res: any) => {
+                        handleUpdateShopState(res)
+                    })
+                }}
+                modalRender={(modal) => {
+                    return <Draggable
+                        disabled={disabled}
+                        bounds={bounds}
+                        onStart={(event, uiData) => onDraggaleStart(event, uiData)}
+                    >
+                        <div ref={draggleRef}>{modal}</div>
+                    </Draggable>
+                }}
+            >
+                <ProForm
+                    formRef={updateShopStateModalFormRef}
+                    submitter={false}
+                >
+                    <Row gutter={8}>
+                        <Col span={8}>
+                            <ProFormSelect
+                                label={"经营状态"}
+                                name={"BUSINESS_STATE"}
+                                rules={[
+                                    {
+                                        required: true,
+                                        message: '请选择经营状态'
+                                    }
+                                ]}
+                                fieldProps={{
+                                    options: businessStateList
+                                }}
+                            />
+                        </Col>
+                    </Row>
+                </ProForm>
+            </Modal>
 
             <Drawer
                 width={'80%'}
@@ -410,7 +473,7 @@ const ServerpartShopTable: React.FC<{ currentUser: CurrentUser }> = ({ currentUs
             >
                 <BusinessInforForm onRef={BusinessInforFormRef} currentRow={currentRow} />
             </Modal>
-        </PageContainer >
+        </div >
     );
 }
 export default connect(({ user }: ConnectState) => ({