@bit-sun/business-component 1.2.3 → 1.2.4-alpha.1

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

@@ -0,0 +1,290 @@
+/*
+ * @Description:
+ * @Author: rodchen
+ * @Date: 2022-05-07 15:17:28
+ * @LastEditTime: 2022-05-08 21:01:21
+ * @LastEditors: rodchen
+ */
+import React, { useState } from 'react';
+import { Tooltip, Select } from 'antd';
+import { AddSelect } from '../../../index';
+
+export const AddSkuSelect = (parProps: any) => {
+  const selectProps = {
+    mode: 'multiple',
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    buttonText: parProps.buttonText || '新增',
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `/items/sku/pager/v2`,
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
+      otherParams: {
+        'qp-combination-eq': false,
+        'qp-approveStatus-eq': 1,
+        'qp-status-eq': 1,
+      }, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'skuCode',
+      ...parProps.requestConfig
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    beforeShowModal: parProps?.beforeShowModal,
+    onSaveCallback: parProps.onSaveCallback
+    // onSaveCallback: (rows) => {
+    //   console.log('save call', rows);
+    //   // return Promise.resolve(true);
+    //   // return Promise.reject('FAILE')
+    // }
+  };
+  const modalTableProps = {
+    modalTableTitle: '选择商品',
+    tableSearchForm: [
+      {
+        name: 'qp-skuCode-like', label: 'SKU编码'
+      },
+      { name: 'qp-skuName-like', label: 'SKU名称' },
+      { 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' }
+        },
+      } }
+    ],
+    tableColumns: [
+      {
+        title: 'SKU编码',
+        width: 150,
+        dataIndex: 'skuCode',
+      },
+      {
+        title: 'SKU名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '国际条码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'barCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '所属SPU名称',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemName',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '所属SPU编码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '外部编码',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'externalCode',
+      },
+      {
+        title: '规格',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'propertyNameAndValue',
+      },
+      {
+        title: '类目',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'categoryName',
+      },
+      {
+        title: '品类',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'className',
+      },
+      {
+        title: '品牌',
+        width: 100,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'brandName',
+      },
+    ],
+    selectColumn: [
+      {
+        title: 'SKU编码',
+        width: 150,
+        dataIndex: 'skuCode',
+      },
+      {
+        title: 'SKU名称',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'name',
+      },
+      {
+        title: '数量',
+        width: 100,
+        isInputItem: true,
+        dataIndex: 'count',
+      },
+      {
+        title: '单位',
+        dataIndex: 'selectUnitCode',
+        width: 80,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any, record: any) => {
+          if (record?.packingUnitList?.length) {
+            const basePackUnit = record?.packingUnitList[0]
+            record.selectUnitCode = basePackUnit.unitCode
+            return basePackUnit.name || basePackUnit.unitCode
+          }
+
+
+          return <></>
+        },
+      },
+      {
+        title: '所属SPU编码',
+        width: 150,
+        ellipsis: {
+          showTitle: false,
+        },
+        dataIndex: 'itemCode',
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '规格',
+        width: 200,
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (text: any) => (
+          <Tooltip placement="topLeft" title={text}>
+            {text}
+          </Tooltip>
+        ),
+        dataIndex: 'propertyNameAndValue',
+      }
+    ]
+  }
+
+  return (
+    <div>
+      <AddSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};

package/src/components/Business/BsLayouts/Components/AllFunc/drawContent.tsx

