kn-cli 1.0.131 → 1.0.133

package/templates/template_admin_antd5/public/src/hooks/useTableRowSelect.jsx

@@ -0,0 +1,310 @@
+
+
+
+// @ts-ignore
+import React,{ useState,useMemo,useRef, useEffect } from 'react';
+// @ts-ignore
+import {Checkbox,message} from "@/components/antd";
+
+
+/**
+ * @typedef {object} UseTableRowSelect
+ * @property {(item:object|object[],isChecked:boolean)=>void} onSelect - 当有行选中时
+ * @property {(selected:string[],rows:object[],changes:object[])=>void} onSelectAll - 当有行选中时
+ * @property {()=>void} clear - 清空所有选项
+ * @property {string[]} checked - 当前选中的行key值
+ * @property {object[]} checkedItems - 当前选中的对象
+ * @property {boolean} checkStrictly - false:父子关联,true:父子不关联
+ * @property {(mode:string)=>void} setMode - 设置当前模式
+ * @property {string} mode - 当前模式 ''普通，'search'过滤模式
+ * @property {Function} renderCell - 自定义选中按钮的渲染
+ * 
+ */
+
+const Mode={
+  Default:'',
+  Search:'search'
+}
+
+/**
+ * 管理Table组件的跨分页行选中状态数据
+ * @param {object} [params]
+ * @param {string[]} [params.defaultValue]  - 默认选中的key值列表
+ * @param {object[]} [params.defaultValueItems] - 默认选中的所有对象
+ * @param {boolean} [params.checkStrictly=false]  - 是否关闭父子节点关联,false=父子关联,true=父子不关联
+ * @param {number} [params.maxCount] - 最多选择数量
+ * @param {string} [params.rowKey='id'] - 主键的key值
+ * @param {boolean} [params.isRadio=false] - 是否是radio模式
+ * @param {(values:string[],items:object[],type:string)=>void} [params.onChange] - 变化回调
+ * 
+ * @returns {UseTableRowSelect}
+ */
+const useTableRowSelect=(params={})=>{
+  const {defaultValue,defaultValueItems,checkStrictly:_checkStrictly=false,maxCount,rowKey='id',isRadio=false,onChange} = params;
+  /**
+   * @type {*}
+   */
+  const refSelf = useRef();
+  const [checked,setChecked]= useState([]);
+  const [checkedItems,setCheckedItems]= useState([]);
+
+  const [mode,setMode] = useState('');//过滤模式判断
+  const [checkStrictly]=useState(_checkStrictly)
+  const [lastSelectType,setLastSelectType] = useState('');
+  const [init,setInit] = useState(0);
+
+  const _onSelect=(keys,items)=>{
+    let error = null;
+    if(isRadio){
+      if(keys[0]){
+        setChecked([keys[0]]);
+        setCheckedItems([items[0]]);
+        if(onChange)onChange([keys[0]],[items[0]],'add');
+        return;
+      }
+    }
+    let addKeys=[];
+    let addItems=[];
+    keys.forEach((key,idx)=>{
+      if(checked.includes(key)==false){
+        if(maxCount!=undefined && maxCount > 0 && checked.length >= maxCount){
+          error=`已选择最大数量${maxCount}个`;
+          return;
+        }
+        addKeys.push(key);
+        addItems.push({...items[idx]});
+        checked.push(key);
+        checkedItems.push({...items[idx]})
+      }
+    })
+    if(error){
+      message.error(error);
+    }
+    setLastSelectType('add');
+    setChecked([...checked]);
+    setCheckedItems([...checkedItems]);
+    if(onChange)onChange(addKeys,addItems,'add');
+  }
+
+  const _onUnSelect=(keys)=>{
+    let removeKeys=[];
+    let removeItems=[];
+    keys.forEach(key=>{
+      const idx = checked.indexOf(key);
+      if( idx >= 0 ){
+        removeKeys.push(checked[idx]);
+        checked.splice(idx,1)
+        if(checkedItems[idx]){
+          removeItems.push(checkedItems[idx]);
+          checkedItems.splice(idx,1);
+        }
+      }
+    })
+    setLastSelectType('remove');
+    setChecked([...checked]);
+    setCheckedItems([...checkedItems]);
+    if(onChange)onChange(removeKeys,removeItems,'remove');
+
+  }
+  const clear=()=>{
+    let removeKeys=[...checked];
+    let removeItems=[...checkedItems];
+    setLastSelectType('remove');
+    setChecked([])
+    setCheckedItems([]);
+    if(onChange)onChange(removeKeys,removeItems,'remove');
+  }
+  
+  /**
+   * 遍历当前节点与之相关的父子所有节点
+   * @param {object} record 
+   * @param {boolean} isChecked 
+   * @returns {{keys:string[],items:object[]}}
+   */
+  const getAllKeys = (record,isChecked,_checked)=>{
+    let keys=[];
+    let items=[];
+    keys.push(record[rowKey]);
+    items.push(record);
+    // 选中父级，则子级全部选中
+    if(record.children && record.children.length>0){
+      record.children.forEach(child=>{
+        let childs = getAllKeys(child,isChecked,[...keys,..._checked]);
+        keys = [...keys,...childs.keys]
+        items = [...items,...childs.items]
+      })
+    }
+    // 父子关联计算
+    if(checkStrictly==false&&mode != Mode.Search){
+      const getParentKeys=(record,isChecked)=>{
+        let keys=[];
+        let items=[];
+        if(record.parent && record.parent?.children?.length>0){
+          if(isChecked){
+            // 父节点下所有子节点都选中的话，父节点也默认选中
+            const every = record.parent.children.every(child=>{ 
+              if(child[rowKey]==record[rowKey]){
+                return true;
+              }
+              if(isChecked){
+                return _checked.includes(child[rowKey]);
+              }
+              return _checked.includes(child[rowKey])==false;
+            });
+            if(every){
+              keys.push(record.parent[rowKey])
+              items.push(record.parent);
+  
+              if(record.parent.parent){
+                let parentKeys=getParentKeys(record.parent,isChecked);
+                keys = [...keys,...parentKeys.keys];
+                items = [...items,...parentKeys.items];
+              }
+            }
+          }else{
+            // 只要有子节点没有选中，则父节点不选中
+            keys.push(record.parent[rowKey])
+            items.push(record.parent);
+            if(record.parent.parent){
+              let parentKeys=getParentKeys(record.parent,isChecked);
+              keys = [...keys,...parentKeys.keys];
+              items = [...items,...parentKeys.items];
+            }
+          }
+        }
+        return {keys,items}
+      }
+      let req=getParentKeys(record,isChecked);
+      keys = [...keys,...req.keys]
+      items = [...items,...req.items]
+    }
+    return {keys,items}
+  }
+  const onSelectAll=(selected,rows,changes)=>{
+    let keys=[];
+    let items=[];
+    let isChecked = false;
+    if(selected==true){
+      isChecked = true;
+    }else if(Array.isArray(selected)){
+      if(selected?.length>0){
+        isChecked=true
+      }
+    }
+    changes.forEach((item,idx)=>{
+      let req = getAllKeys(item,isChecked,[...checked,...keys]);
+      keys = [...keys,...req.keys];
+      items = [...items,...req.items];
+
+    })
+    if(isChecked){
+      refSelf.current._onSelect(keys,items);
+    }else{
+      refSelf.current._onUnSelect(keys,items);
+    }
+  }
+  const onSelect=(record,isChecked)=>{
+    let _keys=[],_items=[];
+    if(Array.isArray(record)){
+      for(let item of record){
+        let {keys,items} = getAllKeys(item,isChecked,checked);
+        _keys = [..._keys,...keys];
+        _items = [..._items,...items];
+      }
+    }else{
+      let {keys,items} = getAllKeys(record,isChecked,checked);
+      _keys = keys;
+      _items = items;
+    }
+    if(isChecked){
+      refSelf.current._onSelect(_keys,_items);
+    }else{
+      refSelf.current._onUnSelect(_keys,_items);
+    }
+  }
+
+  const renderCell=(_checked,record,index)=>{
+    const {checked,onSelect,mode} = refSelf.current;
+
+    // 渲染父级
+    if(record.children){
+      let count=0;
+      let max=record.children.length;
+      // 父子不关联
+      if(checkStrictly == true){
+        return <div onClick={e=>e.stopPropagation()}>
+          <Checkbox
+            onChange={(e)=>{
+              onSelect(record,!_checked)
+            }} indeterminate={false} checked={_checked} 
+          />
+          </div>;
+      }
+      record.children.forEach(item=>{
+        if(checked.includes(item[rowKey])){
+          count++;
+        }
+      });
+      let half = false;
+      let _parentChecked;
+      if(mode == Mode.Search){
+        half= count >0;
+        _parentChecked=false;
+      }else{
+        half = count > 0 && count < max;
+        _parentChecked = count == max;
+      }
+      return <div onClick={e=>e.stopPropagation()}>
+        <Checkbox
+          onChange={(e)=>{
+            onSelect(record,!_checked)
+          }} indeterminate={half} checked={_parentChecked} 
+        />
+        </div>;
+    }
+
+    // 渲染子级
+    return <div onClick={e=>e.stopPropagation()}><Checkbox checked={_checked} onChange={(e)=>{
+      e.stopPropagation();
+      onSelect(record,!_checked)
+    }}/></div>
+  }
+  useEffect(()=>{
+    if(init==0){
+      if(defaultValueItems){
+        onSelect(defaultValueItems,true);
+        setInit(1);
+      }
+    }
+  },[])
+
+
+  refSelf.current={
+    _onSelect,
+    _onUnSelect,
+    onSelect,
+    checked,
+    mode
+  }
+
+  const actions=useMemo(()=>{
+    return {
+      onSelectAll,
+      onSelect,
+      clear,
+      checkStrictly,
+      checked,
+      checkedItems,
+      setMode,
+      mode,
+      renderCell,
+      lastSelectType
+    };
+  },[checked,checkedItems,mode,renderCell,checkStrictly,lastSelectType]);
+
+  return actions;
+}
+
+useTableRowSelect.Mode=Mode;
+
+export default useTableRowSelect;

