@bit-sun/business-component 2.0.37 → 2.0.39-alpha.0

package/src/components/Business/BsLayouts/Components/RightContent/LoginModal.tsx

@@ -0,0 +1,85 @@
+// @ts-ignore
+import React from 'react';
+import { Form, Input, Button, Modal } from 'antd';
+import { handleAccountID, handleUserID } from '../../utils';
+import axios from 'axios';
+
+export default (props: any) => {
+  const { loginOut } = props;
+  const [form] = Form.useForm();
+  return (
+    <>
+      <Modal
+        {...props}
+        visible={props.visible}
+        onCancel={() => {
+          props.onCancel();
+        }}
+        footer={[
+          <Button onClick={() => props.onCancel()}>取消</Button>,
+          <Button
+            onClick={() => {
+              form.validateFields().then((res) => {
+                axios({
+                  url: `/bop/api/account/changePassWord/${handleAccountID()}`,
+                  method: 'patch',
+                  params: res,
+                }).then(res => {
+                  loginOut();
+                })
+              });
+            }}
+            type="primary"
+          >
+            确认
+          </Button>,
+        ]}
+      >
+        <Form
+          form={form}
+          name="login"
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 20 }}
+          initialValues={{
+            username: handleUserID(),
+          }}
+        >
+          <Form.Item label="账号" name="username">
+            <Input disabled />
+          </Form.Item>
+          <Form.Item
+            label="旧密码"
+            name="oldPassword"
+            rules={[{ required: true, message: '请输入您的旧密码' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+          <Form.Item
+            label="新密码"
+            name="newPassword"
+            help="密码最少要包含一个大写字母+一个小写字母+一个数字+一个特殊符号最少6位"
+            rules={[
+              { required: true, message: '请输入您的新密码' },
+              {
+                pattern:
+                  /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
+                message: '密码强度不够请重新输入',
+              },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            label="请确认密码"
+            name="confirmPassword"
+            help="请确认密码和第一次输入一致"
+            rules={[{ required: true, message: '请确认您的密码' }]}
+          >
+            <Input.Password />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};

package/src/components/Business/BsLayouts/Components/RightContent/home.less

@@ -0,0 +1,218 @@
+@import '~antd/es/style/themes/default.less';
+@import '~antd/dist/antd.less';
+
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.menu {
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.rcom_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: @pro-header-hover-bg;
+    }
+    .opened {
+      background: @pro-header-hover-bg;
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+  .ant-space-item {
+    margin: 0 10px 0 0;
+  }
+}
+
+.rcom_dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+  .ant-space-item {
+    margin: 0 10px 0 0;
+  }
+}
+
+.rcom_imgWap {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .rcom_headLine {
+    width: 1px;
+    height: 16px;
+    margin-right: 20px;
+    background: #cacaca;
+  }
+  img {
+    width: 22px;
+    height: 22px;
+    margin-right: 20px;
+  }
+}
+
+.rcom_userWarp {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 142px;
+  height: 35px;
+  margin-right: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  .rcom_l {
+    margin-left: 4px;
+    img {
+      margin-right: 0;
+      width: 36px;
+      height: 36px;
+    }
+  }
+  .rcom_c {
+    display: flex;
+    flex-direction: column;
+
+    .rcom_ct {
+      color: #000000;
+      font-weight: 500;
+      font-size: 12px;
+      font-family: Montserrat, Montserrat-Medium;
+      line-height: 14px;
+      text-align: left;
+    }
+
+    .rcom_cb {
+      color: #bfbfbf;
+      font-weight: 400;
+      font-size: 10px;
+      font-family: Montserrat, Montserrat-Regular;
+      line-height: 14px;
+      text-align: left;
+    }
+  }
+  .rcom_r {
+    margin-right: 9px;
+  }
+}
+
+.rcom_.userWarp:hover,
+.rcom_c:hover,
+.rcom_l:hover,
+.rcom_r:hover {
+  cursor: pointer;
+}
+
+.userDownWarp {
+  width: 217px;
+  // height: 310px;
+  margin-top: 4px;
+  background: #ffffff;
+  box-shadow: 0px 2px 4px 0px rgba(185, 185, 185, 0.5);
+
+  .userDownTop {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 155px;
+    padding: 20px 0;
+    border-bottom: 1px solid #d9d9d9;
+
+    .userDownTopT {
+      width: 68px;
+      height: 68px;
+      border-radius: 50%;
+    }
+    .userDownTopC {
+      color: #000000;
+      font-weight: 500;
+      font-size: 14px;
+      font-family: Montserrat, Montserrat-Medium;
+      line-height: 26px;
+      text-align: center;
+    }
+    .userDownTopB {
+      color: #bfbfbf;
+      font-weight: 400;
+      font-size: 12px;
+      font-family: Montserrat, Montserrat-Regular;
+      line-height: 15px;
+      text-align: center;
+    }
+  }
+
+  .userDownB {
+    .userDownBList,
+    .userDownOut {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      background: #ffffff;
+      border-bottom: 1px solid #f3f3f3;
+
+      .rcom_label {
+        margin: 0 4px 0 20px;
+        img {
+          width: 16px;
+
+          height: 16px;
+        }
+      }
+      .rcom_name {
+        color: #000000;
+        font-weight: 400;
+        font-size: 12px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        line-height: 16px;
+        text-align: left;
+      }
+    }
+
+    .userDownBList:hover,
+    .userDownOut:hover {
+      cursor: pointer;
+    }
+
+    .userDownOut {
+      height: 46px;
+      border-bottom: none;
+      .rcom_name {
+        color: #fe0300;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,156 @@
+
+// @ts-nocheck
+import { Dropdown, message, Modal } from 'antd';
+import React, { useState } from 'react';
+import { history, useModel } from 'umi';
+import './home.less';
+import Morentouxiang from '../../../../../assets/morentouxiang-32.svg';
+import Morentouxiang32 from '../../../../../assets/32.svg';
+import Out from '../../../../../assets/xinglan-icon-out.png';
+import { outLogin } from '../../service';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { handleUserName, handleUserPhone, setLoginOutPath } from '../../utils';
+import LoginModal from './LoginModal';
+import ENUM from '@/utils/enumConfig';
+
+export type SiderTheme = 'light' | 'dark';
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+};
+
+const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
+  const { initialState } = useModel('@@initialState');
+
+  if (!initialState || !initialState.settings) {
+    return null;
+  }
+
+  const [loginModalParams, setLoginModalParams]: any = useState({
+    visible: false,
+    width: '680px',
+    title: '修改密码',
+    onCancel: () => {
+      setLoginModalParams({ ...loginModalParams, visible: false });
+    },
+  });
+  const { navTheme, layout } = initialState.settings;
+  let className = 'rcom_right';
+
+  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
+    className = `${'rcom_right'}  ${'rcom_dark'}`;
+  }
+
+  const divStyle = (): React.CSSProperties => ({
+    gap: '20px',
+  });
+
+  const loginOutConfirm = () => {
+    Modal.confirm({
+      title: '退出确认',
+      icon: <ExclamationCircleOutlined />,
+      content: '确定要退出系统吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        loginOut();
+      },
+    });
+  };
+
+  const loginOut = async () => {
+    const resposne = await JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.USER_INFO) || '{}');
+    const sessionId = resposne?.sessionId || '';
+    await outLogin({ sessionId: sessionId });
+    // @ts-ignore
+    if (BUILD_TYPE) {
+      message.success('退出登录成功');
+      history.replace({
+        pathname: '/user/login',
+      });
+    } else {
+      setLoginOutPath()
+    }
+  };
+
+  const menus = (
+    <div className={'userDownWarp'}>
+      <div className={'userDownTop'}>
+        <div className={'userDownTopT'}>
+          <img style={{ width: 68, height: 68 }} src={Morentouxiang32} />
+        </div>
+        <div className={'userDownTopC'}>{handleUserName()}</div>
+        <div className={'userDownTopB'}>{handleUserPhone()}</div>
+      </div>
+      <div className={'userDownB'}>
+        {/* <div
+          className={'userDownBList'}
+          onClick={(e: any) => {
+            setLoginModalParams({
+              ...loginModalParams,
+              visible: true,
+              loginOut,
+            });
+            e.preventDefault();
+          }}
+        >
+          <div className={'rcom_label'}>
+            <img src={Sett}></img>
+          </div>
+          <div className={'rcom_name'}>修改密码</div>
+        </div> */}
+        <div
+          className={'userDownOut'}
+          onClick={(e: any) => {
+            loginOutConfirm();
+            e.preventDefault();
+          }}
+        >
+          <div className={'rcom_label'}>
+            <img src={Out}></img>
+          </div>
+          <div className={'rcom_name'}>退出登录</div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={className} style={divStyle()}>
+      <div className={'rcom_imgWap'}>
+        {/* <Tooltip placement="bottom" title={'全局控制台'}>
+          <img
+            className={'rcom_img'}
+            onClick={() => {
+              window.location.href = '/';
+            }}
+            src={Kongzhi}
+          ></img>
+        </Tooltip>
+        <div className={'rcom_headLine'}></div> */}
+        {/* <img className={'rcom_img'} src={Bangzhu}></img> */}
+        {/* <img className={'rcom_img'} src={Xiaoxi}></img> */}
+        {/* <div className={'rcom_headLine'}></div> */}
+        <Dropdown overlay={menus} trigger={['click']}>
+          <div className={'rcom_userWarp'}>
+            <div className={'rcom_l'}>
+              <img src={Morentouxiang} />
+            </div>
+            <div className={'rcom_c'}>
+              <div className={'rcom_ct'}>{handleUserName()}</div>
+              <div className={'rcom_cb'}>{handleUserPhone()}</div>
+            </div>
+            <div className={'rcom_r'}>
+              <img style={{marginRight: '0px'}} src='./xialajiantou-new.svg' />
+            </div>
+          </div>
+        </Dropdown>
+      </div>
+
+      {/* 修改秘密 */}
+      {loginModalParams.visible && (
+        <LoginModal {...loginModalParams}></LoginModal>
+      )}
+    </div>
+  );
+};
+export default GlobalHeaderRight;

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

@@ -0,0 +1,162 @@
+@import '~antd/es/style/themes/default.less';
+@import '~antd/dist/antd.less';
+
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.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: @pro-header-hover-bg;
+    }
+    .opened {
+      background: @pro-header-hover-bg;
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+}
+
+.allFunsList {
+  margin-bottom: 10px;
+}
+
+.isClons {
+  position: relative;
+  left: -8px;
+  width: 30px;
+  height: 36px;
+}
+
+.notClons {
+}
+
+.drawerWarp {
+  column-count: 3;
+}
+
+.allFunsListWarp {
+  width: 200px;
+  margin-right: 10px;
+  background: #f8f9fa;
+  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;
+}
+
+.searchTop {
+  display: flex;
+  align-items: center;
+}
+.searchTopInp {
+  width: 528px;
+  height: 40px;
+  background: #f8f9fa;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+
+  .ant-input {
+    background: #f8f9fa;
+  }
+}
+.searchTopBtn {
+  position: relative;
+  left: -1px;
+  width: 92px;
+  height: 40px;
+  background: #005cff;
+  border-radius: 0px 4px 4px 0px;
+}
+
+
+.contentWarp {
+  margin-top: 54px;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  color: #8c8c8c;
+}
+
+.themeColor {
+  color: #005CFF;
+}
+
+.serachView{
+  margin-top: 36px;
+  margin-bottom: 32px;
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 20px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #000000;
+    background: #f8f9fa;
+    border-radius: 100px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  div:hover {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { Button, Drawer, Input, } from 'antd';
+import React, { useRef, useState } from 'react';
+import './index.less';
+export type SiderTheme = 'light' | 'dark';
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+};
+import { history } from 'umi';
+import {
+  searchMenuData,
+} from '../../utils';
+
+const AllFunc: React.FC<GlobalHeaderRightProps> = (props: any) => {
+
+  const [keyWard, setKeyWord]: any = useState('');
+  const [routesData, setroutesData]: any = useState([]);
+  const menuData = JSON.parse(localStorage.getItem(`customerMenu_${props.itemPath}_front`) || '[]');
+
+  const onClose = () => {
+    props.onClose();
+  };
+
+  const inputRef: any = useRef("")
+
+  return (
+    <>
+      <Drawer
+        {...props}
+        destroyOnClose
+        zIndex={19}
+        style={{ left: props.visible ? 140 : 0, color: '#000' }}
+        title={<span style={{ fontWeight: 'bold', fontSize: 18 }}>{props.title}</span>}
+        placement="left"
+        onClose={onClose}
+      >
+        <div>
+          <div className={'searchTop'}>
+            <Input placeholder='请搜索'
+              onKeyDown={(e: any) => {
+                if (e.keyCode === 13) {
+                  searchMenuData(menuData, inputRef.current.input.value, setroutesData)
+                  setKeyWord(inputRef.current.input.value)
+                }
+              }}
+              allowClear
+              ref={inputRef}
+              className={'searchTopInp'}></Input>
+            <Button style={{height: '40px'}} onClick={() => {
+              searchMenuData(menuData, inputRef.current.input.value, setroutesData);
+              setKeyWord(inputRef.current.input.value)
+
+            }} type="primary" className={'searchTopBtn'}>
+              搜索
+            </Button>
+          </div>
+          <div className={'contentWarp'}>
+            <div> 搜索“ {keyWard}”，共收到  <span className={'themeColor'}>{routesData.length || 0}</span> 条结果 </div>
+            <div className={'serachView'}>您是否要搜索...</div>
+          </div>
+          <div className={'content'}>
+            {
+              routesData.map((item: any) => (
+                <div onClick={() => {
+                  history.push(item.path)
+                  onClose()
+                }} key={item.path}>{item.name}</div>
+              ))
+            }
+          </div>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+export default AllFunc;