@@ -0,0 +1,112 @@
+// @ts-nocheck
+import { List, Tooltip } from 'antd';
+import React, { useEffect, useState, } from 'react';
+import { Link, formatMessage } from 'umi';
+import './index.less';
+import classNames from 'classnames';
+import right from '../../../../../assets/right.png';
+import ENUM from '@/utils/enumConfig';
+export type SiderTheme = 'light' | 'dark';
+
+const DrawContent = ({onClose, itemPath}: any) => {
+  const routes = JSON.parse(localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]');
+  const btnAuth = JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) || '[]');
+  const [homepageData, sethomepageData]: any = useState([]);
+  const [routesData, setroutesData]: any = useState([]);
+
+  useEffect(() => {
+    const homepageDataList: any[] = []; //不含子集的菜单
+    const routesDataList: any[] = []; //含子集的菜单
+    routes.forEach(item => {
+      if (btnAuth.find((d: any) => d === item.code)) {
+      }
+      if (item.children) {
+        routesDataList.push(item);
+      } else {
+        homepageDataList.push(item);
+      }
+    })
+    sethomepageData(homepageDataList)
+    setroutesData(routesDataList)
+  }, []);
+
+  const renderChildItem = (child) => {
+    if (!child.hideInMenu && child.children) {
+      return (
+        <>
+          <List.Item style={{color: '#000', fontWeight: 'bold' }}>
+            {formatMessage({ id: `${child.locale}` })}
+          </List.Item>
+          {child.children.map((menuItem: any) => {
+            return renderChildItem(menuItem)
+          })}
+        </>
+      );
+    } else if (!child.hideInMenu && child.path) {
+      return (
+        <List.Item style={{ fontSize: '12px' }} className="allFuncOnMouserover">
+          <Link to={child.path} onClick={onClose}>
+            <Tooltip
+              title={formatMessage({ id: `${child.locale}` })}
+            >
+              {formatMessage({ id: `${child.locale}` }).length > 10
+                ? `${formatMessage({
+                  id: `${child.name}`,
+                }).slice(0, 10)}...`
+                : formatMessage({ id: `${child.locale}` })}
+            </Tooltip>
+            <img className="allFuncOnMouseroverImg" src={right}></img>
+          </Link>
+        </List.Item>
+      );
+    }
+  }
+
+
+  return (
+    <div className='allfunc_drawcontent'>
+    <p className={'drawerWarp_p'}>您的当前权限可以使用以下功能：</p>
+    <div className={'drawerWarp'}>
+      {homepageData && homepageData.filter((d) => !d.hideInMenu).length > 0 && (
+        <List
+          className={classNames('allFunsList', 'allFunsListWarp')}
+          dataSource={homepageData}
+          renderItem={(child: any) => {
+            if (!child.hideInMenu && child.path) {
+              return (
+                <div className={classNames('allFunsListWarp')}>
+                  <List.Item
+                    className={classNames('allFuncOnMouserover')}
+                    style={{ padding: '12px 24px' }}
+                  >
+                    <Link to={child.path} onClick={onClose}>
+                      {formatMessage({ id: `${child.name}` })}
+                      <img className="allFuncOnMouseroverImg" src={right}></img>
+                    </Link>
+                  </List.Item>
+                </div>
+              );
+            }
+          }}
+        />
+      )}
+      {routesData.map((item, index) => {
+        return (
+          <List
+            className={classNames('allFunsList', 'allFunsListWarp')}
+            style={{color: '#005CFF'}}
+            header={<b>{formatMessage({ id: `${item.name}` })}</b>}
+            bordered
+            dataSource={item.children}
+            renderItem={(child: any) => {
+              return renderChildItem(child)
+            }}
+          />
+        );
+      })}
+    </div>
+  </div>
+  )
+}
+
+export default DrawContent;

package/src/components/Business/BsLayouts/Components/AllFunc/index.less

