kn-cli 1.0.134 → 1.0.136

package/templates/template_admin_antd5/public/src/components/select/useSelectList.jsx

@@ -1,55 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 // @ts-ignore
-import {Tooltip} from "@/components/antd";
-
-
-
-/**
- * 各类选择框组件
- * @typedef SelectListProps
- * @property {string} [name] - 调试名称
- * @property {'single'|'multiple'} [mode='single'] - 单选/多选模式
- * @property {(value:string|string[],items:object|object[])=>void} [onChange] - 选择发生变化时的回调
- * @property {string|string[]} [value] - 选择发生变化时的回调
- * @property {object} [style={}] - 样式
- * @property {string} [placeholder] - 提示
- * @property {boolean} [allowClear=false] - 一键删除按钮
- * @property {boolean} [showAll=false] - 是否第一个展示全部选项
- * @property {string} [allValue=''] - 定义全部选项的值是哪种类型，''代表空字符串
- * @property {(id:string)=>SelectItem} [onNoMatchData] - 当没有匹配到数据时的回调
- * @property {{id:number|string,label:string}[]} [noMatchList] - 为匹配到数据时的备用匹配数据
- * @property {string} [onNoMatchDataLabel] - 当单选时，默认选中的数据没有匹配到合法数据时展示的label
- * @property {object} [params={}] - 扩展参数
- * @property {boolean} [disabled=false] - 是否禁止编辑
- * @property {boolean} [noCheckNotFound=false] 是否禁止做不匹配数据的检查补全
- * @property {string} [className='']
- * @property {number} [maxTagCount] - 多选时最多支持的标签数量
- * @property {JSX.Element|string} [suffixIcon] 选择框尾部的icon
- * @property {(value:string|string[],items:object|object[])=>Promise<boolean>} [canChange] - 用于在切换选项时拦截决定是否允许变更
- * @property {boolean} [required=false] - 是否为必选，必选的话不允许allowClear
- * @property {(list:SelectItem[])=>object} [onDefaultSelect] - 初始化后如果需要有默认选中项的计算的话，可以通过这里拦截
- * @property {(list:SelectItem[])=>void} [onListUpdate] - 每当列表内的数据更新时回调
- * 
- */
-
-/**
- * @typedef SelectItem
- * @property {string} label - 文本下拉框里展示的文本
- * @property {string} value - 文本下拉框里选项的值
- * @property {any} data - 文本下拉框里选项对应的原始数据
- * 
- */
-
-/**
- * @typedef UseSelectList
- * @property {(list:SelectItem[])=>Promise<boolean>} init - 初始化函数
- * @property {string|number|string[]|number[]} value - 值发生变化时的回调
- * @property {SelectItem[]} list - 选择的数据列表
- * @property {(value)=>void} setValue - 设置当前值
- * @property {object} props - 继承给Select组件的通用属性
- * @property {(value:string|string[])=>object[]} getItemByValue - 通过ID获取到所有匹配的对象数据
- * 
-*/
+import {message, Tooltip} from "@/components/antd";
+import { copyToClipboard } from '@/utils';
 
 /**
  * 通用的管理选择下拉框数据的hooks
@@ -67,8 +19,9 @@ const useSelectList=(props)=>{
     onNoMatchDataLabel,
     noCheckNotFound=false,
     noMatchList=[],
+    size='middle',
+    dropdownMatchSelectWidth,
   } = props;
-
   const [list,setList]= useState(null);
   const [value,setValue]=useState(mode=='single'?'':[]);
   const [maxTagCount] = useState(()=>{
@@ -86,14 +39,35 @@ const useSelectList=(props)=>{
 
   const [suffixIcon] = useState(props.suffixIcon||undefined)
 
+  const getItemOptions=()=>{
+    let currentValue = value;
+    if(showAll && mode=='multiple'){
+      if(!list)return null;
+      const isAll = currentValue && Array.isArray(currentValue) && currentValue.includes(allValue);
+      list.forEach(item=>{
+        if(isAll){
+          if(item.value != allValue){
+            item.disabled=true;
+          }else{
+            item.disabled=false;
+          }
+        }else{
+          item.disabled=false;
+        }
+      });
+      return [...list]
+    }else{
+      return list;
+    }
+  }
+  
   /**
    * 初始化加载下拉框数据
-   * @param {{label:string,value:string,data:any}[]} values 
+   * @param {{label:string,value:string,data:any,disabled?:boolean}[]} values 
    */
   const init = async (values)=>{
     if(showAll && values?.length>0){
-      let value =allValue;
-      values =[{label:'全部',value,data:values},...values]
+      values =[{label:'全部',value:allValue,data:values},...values];
     }
     setList(values);
     return true;
@@ -106,6 +80,7 @@ const useSelectList=(props)=>{
    */
   const getItemByValue=(value)=>{
     if(!value)return [];
+    if(!list||list.length<=0)return [];
     let finder = [];
     if(Array.isArray(value)==false){
       finder = [value];
@@ -169,18 +144,29 @@ const useSelectList=(props)=>{
       if(onNoMatchData){
         let data = onNoMatchData(id);
         if(data){
+          if(data?._delete){
+            return;
+          }
+          data.isNoFind=true;
           list.splice(0,0,data);
           return;
         }
       }
       if(onNoMatchDataLabel){
-        list.splice(0,0,{value:id,label:onNoMatchDataLabel,data:null});
+        list.splice(0,0,{value:id,label:onNoMatchDataLabel,data:null,isNoFind:true});
         return;
       }
-      list.splice(0,0,{value:id,label:`${id}[不可用]`,data:null});
+      list.splice(0,0,{value:id,label:`${id}[不可用]`,data:null,isNoFind:true});
     })
     setList([...list]);
   }
+  const getItems=()=>{
+    if(!list){
+      throw new Error('数据未加载完毕无法getItems获取数据');
+    }
+    return list?.filter(item=>!item.isNoFind)||[];
+  }
+
 
   useEffect(()=>{
     if(_value==null||_value==undefined){
@@ -189,9 +175,12 @@ const useSelectList=(props)=>{
     }
     let req;
     if(mode=='multiple' && Array.isArray(_value)){
-      req= _value.map(id=>`${id}`)
+      req= _value.map(id=>`${id}`);
+      if(showAll && req?.includes(allValue)){
+        req=[allValue];
+      }
     }else{
-      req = `${_value}`
+      req = `${_value}`;
     }
     setValue(req);
   },[_value]);
@@ -200,18 +189,29 @@ const useSelectList=(props)=>{
     checkNoFindData();
   },[value,list,noMatchList])
 
-  return {init,value,list,setValue,getItemByValue,props:{maxTagCount,suffixIcon,
+  return {init,value,list:getItemOptions(),setValue,getItemByValue,getItems,props:{dropdownMatchSelectWidth,size,maxTagCount,suffixIcon,
     maxTagPlaceholder:(omittedValues) => (
       <Tooltip
-        overlayStyle={{
-          pointerEvents: 'none',
-        }}
-        title={omittedValues.map(({ label }) => label).join(', ')}
+        // overlayStyle={{
+        //   pointerEvents: 'none',
+        // }}
+        onCopyMore={()=>{
+          if(omittedValues?.length>200){
+            let text=omittedValues.map(({ label }) => label).join(', ');
+            copyToClipboard(text,(req)=>{
+              message.info(req?'复制成功':'复制失败')
+            })
+            return true;
+          }
+          return false;
+        }}  
+        title={
+          omittedValues.length>200?'数据太多请复制后查看':omittedValues.map(({ label }) => label).join(', ')
+        }
       >
         <span className='antd-show-tag-more-label'><i></i><i></i><i></i></span>
       </Tooltip>
     )
-
   }}
 }
 export default useSelectList;

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

@@ -1,16 +1,13 @@
-import React,{useCallback} from 'react';
-// @ts-ignore
-import { Spin, Table } from "@/components/antd";
+import React from 'react';
 
 // @ts-ignore
 import styles from './index.module.less';
 import Column,{Wrap} from './column';
-import { useRef } from 'react';
-import { useEffect } from 'react';
-import { useState } from 'react';
-import {useEsc} from '@/hooks';
-import useDebounceFn from '@/hooks/useDebounceFn';
-import { useLayoutEffect } from 'react';
+import WithPageTable from './withPage';
+import {ExpandIcon,FullSizeIcon} from '@/components/icon';
+export {ExpandIcon}
+export {FullSizeIcon}
+
 
 export {Wrap}
 export const SCROLL_CONFIG={x:'max-content',
@@ -26,274 +23,6 @@ export const PAGE_SIZE_OPTIONS=PAGE_SIZE_LIST.map(size=>{
   return {value:`${size}`,label:`${size} 条/页`}
 });
 
-/**
- * 页面公共Table组件
- * @param {object} [props] 
- * @param {string|function} [props.rowKey] - Table主键
- * @param {string} [props.className] - 自定义类名
- * @param {boolean} [props.loading] - 是否加载中
- * @param {Array} [props.columns] - 表格列
- * @param {Array} [props.dataSource] - 数据数组
- * @param {object} [props.pagination] - 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
- * @param {object} [props.scroll] - 表格是否可滚动
- * @param {object} [props.page] - 表格数据，包括数据数组、分页参数、loading等
- * @param {number} [props.minWidth] - 表格无数据时的最小宽度限制
- * @param {*} [props.rowSelection] - 行配置
- * @param {*} [props.expandable] - antd的展开配置
- * @param {boolean} [props.sticky] - 表头是否吸附固定
- * @param {string} [props.heightMode] - 高度适配模式，默认为无限向下拓展，'inWrap':最大高度不超过父容器
- * @param {boolean} [props.fullScreen=false] - 是否全屏展示
- * @param {()=>void} [props.onCancelFullScreen] - 退出全屏的回调
- * @param {(column,index)=>object} [props.onHeaderRow] - 
- * @param {JSX.Element} [props.footer] - 表格底部额外的东西
- * @param {string|number} [props.updateCount] - 用于强制刷新table
- * @param {array} [props.sortDirections] - 排序的顺序
- * @param {boolean} [props.virtual=false] - 是否开启虚拟滚动，如果开启scroll必须指定值
- * 
- * @returns {JSX.Element}
- */
-const PageTable = (props) => {
-  const {
-    rowKey='id',
-    loading,
-    columns,
-    dataSource,
-    pagination,
-    scroll,
-    page,
-    minWidth=undefined,
-    sticky,
-    heightMode='default',
-    fullScreen=false,
-    onCancelFullScreen,
-    footer=null,
-    updateCount=0,
-    ...others
-  } = props;
-  
-  // const Table = (props?.virtual?Antd5Table:Antd4Table);
-  const domTheadName= props?.virtual?`.ant5-table-thead`:`.ant-table-thead`;
-
-  const escControl = useEsc({name:'table'});
-  /**
-   * @type {React.MutableRefObject<object>}
-   */
-  const refTable=useRef();
-  /**
-   * @type {React.MutableRefObject<object>}
-   */
-  const refSelf = useRef();
-  const refDestory = useRef(false);
-  /**
-   * @type {React.MutableRefObject<object>}
-   */
-  const refFooter = useRef();
-
-  const refResize=useRef(()=>{
-    refSelf.current.setResize(1);
-  })
-  const [resizeLazy] = useDebounceFn(refResize.current,{wait:1000})
-
-  const paginationFn = useCallback(() => {
-    // pagination=false时不分页
-    if (typeof pagination === 'boolean') {
-      return pagination;
-    }
-
-    
-    if( page?.pagination?.pageSize){
-      updatePageSizeToLocal( page?.pagination?.pageSize )
-      let sizeList = pagination?.pageSizeOptions||PAGE_SIZE_LIST;
-      page.pagination.pageSize=  calPageSize(page.pagination.pageSize,sizeList);
-
-    }
-    return {
-      showSizeChanger:true,
-      showQuickJumper:true,
-      pageSizeOptions: PAGE_SIZE_LIST,
-      current: page?.pagination?.current,
-      pageSize: page?.pagination?.pageSize,
-      total: page?.pagination?.total,
-      showTotal: (total) => `总计${total}条`,
-      ...pagination,
-    };
-  }, [pagination, page]);
-
-
-
-  const [resize,setResize]=useState(0);
-
-  const getList=()=>{
-    if(dataSource)return dataSource;
-    if(page?.mode == 'scrollLoad'){
-      return page.scrollData || [];
-    }else{
-      return page?.data?.[page?.pagination?.current - 1] ||[];
-    }
-  }
-  let list = getList();
-
-  const [scrollConfig,setScrollConfig] = useState(()=>{
-    const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
-    // 当没数据时，列的宽度取minWidth
-    if(minWidth && (!list||list.length<=0) ){
-      scrollConfig.x = minWidth;
-    }
-    return scrollConfig;
-  });
-
-  const onCancelFull=()=>{
-    if(fullScreen){
-      if(onCancelFullScreen){
-        onCancelFullScreen();
-        return true;
-      }
-    }
-  }
-  // const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
-  // // 当没数据时，列的宽度取minWidth
-  // if(minWidth && (!list||list.length<=0) ){
-  //   scrollConfig.x = minWidth;
-  // }
-
-  refSelf.current={
-    onCancelFull,
-    setResize,
-    resize,
-    
-  }
-
-
-  useEffect(()=>{
-    escControl.addEventListener(onCancelFull);
-    return ()=>{
-      escControl.removeEventListener(onCancelFull);
-    }
-  },[onCancelFull])
-
-
-
-
-  useLayoutEffect(()=>{
-    let list = getList();
-    let observer;
-    const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
-    // 当没数据时，列的宽度取minWidth
-    if(minWidth && (!list||list.length<=0) ){
-      scrollConfig.x = minWidth;
-    }
-    if(refTable?.current){
-      if(fullScreen){
-        let dom = refTable.current;
-        // @ts-ignore
-        const thead = dom.querySelector(domTheadName);
-        observer = new ResizeObserver((entries) => {
-          entries.forEach(entry => {
-            const height = entry.contentRect.height;
-            if(refSelf.current.resize != height){
-              refSelf.current.setResize(height)
-            }
-          });
-        });
-        observer.observe(thead);
-
-        let theadHeight=60;
-        if(thead){
-          theadHeight = thead.clientHeight+16;
-        }
-        // @ts-ignore
-        let maxHeight= dom.clientHeight;
-        let pagationHeight = pagination?24:0;
-        let footerHeight = footer?refFooter.current.clientHeight:0;
-        scrollConfig.y = maxHeight-(theadHeight+16+pagationHeight+footerHeight);
-      } 
-      else if(heightMode=='inWrap'){
-        let dom = refTable.current;
-        // @ts-ignore
-        const thead = dom.querySelector(domTheadName);
-        observer = new ResizeObserver((entries) => {
-          entries.forEach(entry => {
-            const height = entry.contentRect.height;
-            if(refSelf.current.resize != height){
-              refSelf.current.setResize(height)
-            }
-          });
-        });
-        observer.observe(thead);
-  
-        let theadHeight=60;
-        if(thead){
-          theadHeight = thead.clientHeight+16;
-        }
-        
-        // @ts-ignore
-        let maxHeight= dom.clientHeight;
-        let pagationHeight = pagination?28:0;
-        let footerHeight = footer?refFooter.current.clientHeight:0;
-        let h= maxHeight-(theadHeight+pagationHeight+footerHeight);
-        scrollConfig.y = h;
-      }  
-     
-    }
-    setScrollConfig(scrollConfig)
-    if(observer){
-      return ()=>{
-        observer.disconnect();
-      }
-    }
-
-  },[dataSource,page,fullScreen,resize,updateCount])
-
-  
-  useEffect(()=>{
-    const resize = ()=>{
-      resizeLazy();
-    }
-
-    window.addEventListener('resize',resize)
-    return ()=>{
-      window.removeEventListener('resize',resize);
-      refDestory.current=true;
-    }
-  },[])
-
-
-  // if(!scrollConfig)return <></>
-  return (
-    <section ref={refTable} className={`${styles.tableScrollWrap} ${sticky ? styles.sticky: ''}`} data-full={fullScreen}>
-      {
-        loading??(page?.loading?.state && page?.data?.length<=0)?
-        <Table 
-          bordered
-          size="small"
-          columns={columns} 
-          key='loading' 
-          loading={true}
-          scroll={ scrollConfig }
-        />:
-        <Table
-          rowKey={rowKey}
-          bordered
-          size="small"
-          // loading={loading ?? page?.loading?.state}
-          columns={columns}
-          dataSource={list}
-          pagination={paginationFn()}
-          scroll={ scrollConfig }
-          sticky={sticky}
-          {...others}
-        />
-      }
-      {footer?<div className={styles.footer} ref={refFooter}>{footer}</div>:''}
-      <div className={styles.loading} data-show={ loading || page?.loading?.state }><Spin /></div>
-      
-      {
-        fullScreen?<FullSizeIcon className={styles.resizeTable} full={fullScreen} onClick={onCancelFull}/>:<></>
-      }
-    </section>
-  );
-};
-
 
 /**
  * 从 sizeList 中找出与 value 最接近的值，同等距离时优先返回较大的值
@@ -326,7 +55,6 @@ const getPageSizeFromLocal=()=>{
   return +size;
 }
 
-
 /**
  * 默认分页配置
  */
@@ -336,53 +64,6 @@ export const DefaultPagination=()=>{
   }
 }
 
-PageTable.Column = Column;
-PageTable.onPageChange = (page, current, pageSize) => {
-  page.update({ pagination: { current, pageSize }, clear: true });
-};
-PageTable.onSearch = (page) => {
-  page.update({ pagination: { current: 1 }, clear: true });
-};
-PageTable.onRest = (page) => {
-  page.reset();
-};
-
-PageTable.expandIcon=({ expanded, onExpand:_onExpand, record }) =>{
-  const onExpand = (item,e)=>{
-    e.stopPropagation();
-    if(_onExpand){
-      _onExpand(item,e);
-    }
-  }
-  if(!record.children){return <></>}
-  if(expanded){
-    return <i className={styles.expanded} data-state='close' onClick={e => onExpand(record, e)} />
-  }
-  return <i className={styles.expanded} onClick={e => onExpand(record, e)} />;
-}
-PageTable.createExpandIcon=(props={})=>{
-  const {className=''} = props; 
-  return ({ expanded, onExpand, record }) =>{
-    if(!record.children){return <></>}
-    if(expanded){
-      return <i className={`${styles.expanded} ${className}`} data-state='close' onClick={e => {e.stopPropagation();onExpand(record, e)}} />
-    }
-    return <i className={`${styles.expanded} ${className}`} onClick={e => {e.stopPropagation();onExpand(record, e)}} />;
-  }
-}
-export const ExpandIcon=props=>{
-  const {expanded,onClick,className=''} = props;
-  if(expanded){
-    return <i className={`${styles.expanded} ${className}`} data-state='close' onClick={onClick} />
-  }
-  return <i className={`${styles.expanded} ${className}`} onClick={onClick} />;
-}
-
-
-export const FullSizeIcon=props=>{
-  const {full=false,onClick,className=''} = props;
-  return <div className={`${styles.fullSize} ${className}`} onClick={onClick} ><i className={`${styles.icon}`} data-full={full} /></div>;
-}
 
 /**
  * @typedef  MergeCellConfig
@@ -458,6 +139,46 @@ const _mergeCellsOnnCell = (key, item, index) => {
   return {};
 };
 
+const PageTable={}
+PageTable.Column = Column;
+PageTable.onPageChange = (page, current, pageSize) => {
+  page.update({ pagination: { current, pageSize }, clear: true });
+};
+PageTable.onSearch = (page) => {
+  page.update({ pagination: { current: 1 }, clear: true });
+};
+PageTable.onRest = (page) => {
+  page.reset();
+};
+
+PageTable.expandIcon=({ expanded, onExpand:_onExpand, record }) =>{
+  const onExpand = (item,e)=>{
+    e.stopPropagation();
+    if(_onExpand){
+      _onExpand(item,e);
+    }
+  }
+  if(!record.children){return <></>}
+  return <ExpandIcon expanded={expanded} onClick={onExpand.bind(this,record)} />
+}
+PageTable.createExpandIcon=(props={})=>{
+  const {className=''} = props; 
+  return ({ expanded, onExpand, record }) =>{
+    const onClick = (item,e)=>{
+      e.stopPropagation();
+      if(onExpand){
+        onExpand(item,e);
+      }
+    } 
+    if(!record.children){return <></>}
+    return <ExpandIcon expanded={expanded} onClick={onExpand.bind(this,record)} />
+    if(expanded){
+      return <i className={`${styles.expanded} ${className}`} data-state='close' onClick={onClick.bind(this,record)} />
+    }
+    return <i className={`${styles.expanded} ${className}`} onClick={onClick.bind(this,record)} />;
+  }
+}
+
 /**
  * 用于动态计算合并单元格的算法
  */
@@ -466,10 +187,10 @@ PageTable.MergeCells={
   mergeCell:_mergeCells
 }
 
-
 PageTable.heightMode={
   default:'default',
   inWrap:'inWrap'
 }
 
-export default PageTable;
+export {PageTable as TableTools}
+export default WithPageTable