@bit-sun/business-component 2.2.1 → 2.2.2

package/src/components/Functional/BillEntry/index.tsx

@@ -5,9 +5,14 @@ import { SearchOutlined, CopyOutlined, CloseCircleOutlined } from '@ant-design/i
 import { stringify } from 'querystring';
 import './index.less';
 import axios from 'axios';
+import { Resizable } from 'react-resizable';
 import { checkQuantityAccuracy, precisionQuantity } from '@/utils/checkUtils';
 import { tableColumnsImage } from '@/components/Business/BsSulaQueryTable/utils';
 import { getSkuImg } from '@/utils/TableUtils';
+import TableColumnSetting from '@/plugin/TableColumnSetting';
+import { setInitialShowColumn } from '@/plugin/TableColumnSetting/utils';
+import { getItemDefaultWidth, noEmptyArray } from '@/components/Business/columnSettingTable/utils';
+import { handleAntdColumnsSpecialParams } from '@/utils/utils';
 
 const InputElement = ({
   record, text, currentIndex, inputLength, index, setData, data, item, callSelectItem
@@ -440,7 +445,25 @@ const InputElement = ({
   )
 }
 
-const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/check", isBrandAuth=true, isCheckStockNum=true }) => {
+const ResizeableTitle = (props) => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/check", isBrandAuth=true, isCheckStockNum=true, tableCode='skuBillEntry-tableSelectedItemPartCode' }) => {
   const columns = [
     {
       title: 'SKU编码',
@@ -526,8 +549,52 @@ const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/c
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [data, setData] = useState([{ hovered: false }]);
   const tableRef = useRef(null)
+  const codeSelected = tableCode;
 
   const [loading, setLoading] = useState(false);
+  const [selectColumns, setSelectColumns] = useState([]);
+  const [showColumns, setShowColumns] = useState([]);
+
+  useEffect(() => {
+    setSelectColumns([...columns.map(item => {
+      const inputLength = columns.filter(item => item.isInputItem || item.isSelectItem).length
+      const currentIndex = inputIndex
+      if (item.isInputItem) {
+        inputIndex++;
+        return {
+          ...item,
+          render: (text, record, index) => {
+            return (
+              <InputElement setData={setData} callSelectItem={callSelectItem.bind(this, index)} item={item} isPrimaryInput={item.isPrimaryInput} record={record} text={text} data={data} index={index} inputLength={inputLength} currentIndex={currentIndex} />
+            );
+          },
+        }
+      } else if (item.isSelectItem) {
+        inputIndex++;
+      }
+
+      return item
+    }), {
+      title: '操作',
+      width: 50,
+      render: (text, record, index) => {
+        if (index !== 0) {
+          return (
+            <span style={{ cursor: 'pointer', color: '#005CFF' }} onClick={() => {
+              deleteRecord(record)
+            }}>删除</span>
+          )
+        }
+      }
+    }])
+  },[data])
+
+  useEffect(() => {
+    setInitialShowColumn(codeSelected,selectColumns,(res) => {
+      console.log(res,'---res')
+      setShowColumnsCallback(res)
+    })
+  },[selectColumns])
 
   const callSelectItem = (index, item) => {
     if (item) {
@@ -549,37 +616,6 @@ const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/c
   }
 
   let inputIndex = 0;
-  let selectColumns = [...columns.map(item => {
-    const inputLength = columns.filter(item => item.isInputItem || item.isSelectItem).length
-    const currentIndex = inputIndex
-    if (item.isInputItem) {
-      inputIndex++;
-      return {
-        ...item,
-        render: (text, record, index) => {
-          return (
-            <InputElement setData={setData} callSelectItem={callSelectItem.bind(this, index)} item={item} isPrimaryInput={item.isPrimaryInput} record={record} text={text} data={data} index={index} inputLength={inputLength} currentIndex={currentIndex} />
-          );
-        },
-      }
-    } else if (item.isSelectItem) {
-      inputIndex++;
-    }
-
-    return item
-  }), {
-    title: '操作',
-    width: 50,
-    render: (text, record, index) => {
-      if (index !== 0) {
-        return (
-          <span style={{ cursor: 'pointer', color: '#005CFF' }} onClick={() => {
-            deleteRecord(record)
-          }}>删除</span>
-        )
-      }
-    }
-  }]
 
   const isSkuCanEntry = (resultData) => {
     // 处理业务参数
@@ -642,11 +678,66 @@ const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/c
     })
   }
 
+  const setShowColumnsCallback = (newColumns: Array<any>) => {
+    setShowColumns([...newColumns])
+  }
+
+  const handleResize = (arr,index: any, callback) => (_: any, { size }: any) => {
+    let newColumns = arr.map((col: any) => ({ ...col }));
+    const handleIndex = (arr: any, indexArr: any) => {
+      let i = indexArr.shift();
+      if (indexArr.length > 0) {
+        handleIndex(arr[i].children, indexArr);
+      } else {
+        arr[i] = {
+          ...arr[i],
+          width: size.width,
+        };
+        handleAntdColumnsSpecialParams(arr[i]);
+      }
+    };
+    handleIndex(newColumns, [...index]);
+    callback(newColumns)
+  };
+
+  const handleColumns = (arr: any, indexArr: any[], callback: any) => {
+    arr.forEach((item: any, index: any) => {
+      let indexArrInside = [...indexArr, index].filter((i: any) => i || i === 0)
+      if (noEmptyArray(item.children)) {
+        handleColumns(item.children, indexArrInside);
+      } else {
+        item.width = item.width || getItemDefaultWidth(item);
+        item.onHeaderCell = (column: any) => ({
+          ...item,
+          width:
+            typeof column.width === 'number'
+              ? column.width
+              : parseInt(column.width.replace('px', '')),
+          onResize: handleResize(arr,indexArrInside, callback),
+        });
+      }
+    })
+  };
+  let showSelectedCol = showColumns.map((item: any) => {
+    handleAntdColumnsSpecialParams(item);
+    return ({ ...item })
+  })
+  handleColumns(showSelectedCol, [],(res)=> setShowColumnsCallback(res));
+
   return (
       <div className='add_select'>
         <div className='add_select_quick_header'>
           <div className='add_select_quick_header_title'><div>快速录入</div><Button type="primary" onClick={() => handleSubmit()} loading={loading}>提交</Button></div>
           <span><span>*</span> &nbsp;快捷键：【Tab】-跳格切换；【Shift+←、→】-当前行左、右移动；【  ↑、↓】-当前列上、下移动；【ctrl+Delete】-删除当前行；</span>
+          <span style={{ marginRight: 8, float: 'right' }}>
+            <TableColumnSetting
+              setShowColumns={setShowColumnsCallback}
+              showColumns={showColumns}
+              datasource={selectColumns || []}
+              tableCode={codeSelected}
+              settingImgAttribute={{ width: 24, style: { marginTop: 2 } }}
+            />
+          </span>
         </div>
         <div className={'add_select_wrapper_select add_select_wrapper_select_quick'}>
           <Table
@@ -654,12 +745,17 @@ const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/c
             scroll={{ y: 240 }}
             ref={tableRef}
             dataSource={data}
-            columns={selectColumns}
+            columns={showSelectedCol}
             pagination={false}
             rowClassName={'row-class'}
             rowClassName={(record: object | null | undefined, index: number) =>
               index % 2 === 0 ? 'table_base row-class' : 'table_odd row-class'
             }
+            components={{
+              header: {
+                cell: ResizeableTitle,
+              },
+            }}
           />
         </div>
 

package/src/index.ts

@@ -31,4 +31,4 @@ export { default as BsSulaQueryTable } from './components/Business/BsSulaQueryTa
 export { default as BsLayout } from './components/Business/BsLayouts';
 export { default as MoreTreeTable } from './components/Business/moreTreeTable';;
 export { default as JsonQueryTable } from './components/Business/JsonQueryTable';
-
+export { default as TableColumnSetting} from './plugin/TableColumnSetting';

package/src/plugin/TableColumnSetting/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/plugin/TableColumnSetting/index.md

@@ -0,0 +1,50 @@
+---
+title: 表头设置
+order: 1
+nav:
+title: 插件
+order: 1
+group:
+path: /plugin/TableColumnSetting
+order: 0
+title: 功能组件
+---
+
+## TableColumnSetting
+
+表头设置demo
+
+```tsx
+import React, { useState, useRef } from 'react';
+import { TableColumnSetting }  from '../../index';
+
+
+
+export default () => {
+	const tableRef = useRef()
+  
+  const [showColumns, setShowColumns] = useState([])
+  
+  const selectColumns = [];
+	const tableCode = 'test-TableCode'
+	
+	const setShowColumnsCallback = (value: any) => {
+    setShowColumns(value)
+  }
+
+  return (
+    <div>
+      <TableColumnSetting
+        setShowColumns={setShowColumnsCallback}
+        showColumns={showColumns}
+        datasource={selectColumns || []}
+        tableCode={tableCode}
+      />
+    </div>
+  );
+};
+```
+
+<API></API>
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle