@bit-sun/business-component 2.1.24 → 2.2.0-alpha.10

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

@@ -1,320 +1,449 @@
-// @ts-nocheck
-import React, { useState, useRef, useEffect } from 'react';
-import { message, Button, Table } from 'antd';
-import Drawer from './drawer';
-import ConfigButton from './configButton';
-import Editor from './jsonEditor';
-import axios from 'axios';
-import FieldsSettingsTable from './components/FieldsSettingsTable';
-import { isEmpty } from "lodash"
-import './index.less';
-
-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){
-          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(Array.isArray(returnField.name)&&returnField.name?.includes("extensionFields")){
-          returnField.notShowLabel = true;
-        }
-      } else {
-        debugger
-      }
-      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;
-}
-
-function hanleCallbackValue(codeProps, value, customerFields) {
-  const faltFieldRange = faltCustomerFieldRange(customerFields)
-  const falltValue = flatFileds({fields: codeProps.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) {
-        return faltColumnsValue[item.key]
-      } else {
-        //自定义字段-列字段
-        if(item?.key&&item?.key.includes('extensionFields')&&item?.key.includes(',')){
-          return {
-            ...item,
-            render: ({ record }: any) => {
-              try{
-                const lastName1= item?.key.split(',')[1]; //兼容没有fieldName的情况
-                const lastName2 = `${lastName1}Name`;
-                const target = record?.extensionFields || {};
-                return target[lastName2] || target[lastName1] ||  '';
-              }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 = JSON.parse(localStorage.getItem('userInfo') || '{}')
-    ?.accountPersonDetail?.username;
-
-  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
-  } = 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
-  }
-  console.log('codeFilter',codeFilter)
-
-  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({});
-
-  useEffect(()=>{
-    Promise.all([
-      axios.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
-          });
-        }
-      } 
-    })
-  },[]);
-
-  const onClickRun = (value, isSave) => {
-    setJsonEditorVal(value);
-
-    try {
-      setCode(value);
-      callBack(hanleCallbackValue(codeProps, value, customerFields), 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={800} onClose={() => setVisible(false)} className={'customFieldsDrawer'}>
-        <div ref={styleRef}>
-        
-        </div>
-        {
-          isEmpty(moduleParams)?(
-            <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
-              提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
-            </div>
-          ):(
-            <FieldsSettingsTable {...tableParams}/>
-          )
-        }
-        <Editor
-          type="table"
-          onRun={onClickRun}
-          value={jsonEditorVal}
-          shallowHeight={height}
-        />
-      </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 axios from 'axios';
+import FieldsSettingsTable from './components/FieldsSettingsTable';
+import { isEmpty } from "lodash"
+import './index.less';
+
+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){
+          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(Array.isArray(returnField.name)&&returnField.name?.includes("extensionFields")){
+          returnField.notShowLabel = true;
+        }
+      } else {
+        debugger
+      }
+      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;
+}
+
+function hanleCallbackValue(codeProps, value, customerFields) {
+  const faltFieldRange = faltCustomerFieldRange(customerFields)
+  const falltValue = flatFileds({fields: codeProps.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) {
+        return faltColumnsValue[item.key]
+      } else {
+        //自定义字段-列字段
+        if(item?.key&&item?.key.includes('extensionFields')&&item?.key.includes(',')){
+          return {
+            ...item,
+            render: ({ record }: any) => {
+              try{
+                const lastName1= item?.key.split(',')[1]; //兼容没有fieldName的情况
+                const lastName2 = `${lastName1}Name`;
+                const target = record?.extensionFields || {};
+                return target[lastName2] || target[lastName1] ||  '';
+              }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 = JSON.parse(localStorage.getItem('userInfo') || '{}')
+    ?.accountPersonDetail?.username;
+
+  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([
+      axios.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) => axios.get(`/basic/flow/businessFieldGroup/one?moduleType=2&layoutPoint=${item.tableCode}`));
+    Promise.all(axiosArr).then(([...resArr])=> {
+      detailTablesSetting.map((item:any, index:number)=>{
+        const { code, data } = resArr[index]?.data || {};
+        if(data){
+          const { businessType, code:fieldGroup, moduleType } = data;
+          setTablesConfigParams({
+            ...tablesConfigParams,
+            [item.tableCode]: {
+              businessType,
+              fieldGroup,
+              moduleType,
+              tableFlag: true
+            }
+          });
+        }
+      })
+    })
+
+    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]);
+    detailTableCodeFilter.map(item => {
+      if(item?.initialSetting && item?.initialSetting.length){
+        onClickRunDetailTables(item.initialSetting, false, item.tableCode, detailTableCodeFilter);
+      }
+    })
+  },[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);
+      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={800} onClose={() => setVisible(false)} className={'customFieldsDrawer'}>
+      {
+          detailTablesSetting.length == 0 &&(
+            <Fragment>
+              {
+                isEmpty(moduleParams)?(
+                  <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
+                    提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+                  </div>
+                ):(
+                  <FieldsSettingsTable {...tableParams}/>
+                )
+              }
+              <Editor
+                type="table"
+                onRun={onClickRun}
+                value={jsonEditorVal}
+                shallowHeight={height}
+              />
+            </Fragment>
+          )
+        }
+        {
+          detailTablesSetting.length > 0 && (
+            <Tabs defaultActiveKey={activeKey} onChange={(v: any) => setActiveKey(v)}>
+              <Tabs.TabPane tab="详情页配置" key="main">
+                {
+                  isEmpty(moduleParams)?(
+                    <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
+                      提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+                    </div>
+                  ):(
+                    <FieldsSettingsTable {...tableParams}/>
+                  )
+                }
+                <Editor
+                  type="table"
+                  onRun={onClickRun}
+                  value={jsonEditorVal}
+                  shallowHeight={height}
+                />
+              </Tabs.TabPane>
+              {
+                tableJsonEditorValsArr.map((k:any)=>(
+                  <Tabs.TabPane tab={k.title} key={k.tableCode}>
+                    {
+                      !tablesConfigParams[k.tableCode]?(
+                        <div style={{padding:"10px 0", fontSize:"16px", fontWeight:"bolder"}}>
+                          提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+                        </div>
+                      ):(
+                        <FieldsSettingsTable {...tablesConfigParams[k.tableCode]}/>
+                      )
+                    }
+                    <Editor
+                      type="table"
+                      onRun={onClickRunDetailTables}
+                      value={k.columns}
+                      shallowHeight={height}
+                    />
+                  </Tabs.TabPane>
+                ))
+              }
+            </Tabs>
+          )
+        }
+      </Drawer>
+
+      {!visible && isAdmin() && <ConfigButton type='primary' onClick={() => setVisible(true)}>setting</ConfigButton>}
+    </div>
+  );
+});
+
+export default JsonQueryTable;