@bit-sun/business-component 2.0.26 → 2.0.28

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

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import { Table, Tooltip, Typography } from 'antd';
+import { Resizable } from 'react-resizable';
+import ColumnSetting from './columnSetting';
+import { getItemDefaultWidth, handleTextOverflow } from './utils';
+import { noEmptyArray } from './utils';
+const { Text } = Typography;
+export default class ColumnSettingTable extends React.Component {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      showColumns: [],
+    }
+  }
+
+  componentDidMount() {
+    const { columns }: any = this.props;
+    this.setInitialShowColumn(columns || [])
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // if (JSON.stringify(this.props.columns) !== JSON.stringify(nextProps.columns)) {
+    // }
+    this.setInitialShowColumn(nextProps.columns || [])
+  }
+
+  setInitialShowColumn = (columns: any[]) => {
+    // 获取当前列表定义数据
+    let columnConfig = this.getConfigFromlocalstorage();
+    let showColumns = columnConfig.length ? columnConfig.map((item: any) => {
+      let inner = columns.filter(innerItem => (
+        innerItem.dataIndex && innerItem.dataIndex === item.dataIndex
+      ) || (innerItem.key && innerItem.key === item.key))[0];
+      return {
+        ...inner,
+        ...item,
+      }
+    }).filter((item: any) => !item.hidden)
+      :
+      (columns || []).filter((item: any) => !item.hidden);
+    this.setState({
+      showColumns,
+    })
+
+  }
+
+  setShowColumns = (newColumns: Array<any>) => {
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  }
+
+  getConfigFromlocalstorage = () => {
+    const { tableCode }: any = this.props;
+    if (!tableCode) return [];
+    let config = localStorage.getItem('columnCondition') || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item:any) => item.code === tableCode,
+    );
+
+    if (configSetting.length) {
+      return JSON.parse(configSetting[0].detail || '[]');
+    }
+    return [];
+  };
+
+  getTableSummaryInfo = () => {
+    const { summary = undefined, rowSelection }: any = this.props;
+    const { showColumns }: any = this.state;
+    let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
+    let summaryInitial = summary().cont;
+    let summaryDom: any = <Table.Summary.Row>
+    {
+     [...summaryRow].map((item: any, index: number) => {
+      return (
+        <Table.Summary.Cell index={index}>
+          <Text type="danger">
+            {
+              summaryInitial.filter((inner:any) => inner.key === item.dataIndex || inner.key === item.key).length ?
+              `${item.title}: ${summaryInitial.filter((inner:any) => inner.key === item.dataIndex || inner.key === item.key)[0].value}` : '' 
+              
+            }
+          </Text>
+        </Table.Summary.Cell>
+      )
+     })
+    }
+  </Table.Summary.Row >;
+  return () => summaryDom
+  };
+
+  handledynamicColumns = (col: any[]) => {
+    let { dynamicColumns, modeType }: any = this.props;
+    col = col.map((item: any) => {
+      let target = dynamicColumns.find((d: any) => item.dataIndex === d.key || item.key === d.key)
+      if (modeType === 'view' && target) {
+        item.render = target?.render;
+      }
+      return { ...item };
+    })
+    return [...col]
+  };
+
+  handleResize = (index: any) => (_: any, { size }: any) => {
+    let newColumns = this.state.showColumns.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,
+        };
+        if (arr[i].textOverflow) {
+          arr[i].render = ({ text }: any) => handleTextOverflow(text, size.width);
+        };
+      }
+    };
+    handleIndex(newColumns, [...index]);
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  };
+
+  ResizeableTitle = (props: any) => {
+    const { onResize, width, ...restProps } = props;
+
+    if (!width) {
+      return <th {...restProps} />;
+    }
+    return (
+      <Resizable
+        width={width}
+        height={0}
+        onResize={onResize}
+        draggableOpts={{ enableUserSelectHack: false }}
+      >
+        <th {...restProps} />
+      </Resizable>
+    );
+  }
+
+  render() {
+    const { columns, tableCode, summary = undefined, dynamicColumns = [], ...restProps }: any = this.props;
+    let otherTableInfo = {
+      ...restProps,
+    };
+    let showSummary = null;
+    if (this.state.showColumns.length) {
+      if (summary && summary().diy) {
+        showSummary = this.getTableSummaryInfo();
+      } else {
+        showSummary = summary;
+      }
+    };
+
+    const handleColumns = (arr: any, indexArr: 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: this.handleResize(indexArrInside),
+          });
+        }
+      })
+    };
+    let showCol = this.state.showColumns.map((item: any) => {
+      return ({ ...item })
+    })
+    handleColumns(showCol, []);
+    if (dynamicColumns.length) {
+      showCol = this.handledynamicColumns(showCol);
+    }
+
+    otherTableInfo = {
+      ...otherTableInfo,
+      summary: showSummary,
+    }
+    return (
+      <div>
+        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
+          <span style={{ float: 'right' }} className="ant-dropdown-link">
+            <ColumnSetting
+              setShowColumns={this.setShowColumns}
+              showColumns={this.state.showColumns}
+              datasource={columns || []}
+              tableCode={tableCode}
+            />
+          </span>
+        </div>
+        <Table
+          columns={showCol}
+          components={{
+            header: {
+              cell: this.ResizeableTitle,
+            },
+          }}
+          {
+          ...otherTableInfo
+          }
+        />
+      </div >
+    )
+  }
+
+}

