@bit-sun/business-component 3.1.9 → 3.2.0-alpha.1

package/src/components/Solution/RuleComponent/CustomPlugin/CustomSelector/function.js

@@ -0,0 +1,255 @@
+import { request } from 'umi';
+import _ from 'lodash';
+import { handleRequestHeader } from '../../../../../utils/requestUtils';
+import { handleConvertResponse, judgeIsEmpty } from '../../../../../utils/utils';
+import { formatListName } from './helps';
+/**
+ * 删掉查询条件的qp- 和 -eq等
+ * @param {object} data
+ * @return {object}
+ * */
+export function deleteQuerySymbol(data) {
+  const result = {};
+
+  Object.keys(data).map((item) => {
+    const newKey = deleteQuerySymbolSingle(item);
+    result[newKey] = data[item];
+  });
+
+  return result;
+}
+
+export function deleteQuerySymbolSingle(key) {
+  return key.replace(/(qp-|-\w+)/g, '');
+}
+
+// 把{G1001F1001:123} 换成 {G1001:{F1001: 123}}
+export function convertToMapByKey(data) {
+  const result = {};
+
+  Object.keys(data).map((item) => {
+    const groupCode = item.match(/G\d+/);
+    const fieldCode = item.match(/F\d+/);
+    if (groupCode?.length > 0 && fieldCode?.length > 0) {
+      if (result[groupCode]) {
+        result[groupCode][fieldCode] = data[item];
+      } else if (!result[groupCode]) {
+        result[groupCode] = {
+          [fieldCode]: data[item],
+        };
+      }
+    }
+  });
+  return result;
+}
+
+/**
+ * 去掉查询表格的qp- -eq -in，与普通表格一样的格式
+ * @param{string} prop 键
+ * @param{boolean} flag 是不是查询表格
+ * */
+export function convertProp(prop, flag) {
+  return flag
+    ? prop
+        ?.replace(/(G\d+)/, '')
+        ?.replace('qp-', '')
+        ?.replace('-eq', '')
+        ?.replace('-in', '')
+        ?.replace('-like', '')
+    : prop;
+}
+// 获取元数据，是表格中列的数据来源
+export async function getMetaData(id) {
+  return new Promise((resolve, reject) => {
+    request('/basic/entityProperty/listNoPage', {
+      params: {
+        'qp-entityId-eq': id,
+      },
+    })
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((error) => {
+        console.log(error, 'error');
+        reject([]);
+      });
+  });
+}
+
+// 获取数据
+export const remoteFetch = (requestConfig,coloumns) => {
+  return {
+    url: '/basic/function/sendRequest',
+    method: 'post',
+    convertParams({ params }) {
+      const { sorter, ...paramsTemp } = params;
+
+      const queryParams = {
+        ...requestConfig.params,
+        ...requestConfig.body,
+        ..._.omit(paramsTemp, ['filters', 'current']),
+        ...(paramsTemp?.filters || {}),
+        ...{ currentPage: paramsTemp?.currentPage || paramsTemp.current || 1 },
+      };
+
+      // 清除值为空的
+      Object.keys(queryParams).forEach((itemKey) => {
+        if (judgeIsEmpty(queryParams[itemKey])) {
+          delete queryParams[itemKey];
+        }
+      });
+
+      return {
+        path: requestConfig.url,
+        httpMethod: requestConfig?.method?.toUpperCase(),
+        serviceName: requestConfig.serviceName,
+        requestBody: JSON.stringify(queryParams),
+        header: handleRequestHeader().headers,
+      };
+    },
+    converter({ data }) {
+      return {
+        ...handleConvertResponse(handleList(data,coloumns), handleListToTal(data)),
+      };
+    },
+  };
+};
+
+// 值类型
+export function handleValueType(value, valueType) {
+  if (valueType === 20) {
+    return Number(value);
+  } else {
+    return value + '';
+  }
+}
+
+export function handleList(data, coloumns) {
+  const resultList =  Array.isArray(data)? data: Array.isArray(data?.list)
+  ? data.list : Array.isArray(data?.items) ? data.items: []
+  return formatListName(resultList,coloumns);
+}
+export function handleListToTal(data) {
+  return Array.isArray(data) ? data.length : data.total || data.totalCount;
+}
+
+// 路径
+export function convertPath(path, formData) {
+  const matchedGF = path.match(/G\d+F\d+/g);
+  const matchedJavaCode = path.match(/{\w+\.\w+}/g);
+  let url = path;
+  if (!matchedGF && !matchedJavaCode) return url;
+  if (matchedGF?.length) {
+    matchedGF.map((item) => {
+      const group = item.match(/G\d+/);
+      const field = item.match(/F\d+/);
+      const replaceValue = formData?.[group]?.[field] || formData?.[field];
+      url = url.replace(item, replaceValue);
+    });
+  } else if (matchedJavaCode?.length) {
+    matchedJavaCode.map((item) => {
+      let group, field;
+      try {
+        const val = item.replace(/[{}]/g, '').split('.');
+        group = val[0];
+        field = val[1];
+      } catch (e) {}
+      if (group && field) {
+        const replaceValue = formData?.[group]?.[field] || formData?.[field];
+        url = url.replace(item, replaceValue);
+      }
+    });
+  }
+  return url;
+}
+
+// 组装数据接口请求
+export function assembleRequest(
+  customSelectorConfig,
+  { isSearchForm, newestFormData, searchFormData },
+) {
+  const functionInfo =
+    customSelectorConfig?.businessFunction?.functionInfo?.actionList?.[0];
+  const requestTemplate = functionInfo?.requestTemplate;
+  if (!functionInfo || !requestTemplate) {
+    return false;
+  }
+  const isGet = requestTemplate.method.toLowerCase() === 'get';
+  const requestBodyName = isGet ? 'params' : 'data';
+  let params = requestTemplate.param;
+  try {
+    params = JSON.parse(requestTemplate.param);
+  } catch (e) {}
+  let path = requestTemplate.path;
+
+  let requestBody = isGet ? params : requestTemplate.requestBody;
+
+  if (!isSearchForm) {
+    // 非查询表格，普通表格的数据组装
+    path = convertPath(requestTemplate.path, newestFormData);
+    requestBody = convertBody(requestBody, newestFormData);
+  } else if (isSearchForm) {
+    // 查询表格数据组装，key会带有qp-  和 -eq，并且转换成map的数据格式
+    const newSearchFormData = convertToMapByKey(
+      deleteQuerySymbol(searchFormData),
+    );
+    path = convertPath(requestTemplate.path, newSearchFormData);
+    requestBody = convertBody(requestBody, newSearchFormData);
+  }
+  const requestConfig = {
+    url: path,
+    method: requestTemplate.method,
+    headers: requestTemplate.header,
+    [requestBodyName]: requestBody,
+    serviceName: functionInfo.serviceName || requestTemplate?.serviceName,
+  };
+  return requestConfig;
+}
+
+// 请求体
+function convertBody(param, formData) {
+  const keys = Object.keys(param || {});
+  if (!keys.length) return {};
+  const result = {};
+  keys.map((key) => {
+    const matchedGF = param[key].match(/G\d+F\d+/)?.[0];
+    const matchedJavaCode = param[key].match(/{\w+\.\w+}/)?.[0];
+    if (matchedGF) {
+      const group = matchedGF.match(/G\d+/);
+      const field = matchedGF.match(/F\d+/);
+      // 有值才赋值 【当formData中的值key是GxxxFxxx形式时】
+      if (formData?.[group]?.[field] && formData[group][field] !== '') {
+        if (Array.isArray(formData[group][field])) {
+          result[key] = formData[group][field].join(',');
+        } else {
+          result[key] = formData[group][field];
+        }
+      }
+      // 有值才赋值 【当formData中的值key是Fxxx形式时】
+      if (formData?.[field] && formData[field] !== '') {
+        if (Array.isArray(formData[field])) {
+          result[key] = formData[field].join(',');
+        } else {
+          result[key] = formData[field];
+        }
+      }
+    } else if (matchedJavaCode) {
+      let group, field;
+      try {
+        [group, field] = matchedJavaCode.replace(/[{}]/g).split('.');
+      } catch (e) {}
+      if (formData?.[group]?.[field] && formData[group][field] !== '') {
+        if (Array.isArray(formData[group][field])) {
+          result[key] = formData[group][field].join(',');
+        } else {
+          result[key] = formData[group][field];
+        }
+      }
+    } else {
+      if (param[key] !== '') {
+        result[key] = param[key];
+      }
+    }
+  });
+  return result;
+}

