@bit-sun/business-component 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -46,4 +46,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/QueryMutipleInput/index.tsx

@@ -61,7 +61,7 @@ const QueryMutipleInput = ({ onValueChange }) => {
 
   return (
     <div className={'query_input'}>
-      <div class="query_input_show">
+      <div className="query_input_show">
         <Input
           value={value}
           onChange={outerChange}

package/src/components/SearchSelect/index.less

@@ -0,0 +1,115 @@
+.search_select {
+  &_show {
+    display: flex;
+  }
+
+  &_expand_button {
+    position: relative;
+    width: 30px;
+    color: #ffffff;
+    cursor: pointer;
+
+    span {
+      position: absolute;
+      height: 20px;
+      line-height: 14px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &_wrapper {
+    position: relative;
+    display: flex;
+    min-height: 60vh;
+    max-height: 60vh;
+    overflow: hidden;
+    font-size: 14px;
+
+    &_click_flag {
+      position: absolute;
+      z-index: 10;
+      &_arrow {
+        transform: rotate(0deg);
+        transition: transform 0.5s;
+      }
+      &_arrow_1 {
+        transform: rotate(-180deg);
+        transition: transform 0.5s;
+      }
+    }
+
+    &_left {
+      width: 28%;
+      overflow-y: hidden;
+      //background-color: yellow;
+      transition: all 0.3s;
+      margin-left: 20px;
+    }
+
+    &_left1 {
+      width: 0;
+      height: 0;
+      transition: all 0.3s;
+      display: none;
+    }
+
+    &_right {
+      width: 70%;
+      margin-left: 1%;
+      //background-color: pink;
+    }
+
+    &_right1 {
+      width: 100%;
+      margin-left: 20px;
+      //background-color: green;
+    }
+
+    &_right, _right1 {
+      overflow-x: auto;
+    }
+
+    .select_list_columns {
+      width: 100%;
+      height: calc(60vh - 60px);
+      overflow-y: auto;
+      border: 1px solid #d8d8d8;
+      &_tips {
+        background: #eee;
+        padding: 6px 20px;
+        margin-bottom: 10px;
+      }
+      &_formItems {
+        padding: 0 20px;
+      }
+    }
+    .select_list_searchButton {
+      display: flex;
+      margin: 10px 0px;
+      justify-content: flex-end;
+    }
+
+    .select_list_button_space {
+      margin-right: 10px;
+    }
+
+    .select_list_selectTips {
+      display: flex;
+      justify-content: space-between;
+      height: 34px;
+      line-height: 32px;
+      background-color: #eee;
+      margin-bottom: 10px;
+      padding: 0 12px;
+    }
+
+    .select_list_selectAll {
+      position: relative;
+      top: -40px;
+      left: 20px;
+      width: 160px;
+    }
+  }
+}

package/src/components/SearchSelect/index.md

@@ -0,0 +1,130 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 组件
+  order: 0
+title: 档案选择器
+order: 2
+---
+
+## SearchSelect
+
+Demo:
+
+```tsx
+import React, { useRef } from 'react';
+import { SearchSelect } from '@bit-sun/business-component';
+
+export default () => {
+  const selectProps = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+  
+  const DictionaryUC000013 = [{ text: '共享', value: '10' }, { text: '私有', value: '20' }]
+  const modalTableProps = {
+    modalTableTitle: '选择供应商',
+    tableSearchForm:[
+      { name: 'qp-name-like', label: '客户名称' }, // field: { type: 'input', props: { placeholder: '8888'}} 
+      { name: 'qp-code-like', label: '客户编码' },
+      { name: 'qp-conglomerateCode-in', type: 'select', label: '归属集团', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialSource: [{ text: '英伦宝贝儿童用品有限公司', value: 'A0001' }]
+      },
+      { name: 'qp-accountingCode-in', type: 'select', label: '归属核算主体', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
+      },
+      { name: 'qp-companyCode-in', type: 'select', label: '归属法人公司', field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+            notFoundContent: '暂无数据',
+            allowClear: true,
+            showSearch: true,
+            showArrow: true,
+            maxTagCount: 1,
+            optionFilterProp: 'children',
+            filterOption: (input: string, option: { props: { children: string } }) =>
+              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
+      },
+      { name: 'qp-sharingType-eq', type: 'select', label: '共享类型', initialSource: DictionaryUC000013 }, // 页面可以直接使用getDictionarySource('UC000013')
+    ],
+    tableColumns: [
+      {
+        title: '客户编码',
+        dataIndex: 'code',
+      },
+      {
+        title: '客户名称',
+        dataIndex: 'name',
+      },
+      {
+        title: '归属集团',
+        dataIndex: 'conglomerateName',
+      },
+      {
+        title: '归属法人公司',
+        dataIndex: 'legalCompanyName',
+      },
+      {
+        title: '归属核算主体',
+        dataIndex: 'accountingName',
+      },
+      {
+        title: '共享类型',
+        dataIndex: 'sharingType',
+        render: (text) => DictionaryUC000013?.find((i) => i.value === text)?.text, // getDictionaryTextByValue('UC000013', text)
+      },
+    ]
+  }
+  
+  const onValueChange = (value) => {
+    console.log(value)
+  }
+  
+  return (
+    <div>
+      <SearchSelect
+        // initValue={{value: '20220105001', label: 'LH公司'}} // 单选
+        // initValue={[{value: '20220105001', label: 'LH公司'}]} // 多选
+        selectProps={selectProps}
+        modalTableProps={modalTableProps}
+        selectDataUrl='http://test.i-baby.net/bop/api/supplier'
+        onValueChange={onValueChange}
+      />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/SearchSelect/index.tsx

@@ -0,0 +1,422 @@
+// @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 { QueryMutipleInput } from '@bit-sun/business-component';
+import axios from 'axios';
+import { stringify } from 'querystring';
+import _ from "loadsh"
+import './index.less';
+
+const { Option } = Select;
+
+// initValue: { value: string | number, label?: ReactNode }
+const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue, modalTableProps={} }) => {
+  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
+  const initVal = initValue || (selectMode ? [] : null)
+  const pageSize = 100 // 下拉框默认分页 条数
+  const tableInitPageSize = 10 // 弹框默认分页 条数
+  const currentPage = 1
+  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 [value, setValue] = useState(initVal);
+  const [popvalue, setPopValue] = useState(initVal);
+  const { run } = useDebounceFn(
+    () => {
+      // 防抖函数  待定
+      getData({ 'qp-name-like': 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 = (initParams, type=1) => {
+    setFetching(true)
+    const queryParams = {
+      pageSize,
+      currentPage,
+      ...initParams,
+      sorter: 'desc-createTime'
+    }
+    axios
+      .get(`${selectDataUrl}?${stringify(queryParams)}`)
+      .then((result) => {
+        setFetching(false)
+        result = result.data;
+        if (result.status !== '0') {
+          message.error(result.msg);
+          return;
+        }
+        const res = result.data?.items || [];
+        if(type === 1) {
+          setItems(res)
+          setItemsTotal(Number(result.data?.total))
+        } else {
+          setTableData(res)
+          setTablePagination({...tablePagination, total: Number(result.data?.total), pageSize: Number(result.data?.size), current: Number(result.data?.page)})
+          // if(checkedAll) {
+          //   onChangeSelectedKeys(res.map((i) => i.code), res, result.data?.page, 'show')
+          // }
+        }
+      })
+      .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(() => {
+    setPopValue(value);
+    onValueChange(value);
+  }, [value]);
+
+  const showModal = () => {
+    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
+    setIsModalVisible(true);
+    // 回显
+    if(value) {
+      if(selectMode) {
+        setSelectedRowKeys(value.map(i => i.key))
+        setSelectedRows(value.map(i => ({ code: i.key, name: i.label })))
+        setPopValue(value.map(i => ({ code: i.key, name: i.label })));
+        setIndeterminate(!!value.length && value.length < itemsTotal);
+        setCheckedAll(value.length === itemsTotal);
+      } else {
+        setSelectedRowKeys([value.key])
+        setSelectedRows([{ code: value.key, name: value.label }])
+        setPopValue([{ code: value.key, name: value.label }]);
+      }
+    }
+  };
+
+  const handleOk = () => {
+    if(popvalue?.length) {
+      formaData(popvalue);
+    }
+    setIsModalVisible(false);
+  };
+
+  const formaData = (value) => {
+    const formatResult = value.map((i: any) => ({ key: i.code, label: i.name, value: i.code }))
+    setValue(selectMode ? formatResult : formatResult[0])
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const onSearchChange = (e) => {
+    setSearchValue(e.target.value);
+    run();
+  }
+
+  const onSearchBlur = () => {
+    setSearchValue('')
+    run();
+  }
+
+  //（ 多选模式下 选中数据再搜索 删除部分搜索内容会优先触发这个函数 删除掉已选中内容才会去触发onSearchChange函数进行搜索）
+  const outerChange = (sValue) => {
+    setValue(sValue);
+  };
+
+  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) {
+      // 方案一：此种方案存在的问题是，数据不真实 回显下拉框有问题
+      // const currentTableData = JSON.parse(JSON.stringify(tableData))
+      // onChangeSelectedKeys(currentTableData.map((i) => i.code),currentTableData,tablePagination.current, 'checkAll')
+      // 方案二：如果下拉框有所有数据就处理选中所有，如果没有 就默认查出所有数据
+      if(items.length === itemsTotal) {
+        const currentItemsData = JSON.parse(JSON.stringify(items))
+        setSelectedRowKeys(currentItemsData.map(i => i.code))
+        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])), 'code');
+      } else {
+        res.push(params[i]);
+        // 去重
+        res = _.uniqBy(res, 'code')
+      }
+    }
+    return res.filter(Boolean); //去掉undefined的情况
+  };
+
+  const onChangeSelectedKeys=(selectKeys,selectRows, nowPage, type) => {
+    // 处理全选 & 全选时进入某一页首次展示
+    // if(type === 'checkAll') {
+    //   const totalFullPage = Math.floor(tablePagination.total / tableInitPageSize) // 整数页
+    //   const lastPage = tablePagination.total % tableInitPageSize  // 最后一页剩余条数
+    //   const currentTableData = JSON.parse(JSON.stringify(tableData))
+    //   // 选中非最后一页
+    //   if(currentTableData.length === tableInitPageSize) {
+    //     for(var i = 0; i < totalFullPage; i++) {
+    //       doubleArr[i] = JSON.parse(JSON.stringify(tableData.map(i => ({ ...i, code: _.uniqueId('custom_') }))))
+    //     }
+    //     if(lastPage > 0) {
+    //       // 深拷贝 避免splice时候更改了tableData的指向地址
+    //       doubleArr[totalFullPage] = currentTableData.splice(0, lastPage)
+    //     }
+    //   } else {
+    //     for(var i = 0; i < totalFullPage; i++) {
+    //       const SwallowDigits = tableInitPageSize-currentTableData.length; // 需要补足位数
+    //       const SwallowDigitsArray = Array.from({length: SwallowDigits }); // 生成补足数组
+    //       doubleArr[i] = JSON.parse(JSON.stringify(tableData.concat(SwallowDigitsArray).map(i => ({ ...i, code: _.uniqueId('custom_') }))))
+    //     }
+    //   }
+    // }
+    // if(type === 'show') {}
+
+    // 勾选生成二维数组
+    doubleArr[nowPage ? nowPage - 1 : 0] = selectRows
+    // console.log(doubleArr)
+    setDoubleArr(doubleArr)
+    // 这块扁平化成为一位数组
+    const filterRows = mapRows(doubleArr);
+    // console.log(filterRows)
+    setFilterRows(filterRows)
+
+    const sksResult = filterRows.map((i) => i.code)
+    setSelectedRowKeys(sksResult)
+    setSelectedRows(filterRows)
+    setPopValue(filterRows);
+
+    if(type === 'change') {
+      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, tablePagination?.current, 'change')
+    },
+  };
+
+  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
+          value={value}
+          onChange={outerChange}
+          dropdownRender={menu => (
+            <>
+              <Input value={searchValue} style={{ width: '98%', marginLeft: '1%' }} placeholder="请输入" onChange={e=> onSearchChange(e)} onBlur={onSearchBlur} />
+              <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.code} label={item.name}>
+              {LightHeightOption({ text: `${item.code}       ${item.name}`, 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}>
+            确定
+          </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'>
+                  {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 }}
+              />
+              {selectMode ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} /> 全选所有页面</div> : ''}
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default SearchSelect;