package/src/components/Business/columnSettingTable/sulaSettingTable.tsx

@@ -0,0 +1,225 @@
+import React, { useState } from 'react';
+import { Table as SulaTable, request } from 'bssula';
+import { Resizable } from 'react-resizable';
+import ColumnSetting from './columnSetting';
+import { getItemDefaultWidth, handleTextOverflow } from './utils';
+import { noEmptyArray } from './utils';
+import {
+  Table,
+  Typography,
+} from 'antd';
+const { Text } = Typography;
+export default class ColumnSettingSulaTable extends React.Component {
+  sulaTableRef: React.RefObject<unknown>;
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      showColumns: [],
+    }
+    this.sulaTableRef = React.createRef();
+  }
+
+  componentDidMount() {
+    const { columns }: any = this.props;
+    this.setInitialShowColumn(columns || [])
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // if (JSON.stringify(this.props.columns) !== JSON.stringify(nextProps.columns)) {
+    // }
+    this.setInitialShowColumn(nextProps.columns || [])
+  }
+
+  setInitialShowColumn = (columns: any[]) => {
+    // 获取当前列表定义数据
+    let columnConfig = this.getConfigFromlocalstorage();
+    let showColumns = columnConfig.length ? columnConfig.map((item:any) => {
+      let inner = columns.filter(innerItem => (
+        innerItem.dataIndex && innerItem.dataIndex === item.dataIndex
+      ) || (innerItem.key && innerItem.key === item.key))[0];
+      return {
+        ...inner,
+        ...item,
+      }
+    }).filter((item: any) => !item.hidden)
+      :
+      (columns || []).filter((item: any) => !item.hidden);
+    this.setState({
+      showColumns,
+    })
+
+  }
+
+  setShowColumns = (newColumns: Array<any>) => {
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  }
+
+  getConfigFromlocalstorage = () => {
+    const { tableCode }:any = this.props;
+    if (!tableCode) return [];
+    let config = localStorage.getItem('columnCondition') || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item: any) => item.code === tableCode,
+    );
+
+    if (configSetting.length) {
+      return JSON.parse(configSetting[0].detail || '[]');
+    }
+    return [];
+  };
+
+  getTableSummaryInfo = () => {
+    const { summary = undefined, rowSelection }: any = this.props;
+    const { showColumns }: any = this.state;
+    let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
+    let summaryInitial = summary().cont;
+    let summaryDom: any = <Table.Summary.Row>
+    {
+     [...summaryRow].map((item: any, index: number) => {
+      return (
+        <Table.Summary.Cell index={rowSelection ? index : index-1}>
+          <Text type="danger">
+            {
+              summaryInitial.filter((inner:any) => inner.key === item.dataIndex || inner.key === item.key).length ?
+              `${item.title}: ${summaryInitial.filter((inner:any) => inner.key === item.dataIndex || inner.key === item.key)[0].value}` : '' 
+              
+            }
+          </Text>
+        </Table.Summary.Cell>
+      )
+     })
+    }
+  </Table.Summary.Row >;
+  return () => summaryDom
+  };
+
+  handledynamicColumns = (col: any[]) => {
+    let { dynamicColumns, modeType }: any = this.props;
+    col = col.map((item: any) => {
+      let target = dynamicColumns.find((d: any) => item.dataIndex === d.key || item.key === d.key)
+      if (modeType === 'view' && target) {
+        item.render = target?.render;
+      }
+      return { ...item };
+    })
+    return [...col]
+  };
+
+  handleResize = (index: any) => (_: any, { size }: any) => {
+    let newColumns = this.state.showColumns.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,
+        };
+        if (arr[i].textOverflow) {
+          arr[i].render = ({ text }: any) => handleTextOverflow(text, size.width);
+        };
+      }
+    };
+    handleIndex(newColumns, [...index]);
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  };
+
+  ResizeableTitle = (props: any) => {
+    const { onResize, width, ...restProps } = props;
+
+    if (!width) {
+      return <th {...restProps} />;
+    }
+    return (
+      <Resizable
+        width={width}
+        height={0}
+        onResize={onResize}
+        draggableOpts={{ enableUserSelectHack: false }}
+      >
+        <th {...restProps} />
+      </Resizable>
+    );
+  }
+
+  render() {
+    const { style=null, columns, tableCode, summary = undefined, dynamicColumns = [], ...restProps }: any = this.props;
+    let otherTableInfo = {
+      ...restProps,
+    };
+    let showSummary = null;
+    if (this.state.showColumns.length) {
+      if (summary && summary().diy) {
+        showSummary = this.getTableSummaryInfo();
+      } else {
+        showSummary = summary;
+      }
+    };
+
+    const handleColumns = (arr: any, indexArr: 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: this.handleResize(indexArrInside),
+          });
+        }
+      })
+    };
+    let showCol = this.state.showColumns.map((item: any) => {
+      return ({ ...item })
+    })
+    handleColumns(showCol, []);
+    if (dynamicColumns.length) {
+      showCol = this.handledynamicColumns(showCol);
+    }
+
+    otherTableInfo = {
+      ...otherTableInfo,
+      summary: showSummary,
+    }
+    return (
+      <div>
+        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
+          <span style={{ float: 'right' }} className="ant-dropdown-link">
+            <ColumnSetting
+              setShowColumns={this.setShowColumns}
+              showColumns={this.state.showColumns}
+              datasource={columns || []}
+              tableCode={tableCode}
+            />
+          </span>
+        </div>
+        <SulaTable
+          ref={this.sulaTableRef}
+          style={style}
+          columns={showCol}
+          components={{
+            header: {
+              cell: this.ResizeableTitle,
+            },
+          }}
+          {
+          ...otherTableInfo
+          }
+        />
+      </div >
+    )
+  }
+
+}

