@bit-sun/business-component 2.4.13 → 2.4.15-beta

package/src/components/Functional/SearchSelect/utils.ts

@@ -1,3 +1,3 @@
-export const handleSourceName = (sName: any) => {
-  return sName
-}
+export const handleSourceName = (sName: any) => {
+  return sName
+}

package/src/components/Functional/TreeSearchSelect/index.md

@@ -1,47 +1,47 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 功能组件
-  order: 0
-title: 树型选择器
-order: 4
----
-
-## TreeSearchSelect
-
-部门选择器Demo:
-
-```tsx
-import React, { useState } from 'react';
-import { TreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    remoteSource: {
-      url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
-      initialParams: { 'orgViewCode': 'administrative-organization-view' },
-      resKeyValue: ['code', 'name'],
-    },
-    value,
-    isChoose: false, // 控制是否父节点可选中，默认不可选中
-    treeCheckable: true,
-    onChange: (v) => {
-      setValue(v)
-    }
-  };
-
-  return (
-    <div>
-      <TreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 树型选择器
+order: 4
+---
+
+## TreeSearchSelect
+
+部门选择器Demo:
+
+```tsx
+import React, { useState } from 'react';
+import { TreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    remoteSource: {
+      url: `/user/orgViewNode/common/getTreeForOrgViewAndTenant`,
+      initialParams: { 'orgViewCode': 'administrative-organization-view' },
+      resKeyValue: ['code', 'name'],
+    },
+    value,
+    isChoose: false, // 控制是否父节点可选中，默认不可选中
+    treeCheckable: true,
+    onChange: (v) => {
+      setValue(v)
+    }
+  };
+
+  return (
+    <div>
+      <TreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/Functional/TreeSearchSelect/index.tsx

@@ -1,201 +1,204 @@
-import React, { useState, useEffect } from 'react';
-import { TreeSelect, Tooltip, Tag } from 'antd';
-import axios from 'axios';
-import { stringify } from 'querystring';
-import _ from "lodash"
-import { judgeIsRequestSuccess } from '@/utils/requestUtils';
-
-const TreeSearchSelect = (props: any) => {
-  const [treeData, setTreeData] = useState([]);
-  const {
-    ctx,                      // ctx中有自己的name
-    value,
-    valueName,   // 当labelInValue为true时，值为null
-    onChange,
-    onChangeName, // 当labelInValue为true时，此函数无意义，故无需传
-    placeholder,
-    remoteSource,
-    initialValue,
-    treeCheckable = false,
-    showSearch = true,
-    maxTagCount = 1,
-    multiple = false,
-    isChoose = false, // 默认父节点不可选；传true则不限制
-    rootDisabled = false, // 默认根节点可选
-    mode,
-    getPopupContainer,
-    labelInValue = false,
-    showArrow = true,
-    allowClear = true,
-    showCheckedStrategy = props?.treeCheckStrictly ? TreeSelect.SHOW_ALL : TreeSelect.SHOW_PARENT,
-    style = { width: '100%' },
-    getTreeData,
-    disabled,
-    ...restProps
-  } = props;
-
-  const {
-    url,
-    headers,
-    paramsKey = 'qp-name-like',
-    resKeyValue = ['id', 'name'],
-    initialParams = {},
-    treeChildrenRoom = 'children',// 树状结构的子集容器 默认为 'children'
-  } = remoteSource;
-
-  const mapSearchTree = (treeDataItem: any) => {
-    const haveChildren = Array.isArray(treeDataItem[treeChildrenRoom]) && treeDataItem[treeChildrenRoom].length > 0; // 盘算是否为父节点
-    const isRoot = treeDataItem?.id == '0'; // 判断是否为根节点
-    return {
-      title: treeDataItem[resKeyValue[1]],
-      key: treeDataItem[resKeyValue[0]],
-      value: treeDataItem[resKeyValue[0]],
-      parentId: treeDataItem.parent,
-      data: { ...treeDataItem },
-      isLeaf: !haveChildren,
-      disabled: isDisabled(haveChildren,isRoot),
-      children: haveChildren ? treeDataItem[treeChildrenRoom].map((i: any) => mapSearchTree(i)) : [],
-    };
-  };
-
-  const isDisabled = (isParent: boolean,isRoot: boolean) => {
-    if (isChoose) {
-      if(rootDisabled && isRoot){
-        return rootDisabled
-      }
-      return false;
-    }
-    return isParent;
-  }
-
-  /* 实时查询   但是目前用的直接是完整数据源, 所以没有使用 */
-  const handleSearch = (q: string) => {
-    const paramsData = {
-      [`${paramsKey}`]: q,
-      ...initialParams,
-    }
-    axios.get(`${url}?${stringify(paramsData)}`, {headers}).then(async (res: any) => {
-      const resData = res?.data || [];
-      let coverData;
-
-      if(judgeIsRequestSuccess(resData)) {
-        const { data } = resData;
-        if (remoteSource.converter) {
-          coverData = await remoteSource.converter({ data: [data] })
-        } else {
-          const dataList = (data && Array.isArray(data)) ? data : (data && [data] || []);
-          coverData = dataList.length && dataList.map((ites: any) => mapSearchTree(ites)) || [];
-        }
-      } else {
-        coverData = []
-      }
-
-      setTreeData(coverData);
-      ctx?.form?.setFieldSource(ctx.name, coverData);
-    });
-  };
-
-  const formatData = (value: any) => {
-    if (labelInValue) {
-      const formatResult = multiple||treeCheckable ? value.map((i: any) => ({...i, key: i.value})) : { ...value, key: value?.value };
-      return formatResult
-    } else {
-      const formatResult = multiple||treeCheckable ? value.map((i: any) => (i?.value || i)) : (_.get(value?.[0], 'value') || value)
-      return formatResult
-    }
-  }
-  const parallelData = (data: any,result: any) => {
-    data.forEach((i: any) => {
-      result.push(i);
-      if (i[treeChildrenRoom]) {
-        parallelData(i[treeChildrenRoom], result);
-      }
-    });
-    return result;
-  }
-  const getSelectItem = (tData: any,selectValue: any) => {
-    const handleList = tData||[];
-    let result = [];
-    if(labelInValue) {
-      result = multiple||treeCheckable ? (selectValue?.map((i: any) => {
-        if(handleList.some((s: any) => s.key == i.value)){
-          return handleList.find((s: any) => s.key == i.value)
-        }
-      }) || []) : (handleList?.find((s: any) => s.key == selectValue?.value)||{})
-    } else {
-      const cValue = _.get(selectValue?.[0], 'value', selectValue);
-      result = multiple||treeCheckable ? (selectValue?.map((i: any) => {
-        if(handleList.some((s: any) => s.key == i)){
-          return handleList.find((s: any) => s.key == i)
-        }
-      }) || []) : (handleList?.find((s: any) => s.key == cValue)||{})
-    }
-    return result;
-  }
-  const handleChange = (data: any, dataName: any) => {
-    const handleData = formatData(data);
-    // 获取选中树节点当条数据，并返回给调用业务
-    const parallelTreeData = parallelData(treeData,[])
-    const currentItem = getSelectItem(parallelTreeData,data)
-    onChange(handleData,data,currentItem,parallelTreeData);
-    onChangeName && onChangeName(dataName);
-    getTreeData && getTreeData(treeData); // 把树节点暴露出去
-    ctx?.form?.setFieldValue(ctx.name, handleData);
-  };
-
-  useEffect(() => {
-    handleSearch(initialValue);
-  }, []);
-
-  const maxTagPlaceholder = (selectedValues: any) => {
-    const onClose = (e: any,item: any) => {
-      e.preventDefault();
-      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value): JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
-      const newValueName = labelInValue ? null: JSON.parse(JSON.stringify(valueName)).filter((i: any) => i !== item.label)
-      handleChange(newValue, newValueName);
-    }
-    return (
-      <Tooltip title={selectedValues.map((i: any) => (
-        <Tag
-          closable={true}
-          onClose={(e) => onClose(e,i)}
-          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
-        >
-          {i.label}
-        </Tag>
-      ))}>
-        {`+ ${selectedValues?.length}`}
-      </Tooltip>
-    )
-  }
-
-  return (
-    <div className={'tree_search_select'}>
-      <TreeSelect
-        {...restProps}
-        treeCheckable={treeCheckable}
-        maxTagCount={maxTagCount}
-        showSearch={showSearch}
-        style={style}
-        value={value}
-        dropdownStyle={{ maxHeight: 400, maxWidth: 100, overflow: 'auto' }}
-        treeData={treeData}
-        placeholder={placeholder}
-        allowClear={allowClear}
-        labelInValue={labelInValue}
-        showArrow={showArrow}
-        showCheckedStrategy={showCheckedStrategy}
-        treeNodeFilterProp={'title'}
-        treeDefaultExpandAll
-        multiple={multiple} // 	支持多选（当设置 treeCheckable 时自动变为 true）
-        maxTagPlaceholder={maxTagPlaceholder}
-        onChange={handleChange}
-        disabled={disabled || mode==='view' || ctx?.mode === 'view'}
-        getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || document.body}
-      >
-      </TreeSelect>
-    </div>
-  );
-};
-
-export default TreeSearchSelect;
+import React, { useState, useEffect } from 'react';
+import { TreeSelect, Tooltip, Tag } from 'antd';
+import axios from 'axios';
+import { stringify } from 'querystring';
+import _ from "lodash"
+import { judgeIsRequestSuccess } from '@/utils/requestUtils';
+
+const TreeSearchSelect = (props: any) => {
+  const [treeData, setTreeData] = useState([]);
+  const {
+    ctx,                      // ctx中有自己的name
+    value,
+    valueName,   // 当labelInValue为true时，值为null
+    onChange,
+    onChangeName, // 当labelInValue为true时，此函数无意义，故无需传
+    placeholder,
+    remoteSource,
+    initialValue,
+    treeCheckable = false,
+    showSearch = true,
+    maxTagCount = 1,
+    multiple = false,
+    isChoose = false, // 默认父节点不可选；传true则不限制
+    rootDisabled = false, // 默认根节点可选
+    mode,
+    getPopupContainer,
+    labelInValue = false,
+    showArrow = true,
+    allowClear = true,
+    showCheckedStrategy = props?.treeCheckStrictly ? TreeSelect.SHOW_ALL : TreeSelect.SHOW_PARENT,
+    style = { width: '100%' },
+    getTreeData,
+    disabled,
+    ...restProps
+  } = props;
+
+  const {
+    url,
+    headers,
+    paramsKey = 'qp-name-like',
+    resKeyValue = ['id', 'name'],
+    initialParams = {},
+    treeChildrenRoom = 'children',// 树状结构的子集容器 默认为 'children'
+    specialBracket = false
+  } = remoteSource;
+
+  const mapSearchTree = (treeDataItem: any) => {
+    const haveChildren = Array.isArray(treeDataItem[treeChildrenRoom]) && treeDataItem[treeChildrenRoom].length > 0; // 盘算是否为父节点
+    const isRoot = treeDataItem?.id == '0'; // 判断是否为根节点
+    return {
+      title: specialBracket
+        ? `【${treeDataItem[resKeyValue[0]]}】${treeDataItem[resKeyValue[1]]}`
+        : treeDataItem[resKeyValue[1]],
+      key: treeDataItem[resKeyValue[0]],
+      value: treeDataItem[resKeyValue[0]],
+      parentId: treeDataItem.parent,
+      data: { ...treeDataItem },
+      isLeaf: !haveChildren,
+      disabled: isDisabled(haveChildren, isRoot),
+      children: haveChildren ? treeDataItem[treeChildrenRoom].map((i: any) => mapSearchTree(i)) : [],
+    };
+  };
+
+  const isDisabled = (isParent: boolean, isRoot: boolean) => {
+    if (isChoose) {
+      if (rootDisabled && isRoot) {
+        return rootDisabled
+      }
+      return false;
+    }
+    return isParent;
+  }
+
+  /* 实时查询   但是目前用的直接是完整数据源, 所以没有使用 */
+  const handleSearch = (q: string) => {
+    const paramsData = {
+      [`${paramsKey}`]: q,
+      ...initialParams,
+    }
+    axios.get(`${url}?${stringify(paramsData)}`, { headers }).then(async (res: any) => {
+      const resData = res?.data || [];
+      let coverData;
+
+      if (judgeIsRequestSuccess(resData)) {
+        const { data } = resData;
+        if (remoteSource.converter) {
+          coverData = await remoteSource.converter({ data: [data] })
+        } else {
+          const dataList = (data && Array.isArray(data)) ? data : (data && [data] || []);
+          coverData = dataList.length && dataList.map((ites: any) => mapSearchTree(ites)) || [];
+        }
+      } else {
+        coverData = []
+      }
+
+      setTreeData(coverData);
+      ctx?.form?.setFieldSource(ctx.name, coverData);
+    });
+  };
+
+  const formatData = (value: any) => {
+    if (labelInValue) {
+      const formatResult = multiple || treeCheckable ? value.map((i: any) => ({ ...i, key: i.value })) : { ...value, key: value?.value };
+      return formatResult
+    } else {
+      const formatResult = multiple || treeCheckable ? value.map((i: any) => (i?.value || i)) : (_.get(value?.[0], 'value') || value)
+      return formatResult
+    }
+  }
+  const parallelData = (data: any, result: any) => {
+    data.forEach((i: any) => {
+      result.push(i);
+      if (i[treeChildrenRoom]) {
+        parallelData(i[treeChildrenRoom], result);
+      }
+    });
+    return result;
+  }
+  const getSelectItem = (tData: any, selectValue: any) => {
+    const handleList = tData || [];
+    let result = [];
+    if (labelInValue) {
+      result = multiple || treeCheckable ? (selectValue?.map((i: any) => {
+        if (handleList.some((s: any) => s.key == i.value)) {
+          return handleList.find((s: any) => s.key == i.value)
+        }
+      }) || []) : (handleList?.find((s: any) => s.key == selectValue?.value) || {})
+    } else {
+      const cValue = _.get(selectValue?.[0], 'value', selectValue);
+      result = multiple || treeCheckable ? (selectValue?.map((i: any) => {
+        if (handleList.some((s: any) => s.key == i)) {
+          return handleList.find((s: any) => s.key == i)
+        }
+      }) || []) : (handleList?.find((s: any) => s.key == cValue) || {})
+    }
+    return result;
+  }
+  const handleChange = (data: any, dataName: any) => {
+    const handleData = formatData(data);
+    // 获取选中树节点当条数据，并返回给调用业务
+    const parallelTreeData = parallelData(treeData, [])
+    const currentItem = getSelectItem(parallelTreeData, data)
+    onChange(handleData, data, currentItem, parallelTreeData);
+    onChangeName && onChangeName(dataName);
+    getTreeData && getTreeData(treeData); // 把树节点暴露出去
+    ctx?.form?.setFieldValue(ctx.name, handleData);
+  };
+
+  useEffect(() => {
+    handleSearch(initialValue);
+  }, []);
+
+  const maxTagPlaceholder = (selectedValues: any) => {
+    const onClose = (e: any, item: any) => {
+      e.preventDefault();
+      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value) : JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
+      const newValueName = labelInValue ? null : JSON.parse(JSON.stringify(valueName)).filter((i: any) => i !== item.label)
+      handleChange(newValue, newValueName);
+    }
+    return (
+      <Tooltip title={selectedValues.map((i: any) => (
+        <Tag
+          closable={true}
+          onClose={(e) => onClose(e, i)}
+          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+        >
+          {i.label}
+        </Tag>
+      ))}>
+        {`+ ${selectedValues?.length}`}
+      </Tooltip>
+    )
+  }
+
+  return (
+    <div className={'tree_search_select'}>
+      <TreeSelect
+        {...restProps}
+        treeCheckable={treeCheckable}
+        maxTagCount={maxTagCount}
+        showSearch={showSearch}
+        style={style}
+        value={value}
+        dropdownStyle={{ maxHeight: 400, maxWidth: 100, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder={placeholder}
+        allowClear={allowClear}
+        labelInValue={labelInValue}
+        showArrow={showArrow}
+        showCheckedStrategy={showCheckedStrategy}
+        treeNodeFilterProp={'title'}
+        treeDefaultExpandAll
+        multiple={multiple} // 	支持多选（当设置 treeCheckable 时自动变为 true）
+        maxTagPlaceholder={maxTagPlaceholder}
+        onChange={handleChange}
+        disabled={disabled || mode === 'view' || ctx?.mode === 'view'}
+        getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || document.body}
+      >
+      </TreeSelect>
+    </div>
+  );
+};
+
+export default TreeSearchSelect;