@bit-sun/business-component 4.0.12-alpha.9 → 4.0.13-alpha.11

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

@@ -0,0 +1,439 @@
+import React from 'react';
+import { stringify } from 'querystring';
+import { omit, uniqBy, escapeRegExp } from "lodash";
+import moment from 'moment';
+import { Tooltip, Tag } from 'antd';
+
+export const columnsPerRow = 4; // 每行的列数
+export const ColSpan = 6; // 查询条件 每行col = 24 /columnsPerRow
+export const handleSourceName = (sName: any) => {
+  return sName
+}
+
+ // 生成唯一值
+ export const makeUniqueValue = () => {
+  const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
+  return generateUnitKey;
+}
+
+// ------------------------------------------处理样式相关--开始----------------------------------------
+export const getFormRowInfo = (list: any) => {
+  const totalRows = Math.ceil(list.length / columnsPerRow); // 计算总行数
+  const lastRowColumns = (list.length+1) % columnsPerRow; // 计算最后一行的实际列数
+  const emptySlots = lastRowColumns === 0 ? 0 : columnsPerRow - lastRowColumns; // 计算最后一行的空位数
+  const emptyArray = new Array(emptySlots).fill(null); // 生成长度为 emptySlots 的数组
+  return { totalRows, emptyArray }
+}
+
+export const defaultVisibleFieldsCount = 7;
+export const getVisibleFieldsCount = (modalTableProps: any) => {
+  const { visibleFieldsCount = defaultVisibleFieldsCount, tableSearchForm } = modalTableProps || {};
+  let count = visibleFieldsCount;
+  if (count === true) {
+    return tableSearchForm?.length;
+  }
+  return count!;
+}
+export const hasMoreQueryFields = (modalTableProps: any) => {
+  const { tableSearchForm } = modalTableProps || {}
+  const visibleFieldsCount = getVisibleFieldsCount(modalTableProps);
+  return visibleFieldsCount < tableSearchForm?.length;
+}
+export const getTableHeigth = (list: any) => {
+  const totalRows = Math.ceil((list?.length+1) / 4);
+  if(totalRows == 1) return 358;  // modal弹窗760 调整为700 适应小屏     
+  return 411 - totalRows*10  
+}
+
+// ------------------------------------------处理样式相关--结束----------------------------------------
+
+
+// ------------------------------------------处理数据相关--开始----------------------------------------
+export const formatSelectedValue = (value: any) => {
+  return value?.map((s: any) => ({ 
+    value: s?.value||s,
+    key: s?.key||s?.value||s,
+    label: s?.label|| '',
+  }))||[];
+}
+export const getRealStr = (oldSelect: any,newSelect: any, record: any) => {
+  return oldSelect?.length ? oldSelect.some((o: any) => o.value == record?.value) ? oldSelect.filter((s: any) => s.value != record?.value) : [...oldSelect,...newSelect] : newSelect;
+}
+export const getCurrentSRKs = (selectMode: any,labelInValue:boolean,value: any) => {
+  return selectMode ? (labelInValue ? value?.map((s: any)=> (s?.value||s)) : value) : (labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[])
+}
+export const getRenderSource = (currentSRKs: any, items: any) => {
+  // 判空处理
+  if(!currentSRKs?.length) return items||[];
+
+  // 创建映射对象 用于记录原始选中顺序
+  const orderMap = new Map<number, number>();
+  currentSRKs?.forEach((value: any, index: number) => {
+    orderMap.set(value, index);
+  });
+
+  // 被选中数据集合，获取之后排序
+  const selectedOption = items?.filter((option: any) => currentSRKs?.includes(option.value))||[];
+  const selectedOptionSort = selectedOption?.sort((a: any, b: any) => {
+    return (orderMap.get(a.value) ?? Infinity) - (orderMap.get(b.value) ?? Infinity);
+  })||[];
+
+  // 未选中数据集合
+  const otherOptions = items?.filter((option: any) => !currentSRKs?.includes(option.value))||[];
+
+  return [
+    ...selectedOptionSort,
+    ...otherOptions
+  ]
+}
+
+// ------------------------------------------处理数据相关--结束----------------------------------------
+
+
+
+// ------------------------------------------查询 & 数据源 相关处理--开始----------------------------------------
+export const handleParams = (params: any) => {
+  for (const key in params) {
+    if (Object.prototype.hasOwnProperty.call(params, key)) {
+      const element = params[key];
+      if (element && key.indexOf('*number*') >= 0) {
+        const dataParams = key.split('*number*');
+        dataParams.forEach((value, index) => {
+          params[value] = element[index];
+        });
+        delete params[key];
+      } else if (element && key.indexOf('*address*') >= 0) {
+        const dataParams = key.split('*address*');
+        dataParams.forEach((value, index) => {
+          params[value] = element.PCDCode[index];
+        });
+        delete params[key];
+      } else if (element && key.indexOf('*costType*') >= 0) {
+        const dataParams = key.split('*costType*');
+        // eslint-disable-next-line prefer-destructuring
+        params[dataParams[0]] = element[1];
+        delete params[key];
+      } else if (element && key.indexOf('*fullDate*') >= 0) {
+        const dataParams = key.split('*fullDate*');
+        dataParams.forEach((value, index) => {
+          if (index === 0) {
+            params[value] = moment(element[index])
+              .millisecond(0)
+              .second(0)
+              .minute(0)
+              .hour(0)
+              .format('YYYY-MM-DD HH:mm:ss');
+          } else {
+            params[value] = moment(element[index])
+              .millisecond(59)
+              .second(59)
+              .minute(59)
+              .hour(23)
+              .format('YYYY-MM-DD HH:mm:ss');
+          }
+        });
+        delete params[key];
+      } else if (typeof element === 'boolean' && key.indexOf('*checkBox*') >= 0) {
+        const dataParams = key.split('*checkBox*');
+        if (element) {
+          params[dataParams[0]] = 0
+        }
+        delete params[key];
+      } else if (element && key.indexOf('*cascader*') >= 0) {
+        const dataParams = key.split('*cascader*');
+        params[dataParams[0]] = element[element.length - 1]
+        delete params[key];
+      } else if (element && key.indexOf('*date*') >= 0) {
+        const dataParams = key.split('*date*')
+        dataParams.forEach((value, index) => {
+          if (index === 0) {
+            params[value] = moment(element[index])
+              .format('YYYY-MM-DD');
+          } else {
+            params[value] = moment(element[index])
+              .format('YYYY-MM-DD');
+          }
+        });
+        delete params[key];
+      } else if (element && key.indexOf('*multiInput') >= 0) {
+      let name = '',
+        value = element['value'];
+      if (value.indexOf(',') >= 0) {
+        name = `qp-${element['name']}-in`;
+      } else {
+        name = `qp-${element['name']}-like`;
+      }
+      params[name] = value;
+      delete params[key];
+    }
+      else if (element && key.indexOf('*') >= 0) {
+        const dataParams = key.split('*');
+        dataParams.forEach((value, index) => {
+          params[value] = element[index].format('YYYY-MM-DD HH:mm:ss');
+        });
+        delete params[key];
+      } else if (element && key.indexOf('_selectNumberRange') >= 0) { // key = xxxxx_selectNumberRange   qp-xxxxx-gt
+        const dataParams = key.split('_selectNumberRange')[0]
+        if (params[key][0] === 'range') {
+          if (params[key][1][0]) {
+            params[`qp-${dataParams}-ge`] = params[key][1][0]
+          }
+          if (params[key][1][1]) {
+            params[`qp-${dataParams}-le`] = params[key][1][1]
+          }
+        } else {
+          params[`qp-${dataParams}-${params[key][0]}`] = params[key][1]
+        }
+        delete params[key]
+      } else if (Array.isArray(element)) {
+        params[key] = element.join(',');
+      } else if (element == null || element === undefined || String(element).trim() === '') {
+        delete params[key]
+      }
+    }
+  }
+}
+
+//处理单据编号查询 如果是查询单条数据 就是模糊查询 两条以上就是精准查询
+export const convertOrderNo = (params: any) => {
+  //需要处理得编号字段名
+  const arr = [
+    'qp-skuCode-in',
+    'qp-eancode-in',
+    'qp-itemCode-in',
+  ];
+  for (let i = 0; i < arr.length; i++) {
+    if (params[arr[i]]) {
+      if (!params[arr[i]].includes(',')) {
+        params[arr[i].replace(/(.*)in/, '$1like')] = params[arr[i]];
+        delete params[arr[i]];
+      }
+    }
+  }
+  return params;
+};
+
+export const convertQueryParams = (params: any) => {
+  const result = convertOrderNo(params)
+  return omit(result,['UNIQUE_SPEC']); // 处理sku选择器属性参数
+}
+export const convertUrlQueryParams = (params: any) => {
+  // 非query请求：默认参数拼接URL，设置属性noUrlQueryParams可不拼接
+  return params?.noUrlQueryParams ? '' : `?${stringify(convertQueryParams(params))}`;
+}
+
+export const convertBodyParams = (params: any) => {
+  // 处理sku选择器属性参数
+  let unique_params = null;
+  if (params['UNIQUE_SPEC']) {
+    unique_params = params['UNIQUE_SPEC']?.propertyList || [];
+  }
+
+  // body参数来源：sku选择器固定参数 > 调用所传bodyParams > 默认参数-无
+  return unique_params || params?.bodyParams || null;
+}
+
+
+const convertRes = (data: any, otherParams: any) => {
+  const {
+    mappingTextField,
+    mappingTextShowTextField,
+    mappingTextShowKeyField,
+    mappingValueField,
+    specialBracket,
+    type,
+    queryParams,
+  } = otherParams;
+
+  return data.map((item: any, index: number) => {
+    let textShowText = item[mappingTextField];
+    if (mappingTextShowTextField) {
+      textShowText = []
+      if (Array.isArray(mappingTextShowTextField)) {
+        mappingTextShowTextField.forEach((r: any) => {
+          textShowText.push(item[r])
+        })
+      } else {
+        textShowText = item[mappingTextShowTextField]
+      }
+    }
+    if(!item?.children?.length) {delete item?.children};
+    return {
+      ...item,
+      text: specialBracket
+        ? `【${item[mappingValueField]}】${item[mappingTextField]}`
+        : item[mappingTextField],
+      textShowText,
+      textShowKey: item[mappingTextShowKeyField || mappingValueField],
+      value: item[mappingValueField],
+      ...(queryParams?.pageSize ? {keyIndex: type != 1 ? ((queryParams?.currentPage - 1) * queryParams?.pageSize + index + 1) : (index+1) } : {}),
+    };
+  })
+}
+export const convertResData = (requestConfig: any,res: any, selectProps: any) => {
+  const { isMap, mappingTextField, mappingTextShowTextField, specialBracket, mappingValueField, mappingTextShowKeyField } = requestConfig;
+  const { selectMode, labelInValue, value, type, items, queryParams, needTopSelectedSource = true } = selectProps;
+  const otherParams = {
+    mappingTextField,
+    mappingTextShowTextField,
+    mappingTextShowKeyField,
+    mappingValueField,
+    specialBracket,
+    type,
+    queryParams,
+  };
+
+  let source: any = [];
+
+  if (isMap) {
+    source = Object.keys(res).map((d, i) => {
+      return {
+        text: Object.values(res)[i],
+        value: d,
+      };
+    });
+  } else {
+    const keys = res.list ? 'list' : 'items';
+    source = res
+      ? res[keys]
+        ? convertRes(res[keys], otherParams)
+        : Array.isArray(res) &&
+        convertRes(res, otherParams)
+      : [];
+  }
+
+  // 补充搜索项--选中的数据添加到数据源中去
+  const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+  if(needTopSelectedSource && type === 1 && currentSRKs?.length && currentSRKs?.some((s: any)=> !source?.find((r: any)=> r.value==s))) {
+    const selectedOption = items.filter((option: any) => currentSRKs?.includes(option.value))||[];
+    source = (source||[]).concat(selectedOption)
+  }
+
+  // 数据源 不可以有重复key
+  source = Array.isArray(source) ? uniqBy(source, 'value') : [];
+
+  return source;
+}
+
+// ------------------------------------------查询 & 数据源 相关处理--结束----------------------------------------
+
+
+
+// ------------------------------------------ 数据源展示 相关处理--开始----------------------------------------
+
+export const handleSelectOptionsShowValue = (specialBracket: boolean, noNeedSplit: boolean, item: any) => {
+  let showText = Array.isArray(item.textShowText) &&
+    item.textShowText.join('    ') || item.textShowText;
+  if (noNeedSplit) {
+    return item.text;
+  } else {
+    return specialBracket
+      ? `【${item.textShowKey || ''}】${showText}`
+      : `${item.textShowKey || ''}       ${showText}`
+  }
+};
+
+export const LightHeightOption = (props: any) => {
+  const {
+    filterTxt, text,
+    needToolTips = true
+  } = props
+  const heightLightTxt = (text: string, heightTxt: string) => {
+    if (heightTxt === '') {
+      return text
+    }
+    const searchString = escapeRegExp(heightTxt);
+    // 前面filterOption 不区分大小写，这里用i
+    const regexp = new RegExp(searchString, 'gi')
+    return text.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
+  }
+  const renderContent = <div ref={(nodeElement) => {if (nodeElement) { nodeElement.innerHTML = heightLightTxt(text, filterTxt)} }} />
+
+  if(!needToolTips) return renderContent;
+  return (
+    <Tooltip title={text}>
+      {renderContent}
+    </Tooltip>
+  )
+}
+
+export const maxTagPlaceholder = (selectedValues: any, { selectProps, onChange, value, setIsMaxTagsOpen }: any) => {
+  const { labelInValue } = selectProps;
+  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)
+    onChange(newValue);
+  }
+  return (
+    <Tooltip 
+      overlayClassName='searchSelectMaxTagToolTip'
+      destroyTooltipOnHide 
+      placement="topRight" 
+      autoAdjustOverflow={false} 
+      title={(
+        <div 
+          style={{ margin: '6px 8px 0px' }}
+          onMouseEnter={() => {
+            setIsMaxTagsOpen?.(true)
+          }}
+          onMouseLeave={() => {
+            setIsMaxTagsOpen?.(false)
+          }}
+        >
+          {selectedValues.map((i: any) => (
+            <Tag
+              closable={true}
+              onClose={(e: any) => onClose(e, i)}
+              style={{ margin: '0px 3px 3px 0px', background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+            >
+              {i.label}
+            </Tag>
+          ))}
+        </div>
+      )}
+    >
+      {`+ ${selectedValues?.length}`}
+    </Tooltip>
+  )
+}
+
+// 弹窗数据表头处理
+export const handleTableColumns = (tableColumns: any) => {
+  // 按照默认设置排序 > 没有排序字段的展示所有列表头 > 没有表头列不展示
+  const showTableColumns = tableColumns?.filter((s: any) => typeof s.defaultSort == 'number')||tableColumns||[];
+  return showTableColumns?.sort((a: any,b: any)=> a.defaultSort-b.defaultSort)||[]
+};
+
+// ------------------------------------------ 数据源展示 相关处理--结束----------------------------------------
+
+
+
+// ------------------------------------------ 选中数据展示 相关处理--开始----------------------------------------
+const getShowLabelTextStr = ({ kongValue, selectMode, value, items }: any) => {
+  if (selectMode) {
+    return Array.isArray(value) && value?.map(item => item.label || item.text || '')?.join(',') || kongValue;
+  }
+  return (value?.label || value?.text || kongValue) as string;
+};
+const getSelectValueText = (v: any, items: any) => {
+  return (items || []).filter((item: any) => item.value === v)?.[0]?.text || v || '';
+}
+const getShowValueStr = ({ kongValue, selectMode, value, items }: any): string => {
+  if (selectMode) {
+    return Array.isArray(value) && value?.map(item => getSelectValueText(item, items))?.join(',') || kongValue;
+  }
+  return (getSelectValueText(value, items) || kongValue) as string;
+}
+export const getShowStr = ({ viewShowValueStr, labelInValue, selectMode, value, items }: any) => {
+  // 优先使用业务使用传入的展示
+  if(viewShowValueStr) return viewShowValueStr;
+
+  const kongValue = '无'
+  // 先判断labelInValue与否，labelInValue可以直接去value中获取字段名称，否则去下拉框数据里面去拿；
+  // 再判断是单选还是多选，数据类型不同取值方式也不同
+  if (labelInValue) {
+    return getShowLabelTextStr({ kongValue, selectMode, value, items});
+  }
+  return getShowValueStr({ kongValue, selectMode, value, items });
+}
+// ------------------------------------------ 选中数据展示 相关处理--结束---------------------------------------