@bit-sun/business-component 2.2.1 → 2.2.2

package/dist/plugin/TableColumnSetting/index.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import './index.less';
+interface TableColumnSettingProps {
+    /** tableCode必填，做用户存储关键key，*/
+    tableCode: string;
+    /** datasource必填，为要操作的表头（即原始表头），*/
+    datasource: any;
+    /** showColumns必填，为当前用户设置的表头，*/
+    showColumns: any;
+    /** setShowColumns必填，设置当前表头的方法，*/
+    setShowColumns: void;
+    /** settingImgAttribute非必填，设置当前设置img样式，*/
+    settingImgAttribute: {
+        [propName: string]: any;
+    };
+    [propName: string]: any;
+}
+declare class TableColumnSetting extends React.Component<TableColumnSettingProps> {
+    state: {
+        dataSource: never[];
+        columns: never[];
+        selectedRowKeys: never[];
+        sortDataSource: never[];
+        setVisible: boolean;
+        searchDataSource: boolean;
+        onSearchSort: boolean;
+    };
+    patchUserColumnConfig: (config: any) => void;
+    setInitValue: (datasource: any[]) => void;
+    componentWillReceiveProps(nextProps: any): void;
+    componentDidMount(): void;
+    columns: ({
+        title: string;
+        dataIndex: string;
+        className: string;
+        width: number;
+        render?: undefined;
+    } | {
+        title: string;
+        dataIndex: string;
+        render: (text: any, record: any) => JSX.Element;
+        className?: undefined;
+        width?: undefined;
+    } | {
+        title: string;
+        dataIndex: string;
+        className: string;
+        render: () => JSX.Element;
+        width?: undefined;
+    })[];
+    showModal: () => void;
+    handleOk: (e?: React.MouseEvent<HTMLElement>) => void;
+    handleCancel: (e: React.MouseEvent<HTMLElement>) => void;
+    handleTableHeadHidden: (title: string) => void;
+    onSortEnd: ({ oldIndex, newIndex }: any) => void;
+    DraggableContainer: (props: any) => JSX.Element;
+    DraggableBodyRow: ({ className, style, ...restProps }: any) => JSX.Element;
+    onChange: (e: any, title: any) => void;
+    handleReset: () => void;
+    onSearch: (e: any) => void;
+    onSearchSort: (e: any) => void;
+    render(): JSX.Element;
+}
+export default TableColumnSetting;

package/dist/plugin/TableColumnSetting/utils.d.ts

@@ -0,0 +1 @@
+export declare const setInitialShowColumn: (tableCode: string, columns: any[], callback: any) => void;

package/dist/utils/LocalstorageUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const setConfigTableColumns: (configvalue: any, tableCode: string) => void;
+export declare const getConfigTableColumns: (tableCode: string) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

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

