@bit-sun/business-component 4.0.13-alpha.17 → 4.0.13-alpha.19

package/dist/plugin/TableColumnSetting/index.d.ts

@@ -38,14 +38,14 @@ declare class TableColumnSetting extends React.Component<TableColumnSettingProps
     } | {
         title: string;
         dataIndex: string;
-        render: (text: any, record: any) => JSX.Element;
+        render: (text: any, record: any) => React.JSX.Element;
         className?: undefined;
         width?: undefined;
     } | {
         title: string;
         dataIndex: string;
         className: string;
-        render: () => JSX.Element;
+        render: () => React.JSX.Element;
         width?: undefined;
     })[];
     showModal: () => void;
@@ -53,12 +53,12 @@ declare class TableColumnSetting extends React.Component<TableColumnSettingProps
     handleCancel: (e: React.MouseEvent<HTMLElement>) => void;
     handleTableHeadHidden: (title: string) => void;
     onSortEnd: ({ oldIndex, newIndex }: any) => void;
-    DraggableContainer: (props: any) => JSX.Element;
-    DraggableBodyRow: ({ className, style, ...restProps }: any) => JSX.Element;
+    DraggableContainer: (props: any) => React.JSX.Element;
+    DraggableBodyRow: ({ className, style, ...restProps }: any) => React.JSX.Element;
     onChange: (e: any, title: any) => void;
     handleReset: () => void;
     onSearch: (e: any) => void;
     onSearchSort: (e: any) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default TableColumnSetting;

package/dist/utils/TableUtils.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import moment from 'moment';
 type mediaListType = {
     type: number;
@@ -49,24 +49,24 @@ declare const updateGuanDate: (requestParams: any, dateKeyParams?: any) => {
     };
     submit: any;
 };
-declare const textIcon: (type: string | number, text?: string) => JSX.Element | undefined;
-declare const handleTextDoubleOrId: (textOne: string | undefined, textTwo: string | undefined) => JSX.Element;
-declare const handleTextDouble: (textOne: string | undefined, textTwo: string | undefined) => JSX.Element;
-declare const handleTextOverflow: (text: string | undefined, width?: number) => JSX.Element;
-declare const handleTextLineFeed: (text: string | undefined, width?: number) => JSX.Element;
-declare const handleTextTooltip: (text: any) => JSX.Element;
-declare const handleTextBreakSpaces: (text: any) => JSX.Element;
-declare const handleStatusBadge: (text: any, color: any) => JSX.Element;
-declare const HandleTotalCount: (totalParams: any) => JSX.Element;
+declare const textIcon: (type: string | number, text?: string) => React.JSX.Element | undefined;
+declare const handleTextDoubleOrId: (textOne: string | undefined, textTwo: string | undefined) => React.JSX.Element;
+declare const handleTextDouble: (textOne: string | undefined, textTwo: string | undefined) => React.JSX.Element;
+declare const handleTextOverflow: (text: string | undefined, width?: number) => React.JSX.Element;
+declare const handleTextLineFeed: (text: string | undefined, width?: number) => React.JSX.Element;
+declare const handleTextTooltip: (text: any) => React.JSX.Element;
+declare const handleTextBreakSpaces: (text: any) => React.JSX.Element;
+declare const handleStatusBadge: (text: any, color: any) => React.JSX.Element;
+declare const HandleTotalCount: (totalParams: any) => React.JSX.Element;
 declare const handleCommonTimeRender: (text: any, format?: any) => any;
-declare const handleTooltip: (text: any, timeTrue?: boolean) => JSX.Element;
-declare const handleTooltipHours: (text: any, timeTrue?: boolean) => JSX.Element;
+declare const handleTooltip: (text: any, timeTrue?: boolean) => React.JSX.Element;
+declare const handleTooltipHours: (text: any, timeTrue?: boolean) => React.JSX.Element;
 type tableColumnsImageType = {
     width?: number | string;
     height?: number | string;
     [key: string]: any;
 };
-declare const tableColumnsImage: (url?: string, paramsObj?: tableColumnsImageType) => JSX.Element;
+declare const tableColumnsImage: (url?: string, paramsObj?: tableColumnsImageType) => React.JSX.Element;
 interface ColumnsEditInterfave {
     text?: string;
     record?: any;
@@ -82,7 +82,7 @@ interface ColumnsEditInterfave {
     };
     [key: string]: any;
 }
