kn-cli 1.0.131 → 1.0.134

package/templates/template_admin_antd5/public/src/components/select/defaultServicesSelect/index.jsx

@@ -0,0 +1,182 @@
+
+import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';
+// @ts-ignore
+import { Select } from "@/components/antd";
+import useSelectList from '../useSelectList';
+
+/**
+ * @typedef SelectItemOption
+ * @property {string} label - 显示的名称
+ * @property {string} value - 唯一值
+ * @property {object} [data] - 原始数据
+ * 
+ */
+
+/**
+ * @typedef DefaultServicesSelectProps
+ * @property {string} [name] - 调试用的名称
+ * @property {object} services - api接口 符合输出的结果为{id:'',name:''}结构
+ * @property {object} [servicesProps={}] - 接口传参
+ * @property {(item:object)=>SelectItemOption} [formatOptionItem] - 用户格式化接口返回的数据成标准option数据
+ * @property {(list:object[]|object)=>SelectItemOption[]} [formatOptionList] - 对整个response处理返回option
+ */
+
+/**
+ * 从字典生成下拉框
+ * @param {import('../useSelectList').SelectListProps & DefaultServicesSelectProps} props 
+ * @returns {JSX.Element}
+ */
+const DefaultServicesSelect=(props,ref)=>{
+  const {
+    mode='single',
+    value:_value,
+    style:_style={},
+    placeholder='请选择',
+    onChange,
+    canChange,
+    disabled=false,
+    services,
+    servicesProps={},
+    formatOptionItem=(item)=>{
+      const {id,name} = item;
+      return {
+        label:`${name}`,
+        value:`${id}`,
+        data:item
+      }
+    },
+    formatOptionList,
+    onDefaultSelect,
+    onListUpdate,
+    name,
+    required=false
+  } = props;
+
+  // 单选框默认带一键删除
+  const allowClear = props.allowClear??((required==false)?true:false);
+
+  const refDestory = useRef(false);
+  const selectList = useSelectList(props);
+  const [requestParams,setRequestParams] = useState(servicesProps)
+  const refInitList=useRef([]);
+
+  // 初始化加载下拉框数据
+  const init = async ()=>{
+    const req = await services(servicesProps);
+    if(refDestory.current){return;}
+    let values=[];
+    if(req?.code==0){
+      let data=[];
+      if(formatOptionList){
+        data = formatOptionList(req.data);
+      }else{
+        data= req.data.map(item=>{
+          return formatOptionItem(item)
+        })
+      }
+      values=data;
+    }
+    if(onListUpdate){
+      onListUpdate(values);
+    }
+    if(onDefaultSelect){
+      let defaultItem = onDefaultSelect(values);
+      if(defaultItem){
+        onValueChange(defaultItem.value,defaultItem,true)
+      }
+    }
+    const t= await selectList.init(values);
+    if(refDestory.current){return;}
+    refInitList.current.shift();
+    if( refInitList.current.length >0 ){
+      let fn = refInitList.current[0]
+      fn();
+    }
+    return t;
+  }
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.toLocaleLowerCase().indexOf(input.toLocaleLowerCase()) >=0 ){
+      return true;
+    }
+    return false;
+  }
+
+  const onValueChange= async (newValue,options,force=false)=>{
+    if(!force && canChange){
+      let req = await canChange(newValue,options);
+      if(!req)return;
+    }
+    if(onChange)onChange(newValue,options);
+  }
+
+
+  useEffect(()=>{
+    if(refInitList.current.length<=0){
+      refInitList.current.push(init)
+      init();
+    }else{
+      refInitList.current.push(init);
+    }
+  },[requestParams,services]);
+
+  useEffect(()=>{
+    let keys = Object.keys(servicesProps)
+    if(keys.length<=0)return;
+    let changes = keys.some(key=>{
+      if(servicesProps[key] != requestParams[key]){
+        return true;
+      }
+      return false;
+    })
+    if(changes){
+      setRequestParams(servicesProps)
+    }
+
+  },[servicesProps])
+  useEffect(()=>{
+    return ()=>{
+      refDestory.current=true
+    }
+  },[])
+
+
+  useImperativeHandle(ref, () => ({
+    getSelectList:()=>{
+      return selectList;
+    },
+  }));
+
+  let className=''
+  if(selectList.props.className){
+    className = selectList.props.className;
+  }
+  if(selectList.props.maxTagCount){
+    if(Array.isArray(className)){
+      className.push('antd-show-tag')
+    }else{
+      className+= ' antd-show-tag';
+    }
+  }
+  return (
+    <Select
+      // getPopupContainer={trigger => trigger?.parentElement||document.body} 
+      loading={selectList.list===null}
+      disabled={selectList.list===null || disabled}
+      style={{..._style}}
+      placeholder={placeholder}
+      allowClear={allowClear}
+      // @ts-ignore
+      mode={mode}
+      showSearch
+      value={selectList.value}
+      options={selectList.list}
+      onChange={onValueChange}
+      filterOption={onFilter}
+      {...selectList.props}
+      className={className}
+    />
+  );
+}
+
+export default forwardRef(DefaultServicesSelect);