@@ -0,0 +1,153 @@
+
+
+.menu {
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.right {
+  display: flex;
+  float: right;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+  .action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    > span {
+      vertical-align: middle;
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+    .opened {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: #1890ff;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+}
+
+.warp_allfunc {
+  z-index: 100;
+  
+  
+  .drawerWarp {
+    column-count: 4;
+  }
+  
+  .drawer_header_warp {
+    .ant-list-header {
+      padding: 0 0 0 10px !important;
+      line-height: 40px;
+      border: 0px !important;
+      b {
+        width: 100%;
+        display: inline-block;
+        border-bottom: 1px solid #f0f0f0;
+      }
+    }
+    .ant-list-item {
+      padding: 0 0 0 10px !important;
+      line-height: 30px !important;
+    }
+  
+    .ant-drawer-close {
+      position: absolute;
+      right: 0;
+    }
+  }
+  
+  
+  
+  .p {
+    color: #b1bad4;
+    font-weight: 400;
+    font-size: 12px;
+    margin-bottom: 10px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    line-height: 16px;
+    text-align: left;
+    opacity: 0.8;
+    user-select: none;
+    text-align: center;
+    margin-left: 8px;
+  }
+  
+  .btn {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    color: #b1bad4;
+    background: #10234c;
+    border-radius: 8px;
+    width: 130px;
+    user-select: none;
+  }
+  .btn:hover,
+  .btnSpan1:hover,
+  .btnSpan2:hover {
+    cursor: pointer;
+    color: #b1bad4;
+  }
+
+  .btnSpan1 {
+    margin: 0 7px;
+  }
+}
+
+.allfunc_drawcontent {
+  .allFunsList {
+    margin-bottom: 10px;
+  }
+  
+  .allFunsListWarp {
+    width: 200px;
+    margin-right: 10px;
+    border-radius: 4px;
+  
+    break-inside: avoid;
+  }
+  
+  .drawerWarp_p {
+    color: #8c8c8c;
+    font-weight: 400;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    line-height: 20px;
+    text-align: left;
+  }
+}
+
+

package/src/components/Business/BsLayouts/Components/AllFunc/index.tsx

@@ -0,0 +1,70 @@
+
+// @ts-nocheck
+import { Drawer } from 'antd';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import './index.less';
+import allfunc from '../../../../../assets/allfunc.svg';
+import DrawContent from './drawContent';
+export type SiderTheme = 'light' | 'dark';
+
+const AllFunc: any = forwardRef(({ isCollapse, handleClose, itemPath }: any, ref) => {
+  const [isDrawer, setIsDrawer]: any = useState(false);
+  useImperativeHandle(ref, () => ({
+    close: () => {
+      setIsDrawer(false)
+    }
+  }));
+
+  useEffect(() => {
+    if (isCollapse) {
+      setIsDrawer(false);
+    }
+  }, [isCollapse]);
+  const showDrawer = (e) => {
+    if (isCollapse) {
+      return;
+    }
+    handleClose()
+    e.stopPropagation();
+    setIsDrawer(!isDrawer);
+  };
+  const onClose = () => {
+    setIsDrawer(!isDrawer);
+  };
+
+
+  return (
+    <div
+      className={'warp_allfunc'}
+      onClick={(e: any) => {
+        e.stopPropagation();
+      }}
+      style={{ opacity: isCollapse ? '0' : '1' }}
+    >
+      <p className={'p'}>没有找到想要的功能？</p>
+
+      <p className={'btn'} onClick={showDrawer}>
+        <span className={'btnSpan1'}>
+          <img style={{marginTop: '-2px'}} width={18} src={allfunc} />
+        </span>
+        <span className={'btnSpan2'}>查看全部功能</span>
+      </p>
+      {!isCollapse && (
+        <Drawer
+          style={{ left: isDrawer ? 140 : 0, top:50 }}
+          destroyOnClose
+          title={<span style={{ fontWeight: 'bold', fontSize: 18 }}>全部功能</span>}
+          zIndex={19}
+          width={850}
+          className={'drawer_header_warp'}
+          placement="left"
+          onClose={onClose}
+          visible={isDrawer}
+        >
+         <DrawContent itemPath={itemPath} onClose={onClose} />
+        </Drawer>
+      )}
+    </div>
+  );
+});
+export default AllFunc;

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.less

@@ -0,0 +1,90 @@
+.setting_content>div {
+  width: 50%;
+  box-sizing: border-box;
+  // float: left;
+  margin: 0 10px;
+}
+
+.setting_content {
+  display: flex;
+}
+
+
+.tree_title {
+  height: 50px;
+}
+
+.tree_content {
+  height: 400px;
+  overflow: auto;
+  border: 1px solid #d9d9d9;
+  padding: 5px;
+}
+
+.setting_content::after {
+  clear: both;
+  display: block;
+  content: '';
+}
+
+.choosed_label_color {
+  color: #f50;
+}
+
+.left_tree_content {
+  .ant-tree .ant-tree-node-content-wrapper {
+    flex-grow: 1;
+    .ant-tree-title {
+      width: 100%;
+    }
+  }
+  .ant-tree .ant-tree-treenode {
+    width: 100%;
+  }
+}
+
+.right_tree_content, .left_tree_content {
+  .ant-tree .ant-tree-node-content-wrapper {
+    display: flex;
+    margin-left: -3px;
+  }
+  .ant-tree-checkbox {
+      top: auto;
+      top: initial;
+      // margin: 4px 3px 0 0 !important;
+  }
+}
+
+.node_title_content:hover {
+  .right_arrow {
+    display: block !important;
+  }
+}
+
+.right_arrow {
+  float: right;
+  display: none;
+  color: #999999;
+  margin-right: 10px;
+}
+
+
+
+.right_tree_content {
+  .ant-tree-title {
+    width: 100%;
+    display: inline-block;
+    padding-right: 10px;
+  }
+  .ant-dropdown-trigger {
+    color: gray !important;
+  }
+  .tree_node_title {
+    font-size: 20px;
+    color: #d9d9d9;
+    float: right;
+    span {
+      margin-right: 5px;
+    }
+  }
+}