@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

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

@@ -0,0 +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;