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

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

@@ -4,13 +4,13 @@ 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 { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
 import request from '@/utils/request';
-import { stringify } from 'querystring';
 import _, { escapeRegExp, isNil, values } from "lodash"
 import './index.less';
-import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth }  from './utils';
+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 { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
+import PropertySelector from '@/components/Business/PropertyModal';
 
 const { Option } = Select;
 
@@ -27,12 +27,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     sourceName,
     needModalTable = true,
     getPopupContainer = undefined,
+    highestPopContainer = undefined,
     fieldComponent,
     onSaveCallback,
     selectBusinessType,
   } = props;
   const {
     url,
+    method = 'get',
     otherParams,// 默认参数
     isMap,
     fixedparameter,
@@ -69,9 +71,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     listHeight: 160,
     optionLabelProp: "label",
     autoClearSearchValue: false,
-    placement: 'bottomLeft'
+    placement: 'bottomRight'
   }
-  const initPagination = { showQuickJumper: true, showSizeChanger: false, showTotal: (total: any) => `共 ${total} 条`, pageSize: tableInitPageSize }
+
+  const pathname = window.location.href;
+  var pattern = /(action|create|edit|view)/
+  const isFormPage = pathname.match(pattern)?.length > 0;
+
+  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 isHaveDependency = fixedparameter && fieldValToParam && ctx;
@@ -87,6 +94,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const [items, setItems] = useState([]);
   const [selectOpen, setSelectOpen] = useState(false);
+  const [isMaxTagsOpen, setIsMaxTagsOpen] = useState(false);
   const [scrollPage, setScrollPage] = useState(1);
   const [itemsTotal, setItemsTotal] = useState(0);
   const [fetching, setFetching] = useState(false);
@@ -211,105 +219,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     }
 
     // 数组对象处理,对带有特殊标记的name进行处理
