Merge branch 'main' of http://git.xlyprint.cn/zhangz/xlyUmi into main

陈鑫涛
2 parents 0cfa5749 8ae71a67
Showing 9 changed files with 383 additions and 20 deletions
src/components/Common/PersonCenter/PersonCenter.js
src/components/Common/PersonCenter/SkinChangeModal.js
src/components/Common/PersonCenter/SwitchCompanyAndLanguage/index.js
src/components/Common/PersonCenter/SwitchCompanyAndLanguage/index.less
src/components/login/Login.css
src/components/login/Login.js
src/global.less
src/routes/indexPage.js
src/skinchange.less
@@ -30,8 +30,9 @@ import OnlineUser from &#39;@/assets/onlineUser.svg&#39;;
 // import StaticEditTable from '@/components/Common/CommonTable';
 import * as commonServices from '@/services/services';
 import commonConfig from '../../../utils/config';
-// import SkinChangeModal from './SkinChangeModal';
+import SkinChangeModal from './SkinChangeModal';
 import MenuSearchPopovor from './MenuSearchPopovor';
+import SwitchCompanyAndLanguage from './SwitchCompanyAndLanguage';
 const { TabPane } = Tabs;
 const FormItem = Form.Item;
@@ -383,7 +384,7 @@ class PersonCenter extends Component {
     const { menuPanel, onAddPane, app } = this.props;
     return (
       <div className={styles.dropdownContainer} id="pcDropdwonContainer">
-        <Space align="baseline">
+        <Space align="baseline" style={{ display: 'flex', alignItems: 'center' }}>
           <div style={{ display: 'none' }} className={styles.dropdownDiv}>{companyName}</div>
           <div
             className="sysSearchInput"
@@ -417,6 +418,7 @@ class PersonCenter extends Component {
               />
             </Popover>
           </div>
+          <SwitchCompanyAndLanguage {...props} />
           <div
             className="sysNewBox"
             onFocus={() => 0}
 /* eslint-disable */
 import React, { useEffect, useRef, useState } from "react";
 import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
-import styles from "@/routes/IndexPage.less";
+import styles from "@/routes/indexPage.less";
 const skinList = [
   {
+/* eslint-disable */
+import React, { useEffect, useState } from "react";
+import { Button, Dropdown, Spin } from "antd";
+import { DownOutlined, LoadingOutlined } from "@ant-design/icons";
+import * as commonServices from "@/services/services";
+import commonConfig from "@/utils/config";
+import * as commonFunc from "@/components/Common/commonFunc";
+import * as commonUtils from "@/utils/utils";
+import styles from "./index.less";
+
+const SwitchCompanyAndLanguageEvent = props => {
+  const { app } = props;
+  const { token, userinfo } = app;
+
+  const addState = {};
+  const [state, setState] = useState({ language: userinfo.sLanguage === "sChinese" ? "中文" : "EN" });
+
+  useEffect(() => {
+    const getComponyList = async () => {
+      const dataUrl = `${commonConfig.server_host}brand/getBrand/${userinfo.sId}`;
+
+      const dataReturn = (await commonServices.getService(token, dataUrl)).data;
+      if (dataReturn.code === 1) {
+        const companyList = dataReturn.dataset.rows[0];
+        setState(pre => ({ ...pre, companyList, companyData: companyList.find(item => item.sSubsidiaryId === userinfo.sSubsidiaryId) }));
+        setTimeout(() => {
+          const resizeEvent = new Event("resize");
+          window.dispatchEvent(resizeEvent);
+        }, 1000);
+      }
+    };
+
+    getComponyList();
+  }, []);
+
+  addState.onChangeCompany = async item => {
+    if (item.sSubsidiaryId === state.companyData.sSubsidiaryId) return;
+
+    setState(pre => ({ ...pre, companyLoading: true }));
+    const dataUrl = `${commonConfig.server_host}brand/changeBrand`;
+    const conditions = {
+      sBrandsId: item.sBrandsId,
+      sSubsidiaryId: item.sSubsidiaryId,
+    };
+    const dataReturn = (await commonServices.postValueService(token, conditions, dataUrl)).data;
+    if (dataReturn.code === 1) {
+      setState(pre => ({ ...pre, companyData: item }));
+      const { token, systemData, rxtx, commonConst, gdslogininfo: userinfo, auxiliaryQty, footer, logoImageInfo, isInitPassword } = {
+        ...app,
+        ...dataReturn.dataset.rows[0],
+      };
+
+      const decimals = {};
+      if (commonUtils.isNotEmptyArr(systemData)) {
+        const dNetPrice = systemData.filter(item => item.sName === "NetPrice")[0];
+        const dNumAlign = systemData.filter(item => item.sName === "CkxNumAlign")[0];
+        decimals.dNetPrice = Number(dNetPrice.sValue);
+        decimals.dNetMoney = 2;
+        decimals.dNumAlign = dNumAlign !== undefined && dNumAlign.sValue !== undefined ? dNumAlign.sValue : 0;
+      }
+
+      props.dispatch({
+        type: "login/login",
+        payload: {
+          token,
+          rxtx,
+          commonConst,
+          userinfo,
+          auxiliaryQty,
+          dispatch: props.dispatch,
+          systemData,
+          decimals,
+          dateFormat: commonFunc.getDateFormat(systemData),
+          footer,
+          logoImageInfo,
+          isInitPassword,
+          bChangeLanguage: true,
+        },
+      });
+
+      setTimeout(() => {
+        commonUtils.clearStoreDropDownData();
+        commonUtils.clearFormStoreDropDownData();
+        window.xlyReload();
+      }, 1000);
+    }
+
+    setState(pre => ({ ...pre, companyLoading: false }));
+  };
+
+  addState.onChangeLanguage = async () => {
+    setState(pre => ({ ...pre, btnLoading: true }));
+    const dataUrl = `${commonConfig.server_host}brand/changeLanguage`;
+    const { language } = state;
+
+    const dataReturn = (await commonServices.postValueService(token, { sLanguage: language === "中文" ? "sEnglish" : "sChinese" }, dataUrl)).data;
+    if (dataReturn.code === 1) {
+      setState(pre => ({ ...pre, language: language === "中文" ? "EN" : "中文" }));
+      const { token, systemData, rxtx, commonConst, gdslogininfo: userinfo, auxiliaryQty, footer, logoImageInfo, isInitPassword } = {
+        ...app,
+        ...dataReturn.dataset.rows[0],
+      };
+
+      const decimals = {};
+      if (commonUtils.isNotEmptyArr(systemData)) {
+        const dNetPrice = systemData.filter(item => item.sName === "NetPrice")[0];
+        const dNumAlign = systemData.filter(item => item.sName === "CkxNumAlign")[0];
+        decimals.dNetPrice = Number(dNetPrice.sValue);
+        decimals.dNetMoney = 2;
+        decimals.dNumAlign = dNumAlign !== undefined && dNumAlign.sValue !== undefined ? dNumAlign.sValue : 0;
+      }
+
+      props.dispatch({
+        type: "login/login",
+        payload: {
+          token,
+          rxtx,
+          commonConst,
+          userinfo,
+          auxiliaryQty,
+          dispatch: props.dispatch,
+          systemData,
+          decimals,
+          dateFormat: commonFunc.getDateFormat(systemData),
+          footer,
+          logoImageInfo,
+          isInitPassword,
+          bChangeLanguage: true,
+        },
+      });
+
+      setTimeout(() => {
+        commonUtils.clearStoreDropDownData();
+        commonUtils.clearFormStoreDropDownData();
+        window.xlyReload();
+      }, 1000);
+    }
+
+    setState(pre => ({ ...pre, btnLoading: false }));
+  };
+
+  return {
+    ...props,
+    ...addState,
+    ...state,
+  };
+};
+
+const SwitchCompanyAndLanguage = baseProps => {
+  const props = SwitchCompanyAndLanguageEvent(baseProps);
+  return (
+    <div className={styles.switchCompanyAndLanguage}>
+      <CompanyComponent {...props} />
+      {/* <LanguageComponent {...props} /> */}
+    </div>
+  );
+};
+
+const CompanyComponent = props => {
+  const { companyList = [], companyData = {}, companyLoading = false } = props;
+
+  const bMutiLine = companyData.sName?.includes("-");
+  const sName0 = bMutiLine ? companyData.sName.split("-")[0] : "";
+  const sName1 = bMutiLine ? companyData.sName.split("-")[1] : "";
+  return (
+    !!companyList.length && (
+      <Dropdown
+        trigger={["click"]}
+        menu={{
+          items: companyList.map(item => ({
+            ...item,
+            key: item.sId,
+            label: item.sName,
+            onClick: props.onChangeCompany.bind(this, item),
+          })),
+        }}
+      >
+        <Spin
+          spinning={companyLoading}
+          indicator={
+            <LoadingOutlined
+              style={{
+                fontSize: 24,
+              }}
+              spin
+            />
+          }
+        >
+          <div className="company">
+            {bMutiLine ? (
+              <div className="companyMutiLine">
+                <div>{sName0}</div>
+                <div>{sName1}</div>
+              </div>
+            ) : (
+              <span>{companyData.sName}</span>
+            )}
+            <DownOutlined />
+          </div>
+        </Spin>
+      </Dropdown>
+    )
+  );
+};
+
+const LanguageComponent = props => {
+  const { language, btnLoading } = props;
+  return (
+    <div className="language">
+      {btnLoading ? (
+        <LoadingOutlined style={{ fontSize: 16 }} />
+      ) : (
+        <Button type="link" onClick={props.onChangeLanguage}>
+          {language}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SwitchCompanyAndLanguage;
+.switchCompanyAndLanguage {
+  width: auto;
+  height: 100%;
+  display: flex;
+
+  :global {
+    .company {
+      width: auto;
+      height: 100%;
+      white-space: nowrap;
+      // margin-right: 10px;
+      cursor: pointer;
+      display: flex;
+      gap: 5px;
+
+      .companyMutiLine {
+        width: auto;
+        height: 100%;
+
+        >div {
+          width: auto;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        >div:first-child {
+          font-size: 12px;
+        }
+      }
+
+      span {
+        font-size: 13px !important;
+      }
+    }
+
+    .language {
+      width: auto;
+      height: 100%;
+
+      button {
+        width: 25px;
+        padding: 0;
+        color: #FFF;
+        font-size: 13px;
+
+        &:hover {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+}
 \ No newline at end of file
@@ -28,6 +28,7 @@
   line-height: 36px;
   font-weight: 700;
   color: #eda716;
+  margin: 0.67em 0 !important;
 }
 .header .logo h1 span {
@@ -110,7 +111,7 @@
 .loginForm_mode{
   position: absolute;
   width: 330px;
-  height: 380px;
+  height: 320px;
   padding: 0 27px;
   /*top: 2%;*/
   right: 5%;
@@ -121,7 +122,7 @@
   box-shadow: 2px 2px 3px rgba(214, 214, 214, .9);
 }
 .loginForm_face{
-  height: 487px;
+  height: 437px;
 }
 .loginForm_face .normalLogin{
@@ -138,7 +139,7 @@
 }
 .loginMiddle {
-  height: 195px;
+  height: 125px;
 }
 .loginTip {
@@ -3,20 +3,14 @@ import { LockOutlined, UserOutlined } from &#39;@ant-design/icons&#39;;
 import { Form } from '@ant-design/compatible';
 import '@ant-design/compatible/assets/index.css';
 import { Input, Button, Select, message, Radio } from 'antd-v4';
-import { FloatButton } from 'antd';
-import commonConfig from '../../utils/config';
-import * as commonServices from '../../services/services';
-import * as commonFunc from '../../components/Common/commonFunc';
+import commonConfig from '@/utils/config';
+import * as commonServices from '@/services/services';
+import * as commonFunc from '@/components/Common/commonFunc';
 import logo from '@/assets/foot_logo.png';
-import * as commonUtils from '../../utils/utils';
+import * as commonUtils from '@/utils/utils';
 import styles from './Login.css';
 import FaceDetect from '../FaceDetect';
-
-const AppComponent = () => {
-  return <FloatButton/>
-}
-
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -370,7 +364,6 @@ class LoginForm extends Component {
     return (
       <div className={styles.wraper}>
-        <AppComponent />
         <div className={styles.header}>
           <div className={styles.logo}>
             <h1>{XiaoLingYang}<span>{WelcometoERP}</span></h1>
@@ -416,14 +409,14 @@ class LoginForm extends Component {
                 {/*    rules: [{ required: true, message: pleaseInputPassword }],*/}
                 {/*  })(<Input className={styles.loginInput} size="large" prefix={<LockOutlined className={styles.loginIcon} />} type="password" placeholder={pleaseInputPassword} />)}*/}
                 {/*</FormItem>*/}
-                <FormItem className={styles.loginTip}>
+                {/* <FormItem className={styles.loginTip}>
                   <div className={styles.loginSelect}>
                     {getFieldDecorator('companys', {
                       initialValue: companysId,
                       rules: [{ required: true, message: chooseBranchCompany }],
                     })(<Select placeholder={chooseBranchCompany} size="large" dropdownStyle={dropdownStyle} onSelect={this.handleSelect}>{options}</Select>)}
                   </div>
-                </FormItem>
+                </FormItem> */}
               </div>
               <FormItem className={styles.loginBottom}>
                 <Button type="primary" htmlType="submit" className={styles.loginButton} loading={loginLoading}>
@@ -2,6 +2,7 @@
 @import "./index.less";
 @import "./default.less";
 @import "./variable.less";
+@import "./skinchange.less";
 .ant-card-head {
   border-bottom: 1px solid #d9d9d9;
+import { useEffect, useState } from 'react';
 import { connect } from 'umi';
 import { ConfigProvider, Layout } from 'antd-v4';
 import zhCN from 'antd-v4/lib/locale-provider/zh_CN';
@@ -11,9 +12,17 @@ import styles from &#39;./indexPage.less&#39;;
 const { Header, Content } = Layout;
 function IndexPage() {
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    window.xlyReload = () => {
+      setKey(pre => pre + 1);
+    };
+  }, []);
+
   return (
     <ConfigProvider locale={zhCN}>
-      <Layout>
+      <Layout key={key}>
         <Header className={styles.header}>
           <div className={styles.headerRight}>
             <div className={styles.personCenter}>
+:root {
+  body[data-skin=default] {
+    --xly-skin-header-color: #383d41; // 顶部导航栏背景色
+    --xly-skin-menu-color: #343848; // 左侧一级菜单背景色
+    --xly-skin-menu-span-color: #ccd6df; // 菜单字体色
+    --xly-skin-submenu-color: #303538; // 展开后二级菜单背景色
+    --xly-skin-active-color: #1890FF; // 激活色
+    --xly-skin-modal-bg-color: #646464; // modal弹窗header背景色
+  }
+
+  body[data-skin=color1] {
+    --xly-skin-header-color: #6e5064;
+    --xly-skin-menu-color: #b482a4;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #7c5a71;
+    --xly-skin-active-color: #84c015;
+    --xly-skin-modal-bg-color: #6e5064;
+  }
+
+  body[data-skin=color2] {
+    --xly-skin-header-color: #0010fc;
+    --xly-skin-menu-color: #515bf3;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #656ab3;
+    --xly-skin-active-color: #dd8547;
+    --xly-skin-modal-bg-color: #0010fc;
+  }
+
+  body[data-skin=color3] {
+    --xly-skin-header-color: #433598;
+    --xly-skin-menu-color: #7160d5;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #624fce;
+    --xly-skin-active-color: #dd8547;
+    --xly-skin-modal-bg-color: #433598;
+  }
+
+  body[data-skin=color4] {
+    --xly-skin-header-color: #e1408e;
+    --xly-skin-menu-color: #c56f98;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #cd5790;
+    --xly-skin-active-color: #03bcff;
+    --xly-skin-modal-bg-color: #e1408e;
+  }
+
+  body[data-skin=color5] {
+    --xly-skin-header-color: #f46b5f;
+    --xly-skin-menu-color: #e69892;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #c6655e;
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #f46b5f;
+  }
+
+  body[data-skin=color6] {
+    --xly-skin-header-color: #fa375c;
+    --xly-skin-menu-color: #eb8498;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #cc576f;
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #fa375c;
+  }
+
+  body[data-skin=color7] {
+    --xly-skin-header-color: #6f41ed;
+    --xly-skin-menu-color: #8b70d5;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: rgb(76, 82, 169);
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #6f41ed;
+  }
+
+  body[data-skin=color8] {
+    --xly-skin-header-color: #fd4138;
+    --xly-skin-menu-color: #e3736e;
+    --xly-skin-menu-span-color: #FFF;
+    --xly-skin-submenu-color: #c3514b;
+    --xly-skin-active-color: #cdd32b;
+    --xly-skin-modal-bg-color: #fd4138;
+  }
+}
 \ No newline at end of file