package/src/components/Business/columnSettingTable/utils.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Tooltip,
+} from 'antd';
+/**
+ * 非空数组
+ * @param arr 要判断的数据
+ * @returns boolean
+ */
+ export const noEmptyArray = (arr: any[]) =>
+ Array.isArray(arr) && arr.length > 0;
+
+ //设置queryTable默认列宽
+export const getItemDefaultWidth = (item: any) => {
+  let defaultWidth = 200;
+  let lowerCaseKey = (item.key || item.dataIndex).toLowerCase();
+  switch (true) {
+    case item?.title === '操作' || lowerCaseKey === 'operate':
+      defaultWidth = 60;
+      break;
+    case lowerCaseKey.indexOf('number') > -1:
+    case lowerCaseKey.indexOf('quantity') > -1:
+    case lowerCaseKey.indexOf('amount') > -1:
+      defaultWidth = 90;
+      break;
+    case (lowerCaseKey.indexOf('no') > -1):
+      defaultWidth = 200;
+      break;
+    case lowerCaseKey.indexOf('code') > -1:
+      defaultWidth = 170;
+      break;
+    case lowerCaseKey.indexOf('time') > -1:
+      defaultWidth = 130;
+      break;
+    case lowerCaseKey.indexOf('status') > -1:
+      defaultWidth = 100;
+      break;
+    case lowerCaseKey.indexOf('user') > -1:
+      defaultWidth = 130;
+      break;
+    default:
+      break;
+  }
+  return defaultWidth;
+};
+
+// 带有toptile 清提示 ...
+export const handleTextOverflow = (
+  text: string | undefined,
+  width: number = 130,
+) => {
+  return (
+    <Tooltip title={text || '- -'}>
+      <span
+        style={{
+          width: width ? width + 'px' : '130px',
+          display: 'inline-block',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          position: 'relative',
+          top: '5px',
+        }}
+      >
+        {text || '- -'}
+      </span>
+    </Tooltip>
+  );
+};

