@bit-sun/business-component 4.0.12-alpha.3 → 4.0.12-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.12-alpha.3",
+  "version": "4.0.12-alpha.30",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "antd": "^4.17.2",
-    "bssula": "4.0.12-alpha.6",
-    "umi-plugin-bssula": "4.0.8-alpha.3",
+    "bssula": "4.1.1",
+    "umi-plugin-bssula": "4.1.1",
     "umi": "^3.5.20",
     "@ant-design/pro-layout": "^6.5.0",
     "react-dnd": "^16.0.1",

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

@@ -23,6 +23,28 @@ import { BsSulaQueryTable } from '../../../index.ts';
 export default () => {
   const config = {
     needPageHeader: false,
+    remoteDataSource: {
+      url: `https://randomuser.me/api`,
+      method: 'GET',
+      convertParams({ params }) {
+    return {
+      results: params.pageSize,
+      ...params,
+    };
+  },
+  converter({ data }) {
+    return {
+      list: data.results.map((item, index) => {
+        return {
+          ...item,
+          id: `${index}`,
+          name: `${item.name.first} ${item.name.last}`,
+        };
+      }),
+      total: 100,
+    };
+  },
+    },
     summary: [{
       label: '总金额',
       count: 100
@@ -72,26 +94,97 @@ export default () => {
     ],
     columns: [
       {
-        dataIndex: 'code',
-        title: '应用编码',
-        tableHeadFilterKey: 'qp-code-eq',
-      },
-      {
-        dataIndex: 'operator',
-        title: '操作',
-        fixed: 'right',
-        render: [
-          {
-            type: 'link',
-            code: 'User_ApplicationList_edit',
-            props: {
-              type: 'primary',
-              children: '编辑',
-            },
-            visible: '#{record.status === 1}',
-            action: ['refreshTable'],
-          },
-        ],
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+        width: 30,
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
       },
     ],
     rowKey: 'id',

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

@@ -41,18 +41,120 @@ interface Field {
 const MemoQueryTable = React.memo(QueryTable);
 const { Text } = Typography;
 
-const ResizeableTitle = (props) => {
+const ResizeableTitle = (props: any) => {
   const { onResize, width, ...restProps } = props;
+  
+  const [innerWidth, setInnerWidth] = useState(width);
+  const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
+  const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
+  const [startX, setStartX] = useState(0); // 初始X坐标
+  const markerPosition = useRef({ left: 0, top: 0 });
+  const currentStart = useRef(0);
+  const uuidref = useRef(uuid());
+  
+  const prevWidthRef = useRef(width);
+
+  const handleMouseDown = (e: any) => {
+    currentStart.current = e.clientX;
+    markerPosition.current = { left: e.clientX, top: e.clientY }
+    setIsResizing(true);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // 更新标记位置
+    markerPosition.current = { left: e.clientX, top: e.clientY }
+    const dom: HTMLElement | null =  document.getElementById('text1');
+
+    if (dom && dom.style) {
+      dom.style.left = `${e.clientX}px`;
+      dom.style.top = `${e.clientY - 20}px`;
+    }
+  };
+
+  const handleMouseUp = (e: any) => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    setIsResizing(false);
+  };
+  
+  const handleresize = (e: any, data: any, title: string) => {
+    const newWidth = data?.size?.width || 0;
+    setInnerWidth(newWidth); // 更新内部分宽度
+  };
+
+  const handleResizeStart = () => {
+    setIsResizing(true);
+  };
+
+  const handleResizeStop = (e: any, data: any) => {
+    setIsResizing(false);
+    if (onResize) {
+      onResize(e, data);
+    }
+  };
+
+  useEffect(() => {
+    if (width !== prevWidthRef.current) {
+      prevWidthRef.current = width;
+      setInnerWidth(width);
+    }
+  }, [width]);
+
+  const thStyle = {
+    boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
+  };
 
-  if (!width) {
-    return <th {...restProps} />;
-  }
   return (
     <Resizable
-      width={width}
+      width={innerWidth}
       height={0}
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
+      handle={
+        <div>
+          <div
+        style={{
+          width: '10px',
+          height: '30px',
+          cursor: 'col-resize', // 拖动时改变鼠标样式
+          position: 'absolute',
+          zIndex: 10,
+          top: 0,
+          right: 0,
+        }}
+        onMouseDown={handleMouseDown}
+        // onDrag={handleDrag}
+      >
+      </div>
+      {isResizing && <div
+          id="text1"
+          style={{
+            position: 'fixed',
+            left: markerPosition.current.left, // 跟随鼠标偏移一点
+            top: markerPosition.current.top - 20,
+            backgroundColor: '#1890ff',
+            color: 'white',
+            borderRadius: '4px',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            height: '40px',
+            width: 2
+          }}
+        >
+        </div>}
+        </div>
+      }
+      onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
+      onResizeStart={handleResizeStart}
+      onResizeStop={handleResizeStop}
+      draggableOpts={{
+        enableUserSelectHack: true,
+        grid: [20, 20],
+        axis: 'x',
+        bounds: 'parent',
+      }}
     >
       <th {...restProps} />
     </Resizable>

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,271 @@
+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(() => {
+        if (visible) {
+            // 获取选中品类信息
+            setChoosedClassify(value?.classifyCode || classifyOptionList[0]?.value);
+        }
+        // 获取选中属性值展示
+        const choosedPropertyList = (value?.propertyList || []).map(item => (item.detailList || []).map(detail => detail.name)).flat();
+        if ((value?.propertyList || []).some(item => !item.isCommonUse)) {
+            setShowNotCommon(true);
+        }
+        settingValue.current = {
+            ...value,
+            classifyCode: value?.classifyCode || classifyOptionList[0]?.value,
+        };
+        setChoosedValues(choosedPropertyList);
+
+    }, [value, visible])
+
+    // 关闭弹窗回传组件值
+    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;
+