@bit-sun/business-component 1.1.1 → 1.1.5

package/src/components/SearchSelect/index.tsx

@@ -0,0 +1,493 @@
+// @ts-nocheck
+import React, { useState, useEffect } from 'react';
+import { useDebounceFn } from 'ahooks';
+import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox } from 'antd';
+import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
+import axios from 'axios';
+import { stringify } from 'querystring';
+import _ from "loadsh"
+import './index.less';
+
+const { Option } = Select;
+
+const SearchSelect = (props: any) => {
+  const {
+    value,
+    onChange,
+    selectProps={},
+    modalTableProps={},
+    labelInValue=false,
+    requestConfig,
+    ctx,
+  } = props;
+
+  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
+  const initVal = value || (selectMode ? [] : null);
+  const pageSize = 100 // 下拉框默认分页 条数
+  const tableInitPageSize = 10 // 弹框默认分页 条数
+  const currentPage = 1
+  const selectParamsKey = requestConfig?.filter || 'qp-codeAndName-like'
+  const currentSelectProps = {
+    ...selectProps,
+    // 以下属性不可更改----设计配置项
+    showSearch: false,
+    filterOption: false,
+    allowClear: true,
+    listHeight: 160,
+    optionLabelProp: "label",
+    autoClearSearchValue: false
+  }
+
+  const [items, setItems] = useState([]);
+  const [scrollPage, setScrollPage] = useState(1);
+  const [itemsTotal, setItemsTotal] = useState(0);
+  const [fetching, setFetching] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [popvalue, setPopValue] = useState(initVal);
+  const { run } = useDebounceFn(
+    () => {
+      // 防抖函数  待定
+      getData({ [selectParamsKey]: searchValue })
+    },
+    {
+      wait: 1000,
+    },
+  );
+
+  const [form] = Form.useForm();
+  const [caretLeftFlag, setCaretLeftFlag] = useState(true);
+  const [tableData, setTableData] = useState([]);
+  const [tablePagination, setTablePagination] = useState({ showQuickJumper: true, total: 0, current: 1, pageSize: tableInitPageSize })
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [doubleArr, setDoubleArr] = useState([]); // 存放双数组的数组
+  const [filterRows, setFilterRows] = useState([]); // 存放拼接后的一维数组的变量
+  const [checkedAll, setCheckedAll] = useState(false)
+  const [indeterminate, setIndeterminate] = useState(false)
+
+  // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
+  const getData = (params={}, type=1) => {
+    if (!requestConfig) return;
+    const { url, otherParams, isMap } = requestConfig;
+
+    setFetching(true)
+
+    // 处理dependence参数
+    const fixedParam = {};
+    if (requestConfig.fixedparameter && requestConfig.fieldValToParam && ctx) {
+      requestConfig.fixedparameter.forEach((item: any, index: any) => {
+        const fixedParamVal = ctx.form.getFieldValue(requestConfig.fieldValToParam[index]);
+        if (fixedParamVal) {
+          fixedParam[item] = fixedParamVal;
+        }
+      });
+    }
+
+    const queryParams = {
+      pageSize,
+      currentPage,
+      ...otherParams, // 默认参数
+      ...fixedParam,
+      ...params,
+      sorter: 'desc-createTime'
+    }
+
+    axios
+      .get(`${url}?${stringify(queryParams)}`)
+      .then((result: any) => {
+        setFetching(false)
+        result = result.data;
+        if (result.status !== '0') {
+          message.error(result.msg);
+          return;
+        }
+        const res = result.data;
+        let source = [];
+        if (isMap) {
+          source = Object.keys(res).map((d, i) => {
+            return {
+              text: Object.values(res)[i],
+              value: d,
+            };
+          });
+        } else {
+          const keys = res.list ? 'list' : 'items';
+          source = res
+            ? res[keys]
+              ? res[keys].map((item: any) => {
+                return {
+                  ...item,
+                  text: requestConfig.splicing
+                    ? `${item[requestConfig?.mappingValueField]}-${
+                      item[requestConfig.mappingTextField]
+                    }`
+                    : item[requestConfig?.mappingTextField],
+                  value: item[requestConfig.mappingValueField],
+                };
+              })
+              : Array.isArray(res) &&
+              res?.map((item: Record<string, any>) => {
+                return {
+                  ...item,
+                  text: requestConfig.splicing
+                    ? `${item[requestConfig?.mappingValueField]}-${
+                      item[requestConfig.mappingTextField]
+                    }`
+                    : item[requestConfig?.mappingTextField],
+                  value: item[requestConfig.mappingValueField],
+                };
+              })
+            : [];
+        }
+        source = Array.isArray(source) ? source : []
+        if(type === 1) {
+          ctx?.form?.setFieldSource('supplierCode', source)
+          setItems(source)
+          setItemsTotal(Number(res?.total))
+        } else {
+          setTableData(source)
+          setTablePagination({...tablePagination, total: Number(res?.total), pageSize: Number(res?.size), current: Number(res?.page)})
+        }
+      })
+      .catch((err) => { setFetching(false) });
+  }
+
+  const SelectScroll = e => {
+    e.persist();
+    const { target } = e;
+    const totalPage = Math.ceil(itemsTotal / pageSize)
+    // 判断是否滑动到底部
+    const isTouchGround = target.scrollTop + target.offsetHeight === target.scrollHeight
+    // 判断数据是否还没有加载到了最后一页
+    const canPageAdd = scrollPage < totalPage
+    if (isTouchGround && canPageAdd) {
+      const nextScrollPage = scrollPage + 1;
+      setScrollPage(nextScrollPage);
+      getData({currentPage: nextScrollPage}); // 调用api方法
+    }
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  useEffect(() => {
+    if(value) {
+      setPopValue(value);
+      onChange(value);
+    }
+  }, [value]);
+
+  const showModal = () => {
+    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
+    setIsModalVisible(true);
+    // 回显
+    if(value) {
+      if(selectMode) {
+        setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
+        setSelectedRows(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })))
+        setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
+        setIndeterminate(!!value.length && value.length < itemsTotal);
+        setCheckedAll(value.length === itemsTotal);
+      } else {
+        setSelectedRowKeys(labelInValue ? [value.key] : [value])
+        setSelectedRows(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value.key }])
+        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value.key }]);
+      }
+    }
+  };
+
+  const handleOk = () => {
+    if(popvalue?.length) {
+      formaData(popvalue);
+    }
+    setIsModalVisible(false);
+  };
+
+  const formaData = (value) => {
+    if(labelInValue) {
+      const formatResult = value.map((i: any) => ({ key: i.code, label: i.name, value: i.code }))
+      onChange(selectMode ? formatResult : formatResult[0])
+    } else {
+      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
+      onChange(formatResult)
+    }
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const onSearchChange = (e) => {
+    setSearchValue(e.target.value);
+    run();
+  }
+
+  const onSearchBlur = () => {
+    setSearchValue('')
+    run();
+  }
+
+  const onSearchTable = () => {
+    const params = form.getFieldsValue();
+    getData({ ...params, pageSize: tableInitPageSize }, 2)
+  }
+
+  const onResetTable = () => {
+    form.resetFields();
+    handleTableChange({ pageSize: tableInitPageSize, currentPage: 1 })
+  }
+
+  const handleTableChange = (pagination) => {
+    getData({ pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
+  }
+
+  const onChangeCheckAll = (e) => {
+    if(e.target.checked) {
+      // 如果下拉框有所有数据就处理选中所有，如果没有 就默认查出所有数据
+      if(items.length === itemsTotal) {
+        const currentItemsData = JSON.parse(JSON.stringify(items))
+        setSelectedRowKeys(currentItemsData.map(i => i.value))
+        setSelectedRows(currentItemsData)
+        setPopValue(currentItemsData);
+      } else {
+        // TODO 请求接口获取所有数据
+      }
+    } else {
+      setSelectedRowKeys([])
+      setSelectedRows([])
+      setPopValue([]);
+    }
+    setIndeterminate(false);
+    setCheckedAll(e.target.checked);
+  }
+
+  const LightHeightOption = (props) => {
+    const {
+      filterTxt, text,
+    } = props
+    const heightLightTxt = (txt, heightTxt) => {
+      if (heightTxt === '') {
+        return txt
+      }
+      // 前面filterOption 不区分大小写，这里用i
+      const regexp = new RegExp(heightTxt, 'gi')
+      return txt.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
+    }
+    return (
+      <div ref={(nodeElement) => {
+        if (nodeElement) {
+          nodeElement.innerHTML = heightLightTxt(text, filterTxt)
+        }
+      }}
+      />
+    )
+  }
+
+  // 扁平化二维数组的方法
+  const mapRows = params => {
+    var res = [];
+    for (var i = 0; i < params.length; i++) {
+      if (Array.isArray(params[i])) {
+        // 去重
+        res = _.uniqBy(res.concat(mapRows(params[i])), 'value');
+      } else {
+        res.push(params[i]);
+        // 去重
+        res = _.uniqBy(res, 'value')
+      }
+    }
+    return res.filter(Boolean); //去掉undefined的情况
+  };
+
+  const onChangeSelectedKeys=(selectKeys,selectRows) => {
+    const nowPage = tablePagination?.current;
+
+    let filterRows = [];
+    let sksResult = [];
+
+    if(selectMode) {
+      // 处理多选分页累计选中
+      // 勾选生成二维数组
+      doubleArr[nowPage ? nowPage - 1 : 0] = selectRows
+      // console.log(doubleArr)
+      setDoubleArr(doubleArr)
+      // 这块扁平化成为一位数组
+      filterRows = mapRows(doubleArr);
+      // console.log(filterRows)
+      setFilterRows(filterRows)
+
+      sksResult = filterRows.map((i) => i.value)
+    } else {
+      // 处理单选
+      filterRows = selectRows;
+      sksResult = selectRows.map((i) => i.value)
+    }
+
+    setSelectedRowKeys(sksResult)
+    setSelectedRows(filterRows)
+    setPopValue(filterRows);
+    setIndeterminate(!!filterRows.length && filterRows.length < tablePagination?.total);
+    setCheckedAll(filterRows.length === tablePagination?.total);
+  }
+
+  const rowSelection = {
+    type: selectMode ? 'checkbox' : 'radio',
+    selectedRowKeys,
+    onChange: (sks, srs) => {
+      onChangeSelectedKeys(sks, srs)
+    },
+  };
+
+  const onDoubleClickSelect = (e, record) => {
+    if(!selectMode) {
+      const srs = [JSON.parse(JSON.stringify(record))]
+      const sks = srs.map((i:any) => i.value)
+      onChangeSelectedKeys(sks, srs)
+    }
+  }
+
+  const themeColor = { color: '#1890ff' }
+
+  const formItem = (list) => {
+    if(isModalVisible && list?.length) {
+      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}>
+                {i?.initialSource?.length && i?.initialSource.map((m: any) => (
+                  <Option value={m.value} key={m.value}>{m.text}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )
+        }
+
+        // 默认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} />
+          </Form.Item>
+        )
+      })
+    } else {
+      return null
+    }
+  }
+
+  return (
+    <div className={'search_select'}>
+      <div className="search_select_show" id='search_select_div'>
+        <Select
+          virtual
+          labelInValue={labelInValue}
+          value={value}
+          onChange={onChange}
+          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>
+          }
+          onPopupScroll={SelectScroll}
+          {...currentSelectProps}
+          getPopupContainer={() => document.getElementById('search_select_div')}
+          style={{ width: 'calc(100% - 30px)' }}
+          placeholder="请选择"
+        >
+          {items.map(item => (
+            <Option key={item.value} label={item.text}>
+              {LightHeightOption({ text: `${item.value}       ${item.text}`, filterTxt: searchValue })}
+            </Option>
+          ))}
+        </Select>
+        <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">
+          <SearchOutlined />
+        </Button>
+      </div>
+      <Modal
+        width='80%'
+        title={modalTableProps?.modalTableTitle}
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[
+          <Button key="back" onClick={handleCancel}>
+            取消
+          </Button>,
+          <Button key="submit" type="primary" onClick={handleOk} disabled={selectProps?.disabled || props?.disabled}>
+            确定
+          </Button>,
+        ]}
+      >
+        <div className={'search_select_wrapper'}>
+          <div className={'search_select_wrapper_click_flag'} onClick={() => setCaretLeftFlag(!caretLeftFlag)}>
+            <CaretLeftOutlined className={caretLeftFlag ? 'search_select_wrapper_click_flag_arrow' : 'search_select_wrapper_click_flag_arrow_1' } />
+          </div>
+          <div className={caretLeftFlag ? 'search_select_wrapper_left' : 'search_select_wrapper_left1'}>
+            <div className={'select_list_columns'}>
+              <div className={'select_list_columns_tips'}>搜索</div>
+              <div className={'select_list_columns_formItems'}>
+                <Form form={form} layout='vertical' key='modalForm'>
+                  {formItem(modalTableProps?.tableSearchForm)}
+                </Form>
+              </div>
+            </div>
+            <div className={'select_list_searchButton'}>
+              <Button key='reset' className={'select_list_button_space'}  onClick={onResetTable}>重置</Button>
+              <Button key='search' type="primary" onClick={onSearchTable}>查询</Button>
+            </div>
+          </div>
+          <div className={caretLeftFlag ? 'search_select_wrapper_right': 'search_select_wrapper_right1'}>
+            <div>
+              <div className={'select_list_selectTips'}>
+                <div style={{ marginLeft: 8 }}>搜索结果共<span style={themeColor}>{tablePagination?.total || 0}</span>项{selectMode ? <span>， 本次已选<span style={themeColor}>{selectedRowKeys?.length || 0}</span>项</span> : ''}</div>
+                <div style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}>{selectMode ? '勾选后点击确定按钮完成选择' : '双击数据行或单击按钮完成选择'}</div>
+              </div>
+              <Table
+                size='small'
+                rowSelection={rowSelection}
+                columns={modalTableProps?.tableColumns}
+                dataSource={tableData}
+                pagination={tablePagination}
+                onChange={handleTableChange}
+                rowKey='code'
+                scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
+                onRow={record => {
+                  return {
+                    onDoubleClick: event => onDoubleClickSelect(event, record),
+                  };
+                }}
+              />
+              {selectMode ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} /> 全选所有页面</div> : ''}
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default SearchSelect;