package/templates/template_admin_antd5/public/src/hooks/useThrottole.jsx

@@ -0,0 +1,68 @@
+import React,{useRef} from 'react';
+import { useState } from 'react';
+
+/**
+ * @typedef useThrottole
+ * @property {boolean} throttleing - 是否在节流中
+ * @property {(fn:function)=>function} makeThrottole - 制作节流方法
+ * @property {()=>boolean} isThrottole - 判断是否节流中
+ */
+
+const OUTPUT_LOG=false;
+/**
+ * 节流函数
+ * @param {object} props 
+ * @param {number} props.throttle - 节流时间
+ * 
+ * @returns {useThrottole}
+ */
+const useThrottole = ({throttle})=>{
+  
+  const  refThrottle= useRef(0)
+  const [throttleing,setThrottle] = useState(false);
+
+  const isThrottole=()=>{
+    return refThrottle.current > 0;
+  }
+
+  const startThrottole=()=>{
+    if(OUTPUT_LOG)console.log('节流-开始')
+    setThrottle(true);
+    refThrottle.current=throttle;
+  }
+
+  const releaseThrottle=()=>{
+    
+    setTimeout(()=>{
+      if(OUTPUT_LOG)console.log('节流-释放')
+      setThrottle(false);
+      refThrottle.current=0;
+    },refThrottle.current)
+  }
+
+  const makeThrottole=(fn)=>{    
+    if(OUTPUT_LOG)console.log('节流-创建方法')
+    return  async (...args)=>{
+      if(isThrottole()){return;}
+      if(fn){
+        startThrottole();
+        try{
+          if(OUTPUT_LOG)console.log('节流-执行')
+          return await fn(...args);
+        }catch(ex){
+          if(OUTPUT_LOG)console.error('useThrottole:',ex);
+        }finally{
+          releaseThrottle();
+        }
+      }
+    }
+  }
+  if(OUTPUT_LOG)console.log('当前节流状态:',throttleing)
+  return {
+    throttleing,
+    makeThrottole,
+    isThrottole,
+  }
+}
+
+export default useThrottole;