package/src/components/Solution/RuleComponent/CustomPlugin/CustomSelector/helps.tsx

@@ -0,0 +1,58 @@
+import { getDictionarySource } from '../../../../../utils/utils';
+
+// 处理表头
+export const getColumnItem= ({item}: any) => {
+    const ites: any = {
+        title: item.name,
+        key: item.code,
+        render: ({text, record}: any) => {
+          const showText = record?.[`${item.code}_Name`] || text
+          return showText;
+        }
+      }
+
+    // 处理列展示类型基础数据
+    if(item.choiceType == 20) {
+        // 数据字典
+        let dictionaryCode;
+        try {
+            if (JSON.parse(item.info||'{}').dictionaryCode) {
+            dictionaryCode = JSON.parse(item.info||'{}').dictionaryCode;
+            }
+        } catch (e) {
+            console.log('error', e);
+        }
+        ites.sourceList = dictionaryCode && getDictionarySource(dictionaryCode)||[]
+    }
+    if(item.choiceType == 10) {
+        // 自定义枚举值
+        let enumeration: any;
+        try {
+            if (JSON.parse(item.info||'{}').enumeration) {
+                enumeration = JSON.parse(item.info||'{}').enumeration;
+            }
+        } catch (e) {
+            console.log('error', e);
+        }
+        ites.sourceList = enumeration && Object.keys(enumeration).map((key) => ({ value: key, text: enumeration[key] }))||[]
+    }
+
+    return ites
+}
+
+export const formatListName = (list: any, columns: any) => {
+    if(!list?.length) return [];
+    if(!columns?.length) return list; // 下拉框无需格式化
+
+    return list.map((item: any) => {
+        let resultItem = {...item};
+        // 弹窗table编码展示名称
+        const column = columns.filter((col: any) => Object.keys(item)?.includes(col.key) && col?.sourceList?.length)||[];
+        Array.isArray(column) && column?.length && column.forEach(element => {
+            if(element?.sourceList) {
+                resultItem[`${element.key}_Name`] = element?.sourceList.find((source: any) => source.value == item[element.key])?.text;
+            }
+        });
+        return resultItem
+    })
+}

