kn-cli 1.0.56 → 1.0.58

package/templates/template_oa/public/src/components/Nav/index.jsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+
+import { Menu, Spin } from 'antd';
+import {GET_LEFT_MENU} from '@/services/auth';
+
+import {
+  SettingOutlined,
+  HddOutlined,
+  ProfileOutlined,
+  FileTextOutlined,
+  LineChartOutlined,
+  FundViewOutlined,
+  ProjectOutlined,
+} from '@ant-design/icons';
+
+import styles from './index.less';
+
+
+
+export const LayoutByLeftNav = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [menuInfo, setMenuInfo] = useState([]);
+
+  useEffect(() => {
+    GET_LEFT_MENU().then((ret) => {
+      setMenuInfo(ret.info);
+      setLoading(false);
+    });
+  }, []);
+
+  function btnMenu(e) {
+    let link = e.item.props.link;
+    location.href = link;
+  }
+
+  function createMenu() {
+    let openSubs = [];
+    menuInfo.forEach((sub) => {
+      if (sub.children && sub.children.length > 0) {
+        // 强行就展开
+        openSubs.push(sub.menu_name);
+        // 如果当前选中的是子目录则展开父级目录
+        // for (let i = 0; i < sub.children.length; i++) {
+        //   if (props.selected.includes(sub.children[i].menu_name)) {
+        //     openSubs.push(sub.menu_name);
+        //     break;
+        //   }
+        // }
+      }
+    });
+
+    function getIcon(icon) {
+      switch (icon) {
+        case 'investproduct':
+          return <LineChartOutlined />;
+        case 'product':
+          return <HddOutlined />;
+        case 'manufacturer':
+          return <ProfileOutlined />;
+        case 'report':
+          return <FileTextOutlined />;
+        case 'system':
+          return <SettingOutlined />;
+        case 'ip_product':
+          return <FundViewOutlined />;
+        case 'ip_manage':
+          return <ProjectOutlined />;
+      }
+
+      return '';
+    }
+
+    return (
+      <section>
+        <Menu
+          selectedKeys={[props.selected]}
+          defaultOpenKeys={openSubs}
+          className={styles.nav}
+          mode='inline'
+          onClick={btnMenu}
+        >
+          {menuInfo.map((sub, subIdx) => {
+            return sub.children && sub.children.length > 0 ? (
+              <Menu.SubMenu key={sub.menu_name} icon={getIcon(sub?.icon)} title={sub.menu_name}>
+                {sub.children
+                  ? sub.children.map((menu, idx) => {
+                      return (
+                        <Menu.Item key={menu.menu_name} link={menu.link_path}>
+                          {menu.menu_name}
+                        </Menu.Item>
+                      );
+                    })
+                  : ''}
+              </Menu.SubMenu>
+            ) : (
+              <Menu.Item key={sub.menu_name} icon={getIcon(sub?.icon)} link={sub.link_path}>
+                {sub.menu_name}
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      </section>
+    );
+  }
+  
+  return (
+    <section
+      className={styles.wrap}
+    >
+      {loading ? (
+        <section className={styles.loadingWrap} >
+            <Spin />
+        </section>
+      ) : (
+        createMenu()
+      )}
+    </section>
+  );
+};
+
+export default LayoutByLeftNav;

package/templates/template_oa/public/src/components/Nav/index.less

@@ -0,0 +1,38 @@
+@import '~@/_variable.less';
+
+.wrap{
+  display: flex;
+  background:white;
+  margin-bottom: 20px;;
+  width: 160px;
+}
+
+.nav{
+  width: 160px;
+  padding: 20px 0px;
+  height:100%;
+  overflow: hidden;
+  overflow-y: auto;
+
+}
+
+.loadingWrap{
+  padding:60px;
+  width: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.contentWrap{
+  flex:1;
+  min-width: var(--min-width);
+  padding:10px;
+  overflow: auto;
+}
+.titleBar{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e8e8e8;
+}

package/templates/template_oa/public/src/components/Page/PageLoading/index.jsx

@@ -0,0 +1,30 @@
+import React,{useEffect, useState} from 'react';
+import ReactDOM from 'react-dom';
+import CSS from './index.less';
+import Popup from '@/components/Popup';
+import imgLoading from '@/assets/images/loading.svg';
+
+const PageLoading = (props) => {
+  const {visible=true} = props;
+  if(!visible){
+    return '';
+  }
+  return (
+    <div className={CSS.wrap } >
+      <div className={CSS.box} data-show={visible}>
+        <img src={imgLoading} />
+      </div>
+    </div>
+  );
+};
+
+export const ShowPageLoading=(props={canTouch:false})=>{
+  let popup = Popup(()=>{},{cantouch:props.canTouch});
+  ReactDOM.render(
+    <PageLoading visible={true} />,
+    popup.dom
+  );
+  return popup.destory;
+}
+
+export default React.memo(PageLoading);

package/templates/template_oa/public/src/components/Page/PageLoading/index.less

@@ -0,0 +1,29 @@
+.wrap {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box {
+
+  width: 80px;
+  height: 80px;
+  background: rgba(0,0,0,.3);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img{
+    display: block;
+    width:80%;
+  }
+  &[data-show=false]{
+    opacity: 0;
+  }
+}

package/templates/template_oa/public/src/components/Popup/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+styles;
+
+const Popup = (reslove,options) => {
+  let rootDom = document.createElement('div');
+  rootDom.className='popup-box';
+  if(options&&options.cantouch)rootDom.setAttribute('data-can-touch','1');
+  if(options&&options.transparent)rootDom.setAttribute('data-transparent','1');
+
+  let destory = (result) => {
+    ReactDOM.unmountComponentAtNode(rootDom);
+    rootDom.parentNode.removeChild(rootDom);
+    if (reslove) reslove(result);
+  };
+  document.body.appendChild(rootDom);
+  return { dom: rootDom, destory };
+};
+
+
+export default Popup;

package/templates/template_oa/public/src/components/Popup/index.less

@@ -0,0 +1,18 @@
+
+
+:global{
+  .popup-box{
+    position: absolute;
+    left:0;
+    top:0;
+    width:100%;
+    height:100%;
+    z-index: 99;
+    &[data-transparent]{
+      height:auto;
+    }
+    &[data-can-touch]{
+      pointer-events: none;
+    }
+  }
+}

package/templates/template_oa/public/src/components/Toast/index.jsx

@@ -0,0 +1,60 @@
+import React,{useEffect} from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+import Popup from '@/components/Popup/index.jsx';
+
+const toastList=[];
+const runNext=()=>{
+  let props = toastList[0];
+  if(props){
+    const {message,delay,resolve,position}=props;
+    let popup = Popup(resolve,{cantouch:true});
+    ReactDOM.render(
+      <Toast destory={popup.destory} message={message} delay={delay} position={position}/>,
+      popup.dom
+    );
+  }
+}
+
+const Toast=props=>{
+  const {
+    message,
+    delay=1000*2,
+    destory,
+    position='top'
+  }=props;
+  useEffect(()=>{
+    setTimeout(()=>{
+      destory();
+      toastList.shift();
+      runNext();
+    },delay);
+  },[])
+  const ANITYPE={
+    'center':'animate__slideInDown',
+    'top':'animate__slideInDown',
+    'bottom':'animate__slideInUp'
+  }
+  return (
+    <section className={styles.wrap} data-position={position}>
+      <div className={styles.content+ ` ${ANITYPE[position]} animate__animated animate__fast`} dangerouslySetInnerHTML={{ __html:message }}>
+      </div>
+    </section>
+  )
+}
+
+
+const ShowToast=props=>{
+  if(typeof props === 'string'){
+    props = {message:props}
+  }
+  return new Promise((resolve) => {
+    props.resolve = resolve;
+    toastList.push(props);
+    if(toastList.length===1){
+      runNext();
+    }
+  });
+}
+
+export default ShowToast;

package/templates/template_oa/public/src/components/Toast/index.less

@@ -0,0 +1,43 @@
+@import '~@/_variable.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index:var(--z-toast);
+  &[data-position=top]{
+    justify-content: flex-start;
+    padding-top:80px;
+  }
+  &[data-position=bottom]{
+    justify-content: flex-end;
+    padding-bottom:80px;
+  }
+  .content{
+    min-height:30px;
+    min-width:60px;
+
+    background: rgba(0,0,0,.8);
+    opacity:.8;
+    border-radius: var(--radius-default);
+    padding:var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.24);
+
+
+  }
+}

package/templates/template_oa/public/src/components/mask/index.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+import Popup from '@/components/Popup/index.jsx';
+
+
+const useToast = () => {
+
+  const ref = useRef();
+
+  const runNext = (props) => {
+    console.log(props.popup.dom);
+    ReactDOM.render(
+      <Toast {...props} />,
+      props.popup.dom
+    );
+  }
+
+  const Toast = ({ children }) => {
+    return (
+      <section className={styles.wrap}>
+        <div className={styles.content + `  animate__animated animate__fast`}>
+          {children}
+        </div>
+      </section>
+    )
+  }
+
+  const hiddenToast = () => {
+    ref.current.destory();
+  }
+  const showToast = props => {
+    props = { children: props }
+    return new Promise((resolve) => {
+      let popup = Popup(resolve);
+      ref.current = popup;
+      props.popup = popup;
+      runNext(props);
+    });
+  }
+  return {
+    showToast, hiddenToast
+  }
+
+}
+
+export default useToast;

package/templates/template_oa/public/src/components/mask/index.less

@@ -0,0 +1,32 @@
+@import '~@/_variable.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100vw;
+  height:100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 1000;
+  .content{
+    position: fixed;
+    left:0;
+    top:0;
+    width:100vw;
+    height:100vh;
+
+    background: rgba(0,0,0,.8);
+    padding:var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+}

package/templates/template_oa/public/src/dictionary/index.js

@@ -0,0 +1,39 @@
+
+import React, { useState, useEffect,useMemo} from 'react';
+import {GET_USER_TYPE} from '@/services/user';
+import {useDictionary} from 'kn-hooks';
+import ShowToast from '@/components/Toast';
+export const SelectOption=(props)=>{
+  const {value}=props;
+  const name = props['data-keyname'];
+  const onClick=(e)=>{
+    ShowToast(`点击option name=${name},value=${value},label=${props.children}`)
+    if(props.onClick)props.onClick();
+  }
+  return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
+}
+
+useDictionary.SetConfig({SelectOption})
+
+
+export const useUserType = useDictionary.createDictionary({
+  api:GET_USER_TYPE,
+  afterApi:(response)=>{
+    if(response?.code==0){
+      let req= response.data.map(item=>{
+        const  {label,value:id,key:name}=item;
+        return {label,id,name}
+      });
+      return req;
+    }
+    return [];
+  }
+});
+
+export const useTaskState= useDictionary.createDictionary({
+  defaultTypes:[
+    {label:'进行中',id:'1',name:'run'},
+    {label:'已完成',id:'5',name:'complete'},
+  ]
+});
+

package/templates/template_oa/public/src/hooks/index.jsx

@@ -0,0 +1,20 @@
+
+
+import useImageLoader from './useImageLoader';
+import useDelay from './useDelay';
+import usePreload from './usePreload';
+import useSearch from './useSearch';
+import useUpdate from './useUpdate';
+import useLoading from './useLoading';
+import {usePagination,usePaginationWithForm} from 'kn-hooks';
+
+export {
+  usePaginationWithForm,
+  usePagination,
+  useImageLoader,
+  useDelay,
+  usePreload,
+  useSearch,
+  useUpdate,
+  useLoading
+}

package/templates/template_oa/public/src/hooks/useDelay.jsx

@@ -0,0 +1,29 @@
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+const useDelay=()=>{
+  const [loading,setLoading] = useState(false);
+  const refSet = useRef();
+  refSet.current = setLoading;
+  useEffect(()=>{
+    refSet.current = setLoading;
+  },[setLoading]);
+
+  const actions=useMemo(()=>{
+    const wait=(ms)=>{
+      refSet.current(true);
+      return new Promise(res=>{
+        setTimeout(()=>{
+          refSet.current(false);
+          res();
+        }, ms);
+      })
+    }
+    return {
+      wait,
+      loading
+    };
+  },[loading]);
+  return actions;
+}
+
+export default useDelay;

package/templates/template_oa/public/src/hooks/useImageLoader.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect,useState,useMemo } from 'react';
+
+
+
+const useImageLoader=(img_src)=>{
+  const [src,setSrc] = useState('');
+  useEffect(() => {
+    if(img_src===src)return;
+    if(!img_src)return;
+    let img = new Image();
+    img.onload = () => {
+      setSrc(img_src);
+    };
+    img.onerror = () => {
+      setSrc('');
+      console.log(`图片加载失败:${img_src}`)
+    };
+    img.src = img_src;
+  }, [img_src]);
+
+  const actions=useMemo(()=>{
+    return src;
+  },[src]);
+  return actions;
+}
+
+export default useImageLoader;

package/templates/template_oa/public/src/hooks/useLoading.jsx

@@ -0,0 +1,42 @@
+import { useRef,useState, useEffect } from 'react';
+import {ShowPageLoading} from '@/components/Page/PageLoading';
+
+const useLoading=(props={})=>{
+  const {canTouch=false} = props;
+  const [name] = useState(props?.name||'loading')
+  const [count,setCount] = useState(props?.loading?1:0);
+  const refPageLoading = useRef();
+
+  const setLoading=(state)=>{
+    if(state){
+      setCount(v=>v+1);
+    }else{
+      setCount(v=>v-1);
+    }
+  }
+  const reset=()=>{
+    setCount(v=>0);
+  }
+  useEffect(()=>{
+    if(count > 0 ){
+      if(!refPageLoading.current){
+        refPageLoading.current = ShowPageLoading({canTouch:canTouch});
+      }
+    }else{
+      if(refPageLoading.current){
+        refPageLoading.current();//销毁
+        refPageLoading.current=null;
+      }
+    }
+  },[count])
+
+  
+  return {
+    name,
+    reset,
+    setLoading,
+    loading:count
+  }
+}
+
+export default useLoading;

package/templates/template_oa/public/src/hooks/useLogin.jsx

@@ -0,0 +1,33 @@
+
+
+import React, { useEffect, useState, useRef } from 'react';
+import {IS_LOGIN,SET_TOKEN,LOGIN} from '@/services/wish';
+import ShowLogin from '@/pages/components/dialog/alert/login';
+
+
+const useLogin=(props)=>{
+  const [isLogin,setLogin] = useState(IS_LOGIN());
+
+  const login=async ()=>{
+    if(IS_LOGIN()){
+      setLogin(true);
+      return true;
+    }else{
+      setLogin(false);
+      const phone = await ShowLogin();
+      if(phone){
+        const loginReq = await LOGIN({phone});
+        if(loginReq?.code==0){
+          SET_TOKEN(loginReq.data.api_token);
+          setLogin(IS_LOGIN());
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  return {login,isLogin}
+}
+
+export default useLogin;