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

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

@@ -15,6 +15,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
   
   // 默认type === 'supplier' 供应商选择器
   let requestConfig = {
+    init: true,
     url: `${prefixUrl.selectPrefix}/supplier`,
     filter: 'qp-name,code-orGroup,like', // 过滤参数
     otherParams: {
@@ -295,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',
@@ -324,9 +326,38 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     tableSearchForm =  [
-      { name: 'qp-skuCode-in', label: 'SKU编码',type:'multipleQueryInput' },
+      { name: 'qp-skuCode-in', label: 'SKU编码', field: {
+        type:'multipleQuerySearchSelect', 
+        props: {
+          selectProps: {
+            mode: "multiple",
+          },
+          requestConfig: {
+            url: '/items/sku//listNoPage/Simple',
+            filter: 'qp-name-like', // qp-skuCode-like
+            // filter: 'qp-itemCode,name-orGroup,like',
+            mappingTextField: 'name',
+            mappingValueField: 'skuCode',
+            sourceName: 'qp-skuCode-in',
+            specialBracket: true,
+          },
+        }
+      } },
       { name: 'qp-skuName-like', label: 'SKU名称' },
-      { name: 'qp-itemCode-like', label: '外部SPU编码' },
+      { name: 'qp-itemCode-in', label: 'SPU编码', field: {
+        type:'multipleQuerySearchSelect', 
+        props: {
+          requestConfig: {
+            url: '/items/item/listNoPage/Simple',
+            filter: 'qp-name-like', // qp-itemCode-like
+            // filter: 'qp-skuCode,name-orGroup,like',
+            mappingTextField: 'name',
+            mappingValueField: 'itemCode',
+            sourceName: 'qp-itemCode-in',
+            specialBracket: true,
+          },
+        }
+      } },
       { name: 'qp-eancode-in', label: '商品条码', field: {
         type: 'multipleQueryInput',
         props: {
@@ -365,6 +396,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`, {
@@ -784,6 +818,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/skuPropertyValue/list`,
       filter: 'qp-value-like', // 过滤参数
       mappingTextField: 'value',
@@ -1694,6 +1729,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/inventoryOrg`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1726,6 +1762,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/company`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1758,6 +1795,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/platCompany`,
       filter: 'qp-name,socialCreditCode-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1790,6 +1828,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/employee/v2`,
       filter: 'qp-employeeNumber,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1887,6 +1926,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/employee/pageList/v2`,
       filter: 'qp-username,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2008,6 +2048,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
     const isLogisCompanyCodeSingleSearch = requestConfigProp?.fixedparameter?.some((i: any) => i == 'qp-logisCompanyCode-eq');
     const logisCompanyCodeSingleSearchName = isLogisCompanyCodeSingleSearch ? 'qp-logisCompanyCode-eq' : 'qp-logisCompanyCode-in';
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/deliveryMode`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2135,6 +2176,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/ruleTemplate`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2210,6 +2252,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/role`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2308,6 +2351,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/channelInfo`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2398,6 +2442,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/orgViewNode/common/pageList`,
       filter: 'qp-name-like', // 过滤参数
       mappingTextField: 'name',
@@ -2531,6 +2576,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/person`,
       filter: 'qp-code,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2687,6 +2733,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/priceType`,
       filter: 'qp-code,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',

package/src/components/Business/SearchSelect/index.md

@@ -426,7 +426,7 @@ export default () => {
   
   useEffect(() => {
     if(tabKey === 'multiple') {
-      setValue(['1540295745870573570', '1540173160826613762'])
+      setValue([])
     }
   },[tabKey])
   
@@ -448,7 +448,7 @@ export default () => {
     // },
     // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
-    // labelInValue: true,
+    labelInValue: true,
     selectBusinessType: 'physicalWarehouse',
   };
 
@@ -520,7 +520,7 @@ export default () => {
     //   needStatusSearch: true
     // },
     selectProps,
-    selectBusinessType: 'realWarehouse',
+    selectBusinessType: 'brand',
   };
 
   const onTabChange = (key) => {
@@ -1707,7 +1707,6 @@ export default () => {
   }
   const selectPropsMultiple = {
     mode: 'multiple',
-    maxTagCount: 1,
   }
 
   const [ tabKey, setTabKey ] = useState('single')

package/src/components/Business/columnSettingTable/columnSetting.tsx

@@ -20,6 +20,7 @@ import request from '@/utils/request';
 import './index.less';
 import ENUM from '@/utils/enumConfig';
 import { handleRequestUrl, judgeIsRequestSuccess } from '@/utils/requestUtils';
+import { renderToString } from '../BsSulaQueryTable/utils';
 
 interface SortTableProps {
   [propName: string]: any;
@@ -644,7 +645,7 @@ class SortableTable extends React.Component<SortTableProps> {
     }: any = this.state;
 
     let seatchDataSource = dataSource.filter(
-      (item: any) => item?.title?.indexOf(searchDataSource || '') > -1,
+      (item: any) => renderToString(item?.title)?.indexOf(searchDataSource || '') > -1,
     );
 
     return (

package/src/components/Business/columnSettingTable/components/TableSumComponent.tsx

@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+import { Typography } from 'antd';
+import './style.less';
+
+//表格底部 金额总计
+export default ({
+  summary
+}: any) => {
+  const { Text } = Typography;
+  
+  return (
+    <Fragment>
+      <div className="table_sum_wrapper">
+        <div className='table-bssula-summary'>
+          {summary.map((item: any) => (
+            <Text type='danger'>
+              {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
+            </Text>
+          ))}
+        </div>
+      </div>
+      <div className="sum_right_line"></div>
+    </Fragment>
+  )
+}

package/src/components/Business/columnSettingTable/components/style.less

@@ -0,0 +1,25 @@
+
+.table_sum_wrapper{
+  position: absolute;
+  overflow: hidden;
+  width: 80%;
+  height: 26px;
+  bottom: 0;
+  .table-bssula-summary{
+    height: 40px;
+    right: 0;
+    bottom: -20px;
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+}
+.sum_right_line {
+  position: absolute;
+  right: 20%;
+  bottom: 0;
+  width: 16px;
+  height: 26px;
+  opacity: 0.32;
+  transform: scaleX(-1);
+  background-image: linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%);
+}

package/src/components/Business/columnSettingTable/index.tsx

@@ -6,6 +6,7 @@ import { getItemDefaultWidth, getShowColumns, handleTextOverflow } from './utils
 import { noEmptyArray } from './utils';
 import ENUM from '@/utils/enumConfig';
 import { handleAntdColumnsSpecialParams } from '@/utils/utils';
+import TableSumComponent from './components/TableSumComponent';
 const { Text } = Typography;
 export default class ColumnSettingTable extends React.Component {
   state: any;
@@ -230,34 +231,8 @@ export default class ColumnSettingTable extends React.Component {
           }
         />
         {Array.isArray(summary) && (
-          <>
-            <div 
-              className='table-bssula-summary' 
-              style={{
-                right: '20%',
-                bottom: 0,
-                whiteSpace: 'nowrap',
-                overflowX: 'auto',
-              }}
-            >
-              {summary.map(item => (
-                <Text type='danger'>
-                  {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
-                </Text>
-              ))}
-            </div>
-            <div style={{
-              width: '16px',
-              height: '26px',
-              opacity: 0.32,
-              transform: 'scaleX(-1)',
-              backgroundImage:'linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%)',
-              right: '20%',
-              position: 'absolute',
-              bottom: 0,
-            }}></div>
-          </>
-       )}
+          <TableSumComponent summary={summary} />
+        )}
       </div >
     )
   }

package/src/components/Business/columnSettingTable/sulaSettingTable.tsx

@@ -10,6 +10,7 @@ import {
 } from 'antd';
 import ENUM from '@/utils/enumConfig';
 import { handleBssulaColumnsSpecialParams, parseWidth, uuid } from '@/utils/utils';
+import TableSumComponent from './components/TableSumComponent';
 const { Text } = Typography;
 
 export default class ColumnSettingSulaTable extends React.Component {
@@ -330,33 +331,7 @@ export default class ColumnSettingSulaTable extends React.Component {
           }
         />
        {Array.isArray(summary) && (
-        <>
-          <div 
-            className='table-bssula-summary' 
-            style={{
-              right: '20%',
-              bottom: 0,
-              whiteSpace: 'nowrap',
-              overflowX: 'auto',
-            }}
-          >
-            {summary.map(item => (
-              <Text type='danger'>
-                {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
-              </Text>
-            ))}
-          </div>
-           <div style={{
-            width: '16px',
-            height: '26px',
-            opacity: 0.32,
-            transform: 'scaleX(-1)',
-            backgroundImage:'linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%)',
-            right: '20%',
-            position: 'absolute',
-            bottom: 0,
-          }}></div>
-        </>
+          <TableSumComponent summary={summary} />
        )}
       </div >
     )

package/src/components/Functional/QueryMutipleSelect/index.less

@@ -0,0 +1,117 @@
+@border-color: #d9d9d9;
+@primary-color: #005cff;
+
+.query_select {
+  // 选择器 隐藏滚动条 横向滑动
+  .ant-select-selector{
+    height: 24px;
+    overflow: hidden;
+    .ant-select-selection-overflow{
+      height: 40px;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+    .ant-select-selection-overflow-item {
+      align-self: auto;
+    }
+  }
+  &_show {
+    display: flex;
+
+    // 下拉框清除图标位置调整
+    .ant-select-clear {
+      right: 33px;
+    }
+
+    // 解决多选宽度不够 滑动会白一块的问题
+    .ant-select-multiple.ant-select-show-arrow .ant-select-selector, .ant-select-multiple.ant-select-allow-clear .ant-select-selector {
+      padding-right: 28px;
+    }
+
+    .ant-select-dropdown {
+      top: 24px !important;
+      left: -110px !important;
+      width: calc(100% + 110px) !important;
+    }
+  }
+
+  &_expand_button {
+    position: relative;
+    right: -11px;
+    width: 30px;
+    border-left: 1px solid @border-color;
+    height: 24px;
+    cursor: pointer;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.85);
+    span {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  &_expand_button:hover {
+    background-color: @primary-color;
+    color: #fff;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+
+  &_wrapper {
+    &_top {
+      color: #8E8E8E;
+    }
+  }
+
+  &_textArea {
+    margin-top: 10px;
+    .ant-input {
+      height: 300px;
+      background: #FAFAFA;
+      border: 0.8px solid #E0E0E0;
+      resize: none;
+      border-radius: 0;
+    }
+  }
+}
+
+.multiInput_modal{
+  .ant-modal-header{
+    height: 32px;
+    padding: 0 16px;
+    font-size: 12px;
+  }
+  .ant-modal-title{
+    line-height: 32px;
+  }
+  .ant-modal-close-x{
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .ant-modal-footer{
+    padding-right: 8px;
+    height: 44px;
+    .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+      margin-left: 6px;
+    }
+    .ant-btn {
+      width: 56px;
+      height: 28px;
+      font-weight: 500;
+    }
+  }
+}
+
+.searchSelectMaxTagToolTip {
+  .ant-tooltip-inner {
+    max-height: 72px;
+    overflow-x: auto;
+    padding: 0px;
+  }
+  .ant-tag {
+    display: flex;
+    width: fit-content;
+  }
+}