@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

package/src/components/Business/BsLayouts/Components/AllFunc/drawContent.tsx

@@ -0,0 +1,112 @@
+// @ts-nocheck
+import { List, Tooltip } from 'antd';
+import React, { useEffect, useState, } from 'react';
+import { Link, formatMessage } from 'umi';
+import './index.less';
+import classNames from 'classnames';
+import right from '../../../../../assets/right.png';
+import { getMenuAuthDataKey } from '@/utils/LocalstorageUtils';
+export type SiderTheme = 'light' | 'dark';
+
+const DrawContent = ({onClose, itemPath}: any) => {
+  const routes = JSON.parse(localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]');
+  const btnAuth = JSON.parse(localStorage.getItem(getMenuAuthDataKey()) || '[]');
+  const [homepageData, sethomepageData]: any = useState([]);
+  const [routesData, setroutesData]: any = useState([]);
+
+  useEffect(() => {
+    const homepageDataList: any[] = []; //不含子集的菜单
+    const routesDataList: any[] = []; //含子集的菜单
+    routes.forEach(item => {
+      if (btnAuth.find((d: any) => d === item.code)) {
+      }
+      if (item.children) {
+        routesDataList.push(item);
+      } else {
+        homepageDataList.push(item);
+      }
+    })
+    sethomepageData(homepageDataList)
+    setroutesData(routesDataList)
+  }, []);
+
+  const renderChildItem = (child) => {
+    if (!child.hideInMenu && child.children) {
+      return (
+        <>
+          <List.Item style={{color: '#000', fontWeight: 'bold' }}>
+            {formatMessage({ id: `${child.locale}` })}
+          </List.Item>
+          {child.children.map((menuItem: any) => {
+            return renderChildItem(menuItem)
+          })}
+        </>
+      );
+    } else if (!child.hideInMenu && child.path) {
+      return (
+        <List.Item style={{ fontSize: '12px' }} className="allFuncOnMouserover">
+          <Link to={child.path} onClick={onClose}>
+            <Tooltip
+              title={formatMessage({ id: `${child.locale}` })}
+            >
+              {formatMessage({ id: `${child.locale}` }).length > 10
+                ? `${formatMessage({
+                  id: `${child.name}`,
+                }).slice(0, 10)}...`
+                : formatMessage({ id: `${child.locale}` })}
+            </Tooltip>
+            <img className="allFuncOnMouseroverImg" src={right}></img>
+          </Link>
+        </List.Item>
+      );
+    }
+  }
+
+
+  return (
+    <div className='allfunc_drawcontent'>
+    <p className={'drawerWarp_p'}>您的当前权限可以使用以下功能：</p>
+    <div className={'drawerWarp'}>
+      {homepageData && homepageData.filter((d) => !d.hideInMenu).length > 0 && (
+        <List
+          className={classNames('allFunsList', 'allFunsListWarp')}
+          dataSource={homepageData}
+          renderItem={(child: any) => {
+            if (!child.hideInMenu && child.path) {
+              return (
+                <div className={classNames('allFunsListWarp')}>
+                  <List.Item
+                    className={classNames('allFuncOnMouserover')}
+                    style={{ padding: '12px 24px' }}
+                  >
+                    <Link to={child.path} onClick={onClose}>
+                      {formatMessage({ id: `${child.name}` })}
+                      <img className="allFuncOnMouseroverImg" src={right}></img>
+                    </Link>
+                  </List.Item>
+                </div>
+              );
+            }
+          }}
+        />
+      )}
+      {routesData.map((item, index) => {
+        return (
+          <List
+            className={classNames('allFunsList', 'allFunsListWarp')}
+            style={{color: '#005CFF'}}
+            header={<b>{formatMessage({ id: `${item.name}` })}</b>}
+            bordered
+            dataSource={item.children}
+            renderItem={(child: any) => {
+              return renderChildItem(child)
+            }}
+          />
+        );
+      })}
+    </div>
+  </div>
+  )
+}
+
+export default DrawContent;

package/src/components/Business/BsLayouts/Components/AllFunc/index.less