package/templates/template_admin_antd5/public/src/components/select/dictSelect/index.jsx

@@ -0,0 +1,84 @@
+
+import React, { useEffect, useRef } from 'react';
+// @ts-ignore
+import { Select } from "@/components/antd";
+import useSelectList from '../useSelectList';
+
+/**
+ * @typedef DictSelectProps
+ * @property {object} emDict - 字典对象
+ */
+
+/**
+ * 从字典生成下拉框
+ * @param {import('../useSelectList').SelectListProps & DictSelectProps} props 
+ * @returns {JSX.Element}
+ */
+const DictSelect=(props)=>{
+  const {
+    mode='single',
+    value:_value,
+    style:_style={},
+    placeholder='请选择',
+    onChange,
+    disabled=false,
+    emDict,
+    required=false,
+  } = props;
+
+  const allowClear = props.allowClear??((mode=='single'&&required==false)?true:false);
+
+  const refDestory = useRef(false);
+  const selectList = useSelectList(props);
+
+  // 初始化加载下拉框数据
+  const init = async ()=>{
+    if(refDestory.current)return;
+    let values=[];
+    const data = emDict.list.map(item=>{
+      return {
+        label:item.label,
+        value:`${item.id}`,
+        data:item
+      }
+    })
+    values=data;
+    return await selectList.init(values);
+  }
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.indexOf(input) >=0 ){
+      return true;
+    }
+    return false;
+  }
+  const onValueChange=(newValue,options)=>{
+    if(onChange)onChange(newValue,options);
+  }
+
+  useEffect(()=>{
+    init();
+    return ()=>{refDestory.current=true}
+  },[])
+
+  
+  return (
+    <Select
+      loading={selectList.list===null}
+      disabled={selectList.list===null || disabled}
+      style={{..._style}}
+      placeholder={placeholder}
+      allowClear={allowClear?true:false}
+      // @ts-ignore
+      mode={mode}
+      showSearch
+      value={selectList.value}
+      options={selectList.list}
+      onChange={onValueChange}
+      filterOption={onFilter}
+      {...selectList.props}
+    />
+  );
+}
+
+export default DictSelect;

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

@@ -0,0 +1,7 @@
+import DictSelect from './dictSelect';
+import DefaultServicesSelect from './defaultServicesSelect';
+
+export {DictSelect};
+export {DefaultServicesSelect};
+
+export default {DictSelect,DefaultServicesSelect};

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