-declare const ColumnsEdit: (props: ColumnsEditInterfave) => JSX.Element;
+declare const ColumnsEdit: (props: ColumnsEditInterfave) => React.JSX.Element;
 type UserColumnsType = {
     name: string;
     department?: string;
@@ -90,13 +90,13 @@ type UserColumnsType = {
     company?: string;
     avatar?: string;
 };
-declare const userColumns: (props: UserColumnsType) => JSX.Element;
-declare const userInfoCard: (props: any) => JSX.Element;
+declare const userColumns: (props: UserColumnsType) => React.JSX.Element;
+declare const userInfoCard: (props: any) => React.JSX.Element;
 declare const getItemDefaultWidth: (item: any) => number;
-declare const sulaTableRenderTooltip: ({ text }: any) => JSX.Element;
+declare const sulaTableRenderTooltip: ({ text }: any) => React.JSX.Element;
 declare const renderNumberText: ({ text }: any) => any;
 declare const renderFixed2: (text: any) => any;
-declare const handleTextWarpCustom: (text: any, style?: {}) => JSX.Element;
+declare const handleTextWarpCustom: (text: any, style?: {}) => React.JSX.Element;
 declare const calculateValidPeriod: (start: any, end: any) => string;
-declare const handleTextWarp: (text: any) => JSX.Element;
+declare const handleTextWarp: (text: any) => React.JSX.Element;
 export { getSkuImg, updateGuanDate, textIcon, handleTextDoubleOrId, handleTextDouble, handleTextOverflow, handleTextLineFeed, handleTextTooltip, handleTextBreakSpaces, handleStatusBadge, HandleTotalCount, handleTooltip, handleCommonTimeRender, handleTooltipHours, tableColumnsImage, ColumnsEdit, userColumns, userInfoCard, getItemDefaultWidth, renderNumberText, sulaTableRenderTooltip, renderFixed2, handleTextWarpCustom, handleTextWarp, calculateValidPeriod };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.13-alpha.17",
+  "version": "4.0.13-alpha.19",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

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

@@ -0,0 +1,88 @@
+// @ts-nocheck
+
+import React, { useState, useEffect } from 'react';
+import { Input, Select } from 'antd';
+import { request } from 'bssula';
+
+const ItemPropertySelector = ({
+    onChange,
+    value,
+    propertyCode,
+    name,
+    ...restProps
+}: any) => {
+
+    const [source, setSource] = useState([]);
+
+    useEffect(() => {
+        // FIXME: 目前只能通过固定属性编码先获取属性id，再通过属性id去查属性值 @林军
+        if (propertyCode) {
+            request({
+                url: `/items/item/propertyValue/getPropertyValueNoPagerByCode?qp-propertyCode-eq=${propertyCode}&pageSize=5000`,
+                method: 'GET',
+                converter: ({ data }: any) => {
+                    const source = (data?.items || []).map(item => ({
+                        text: item.value,
+                        value: item.value
+                    }))
+                    setSource(source);
+                }
+            })
+            return;
+            request({
+                url: `/items/item/property?qp-propertyCode-eq=${propertyCode}`,
+                metod: 'GET',
+                converter: ({ data }: any) => {
+                    let propInfo = data?.items?.[0] || {};
+                    if (propInfo?.dictIs) {
+                        request({
+                            url: `/items/bscDict/detailAndFilter/${propInfo?.dictCode}`,
+                            method: 'GET',
+                            converter: ({ data }: any) => {
+                                const source = (data?.dictItemResVoList || []).map(item => ({
+                                    text: item.dictItemName,
+                                    value: item.dictItemName
+                                }))
+                                setSource(source);
+                            }
+                        })
+                        return;
+                    }
+
+                    if (propInfo?.id) {
+                        request({
+                            url: `/items/item/propertyValue?qp-propertyId-eq=${propInfo?.id}`,
+                            method: 'GET',
+                            converter: ({ data }: any) => {
+                                const source = (data?.items || []).map(item => ({
+                                    text: item.value,
+                                    value: item.value
+                                }))
+                                setSource(source);
+                            }
+                        })
+                    }
+                }
+            })
+        }
+    }, [propertyCode]);
+
+
+    return (
+        <Select
+            {...restProps}
+            value={value}
+            allowClear
+            style={{width: '100%'}}
+            onChange={(v: any) => {
+                onChange(v);
+            }}
+        >
+            {source.map((res) => {
+                return <Select.Option value={res.value}>{res.text}</Select.Option>;
+            })}
+        </Select>
+    );
+};
+
+export default ItemPropertySelector;

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

@@ -628,6 +628,198 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
     }
   }
 
