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

package/package.json

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

package/src/components/Business/PropertyModal/index.less

@@ -0,0 +1,58 @@
+.property_classify_content {
+    margin-bottom: 15px;
+}
+
+.property_classify_content1 {
+    max-height: 350px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+//滚动条  
+/* 滚动槽（轨道）宽高 */
+.property_classify_content1::-webkit-scrollbar {
+width: 5px; /*对垂直流动条有效*/
+height: 5px; /*对水平流动条有效*/
+}
+/* 滚动槽（轨道）样式 */
+.property_classify_content1::-webkit-scrollbar-track {
+background-color: #ffffff;
+border-radius: 8px;
+}
+
+/*定义滑块颜色、内阴影及圆角*/
+.property_classify_content1::-webkit-scrollbar-thumb {
+border-radius: 7px;
+background-color: #CECECE;
+}
+
+/*定义两端按钮的样式*/
+.property_classify_content1::-webkit-scrollbar-button {
+display: none;
+}
+
+.propertyGroup_container {
+    display: flex;
+    margin-bottom: 16px;
+    .propertyGroup_container_left {
+        width: 100px;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+    .propertyGroup_container_right {
+        width: 560px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
+        margin-left: 0px;
+    }
+}
+
+.propertyGroup_checkbox_container {
+    width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

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

@@ -0,0 +1,33 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: PropertySelector 属性选择器
+order: 1
+---
+
+# PropertySelector
+
+## 属性选择器
+
+```tsx
+import React, { useState } from 'react';
+import PropertySelector from './index.tsx';
+
+export default () => {
+
+  const [value, setValue] = useState({});
+  
+  return (
+    <div style={{ width: '200px' }}>
+        <PropertySelector 
+            value={value}
+            onChange={(value) => setValue(value)}
+        />
+    </div>
+  );
+};
+```

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

@@ -0,0 +1,266 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Modal, Select, Tag } from "antd";
+import "./index.less";
+import { MockPropertyList } from "./mockData";
+import PropertyGroup from "./propertyGroup";
+import { CaretUpOutlined, CaretDownOutlined, CaretUpFilled, CaretDownFilled } from '@ant-design/icons';
+import request from '@/utils/request';
+import { judgeIsRequestError } from "@/utils";
+
+interface propertyValueType {
+    propertyName: string;
+    propertyCode: string;
+    isCommonUse?: Boolean | String;
+    detailList: Array<{
+        name: string;
+        value: string;
+        isCommonUse?: Boolean | String;
+    }>;
+}
+
+interface valueType {
+    classifyCode: string;
+    classifyName: string;
+    propertyList: propertyValueType[];
+}
+
+interface PropertyGroupValueType {
+    propertyCode: string;
+    propertyName: string;
+    detailList: Array<{
+        name: string;
+        value: string;
+    }>;
+}
+const PropertySelector = ({
+    value,
+    onChange,
+    width,
+    ...restProps
+}: { value: valueType, onChange: any, width: string }
+) => {
+    const settingValue = useRef<valueType>({
+        classifyCode: '',
+        classifyName: '',
+        propertyList: []
+    });
+    const [choosedValues, setChoosedValues] = useState<any[]>([]);
+    const [choosedClassify, setChoosedClassify] = useState('');
+    const [commonProperty, setCommonUseProperty] = useState<any[]>([]);
+    const [notCommonProperty, setNotCommonProperty] = useState<any[]>([]);
+
+    const [visible, setVisible] = useState(false);
+    const [showNotCommon, setShowNotCommon] = useState(false); // 是否展示非常用属性
+    const [classifyOptionList, setClassifyOptionList] = useState<any[]>([]);
+    const [listKey, setListKey] = useState('1');
+    
+    useEffect(() => {
+        request({
+            url: '/items/class/withProperty?pageSize=500&currentPage=1',
+            method: 'GET',
+        })
+        .then(({data}: any) => {
+            if (judgeIsRequestError(data)) {
+                return
+            }
+            const items = data.data?.items || [];
+            setClassifyOptionList(items.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+            })))
+        })
+    }, [])
+
+    useEffect(() => {
+        if (!choosedClassify) return;
+        request({
+            url: `/items/classProperty/${choosedClassify}`,
+            method: 'GET',
+        })
+        .then(({data}: any) => {
+            if (judgeIsRequestError(data)) {
+                return
+            }
+
+            const newArr = (data?.data || []).map((item: any) => {
+                return {
+                    propertyCode: item.property.propertyCode,
+                    propertyName: item.property.name,
+                    propertyId: item.property.id,
+                    isCommonUse: item.property.isCommonUse === 'commonUse',
+                    detailList: item.propertyValueList.map((detail: any) => ({
+                        name: detail.value,
+                        value: detail.value,
+                        isCommonUse: detail.isCommonUse === 'commonUse',
+                    }))
+                }
+            })
+
+            setCommonUseProperty(newArr.filter((item: any) => item.isCommonUse))
+            setNotCommonProperty(newArr.filter((item: any) => !item.isCommonUse))
+            setListKey(listKey === '1' ? '2' : '1');
+        })
+    }, [choosedClassify])
+
+
+    useEffect(() => {
+        // 获取选中品类信息
+        setChoosedClassify(value?.classifyCode);
+
+        // 获取选中属性值展示
+        const choosedPropertyList = (value?.propertyList || []).map(item => (item.detailList || []).map(detail => detail.name)).flat();
+        if ((value?.propertyList || []).some(item => !item.isCommonUse)) {
+            setShowNotCommon(true);
+        }
+        setChoosedValues(choosedPropertyList);
+        settingValue.current = {...value};
+    }, [value])
+
+    // 关闭弹窗回传组件值
+    const handleConfirm = () => {
+        setVisible(false);
+        onChange(settingValue.current);
+    }
+    const onCancel = () => {
+        setVisible(false);
+    }
+
+    // 获取选中属性值信息
+    const handleProperyItemChange = (value: PropertyGroupValueType) => {
+        const newDetailList = settingValue.current?.propertyList || [];
+        const itemIndex = newDetailList.findIndex((item: any) => item.propertyCode === value.propertyCode);
+        if (itemIndex !== -1) {
+            newDetailList[itemIndex] = value;
+        } else {
+            newDetailList.push(value);
+        }
+        settingValue.current = {
+            ...settingValue.current,
+            propertyList: newDetailList.filter(item => item.detailList && item.detailList.length),
+        };
+    }
+
+    //修改品类值
+    const onClassifyChange = (value: string, option: any) => {
+        setChoosedClassify(value);
+        settingValue.current = {
+            classifyCode: value,
+            classifyName: option.children,
+            propertyList: [],
+        };
+    };
+
+    const tagRender = (props: any) => {
+        const { label, value, closable, onClose } = props;
+        const onPreventMouseDown = (event: any) => {
+          event.preventDefault();
+          event.stopPropagation();
+        };
+        return (
+          <Tag
+            closable={false}
+            style={{ marginRight: 3, height: '20px', fontSize: '12px' }}
+          >
+            {label}
+          </Tag>
+        );
+      };
+
+    return (
+        <div>
+            <Select
+                maxTagCount={1}
+                tagRender={tagRender}
+                {...restProps}
+                mode="multiple"
+                value={choosedValues}
+                onClick={() => {
+                    setVisible(true)
+                }}
+                style={{ width: width || '100%' }}
+                open={false}
+            />
+            <Modal
+                title="属性设置"
+                width={700}
+                open={visible}
+                onOk={handleConfirm}
+                destroyOnClose
+                onCancel={onCancel}
+                cancelText={'取消'}
+                okText={'确定'}
+            >
+                <div>
+                    <div className={'property_classify_content'}>
+                        <span style={{ marginRight: '10px' }}>品类模板</span>
+                        <Select
+                            style={{ width: '200px' }}
+                            value={choosedClassify}
+                            options={classifyOptionList}
+                            onChange={(value, option) => {
+                                onClassifyChange(value, option);
+                            }}
+                        />
+                    </div>
+                    <div className={'property_classify_content1'} key={listKey}>
+                        <div>
+                            {
+                                commonProperty.map(item => (
+                                    <PropertyGroup
+                                        modalVisilbe={visible}
+                                        itemValue={settingValue.current}
+                                        propertyData={item}
+                                        handleProperyItemChange={handleProperyItemChange}
+                                    />
+                                ))
+                            }
+                        </div>
+                        <div>
+                            {
+                                showNotCommon && notCommonProperty.map(item => (
+                                    <PropertyGroup
+                                        modalVisilbe={visible}
+                                        itemValue={settingValue.current}
+                                        propertyData={item}
+                                        handleProperyItemChange={handleProperyItemChange}
+                                    />
+                                ))
+                            }
+                        </div>
+                    </div>
+                    {
+                        !!notCommonProperty.length && (
+                            <div>
+                                <div
+                                    style={{ width: '50px', cursor: 'pointer', color: '#005cff', fontSize: '10px' }}
+                                    onClick={() => setShowNotCommon(!showNotCommon)}
+                                >
+                                    {
+                                        showNotCommon && (
+                                            <>
+                                                <CaretUpOutlined />
+                                                收起
+                                            </>
+                                        )
+                                    }
+                                    {
+                                        !showNotCommon && (
+                                            <>
+                                                <CaretDownOutlined  />
+                                                展开
+                                            </>
+                                        )
+                                    }
+                                </div>
+                            </div>
+                        )
+                    }
+                </div>
+
+            </Modal>
+        </div>
+    )
+}
+
+export default PropertySelector;
+

