@bit-sun/business-component 1.1.6 → 1.1.11

package/src/components/SearchSelect/business/BusinessUtils.ts

@@ -70,14 +70,14 @@ const loadSelectSource = (url: string, params?: any) => {
   })
 };
 
-export function commonFun (type?: string) {
+export function commonFun (type?: string, prefixUrl: any) {
   // 默认type === 'supplier' 供应商选择器
   let requestConfig = {
-    url: `/bop/api/supplier`,
-    filter: 'qp-codeAndName-like', // 过滤参数
-    otherParams: {}, // 默认参数
-    mappingTextField: 'name',
-    mappingValueField: 'code',
+    url: `${prefixUrl.selectPrefix}/supplier`,
+    filter: 'qp-nameAndCode-like', // 过滤参数
+    otherParams: {
+      sorter: 'desc-id'
+    }, // 默认参数
   }
 
   /*
@@ -88,12 +88,37 @@ export function commonFun (type?: string) {
   * changePosition 必传 为搜索表单Form中需要更改数据源的Item项的位置
   * changeSearchForm 必传 为搜索表单Form数据
   * */
-  const formatSource = (reData: any, position: number, changePosition: number,changeSearchForm: any) => {
-    const data = reData && reData[position]?.data?.items || [];
-    const formatData = data?.length ? data.map((v: any) => ({ text: v.name, value: v.code })) : [];
+  const formatSource = (reData: any, position: number, changePosition: number,changeSearchForm: any,resKeyValue=['code', 'name']) => {
+    const data = reData && reData[position]?.data;
+    const list = Array.isArray(data) ? data :(data?.items || data?.list || []);
+    const formatData = list?.length ? list.map((v: any) => ({ text: v[resKeyValue[1]], value: v[resKeyValue[0]] })) : [];
     changeSearchForm[changePosition] = {...changeSearchForm[changePosition], initialSource: formatData}
   }
 
+  // 格式化树选择器数据源
+  const mapSearchTree = (treeDataItem: any, resKeyValue: any) => {
+    const haveChildren = Array.isArray(treeDataItem.children) && treeDataItem.children.length > 0;
+    return {
+      title: treeDataItem[resKeyValue[1]],
+      key: treeDataItem[resKeyValue[0]],
+      parentId: treeDataItem.parent,
+      data: { ...treeDataItem },
+      isLeaf: !haveChildren,
+      disabled: haveChildren,
+      children: haveChildren ? treeDataItem.children.map((i: any) => mapSearchTree(i, resKeyValue)) : [],
+    };
+  };
+  const formatTreeDataSource = (reData: any, position: number, changePosition: number,changeSearchForm: any,resKeyValue=['id', 'name']) => {
+    const data = reData && reData[position]?.data;
+    const formatData = (data &&
+      Array.isArray(data) &&
+      data.length &&
+      data.map((ites: any) => mapSearchTree(ites, resKeyValue))) ||
+    []
+    changeSearchForm[changePosition].field.props.treeData = formatData;
+  }
+
+
   let tableSearchForm: any [] = [];
   if(type === 'supplier') {
     tableSearchForm = [
@@ -112,24 +137,7 @@ export function commonFun (type?: string) {
             filterOption: (input: string, option: { props: { children: string } }) =>
               option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
           },
-        },
-        // remoteSource: {
-        //   init: true, // 初始请求数据源
-        //   url: '/bop/api/company',
-        //   params: {
-        //     pageSize: 5000,
-        //     currentPage: 1,
-        //     'qp-companyType-eq': '30',
-        //   },
-        //   converter({ data }: any) {
-        //     if (data?.items == undefined || data?.items?.length == 0) {
-        //       return [];
-        //     }
-        //     return data?.items.map((v: any) => ({ text: v.name, value: v.code }));
-        //   },
-        // },
-        // initialSource: [{ text: '英伦宝贝儿童用品有限公司', value: 'A0001' }]
-      },
+        } },
       { name: 'qp-accountingCode-in', type: 'select', label: '归属核算主体', field: {
           type: 'select',
           props: {
@@ -143,23 +151,7 @@ export function commonFun (type?: string) {
             filterOption: (input: string, option: { props: { children: string } }) =>
               option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
           },
-        },
-        // remoteSource: {
-        //   init: true, // 初始请求数据源
-        //   url: `/bop/api/accountingSubject`,
-        //   params: {
-        //     pageSize: 5000,
-        //     currentPage: 1,
-        //   },
-        //   converter({ data }: any ) {
-        //     if (data?.items == undefined || data?.items?.length == 0) {
-        //       return [];
-        //     }
-        //     return data?.items.map((v: any) => ({ text: v.name, value: v.code }));
-        //   },
-        // },
-        // initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
-      },
+        } },
       { name: 'qp-companyCode-in', type: 'select', label: '归属法人公司', field: {
           type: 'select',
           props: {
@@ -173,41 +165,20 @@ export function commonFun (type?: string) {
             filterOption: (input: string, option: { props: { children: string } }) =>
               option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
           },
-        },
-        // remoteSource: {
-        //   init: true, // 初始请求数据源
-        //   url: '/bop/api/company',
-        //   params: {
-        //     pageSize: 5000,
-        //     currentPage: 1,
-        //     'qp-companyType-eq': '20',
-        //   },
-        //   converter: ({ data }: any) => {
-        //     return data.items
-        //       ? data.items.map((item: any) => {
-        //         return {
-        //           text: item.name,
-        //           value: item.code,
-        //         };
-        //       })
-        //       : [];
-        //   },
-        // },
-        // initialSource: [{ text: '上海哲雄母婴用品有限公司', value: 'F002' }, { text: '上海英伦宝贝儿童用品有限公司', value: 'F001' }]
-      },
+        } },
       { name: 'qp-sharingType-eq', type: 'select', label: '共享类型', initialSource: getDictionarySource('UC000013') },
     ]
     Promise.all([
-      loadSelectSource('/bop/api/company', {
+      loadSelectSource(`${prefixUrl.formSelectFix}/company`, {
         pageSize: 5000,
         currentPage: 1,
         'qp-companyType-eq': '30',
       }),
-      loadSelectSource('/bop/api/accountingSubject', {
+      loadSelectSource(`${prefixUrl.formSelectFix}/accountingSubject`, {
         pageSize: 5000,
         currentPage: 1,
       }),
-      loadSelectSource('/bop/api/company', {
+      loadSelectSource(`${prefixUrl.formSelectFix}/company`, {
         pageSize: 5000,
         currentPage: 1,
         'qp-companyType-eq': '20',
@@ -251,8 +222,127 @@ export function commonFun (type?: string) {
   }
 
   // 商品选择器
-  if(type === 'commodity') {
-
+  if(type === 'skuCommodity') {
+    requestConfig = {
+      url: `${prefixUrl.selectPrefix}/sku`,
+      filter: 'qp-nameAndCode-like', // 过滤参数
+      mappingTextField: 'name',
+      mappingValueField: 'skuCode',
+      otherParams: {
+        'qp-approveStatus-eq':2,
+        sorter: 'desc-id'
+      }, // 默认参数
+      sourceName: 'skuCode',
+    }
+    tableSearchForm = [
+      { name: 'qp-name-like', label: 'SKU名称' },
+      { name: 'qp-skuCode-like', label: 'SKU编码' },
+      { name: 'qp-barCode-like', label: '条形码' },
+      { name: 'qp-itemName-like', label: '所属SPU名称' },
+      { name: 'qp-itemCode-like', label: '所属SPU编码' },
+      { name: 'qp-brandId-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,
+          },
+        } },
+      { name: 'qp-categoryId-in', type: 'treeSelect', label: '类目', field: {
+          type: 'treeSelect',
+          props: {
+            treeData: [],
+            treeCheckable: true,
+            showSearch: true,
+            allowClear: true,
+            showArrow: true,
+            treeNodeFilterProp: 'title',
+            treeDefaultExpandAll: true,
+            maxTagCount: 1,
+            placeholder: '请选择',
+            style: {
+              width: '100%',
+            },
+            dropdownStyle: { maxHeight: 400, maxWidth: 100, overflow: 'auto' }
+          },
+        } },
+      { name: 'qp-classId-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,
+          },
+        } },
+    ]
+    Promise.all([
+      loadSelectSource(`${prefixUrl.formSelectFix}/brand/queryBrandList`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/category/queryCategoryTree`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+      loadSelectSource(`${prefixUrl.formSelectFix}/class/withProperty`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+    ]).then((x: any)=>{
+      formatSource(x,0, 5, tableSearchForm,['id','name']);
+      formatTreeDataSource(x,1, 6, tableSearchForm);
+      formatSource(x,2, 7, tableSearchForm,['id','name']);
+    })
+    modalTableProps = {
+      modalTableTitle: '选择SKU',
+      tableSearchForm,
+      tableColumns: [
+        {
+          title: 'SKU编码',
+          dataIndex: 'skuCode',
+        },
+        {
+          title: 'SKU名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '所属SPU',
+          dataIndex: 'itemName',
+        },
+        {
+          title: '规格',
+          dataIndex: 'skuSpec',
+        },
+        {
+          title: '类目',
+          dataIndex: 'categoryName',
+        },
+        {
+          title: '品类',
+          dataIndex: 'className',
+        },
+        {
+          title: '品牌',
+          dataIndex: 'brandName',
+        },
+        {
+          title: '条形码',
+          dataIndex: 'barCode',
+        },
+      ]
+    }
   }
 
   // 仓库选择器
@@ -260,5 +350,6 @@ export function commonFun (type?: string) {
 
   }
 
+  console.log(requestConfig, 'requestConfig')
   return { modalTableProps, requestConfig };
 }

package/src/components/SearchSelect/business/index.md

@@ -5,13 +5,13 @@ nav:
 group:
   title: 业务组件
   order: 4
-title: 供应商选择器
+title: 业务档案选择器
 order: 0
 ---
 
 ## BusinessSearchSelect
 
-Demo:
+供应商选择器 Select-GYS-001:
 
 ```tsx
 import React, { useState } from 'react';
@@ -36,6 +36,7 @@ export default () => {
     //   mappingTextField: 'name',
     //   mappingValueField: 'code',
     // },   // 非必传，业务字段已根据业务默认默认
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' }, // 非必传，下拉框和tableForm下拉框接口前缀，默认为bop的接口
     selectProps, // 非必传
     onChange: (value: any) => {
       console.log(value)
@@ -52,4 +53,44 @@ export default () => {
 };
 ```
 
+
+商品选择器 Select-SKU-001:
+
+```tsx
+import React, { useState } from 'react';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    requestConfig: {
+      url: `/bop/api/sku`,
+      filter: 'qp-nameAndCode-like',
+      mappingValueField: 'skuCode',
+      otherParams: {
+        sorter: 'desc-id'
+      }, // 默认参数
+      sourceName: 'skuCode',
+    },
+    selectProps,
+    selectBusinessType: 'skuCommodity',
+  };
+  
+  return (
+    <div>
+      <BusinessSearchSelect {...props} />
+    </div>
+  );
+};
+```
 More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/SearchSelect/index.less

@@ -67,7 +67,7 @@
       //background-color: green;
     }
 
-    &_right, _right1 {
+    &_right, &_right1 {
       overflow-x: auto;
     }
 

package/src/components/SearchSelect/index.md

@@ -28,10 +28,10 @@ export default () => {
     // labelInValue: true, // 非必填 默认为false
     requestConfig: {
       url: `http://test.i-baby.net/bop/api/supplier`,
-      filter: 'qp-name-like', // 过滤参数
+      filter: 'qp-name-like', // 过滤参数 支持'qp-name-like'和['qp-name-like', 'qp-code-like']两种结构
       otherParams: {}, // 默认参数
-      mappingTextField: 'name',
-      mappingValueField: 'code',
+      // mappingTextField: 'name',
+      // mappingValueField: 'code',
     },
     selectProps,
     onChange: (value: any) => {

package/src/components/SearchSelect/index.tsx

@@ -1,7 +1,7 @@
 // @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 { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { stringify } from 'querystring';
@@ -20,6 +20,7 @@ const SearchSelect = (props: any) => {
     requestConfig,
     ctx,
   } = props;
+  const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingValueField='code', sourceName='supplierCode' } = requestConfig || {};
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
   const initVal = value || (selectMode ? [] : null);
@@ -47,8 +48,18 @@ const SearchSelect = (props: any) => {
   const [popvalue, setPopValue] = useState(initVal);
   const { run } = useDebounceFn(
     () => {
+      // 优化搜索参数 支持传多个
+      let searchParams = {};
+      if(typeof selectParamsKey === 'string') {
+        searchParams = { [selectParamsKey]: searchValue }
+      }
+      if(Array.isArray(selectParamsKey)) {
+        selectParamsKey.forEach((i: any) => {
+          searchParams = { ...searchParams, [i]: searchValue }
+        })
+      }
       // 防抖函数  待定
-      getData({ [selectParamsKey]: searchValue })
+      getData(searchParams)
     },
     {
       wait: 1000,
@@ -69,15 +80,14 @@ const SearchSelect = (props: any) => {
   // 获取数据源 （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 (fixedparameter && fieldValToParam && ctx) {
+      fixedparameter.forEach((item: any, index: any) => {
+        const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
         if (fixedParamVal) {
           fixedParam[item] = fixedParamVal;
         }
@@ -90,7 +100,6 @@ const SearchSelect = (props: any) => {
       ...otherParams, // 默认参数
       ...fixedParam,
       ...params,
-      sorter: 'desc-createTime'
     }
 
     axios
@@ -118,31 +127,24 @@ const SearchSelect = (props: any) => {
               ? res[keys].map((item: any) => {
                 return {
                   ...item,
-                  text: requestConfig.splicing
-                    ? `${item[requestConfig?.mappingValueField]}-${
-                      item[requestConfig.mappingTextField]
-                    }`
-                    : item[requestConfig?.mappingTextField],
-                  value: item[requestConfig.mappingValueField],
+                  text: item[mappingTextField],
+                  value: item[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],
+                  text: item[mappingTextField],
+                  value: item[mappingValueField],
                 };
               })
             : [];
         }
         source = Array.isArray(source) ? source : []
         if(type === 1) {
-          ctx?.form?.setFieldSource('supplierCode', source)
+          console.log(sourceName, 'sourceName')
+          ctx?.form?.setFieldSource(sourceName, source)
           setItems(source)
           setItemsTotal(Number(res?.total))
         } else {
@@ -192,8 +194,8 @@ const SearchSelect = (props: any) => {
         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 }]);
+        setSelectedRows(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }])
+        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
       }
     }
   };
@@ -240,7 +242,8 @@ const SearchSelect = (props: any) => {
   }
 
   const handleTableChange = (pagination) => {
-    getData({ pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
+    const params = form.getFieldsValue();
+    getData({ ...params, pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
   }
 
   const onChangeCheckAll = (e) => {
@@ -365,6 +368,14 @@ const SearchSelect = (props: 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>
+            </Form.Item>
+          )
+        }
+
         // 默认type是input
         return (
           <Form.Item name={i.name} label={i.label} key={i.name}>
@@ -437,7 +448,12 @@ const SearchSelect = (props: any) => {
           <Button key="back" onClick={handleCancel}>
             取消
           </Button>,
-          <Button key="submit" type="primary" onClick={handleOk} disabled={selectProps?.disabled || props?.disabled}>
+          <Button
+            key="submit"
+            type="primary"
+            onClick={handleOk}
+            disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
+          >
             确定
           </Button>,
         ]}
@@ -464,7 +480,7 @@ const SearchSelect = (props: any) => {
             <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 style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}>{selectMode ? '勾选后点击确定按钮完成选择' : '双击数据行或点击单选图标完成选择'}</div>
               </div>
               <Table
                 size='small'
@@ -473,7 +489,7 @@ const SearchSelect = (props: any) => {
                 dataSource={tableData}
                 pagination={tablePagination}
                 onChange={handleTableChange}
-                rowKey='code'
+                rowKey={mappingValueField}
                 scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
                 onRow={record => {
                   return {