package/src/components/Functional/ExportFunctions/ExportIcon/index.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, {Ref} from 'react'
 import {message, Popconfirm, Tooltip} from "antd";
 import axios from 'axios'

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

@@ -72,10 +72,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       let searchParams = {};
       if (typeof selectParamsKey === 'string') {
         let selectParamsInitValue = initVal
-        if(labelInValue) {
-          selectParamsInitValue = Array.isArray(initVal)? initVal.map((i: any) => i.value || i.key).join(','): initVal
+        if (labelInValue) {
+          selectParamsInitValue = Array.isArray(initVal) ? initVal.map((i: any) => i.value || i.key).join(',') : initVal
         } else {
-          selectParamsInitValue = Array.isArray(initVal)? initVal.join(','): initVal
+          selectParamsInitValue = Array.isArray(initVal) ? initVal.join(',') : initVal
         }
         searchParams = v ? { [selectParamsInitKey]: selectParamsInitValue } : { [selectParamsKey]: searchValue }
       }
@@ -120,6 +120,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       setItems([]);
       setItemsTotal(0);
     },
+    getTableFormRef: () => form,
   }))
 
   // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
@@ -593,11 +594,19 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const formItem = (list) => {
     if (isModalVisible && list?.length) {
+      const setDisabled = (name: any) => {
+        const { fixedparamsDisabled = false, fixedparameter = [] }: any = requestConfig;
+        if (fixedparamsDisabled && fixedparameter.find((item: any) => item === name)) {
+          return true
+        } else {
+          return false
+        }
+      };
       return list.map((i: any) => {
         if (i?.type === 'select' || i?.field?.type === 'select') {
           return (
             <Form.Item name={i.name} label={i.label} key={i.name}>
-              <Select style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props}>
+              <Select style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}>
                 {i?.initialSource?.length && i?.initialSource.map((m: any) => (
                   <Option value={m.value} key={m.value}>{m.text}</Option>
                 ))}
@@ -609,7 +618,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         if (i?.type === 'treeSelect' || i?.field?.type === 'treeSelect') {
           return (
             <Form.Item name={i.name} label={i.label} key={i.name}>
-              <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props}></TreeSelect>
+              <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}></TreeSelect>
             </Form.Item>
           )
         }
@@ -618,7 +627,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           return (
             <div>
               <Form.Item name={i.name} label={i.label} key={i.name}>
-                <BusinessSearchSelect {...i.field.props} />
+                <BusinessSearchSelect {...i.field.props} disabled={setDisabled(i.name)} />
               </Form.Item>
             </div>
           )
@@ -641,7 +650,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         // 默认type是input
         return (
           <Form.Item name={i.name} label={i.label} key={i.name}>
-            <Input style={{ width: '100%' }} placeholder='请输入' allowClear maxLength={100}  {...i?.field?.props} />
+            <Input style={{ width: '100%' }} placeholder='请输入' allowClear maxLength={100}  {...i?.field?.props} disabled={setDisabled(i.name)} />
           </Form.Item>
         )
       })
