@bit-sun/business-component 3.1.6 → 3.1.8

package/src/components/Business/JsonQueryTable/index.tsx

@@ -1,534 +1,534 @@
-// @ts-nocheck
-import React, { useState, useRef, useEffect, Fragment } from 'react';
-import { message, Button, Table, Tabs } from 'antd';
-import Drawer from './drawer';
-import ConfigButton from './configButton';
-import Editor from './jsonEditor';
-import request from '@/utils/request';
-import FieldsSettingsTable from './components/FieldsSettingsTable';
-import { isEmpty } from "lodash"
-import './index.less';
-import { getUserId } from '@/utils/LocalstorageUtils';
-
-function iterFileds (fields) {
-  let filedsValue = [];
-
-  function iter(field) {
-    if(Array.isArray(field.fields)) {
-      field.fields.forEach(item => {
-        const targetValue = iterFileds(item);
-        if(targetValue){
-          filedsValue.push(targetValue);
-        }
-      })
-    } else  {
-      return {
-        name: field.name,
-        isStaticCode: true,
-        label: field.label,
-      }
-    }
-
-    return {
-      container: {
-        name: field?.container?.props?.name,
-        title: field?.container?.props?.title
-      },
-      isStaticCode: true,
-      fields: filedsValue,
-    };
-  }
-
-  filedsValue = iter(fields)
-
-  return filedsValue;
-}
-
-function flatFileds (fields) {
-  let filedsValue = {
-  };
-  function iter(field, containerName) {
-    if(Array.isArray(field.fields)) {
-      if (field?.container?.props?.name) {
-        filedsValue[field?.container?.props?.name] = {
-          ...field,
-          fields: []
-        }
-      }
-      field.fields.forEach(item => {
-        iter(item, field?.container?.props?.name)
-      })
-    } else  {
-      filedsValue[containerName ? (containerName + field.name) : field.name] = field
-    }
-  }
-
-  iter(fields)
-
-  return filedsValue;
-}
-
-function convertFileds (fields, falltValue, faltFieldRange, containerName) {
-  let filedsValue = [];
-
-  function iter(field) {
-    if(Array.isArray(field.fields)) {
-      field.fields.forEach(item => {
-        const targetValue = convertFileds(item, falltValue, faltFieldRange, field?.container?.name);
-        if(targetValue){
-          if(item.dependency) {
-            targetValue.dependency = {
-              visible: {
-                ...item.dependency.visible,
-                type: (new Function('request','ctx', item.dependency.visible.type)).bind(null, request)
-              }
-            }
-          }
-          filedsValue.push(targetValue)
-        }
-      })
-    } else  {
-      const returnField = field.isStaticCode ? falltValue[containerName ? (containerName + field.name) : field.name] : faltFieldRange[field.name];
-      if (returnField) {
-        returnField.label = field?.label; 
-        if(field?.disabled){ // 字段设置只读属性
-          returnField.field.props.disabled = true;
-        }
-        if(field?.invisible){ // 字段设置不可见属性
-          returnField.initialVisible = false;
-        }
-        
-        if(Array.isArray(returnField.name)&&returnField.name?.includes("extensionFields")){
-          returnField.notShowLabel = true;
-        }
-      } else {
-      }
-      return returnField;
-    }
-
-    return {...falltValue[field?.container?.name], fields: filedsValue};
-  }
-
-  filedsValue = iter(fields)
-
-  return filedsValue;
-}
-
-function faltColumns(columns) {
-  let columnsValue = {}
-
-  columns.forEach(item => {
-    columnsValue[item.key] = {...item}
-  })
-
-  return columnsValue;
-}
-
-function faltCustomerFieldRange(fileds) {
-  let columnsValue = {}
-
-  fileds.forEach(item => {
-    columnsValue[item.name] = {...item}
-  })
-
-  return columnsValue;
-}
-
-//form存在新加container属性分组得情况 组合操作
-function combineContainer(originFields, currentFields){
-  let newCurrentFields = [...originFields];
-  currentFields.map((item: any) => {
-    if(!originFields.find((i: any) => i?.container?.props?.name == item?.container?.name)){
-      newCurrentFields = [...newCurrentFields, {
-        container: {
-          type: 'card',
-          props: {
-            title: item?.container?.title,
-            level: 1,
-            id: Math.random(),
-            isWhiteCard: true,
-            bordered: false,
-            name: item?.container?.name,
-          },
-        },
-        fields: item?.fields || []
-      }];
-    }
-  })
-  return newCurrentFields;
-}
-
-function hanleCallbackValue(codeProps, value, customerFields, cacheColumns = []) {
-  const faltFieldRange = faltCustomerFieldRange(customerFields);
-  // const falltValue = flatFileds({fields: codeProps.fields})
-  const falltValue = flatFileds({fields: combineContainer(codeProps.fields, value?.fields)})
-  let newCodeProps = {...codeProps};
-  newCodeProps.fields = convertFileds({fields: value.fields}, falltValue, faltFieldRange).fields;
-  if (codeProps.columns) {
-    const faltColumnsValue = faltColumns(codeProps.columns)
-    newCodeProps.columns = value.columns.map(item => {
-      if (item.isStaticCode) {
-        const cacheFieldProperty = cacheColumns.find(k => (k.key||k.dataIndex) == (item.key||item.dataIndex));
-        return {
-          ...faltColumnsValue[item.key],
-          ...cacheFieldProperty
-        }
-      } else {
-        //自定义字段-列字段
-        if(item?.key&&item?.key.includes('extensionFields')&&item?.key.includes(',')){
-          return {
-            ...item,
-            render: ({ record }: any) => {
-              try{
-                const { extensionFields = {} } = record;
-                const fieldName1= item?.key.split(',')[1]; //兼容没有fieldName的情况
-                const fieldName2 = `${fieldName1}Name`;
-                if(customerFields.length){
-                  const targetField = customerFields.find(k => k.name.includes(fieldName1));
-                  if(targetField){
-                    const { initialSource = [] } = targetField
-                    if(initialSource.length){
-                      return initialSource.find((d => d.value == extensionFields[fieldName1]))?.text || extensionFields[fieldName1];
-                    }
-                  }
-                }
-                return extensionFields[fieldName2] || extensionFields[fieldName1] ||  '';
-              }catch(e){
-                console.log('e',e);
-              }
-            }
-          }
-        }else{
-          return {
-            ...item
-          }
-        }
-      }
-    });
-
-    //进行列表搜索项自定义字段name替换 （排除是编辑表单的fields）
-    newCodeProps.fields = newCodeProps.fields.map(item => {
-      if(Array.isArray(item?.name)){
-        return {
-          ...item,
-          name: item?.realSearchName || item?.name
-        }
-      }
-      return item;
-    });
-
-  }
-
-  return newCodeProps;
-}
-
-function isAdmin() {
-  const username = getUserId();
-
-  return username === 'admin' || username === 'uiuiui'
-}
-
-const tableStyleList = [
-  {
-    type: '快速搜索',
-    img: 'https://img.alicdn.com/tfs/TB1al1JqHr1gK0jSZR0XXbP8XXa-40-40.svg',
-    url: '/list/singlesearch',
-  },
-  {
-    type: '高级搜索',
-    img: 'https://img.alicdn.com/tfs/TB1QgKIqQL0gK0jSZFtXXXQCXXa-40-40.svg',
-    url: '/list/advancedsearch',
-  },
-  {
-    type: '一般搜索',
-    img: 'https://img.alicdn.com/tfs/TB1xHCPqRr0gK0jSZFnXXbRRXXa-40-40.svg',
-    url: '/list/basic',
-  },
-  {
-    type: '无分页表格',
-    img: 'https://img.alicdn.com/tfs/TB1txuMqQL0gK0jSZFxXXXWHVXa-40-40.svg',
-    url: '/list/nopagination',
-  },
-  {
-    type: '分步查询表格',
-    img: 'https://img.alicdn.com/tfs/TB10IOmGkL0gK0jSZFAXXcA9pXa-53-46.svg',
-    url: '/list/stepquerytable',
-  },
-];
-const JsonQueryTable = React.memo(props => {
-  const {
-    callBack, // 主保存函数回调
-    codeProps, // 整体的配置数据
-    customerFields, //可选的配置字段
-    initialSetting, //上一次添加自定义字段后保存的数据
-    pageType, //页面权限code
-    detailTablesSetting = [], //详情明细表格列配置数据
-    saveTableCallBack, //详情明细保存函数回调
-  } = props;
-
-  let codeFilter = {};
-  if (codeProps.columns) { // table
-    codeFilter.columns = codeProps.columns.map(item => ({
-      key: item.key,
-      isStaticCode: true,
-      title: item.title
-    }))
-
-    codeFilter.fields = codeProps.fields.map(item => ({
-      name: item.name,
-      isStaticCode: true,
-      label: item.label,
-      notShowLabel: item.notShowLabel || false
-    }))
-  }  else {
-    codeFilter.fields = iterFileds({fields: codeProps.fields}).fields
-  }
-
-  const styleRef = useRef(null);
-
-  const [visible, setVisible] = useState(false)
-  const [code, setCode] = useState(codeProps);
-  const [init, setInit] = useState(true);
-  const [jsonEditorVal, setJsonEditorVal] = useState(initialSetting || codeFilter);
-  const [moduleParams, setModuleParams] = useState({});
-  const [activeKey, setActiveKey] = useState('main'); //默认详情页配置
-  const [tablesConfigParams, setTablesConfigParams] = useState({});
-  const [tableJsonEditorValsArr, setTableJsonEditorValsArr] = useState([]);
-
-  useEffect(()=>{
-    Promise.all([
-      request.get(`/basic/flow/businessFieldGroup/one?moduleType=2&layoutPoint=${pageType}`),
-    ]).then(([res] )=> {
-      const { code, data } = res?.data || {};
-      if (code === '000000') {
-        if(data){
-          const { businessType, code:fieldGroup, moduleType, moduleRelationId } = data;
-          setModuleParams({
-            businessType,
-            fieldGroup,
-            moduleType,
-            moduleRelationId
-          });
-        }
-      }
-    })
-  },[]);
-
-  useEffect(()=>{
-    //明细表的配置数据
-    const axiosArr = detailTablesSetting.map((item:any) => request.get(`/basic/flow/businessFieldGroup/one?moduleType=2&layoutPoint=${item.tableCode}`));
-    Promise.all(axiosArr).then(([...resArr])=> {
-      let configParams = {};
-      detailTablesSetting.map((item:any, index:number)=>{
-        const { code, data } = resArr[index]?.data || {};
-        if(data){
-          const { businessType, code:fieldGroup, moduleType } = data;
-          configParams [item.tableCode] = {
-            businessType,
-            fieldGroup,
-            moduleType,
-            tableFlag: true
-          }
-        }
-      })
-      setTablesConfigParams({
-        ...configParams,
-      });
-    })
-
-    const detailTableCodeFilter = detailTablesSetting.map(item => {
-      if(item?.initialSetting && item?.initialSetting.length){
-        return {
-          ...item,
-          columns: item?.initialSetting
-        }
-      }
-      return {
-        ...item,
-        columns: item?.columns.map(childItem => ({
-          key: childItem.key || childItem.dataIndex,
-          dataIndex: childItem.dataIndex || childItem.key,
-          isStaticCode: true,
-          title: childItem.title
-        }))
-      }
-    });
-    setTableJsonEditorValsArr([...detailTableCodeFilter]);
-    const lastRes = detailTableCodeFilter.map(item => {
-      if(item?.initialSetting && item?.initialSetting.length){
-        const codeProps = {
-          fields: [],
-          columns: item?.columns,
-        };
-        const newValue = {
-          fields: [],
-          columns: item.initialSetting
-        };
-        const result = hanleCallbackValue(codeProps, newValue, item?.customerFields, item?.cacheColumns);
-        return {
-          ...item,
-          columns: result?.columns
-        }
-      }
-      return item;
-    });
-    if(lastRes.length){
-      saveTableCallBack(lastRes, false);
-    }
-  },[detailTablesSetting.length]);
-  
-  const onClickRun = (value, isSave) => {
-    setJsonEditorVal(value);
-
-    try {
-      setCode(value);
-      callBack(hanleCallbackValue(codeProps, value, customerFields), isSave, value);
-    } catch (e) {
-      message.error(e);
-    }
-  };
-
-  //明细表保存
-  const onClickRunDetailTables = (value, isSave, tableCode, tableSouce) =>{
-    const targetCode = tableCode || activeKey;
-    const targetTableSource = tableSouce || tableJsonEditorValsArr;
-    const newArr = targetTableSource.map(item => {
-      if(item.tableCode == targetCode){
-        return {
-          ...item,
-          columns: value
-        }
-      }
-      return item
-    });
-    setTableJsonEditorValsArr([...newArr]);
-
-    try {
-      const target = targetTableSource.find(item=>item.tableCode == targetCode);
-      const codeProps = {
-        fields: [],
-        columns: target?.columns,
-      };
-      const newValue = {
-        fields: [],
-        columns: value
-      };
-      const result = hanleCallbackValue(codeProps, newValue, target?.customerFields, target?.cacheColumns);
-      saveTableCallBack({ columns: result.columns, tableCode: targetCode }, isSave, value);
-    } catch (e) {
-      message.error(e);
-    }
-  }
-  
-  React.useEffect(() => {
-    localStorage.setItem('jsonEditorVal',JSON.stringify(jsonEditorVal||{}))
-  }, [jsonEditorVal]);
-
-  React.useEffect(() => {
-    if (initialSetting) {
-      onClickRun(initialSetting);
-      setJsonEditorVal(initialSetting)
-    }
-  }, [initialSetting]);
-
-  const height =
-    styleRef?.current?.clientHeight || styleRef?.current?.offsetHeight;
-
-  const tableParams = {
-    ...moduleParams,
-    jsonEditorVal,
-    codeProps,
-  };
-
-  return (
-    <div>
-      <Drawer visible={visible} width={1400} onClose={() => setVisible(false)} className={'customFieldsDrawer'}>
-      {
-          detailTablesSetting.length == 0 &&(
-            <div style={{display: 'flex'}}>
-              <div style={{flex: 1, width: 500}}>
-                {
-                  isEmpty(moduleParams)?(
-                    <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
-                      提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
-                    </div>
-                  ):(
-                    <FieldsSettingsTable {...tableParams}/>
-                  )
-                }
-              </div>
-              <div style={{flex: 1}}>
-                <Editor
-                  type="table"
-                  onRun={onClickRun}
-                  value={jsonEditorVal}
-                  shallowHeight={height}
-                />
-              </div>
-            </div>
-          )
-        }
-        {
-          detailTablesSetting.length > 0 && (
-            <Tabs defaultActiveKey={activeKey} onChange={(v: any) => setActiveKey(v)}>
-              <Tabs.TabPane tab="详情页配置" key="main">
-              <div style={{display: 'flex'}}>
-                <div style={{flex: 1, width: 500}}>
-                  {
-                    isEmpty(moduleParams)?(
-                      <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
-                        提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
-                      </div>
-                    ):(
-                      <FieldsSettingsTable {...tableParams}/>
-                    )
-                  }
-                </div>
-                <div style={{flex: 1}}>
-                  <Editor
-                    type="table"
-                    onRun={onClickRun}
-                    value={jsonEditorVal}
-                    shallowHeight={height}
-                  />
-                </div>
-              </div>
-              </Tabs.TabPane>
-              {
-                tableJsonEditorValsArr.map((k:any)=>(
-                  <Tabs.TabPane tab={k.title} key={k.tableCode}>
-                    <div style={{display: 'flex'}}>
-                      <div style={{flex: 1, width: 500}}>
-                        {
-                          !tablesConfigParams[k.tableCode]?(
-                            <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
-                              提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
-                            </div>
-                          ):(
-                            <FieldsSettingsTable {...tablesConfigParams[k.tableCode]}/>
-                          )
-                        }
-                      </div>
-                      <div style={{flex: 1}}>
-                        <Editor
-                          type="table"
-                          onRun={onClickRunDetailTables}
-                          value={k.columns}
-                          shallowHeight={height}
-                        />
-                      </div>
-                    </div>
-                  </Tabs.TabPane>
-                ))
-              }
-            </Tabs>
-          )
-        }
-      </Drawer>
-
-      {!visible && isAdmin() && <ConfigButton type='primary' onClick={() => setVisible(true)}>setting</ConfigButton>}
-    </div>
-  );
-});
-
-export default JsonQueryTable;
+// @ts-nocheck
+import React, { useState, useRef, useEffect, Fragment } from 'react';
+import { message, Button, Table, Tabs } from 'antd';
+import Drawer from './drawer';
+import ConfigButton from './configButton';
+import Editor from './jsonEditor';
+import request from '@/utils/request';
+import FieldsSettingsTable from './components/FieldsSettingsTable';
+import { isEmpty } from "lodash"
+import './index.less';
+import { getUserId } from '@/utils/LocalstorageUtils';
+
+function iterFileds (fields) {
+  let filedsValue = [];
+
+  function iter(field) {
+    if(Array.isArray(field.fields)) {
+      field.fields.forEach(item => {
+        const targetValue = iterFileds(item);
+        if(targetValue){
+          filedsValue.push(targetValue);
+        }
+      })
+    } else  {
+      return {
+        name: field.name,
+        isStaticCode: true,
+        label: field.label,
+      }
+    }
+
+    return {
+      container: {
+        name: field?.container?.props?.name,
+        title: field?.container?.props?.title
+      },
+      isStaticCode: true,
+      fields: filedsValue,
+    };
+  }
+
+  filedsValue = iter(fields)
+
+  return filedsValue;
+}
+
+function flatFileds (fields) {
+  let filedsValue = {
+  };
+  function iter(field, containerName) {
+    if(Array.isArray(field.fields)) {
+      if (field?.container?.props?.name) {
+        filedsValue[field?.container?.props?.name] = {
+          ...field,
+          fields: []
+        }
+      }
+      field.fields.forEach(item => {
+        iter(item, field?.container?.props?.name)
+      })
+    } else  {
+      filedsValue[containerName ? (containerName + field.name) : field.name] = field
+    }
+  }
+
+  iter(fields)
+
+  return filedsValue;
+}
+
+function convertFileds (fields, falltValue, faltFieldRange, containerName) {
+  let filedsValue = [];
+
+  function iter(field) {
+    if(Array.isArray(field.fields)) {
+      field.fields.forEach(item => {
+        const targetValue = convertFileds(item, falltValue, faltFieldRange, field?.container?.name);
+        if(targetValue){
+          if(item.dependency) {
+            targetValue.dependency = {
+              visible: {
+                ...item.dependency.visible,
+                type: (new Function('request','ctx', item.dependency.visible.type)).bind(null, request)
+              }
+            }
+          }
+          filedsValue.push(targetValue)
+        }
+      })
+    } else  {
+      const returnField = field.isStaticCode ? falltValue[containerName ? (containerName + field.name) : field.name] : faltFieldRange[field.name];
+      if (returnField) {
+        returnField.label = field?.label; 
+        if(field?.disabled){ // 字段设置只读属性
+          returnField.field.props.disabled = true;
+        }
+        if(field?.invisible){ // 字段设置不可见属性
+          returnField.initialVisible = false;
+        }
+        
+        if(Array.isArray(returnField.name)&&returnField.name?.includes("extensionFields")){
+          returnField.notShowLabel = true;
+        }
+      } else {
+      }
+      return returnField;
+    }
+
+    return {...falltValue[field?.container?.name], fields: filedsValue};
+  }
+
+  filedsValue = iter(fields)
+
+  return filedsValue;
+}
+
+function faltColumns(columns) {
+  let columnsValue = {}
+
+  columns.forEach(item => {
+    columnsValue[item.key] = {...item}
+  })
+
+  return columnsValue;
+}
+
+function faltCustomerFieldRange(fileds) {
+  let columnsValue = {}
+
+  fileds.forEach(item => {
+    columnsValue[item.name] = {...item}
+  })
+
+  return columnsValue;
+}
+
+//form存在新加container属性分组得情况 组合操作
+function combineContainer(originFields, currentFields){
+  let newCurrentFields = [...originFields];
+  currentFields.map((item: any) => {
+    if(!originFields.find((i: any) => i?.container?.props?.name == item?.container?.name)){
+      newCurrentFields = [...newCurrentFields, {
+        container: {
+          type: 'card',
+          props: {
+            title: item?.container?.title,
+            level: 1,
+            id: Math.random(),
+            isWhiteCard: true,
+            bordered: false,
+            name: item?.container?.name,
+          },
+        },
+        fields: item?.fields || []
+      }];
+    }
+  })
+  return newCurrentFields;
+}
+
+function hanleCallbackValue(codeProps, value, customerFields, cacheColumns = []) {
+  const faltFieldRange = faltCustomerFieldRange(customerFields);
+  // const falltValue = flatFileds({fields: codeProps.fields})
+  const falltValue = flatFileds({fields: combineContainer(codeProps.fields, value?.fields)})
+  let newCodeProps = {...codeProps};
+  newCodeProps.fields = convertFileds({fields: value.fields}, falltValue, faltFieldRange).fields;
+  if (codeProps.columns) {
+    const faltColumnsValue = faltColumns(codeProps.columns)
+    newCodeProps.columns = value.columns.map(item => {
+      if (item.isStaticCode) {
+        const cacheFieldProperty = cacheColumns.find(k => (k.key||k.dataIndex) == (item.key||item.dataIndex));
+        return {
+          ...faltColumnsValue[item.key],
+          ...cacheFieldProperty
+        }
+      } else {
+        //自定义字段-列字段
+        if(item?.key&&item?.key.includes('extensionFields')&&item?.key.includes(',')){
+          return {
+            ...item,
+            render: ({ record }: any) => {
+              try{
+                const { extensionFields = {} } = record;
+                const fieldName1= item?.key.split(',')[1]; //兼容没有fieldName的情况
+                const fieldName2 = `${fieldName1}Name`;
+                if(customerFields.length){
+                  const targetField = customerFields.find(k => k.name.includes(fieldName1));
+                  if(targetField){
+                    const { initialSource = [] } = targetField
+                    if(initialSource.length){
+                      return initialSource.find((d => d.value == extensionFields[fieldName1]))?.text || extensionFields[fieldName1];
+                    }
+                  }
+                }
+                return extensionFields[fieldName2] || extensionFields[fieldName1] ||  '';
+              }catch(e){
+                console.log('e',e);
+              }
+            }
+          }
+        }else{
+          return {
+            ...item
+          }
+        }
+      }
+    });
+
+    //进行列表搜索项自定义字段name替换 （排除是编辑表单的fields）
+    newCodeProps.fields = newCodeProps.fields.map(item => {
+      if(Array.isArray(item?.name)){
+        return {
+          ...item,
+          name: item?.realSearchName || item?.name
+        }
+      }
+      return item;
+    });
+
+  }
+
+  return newCodeProps;
+}
+
+function isAdmin() {
+  const username = getUserId();
+
+  return username === 'admin' || username === 'uiuiui'
+}
+
+const tableStyleList = [
+  {
+    type: '快速搜索',
+    img: 'https://img.alicdn.com/tfs/TB1al1JqHr1gK0jSZR0XXbP8XXa-40-40.svg',
+    url: '/list/singlesearch',
+  },
+  {
+    type: '高级搜索',
+    img: 'https://img.alicdn.com/tfs/TB1QgKIqQL0gK0jSZFtXXXQCXXa-40-40.svg',
+    url: '/list/advancedsearch',
+  },
+  {
+    type: '一般搜索',
+    img: 'https://img.alicdn.com/tfs/TB1xHCPqRr0gK0jSZFnXXbRRXXa-40-40.svg',
+    url: '/list/basic',
+  },
+  {
+    type: '无分页表格',
+    img: 'https://img.alicdn.com/tfs/TB1txuMqQL0gK0jSZFxXXXWHVXa-40-40.svg',
+    url: '/list/nopagination',
+  },
+  {
+    type: '分步查询表格',
+    img: 'https://img.alicdn.com/tfs/TB10IOmGkL0gK0jSZFAXXcA9pXa-53-46.svg',
+    url: '/list/stepquerytable',
+  },
+];
+const JsonQueryTable = React.memo(props => {
+  const {
+    callBack, // 主保存函数回调
+    codeProps, // 整体的配置数据
+    customerFields, //可选的配置字段
+    initialSetting, //上一次添加自定义字段后保存的数据
+    pageType, //页面权限code
+    detailTablesSetting = [], //详情明细表格列配置数据
+    saveTableCallBack, //详情明细保存函数回调
+  } = props;
+
+  let codeFilter = {};
+  if (codeProps.columns) { // table
+    codeFilter.columns = codeProps.columns.map(item => ({
+      key: item.key,
+      isStaticCode: true,
+      title: item.title
+    }))
+
+    codeFilter.fields = codeProps.fields.map(item => ({
+      name: item.name,
+      isStaticCode: true,
+      label: item.label,
+      notShowLabel: item.notShowLabel || false
+    }))
+  }  else {
+    codeFilter.fields = iterFileds({fields: codeProps.fields}).fields
+  }
+
+  const styleRef = useRef(null);
+
+  const [visible, setVisible] = useState(false)
+  const [code, setCode] = useState(codeProps);
+  const [init, setInit] = useState(true);
+  const [jsonEditorVal, setJsonEditorVal] = useState(initialSetting || codeFilter);
+  const [moduleParams, setModuleParams] = useState({});
+  const [activeKey, setActiveKey] = useState('main'); //默认详情页配置
+  const [tablesConfigParams, setTablesConfigParams] = useState({});
+  const [tableJsonEditorValsArr, setTableJsonEditorValsArr] = useState([]);
+
+  useEffect(()=>{
+    Promise.all([
+      request.get(`/basic/flow/businessFieldGroup/one?moduleType=2&layoutPoint=${pageType}`),
+    ]).then(([res] )=> {
+      const { code, data } = res?.data || {};
+      if (code === '000000') {
+        if(data){
+          const { businessType, code:fieldGroup, moduleType, moduleRelationId } = data;
+          setModuleParams({
+            businessType,
+            fieldGroup,
+            moduleType,
+            moduleRelationId
+          });
+        }
+      }
+    })
+  },[]);
+
+  useEffect(()=>{
+    //明细表的配置数据
+    const axiosArr = detailTablesSetting.map((item:any) => request.get(`/basic/flow/businessFieldGroup/one?moduleType=2&layoutPoint=${item.tableCode}`));
+    Promise.all(axiosArr).then(([...resArr])=> {
+      let configParams = {};
+      detailTablesSetting.map((item:any, index:number)=>{
+        const { code, data } = resArr[index]?.data || {};
+        if(data){
+          const { businessType, code:fieldGroup, moduleType } = data;
+          configParams [item.tableCode] = {
+            businessType,
+            fieldGroup,
+            moduleType,
+            tableFlag: true
+          }
+        }
+      })
+      setTablesConfigParams({
+        ...configParams,
+      });
+    })
+
+    const detailTableCodeFilter = detailTablesSetting.map(item => {
+      if(item?.initialSetting && item?.initialSetting.length){
+        return {
+          ...item,
+          columns: item?.initialSetting
+        }
+      }
+      return {
+        ...item,
+        columns: item?.columns.map(childItem => ({
+          key: childItem.key || childItem.dataIndex,
+          dataIndex: childItem.dataIndex || childItem.key,
+          isStaticCode: true,
+          title: childItem.title
+        }))
+      }
+    });
+    setTableJsonEditorValsArr([...detailTableCodeFilter]);
+    const lastRes = detailTableCodeFilter.map(item => {
+      if(item?.initialSetting && item?.initialSetting.length){
+        const codeProps = {
+          fields: [],
+          columns: item?.columns,
+        };
+        const newValue = {
+          fields: [],
+          columns: item.initialSetting
+        };
+        const result = hanleCallbackValue(codeProps, newValue, item?.customerFields, item?.cacheColumns);
+        return {
+          ...item,
+          columns: result?.columns
+        }
+      }
+      return item;
+    });
+    if(lastRes.length){
+      saveTableCallBack(lastRes, false);
+    }
+  },[detailTablesSetting.length]);
+  
+  const onClickRun = (value, isSave) => {
+    setJsonEditorVal(value);
+
+    try {
+      setCode(value);
+      callBack(hanleCallbackValue(codeProps, value, customerFields), isSave, value);
+    } catch (e) {
+      message.error(e);
+    }
+  };
+
+  //明细表保存
+  const onClickRunDetailTables = (value, isSave, tableCode, tableSouce) =>{
+    const targetCode = tableCode || activeKey;
+    const targetTableSource = tableSouce || tableJsonEditorValsArr;
+    const newArr = targetTableSource.map(item => {
+      if(item.tableCode == targetCode){
+        return {
+          ...item,
+          columns: value
+        }
+      }
+      return item
+    });
+    setTableJsonEditorValsArr([...newArr]);
+
+    try {
+      const target = targetTableSource.find(item=>item.tableCode == targetCode);
+      const codeProps = {
+        fields: [],
+        columns: target?.columns,
+      };
+      const newValue = {
+        fields: [],
+        columns: value
+      };
+      const result = hanleCallbackValue(codeProps, newValue, target?.customerFields, target?.cacheColumns);
+      saveTableCallBack({ columns: result.columns, tableCode: targetCode }, isSave, value);
+    } catch (e) {
+      message.error(e);
+    }
+  }
+  
+  React.useEffect(() => {
+    localStorage.setItem('jsonEditorVal',JSON.stringify(jsonEditorVal||{}))
+  }, [jsonEditorVal]);
+
+  React.useEffect(() => {
+    if (initialSetting) {
+      onClickRun(initialSetting);
+      setJsonEditorVal(initialSetting)
+    }
+  }, [initialSetting]);
+
+  const height =
+    styleRef?.current?.clientHeight || styleRef?.current?.offsetHeight;
+
+  const tableParams = {
+    ...moduleParams,
+    jsonEditorVal,
+    codeProps,
+  };
+
+  return (
+    <div>
+      <Drawer visible={visible} width={1400} onClose={() => setVisible(false)} className={'customFieldsDrawer'}>
+      {
+          detailTablesSetting.length == 0 &&(
+            <div style={{display: 'flex'}}>
+              <div style={{flex: 1, width: 500}}>
+                {
+                  isEmpty(moduleParams)?(
+                    <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
+                      提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+                    </div>
+                  ):(
+                    <FieldsSettingsTable {...tableParams}/>
+                  )
+                }
+              </div>
+              <div style={{flex: 1}}>
+                <Editor
+                  type="table"
+                  onRun={onClickRun}
+                  value={jsonEditorVal}
+                  shallowHeight={height}
+                />
+              </div>
+            </div>
+          )
+        }
+        {
+          detailTablesSetting.length > 0 && (
+            <Tabs defaultActiveKey={activeKey} onChange={(v: any) => setActiveKey(v)}>
+              <Tabs.TabPane tab="详情页配置" key="main">
+              <div style={{display: 'flex'}}>
+                <div style={{flex: 1, width: 500}}>
+                  {
+                    isEmpty(moduleParams)?(
+                      <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
+                        提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+                      </div>
+                    ):(
+                      <FieldsSettingsTable {...tableParams}/>
+                    )
+                  }
+                </div>
+                <div style={{flex: 1}}>
+                  <Editor
+                    type="table"
+                    onRun={onClickRun}
+                    value={jsonEditorVal}
+                    shallowHeight={height}
+                  />
+                </div>
+              </div>
+              </Tabs.TabPane>
+              {
+                tableJsonEditorValsArr.map((k:any)=>(
+                  <Tabs.TabPane tab={k.title} key={k.tableCode}>
+                    <div style={{display: 'flex'}}>
+                      <div style={{flex: 1, width: 500}}>
+                        {
+                          !tablesConfigParams[k.tableCode]?(
+                            <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
+                              提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+                            </div>
+                          ):(
+                            <FieldsSettingsTable {...tablesConfigParams[k.tableCode]}/>
+                          )
+                        }
+                      </div>
+                      <div style={{flex: 1}}>
+                        <Editor
+                          type="table"
+                          onRun={onClickRunDetailTables}
+                          value={k.columns}
+                          shallowHeight={height}
+                        />
+                      </div>
+                    </div>
+                  </Tabs.TabPane>
+                ))
+              }
+            </Tabs>
+          )
+        }
+      </Drawer>
+
+      {!visible && isAdmin() && <ConfigButton type='primary' onClick={() => setVisible(true)}>setting</ConfigButton>}
+    </div>
+  );
+});
+
+export default JsonQueryTable;