@@ -0,0 +1,217 @@
+import React, { useEffect, 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获取到所有匹配的对象数据
+ * 
+*/
+
+/**
+ * 通用的管理选择下拉框数据的hooks
+ * @param {SelectListProps} props 
+ * @returns {UseSelectList}
+ */
+const useSelectList=(props)=>{
+  const {
+    mode='single',
+    value:_value,
+    style:_style={},
+    showAll=false,
+    allValue='',
+    onNoMatchData,
+    onNoMatchDataLabel,
+    noCheckNotFound=false,
+    noMatchList=[],
+  } = props;
+
+  const [list,setList]= useState(null);
+  const [value,setValue]=useState(mode=='single'?'':[]);
+  const [maxTagCount] = useState(()=>{
+    if(mode=='multiple'){
+      if(props.maxTagCount == 0){
+        return undefined;
+      }
+      if(props.maxTagCount){
+        return props.maxTagCount;
+      }
+      return 'responsive';
+    }
+    return undefined;
+  })
+
+  const [suffixIcon] = useState(props.suffixIcon||undefined)
+
+  /**
+   * 初始化加载下拉框数据
+   * @param {{label:string,value:string,data:any}[]} values 
+   */
+  const init = async (values)=>{
+    if(showAll && values?.length>0){
+      let value =allValue;
+      values =[{label:'全部',value,data:values},...values]
+    }
+    setList(values);
+    return true;
+  }
+
+  /**
+   * 通过值获取到选项对象
+   * @param {string|string[]} value 
+   * @returns {object[]}
+   */
+  const getItemByValue=(value)=>{
+    if(!value)return [];
+    let finder = [];
+    if(Array.isArray(value)==false){
+      finder = [value];
+    }else{
+      finder= [...value];
+    }
+    let req=[];
+    list.filter(item=>{
+      for(let i=0;i<finder.length;i++){
+        if(finder[i]==item.value){
+          req.push(item.data);
+          finder.splice(i,1);
+          break;
+        }
+      }
+    })
+    return req;
+  }
+  /**
+   * 在备用数据内匹配数据
+   * @param {number} id 
+   */
+  const matchBackupList=(id)=>{
+    if(!noMatchList||noMatchList.length<=0){return null}
+      let matchData = noMatchList.filter(data=>data.id==id);
+      if(matchData&&matchData[0]){
+        return {value:''+id,label:matchData[0].label,data:null}
+      }
+      return null;
+  }
+
+  // 当数据变动时，检查当前选择值是否有匹配不到的数据，并处理
+  const checkNoFindData=()=>{
+    if(noCheckNotFound)return;
+    if(list === null)return;
+    if( [undefined,null].includes(value))return;
+    let noFindItems=[];
+    if(!Array.isArray(value)){
+      if(value==='')return;
+      noFindItems = [value]
+    }else{
+      noFindItems = [...value];
+    }
+    if(noFindItems.length<=0)return;
+
+    for(let i=0;i<list.length;i++){
+      let id = list[i].value;
+      let idx = noFindItems.indexOf(id);
+      // 找到了则移除
+      if( idx >= 0 ){
+        noFindItems.splice(idx,1);
+      }
+    }
+    if(noFindItems.length<=0)return;
+    noFindItems.forEach(id=>{
+      let matchData = matchBackupList(id);
+      if(matchData){
+        list.push(matchData);
+        return;
+      }
+      if(onNoMatchData){
+        let data = onNoMatchData(id);
+        if(data){
+          list.splice(0,0,data);
+          return;
+        }
+      }
+      if(onNoMatchDataLabel){
+        list.splice(0,0,{value:id,label:onNoMatchDataLabel,data:null});
+        return;
+      }
+      list.splice(0,0,{value:id,label:`${id}[不可用]`,data:null});
+    })
+    setList([...list]);
+  }
+
+  useEffect(()=>{
+    if(_value==null||_value==undefined){
+      setValue(undefined);
+      return;
+    }
+    let req;
+    if(mode=='multiple' && Array.isArray(_value)){
+      req= _value.map(id=>`${id}`)
+    }else{
+      req = `${_value}`
+    }
+    setValue(req);
+  },[_value]);
+
+  useEffect(()=>{
+    checkNoFindData();
+  },[value,list,noMatchList])
+
+  return {init,value,list,setValue,getItemByValue,props:{maxTagCount,suffixIcon,
+    maxTagPlaceholder:(omittedValues) => (
+      <Tooltip
+        overlayStyle={{
+          pointerEvents: 'none',
+        }}
+        title={omittedValues.map(({ label }) => label).join(', ')}
+      >
+        <span className='antd-show-tag-more-label'><i></i><i></i><i></i></span>
+      </Tooltip>
+    )
+
+  }}
+}
+export default useSelectList;