@bit-sun/business-component 4.0.12-alpha.20 → 4.0.12-alpha.22

package/src/components/Business/PropertyModal/propertyGroup.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import { Checkbox } from 'antd';
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
+import './index.less';
+import { set } from "lodash";
+
+interface PropertyItem {
+    name: string;
+    value: string;
+    isChecked: boolean;
+    isCommonUse: boolean;
+}
+
+interface propertyInfoProps {
+    propertyName: string;
+    propertyCode: string;
+    detailList: Array<PropertyItem>;
+}
+
+const PropertyGroup = (props: any) => {
+
+    const { 
+        propertyData, 
+        handleProperyItemChange, 
+        modalVisilbe,
+        itemValue,
+    } = props;
+    const [commonUseProperty, setCommonUseProperty] = useState<Array<PropertyItem> | any>([]); // 常用属性值
+    const [notCommonUseProperty, setNotCommonUseProperty] = useState<Array<PropertyItem> | any>([]); // 非常用属性值
+    const [indeterminate, setIndeterminate] = useState(false);
+    const [showNotCommon, setShowNotCommon] = useState(false);
+
+    useEffect(() => {
+        const proItemValue = (itemValue.propertyList || []).find((item: any) => item.propertyCode === propertyData.propertyCode);
+        const checkedList = proItemValue?.detailList || [];
+
+        const proDetailList = JSON.parse(JSON.stringify( propertyData?.detailList || []));
+        proDetailList.forEach((item: any) => {
+            if (checkedList.some((checkItem: any) => checkItem.value === item.value)){
+                item.isChecked = true;
+            }
+        });
+        const commonUseProperty = (proDetailList).filter((item: any) => item.isCommonUse);
+        
+        const notCommonUseProperty = (proDetailList).filter((item: any) => !item.isCommonUse);
+        if (checkedList.some((item: any) => !item.isCommonUse)) {
+            setShowNotCommon(true)
+        }
+        setCommonUseProperty(commonUseProperty);
+        setNotCommonUseProperty(notCommonUseProperty);
+    }, [modalVisilbe])
+
+    const parseDataToParent = (comUse: any[], notComUse: any[]) => {
+        let choosedPropertyList = (comUse|| []).filter(item => item.isChecked);
+        if (showNotCommon) {
+            choosedPropertyList = [...choosedPropertyList, ...((notComUse|| []).filter(item => item.isChecked))]
+        }
+        handleProperyItemChange({
+            propertyCode: propertyData?.propertyCode,
+            propertyName: propertyData?.propertyName,
+            propertyId: propertyData?.propertyId,
+            isCommonUse: propertyData?.isCommonUse,
+            detailList: choosedPropertyList
+        });
+    }
+
+
+    const handleChangeAll = (e: any) => {
+        if (showNotCommon) {
+            notCommonUseProperty.map((item: any) => item.isChecked = e.target.checked);
+            setNotCommonUseProperty([...notCommonUseProperty])
+        }
+        commonUseProperty.map((item: any) => item.isChecked = e.target.checked);
+        parseDataToParent(commonUseProperty, notCommonUseProperty)
+        setCommonUseProperty([...commonUseProperty])
+        setIndeterminate(false)
+    }
+
+    const handleIndeterminate = (commonUseProperty: any[], notCommonUseProperty: any[]) => {
+        let checkList = [...commonUseProperty];
+        if (showNotCommon) {
+            checkList = [...checkList, ...notCommonUseProperty]
+        }
+        const indeterminate = !!checkList.filter(item => item.isChecked).length && checkList.filter(item => item.isChecked).length !== checkList.length;
+        setIndeterminate(indeterminate);
+    }
+
+    const handleItemChecked = (e: any, item: any, type: number) => {
+        if (type === 1) { // 常用属性
+            (commonUseProperty || []).forEach((info: any) => {
+                if (info.value === item.value) {
+                    info.isChecked = e.target.checked;
+                }
+            })
+            handleIndeterminate(commonUseProperty, notCommonUseProperty)
+            parseDataToParent(commonUseProperty, notCommonUseProperty)
+            setCommonUseProperty([...commonUseProperty])
+        }
+
+        if (type === 2) { // 非常用属性
+            (notCommonUseProperty || []).forEach((info: any) => {
+                if (info.value === item.value) {
+                    info.isChecked = e.target.checked;
+                }
+            })
+            handleIndeterminate(commonUseProperty, notCommonUseProperty)
+            parseDataToParent(commonUseProperty, notCommonUseProperty)
+            setNotCommonUseProperty([...notCommonUseProperty])
+        }
+    }
+
+    const checkAllChecked = () => {
+        const checkData = showNotCommon ? [...commonUseProperty, ...notCommonUseProperty] : [...commonUseProperty];
+        return checkData.length && checkData.every(item => item.isChecked) ? true : false;
+    }
+
+
+    return (
+        <div className={'propertyGroup_container'}>
+            <div className={'propertyGroup_container_left'}>
+                <Checkbox
+                    checked={checkAllChecked()}
+                    indeterminate={indeterminate}
+                    onChange={handleChangeAll}
+                >
+                    <div title={propertyData.name} className="propertyGroup_checkbox_container">{propertyData.propertyName}</div>
+                </Checkbox>
+            </div>
+            <div className={'propertyGroup_container_right'}>
+                {
+                    (commonUseProperty || []).map((item: any) => (
+                        <Checkbox
+                            checked={item.isChecked}
+                            key={item.value}
+                            onChange={(e) => {
+                                handleItemChecked(e, item, 1)
+                            }}
+                        >
+                            <div title={item.name} className="propertyGroup_checkbox_container">
+                                {item.name}
+                            </div>
+                        </Checkbox>
+                    ))
+
+                }
+                {
+                    showNotCommon && (notCommonUseProperty || []).map((item: any) => (
+                        <Checkbox
+                            checked={item.isChecked}
+                            key={item.value}
+                            onChange={(e) => {
+                                handleItemChecked(e, item, 2)
+                            }}
+                        >
+                            <div title={item.name} className="propertyGroup_checkbox_container">
+                                {item.name}
+                            </div>
+                        </Checkbox>
+                    ))
+
+                }
+                {
+                    !!notCommonUseProperty.length && (
+                        <div 
+                            style={{
+                                width: '50px', 
+                                cursor: 'pointer', 
+                                color: '#005cff', 
+                                fontSize: '10px',
+                                display: 'flex',
+                                alignItems: 'center',
+                            }}
+                            onClick={() => {
+                                setShowNotCommon(!showNotCommon);
+                                handleIndeterminate(commonUseProperty, notCommonUseProperty)
+                            }}
+                        >
+                            {
+                                showNotCommon && (
+                                    <>
+                                        <CaretUpOutlined />
+                                        收起
+                                    </>
+                                )
+                            }
+                            {
+                                !showNotCommon && (
+                                    <>
+                                        <CaretDownOutlined />
+                                        展开
+                                    </>
+                                )
+                            }
+                        </div>
+                    )
+                }
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(PropertyGroup, (props, nextProps) => {
+    if (props.modalVisilbe !== nextProps.modalVisilbe) return false;
+    return true;
+});

package/src/components/Business/SearchSelect/BusinessUtils.tsx

@@ -296,7 +296,8 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
   // 商品选择器sku
   if(type === 'skuCommodity') {
     requestConfig = {
-      url: `${prefixUrl.selectPrefix}/sku/doPageBySelect/v3`,
+      url: `${prefixUrl.selectPrefix}/sku/doPageBySelect/v4`,
+      method: 'post',
       filter: 'skuCodeAndSkuName', // 过滤参数
       searchStartLength: 4,
       mappingTextField: 'name',
@@ -366,6 +367,9 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
             dropdownStyle: { maxHeight: 400, maxWidth: 100, overflow: 'auto' }
           },
         } },
+      { name: 'UNIQUE_SPEC', label: '属性', field: {
+          type: 'proppertySelector',
+        } },
     ]
     Promise.all([
       loadSelectSource(`${prefixUrl.formSelectFix}/brand/queryBrandList`, {

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

@@ -2,16 +2,29 @@
  * @Description:
  * @Author: rodchen
  * @Date: 2021-12-01 10:52:08
- * @LastEditTime: 2021-12-29 19:14:56
- * @LastEditors: rodchen
+ * @LastEditTime: 2024-11-15 15:25:29
+ * @LastEditors: rodchen rodchen_king@outlook.com
  */
 // @ts-nocheck
 import React, { useState, useEffect } from 'react';
 import { useDebounceFn } from 'ahooks';
+import { debounce } from 'lodash';
 import { Input, Button, Modal, ConfigProvider } from 'antd';
 import './index.less';
 
-const QueryMutipleInput = ({ onValueChange,onPressEnter }) => {
+export const handlePressEnter = debounce((ctx) => {
+  if (ctx?.table) {
+    ctx?.form?.validateFields?.().then((data: any) => {
+      const {
+        pagination: { pageSize },
+        sorter,
+      } = ctx?.table?.getPaging();
+      ctx?.table?.refreshTable({ pageSize, current: 1 }, data, sorter);
+    });
+  }
+}, 50);
+
+const QueryMutipleInput = ({ onValueChange,onPressEnter, ctx }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [value, setValue] = useState('');
   const [popvalue, setPopValue] = useState('');
@@ -77,7 +90,12 @@ const QueryMutipleInput = ({ onValueChange,onPressEnter }) => {
           style={{ width: 'calc(100%)' }}
           suffix={<div className="query_input_expand_button" onClick={showModal}>...</div>}
           placeholder="请输入（查询多个值请用 ; 或 , 分割）"
-          onPressEnter={()=>onPressEnter?.()}
+          onPressEnter={(e) => {
+            if (onPressEnter) {
+              onPressEnter(e);
+            }
+            if(ctx) handlePressEnter(ctx);
+          }}
         />
       </div>
       <Modal

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

@@ -5,12 +5,25 @@ import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Chec
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
 import request from '@/utils/request';
 import { stringify } from 'querystring';
-import _, { escapeRegExp, isNil, values } from "lodash"
+import _, { escapeRegExp, isNil, values, debounce } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
 import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth, getCurrentSRKs, getRenderSource }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
+import PropertySelector from '@/components/Business/PropertyModal';
+
+export const handlePressEnter = debounce((ctx) => {
+  if (ctx?.table) {
+    ctx?.form?.validateFields?.().then((data) => {
+      const {
+        pagination: { pageSize },
+        sorter,
+      } = ctx?.table?.getPaging();
+      ctx?.table?.refreshTable({ pageSize, current: 1 }, data, sorter);
+    });
+  }
+}, 50);
 
 const { Option } = Select;
 
@@ -180,7 +193,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }))
 
   // 获取数据源 （type: 1下拉框 2/3弹框  不传值默认为下拉框）
-  const getData = (params = {}, type = 1,callback?: any) => {
+  const getData = (params = {}, type = 1,callback?: any, bodyParams?: any,) => {
     if (!requestConfig) return;
 
     setFetching(true)
@@ -327,10 +340,112 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     if (isNil(queryParams[selectParamsKey])) {
       queryParams[selectParamsKey] = searchValue;
     }
+
+    if (requestConfig?.method === 'post') {
+      request
+        .post(
+          `${url}?${stringify(queryParams)}`,
+          bodyParams || null,)
+        .then((result: any) => {
+          setFetching(false)
+          result = result.data;
+          if (judgeIsRequestError(result)) {
+            message.error(result.msg);
+            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: type != 1 ? ((queryParams?.currentPage - 1) * queryParams?.pageSize + index + 1) : (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: type != 1 ? ((queryParams?.currentPage - 1) * queryParams?.pageSize + index + 1) : (index + 1),
+                  };
+                })
+              : [];
+          }
+          // 补充搜索项--选中的数据添加到数据源中去
+          const currentSRKs = getCurrentSRKs(selectMode, labelInValue, value)
+          if (type === 1 && currentSRKs?.length && currentSRKs?.some(s => !source?.find(r => r.value == s))) {
+            const selectedOption = items.filter(option => currentSRKs?.includes(option.value)) || [];
+            source = (source || []).concat(selectedOption)
+          }
+          // 数据源 不可以有重复key
+          source = Array.isArray(source) ? _.uniqBy(source, 'value') : [];
+
+          if (callback) {
+            callback(source)
+          } else {
+            if (type === 1) {
+              ctx?.form?.setFieldSource(resultSourceKey, source)
+              setSelectDataSource(source, (Number(res?.total || res?.totalCount || source.length)))
+            } else {
+              setTableData(source)
+              setTablePagination({ ...tablePagination, total: Number(res?.total || res?.totalCount || source.length), pageSize: Number(res?.size || res?.pageSize || (params?.pageSize || pageSize)), current: Number(res?.page || res?.currentPage || (params?.currentPage || currentPage)) })
+            }
+          }
+        })
+        .catch((err) => { setFetching(false) });
+        return;
+    }
+
+    
     request
       .get(
-        `${url}?${stringify(queryParams)}`,
-        {
+        `${url}?${stringify(queryParams)}`, {
           headers: { ...extralHeaders }
         })
       .then((result: any) => {
@@ -635,9 +750,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
     // const isHaveParams = params && Object.keys(params).filter(item => params[item]).length > 0;
     setModalSearched(true);
+    
+    let unique_params = null;
+    if (params['UNIQUE_SPEC']) {
+      unique_params = params['UNIQUE_SPEC']?.propertyList || [];
+    }
 
     setTableFormParams(params);
-    getData({ ...params, pageSize: tableInitPageSize }, 2)
+    getData({ ...params, pageSize: tableInitPageSize }, 2, null, unique_params);
   }
 
   const onResetTable = () => {
@@ -817,6 +937,16 @@ 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>
+          );
+        }
 
         // 默认type是input
         return (
@@ -1113,6 +1243,22 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               )
             }
             onPopupScroll={SelectScroll}
+            onKeyDown={(e) => {
+              if ((e.key === 'Enter' || e.keyCode === 13) && !selectOpen) {
+                if (props?.onPressEnter) {
+                  props.onPressEnter?.(e);
+                }
+                handlePressEnter(ctx);
+                setSelectOpen(false)
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+              } else if(e.keyCode === 9 || e.key === 'Tab') {
+                setSelectOpen(false)
+              } else {
+                setSelectOpen(true)
+              }
+            }}
             style={{ width: 'calc(100%)' }}
             placeholder="请选择"
             maxTagPlaceholder={maxTagPlaceholder}

package/src/index.ts

@@ -35,6 +35,7 @@ export { default as JsonQueryTable } from './components/Business/JsonQueryTable'
 export { default as TableColumnSetting} from './plugin/TableColumnSetting';
 export { default as AuthButton } from './components/Functional/AuthButton';
 export { default as CustomSelector } from './components/Solution/RuleComponent/CustomPlugin/CustomSelector';
+export { default as PropertySelector} from './components/Business/PropertyModal';
 
 export { default as EllipsisTooltip} from './components/Functional/EllipsisTooltip';
 export * from './components/Functional/BsAntdSula/index';