-    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]
-        }
-      }
-    }
+    handleParams(params)
 
     const queryParams = {
       pageSize,
@@ -321,13 +231,18 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     if (isNil(queryParams[selectParamsKey])) {
       queryParams[selectParamsKey] = searchValue;
     }
-    request
-      .get(
-        `${url}?${stringify(queryParams)}`,
-        {
-          headers: { ...extralHeaders }
-        })
-      .then((result: any) => {
+
+    let getRequest;
+    const methodName = method?.toLocaleLowerCase();
+    if(['post','patch','put'].includes(methodName)) {
+      getRequest = request[methodName](`${url}${convertUrlQueryParams(queryParams)}`,convertBodyParams(queryParams))
+    } else {
+      getRequest = request.get( `${url}${convertUrlQueryParams(queryParams)}`,{headers: { ...extralHeaders }})
+    }
+
+    if (!url || !getRequest) return;
+
+    getRequest.then((result: any) => {
         setFetching(false)
         result = result.data;
         if (judgeIsRequestError(result)) {
@@ -335,71 +250,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           return;
         }
         const res = result.data;
-        let source = [];
-        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]
-              ? res[keys].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],
-                  keyIndex: index + 1,
-                };
-              })
-              : Array.isArray(res) &&
-              res?.map((item: Record<string, 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],
-                  keyIndex: index + 1,
-                };
-              })
-            : [];
-        }
-        // 数据源 不可以有重复key
-        source = Array.isArray(source) ? _.uniqBy(source, 'value') : [];
+        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value, type, items, queryParams });
+        
         if(callback) {
           callback(source)
         } else {
@@ -468,7 +320,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }, [value]);
 
   useEffect(() => {
-    makeUniqueValue();
+    setUniqueValue(makeUniqueValue());
   }, [resultSourceKey])
 
   useEffect(() => {
@@ -619,12 +471,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const onSearchTable = () => {
     const params = form.getFieldsValue();
-
-    // const isHaveParams = params && Object.keys(params).filter(item => params[item]).length > 0;
     setModalSearched(true);
-
     setTableFormParams(params);
-    getData({ ...params, pageSize: tableInitPageSize }, 2)
+    getData({ ...params, pageSize: tableInitPageSize }, 2, null);
   }
 
   const onResetTable = () => {
@@ -640,30 +489,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const handleTableChange = (pagination) => {
     getData({ ...tableFormParams, pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
   }
-  const LightHeightOption = (props) => {
-    const {
-      filterTxt, text,
-    } = props
-    const heightLightTxt = (text, heightTxt) => {
-      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>`)
-    }
-    return (
-      <Tooltip title={text}>
-        <div ref={(nodeElement) => {
-          if (nodeElement) {
-            nodeElement.innerHTML = heightLightTxt(text, filterTxt)
-          }
-        }}
-        />
-      </Tooltip>
-    )
-  }
 
   // 扁平化二维数组的方法
   const mapRows = params => {
@@ -697,13 +522,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     setCheckedAll(selectRows.length === tablePagination?.total);
   }
 
-  // 生成唯一值
-  const makeUniqueValue = () => {
-    const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
-    setUniqueValue(generateUnitKey);
-    return generateUnitKey;
-  }
-
   const rowSelection = {
     type: selectMode ? 'checkbox' : 'radio',
     selectedRowKeys,
@@ -804,6 +622,28 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             </Col>
           );
         }
+        if (i?.field?.type === 'proppertySelector') {
+          return (
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <PropertySelector 
+                />
+              </Form.Item>
+            </Col>
+          );
+        }
+        if (i?.field?.type === 'multipleQuerySearchSelect') {
+          return (
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <QueryMutipleSearchSelect {...i.field.props}  onValueChange={(value) => {
+                  form.setFieldsValue({
+                    [i.name]: value
+                  })}} />
+              </Form.Item>
+            </Col>
+          );
+        }
 
         // 默认type是input
         return (
@@ -824,14 +664,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     return collapsed ? formItem(list?.slice(0,viCount)) : formItem(list)
   }
 
-  // const queryFieldsDom = <SearchItemTable
-  //   ref={searchTableRef}
-  //   setShowSearchFields={setShowSearchFields||[]}
-  //   showSearchFields={showSearchFields||[]}
-  //   datasource={modalTableProps?.tableSearchForm || []}
-  //   bsTableCode={bsTableCode}
-  // />
-
   const renderShowTable =  (tableList, type) => {
     const tableBoxHeighth = getTableHeigth(modalTableProps?.tableSearchForm);
     const oSY = `calc(100vh - ${tableBoxHeighth}px - 82px)`;  // 分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
@@ -844,7 +676,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           columns={tableShowColumns}
           dataSource={tableList}
           {...type=='noPage'?{
-            pagination: initPagination,
+            pagination: { ...initPagination,showSizeChanger: false },
             locale: {
               emptyText: '暂无已选结果',
             }
@@ -880,10 +712,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     { label: `已选（${selectedRowKeys?.length || 0}）`, key: 'selected', children: renderShowTable(selectedRows?.map((s,index)=> ({...s,keyIndex:index+1}))||[],'noPage')  },
   ];
 
-  const resetSelectDataSource = () => {
+  const resetSelectDataSource = (isClear=false) => {
     setSearchValue('');
     // 有关联值 不需要清空下拉框数据 也不需要重新去请求了
-    if(isHaveDependency) return;
+    if(!isClear && isHaveDependency) return; // 清空时需要放开：级联首次回之后，清空数据需要重新查询下拉框的值
     clearSelectDataSource();
     init && run('init')
   }
@@ -895,11 +727,11 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     formaData([], items);
     onChangeSelectedKeys([], [])
     // 重置下拉框数据源
-    resetSelectDataSource();
+    resetSelectDataSource(true);
   }
 
   const onDeselect = (...arg) => {
-    const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+    const oldSelect = formatSelectedValue(value);
     const deRecord = arg[1];
     const srs = oldSelect.filter((s: any) => s.value != deRecord?.value)
     onSelectClick(srs, items,false)
@@ -910,13 +742,22 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }
 
   const onDropdownVisibleChange = (visible) => {
+    // 阻止maxTagPlaceholder点击事件触发下拉框展示事件
+    if(isMaxTagsOpen && !selectOpen) return; 
+    
     setSelectOpen(visible); 
     // 关闭下拉框 如果首次本身就不展示数据的 没有选中数据-需要清空查询数据源; 首次展示的默认展示
     if (!visible && !value?.length) {
-      resetSelectDataSource()
+      setTimeout(() => {
+        // 延时 是为了避免 执行时候出现下拉框弹两次的问题-可以看到数据源从展示到显示空数据框的问题
+        resetSelectDataSource()
+      }, 200)
     }
   }
   const renderTable = (dataSource) => {
+    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+    const renderSource = getRenderSource(currentSRKs,items)
+
     return (
       <div className={`search_select_dropdown_table ${!selectMode?'search_select_dropdown_table1':''}`}>
         <Table
@@ -926,10 +767,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             rowSelection: {
               type: 'checkbox',  
               columnWidth: '24px',
-              selectedRowKeys: labelInValue ? value?.map(s=> (s?.value||s)) : value,
+              selectedRowKeys: currentSRKs,
               preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
               onChange: (sks, srs) => {
-                const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+                const oldSelect = formatSelectedValue(value);
                 let tmpSelectedRows = oldSelect.concat(srs).filter(item => item != undefined);
                 let realSrs = sks.map(key => tmpSelectedRows.filter(item => item.value == key)[0]).filter(item => item != undefined)
                 onSelectClick(realSrs, dataSource,false)
@@ -940,7 +781,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 event.stopPropagation();
                 event.nativeEvent.stopImmediatePropagation();
 
-                const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+                const oldSelect = formatSelectedValue(value);
                 const newSelect = [JSON.parse(JSON.stringify(record))];
                 const srs = getRealStr(oldSelect,newSelect,record);
                 onSelectClick(srs,dataSource,false)
@@ -950,7 +791,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             rowSelection: {
               type: 'radio',
               columnWidth: 0,
-              selectedRowKeys: labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[],
+              selectedRowKeys: currentSRKs,
             },
             onRow: (record, rowKey) => ({
               onClick: event => {
@@ -960,7 +801,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             })
           })}
           columns={selectProps?.renderTableColumns||[]}
-          dataSource={items}
+          dataSource={renderSource}
           size="middle"
           pagination={false}
           rowKey={mappingValueField}
@@ -970,39 +811,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     );
   }
 
-  const maxTagPlaceholder = (selectedValues) => {
-    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 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>
-    )
-  }
-
-  const handleSelectOptionsShowValue = (specialBracket: boolean, noNeedSplit: boolean, item: object) => {
-    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}`
-    }
-  };
-
   const getShowLabelTextStr = (kongValue): string => {
     if (selectMode) {
       return Array.isArray(value) && value?.map(item => item.label || item.text || '')?.join(',') || kongValue;
@@ -1049,7 +857,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           {getShowStr()}
         </div>) :
         <div
-          className="search_select_show"
+          className={`${isFormPage ? '' : 'search_select_show_list'} search_select_show`}
           id={`search_select_div_${uniqueValue}`}
         >
           <Select
@@ -1059,7 +867,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             onClear={onClear}
             onDeselect={onDeselect}
             disabled={sDisabled}
-            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px' }}
+            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px'}}
             open={selectOpen}
             onDropdownVisibleChange={onDropdownVisibleChange}
             dropdownRender={(menu) => items?.length ? renderTable(items) : menu}
@@ -1075,13 +883,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             onPopupScroll={SelectScroll}
             style={{ width: 'calc(100%)' }}
             placeholder="请选择"
-            maxTagPlaceholder={maxTagPlaceholder}
+            maxTagPlaceholder={(v)=> maxTagPlaceholder(v,{ selectProps:{labelInValue}, onChange, value, setIsMaxTagsOpen })}
             onSearch={(v) => onSearchChange(v)}
             {...(needModalTable ? {
               suffixIcon: <div className={`search_select_expand_button ${(sDisabled)?'search_select_expand_button_disabled':''}`} onClick={showModal}><SearchOutlined /></div>
             } : {})}
             {...currentSelectProps}
-            getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
+            getPopupContainer={(triggerNode) => (highestPopContainer && highestPopContainer(triggerNode)) || triggerNode.parentElement}
           >
             {items.map(item => (
               <Option key={item.value} label={item.text}>
@@ -1139,7 +947,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                         <Button key="reset" onClick={onResetTable}>
                           重置 ctrl+U
                         </Button>
-                        {/* <div>{queryFieldsDom}</div> */}
                         <div style={{position: 'absolute',top: 0,right: 0}}>
                           {hasMoreQueryFields(modalTableProps) && modalTableProps?.isHorizontally
                               ? <img onClick={() => {toggleCollapsed()}} style={{