package/src/index.ts

@@ -7,6 +7,7 @@
  */
 
 import axios from 'axios';
+// import 'antd/dist/antd.css';
 
 const resposne = JSON.parse(localStorage.getItem('userInfo') || '{}');
 
@@ -15,4 +16,5 @@ axios.defaults.headers.common['sso-sessionid'] = resposne?.sessionId || '';
 export { default as DataValidation } from './components/DataValidation';
 export { default as QueryMutipleInput } from './components/QueryMutipleInput';
 export { default as CheckOneUser } from './utils/CheckOneUser';
-
+export { default as SearchSelect } from './components/SearchSelect';
+export { default as BusinessSearchSelect } from './components/SearchSelect/business/BusinessSearchSelect';

package/dist/components/DataValidation/index.d.ts

@@ -1,144 +0,0 @@
-import React from 'react';
-import './index.less';
-declare class DataValidation extends React.Component {
-    constructor(props: any);
-    onDragEnd(result: any): void;
-    getCount: () => {
-        total: any;
-        error: any;
-    };
-    setConfig: (data: any) => {
-        container: string;
-        showtoolbar: boolean;
-        hook: {
-            columnTitleCellRenderBefore: (columnAbc: any, postion: any, ctx: any) => void;
-            cellRenderBefore: (cell: any, postion: any, sheetFile: any, ctx: any) => void;
-            cellAllRenderBefore: (data: any, sheetFile: any, ctx: any) => void;
-        };
-        data: {
-            name: string;
-            color: string;
-            index: number;
-            status: number;
-            order: number;
-            hide: number;
-            row: number;
-            column: number;
-            defaultRowHeight: number;
-            defaultColWidth: number;
-            config: {};
-            celldata: any;
-            scrollLeft: number;
-            luckysheet_select_save: never[];
-            calcChain: never[];
-            isPivotTable: boolean;
-            pivotTable: {};
-            filter_select: {};
-            filter: null;
-            luckysheet_alternateformat_save: {
-                cellrange: {
-                    row: number[];
-                    column: number[];
-                };
-                format: {
-                    head: {
-                        fc: string;
-                        bc: string;
-                    };
-                    one: {
-                        bc: string;
-                    };
-                    two: {
-                        bc: string;
-                    };
-                    foot: {
-                        fc: string;
-                        bc: string;
-                    };
-                };
-                hasRowHeader: boolean;
-                hasRowFooter: boolean;
-            }[];
-            luckysheet_alternateformat_save_modelCustom: {
-                head: {
-                    fc: string;
-                    bc: string;
-                };
-                one: {
-                    fc: string;
-                    bc: string;
-                };
-                two: {
-                    fc: string;
-                    bc: string;
-                };
-                foot: {
-                    fc: string;
-                    bc: string;
-                };
-            }[];
-            luckysheet_conditionformat_save: {};
-            frozen: {};
-            chart: never[];
-            zoomRatio: number;
-            image: never[];
-            showGridLines: number;
-            dataVerification: {};
-        }[];
-        cellRightClickConfig: {
-            copy: boolean;
-            copyAs: boolean;
-            paste: boolean;
-            insertRow: boolean;
-            insertColumn: boolean;
-            deleteCell: boolean;
-            hideRow: boolean;
-            hideColumn: boolean;
-            rowHeight: boolean;
-            columnWidth: boolean;
-            clear: boolean;
-            matrix: boolean;
-            sort: boolean;
-            filter: boolean;
-            chart: boolean;
-            image: boolean;
-            link: boolean;
-            data: boolean;
-            cellFormat: boolean;
-        };
-        showsheetbar: boolean;
-        optionstate: boolean;
-        showstatisticBarConfig: {
-            count: boolean;
-            view: boolean;
-            zoom: boolean;
-        };
-        column: number;
-        columnHeaderHeight: number;
-        lang: string;
-        defaultFontSize: string;
-        frozen: {
-            type: string;
-            range: {
-                row_focus: number;
-                column_focus: number;
-            };
-        };
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    getValidateData: () => {
-        successData: any;
-        failData: any;
-    };
-    getData: () => any;
-    resetData: () => void;
-    filterData: (type: string) => void;
-    toggleData: () => void;
-    onChange: (e: any) => void;
-    errorChange: (e: any) => void;
-    menuList: JSX.Element;
-    leftMenu: JSX.Element;
-    render(): JSX.Element;
-}
-export default DataValidation;

package/dist/components/QueryMutipleInput/index.d.ts

@@ -1,5 +0,0 @@
-import './index.less';
-declare const QueryMutipleInput: ({ onValueChange }: {
-    onValueChange: any;
-}) => JSX.Element;
-export default QueryMutipleInput;

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export { default as DataValidation } from './components/DataValidation';
-export { default as QueryMutipleInput } from './components/QueryMutipleInput';
-export { default as CheckOneUser } from './utils/CheckOneUser';