package/templates/template_admin_antd5/public/src/hooks/useTimer.jsx

@@ -0,0 +1,42 @@
+// @ts-ignore
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+const useTimer=(ms)=>{
+  const [time,setTime] = useState(0);
+  const refTimer = useRef();
+  const refTime = useRef();
+
+  useEffect(()=>{
+    // @ts-ignore
+    refTime.current = {time,setTime};
+  })
+  useEffect(()=>{
+    return ()=>{
+      if(refTimer.current){
+        window.clearInterval(refTimer.current);
+      }
+    }
+  },[])
+  useEffect(()=>{
+    if(refTimer.current){
+      window.clearInterval(refTimer.current);
+    }
+    // @ts-ignore
+    refTimer.current = setInterval(()=>{
+      // @ts-ignore
+      refTime.current.setTime(v=>v+ms);
+    },ms);
+
+
+  },[ms]);
+
+  const actions=useMemo(()=>{
+    return {
+      time,
+    };
+  },[time]);
+
+  return actions;
+}
+
+export default useTimer;

package/templates/template_admin_antd5/public/src/hooks/useUpdate.jsx

@@ -0,0 +1,16 @@
+// @ts-ignore
+import { useState, useMemo } from 'react';
+
+
+/**
+ * 更新计数器
+ */
+const useUpdate=()=>{
+  const [count,setCount] = useState(1);
+  const action = useMemo(()=>{
+    return [count,()=>{setCount(count+1)}]
+  },[count,setCount])
+  return action;
+}
+
+export default useUpdate;

