@bit-sun/business-component 4.0.12-alpha.18 → 4.0.12-alpha.19

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

@@ -295,7 +295,7 @@ 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`,
       filter: 'skuCodeAndSkuName', // 过滤参数
       searchStartLength: 4,
       mappingTextField: 'name',
@@ -365,6 +365,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/SearchSelect/index.tsx

@@ -11,6 +11,7 @@ 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';
 
 const { Option } = Select;
 
@@ -180,7 +181,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,12 +328,12 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     if (isNil(queryParams[selectParamsKey])) {
       queryParams[selectParamsKey] = searchValue;
     }
+
+    
     request
-      .get(
+      .post(
         `${url}?${stringify(queryParams)}`,
-        {
-          headers: { ...extralHeaders }
-        })
+        bodyParams || null,)
       .then((result: any) => {
         setFetching(false)
         result = result.data;
@@ -632,12 +633,18 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const onSearchTable = () => {
     const params = form.getFieldsValue();
+    console.log('dddd', params);
 
     // 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 +824,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 (

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';