@@ -23,6 +23,27 @@ export default () => {
   const config = {
     buttonText: 'context',
     buttonProps: { disabled: false },
+    // exceptColumns: ['count'],
+    // tableCodeList: [null,'skuSelect-tableSelectedItemPartCodeNoCount'],
+    // additionColumns: [
+    //   {
+    //     position: 2,
+    //     column: {
+    //       title: '品牌',
+    //       width: 100,
+    //       dataIndex: 'brandName',
+    //     },
+    //   },
+    //   {
+    //     position: 6,
+    //     column: {
+    //       title: '国际条码',
+    //       width: 100,
+    //       isInputItem: true,
+    //       dataIndex: 'barCode',
+    //     },
+    //   },
+    // ],
     beforeShowModal: () => {
       return Promise.resolve(true);
       // return Promise.reject('校验有误');

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

@@ -22,7 +22,9 @@ function handleSelectColumn(c: any, parentProps: any) {
   }
   // 追加
   if(additionColumns?.length) {
-    //TODO
+    additionColumns.forEach((i: any) => {
+      result.splice(i.position,0,i.column)
+    })
   }
   // 覆盖内容
   if(coverColumns?.length) {
@@ -123,6 +125,7 @@ export const AddSkuSelect = (parProps: any) => {
   const props = {
     buttonText: parProps.buttonText || '新增',
     buttonProps: parProps.buttonProps || {},
+    tableCodeList: parProps.tableCodeList || [],
     value,
     // labelInValue: true, // 非必填 默认为false
     requestConfig: {

package/src/components/Functional/AddSelect/index.md

@@ -45,7 +45,8 @@ export default () => {
       console.log('save call', rows);
       // return Promise.resolve(true);
       // return Promise.reject('FAILE')
-    }
+    },
+    tableCode: 'test1111'
   };
   const DictionaryUC000013 = [{ text: '共享', value: '10' }, { text: '私有', value: '20' }]
   const modalTableProps = {

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

@@ -10,6 +10,10 @@ import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
 import { Resizable } from 'react-resizable';
 import { checkQuantityAccuracy, precisionQuantity } from '@/utils/checkUtils';
+import TableColumnSetting from '@/plugin/TableColumnSetting';
+import { setInitialShowColumn } from '@/plugin/TableColumnSetting/utils';
+import { handleAntdColumnsSpecialParams } from '@/utils/utils';
+import { getItemDefaultWidth, noEmptyArray } from '@/components/Business/columnSettingTable/utils';
 
 const loadSelectSource = (url: string, params?: any) => {
   return new Promise((resolve, reject) => {
@@ -94,7 +98,8 @@ const AddSelect = (props: any) => {
     onSaveCallback,
     buttonText = '添加',
     buttonProps = {},
-    beforeShowModal
+    beforeShowModal,
+    tableCodeList = [], // 非必填 默认取组件定义code,如需自定义----数组第一位为供选择商品的table的code,第二位为已选择商品的table的code
   } = props;
   const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField = 'name', mappingTextShowKeyField, mappingValueField = 'code', mappingTextShowTextField } = requestConfig || {};
   const resultSourceKey = sourceName || requestConfig?.sourceName || 'supplierCode'
@@ -155,28 +160,166 @@ const AddSelect = (props: any) => {
   const [checkedAll, setCheckedAll] = useState(false)
   const [indeterminate, setIndeterminate] = useState(false)
   const [tableFormParams, setTableFormParams] = useState({});
-  const [tableColumns, setTableColumns] = useState([]);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [confirmContinueLoading, setConfirmContinueLoading] = useState(false);
 
+  const [selectColumns, setSelectColumns] = useState([]);
+  const [showColumns, setShowColumns] = useState([]);
+  const [tableColumns, setTableColumns] = useState([]);
+  const [showToChooseColumns, setShowToChooseColumns] = useState([]);
+  const codeToChoose = tableCodeList[0] || 'skuSelect-tableOptionsToChoosePartCode';
+  const codeSelected = tableCodeList[1] || 'skuSelect-tableSelectedItemPartCode';
+
+  useEffect(() => {
+    setTableColumns(modalTableProps?.tableColumns)
+  }, [modalTableProps?.tableColumns])
+
   useEffect(() => {
-    setTableColumns(
-      modalTableProps?.tableColumns.map((item, index) => {
+    setSelectColumns([... modalTableProps.selectColumn.map(item => {
+      const inputLength = modalTableProps.selectColumn.filter(item => item.isInputItem).length
+      const currentIndex = inputIndex
+
+      if (item.isInputItem) {
+        inputIndex++;
         return {
           ...item,
-          width: item.width || 200,
-          onHeaderCell: (column) => ({
-            ...item,
-            width:
-              typeof column.width === 'number'
-                ? column.width
-                : parseInt(column.width.replace('px', '')),
-            onResize: handleResize(index),
-          })
+          render: (text, record, index) => {
+            // let
+            if(record.needFocus === true && currentIndex === 0) {
+
+            }
+            let precisionObj={};
+            const unitAccuracy = record.packingUnitList?.[0]?.unitAccuracy
+            const isCountUnitAccuracyCheck = item.dataIndex =='count' && unitAccuracy !== undefined
+            if(isCountUnitAccuracyCheck) {
+              precisionObj = {
+                onBlur: (e: any) => {
+                  const { target: { value } } = e;
+                  if(!checkQuantityAccuracy(value,Number(unitAccuracy))) {
+                    record[item.dataIndex] = precisionQuantity(value,Number(unitAccuracy))
+                    const newPopValue = popvalue.map((i: any, innerIndex: number) => {
+                      if(innerIndex == index) {
+                        i[item.dataIndex] =  record[item.dataIndex]
+                      }
+                      return i
+                    })
+                    setPopValue(newPopValue)
+                  }
+                }
+                // precision: unitAccuracy
+              }
+            }
+            return (
+              <InputNumber
+                value={text || ''}
+                min={0}
+                autoFocus={record.needFocus}
+                keyboard={false}
+                {...precisionObj}
+                onChange={(value) => {
+                  record[item.dataIndex] = value
+                  const newPopValue = popvalue.map((i: any, innerIndex: number) => {
+                    if(innerIndex == index) {
+                      i[item.dataIndex] =  record[item.dataIndex]
+                    }
+                    return i
+                  })
+                  setPopValue(newPopValue)
+                }}
+                // onFocus={(e)=> {
+                //   let dom1 = e.currentTarget;
+                //   dom1.setSelectionRange(100, 0);
+                //   dom1.select(text);
+                // }}
+                onKeyDown={(e) => {
+                  if(e.keyCode === 13 && e.ctrlKey) {
+                    handleOk(true)
+                    document.getElementById("first-query")?.focus()
+                  }
+                  if(e.keyCode === 8 && e.ctrlKey) {
+                    message.success('删除当前行')
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                    deleteRecord(record, popvalue);
+                  }
+                  if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex - 1]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                  }
+                  if (e.keyCode === 39 && e.shiftKey) {  //  右滑
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex + 1]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                  }
+                  if (e.keyCode === 40) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                  } else if (e.keyCode === 38) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom1 = e.nativeEvent.path[5].children[index]?.getElementsByTagName('input')[currentIndex]
+                    if (dom1) {
+                      // dom1.value=""
+                      // dom1.setSelectionRange(100, 0);
+                      dom1.select();
+                      dom1.focus();
+                      dom1.scrollIntoViewIfNeeded(false)
+                      // dom1.value=record['count']
+                    }
+                    dom1 = null
+                  } else if (e.keyCode === 9 && index === selectedRowKeys.length - 1 && currentIndex === inputLength - 1) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                  }
+                }}
+              />
+            );
+          },
         }
-      })
-    )
-  }, [modalTableProps?.tableColumns])
+      }
+
+      return item
+    }), {
+      title: '操作',
+      width: 50,
+      dataIndex: 'operation',
+      fixed: 'right',
+      render: (text, record, index) => {
+        return (
+          <span style={{cursor: 'pointer', color: '#005CFF' }} onClick={() => {
+            deleteRecord(record)
+          }} type={"text"}>删除</span>
+        )
+      }
+    },])
+  }, [modalTableProps?.selectColumn,popvalue])
 
   // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
   const getData = (params = {}, type = 1) => {
@@ -706,162 +849,71 @@ const AddSelect = (props: any) => {
   }
 
   let inputIndex = 0;
-  let selectColumns = [... modalTableProps.selectColumn.map(item => {
-    const inputLength = modalTableProps.selectColumn.filter(item => item.isInputItem).length
-    const currentIndex = inputIndex
-
-    if (item.isInputItem) {
-      inputIndex++;
-      return {
-        ...item,
-        render: (text, record, index) => {
-          // let
-          if(record.needFocus === true && currentIndex === 0) {
 
-          }
-          let precisionObj={};
-          const unitAccuracy = record.packingUnitList?.[0]?.unitAccuracy
-          const isCountUnitAccuracyCheck = item.dataIndex =='count' && unitAccuracy !== undefined
-          if(isCountUnitAccuracyCheck) {
-            precisionObj = {
-              onBlur: (e: any) => {
-                const { target: { value } } = e;
-                if(!checkQuantityAccuracy(value,Number(unitAccuracy))) {
-                  record[item.dataIndex] = precisionQuantity(value,Number(unitAccuracy))
-                  const newPopValue = popvalue.map((i: any, innerIndex: number) => {
-                    if(innerIndex == index) {
-                      i[item.dataIndex] =  record[item.dataIndex]
-                    }
-                    return i
-                  })
-                  setPopValue(newPopValue)
-                }
-              }
-              // precision: unitAccuracy
-            }
-          }
-          return (
-            <InputNumber
-              value={text || ''}
-              min={0}
-              autoFocus={record.needFocus}
-              keyboard={false}
-              {...precisionObj}
-              onChange={(value) => {
-                record[item.dataIndex] = value
-                const newPopValue = popvalue.map((i: any, innerIndex: number) => {
-                  if(innerIndex == index) {
-                    i[item.dataIndex] =  record[item.dataIndex]
-                  }
-                  return i
-                })
-                setPopValue(newPopValue)
-              }}
-              // onFocus={(e)=> {
-              //   let dom1 = e.currentTarget;
-              //   dom1.setSelectionRange(100, 0);
-              //   dom1.select(text);
-              // }}
-              onKeyDown={(e) => {
-                if(e.keyCode === 13 && e.ctrlKey) {
-                  handleOk(true)
-                  document.getElementById("first-query")?.focus()
-                }
-                if(e.keyCode === 8 && e.ctrlKey) {
-                  message.success('删除当前行')
-                  e.stopPropagation();
-                  e.preventDefault();
-                  let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
-                  if (dom) {
-                    dom.select();
-                    dom.focus();
-                    dom.scrollIntoView(false)
-                  }
-                  dom = null
-                  deleteRecord(record, popvalue);
-                }
-                if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
-                  e.stopPropagation();
-                  e.preventDefault();
-                  let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex - 1]
-                  if (dom) {
-                    dom.select();
-                    dom.focus();
-                    dom.scrollIntoView(false)
-                  }
-                  dom = null
-                }
-                if (e.keyCode === 39 && e.shiftKey) {  //  右滑
-                  e.stopPropagation();
-                  e.preventDefault();
-                  let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex + 1]
-                  if (dom) {
-                    dom.select();
-                    dom.focus();
-                    dom.scrollIntoView(false)
-                  }
-                  dom = null
-                }
-                if (e.keyCode === 40) {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
-                  if (dom) {
-                    dom.select();
-                    dom.focus();
-                    dom.scrollIntoView(false)
-                  }
-                  dom = null
-                } else if (e.keyCode === 38) {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  let dom1 = e.nativeEvent.path[5].children[index]?.getElementsByTagName('input')[currentIndex]
-                  if (dom1) {
-                    // dom1.value=""
-                    // dom1.setSelectionRange(100, 0);
-                    dom1.select();
-                    dom1.focus();
-                    dom1.scrollIntoViewIfNeeded(false)
-                    // dom1.value=record['count']
-                  }
-                  dom1 = null
-                } else if (e.keyCode === 9 && index === selectedRowKeys.length - 1 && currentIndex === inputLength - 1) {
-                  e.stopPropagation();
-                  e.preventDefault();
-                }
-              }}
-            />
-          );
-        },
+  useEffect(() => {
+    setInitialShowColumn(codeSelected,selectColumns,(res) => {
+      setShowColumnsCallback(res)
+    })
+  },[selectColumns])
+  useEffect(() => {
+    setInitialShowColumn(codeToChoose,tableColumns,(res) => {
+      setShowToChooseColumnsCallback(res)
+    })
+  },[tableColumns])
+
+  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)
+  };
 
-    return item
-  }), {
-    title: '操作',
-    width: 50,
-    fixed: 'right',
-    render: (text, record, index) => {
-      return (
-        <span style={{cursor: 'pointer', color: '#005CFF' }} onClick={() => {
-          deleteRecord(record)
-        }} type={"text"}>删除</span>
-      )
-    }
-  },]
-
-  const handleResize =
-    (index) =>
-      (e, { size }) => {
-        setTableColumns((columns: any) => {
-          let newColumns = [...columns];
-          newColumns[index] = {
-            ...newColumns[index],
-            width: size.width,
-          };
-          return [...newColumns];
+  const setShowColumnsCallback = (newColumns: Array<any>) => {
+    setShowColumns([...newColumns])
+  }
+  const setShowToChooseColumnsCallback = (newColumns: Array<any>) => {
+    setShowToChooseColumns([...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 showToChooseCol = showToChooseColumns.map((item: any) => {
+    handleAntdColumnsSpecialParams(item);
+    return ({ ...item })
+  })
+  handleColumns(showToChooseCol, [],(res)=> setShowToChooseColumnsCallback(res));
+  let showSelectedCol = showColumns.map((item: any) => {
+    handleAntdColumnsSpecialParams(item);
+    return ({ ...item })
+  })
+  handleColumns(showSelectedCol, [],(res)=> setShowColumnsCallback(res));
 
   return (
     <div className={'add_select'}>
@@ -884,7 +936,7 @@ const AddSelect = (props: any) => {
               取消
             </Button>,
             <Button
-              key="submit"
+              key="save-and-continue"
               style={{color: '#005CFF', borderColor: '#005CFF'}}
               onClick={() => {handleOk(true)}}
               loading={confirmContinueLoading}
@@ -927,11 +979,22 @@ const AddSelect = (props: any) => {
                 <div>
                   <div className={'select_list_selectTips'}>
                     <div style={{ marginLeft: 8 }}>搜索结果共&nbsp;<span style={themeColor}>{tablePagination?.total || 0}</span>&nbsp;项{selectMode ? <span>， 本次已选&nbsp;<span style={themeColor}>{selectedRowKeys?.length || 0}</span>&nbsp;项</span> : ''}</div>
+                    <div>
+                      <span style={{ marginRight: 8 }}>
+                        <TableColumnSetting
+                          setShowColumns={setShowToChooseColumnsCallback}
+                          showColumns={showToChooseColumns}
+                          datasource={tableColumns || []}
+                          tableCode={codeToChoose}
+                          settingImgAttribute={{ width: 20, style: { marginTop: -2 } }}
+                        />
+                      </span>
+                    </div>
                   </div>
                   <Table
                     size='small'
                     rowSelection={rowSelection}
-                    columns={tableColumns}
+                    columns={showToChooseCol}
                     dataSource={tableData}
                     pagination={tablePagination}
                     loading={fetching}
@@ -965,12 +1028,22 @@ const AddSelect = (props: any) => {
             <div className={'add_select_wrapper_select'}>
               <div className={'select_list_selectTips'}>
                 <div style={{ marginLeft: 8 }}><span>本次已选&nbsp;<span style={themeColor}>{selectedRowKeys?.length || 0}</span>&nbsp;项</span></div>
-                <div style={{ marginRight: 8 }}><span onClick={deleteSelectRows} style={{ ...themeColor, cursor: 'pointer' }}>清空所选商品</span></div>
+                <div style={{ display: 'flex' }}>
+                  <span style={{ marginRight: 8 }}>
+                    <TableColumnSetting
+                      setShowColumns={setShowColumnsCallback}
+                      showColumns={showColumns}
+                      datasource={selectColumns || []}
+                      tableCode={codeSelected}
+                      settingImgAttribute={{ width: 20, style: { marginTop: -2 } }}
+                    />
+                  </span>
+                  <div style={{ marginRight: 8 }}><span onClick={deleteSelectRows} style={{ ...themeColor, cursor: 'pointer' }}>清空所选商品</span></div>
+                </div>
               </div>
               <Table
                 size='small'
-                // rowSelection={rowSelection}
-                columns={selectColumns}
+                columns={showSelectedCol}
                 dataSource={popvalue}
                 pagination={false}
                 // onChange={handleTableChange}
@@ -982,6 +1055,11 @@ const AddSelect = (props: any) => {
                     onDoubleClick: event => onDoubleClickSelect(event, record),
                   };
                 }}
+                components={{
+                  header: {
+                    cell: ResizeableTitle,
+                  },
+                }}
               />
             </div>
           </div>