@bit-sun/business-component 1.1.1 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "1.1.1",
+  "version": "1.1.5",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -32,6 +32,7 @@
     "axios": "^0.24.0",
     "classnames": "^2.3.1",
     "loadsh": "^0.0.4",
+    "querystring": "^0.2.1",
     "react": "^16.12.0",
     "react-beautiful-dnd": "10.0.0"
   },
@@ -46,4 +47,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/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.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,138 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 组件
+  order: 0
+title: 档案选择器
+order: 2
+---
+
+## SearchSelect
+
+Demo:
+
+```tsx
+import React, { useState } from 'react';
+import { SearchSelect } from '@bit-sun/business-component';
+
+export default () => {
+  const selectProps = {
+      // 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-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)
+      },
+    ]
+  }
+  
+  return (
+    <div>
+      <SearchSelect
+        {...props}
+        modalTableProps={modalTableProps}
+      />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle