@bit-sun/business-component 3.1.10-alpha.1 → 3.1.10-alpha.11

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

@@ -1,358 +1,358 @@
-import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import { Button, Modal, Row } from 'antd';
-import { QueryTable, request } from 'bssula';
-// @ts-ignore
-import { assembleRequest, getMetaData, remoteFetch, convertProp } from './function';
-import { getColumnItem } from './helps';
-import React from 'react';
-
-export default forwardRef((props: any, ref) => {
-  useImperativeHandle(ref, () => {
-    return {
-      handleOk,
-      refreshSelectSource,
-    };
-  });
-
-  const prop = convertProp(props?.ctx?.name, props.isSearchForm);
-  const newFormData = props?.ctx?.form?.getFieldsValue() || {};
-  const newestFormData =
-    newFormData && Object.keys(newFormData)?.length
-      ? newFormData
-      : props?.formData || {}; // 最新的formData，用来下面监听最新值的改变，做级联效果
-  const searchFormData =
-    newFormData && Object.keys(newFormData)?.length
-      ? newFormData
-      : props?.formData || {}; // 如果是表格上面的查询表单情况
-  const isView = props?.ctx?.mode == 'view'
-
-  const queryTableRef = useRef(null);
-
-  const [requestConfig, setRequestConfig] = useState({} as any);
-  const [tableState, setTableState] = useState({
-    pages: {
-      page: 1,
-      limit: 20,
-      total: 0,
-    },
-    columns: [],
-    fields: [],
-    dataList: [],
-    currentQuery: {},
-    selectedLine: {},
-  });
-
-  const handleOpen = async () => {
-    const requestConfigNew = assembleRequest(props.customSelectorConfig, {
-      isSearchForm: props.isSearchForm,
-      newestFormData,
-      searchFormData,
-    });
-    if (!requestConfigNew) return;
-    const metaDataId = props.customSelectorConfig?.targetMetaData?.id;
-    const metaData = await getMetaData(metaDataId);
-    const realMetaData = metaData?.filter((item: any) => item?.inputType != 1)||[]
-    const columns = realMetaData.map((item: any) => getColumnItem({ item, props }));
-
-    // tableState.columns = columns
-    const fields = realMetaData?.filter((item: any) => item.infoVo?.isQuery)
-      .map((item: any) => {
-        let name = `qp-${item.code}-eq`;
-        try {
-          if (JSON.parse(item.info).isLikeQuery) {
-            name = `qp-${item.code}-like`;
-          }
-        } catch (e) {
-          console.log('error', e);
-        }
-
-        return {
-          name,
-          label: item.name,
-          field: 'input',
-        };
-      });
-    setTableState({
-      ...tableState,
-      columns,
-      fields,
-    });
-    setRequestConfig(requestConfigNew);
-
-    const initValue = (!props?.ctx?.form && props?.value?.map?.((v: any) => (v.key || v))) || props?.ctx?.form?.getFieldValue(props.id);
-    if(props?.selectProps?.multipleForQuery && !isView && initValue) {
-      // @ts-ignore
-      queryTableRef?.current?.tableRef?.current?.bsSetSelectInfo(initValue);
-    }
-  };
-
-  const fieldMapping = props.customSelectorConfig?.fieldMapping || [];
-  const fieldMappingItem = fieldMapping.find(
-    (item: any) => item.codeMappingTo === prop,
-  );
-  const echoLabel = props.customSelectorConfig?.extraData?.echoLabel;
-  //初始获取下拉列表
-  const fetchFieldSource = (obj: any, init: any) => {
-    const { url, method, convertParams, converter } = obj;
-    const params = convertParams({ params: { pageSize: 20, currentPage: 1, ...init } });
-
-    // 容错处理
-    if (!params?.path || params?.path?.indexOf('undefined') > -1) return;
-
-    request({ url, method, params }).then((res: any) => {
-      const { list } = converter({ data: res });
-
-      const currentField = fieldMappingItem;
-      const sourceList: any[] = [];
-      const codeList: string[] = [];
-      const options = list.map((item: any) => {
-        if (currentField && echoLabel) {
-          return {
-            label: item[echoLabel],
-            value: item[currentField.codeMappingFrom],
-          };
-        }
-        if (echoLabel && !currentField) {
-          return {
-            label: item[echoLabel],
-            value: item[echoLabel],
-          };
-        }
-        return {
-          label: item[currentField.codeMappingTo],
-          value: item[currentField.codeMappingTo],
-        };
-      });
-      options.forEach((item: any) => {
-        if (!codeList.includes(item.value)) {
-          codeList.push(item.value);
-          sourceList.push(item);
-        }
-      });
-      props.setFieldSource(sourceList);
-      props.setAllListData(list || []);
-    });
-  };
-
-  useEffect(() => {
-    if (props.visible) {
-      handleOpen();
-    }
-  }, [props.visible]);
-
-  const refreshSelectSource = (reset: any = false, init={}) => {
-    const requestConfigNew = assembleRequest(props.customSelectorConfig, {
-      isSearchForm: props.isSearchForm,
-      newestFormData,
-      searchFormData,
-    });
-    const obj = remoteFetch(requestConfigNew);
-    //初始化请求下拉列表
-    fetchFieldSource(obj, init);
-  };
-
-  useEffect(() => {
-    const isNeedBack = props?.ctx?.mode != 'create' || props.disabled;
-    const initValue = props?.ctx?.form?.getFieldValue(props.id);
-    const formCodeKey = `${fieldMappingItem?.codeMappingFrom}`
-    const initKey = Array.isArray(initValue) && initValue?.length>1 ? `qp-${formCodeKey}-in` : `qp-${formCodeKey}-eq`;    
-    const initParams = isNeedBack&&formCodeKey&&initValue ? { [initKey]: Array.isArray(initValue)? initValue.join(',') : initValue } : {};    
-    refreshSelectSource(null, initParams);
-  }, []);
-
-  const remoteDataSource = useMemo(() => {
-    if (Object.keys(requestConfig).length) {
-      const obj = remoteFetch(requestConfig,tableState.columns);
-      return obj;
-    } else {
-      return {};
-    }
-  }, [requestConfig,tableState.columns]);
-
-  const rowKey = fieldMappingItem?.codeMappingFrom ?? 'id' ?? 'code'
-  const handleOk = (rowData?: any, setSource = true) => {
-    //多选数据处理
-    if (props?.selectProps?.multipleForQuery) {
-      // @ts-ignore
-      const selectedKesys = queryTableRef?.current?.tableRef?.current?.getSelectedRowKeys()||[];
-      // @ts-ignore
-      const selectedRows = queryTableRef?.current?.tableRef?.current?.getSelectedRows()||[];
-      let realSelectedRows = selectedRows
-      if(!rowData && selectedKesys?.length!==selectedRows?.length) {
-        // @ts-ignore
-        const dataSource = queryTableRef?.current?.tableRef?.current?.getDataSource()||[]
-        realSelectedRows = dataSource?.filter((s: any)=> selectedKesys.includes(s[rowKey]));
-      } 
-      //@ts-ignore
-      const rowDataList = rowData
-        ? rowData
-        : realSelectedRows;
-
-      let rowDataTemp: any = {};
-      rowDataList.forEach((item: any, index: Number) => {
-        Object.keys(item).forEach((key) => {
-          if (!Reflect.has(rowDataTemp, key)) {
-            rowDataTemp[key] = [item[key]];
-          } else {
-            rowDataTemp[key].push(item[key]);
-            //数组去重
-            rowDataTemp[key] = [...new Set(rowDataTemp[key])];
-          }
-        });
-      });
-      rowData = rowDataTemp;
-    }
-
-    let mappings = props.customSelectorConfig.fieldMapping;
-    const values: any = {};
-    //没有映射且有echoLabel的话，默认塞入一条
-    if (
-      (!mappings || (Array.isArray(mappings) && !mappings.length)) &&
-      props.customSelectorConfig?.extraData?.echoLabel
-    ) {
-      mappings.push({
-        codeMappingFrom: props.customSelectorConfig?.extraData?.echoLabel,
-        codeMappingTo: prop,
-        uuid: '',
-      });
-    }
-
-    mappings.map((item: any) => {
-      if (
-        props.customSelectorConfig?.extraData?.echoLabel &&
-        item.codeMappingTo === prop &&
-        rowData[props.customSelectorConfig?.extraData?.echoLabel]
-      ) {
-        values[`${item.codeMappingTo}Name`] =
-          rowData[props.customSelectorConfig?.extraData?.echoLabel];
-      }
-      values[item.codeMappingTo] = rowData[item.codeMappingFrom];
-    });
-    // 表单查询项就不给其他字段赋值
-    if (!props.isSearchForm) {
-      Object.keys(values).map((key, index, list) => {
-        if (key.includes('Name')) {
-          const valueKey = key.replace('Name', '');
-          if (setSource) {
-            if (Array.isArray(values[valueKey])) {
-              const valueList: any[] = [];
-              values[valueKey].forEach((item: any, index: number) => {
-                valueList.push({
-                  label: values[key][index],
-                  value: values[valueKey][index],
-                });
-              });
-              props.setFieldSource(valueList);
-            } else {
-              props.setFieldSource([
-                {
-                  label: values[key],
-                  value: values[valueKey],
-                },
-              ]);
-            }
-          }
-        } else {
-          props?.setFieldValue?.(key, values[key]);
-        }
-      });
-    } else {
-      if (setSource) {
-        if (Array.isArray(values[prop])) {
-          const valueList: any[] = [];
-          values[prop].forEach((item: any, index: number) => {
-            valueList.push({
-              label: values[`${prop}Name`][index],
-              value: values[prop][index],
-            });
-          });
-          props.setFieldSource(valueList);
-        } else {
-          props.setFieldSource([
-            {
-              label: values[`${prop}Name`],
-              value: values[prop],
-            },
-          ]);
-        }
-      }
-      const fieldKey = props?.ctx?.name || prop
-      props.setFieldValue(fieldKey, values[prop],props.fieldSource);
-    }
-
-    props.onCancel();
-    //@ts-ignore
-    queryTableRef?.current?.tableRef?.current?.clearRowSelection();
-  };
-
-
-  const config = useMemo(() => {
-    let returnConfig: any = {
-      size: 'small',
-      needPageHeader: false,
-      tableWrapperStyle: {},
-      isHorizontally: false,
-      rowSelection: (props?.selectProps?.multipleForQuery && !isView) ? {
-        selectedRowKeys: (!props?.ctx?.form && props?.value?.map((v: any) => (v.key || v))) || props?.ctx?.form?.getFieldValue(props.id),
-      } : false,
-      remoteDataSource,
-      fields: tableState.fields,
-      columns: tableState.columns,
-      rowKey,
-      tableProps: !isView && {
-        rowClassName: (record: any) => {
-          return record[rowKey] == ((!props?.ctx?.form && (props?.value?.key|| props?.value)) || props?.ctx?.form?.getFieldValue(props.id)) ? 'tableSelectedRow': ''
-        },
-        onRow: (record: any) => {
-          return {
-            onDoubleClick: () => {
-              handleOk(record);
-            }, //双击
-          };
-        },
-      } || {},
-    };
-    if (Object.keys(remoteDataSource).length) {
-      return returnConfig;
-    } else {
-      return false;
-    }
-  }, [tableState, remoteDataSource]);
-
-  return (
-    <Modal
-      title=""
-      width={1300}
-      open={props.visible}
-      footer={null}
-      onCancel={() => {
-        props.onCancel();
-      }}
-      destroyOnClose
-    >
-      {config && <QueryTable ref={queryTableRef} {...config} />}
-
-      {props?.selectProps?.multipleForQuery && !isView && (
-        <Row justify="center" style={{ marginBottom: 30, marginTop: 10 }}>
-          <Button
-            type="primary"
-            style={{ marginRight: 20 }}
-            onClick={() => handleOk()}
-          >
-            提交
-          </Button>
-          <Button
-            type="default"
-            onClick={() => {
-              props.onCancel();
-              //@ts-ignore
-              queryTableRef?.current?.tableRef?.current?.clearRowSelection();
-            }}
-          >
-            取消
-          </Button>
-        </Row>
-      )}
-    </Modal>
-  );
-});
+import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { Button, Modal, Row } from 'antd';
+import { QueryTable, request } from 'bssula';
+// @ts-ignore
+import { assembleRequest, getMetaData, remoteFetch, convertProp } from './function';
+import { getColumnItem } from './helps';
+import React from 'react';
+
+export default forwardRef((props: any, ref) => {
+  useImperativeHandle(ref, () => {
+    return {
+      handleOk,
+      refreshSelectSource,
+    };
+  });
+
+  const prop = convertProp(props?.ctx?.name, props.isSearchForm);
+  const newFormData = props?.ctx?.form?.getFieldsValue() || {};
+  const newestFormData =
+    newFormData && Object.keys(newFormData)?.length
+      ? newFormData
+      : props?.formData || {}; // 最新的formData，用来下面监听最新值的改变，做级联效果
+  const searchFormData =
+    newFormData && Object.keys(newFormData)?.length
+      ? newFormData
+      : props?.formData || {}; // 如果是表格上面的查询表单情况
+  const isView = props?.ctx?.mode == 'view'
+
+  const queryTableRef = useRef(null);
+
+  const [requestConfig, setRequestConfig] = useState({} as any);
+  const [tableState, setTableState] = useState({
+    pages: {
+      page: 1,
+      limit: 20,
+      total: 0,
+    },
+    columns: [],
+    fields: [],
+    dataList: [],
+    currentQuery: {},
+    selectedLine: {},
+  });
+
+  const handleOpen = async () => {
+    const requestConfigNew = assembleRequest(props.customSelectorConfig, {
+      isSearchForm: props.isSearchForm,
+      newestFormData,
+      searchFormData,
+    });
+    if (!requestConfigNew) return;
+    const metaDataId = props.customSelectorConfig?.targetMetaData?.id;
+    const metaData = await getMetaData(metaDataId);
+    const realMetaData = metaData?.filter((item: any) => item?.inputType != 1)||[]
+    const columns = realMetaData.map((item: any) => getColumnItem({ item, props }));
+
+    // tableState.columns = columns
+    const fields = realMetaData?.filter((item: any) => item.infoVo?.isQuery)
+      .map((item: any) => {
+        let name = `qp-${item.code}-eq`;
+        try {
+          if (JSON.parse(item.info).isLikeQuery) {
+            name = `qp-${item.code}-like`;
+          }
+        } catch (e) {
+          console.log('error', e);
+        }
+
+        return {
+          name,
+          label: item.name,
+          field: 'input',
+        };
+      });
+    setTableState({
+      ...tableState,
+      columns,
+      fields,
+    });
+    setRequestConfig(requestConfigNew);
+
+    const initValue = (!props?.ctx?.form && props?.value?.map?.((v: any) => (v.key || v))) || props?.ctx?.form?.getFieldValue(props.id);
+    if(props?.selectProps?.multipleForQuery && !isView && initValue) {
+      // @ts-ignore
+      queryTableRef?.current?.tableRef?.current?.bsSetSelectInfo(initValue);
+    }
+  };
+
+  const fieldMapping = props.customSelectorConfig?.fieldMapping || [];
+  const fieldMappingItem = fieldMapping.find(
+    (item: any) => item.codeMappingTo === prop,
+  );
+  const echoLabel = props.customSelectorConfig?.extraData?.echoLabel;
+  //初始获取下拉列表
+  const fetchFieldSource = (obj: any, init: any) => {
+    const { url, method, convertParams, converter } = obj;
+    const params = convertParams({ params: { pageSize: 20, currentPage: 1, ...init } });
+
+    // 容错处理
+    if (!params?.path || params?.path?.indexOf('undefined') > -1) return;
+
+    request({ url, method, params }).then((res: any) => {
+      const { list } = converter({ data: res });
+
+      const currentField = fieldMappingItem;
+      const sourceList: any[] = [];
+      const codeList: string[] = [];
+      const options = list.map((item: any) => {
+        if (currentField && echoLabel) {
+          return {
+            label: item[echoLabel],
+            value: item[currentField.codeMappingFrom],
+          };
+        }
+        if (echoLabel && !currentField) {
+          return {
+            label: item[echoLabel],
+            value: item[echoLabel],
+          };
+        }
+        return {
+          label: item[currentField.codeMappingTo],
+          value: item[currentField.codeMappingTo],
+        };
+      });
+      options.forEach((item: any) => {
+        if (!codeList.includes(item.value)) {
+          codeList.push(item.value);
+          sourceList.push(item);
+        }
+      });
+      props.setFieldSource(sourceList);
+      props.setAllListData(list || []);
+    });
+  };
+
+  useEffect(() => {
+    if (props.visible) {
+      handleOpen();
+    }
+  }, [props.visible]);
+
+  const refreshSelectSource = (reset: any = false, init={}) => {
+    const requestConfigNew = assembleRequest(props.customSelectorConfig, {
+      isSearchForm: props.isSearchForm,
+      newestFormData,
+      searchFormData,
+    });
+    const obj = remoteFetch(requestConfigNew);
+    //初始化请求下拉列表
+    fetchFieldSource(obj, init);
+  };
+
+  useEffect(() => {
+    const isNeedBack = props?.ctx?.mode != 'create' || props.disabled;
+    const initValue = props?.ctx?.form?.getFieldValue(props.id);
+    const formCodeKey = `${fieldMappingItem?.codeMappingFrom}`
+    const initKey = Array.isArray(initValue) && initValue?.length>1 ? `qp-${formCodeKey}-in` : `qp-${formCodeKey}-eq`;    
+    const initParams = isNeedBack&&formCodeKey&&initValue ? { [initKey]: Array.isArray(initValue)? initValue.join(',') : initValue } : {};    
+    refreshSelectSource(null, initParams);
+  }, []);
+
+  const remoteDataSource = useMemo(() => {
+    if (Object.keys(requestConfig).length) {
+      const obj = remoteFetch(requestConfig,tableState.columns);
+      return obj;
+    } else {
+      return {};
+    }
+  }, [requestConfig,tableState.columns]);
+
+  const rowKey = fieldMappingItem?.codeMappingFrom ?? 'id' ?? 'code'
+  const handleOk = (rowData?: any, setSource = true) => {
+    //多选数据处理
+    if (props?.selectProps?.multipleForQuery) {
+      // @ts-ignore
+      const selectedKesys = queryTableRef?.current?.tableRef?.current?.getSelectedRowKeys()||[];
+      // @ts-ignore
+      const selectedRows = queryTableRef?.current?.tableRef?.current?.getSelectedRows()||[];
+      let realSelectedRows = selectedRows
+      if(!rowData && selectedKesys?.length!==selectedRows?.length) {
+        // @ts-ignore
+        const dataSource = queryTableRef?.current?.tableRef?.current?.getDataSource()||[]
+        realSelectedRows = dataSource?.filter((s: any)=> selectedKesys.includes(s[rowKey]));
+      } 
+      //@ts-ignore
+      const rowDataList = rowData
+        ? rowData
+        : realSelectedRows;
+
+      let rowDataTemp: any = {};
+      rowDataList.forEach((item: any, index: Number) => {
+        Object.keys(item).forEach((key) => {
+          if (!Reflect.has(rowDataTemp, key)) {
+            rowDataTemp[key] = [item[key]];
+          } else {
+            rowDataTemp[key].push(item[key]);
+            //数组去重
+            rowDataTemp[key] = [...new Set(rowDataTemp[key])];
+          }
+        });
+      });
+      rowData = rowDataTemp;
+    }
+
+    let mappings = props.customSelectorConfig.fieldMapping;
+    const values: any = {};
+    //没有映射且有echoLabel的话，默认塞入一条
+    if (
+      (!mappings || (Array.isArray(mappings) && !mappings.length)) &&
+      props.customSelectorConfig?.extraData?.echoLabel
+    ) {
+      mappings.push({
+        codeMappingFrom: props.customSelectorConfig?.extraData?.echoLabel,
+        codeMappingTo: prop,
+        uuid: '',
+      });
+    }
+
+    mappings.map((item: any) => {
+      if (
+        props.customSelectorConfig?.extraData?.echoLabel &&
+        item.codeMappingTo === prop &&
+        rowData[props.customSelectorConfig?.extraData?.echoLabel]
+      ) {
+        values[`${item.codeMappingTo}Name`] =
+          rowData[props.customSelectorConfig?.extraData?.echoLabel];
+      }
+      values[item.codeMappingTo] = rowData[item.codeMappingFrom];
+    });
+    // 表单查询项就不给其他字段赋值
+    if (!props.isSearchForm) {
+      Object.keys(values).map((key, index, list) => {
+        if (key.includes('Name')) {
+          const valueKey = key.replace('Name', '');
+          if (setSource) {
+            if (Array.isArray(values[valueKey])) {
+              const valueList: any[] = [];
+              values[valueKey].forEach((item: any, index: number) => {
+                valueList.push({
+                  label: values[key][index],
+                  value: values[valueKey][index],
+                });
+              });
+              props.setFieldSource(valueList);
+            } else {
+              props.setFieldSource([
+                {
+                  label: values[key],
+                  value: values[valueKey],
+                },
+              ]);
+            }
+          }
+        } else {
+          props?.setFieldValue?.(key, values[key]);
+        }
+      });
+    } else {
+      if (setSource) {
+        if (Array.isArray(values[prop])) {
+          const valueList: any[] = [];
+          values[prop].forEach((item: any, index: number) => {
+            valueList.push({
+              label: values[`${prop}Name`][index],
+              value: values[prop][index],
+            });
+          });
+          props.setFieldSource(valueList);
+        } else {
+          props.setFieldSource([
+            {
+              label: values[`${prop}Name`],
+              value: values[prop],
+            },
+          ]);
+        }
+      }
+      const fieldKey = props?.ctx?.name || prop
+      props.setFieldValue(fieldKey, values[prop],props.fieldSource);
+    }
+
+    props.onCancel();
+    //@ts-ignore
+    queryTableRef?.current?.tableRef?.current?.clearRowSelection();
+  };
+
+
+  const config = useMemo(() => {
+    let returnConfig: any = {
+      size: 'small',
+      needPageHeader: false,
+      tableWrapperStyle: {},
+      isHorizontally: false,
+      rowSelection: (props?.selectProps?.multipleForQuery && !isView) ? {
+        selectedRowKeys: (!props?.ctx?.form && props?.value?.map((v: any) => (v.key || v))) || props?.ctx?.form?.getFieldValue(props.id),
+      } : false,
+      remoteDataSource,
+      fields: tableState.fields,
+      columns: tableState.columns,
+      rowKey,
+      tableProps: !isView && {
+        rowClassName: (record: any) => {
+          return record[rowKey] == ((!props?.ctx?.form && (props?.value?.key|| props?.value)) || props?.ctx?.form?.getFieldValue(props.id)) ? 'tableSelectedRow': ''
+        },
+        onRow: (record: any) => {
+          return {
+            onDoubleClick: () => {
+              handleOk(record);
+            }, //双击
+          };
+        },
+      } || {},
+    };
+    if (Object.keys(remoteDataSource).length) {
+      return returnConfig;
+    } else {
+      return false;
+    }
+  }, [tableState, remoteDataSource]);
+
+  return (
+    <Modal
+      title=""
+      width={1300}
+      open={props.visible}
+      footer={null}
+      onCancel={() => {
+        props.onCancel();
+      }}
+      destroyOnClose
+    >
+      {config && <QueryTable ref={queryTableRef} {...config} />}
+
+      {props?.selectProps?.multipleForQuery && !isView && (
+        <Row justify="center" style={{ marginBottom: 30, marginTop: 10 }}>
+          <Button
+            type="primary"
+            style={{ marginRight: 20 }}
+            onClick={() => handleOk()}
+          >
+            提交
+          </Button>
+          <Button
+            type="default"
+            onClick={() => {
+              props.onCancel();
+              //@ts-ignore
+              queryTableRef?.current?.tableRef?.current?.clearRowSelection();
+            }}
+          >
+            取消
+          </Button>
+        </Row>
+      )}
+    </Modal>
+  );
+});