package/templates/template_admin_antd5/public/src/hooks/useWatchServices.jsx

@@ -0,0 +1,124 @@
+import React, {useEffect, useRef, useState, useMemo} from 'react';
+import {hasValue} from '@/utils';
+
+/**
+ * @typedef UseWatchServices
+ * @property {*} response
+ * @property {*} error
+ * @property {(servicesProps:object,required?:boolean|Array)=>Promise} update
+ * @property {number} loading - 是否加载中
+ * 
+ *
+ */
+
+/**
+ * @param {object} props
+ * @param {Function} props.services
+ * @param {boolean} [props.debug=false]
+ * @param {string} [props.name=''] - 调试用的名称
+ * 
+ * 
+ * @returns {UseWatchServices}
+ */
+const useWatchServices = (props) => {
+  const {services,debug=false,name=''} = props;
+
+  const [response, setResponse] = useState();
+  const [error, setError] = useState(false);
+  const refOlder = useRef();
+  const refDestory = useRef(false);
+  const [loading,setLoading] = useState(0);
+
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf = useRef({});
+  refSelf.current={loading,setLoading};
+  
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refUpdate = useRef();
+
+  const isChangeRequest = (servicesProps) => {
+    if (!refOlder.current) return true;
+    let old = refOlder.current || {};
+    let current = servicesProps || {};
+    let _strOld = JSON.stringify(old);
+    let _strCurrent = JSON.stringify(current);
+    if (_strOld != _strCurrent) {
+      return true;
+    }
+    return false;
+  };
+  const isRequired = (servicesProps, required = false) => {
+    if (!required) return true;
+    let req = true;
+    if (Array.isArray(required)) {
+      for (let key of required) {
+        if (!hasValue(servicesProps[key])) {
+          req = false;
+          break;
+        }
+      }
+    }
+
+    return req;
+  };
+  const update = async (servicesProps, required = false) => {
+    let _isRequired = isRequired(servicesProps, required);
+    if (!_isRequired) {
+      if(debug)console.log(`[useWatchServices][${name}]：缺少必要参数`,servicesProps,required)
+      if(response){
+        setResponse(undefined);
+        setError(undefined);
+      }
+      return;
+    }
+    if (!isChangeRequest(servicesProps)) {
+      if(debug)console.log(`[useWatchServices][${name}]：参数重复无需刷新`,servicesProps)
+      return;
+    }
+
+    refOlder.current = servicesProps;
+    refUpdate.current = servicesProps;
+    refSelf.current.setLoading(v=>v+1);
+    const req = await services(servicesProps);
+    if (refUpdate.current != servicesProps) {
+      if(debug)console.log(`[useWatchServices][${name}]：已有更新的接口调用取消当前接口`,servicesProps)
+      refSelf.current.setLoading(v=>v-1);
+      return;
+    }
+
+    if (req?.code == 0) {
+      setError(undefined);
+      setResponse(req);
+    } else {
+      setError(req.msg);
+      setResponse(undefined);
+    }
+    refSelf.current.setLoading(v=>v-1);
+    refOlder.current = servicesProps;
+    return req;
+  };
+  useEffect(() => {
+    refDestory.current = false;
+    return () => {
+      refDestory.current = true;
+    };
+  }, []);
+
+  const result = useMemo(() => {
+    if(debug)console.log(`[useWatchServices][${name}]：更新`,loading,error,response)
+    return {
+      response,
+      error,
+      update,
+      loading
+    };
+  }, [services,response,error,loading]);
+
+  return result;
+};
+
+export default useWatchServices;

