@bit-sun/business-component 1.2.4-alpha.1 → 1.2.4

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

@@ -1,613 +0,0 @@
-// @ts-nocheck
-import { Button, message, Input, InputNumber, Tooltip, Table, Popover, Select } from 'antd';
-import React, { useState, useRef, useEffect } from 'react';
-import { SearchOutlined, CopyOutlined, CloseCircleOutlined } from '@ant-design/icons';
-import { stringify } from 'querystring';
-import './index.less';
-import axios from 'axios';
-
-const InputElement = ({
-  record, text, currentIndex, inputLength, index, setData, data, item, callSelectItem
-}: {
-  record: any, text: string, currentIndex: any, inputLength: any, index: any, setData: any, data: any, item: any, callSelectItem: any
-}) => {
-  const [hoverVisibled, updateHoverVisibled] = useState(false);
-  const [searchData, updateSearchData] = useState([]);
-  const tableRef = useRef(null);
-  const [value, setValue] = useState(text)
-  const inputRef = useRef(false);
-
-  const onSerchdata = (name: any) => {
-    axios
-      .get(`/items/sku/pager/v2?${stringify({ 'skuCodeAndSkuName': name, 'pageSize': 100, 'qp-combination-eq': false, 'qp-approveStatus-eq': 1, 'qp-status-eq': 1 })}`)
-      .then(({ data, status }: any) => {
-        if (status === 200) {
-          if (data.status === '0') {
-            const resultData = data.data.items.map((item: any, index: any) => ({
-              ...item,
-              index
-            }));
-            if (resultData.length === 1) {
-              callSelectItem({ ...resultData[0], needFocus: true })
-              setValue(resultData[0][item.dataIndex])
-            } else {
-              updateHoverVisibled(true)
-              updateSearchData(resultData)
-            }
-          } else {
-            updateSearchData([])
-          }
-        }
-      })
-  }
-
-  const onCallback = (itemData: any) => {
-    updateHoverVisibled(false)
-    if (itemData) {
-      callSelectItem({ ...itemData, needFocus: true })
-      setValue(itemData[item.dataIndex])
-    } else {
-      callSelectItem(null)
-    }
-  }
-
-  const SearchDataTable = (hoverVisibled: any) => {
-    const [selectIndex, setSelectIndex] = useState(0);
-    const inputRef = useRef(null);
-
-    useEffect(() => {
-      if (searchData.length && hoverVisibled) {
-        let dom = tableRef?.current?.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0]
-        if (dom) {
-          dom.style.background = '#005CFF30'
-        }
-      }
-    }, [hoverVisibled, tableRef?.current])
-
-    useEffect(() => {
-      const inter = setInterval(() => {
-        if (inputRef.current) {
-          inputRef.current.focus()
-        }
-      }, 500)
-
-      return () => {
-        clearInterval(inter);
-      }
-    })
-
-    if (!hoverVisibled) return <></>
-
-    return <div className={'add_select_wrapper_select'} style={{ width: '800px', height: '400px', overflow: 'auto', position: 'relative' }}>
-      <Input placeholder='请输入skucode或者sku名称' ref={inputRef} style={{ position: 'absolute', zIndex: '-100', height: '22px' }} onKeyDown={(e) => {
-        let currentIndex = selectIndex
-        if (e.keyCode === 27) {
-          e.stopPropagation();
-          e.preventDefault();
-          setSelectIndex(0);
-          onCallback(null)
-        }
-        if (e.keyCode === 13) { // enter
-          onCallback(searchData[currentIndex])
-          setSelectIndex(0);
-        }
-
-        if (e.keyCode === 40) {  // 向下
-          let dom = tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex + 1]
-          if (dom) {
-            tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex].style.background = ''
-            setSelectIndex(currentIndex + 1)
-            dom.style.background = '#005CFF30'
-            dom.scrollIntoViewIfNeeded(false)
-          }
-        } else if (e.keyCode === 38) {
-          let dom = tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex - 1]
-          if (dom) {
-            tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex].style.background = ''
-            setSelectIndex(currentIndex - 1)
-            dom.style.background = '#005CFF30'
-            dom.scrollIntoViewIfNeeded(false)
-          }
-        }
-      }} />
-      <Table
-        ref={tableRef}
-        pagination={false}
-        // components={
-        //   {
-        //     body: {
-        //       cell: ({index, record, ...props}) => {
-        //         debugger
-        //         return <td {...props} style={selectIndex === record?.index ? {background: '#005CFF30'} : {} } />
-        //       }
-        //     }
-        //   }
-        // }
-        onRow={(record, index) => {
-          return {
-            onClick: ((record, index, event) => {
-              let dom = tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[index]
-              if (dom) {
-                [...(tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr'))].map(item => {
-                  item.style.background = ''
-                })
-                dom.style.background = '#005CFF30'
-                dom.scrollIntoViewIfNeeded(false)
-              }
-              setSelectIndex(index)
-            }).bind(this, record, index), // 点击行
-          }
-        }}
-        rowClassName={'row-class'}
-        columns={[{
-          title: 'SKU编码',
-          width: 150,
-          dataIndex: 'skuCode',
-        },
-        {
-          title: 'SKU名称',
-          width: 200,
-          ellipsis: {
-            showTitle: false,
-          },
-          render: (text: any) => (
-            <Tooltip placement="topLeft" title={text}>
-              {text}
-            </Tooltip>
-          ),
-          dataIndex: 'name',
-        },
-        {
-          title: '国际条码',
-          width: 100,
-          ellipsis: {
-            showTitle: false,
-          },
-          dataIndex: 'barCode',
-          render: (text: any) => (
-            <Tooltip placement="topLeft" title={text}>
-              {text}
-            </Tooltip>
-          ),
-        },
-        {
-          title: '所属SPU名称',
-          width: 100,
-          ellipsis: {
-            showTitle: false,
-          },
-          dataIndex: 'itemName',
-          render: (text: any) => (
-            <Tooltip placement="topLeft" title={text}>
-              {text}
-            </Tooltip>
-          ),
-        },
-        {
-          title: '所属SPU编码',
-          width: 100,
-          ellipsis: {
-            showTitle: false,
-          },
-          dataIndex: 'itemCode',
-          render: (text: any) => (
-            <Tooltip placement="topLeft" title={text}>
-              {text}
-            </Tooltip>
-          ),
-        },
-        {
-          title: '外部编码',
-          width: 100,
-          ellipsis: {
-            showTitle: false,
-          },
-          render: (text: any) => (
-            <Tooltip placement="topLeft" title={text}>
-              {text}
-            </Tooltip>
-          ),
-          dataIndex: 'externalCode',
-        }]} dataSource={searchData} />
-    </div>
-  }
-
-
-  return (
-    <Popover placement="bottomLeft" destroyTooltipOnHide={{ keepParent: false }} title="" trigger="" content={SearchDataTable(hoverVisibled)} visible={hoverVisibled} onVisibleChange={(disabled) => { updateHoverVisibled(disabled) }}>
-      {item.isPrimaryInput ?
-        <Input
-          value={value}
-          ref={inputRef}
-          placeholder='skucode / sku名称'
-          keyboard={false}
-          autoFocus={record.autoFocus}
-          onChange={(value) => {
-            record[item.dataIndex] = value.currentTarget.value
-            setValue(value.currentTarget.value)
-            // setData(data);
-          }}
-          // 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 && index) {
-              message.success('删除当前行')
-              e.stopPropagation();
-              e.preventDefault();
-              let dom = e.nativeEvent.path[3].children[index]?.getElementsByTagName('input')[currentIndex]
-              if (dom) {
-                dom.select();
-                dom.focus();
-                dom.scrollIntoViewIfNeeded(false)
-              }
-              dom = null
-              setData(data.filter((item, innerIndex) => innerIndex !== index))
-            }
-            if (e.keyCode === 13) { // enter
-              if (item.isPrimaryInput) {
-                if (e.currentTarget.value.length < 2) {
-                  message.warning('至少输入两个字符');
-                } else {
-                  onSerchdata(e.currentTarget.value)
-                }
-              }
-            }
-            if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
-              e.stopPropagation();
-              e.preventDefault();
-              let dom = e.nativeEvent.path[3].children[index + 1]?.getElementsByTagName('input')[currentIndex - 1]
-              if (dom) {
-                dom.select();
-                dom.focus();
-                dom.scrollIntoViewIfNeeded(false)
-              }
-              dom = null
-            }
-            if (e.keyCode === 39 && e.shiftKey) {  //  右滑
-              e.stopPropagation();
-              e.preventDefault();
-              let dom = e.nativeEvent.path[3].children[index + 1]?.getElementsByTagName('input')[currentIndex + 1]
-              if (dom) {
-                dom.select();
-                dom.focus();
-                dom.scrollIntoViewIfNeeded(false)
-              }
-              dom = null
-            }
-            if (e.keyCode === 40) {  // 向下
-              debugger
-              e.stopPropagation();
-              e.preventDefault();
-              let dom = e.nativeEvent.path[3].children[index + 2]?.getElementsByTagName('input')[currentIndex]
-              if (dom) {
-                dom.select();
-                dom.focus();
-                dom.scrollIntoViewIfNeeded(false)
-              }
-              dom = null
-            } else if (e.keyCode === 38) {
-              e.stopPropagation();
-              e.preventDefault();
-              let dom1 = e.nativeEvent.path[3].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 && currentIndex === inputLength - 1 && index === data.length - 1) {
-              setData([...data, {}])
-            }
-          }}
-        />
-        :
-        <InputNumber
-          // onBlur={() => {updateHoverVisibled(false)}}
-          defaultValue={text || ''}
-          min={0}
-          keyboard={false}
-          onChange={(value) => {
-            record[item.dataIndex] = value
-          }}
-          onKeyDown={(e) => {
-            // if (e.keyCode === 13 && e.ctrlKey) {
-            //     handleOk(true)
-            //     document.getElementById("first-query")?.focus()
-            // }
-            if (e.keyCode === 8 && e.ctrlKey && index) {
-              message.success('删除当前行')
-              e.stopPropagation();
-              e.preventDefault();
-              let dom = e.nativeEvent.path[5].children[index]?.getElementsByTagName('input')[currentIndex]
-              if (dom) {
-                dom.select();
-                dom.focus();
-                dom.scrollIntoViewIfNeeded(false)
-              }
-              dom = null
-              setData(data.filter((item, innerIndex) => innerIndex !== index))
-            }
-            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.scrollIntoViewIfNeeded(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.scrollIntoViewIfNeeded(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.scrollIntoViewIfNeeded(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 && currentIndex === inputLength - 1 && index === data.length - 1) {
-              e.stopPropagation();
-              e.preventDefault();
-            } else if (e.keyCode === 13 && currentIndex === inputLength - 1 && index === data.length - 1 && record['skuCode']) {
-              setData([...data, { autoFocus: true }])
-            }
-          }}
-        />
-      }
-
-    </Popover>
-  )
-}
-
-const BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/check", isBrandAuth=true, isCheckStockNum=true }) => {
-  const columns = [
-    {
-      title: 'SKU编码',
-      width: 150,
-      dataIndex: 'skuCode',
-      isInputItem: true,
-      isPrimaryInput: true
-    },
-    {
-      title: 'SKU名称',
-      width: 200,
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (text: any) => (
-        <Tooltip placement="topLeft" title={text}>
-          {text}
-        </Tooltip>
-      ),
-      dataIndex: 'name',
-    },
-    {
-      title: '单位',
-      dataIndex: 'selectUnitCode',
-      width: 100,
-      render: (text: any, record: any) => {
-        if (record?.packingUnitList?.length) {
-          const basePackUnit = record?.packingUnitList[0]
-          record.selectUnitCode = basePackUnit.unitCode
-          return basePackUnit.name || basePackUnit.unitCode
-        }
-
-
-        return <></>
-      },
-    },
-    {
-      title: '数量',
-      width: 100,
-      isInputItem: true,
-      dataIndex: 'count',
-    },
-    {
-      title: '所属SPU编码',
-      width: 100,
-      ellipsis: {
-        showTitle: false,
-      },
-      dataIndex: 'itemCode',
-      render: (text: any) => (
-        <Tooltip placement="topLeft" title={text}>
-          {text}
-        </Tooltip>
-      ),
-    },
-    {
-      title: '规格',
-      width: 200,
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (text: any) => (
-        <Tooltip placement="topLeft" title={text}>
-          {text}
-        </Tooltip>
-      ),
-      dataIndex: 'propertyNameAndValue',
-    }
-  ]
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [data, setData] = useState([{ hovered: false }]);
-  const tableRef = useRef(null)
-
-  const [loading, setLoading] = useState(false);
-
-  const callSelectItem = (index, item) => {
-    if (item) {
-      let newData = [].concat(data)
-      newData[index] = { ...data[index], ...item }
-      setData(newData)
-    }
-    let dom = tableRef?.current?.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[index + 1]
-    if (dom) {
-      setTimeout(() => {
-        dom.getElementsByTagName('input')[item ? 1 : 0]?.select()
-        dom.getElementsByTagName('input')[item ? 1 : 0]?.focus()
-      }, 200)
-    }
-  }
-
-  const deleteRecord = (record) => {
-    setData(data.filter(item => item.skuCode !== record.skuCode))
-  }
-
-  let inputIndex = 0;
-  let selectColumns = [...columns.map(item => {
-    const inputLength = columns.filter(item => item.isInputItem || item.isSelectItem).length
-    const currentIndex = inputIndex
-    if (item.isInputItem) {
-      inputIndex++;
-      return {
-        ...item,
-        render: (text, record, index) => {
-          return (
-            <InputElement setData={setData} callSelectItem={callSelectItem.bind(this, index)} item={item} isPrimaryInput={item.isPrimaryInput} record={record} text={text} data={data} index={index} inputLength={inputLength} currentIndex={currentIndex} />
-          );
-        },
-      }
-    } else if (item.isSelectItem) {
-      inputIndex++;
-    }
-
-    return item
-  }), {
-    title: '操作',
-    width: 50,
-    render: (text, record, index) => {
-      if (index !== 0) {
-        return (
-          <span style={{ cursor: 'pointer', color: '#005CFF' }} onClick={() => {
-            deleteRecord(record)
-          }}>删除</span>
-        )
-      }
-    }
-  }]
-
-  const isSkuCanEntry = (resultData) => {
-    // 处理业务参数
-    let otherParams={}
-    if(isBrandAuth){
-      otherParams = { brandAuth: 'ctl-withAuth' }
-    }
-    return axios
-      .post(validDataUrl, {
-        ...otherParams,
-        columns: ["skuCode", "quantity"],
-        data: resultData.map((i:any) => ({ skuCode: i.skuCode, quality: i.count })),
-        checkStockNum: isCheckStockNum,
-      })
-      .then((result) => {
-        result = result.data;
-        if (result.status !== '0') {
-          message.error(result.msg);
-          return { flag: false }
-        } else {
-          let res = result.data || [];
-          const errorList = res.filter((i: any) => !i.flag);
-          return  { flag: !errorList?.length, errorList }
-        }
-      }).catch(() => {
-        return { flag:false }
-      })
-  }
-
-  const handleSubmit = async () => {
-    // 加校验逻辑
-    if (!data?.length) {
-      message.warning('至少录入一条数据');
-      return;
-    }
-    if (!data?.every((d: any) => d.skuCode && d.name)) {
-      message.warning('请选择商品！');
-      return;
-    }
-    if (!data?.every((d: any) => d.count)) {
-      message.warning('请填写商品数量！');
-      return;
-    }
-    const canEntryObject = await isSkuCanEntry(data)
-    if(canEntryObject?.flag === false) {
-      const messageInfo = canEntryObject?.errorList?.length && canEntryObject?.errorList.map((i: any) => <div>{i.skuCode}校验失败：{i.checkResults}</div>)
-        messageInfo && message.warning({ content: messageInfo, duration: 6 });
-      return;
-    }
-
-    setLoading(true)
-    onSaveCallback(data).then(res => {
-      if(true) {
-        message.success('保存成功')
-      }
-      setLoading(false)
-    }).catch(Error => {
-      message.error(Error);
-      setLoading(false)
-    })
-  }
-
-  return (
-      <div className='add_select'>
-        <div className='add_select_quick_header'>
-          <div className='add_select_quick_header_title'><div>快速录入</div><Button type="primary" onClick={() => handleSubmit()} loading={loading}>提交</Button></div>
-          <span><span>*</span> &nbsp;快捷键：【Tab】-跳格切换；【Shift+←、→】-当前行左、右移动；【  ↑、↓】-当前列上、下移动；【ctrl+Delete】-删除当前行；</span>
-        </div>
-        <div className={'add_select_wrapper_select add_select_wrapper_select_quick'}>
-          <Table
-            size='small'
-            scroll={{ y: 240 }}
-            ref={tableRef}
-            dataSource={data}
-            columns={selectColumns}
-            pagination={false}
-            rowClassName={'row-class'}
-            rowClassName={(record: object | null | undefined, index: number) =>
-              index % 2 === 0 ? 'table_base row-class' : 'table_odd row-class'
-            }
-          />
-        </div>
-
-      </div>
-  );
-};
-
-export default BillEntry;

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

