@bit-sun/business-component 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/SearchSelect/business/BusinessSearchSelect.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { commonFun } from './BusinessUtils';
+import SearchSelect from '../index';
+
+
+const  BusinessSearchSelect = (props: any) => {
+  const businessType = props?.SelectBusinessType || 'supplier';
+
+  const { requestConfig, modalTableProps } = commonFun(businessType);
+
+  const currentProps = {
+    requestConfig,
+    ...props,
+    modalTableProps
+  }
+
+  return (
+    <div>
+      <SearchSelect {...currentProps} />
+    </div>
+  );
+};
+
+export default BusinessSearchSelect;

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

@@ -0,0 +1,264 @@
+// 此文件用于 处理业务组件 所用到的公共方法
+// @ts-nocheck
+import axios from 'axios';
+import { message } from 'antd';
+import { stringify } from 'querystring';
+
+const getDicData = (dicCode: string) => {
+  let dicData = {};
+  let dictionaryData;
+  if (!dictionaryData) {
+    let storageDic = localStorage.getItem('dicData')
+      ? JSON.parse(localStorage.getItem('dicData') || '{}')
+      : {};
+    dicData = storageDic[dicCode];
+  } else {
+    dicData = dictionaryData[dicCode];
+  }
+  if (!dicData || !dicData.length) {
+    // throw new Error(`当前没有${dicCode}字典值`);
+  }
+  return dicData
+}
+
+const getDictionarySource = (dicCode: string, needConvertInterger = false) => {
+  let dicData = getDicData(dicCode);
+
+  try {
+    if (needConvertInterger) {
+      dicData = dicData.map((item: { text: string; value: string }) => ({
+        ...item,
+        value: parseFloat(item.value),
+      }));
+    }
+  } catch (e) {}
+  return dicData;
+};
+
+const getDictionaryTextByValue = (dicCode: string, value: string | number) => {
+  let dicData = getDicData(dicCode);
+
+  if (value === undefined) return '';
+
+  const dicItemArray = dicData?.filter(
+    (item: { value: string }) => item.value === value.toString(),
+  );
+
+  if (!dicItemArray?.length) {
+    // throw new Error(`当前${dicCode}字典值合没有${value}的数据`)
+    return value;
+  }
+
+  return dicItemArray[0].text;
+};
+
+const loadSelectSource = (url: string, params?: any) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .get(`${url}?${stringify(params)}`)
+      .then((result: any) => {
+        result = result.data;
+        if (result.status !== '0') {
+          message.error(result.msg);
+          return;
+        }
+        resolve(result);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  })
+};
+
+export function commonFun (type?: string) {
+  // 默认type === 'supplier' 供应商选择器
+  let requestConfig = {
+    url: `/bop/api/supplier`,
+    filter: 'qp-codeAndName-like', // 过滤参数
+    otherParams: {}, // 默认参数
+    mappingTextField: 'name',
+    mappingValueField: 'code',
+  }
+
+  /*
+  * 处理 格式化下拉框数据源
+  * reData 必传 promise返回响应的数据 格式为[{},{},{},...] Promise.all第一个参数数组有多少个数组长度就是多少，其中每个对象为每次请求的结果数据
+  *         每个结果数据格式为{ status: '0', msg: 'success', data: { items: [], total: 1, size: 1, page: 1 }, traceId: 'baba..'}
+  * position  必传 为获取Promise.all请求结果的位置
+  * 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 })) : [];
+    changeSearchForm[changePosition] = {...changeSearchForm[changePosition], initialSource: formatData}
+  }
+
+  let tableSearchForm: any [] = [];
+  if(type === 'supplier') {
+    tableSearchForm = [
+      { name: 'qp-name-like', label: '客户名称' }, // field: { type: 'input', props: { placeholder: '请输入'}}
+      { 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,
+          },
+        },
+        // 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: {
+            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,
+          },
+        },
+        // 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: {
+            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,
+          },
+        },
+        // 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', {
+        pageSize: 5000,
+        currentPage: 1,
+        'qp-companyType-eq': '30',
+      }),
+      loadSelectSource('/bop/api/accountingSubject', {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+      loadSelectSource('/bop/api/company', {
+        pageSize: 5000,
+        currentPage: 1,
+        'qp-companyType-eq': '20',
+      })
+    ]).then((x: any)=>{
+      formatSource(x,0, 2, tableSearchForm);
+      formatSource(x,1, 3, tableSearchForm);
+      formatSource(x,2, 4, tableSearchForm);
+    })
+  }
+  let modalTableProps = {
+    modalTableTitle: '选择供应商',
+    tableSearchForm,
+    tableColumns: [
+      {
+        title: '客户编码',
+        dataIndex: 'code',
+      },
+      {
+        title: '客户名称',
+        dataIndex: 'name',
+      },
+      {
+        title: '归属集团',
+        dataIndex: 'conglomerateName',
+      },
+      {
+        title: '归属法人公司',
+        dataIndex: 'legalCompanyName',
+      },
+      {
+        title: '归属核算主体',
+        dataIndex: 'accountingName',
+      },
+      {
+        title: '共享类型',
+        dataIndex: 'sharingType',
+        render: (text: number) => getDictionaryTextByValue('UC000013', text),
+      },
+    ]
+  }
+
+  // 商品选择器
+  if(type === 'commodity') {
+
+  }
+
+  // 仓库选择器
+  if(type === 'warehouse') {
+
+  }
+
+  return { modalTableProps, requestConfig };
+}

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

@@ -0,0 +1,55 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 4
+title: 供应商选择器
+order: 0
+---
+
+## BusinessSearchSelect
+
+Demo:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessSearchSelect } from '@bit-sun/business-component';
+
+export default () => {
+  // selectBusinessType 必传（不传默认为供应商选择器）
+  
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    // requestConfig: {
+    //   url: `http://test.i-baby.net/bop/api/supplier`,
+    //   filter: 'qp-name-like', // 过滤参数
+    //   otherParams: {}, // 默认参数
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    // },   // 非必传，业务字段已根据业务默认默认
+    selectProps, // 非必传
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    selectBusinessType: 'supplier',
+  };
+  
+  return (
+    <div>
+      <BusinessSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/SearchSelect/index.md

@@ -14,20 +14,36 @@ order: 2
 Demo:
 
 ```tsx
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
 import { SearchSelect } from '@bit-sun/business-component';
 
 export default () => {
   const selectProps = {
-    mode: 'multiple',
-    maxTagCount: 1,
+      // mode: 'multiple',
+      // maxTagCount: 1,
   }
-  
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  const props = {
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    requestConfig: {
+      url: `http://test.i-baby.net/bop/api/supplier`,
+      filter: 'qp-name-like', // 过滤参数
+      otherParams: {}, // 默认参数
+      mappingTextField: 'name',
+      mappingValueField: 'code',
+    },
+    selectProps,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    }
+  };
   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-name-like', label: '客户名称' }, // field: { type: 'input', props: { placeholder: '8888'}}
       { name: 'qp-code-like', label: '客户编码' },
       { name: 'qp-conglomerateCode-in', type: 'select', label: '归属集团', field: {
           type: 'select',
@@ -108,19 +124,11 @@ export default () => {
     ]
   }
   
-  const onValueChange = (value) => {
-    console.log(value)
-  }
-  
   return (
     <div>
       <SearchSelect
-        // initValue={{value: '20220105001', label: 'LH公司'}} // 单选
-        // initValue={[{value: '20220105001', label: 'LH公司'}]} // 多选
-        selectProps={selectProps}
+        {...props}
         modalTableProps={modalTableProps}
-        selectDataUrl='http://test.i-baby.net/bop/api/supplier'
-        onValueChange={onValueChange}
       />
     </div>
   );