package/src/components/Solution/RuleComponent/CustomPlugin/CustomSelector/index.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Select } from 'antd';
+import CustomSelectorModal from './CustomSelectorModal';
+// @ts-ignore
+import { convertProp } from './function';
+import { noEmptyArray } from '../../../../../utils/utils';
+import React from 'react';
+
+export default (props: any) => {
+  const showType = useMemo(() => {
+    return props?.customSelectorConfig?.extraData?.showType || 'modalTable';
+  }, [props]);
+
+  const [modalConfig, setModalConfig] = useState({
+    visible: false,
+    onShow: () => {
+      setModalConfig({
+        ...modalConfig,
+        visible: true,
+      });
+    },
+    onCancel: () => {
+      setModalConfig({
+        ...modalConfig,
+        visible: false,
+      });
+    },
+  });
+
+  const [fieldSource, setFieldSource] = useState([]);
+  const [allListData, setAllListData] = useState([]);
+
+  const customRef = useRef();
+  const prop = convertProp(props?.ctx?.name, props.isSearchForm);
+  const fieldMapping = props.customSelectorConfig?.fieldMapping || [];
+  const fieldMappingItem = fieldMapping.find(
+    (item: any) => item.codeMappingTo === prop,
+  );
+  const echoLabel = props.customSelectorConfig?.extraData?.echoLabel;
+
+  useEffect(() => {
+    if (props.source && noEmptyArray(props.source)) {
+      const source = props?.source || [];
+      if (source?.[0] === true) {
+        //@ts-ignore
+        customRef?.current?.refreshSelectSource();
+      } else if (source?.[0] === false) {
+        //@ts-ignore
+        customRef?.current?.refreshSelectSource(true);
+      }
+    }
+  }, [props.source]);
+
+  const setFieldValue = (key: string, value: any,sourceList?: any) => {
+    props?.ctx?.form?.setFieldValue?.(key, value);
+    props?.onChange?.(value,sourceList)
+  };
+
+  const onChange = (value: any) => {
+    if (!value) return;
+    const dataItem =
+      allListData.filter((item) =>
+        Array.isArray(value)
+          ? value.includes(
+              item?.[fieldMappingItem?.codeMappingFrom || echoLabel],
+            )
+          : item?.[fieldMappingItem?.codeMappingFrom || echoLabel] == value,
+      ) || [];
+    if (showType === 'modalTable') {
+      const rowData = props?.selectProps?.multipleForQuery
+        ? dataItem
+        : dataItem?.[0] || {};
+      //@ts-ignore
+      customRef?.current?.handleOk(rowData, false);
+    } else {
+      setFieldValue(props.ctx?.name, value,fieldSource);
+    }
+  };
+
+  const multipleForQuery = props?.selectProps?.multipleForQuery;
+  const isView = props?.ctx?.mode == 'view'
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <Select
+        {...props?.selectProps}
+        showSearch={true}
+        optionFilterProp={'label'}
+        placeholder="请选择"
+        onChange={onChange}
+        options={fieldSource}
+        value={(!props?.ctx?.form && props?.value) || props?.ctx?.form?.getFieldValue(props.id)}
+        disabled={isView || props.disabled}
+        mode={multipleForQuery ? 'multiple' : undefined}
+        allowClear={props?.allowClear}
+        onClear={() => setFieldValue(props.ctx?.name, multipleForQuery?[]:'',fieldSource)}
+      />
+      {showType === 'modalTable' && (
+        <Button
+          type="primary"
+          style={{
+            width: '30px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          onClick={() => {
+            modalConfig.onShow();
+          }}
+          disabled={props.disabled}
+        >
+          <SearchOutlined className="site-form-item-icon" />
+        </Button>
+      )}
+      <CustomSelectorModal
+        ref={customRef}
+        {...modalConfig}
+        {...props}
+        showType={showType}
+        fieldSource={fieldSource}
+        setFieldSource={setFieldSource}
+        setFieldValue={setFieldValue}
+        setAllListData={setAllListData}
+        ismultiple={multipleForQuery}
+      ></CustomSelectorModal>
+    </div>
+  );
+};

package/src/components/Solution/RuleComponent/RenderCompItem.tsx

@@ -12,6 +12,7 @@ import {
   fullDateFormat
 } from './util';
 import InnerSelect from './InnerSelect';
+import CustomSelector from './CustomPlugin/CustomSelector';
 const { RangePicker } = DatePicker;
 export default function RenderCompItem(props:any){
     const { regularDataList,ites, showValue, handleEdit,disabled } = props;
@@ -684,6 +685,33 @@ export default function RenderCompItem(props:any){
             />
           )) ||
           null}
+        {/* 单选/多选  自定义选择器  */}
+        {((ites?.inputType === 20 || ites?.inputType === 30) &&
+          ites?.choiceType === 40 && (
+            <CustomSelector
+              selectProps={{
+                style: styleCommon,
+                placeholder: '请选择',
+                ...(ites?.inputType === 30
+                  ? {
+                    mode: 'multiple',
+                    maxTagCount: 1,
+                    multipleForQuery: true
+                  }
+                  : {}),
+                getPopupContainer: () => document.body,
+              }}
+              ctx={ { name: ites.code }}
+              isSearchForm={true}
+              customSelectorConfig={others?.customSelectorConfig || {}}
+              disabled={disabled}
+              value={showValue(ites.code)}
+              onChange={(value) => {
+                handleEdit(ites.code, value);
+              }}
+            />
+          )) ||
+          null}
         {/* 表达式 */}
         {ites?.inputType === 40 && (
           <div style={{ display: 'flex' }}>

package/src/components/Solution/RuleComponent/index.js

@@ -153,6 +153,9 @@ class RuleObjectComponent extends Component {
                   dataChoiceBusinessType: element.choiceType,
                   dataInputBusinessType: element.inputType,
                   info: element.info,
+                  otherMainInfo: {
+                    customSelectorConfig: element.customSelectorConfig
+                  }
                 };
                 if (element?.propertyList?.length) {
                   child.children = this.parseChildTreeData(
@@ -224,6 +227,9 @@ class RuleObjectComponent extends Component {
         dataChoiceBusinessType: element.choiceType,
         dataInputBusinessType: element.inputType,
         info: element.info,
+        otherMainInfo: {
+          customSelectorConfig: element.customSelectorConfig
+        }
       };
       if (element.propertyList) {
         child.children = this.parseChildTreeData(
@@ -751,6 +757,8 @@ class RuleObjectComponent extends Component {
             <div style={{ display: 'flex', alignItems: 'center' }}>
             {/* todo */}
               <TreeSelect
+                showSearch
+                treeNodeFilterProp="title"
                 value={itemDetail.elementId}
                 disabled={disabled}
                 onChange={(value, name, nodeInfo) => {
@@ -819,6 +827,7 @@ class RuleObjectComponent extends Component {
                   propertyCode={getPropertyCode(itemDetail.propertyPath)}
                   // propertyCode={`${itemDetail.metaObjectCode}.${itemDetail.propertyPath}`}
                   relateDatas={relateDatas}
+                  others={currentTreeItem?.otherMainInfo}
                   values={itemDetail.params || []}
                   valueNames={itemDetail.paramNames || []}
                   callback={(newValues, newValueNames) => {
@@ -1521,13 +1530,13 @@ class RuleObjectComponent extends Component {
         <div className={'base_rule_content'}>
           {headerButtonComponentFun?headerButtonComponentFun(this.handleAddRule): (
             <div
-              disabled={disabled}
               style={{
                 display: onlyOneRule ? 'none' : 'block',
               }}
               className={'base_rule_line_title'}
             >
               <Button
+                disabled={disabled}
                 onClick={this.handleAddRule}
                 className={'base_rule_btn_style'}
                 type="link"

package/src/components/Solution/RuleComponent/ruleFiled.js

@@ -13,6 +13,7 @@ import {
   BusinessTreeSearchSelect,
   BsCascader
 } from '../../../index';
+import CustomSelector from './CustomPlugin/CustomSelector';
 const { RangePicker } = DatePicker;
 
 export default class RuleField extends Component {
@@ -23,6 +24,7 @@ export default class RuleField extends Component {
       dataTypeCode: '',
       dataChoiceBusinessType: '',
       dataInputBusinessType: '',
+      others: {},
       fieldValues: [],
       thresholdQuery: {},
       thresholdList: [],
@@ -36,6 +38,7 @@ export default class RuleField extends Component {
       dataTypeCode,
       dataChoiceBusinessType,
       dataInputBusinessType,
+      others,
       options,
       values,
       initialThresholdQuery,
@@ -54,6 +57,7 @@ export default class RuleField extends Component {
         dataTypeCode,
         dataChoiceBusinessType,
         dataInputBusinessType,
+        others,
         fieldValues: [...values],
         options,
       },
@@ -114,6 +118,11 @@ export default class RuleField extends Component {
         dataInputBusinessType: nextProps.dataInputBusinessType,
       });
     }
+    if (nextProps.others != this.props.others) {
+      this.setState({
+        others: nextProps.others,
+      });
+    }
     // if (nextProps.selectOperation != this.props.selectOperation) {
     //     this.setState({
     //         options: nextProps.options
@@ -271,6 +280,9 @@ export default class RuleField extends Component {
       queryIdentify,
       disabled,
       customerWidth,
+      itemDetail={},
+      others={}, 
+      propertyCode,
     } = this.props;
     const { thresholdList } = this.state;
     const styleCommon = {
@@ -2307,6 +2319,112 @@ export default class RuleField extends Component {
           );
         }
       }
+      // 自定义选择器
+      if (dataChoiceBusinessType == 40) {
+        if (INTERVAL_TYPE.indexOf(selectOperation) > -1) {
+          return (
+            <>
+              <CustomSelector
+                selectProps={{
+                  style: styleCommon,
+                  placeholder: '请选择',
+                  ...(dataInputBusinessType === 12
+                    ? {
+                      mode: 'multiple',
+                      maxTagCount: 1,
+                      multipleForQuery: true
+                    }
+                    : {}),
+                  getPopupContainer: () => document.body,
+                }}
+                ctx={ {name: propertyCode || itemDetail?.propertyPath }}
+                isSearchForm={true}
+                customSelectorConfig={others?.customSelectorConfig || {}}
+                disabled={disabled}
+                value={values[0]}
+                onChange={(value,sourceList) => {
+                  if (dataInputBusinessType === 12) {
+                    values[0] = value?.map?.((i) => i)||[];
+                    valueNames[0] = sourceList?.filter(s => s.value == value)?.map(i=> i.label || '')||[];
+                  } else {
+                    const vLabel = sourceList?.find(s => s.value == value)?.label
+                    values[0] = value?[value]:[];
+                    valueNames[0] = vLabel?[vLabel]:[];
+                  }
+                  callback(values, valueNames);
+                }}
+              />
+              <span>~</span>
+              <CustomSelector
+                selectProps={{
+                  style: styleCommon,
+                  placeholder: '请选择',
+                  ...(dataInputBusinessType === 12
+                    ? {
+                      mode: 'multiple',
+                      maxTagCount: 1,
+                      multipleForQuery: true
+                    }
+                    : {}),
+                  getPopupContainer: () => document.body,
+                }}
+                ctx={ {name: propertyCode || itemDetail?.propertyPath }}
+                isSearchForm={true}
+                customSelectorConfig={others?.customSelectorConfig || {}}
+                disabled={disabled}
+                value={values[1]}
+                onChange={(value,sourceList) => {
+                  if (dataInputBusinessType === 12) {
+                    values[1] = value?.map?.((i) => i)||[];
+                    valueNames[1] = sourceList?.filter(s => s.value == value)?.map(i=> i.label || '')||[];
+                  } else {
+                    const vLabel = sourceList?.find(s => s.value == value)?.label
+                    values[1] = value?[value]:[];
+                    valueNames[1] = vLabel?[vLabel]:[];
+                  }
+                  callback(values, valueNames);
+                }}
+              />
+            </>
+          );
+        } else {
+          const currentValue = dataInputBusinessType === 12 ?
+            values?.map((s,vIndex)=> ({key: s, label: valueNames[vIndex]}))||[]
+            : values[0]&&{key:values[0],label:valueNames[0]}||{}
+          return (
+            <CustomSelector
+              selectProps={{
+                style: styleCommon,
+                placeholder: '请选择',
+                ...(dataInputBusinessType === 12
+                  ? {
+                    mode: 'multiple',
+                    maxTagCount: 1,
+                    multipleForQuery: true
+                  }
+                  : {}),
+                getPopupContainer: () => document.body,
+              }}
+              ctx={ {name: propertyCode || itemDetail?.propertyPath }}
+              isSearchForm={true}
+              customSelectorConfig={others?.customSelectorConfig || {}}
+              disabled={disabled}
+              value={currentValue}
+              onChange={(value,sourceList) => {
+                if (dataInputBusinessType === 12) {
+                  values = value?.map?.((i) => i)||[];
+                  valueNames = sourceList?.filter(s => s.value == value)?.map(i=> i.label || '')||[];
+                } else {
+                  const vLabel = sourceList?.find(s => s.value == value)?.label
+                  values = value?[value]:[];
+                  valueNames = vLabel?[vLabel]:[];
+                }
+                callback(values, valueNames);
+              }}
+            />
+          );
+        }
+      }
     } else {
       if (
         dataTypeCode == 22 ||