@@ -1,37 +0,0 @@
----
-title: 导出按钮
-order: 5
-nav:
-  title: 组件
-  order: 1
-group:
-  path: /components/functional
-  order: 0
-  title: 功能组件
----
-
-## ExportIcon
-
-导出按钮demo
-
-```tsx
-import React, { useState, useRef } from 'react';
-import {ExportIcon}  from '../../../../index';
-
-
-
-export default () => {
-	
-	const tableRef = useRef()
-
-  return (
-    <div>
-      <ExportIcon request={{url:'abc'}} tableRef={tableRef}/>
-    </div>
-  );
-};
-```
-
-<API></API>
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle

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

@@ -1,59 +0,0 @@
-// @ts-nocheck
-import React, {Ref} from 'react'
-import {message, Popconfirm, Tooltip} from "antd";
-import axios from 'axios'
-import exportlogo from '../../../../assets/exportlogo.png'
-import {omit} from 'lodash'
-interface exportIconType{
-	/** others选填，使用axios发请求，*/
-	request:{
-		url: string,
-		params: Function | Object,
-		others?: Object
-	},
-	/** BsSulaQueryTable的tableRef*/
-	tableRef: any,
-}
-
-const ExportIcon = ({request, tableRef}: exportIconType) => {
-	const {url, params, others} = request
-
-	return (
-		<div style={{ cursor: 'pointer' }}>
-				<Tooltip title="导出数据">
-					<img width={32} src={exportlogo} onClick={() =>{
-						const convertedParams = tableRef?.current?.getExportParams()
-						let requestData: any
-
-						if(typeof params === 'function'){
-							requestData = {...omit(params(convertedParams),'selectedRows')}
-						}else if(typeof params === 'object'){
-							requestData = {...params}
-						}
-						if(!params){
-							requestData = omit(convertedParams, 'selectedRows')
-						}
-
-						requestData['qp-id-in'] = convertedParams?.selectedRows?.map((d: any) => d.id)?.join(',')
-
-						axios({
-							url,
-							method:'POST',
-							data:requestData,
-							...others,
-						})
-							.then((result: any) => {
-								result = result.data;
-								if (result.code !== '000000') {
-									message.error(result?.msg);
-									return;
-								}
-								message.success('任务已排入导出队列')
-							})
-					}} />
-				</Tooltip>
-		</div>
-	)
-}
-
-export default ExportIcon