@bit-sun/business-component 4.0.13-alpha.2 → 4.0.13-alpha.20

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

@@ -1,16 +1,17 @@
 // @ts-nocheck
 import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { useDebounceFn } from 'ahooks';
-import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag, Row, Col, Space, Tabs } from 'antd';
+import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag, Row, Col, Space, Tabs, Empty, DatePicker } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
 import request from '@/utils/request';
 import _, { escapeRegExp, isNil, values } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput, QueryMutipleSearchSelect } from '@/index';
-import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth, getCurrentSRKs, getRenderSource, handleParams, convertUrlQueryParams, convertBodyParams, formatSelectedValue, convertResData, makeUniqueValue, handleSelectOptionsShowValue, LightHeightOption, maxTagPlaceholder }  from './utils';
+import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, getTableHeigth, getCurrentSRKs, getRenderSource, handleParams, convertUrlQueryParams, convertBodyParams, formatSelectedValue, convertResData, makeUniqueValue, handleSelectOptionsShowValue, LightHeightOption, maxTagPlaceholder, getShowStr, handleTableColumns }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 import PropertySelector from '@/components/Business/PropertyModal';
+import ItemPropertySelector from '@/components/Business/ItemPropertySelector';
 
 const { Option } = Select;
 
@@ -21,7 +22,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     selectProps = {},
     modalTableProps = {},
     labelInValue = false,
-    requestConfig,
+    needTopSelectedSource,
+    requestConfig:rCTemp,
     ctx,
     onlyShowStr = false,
     sourceName,
@@ -51,7 +53,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     noOperate, // 级联禁用按钮设置字段
     viewShowValueStr, // 详情展示值,不传展示组件处理的默认值
     searchStartLength, // 默认不校验长度去搜索，如果配置了，则按照配置项长度进行处理搜索
-  } = requestConfig || {};
+  } = rCTemp || {};
+  const requestConfig = {url,method,otherParams,isMap,fixedparameter,fieldValToParam,fixedparamsDisabled,mappingTextField,mappingTextShowKeyField,mappingValueField,mappingTextShowTextField,init,extralHeaders,specialBracket,noNeedSplit,noOperate,viewShowValueStr,searchStartLength,...rCTemp};
   const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || ctx?.name || 'supplierCode')
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
@@ -80,7 +83,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const initPagination = { showQuickJumper: true, showSizeChanger: true, showTotal: (total: any) => `共 ${total} 条`, pageSize: tableInitPageSize }
   const tableInitPagination = { ...initPagination, total: 0, current: 1 }
-  const disabled = noOperate || selectProps?.disabled || props?.disabled;
+  const disabled = !!noOperate || selectProps?.disabled || props?.disabled;
   const isHaveDependency = fixedparameter && fieldValToParam && ctx;
   const isHaveDValue = () => {
     let formValueList = [];
@@ -139,7 +142,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const [indeterminate, setIndeterminate] = useState(false)
   const [tableFormParams, setTableFormParams] = useState({});
   const [tooltipVisible, setTooltipVisible] = useState(false);
-  const [tableShowColumns, setTabletShowColumns] = useState(modalTableProps?.tableColumns?.filter(s => typeof s.defaultSort == 'number')?.sort((a,b)=> a.defaultSort-b.defaultSort)||[]);
+  const [tableShowColumns, setTabletShowColumns] = useState(handleTableColumns(modalTableProps?.tableColumns)); // 默认展示表头-modalTableProps?.tableColumns
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [modalSearched, setModalSearched]=useState(false);
 
@@ -228,12 +231,12 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       ...fixedParam,
       ...params,
     };