+  // 新库存商品选择器spu
+  if(type === 'spuCommodityWithProperty') {
+    selectProps = {
+      placeholder: '输入spu编码或名称',
+      renderTableColumns: [
+        {
+          title: 'spu编码',
+          dataIndex: 'itemCode',
+        },
+        {
+          title: 'spu名称',
+          dataIndex: 'name',
+        },
+      ],
+      ...selectConfigProps,
+    }
+    requestConfig = {
+      url: `/stock/item/doItemPageAll`,
+      method: 'POST',
+      filter: 'qp-itemCode,name-orGroup,like', // 过滤参数
+      mappingTextField: 'name',
+      mappingValueField: 'itemCode',
+      otherParams: {
+        // 'qp-approveStatus-eq': 1, // 审核状态(0.待审批;1.审批通过;2.驳回;3.审批未通过)
+        sorter: 'desc-id',
+        ...(requestConfigProp?.addOtherParams || {}),
+      }, // 默认参数
+      sourceName: 'itemCode',
+      ...requestConfigProp,
+    }
+    tableSearchForm = [
+      { name: 'qp-name-like', label: 'SPU名称' },
+      { name: 'qp-itemCode-like', label: 'SPU编码' },
+      { name: 'qp-brandId-in', type: 'select', label: '品牌', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        } },
+      { name: 'qp-categoryId-in', type: 'treeSelect', label: '类目', field: {
+          type: 'treeSelect',
+          props: {
+            treeData: [],
+            treeCheckable: true,
+            showSearch: true,
+            allowClear: true,
+            showArrow: true,
+            treeNodeFilterProp: 'title',
+            treeDefaultExpandAll: true,
+            maxTagCount: 1,
+            placeholder: '请选择',
+            style: {
+              width: '100%',
+            },
+            dropdownStyle: { maxHeight: 400, maxWidth: 100, overflow: 'auto' }
+          },
+        } },
+      { name: 'qp-classId-in', type: 'select', label: '品类', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        } },
+        { 
+          name: 'qp-year-in', 
+          label: '年份', 
+          field: {
+            type: 'itemPropertySelector',
+            props: {
+              propertyCode: 'SX0000114',
+              mode: 'multiple',
+            }
+          }
+        },
+        { 
+          name: 'qp-season-in', 
+          label: '季节', 
+          field: {
+            type: 'itemPropertySelector',
+            props: {
+              propertyCode: 'SX0000070',
+              mode: 'multiple',
+            }
+          }
+        },
+        { 
+          name: 'qp-zzdlbm-in', 
+          label: '大类', 
+          field: {
+            type: 'itemPropertySelector',
+            props: {
+              propertyCode: 'SX0000071',
+              mode: 'multiple',
+            }
+          }
+        },
+        { 
+          name: 'qp-zzzlbm-in', 
+          label: '中类', 
+          field: {
+            type: 'itemPropertySelector',
+            props: {
+              propertyCode: 'SX0000072',
+              mode: 'multiple',
+            }
+          }
+        },
+        { 
+          name: 'qp-zzxlbm-in', 
+          label: '小类', 
+          field: {
+            type: 'itemPropertySelector',
+            props: {
+              propertyCode: 'SX0000110',
+              mode: 'multiple',
+            }
+          }
+        },
+    ]
+    Promise.all([
+      loadSelectSource(`${prefixUrl.formSelectFix}/brand/queryBrandList`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'ctl-withAuth': true
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/category/queryCategoryTree`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/class/withProperty`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+    ]).then((x: any)=>{
+      formatSource(x,0, 2, tableSearchForm,['id','name']);
+      formatTreeDataSource(x,1, 3, tableSearchForm);
+      formatSource(x,2, 4, tableSearchForm,['id','name']);
+    })
+    modalTableProps = {
+      modalTableTitle: '选择SPU',
+      tableSearchForm,
+      tableColumns: [
+        {
+          title: '序号',
+          dataIndex: 'keyIndex',
+          defaultSort: 0,
+        },
+        {
+          title: 'SPU编码',
+          dataIndex: 'itemCode',
+          defaultSort: 1,
+        },
+        {
+          title: 'SPU名称',
+          dataIndex: 'name',
+          defaultSort: 2,
+        },
+        {
+          title: '品牌',
+          dataIndex: 'brandName',
+          defaultSort: 3,
+        },
+        {
+          title: '类目',
+          dataIndex: 'categoryText',
+          defaultSort: 4,
+        },
+        {
+          title: '品类',
+          dataIndex: 'className',
+        },
+      ],
+      ...modalTableBusProps
+    }
+  }
+
   // 商品选择器skc
   if(type === 'skcCommodity') {
     selectProps = {

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

@@ -297,7 +297,7 @@ import {BusinessSearchSelect} from '../../../index.ts';
 const { TabPane } = Tabs;
 export default () => {
   const selectProps = {
-    // mode: 'multiple',
+    mode: 'multiple',
     // maxTagCount: 1,
     // disabled: true
   }
@@ -317,7 +317,7 @@ export default () => {
     },
     // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
-    selectBusinessType: 'spuCommodity',
+    selectBusinessType: 'spuCommodityWithProperty',
   };
 
   const onTabChange = (key) => {

package/src/components/Business/SearchSelect/utils.ts

@@ -79,7 +79,7 @@ const handleDefaultPrefixUrl = (type: string) => {
     case 'supplier2': case 'customer2': case 'shopFile2': case 'platCompany': case 'market-channel':
       result =  '/channel-manage';
       break;
-    case 'skuCommodity': case 'skuPropertyValue': case 'spuCommodity': case 'skcCommodity': case 'brand':
+    case 'skuCommodity': case 'skuPropertyValue': case 'spuCommodity': case 'skcCommodity': case 'brand': case 'spuCommodityWithProperty':
       result =  '/items';
       break;
     case 'physicalWarehouse': case 'realWarehouse': case 'virtualWarehouse': case 'channelWarehouse': case 'ownerWarehouse':

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, Empty } 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, getShowStr, handleTableColumns }  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;
 
@@ -573,7 +574,7 @@ 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) => {
         if(i?.type === 'kong') return <Col span={ColSpan} key={i}></Col>;
@@ -602,6 +603,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}>
@@ -635,6 +655,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}>
@@ -929,7 +962,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;