package/src/components/Business/PropertyModal/mockData.ts

@@ -0,0 +1,160 @@
+export const MockPropertyList = [
+    {
+        propertyCode: 'year',
+        propertyName: '年份',
+        isCommonUse: true,
+        detailList: [
+            {
+                name: '2022',
+                value: '2022',
+                isCommonUse: true,
+            },
+            {
+                name: '2023',
+                value: '2023',
+                isCommonUse: true,
+            },
+            {
+                name: '2024',
+                value: '2024',
+                isCommonUse: true,
+            },
+        ]
+    },
+    {
+        propertyCode: 'season',
+        propertyName: '季节',
+        isCommonUse: true,
+        detailList: [
+            {
+                name: '春',
+                value: '1',
+                isCommonUse: true,
+            },
+            {
+                name: '夏',
+                value: '2',
+                isCommonUse: true,
+            },
+            {
+                name: '秋',
+                value: '3',
+                isCommonUse: true,
+            },
+            {
+                name: '冬',
+                value: '4',
+                isCommonUse: true,
+            },
+        ]
+    },
+    {
+        propertyCode: 'color',
+        propertyName: '色号',
+        isCommonUse: true,
+        detailList: [
+            {
+                name: '赤',
+                value: '1',
+                isCommonUse: true,
+            },
+            {
+                name: '橙',
+                value: '2',
+                isCommonUse: true,
+            },
+            {
+                name: '红',
+                value: '3',
+                isCommonUse: true,
+            },
+            {
+                name: '绿',
+                value: '4',
+                isCommonUse: true,
+            },
+            {
+                name: '青',
+                value: '5',
+                isCommonUse: true,
+            },
+            {
+                name: '蓝',
+                value: '6',
+                isCommonUse: true,
+            },
+            {
+                name: '紫',
+                value: '7',
+                isCommonUse: true,
+            },
+            {
+                name: '橘红',
+                value: '8',
+                isCommonUse: false,
+            },
+            {
+                name: '天蓝',
+                value: '9',
+                isCommonUse: false,
+            },
+            {
+                name: '银白',
+                value: '10',
+                isCommonUse: false,
+            },
+            {
+                name: '紫',
+                value: '11',
+                isCommonUse: false,
+            },
+        ]
+    },
+    {
+        propertyCode: 'brandCode',
+        propertyName: '品牌',
+        isCommonUse: false,
+        detailList: [
+            {
+                name: '品牌2',
+                value: '2',
+                isCommonUse: true,
+            },
+            {
+                name: '品牌3',
+                value: '3',
+                isCommonUse: true,
+            },
+            {
+                name: '品牌4',
+                value: '4',
+                isCommonUse: true,
+            },
+           
+        ]
+    },
+    {
+        propertyCode: 'size',
+        propertyName: '尺码',
+        isCommonUse: false,
+        detailList: [
+            {
+                name: 'M',
+                value: '2',
+                isCommonUse: true,
+            },
+            {
+                name: 'L',
+                value: '3',
+                isCommonUse: true,
+            },
+            {
+                name: 'XL',
+                value: '4',
+                isCommonUse: true,
+            },
+           
+        ]
+    },
+
+]