@bit-sun/business-component 2.2.49 → 2.3.0-alpha.1

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

@@ -15,25 +15,7 @@ import { setInitialShowColumn } from '@/plugin/TableColumnSetting/utils';
 import { handleAntdColumnsSpecialParams, uuid } from '@/utils/utils';
 import { getItemDefaultWidth, noEmptyArray } from '@/components/Business/columnSettingTable/utils';
 import { getEmployeeId } from '@/utils/LocalstorageUtils';
-import { getSelectDataList } from './helps';
-
-const loadSelectSource = (url: string, params?: any) => {
-  return new Promise((resolve, reject) => {
-    axios
-      .get(`${url}?${stringify(params)}`)
-      .then((result: any) => {
-        result = result.data;
-        if ((result?.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
-          message.error(result.msg);
-          return;
-        }
-        resolve(result);
-      })
-      .catch((err) => {
-        reject(err);
-      });
-  })
-};
+import { getSelectDataList, loadSelectSource, formatFormSourceList } from './helps';
 
 const checkSpuMatchCode = (data: any) => {
   return new Promise((resolve, reject) => {
@@ -71,36 +53,6 @@ const ResizeableTitle = (props) => {
   );
 };
 
-const formatSource = (reData: any, position: number, changePosition: number,changeSearchForm: any,resKeyValue=['code', 'name']) => {
-  const data = reData && reData[position]?.data;
-  const list = Array.isArray(data) ? data :(data?.items || data?.list || data?.children || []);
-  const formatData = list?.length ? list.map((v: any) => ({ text: v[resKeyValue[1]], value: v[resKeyValue[0]] })) : [];
-  changeSearchForm[changePosition] = {...changeSearchForm[changePosition], initialSource: formatData}
-}
-
-// 格式化树选择器数据源
-const mapSearchTree = (treeDataItem: any, resKeyValue: any) => {
-  const haveChildren = Array.isArray(treeDataItem.children) && treeDataItem.children.length > 0;
-  return {
-    title: treeDataItem[resKeyValue[1]],
-    value: treeDataItem[resKeyValue[0]],
-    parentId: treeDataItem.parent,
-    data: { ...treeDataItem },
-    isLeaf: !haveChildren,
-    disabled: haveChildren,
-    children: haveChildren ? treeDataItem.children.map((i: any) => mapSearchTree(i, resKeyValue)) : [],
-  };
-};
-const formatTreeDataSource = (reData: any, position: number, changePosition: number,changeSearchForm: any,resKeyValue=['id', 'name']) => {
-  const data = reData && reData[position]?.data;
-  const formatData = (data &&
-    Array.isArray(data) &&
-    data.length &&
-    data.map((ites: any) => mapSearchTree(ites, resKeyValue))) ||
-  []
-  changeSearchForm[changePosition].field.props.treeData = formatData;
-}
-
 const initTableCode = {
   'sku': ['skuSelect-tableOptionsToChoosePartCode','skuSelect-tableSelectedItemPartCode'],
   'skc': ['skcSelect-tableOptionsToChoosePartCode','skcSelect-tableSelectedItemPartCode'],
@@ -127,7 +79,8 @@ const AddSelect = (props: any) => {
     beforeShowModal,
     tableCodeList = [], // 非必填 默认取组件定义code,如需自定义----数组第一位为供选择商品的table的code,第二位为已选择商品的table的code
     businessType = 'sku',
-    isAllowRepeatedSelect = false
+    isAllowRepeatedSelect = false,
+
   } = props;
   const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField = 'name', mappingTextShowKeyField, mappingValueField = 'code', mappingTextShowTextField } = requestConfig || {};
   const resultSourceKey = sourceName || requestConfig?.sourceName || 'supplierCode'
@@ -665,76 +618,14 @@ const AddSelect = (props: any) => {
   }
 
   useEffect(() => {
-    if(businessType == 'sku') {
-      Promise.all([
-        loadSelectSource(`/items/brand/queryBrandList`, {
-          pageSize: 5000,
-          currentPage: 1,
-          'ctl-withAuth': true
-        }),
-        loadSelectSource(`/items/category/queryCategoryTree`, {
-          pageSize: 5000,
-          currentPage: 1,
-        }),
-      ]).then((x: any)=>{
-        formatSource(x,0, 2, tableSearchForm,['id','name'])
-        formatTreeDataSource(x,1, 3, tableSearchForm)
-      })
-    }
-    if(businessType == 'skc') {
-      Promise.all([
-        loadSelectSource(`/items/item/propertyValue/sizeBySkcConfig`, {
-          pageSize: 10000,
-          currentPage: 1,
-          type: 2, // 类型：1尺码；2颜色
-        }),
-        loadSelectSource(`/items/category/queryCategoryTree`, {
-          pageSize: 5000,
-          currentPage: 1,
-        }),
-        loadSelectSource(`/items/class/withProperty`, {
-          pageSize: 5000,
-          currentPage: 1,
-        }),
-        loadSelectSource(`/items/brand/queryBrandList`, {
-          pageSize: 5000,
-          currentPage: 1,
-          'ctl-withAuth': true
-        }),
-      ]).then((x: any)=>{
-        formatSource(x,0, 3, tableSearchForm,['value','value'])
-        formatTreeDataSource(x,1, 4, tableSearchForm)
-        formatSource(x,2, 5, tableSearchForm,['id','name'])
-        formatSource(x,3, 6, tableSearchForm,['id','name'])
-      })
-    }
-    if(businessType == 'spu') {
-      Promise.all([
-        loadSelectSource(`/user/orgViewNode/listNoPage`, {
-          'qp-employeeId-eq': getEmployeeId(),
-          'qp-orgViewCode-eq': 'business-organizational-view',
-          'ctl-withDefaultOrg': true,
-        }),
-        loadSelectSource(`/items/brand/queryBrandList`, {
-          pageSize: 5000,
-          currentPage: 1,
-          'ctl-withAuth': true
-        }),
-        loadSelectSource(`/items/category/queryCategoryTree`, {
-          pageSize: 5000,
-          currentPage: 1,
-        }),
-        loadSelectSource(`/items/class/withProperty`, {
-          pageSize: 5000,
-          currentPage: 1,
-        }),
-      ]).then((x: any)=>{
-        formatSource(x,0, 2, tableSearchForm,['targetId','name'])
-        formatSource(x,1, 3, tableSearchForm,['id','name'])
-        formatTreeDataSource(x,2, 4, tableSearchForm)
-        formatSource(x,3, 5, tableSearchForm,['id','name'])
-      })
-    }
+    const pList = modalTableProps?.promiseLoadList || []
+    if(!pList?.length) return;
+    const list = pList.map((i: any) => {
+      return loadSelectSource(i.url, i.params)
+    });
+    Promise.all(list).then((x: any)=>{
+      formatFormSourceList(x,pList,tableSearchForm)
+    })
   }, [businessType])
 
   useEffect(() => {
@@ -1048,8 +939,8 @@ const AddSelect = (props: any) => {
       setPopValue(popvalue.filter(item => item.uuid !== record.uuid))
       setSelectedRowKeys([])
     } else {
-      setPopValue(popvalue.filter(item => item.skuCode !== record.skuCode))
-      setSelectedRowKeys([...selectedRowKeys.filter(item => item !== record.skuCode)])
+      setPopValue(popvalue.filter(item => item[selectRowKey] !== record[selectRowKey]))
+      setSelectedRowKeys([...selectedRowKeys.filter(item => item !== record[selectRowKey])])
     }
   }
 

package/src/components/Functional/BsAntdSula/BsCascader/index.md

@@ -0,0 +1,62 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  path: /components/functional
+  title: 功能组件
+  order: 0
+title: 级联选择
+order: 7
+---
+
+## BsCascader
+
+Demo:
+
+```tsx
+import React, { useState } from 'react';
+import { BsCascader } from '../../../../index';
+import { request } from 'bssula';
+
+export default () => {
+  const [value, setValue] = useState()
+  
+  return (
+    <div>
+      <BsCascader
+        isAll={true}
+        needNameAndCode={true}
+        notChangeOnSelect={true}
+        initRequestSource={async () => {
+          return await request({
+            url: '/basic/bscArea/getBscAreaList?qp-level-eq=1&qp-pid-eq=100000',
+            method: 'get',
+            converter: ({ data }) => {
+              const handleData =
+                data && data[0]
+                  ? data?.map((item) => {
+                    return {
+                      text: item.name,
+                      value: item.id,
+                      level: item.level,
+                      id: item.id,
+                    };
+                  })
+                  : [];
+              return handleData;
+            },
+          });
+        }}
+        value={value}
+        onChange={(value) => {
+          setValue(value);
+        }}
+        getPopupContainer={() => document.body}
+      />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/Functional/BsAntdSula/BsCascader/index.tsx

@@ -0,0 +1,178 @@
+// @ts-nocheck
+
+import React, { useEffect, useState } from 'react';
+import { Cascader, message } from 'antd';
+import type { CascaderProps as ACascaderProps } from 'antd/lib/cascader';
+import { request } from 'bssula';
+
+export type CascaderSourceItem = {
+  text: any;
+  value: any;
+};
+
+export interface CascaderSource {
+  text: any;
+  value: any;
+  children: CascaderSourceItem[];
+}
+
+export interface CascaderProps extends ACascaderProps {
+  source: CascaderSource[];
+}
+
+const BsCascader = ({
+  source,
+  onChange,
+  value,
+  disabled,
+  needNameAndCode,
+  onlyCode,
+  requiredLength,
+  isAll,
+  notChangeOnSelect,
+  isFirstOnly,
+  initRequestSource,
+  style,
+}: {
+  source: any;
+  onChange: Function;
+}) => {
+  if (!source && !initRequestSource) return null;
+
+  const [handSource, setHandSource] = useState(
+    source?.map((item) => ({ ...item, label: item.text, isLeaf: false })) || [],
+  );
+  useEffect(async () => {
+    if (!source && initRequestSource) {
+      const resData = await initRequestSource();
+      const data =
+        resData?.map((item) => ({
+          ...item,
+          label: item.text,
+          isLeaf: false,
+        })) || [];
+      setHandSource(data);
+    }
+  }, []);
+
+  useEffect(() => {
+    setHandSource(
+      source?.map((item) => ({ ...item, label: item.text, isLeaf: false })) ||
+        [],
+    );
+  }, [source]);
+
+  const [valueSource, setValueSource] = useState([]);
+  const [options, setOptions] = React.useState(handSource);
+  if (options && handSource && options.length != handSource.length) {
+    setOptions(handSource);
+  }
+
+  useEffect(() => {
+    if (value && onlyCode) {
+      if (value?.length) {
+        request({
+          url: `/basic/bscArea/getBscAreaList?qp-code-in=${value}`,
+          method: 'get',
+        }).then((res) => {
+          res = res.sort((a, b) => {
+            return a.level - b.level;
+          });
+          setValueSource(res);
+        });
+      } else {
+        setValueSource([]);
+      }
+    }
+  }, [value]);
+
+  const onChangeInner = (value: string, selectedOptions: any[]) => {
+    if (requiredLength && value.length !== requiredLength) return;
+    if (needNameAndCode) {
+      onChange({
+        PCDName: selectedOptions
+          ? selectedOptions.map((item) => item.text)
+          : [],
+        PCDCode: selectedOptions
+          ? selectedOptions.map((item) => item.value)
+          : [],
+      });
+    } else if (onlyCode) {
+      onChange(
+        selectedOptions ? selectedOptions.map((item) => item.value) : [],
+      );
+    } else {
+      onChange(selectedOptions ? selectedOptions.map((item) => item.text) : []);
+    }
+  };
+
+  const loadData = (selectedOptions) => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+    request({
+      url: `/basic/bscArea/getBscAreaList?qp-pid-eq=${targetOption.id}`,
+      method: 'get',
+      converter: ({ data }) => {
+        const initialVal = data
+          ? data.map((item) => {
+              return {
+                text: item.name,
+                value: item.id,
+                label: item.name,
+                level: item.level,
+                isLeaf: item.level > (isAll ? 2 : 1),
+                id: item.id,
+              };
+            })
+          : [];
+        return initialVal;
+      },
+    })
+      .then((res) => {
+        targetOption.loading = false;
+        if (res.length) {
+          targetOption.children = res;
+        } else {
+          targetOption.children = undefined;
+        }
+        setOptions([...options]);
+      })
+      .catch((err: any) => {
+        message.error('网络错误');
+      });
+  };
+
+  const filter = (inputValue, path) => {
+    return path.some(
+      (option) =>
+        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
+    );
+  };
+
+  let CascaderVal = value;
+  if (needNameAndCode) {
+    CascaderVal = value ? value.PCDName : value;
+  } else if (onlyCode) {
+    CascaderVal = valueSource?.map((item) => item.name)?.join() || [];
+  }
+
+  const showSearch = !!(options.length && options.length > 5);
+
+  if (disabled) return CascaderVal;
+
+  return (
+    <Cascader
+      key={1}
+      style={style}
+      disabled={disabled}
+      value={CascaderVal}
+      options={options}
+      loadData={loadData}
+      onChange={onChangeInner}
+      showSearch={showSearch ? filter : false}
+      changeOnSelect={!notChangeOnSelect}
+    />
+  );
+};
+
+export default BsCascader;

package/src/components/Functional/BsAntdSula/index.ts

@@ -0,0 +1,2 @@
+
+export { default as BsCascader } from './BsCascader'

package/src/components/Functional/EllipsisTooltip/index.d.ts

@@ -0,0 +1,5 @@
+export class EllipsisTooltip {
+  maxLength: number;
+  title: string;
+  style?: any
+}

package/src/components/Functional/EllipsisTooltip/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+class EllipsisTooltip extends React.Component {
+  state = {
+    visible: false,
+  };
+
+  handleVisibleChange = (visible) => {
+    if (this.props.title.length > this.props.maxLength) {
+      this.setState({
+        visible,
+      });
+    }
+  };
+
+  render() {
+    const style = {
+      ...this.props.style,
+    };
+
+    return (
+      <Tooltip
+        visible={this.state.visible}
+        onVisibleChange={this.handleVisibleChange}
+        title={this.props.title}
+      >
+        <div className="customEllipse" style={style}>
+          {this.props.showInfo && this.props.showInfo ||
+          (this.props.title.length > this.props.maxLength ? `${this.props.title.substring(0, this.props.maxLength)}...` : this.props.title)}
+        </div>
+      </Tooltip>
+    );
+  }
+}
+export default EllipsisTooltip;

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

@@ -0,0 +1,30 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 字符超长处理组件
+order: 6
+---
+
+## EllipsisTooltip
+
+字符超长处理组件
+
+```tsx
+import React, { useRef } from 'react';
+import { EllipsisTooltip } from '../../../index';
+
+export default () => {
+  
+  return (
+    <div>
+      <EllipsisTooltip maxLength={10} title={'一二三四五六七八九十十一十二十三'} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle