@bit-sun/business-component 2.0.26 → 2.0.28

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

@@ -0,0 +1,247 @@
+// 列自定义
+.sort_table_wrapper {
+  .sort_table {
+    display: flex;
+
+    .sort_table_column_wrapper {
+      width: 560px;
+      margin-right: 10px;
+    }
+
+    .sort_table_content_wrapper {
+      width: 210px;
+    }
+
+    .sort_table_column_count,
+    .sort_table_content_count {
+      height: 20px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 14px;
+      color: #000000;
+      letter-spacing: 0;
+
+      span {
+        color: #848484;
+      }
+    }
+
+    .sort_table_column {
+      margin-top: 10px;
+      width: 560px;
+      height: 430px;
+      overflow: auto;
+      padding: 10px;
+      background: #ffffff;
+      border: 1px solid #d9d9d9;
+      border-radius: 5px;
+
+      &_all {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        &_empty {
+          width: 538px;
+          line-height: 360px;
+          text-align: center;
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 14px;
+          color: #848484;
+        }
+      }
+
+      &_special {
+        margin-top: 40px;
+        width: 100px;
+        height: 20px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 14px;
+        color: #848484;
+        letter-spacing: 0;
+      }
+
+      .ant-checkbox-wrapper {
+        width: 144px;
+        margin-top: 16px;
+      }
+
+      .ant-checkbox-wrapper+.ant-checkbox-wrapper {
+        margin-left: 0px;
+      }
+    }
+
+    .sort_table_content {
+      margin-top: 10px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      border: 1px solid #d9d9d9;
+      border-radius: 5px;
+
+      .ant-table-wrapper {
+        padding: 0px !important;
+      }
+
+      .sort_table_title {
+        height: 32px;
+        line-height: 32px;
+        padding-left: 10px;
+        color: gray;
+      }
+    }
+  }
+
+  div.ant-modal-header {
+    width: 820px;
+    height: 64px;
+    background: #ffffff;
+    padding: 20px;
+    border: 0px;
+
+    div.ant-modal-title {
+      height: 24px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 18px;
+      color: #000000;
+      letter-spacing: 0;
+      line-height: 24px;
+    }
+  }
+
+  .ant-modal-body {
+    padding: 0 20px !important;
+  }
+
+  .ant-modal-close-x {
+    height: 24px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 18px;
+    color: #000000;
+    letter-spacing: 0;
+  }
+
+  .ant-input-affix-wrapper {
+    padding: 0px;
+    padding-right: 10px;
+  }
+
+  input {
+    height: 32px;
+    padding: 6px 4px;
+    border-radius: 5px;
+  }
+
+  .ant-input-prefix {
+    width: 24px;
+    height: 24px;
+    margin: 4px;
+    // border: 1px dashed #d9d9d9;
+    display: flex;
+    justify-content: center;
+  }
+
+  .ant-modal-footer {
+    height: 70px;
+    border: 0;
+    padding: 20px;
+
+    .ant-btn {
+      width: 80px;
+      height: 34px;
+      border-radius: 5px;
+
+      span {
+        font-family: PingFangSC-Medium;
+        font-weight: 600;
+        font-size: 14px;
+        letter-spacing: 0;
+        text-align: center;
+        line-height: 20px;
+      }
+
+      &:first-child {
+        margin-right: 524px;
+      }
+    }
+  }
+
+  .ant-table-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ant-table-wrapper {
+    margin-top: 10px;
+    height: 364px;
+    overflow: scroll;
+    padding-bottom: 50px;
+
+    tr {
+      height: 36px;
+
+      td {
+        width: 24px !important;
+        height: 36px !important;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 14px;
+        color: #000000;
+        letter-spacing: 0;
+
+        &:first-child {
+          padding-left: 10px !important;
+          padding-right: 0px !important;
+          width: 115px !important;
+        }
+
+        img {
+          // border: 1px dashed #d9d9d9;
+          cursor: pointer;
+        }
+
+        &:not(:first-child) {
+          padding-left: 0px !important;
+          padding-right: 0px !important;
+        }
+
+        &:last-child {
+          padding-left: 0px !important;
+          padding-right: 3px !important;
+          width: 34px !important;
+
+          img {
+            // border: 1px dashed #d9d9d9;
+            position: relative;
+            top: 1px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.global_tab_nav_style {
+  top: 2px !important;
+}
+
+.row-dragging {
+  background: #fafafa;
+  border: 1px solid #ccc;
+  z-index: 10000;
+}
+
+.row-dragging td {
+  padding: 7px 16px;
+  display: none;
+
+}
+.row-dragging td:first-child {
+  display: inline-block;
+}
+
+.row-dragging .drag-visible {
+  visibility: visible;
+}

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

@@ -0,0 +1,358 @@
+---
+nav:
+  title: '组件1'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 列设置表格
+order: 2
+---
+
+# 详情页表格列设置
+
+
+## antd列设置表格
+
+```tsx
+import React, { useState } from 'react';
+import { ColumnSettingTable } from '../../../index.ts';
+
+export default () => {
+  const columns = [
+      {
+        dataIndex: 'lineNo',
+        title: '行号',
+        width: 80,
+        fixed: 'left',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'skuName',
+        title: '商品名称',
+        fixed: 'left',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'spuCode',
+        title: '商品代码',
+        fixed: 'left',
+        ellipsis: {
+          showTitle: true,
+        },
+      },
+      {
+        dataIndex: 'skuCode',
+        title: 'SKU',
+        fixed: 'left',
+        ellipsis: {
+          showTitle: true,
+        },
+      },
+      {
+        dataIndex: 'skuSpec',
+        title: '商品规格',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'barCode',
+        title: '条码',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'executeAmount',
+        title: '可执行数量',
+      },
+      {
+        dataIndex: 'planAmount',
+        title: '数量',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'baseUnitCode',
+        title: '单位',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'completeAmount',
+        title: '累计入库数量',
+      },
+      {
+        dataIndex: 'reverseNumber',
+        title: '累计退货数量',
+      },
+      {
+        dataIndex: 'taxRate',
+        title: '税率',
+      },
+      {
+        dataIndex: 'taxAmount',
+        title: '税额',
+      },
+      {
+        dataIndex: 'standardPrice',
+        title: '标准单价',
+      },
+    ]
+  const config = {
+    scroll: {
+      x: '100%',
+    },
+    rowKey: 'id',
+    dataSource: [{}, {}],
+    pagination: {
+      showTotal: (total: any) => `共 ${total} 条`,
+      showQuickJumper: true,
+      hideOnSinglePage: true,
+      current: 1,
+      pageSize: 10,
+      total: 10,
+      size: 'small'
+    },
+    rowSelection: {
+    },
+    summary: () => {
+      return {
+        diy: true,
+        cont: [
+          {
+            key: 'spuCode',
+            value: 100,
+          },
+          {
+            key: 'skuSpec',
+            value: 200,
+          },
+          {
+            key: 'executeAmount',
+            value: 300,
+          },
+          {
+            key: 'completeAmount',
+            value: 300,
+          },
+          {
+            key: 'taxAmount',
+            value: 300,
+          },
+          {
+            key: 'standardPrice',
+            value: 300,
+          },
+        ],
+      }
+    },
+    dynamicColumns: [
+      {
+        key: 'expectTime',
+      },
+      {
+        key: 'planAmount',
+      },
+      {
+        key: 'price',
+      },
+    ],
+    columns,
+    tableCode: 'uniquecode-1',
+  }
+  return (
+    <ColumnSettingTable
+      {
+        ...config
+      }
+    />
+
+  );
+};
+```
+
+## sula列设置表格
+
+```tsx
+import React, { useState } from 'react';
+import { SulaColumnSettingTable } from '../../../index.ts';
+
+export default () => {
+  const settingTableRef = React.useRef(null);
+  const columns = [
+      {
+        dataIndex: 'lineNo',
+        title: '行号',
+        width: 80,
+        fixed: 'left',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'skuName',
+        title: '商品名称',
+        fixed: 'left',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'spuCode',
+        title: '商品代码',
+        fixed: 'left',
+        ellipsis: {
+          showTitle: true,
+        },
+      },
+      {
+        dataIndex: 'skuCode',
+        title: 'SKU',
+        fixed: 'left',
+        ellipsis: {
+          showTitle: true,
+        },
+      },
+      {
+        dataIndex: 'skuSpec',
+        title: '商品规格',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'barCode',
+        title: '条码',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'executeAmount',
+        title: '可执行数量',
+      },
+      {
+        dataIndex: 'planAmount',
+        title: '数量',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'baseUnitCode',
+        title: '单位',
+        ellipsis: {
+          showTitle: false,
+        },
+      },
+      {
+        dataIndex: 'completeAmount',
+        title: '累计入库数量',
+      },
+      {
+        dataIndex: 'reverseNumber',
+        title: '累计退货数量',
+      },
+      {
+        dataIndex: 'taxRate',
+        title: '税率',
+      },
+      {
+        dataIndex: 'taxAmount',
+        title: '税额',
+      },
+      {
+        dataIndex: 'standardPrice',
+        title: '标准单价',
+      },
+    ]
+  const config = {
+    modeType: 'view',
+    scroll: {
+      x: '100%',
+    },
+    rowKey: 'id',
+    initialDataSource: [{}, {}],
+    // remoteDataSource: {
+    //   url: 'xxxxxx',
+    //   converter: ({ data }: any) => {
+    //     return {
+    //       list: [{},{}],
+    //       total: 2
+    //     };
+    //   },
+    // },
+    pagination: {
+      showTotal: (total: any) => `共 ${total} 条`,
+      showQuickJumper: true,
+      hideOnSinglePage: true,
+      current: 1,
+      pageSize: 10,
+      total: 10,
+      size: 'small'
+    },
+    rowSelection: {
+    },
+    summary: () => {
+      return {
+        diy: true,
+        cont: [
+          {
+            key: 'spuCode',
+            value: 100,
+          },
+          {
+            key: 'skuSpec',
+            value: 200,
+          },
+          {
+            key: 'executeAmount',
+            value: 300,
+          },
+          {
+            key: 'completeAmount',
+            value: 300,
+          },
+          {
+            key: 'taxAmount',
+            value: 300,
+          },
+          {
+            key: 'standardPrice',
+            value: 300,
+          },
+        ],
+      }
+    },
+    dynamicColumns: [
+      {
+        key: 'expectTime',
+      },
+      {
+        key: 'planAmount',
+      },
+      {
+        key: 'price',
+      },
+    ],
+    columns,
+    tableCode: 'uniquecode-1',
+  }
+  return (
+    <SulaColumnSettingTable
+      {
+        ...config
+      }
+      ref={settingTableRef}
+    />
+  );
+};
+```