package/templates/template_admin_antd5/public/src/index.jsx

@@ -0,0 +1,89 @@
+// @ts-ignore
+import React from 'react';
+import './_antd.less';
+import './_reset.module.less';
+import RouteList from './route';
+// @ts-ignore
+import moment from 'moment';
+import { ReactRender } from './components/react';
+import {DEBUG_VCONSOLE} from '@/config';
+moment.locale('zh-cn');
+
+
+let _error=window.console.error;
+window.console.error=(...args)=>{
+  let filter=false;
+  for (const arg of args) {
+    console.log(arg);
+    if(typeof arg == 'string'){
+      if( /Form.*already.*set.*'initialValues'/.test(arg)){
+        filter=true;
+        break;
+      }
+    }
+  }
+  if(filter)return;
+  _error(...args)
+}
+
+// @ts-ignore
+if(MOCK){
+  // @ts-ignore
+  let mock = require('@/mock');
+  mock;
+}
+
+// @ts-ignore
+window.appLog=(txt)=>{
+  console.log(txt);
+}
+
+/* eslint-disable */
+// @ts-ignore
+if(DEBUG_VCONSOLE){
+  // @ts-ignore
+  let VConsole =  require('vconsole');
+  // @ts-ignore
+  const vConsole = new VConsole();
+  setTimeout(() => {
+    vConsole.setSwitchPosition(70, 10);
+  }, 2000);
+}
+
+// @ts-ignore
+if(BUILD_ENV){
+  // @ts-ignore
+  window.appLog(`代码环境类型：${BUILD_ENV}`);
+}
+
+// @ts-ignore
+if (VERSION_HASH) {
+  // @ts-ignore
+  window.appLog(`VERSION_HASH：${VERSION_HASH}`);
+}
+
+// @ts-ignore
+window.appLog(`log init`);
+// @ts-ignore
+window.appLog(`${location.href}`);
+// @ts-ignore
+window.appLog(`ua:${navigator.userAgent}`);
+/* eslint-enable */
+
+
+ReactRender(<RouteList />, document.getElementById('main-view'));
+
+
+// 只需在入口文件中启用 HMR
+// @ts-ignore
+if (module.hot) {
+  console.warn('热更刷新监听')
+  // @ts-ignore
+  module.hot.accept('./route', () => {
+    console.warn('热更刷新')
+    const NextApp = require('./route').default;
+    ReactRender(<NextApp />, document.getElementById('main-view'));
+  });
+}
+
+