@@ -679,57 +688,57 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           showModal()
         }}>{fieldComponent}</div>) :
         (<div className="search_select_show" id={`search_select_div_${uniqueValue}`}>
-        <Select
-          virtual
-          labelInValue={labelInValue}
-          value={value}
-          onChange={onChange}
-          disabled={props.disabled}
-          dropdownRender={menu => (
-            <>
-              <Input
-                value={searchValue}
-                style={{ width: '98%', marginLeft: '1%' }}
-                placeholder="请输入"
-                onChange={e => onSearchChange(e)}
-                onBlur={onSearchBlur}
-                onKeyDown={(e) => {
-                  //  阻止多选的冒泡
-                  e.stopPropagation()
-                }}
-              />
-              <Divider style={{ margin: '8px 0' }} />
-              {menu}
-            </>
-          )}
-          notFoundContent={
-            fetching ? <Spin size="small" /> :
-              <div style={{ textAlign: 'center' }}>
-                <div style={{ marginBottom: 16 }}>
-                  <CopyOutlined style={{ fontSize: '50px' }} />
+          <Select
+            virtual
+            labelInValue={labelInValue}
+            value={value}
+            onChange={onChange}
+            disabled={props.disabled}
+            dropdownRender={menu => (
+              <>
+                <Input
+                  value={searchValue}
+                  style={{ width: '98%', marginLeft: '1%' }}
+                  placeholder="请输入"
+                  onChange={e => onSearchChange(e)}
+                  onBlur={onSearchBlur}
+                  onKeyDown={(e) => {
+                    //  阻止多选的冒泡
+                    e.stopPropagation()
+                  }}
+                />
+                <Divider style={{ margin: '8px 0' }} />
+                {menu}
+              </>
+            )}
+            notFoundContent={
+              fetching ? <Spin size="small" /> :
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ marginBottom: 16 }}>
+                    <CopyOutlined style={{ fontSize: '50px' }} />
+                  </div>
+                  <div>无匹配结果，请更换其他内容再试</div>
                 </div>
-                <div>无匹配结果，请更换其他内容再试</div>
-              </div>
-          }
-          onPopupScroll={SelectScroll}
-          style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
-          placeholder="请选择"
-          maxTagPlaceholder={maxTagPlaceholder}
-          {...currentSelectProps}
-          getPopupContainer={() => (getPopupContainer && getPopupContainer()) || document.getElementById(`search_select_div_${uniqueValue}`)}
-        >
-          {items.map(item => (
-            <Option key={item.value} label={item.text}>
-              {LightHeightOption({ text: `${item.textShowKey}       ${Array.isArray(item.textShowText) && item.textShowText.join('    ') || item.textShowText}`, filterTxt: searchValue })}
-            </Option>
-          ))}
-        </Select>
-        {needModalTable && (
-          <Button style={{ width: '30px', padding: '2px', height: 'auto' }} onClick={showModal} type="primary">
-            <SearchOutlined />
-          </Button>
-        )}
-      </div>)}
+            }
+            onPopupScroll={SelectScroll}
+            style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
+            placeholder="请选择"
+            maxTagPlaceholder={maxTagPlaceholder}
+            {...currentSelectProps}
+            getPopupContainer={() => (getPopupContainer && getPopupContainer()) || document.getElementById(`search_select_div_${uniqueValue}`)}
+          >
+            {items.map(item => (
+              <Option key={item.value} label={item.text}>
+                {LightHeightOption({ text: `${item.textShowKey}       ${Array.isArray(item.textShowText) && item.textShowText.join('    ') || item.textShowText}`, filterTxt: searchValue })}
+              </Option>
+            ))}
+          </Select>
+          {needModalTable && (
+            <Button style={{ width: '30px', padding: '2px', height: 'auto' }} onClick={showModal} type="primary">
+              <SearchOutlined />
+            </Button>
+          )}
+        </div>)}
       {needModalTable && isModalVisible && (
         <Modal
           width='80%'