@@ -0,0 +1,153 @@
+
+
+.menu {
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.right {
+  display: flex;
+  float: right;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+  .action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    > span {
+      vertical-align: middle;
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+    .opened {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: #005cff;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+}
+
+.warp_allfunc {
+  z-index: 100;
+  
+  
+  .drawerWarp {
+    column-count: 4;
+  }
+  
+  .drawer_header_warp {
+    .ant-list-header {
+      padding: 0 0 0 10px !important;
+      line-height: 40px;
+      border: 0px !important;
+      b {
+        width: 100%;
+        display: inline-block;
+        border-bottom: 1px solid #f0f0f0;
+      }
+    }
+    .ant-list-item {
+      padding: 0 0 0 10px !important;
+      line-height: 30px !important;
+    }
+  
+    .ant-drawer-close {
+      position: absolute;
+      right: 0;
+    }
+  }
+  
+  
+  
+  .p {
+    color: #b1bad4;
+    font-weight: 400;
+    font-size: 12px;
+    margin-bottom: 10px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    line-height: 16px;
+    text-align: left;
+    opacity: 0.8;
+    user-select: none;
+    text-align: center;
+    margin-left: 8px;
+  }
+  
+  .btn {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    color: #b1bad4;
+    background: #10234c;
+    border-radius: 8px;
+    width: 130px;
+    user-select: none;
+  }
+  .btn:hover,
+  .btnSpan1:hover,
+  .btnSpan2:hover {
+    cursor: pointer;
+    color: #b1bad4;
+  }
+
+  .btnSpan1 {
+    margin: 0 7px;
+  }
+}
+
+.allfunc_drawcontent {
+  .allFunsList {
+    margin-bottom: 10px;
+  }
+  
+  .allFunsListWarp {
+    width: 200px;
+    margin-right: 10px;
+    border-radius: 4px;
+  
+    break-inside: avoid;
+  }
+  
+  .drawerWarp_p {
+    color: #8c8c8c;
+    font-weight: 400;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    line-height: 20px;
+    text-align: left;
+  }
+}
+
+

package/src/components/Business/BsLayouts/Components/AllFunc/index.tsx

@@ -0,0 +1,70 @@
+
+// @ts-nocheck
+import { Drawer } from 'antd';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import './index.less';
+import allfunc from '../../../../../assets/allfunc.svg';
+import DrawContent from './drawContent';
+export type SiderTheme = 'light' | 'dark';
+
+const AllFunc: any = forwardRef(({ isCollapse, handleClose, itemPath }: any, ref) => {
+  const [isDrawer, setIsDrawer]: any = useState(false);
+  useImperativeHandle(ref, () => ({
+    close: () => {
+      setIsDrawer(false)
+    }
+  }));
+
+  useEffect(() => {
+    if (isCollapse) {
+      setIsDrawer(false);
+    }
+  }, [isCollapse]);
+  const showDrawer = (e) => {
+    if (isCollapse) {
+      return;
+    }
+    handleClose()
+    e.stopPropagation();
+    setIsDrawer(!isDrawer);
+  };
+  const onClose = () => {
+    setIsDrawer(!isDrawer);
+  };
+
+
+  return (
+    <div
+      className={'warp_allfunc'}
+      onClick={(e: any) => {
+        e.stopPropagation();
+      }}
+      style={{ opacity: isCollapse ? '0' : '1' }}
+    >
+      <p className={'p'}>没有找到想要的功能？</p>
+
+      <p className={'btn'} onClick={showDrawer}>
+        <span className={'btnSpan1'}>
+          <img style={{marginTop: '-2px'}} width={18} src={allfunc} />
+        </span>
+        <span className={'btnSpan2'}>查看全部功能</span>
+      </p>
+      {!isCollapse && (
+        <Drawer
+          style={{ left: isDrawer ? 140 : 0, top:50 }}
+          destroyOnClose
+          title={<span style={{ fontWeight: 'bold', fontSize: 18 }}>全部功能</span>}
+          zIndex={19}
+          width={850}
+          className={'drawer_header_warp'}
+          placement="left"
+          onClose={onClose}
+          visible={isDrawer}
+        >
+         <DrawContent itemPath={itemPath} onClose={onClose} />
+        </Drawer>
+      )}
+    </div>
+  );
+});
+export default AllFunc;

package/src/components/Business/BsLayouts/Components/ChooseStore/index.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { Select, Form, Modal, Input, Radio, List } from 'antd';
+import { getStoreByName } from './services';
+import debounce from 'lodash/debounce';
+
+const debounceTimeout = 800;
+
+const ChooseStore = (props: any) => {
+  const { employeeCode } = props;
+  const plainOptions = ['UR', '本来'];
+  const name: any = localStorage.getItem('WARE_HOUSE_NAME');
+  const code: any = localStorage.getItem('WARE_HOUSE_CODE');
+
+  const fetchRef = useRef(0);
+
+
+  const [index, setIndex] = useState(-1);
+  const [value, setValue] = useState([{ label: name, value: code }]);
+  // const [ key, setKey ] = useState(undefined);
+  const [key, setKey] = useState<'UR' | 'BL' | undefined>(undefined);
+  const [openSelect, setOpenSelect] = useState(false);
+  const [options, setOptions] = useState<any[]>([]);
+  const [rescouse, setRescouse] = useState([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [store, setStore] = useState([{ label: name, value: code }]);
+
+  async function fetchUserList(storeName: any, init?: boolean) {
+    return getStoreByName({
+      orgName: storeName ? storeName : undefined,
+      platCompanyCode: init ? undefined : key,
+      'qp-employeeCode-eq': employeeCode || 'EMP231011000002',
+      'qp-orgViewCode-eq': 'business-organizational-view',
+    }).then((res) => {
+      const { data } = res;
+      if (data.code != '000000') {
+        return;
+      }
+      return data.data.map((item: any) => {
+        return {
+          label: item.orgName,
+          value: item.orgCode,
+          defaultOrg: item.defaultOrg,
+          platCompanyCode: item.platCompanyCode,
+        };
+      });
+    });
+  }
+
+  const debounceFetcher = useMemo(() => {
+    const loadOptions = (str: string) => {
+      fetchRef.current += 1;
+      const fetchId = fetchRef.current;
+      setOptions([]);
+      setRescouse([]);
+      fetchUserList(str).then((newOptions) => {
+        if (fetchId !== fetchRef.current) {
+          return;
+        }
+        setOptions(newOptions);
+        setRescouse(newOptions);
+      });
+    };
+
+    return debounce(loadOptions, debounceTimeout);
+  }, [debounceTimeout, key]);
+
+  const changeInput = async (str: string) => {
+    const res: any = await debounceFetcher(str);
+    setOptions(res);
+    setRescouse(res);
+  };
+
+  useEffect(() => {
+    (async () => {
+      const res: any = await fetchUserList(undefined, true);
+      res.map((item: any, indexNumber: number) => {
+        if (item.label === name) {
+          setIndex(indexNumber);
+        }
+        if (item.defaultOrg) {
+          if (name) {
+            return;
+          }
+          localStorage.setItem('WARE_HOUSE_NAME', item?.label);
+          localStorage.setItem('WARE_HOUSE_CODE', item?.value);
+          setValue([item]);
+        }
+      });
+      setOptions(res);
+      setRescouse(res);
+    })();
+  }, []);
+
+  return (
+    <div>
+      <Select
+        value={value}
+        style={{ width: 280, marginRight: 20 }}
+        open={false}
+        onClick={() => {
+          setOpenSelect(true);
+        }}
+      />
+
+      <Modal
+        open={openSelect}
+        onCancel={() => {
+          setOpenSelect(false);
+        }}
+        onOk={() => {
+          localStorage.setItem('WARE_HOUSE_NAME', store[0]?.label);
+          localStorage.setItem('WARE_HOUSE_CODE', store[0]?.value);
+          window.location.reload();
+        }}
+      >
+        <Form
+          style={{ height: 300, marginTop: 20 }}
+          labelCol={{ span: 3 }}
+          wrapperCol={{ span: 16 }}
+        >
+          <Form.Item label="品牌" name="brand">
+            <Radio.Group
+              options={plainOptions}
+              onChange={(item: any) => {
+                const str = item?.target?.value;
+                setKey(str === 'UR' ? 'UR' : 'BL');
+                if (str === 'UR') {
+                  const res: any = rescouse?.filter((current: any) => {
+                    return current.platCompanyCode === 'UR';
+                  });
+                  setOptions(res);
+                  setSearchValue('');
+                } else {
+                  const res: any = rescouse?.filter((current: any) => {
+                    return current.platCompanyCode === 'BL';
+                  });
+                  setOptions(res);
+                  setSearchValue('');
+                }
+              }}
+              optionType="button"
+              buttonStyle="solid"
+            />
+          </Form.Item>
+          <Form.Item
+            label="门店"
+            name="store"
+            rules={[{ required: true, message: '请选择门店' }]}
+          >
+            <Input
+              placeholder="输入门店名称"
+              value={searchValue}
+              onChange={(e) => {
+                changeInput(e.target.value);
+                setSearchValue(e.target.value);
+              }}
+            />
+            <div
+              style={{
+                height: 220,
+                overflowY: 'scroll',
+              }}
+            >
+              <List
+                dataSource={options}
+                bordered
+                renderItem={(item, indexNumber) => (
+                  <List.Item
+                    style={
+                      indexNumber === index ? {
+                        // opacity
+                        color: '#0047bb',
+                      } : {}
+                    }
+                    onClick={(current: any) => {
+                      // setValue([item]);
+                      setStore([item]);
+                      setIndex(indexNumber);
+                    }}
+                  >
+                    {item.label}
+                  </List.Item>
+                )}
+              />
+            </div>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default ChooseStore;

package/src/components/Business/BsLayouts/Components/ChooseStore/services.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// -- 查询店铺 -- 
+export async function getStoreByName(params: any) {
+  return request({
+    url: '/store-house/orgViewNode/listNoPage',
+    method: 'GET',
+    params: { ...params },
+  })
+}

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.less

@@ -0,0 +1,90 @@
+.setting_content>div {
+  width: 50%;
+  box-sizing: border-box;
+  // float: left;
+  margin: 0 10px;
+}
+
+.setting_content {
+  display: flex;
+}
+
+
+.tree_title {
+  height: 50px;
+}
+
+.tree_content {
+  height: 400px;
+  overflow: auto;
+  border: 1px solid #d9d9d9;
+  padding: 5px;
+}
+
+.setting_content::after {
+  clear: both;
+  display: block;
+  content: '';
+}
+
+.choosed_label_color {
+  color: #f50;
+}
+
+.left_tree_content {
+  .ant-tree .ant-tree-node-content-wrapper {
+    flex-grow: 1;
+    .ant-tree-title {
+      width: 100%;
+    }
+  }
+  .ant-tree .ant-tree-treenode {
+    width: 100%;
+  }
+}
+
+.right_tree_content, .left_tree_content {
+  .ant-tree .ant-tree-node-content-wrapper {
+    display: flex;
+    margin-left: -3px;
+  }
+  .ant-tree-checkbox {
+      top: auto;
+      top: initial;
+      // margin: 4px 3px 0 0 !important;
+  }
+}
+
+.node_title_content:hover {
+  .right_arrow {
+    display: block !important;
+  }
+}
+
+.right_arrow {
+  float: right;
+  display: none;
+  color: #999999;
+  margin-right: 10px;
+}
+
+
+
+.right_tree_content {
+  .ant-tree-title {
+    width: 100%;
+    display: inline-block;
+    padding-right: 10px;
+  }
+  .ant-dropdown-trigger {
+    color: gray !important;
+  }
+  .tree_node_title {
+    font-size: 20px;
+    color: #d9d9d9;
+    float: right;
+    span {
+      margin-right: 5px;
+    }
+  }
+}

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.tsx

@@ -0,0 +1,38 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import './index.less';
+import LeftTree from "./leftTree";
+import RightTree from "./rightTree";
+ 
+const MenuSetting = forwardRef(({actionRef, originRoutes, itemPath}: any, ref) => {
+
+  const [customerMenuData, setCustomerMenuData] = useState(
+    JSON.parse( localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]')
+  );
+
+  useImperativeHandle(ref, () => ({
+    saveMenuData: () => {
+      localStorage.setItem(`customerMenu_${itemPath}_front`, JSON.stringify(customerMenuData));
+      actionRef.current?.reload();
+    },
+  }));
+
+  return (
+    <div className={'setting_content'}>
+      <LeftTree
+        originRoutes={originRoutes}
+        customerMenuData={customerMenuData}
+        setCustomerMenuData={setCustomerMenuData}
+      />
+      <RightTree 
+        customerMenuData={customerMenuData}
+        setCustomerMenuData={setCustomerMenuData}
+      />
+    </div>
+  )
+})
+
+export default MenuSetting;