-    if (isNil(queryParams[selectParamsKey])) {
+    if (isNil(queryParams[selectParamsKey])&&searchValue?.length) {
       queryParams[selectParamsKey] = searchValue;
     }
 
     let getRequest;
-    const methodName = method?.toLocaleLowerCase();
+    const methodName = method?.toLocaleLowerCase?.();
     if(['post','patch','put'].includes(methodName)) {
       getRequest = request[methodName](`${url}${convertUrlQueryParams(queryParams)}`,convertBodyParams(queryParams))
     } else {
@@ -250,7 +253,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           return;
         }
         const res = result.data;
-        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value, type, items, queryParams });
+        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value, type, items, queryParams, needTopSelectedSource });
         
         if(callback) {
           callback(source)
@@ -321,6 +324,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   useEffect(() => {
     setUniqueValue(makeUniqueValue());
+    setTabletShowColumns(handleTableColumns(modalTableProps?.tableColumns));
   }, [resultSourceKey])
 
   useEffect(() => {
@@ -570,9 +574,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         }
       };
 
-      const { emptyArray } = getFormRowInfo(list);
+      const { emptyArray, ColSpan } = getFormRowInfo(list, modalTableProps?.tableSearchColSpan);
       const addKong = emptyArray?.map((i: any) =>({ type: 'kong'}))||[];
-      return list?.concat(addKong)?.map((i: any, index: number) => {
+      const searchList = modalTableProps?.noEmptySearchField ? list : list?.concat(addKong);
+      return searchList.map((i: any, index: number) => {
         if(i?.type === 'kong') return <Col span={ColSpan} key={i}></Col>;
 
         if (i?.type === 'select' || i?.field?.type === 'select') {
@@ -599,6 +604,25 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           )
         }
 
+        if (i?.type === 'rangepicker' || i?.field?.type === 'rangepicker') {
+          return (
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name} initialValue={i?.initialValue ?? []}>
+                <DatePicker.RangePicker style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}></DatePicker.RangePicker>
+              </Form.Item>
+            </Col>
+          )
+        }
+        if (i?.type === 'datepicker' || i?.field?.type === 'datepicker') {
+          return (
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <DatePicker style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}></DatePicker>
+              </Form.Item>
+            </Col>
+          )
+        }
+
         if (i?.type === 'businessSearchSelect' || i?.field?.type === 'businessSearchSelect') {
           return (
             <Col span={ColSpan} key={i.name}>
@@ -632,6 +656,19 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             </Col>
           );
         }
+        if (i?.type === 'itemPropertySelector' || i?.field?.type === 'itemPropertySelector') {
+          return (
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <ItemPropertySelector
+                  style={{ width: '100%' }}
+                  placeholder="请选择"
+                  {...i?.field?.props}
+                ></ItemPropertySelector>
+              </Form.Item>
+            </Col>
+          );
+        }
         if (i?.field?.type === 'multipleQuerySearchSelect') {
           return (
             <Col span={ColSpan} key={i.name}>
@@ -664,9 +701,15 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     return collapsed ? formItem(list?.slice(0,viCount)) : formItem(list)
   }
 
+  const renderEmptyText = (text: string,x: string) => {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={text} style={{ margin: `${x} 0px`}} />
+  }
+
   const renderShowTable =  (tableList, type) => {
     const tableBoxHeighth = getTableHeigth(modalTableProps?.tableSearchForm);
-    const oSY = `calc(100vh - ${tableBoxHeighth}px - 82px)`;  // 分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
+    const x = tableList?.length ? 82 : 28;  // 无数据没有分页，有数据计算减去：分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
+    const oSY = `calc(100vh - ${tableBoxHeighth}px - ${x}px)`; 
+    const mTB = `calc(50vh - ${tableBoxHeighth/2}px - ${x/2}px - 40px)`
     return (
       <div style={{ height: `calc(100vh - ${tableBoxHeighth}px)` }}> 
         <Table
@@ -678,14 +721,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           {...type=='noPage'?{
             pagination: { ...initPagination,showSizeChanger: false },
             locale: {
-              emptyText: '暂无已选结果',
+              emptyText: renderEmptyText('暂无已选结果',mTB),
             }
           }:{
             pagination: tablePagination,
             onChange: handleTableChange,
             loading: fetching,
             locale: {
-              emptyText: modalSearched? '无匹配结果,请更换其他内容再试' : '请输入搜索条件',
+              emptyText: modalSearched? renderEmptyText('匹配结果,请更换其他内容再试',mTB) : renderEmptyText('请输入搜索条件',mTB),
             }
           }}
           rowKey={mappingValueField}
@@ -811,34 +854,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     );
   }
 
-  const getShowLabelTextStr = (kongValue): string => {
-    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) => {
-    return (items || []).filter(item => item.value === v)?.[0]?.text || v || '';
-  }
-  const getShowValueStr = (kongValue): string => {
-    if (selectMode) {
-      return Array.isArray(value) && value?.map(item => getSelectValueText(item))?.join(',') || kongValue;
-    }
-    return (getSelectValueText(value) || kongValue) as string;
-  }
-  const getShowStr = () => {
-    // 优先使用业务使用传入的展示
-    if(viewShowValueStr) return viewShowValueStr;
-
-    const kongValue = '无'
-    // 先判断labelInValue与否，labelInValue可以直接去value中获取字段名称，否则去下拉框数据里面去拿；
-    // 再判断是单选还是多选，数据类型不同取值方式也不同
-    if (labelInValue) {
-      return getShowLabelTextStr(kongValue);
-    }
-    return getShowValueStr(kongValue);
-  }
-
   const isShouldShowStr = (props.disabled && ctx) || ctx?.mode == 'view';
   return (
     <div className={'search_select'}>
@@ -853,8 +868,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         </div>
       ) : (
         isShouldShowStr ?
-        (<div title={getShowStr()} style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} className={'search_select_show'}>
-          {getShowStr()}
+        (<div title={getShowStr({ viewShowValueStr, labelInValue, selectMode, value, items })} style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} className={'search_select_show'}>
+          {getShowStr({viewShowValueStr, labelInValue, selectMode, value, items })}
         </div>) :
         <div
           className={`${isFormPage ? '' : 'search_select_show_list'} search_select_show`}
@@ -906,7 +921,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         <Modal
           maskClosable={false}
           destroyOnClose
-          width="80%"
+          width={`calc(100% - 320px)`}
           title={modalTableProps?.modalTableTitle}
           visible={isModalVisible}
           confirmLoading={confirmLoading}
@@ -948,7 +963,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                           重置 ctrl+U
                         </Button>
                         <div style={{position: 'absolute',top: 0,right: 0}}>
-                          {hasMoreQueryFields(modalTableProps) && modalTableProps?.isHorizontally
+                          {hasMoreQueryFields(modalTableProps)
                               ? <img onClick={() => {toggleCollapsed()}} style={{
                                 cursor: 'pointer',
                                 fontSize: '10px',

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

@@ -17,12 +17,13 @@ export const handleSourceName = (sName: any) => {
 }
 
 // ------------------------------------------处理样式相关--开始----------------------------------------
-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; // 计算最后一行的空位数
+export const getFormRowInfo = (list: any, tableSearchColSpan: number) => {
+  const lastColumnsPerRow = tableSearchColSpan == 6 ? columnsPerRow : 3;
+  const totalRows = Math.ceil(list.length / lastColumnsPerRow); // 计算总行数
+  const lastRowColumns = (list.length+1) % lastColumnsPerRow; // 计算最后一行的实际列数
+  const emptySlots = lastRowColumns === 0 ? 0 : lastColumnsPerRow - lastRowColumns; // 计算最后一行的空位数
   const emptyArray = new Array(emptySlots).fill(null); // 生成长度为 emptySlots 的数组
-  return { totalRows, emptyArray }
+  return { totalRows, emptyArray, ColSpan: tableSearchColSpan ??  ColSpan}
 }
 
 export const defaultVisibleFieldsCount = 7;
@@ -397,4 +398,43 @@ export const maxTagPlaceholder = (selectedValues: any, { selectProps, onChange,
   )
 }
 
-// ------------------------------------------ 数据源展示 相关处理--结束----------------------------------------
+// 弹窗数据表头处理
+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 });
+}
+// ------------------------------------------ 选中数据展示 相关处理--结束---------------------------------------