@bit-sun/business-component 2.1.23 → 2.2.0-alpha.1

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

@@ -0,0 +1,328 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: JSON处理
+order: 9
+---
+
+# HomePageWrapper
+
+
+## 首页标题组件
+
+```tsx
+import JsonQueryTable from './index';
+import React, { useState } from 'react';
+
+export default () => {
+  
+  const config = {
+    rowKey: 'id',
+    columns: [
+      {
+        key: 'id',
+        title: 'id',
+        sorter: true,
+      },
+      {
+        key: 'senderName',
+        title: 'senderName',
+        filterRender: 'search',
+      }
+    ],
+    actionsRender: [
+      {
+        type: 'button',
+        props: {
+          children: 'create' ,
+          type: 'primary',
+        },
+        action: {
+          type: 'route',
+          path: '/form/card/create',
+        },
+      },
+    ],
+    fields: [
+          {
+            name: 'objType1',
+            label: '抬头',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'objCode1',
+            label: '税号',
+            field: {
+              type: 'input',
+            },
+          }],
+    remoteDataSource: {
+      url: '/api/manage/list.json',
+      method: 'post',
+    },
+  };
+
+
+  const config1 = {
+  mode: 'create',
+  actionsPosition: 'bottom',
+  itemLayout: {
+    cols: {
+      xxl: 4,
+      xl: 3,
+      lg: 2,
+      md: 2,
+      sm: 1,
+      xs: 1
+    }
+  },
+  actionsRender: [{
+    type: 'button',
+    props: {
+      children: 'Cancel'
+    }
+  }, {
+    type: 'button',
+    props: {
+      children: 'Submit',
+      type: 'primary'
+    },
+    action: [{
+      type: 'request',
+      url: '/api/manage/add.json',
+      method: 'post'
+    }, 'back']
+  }],
+  fields: [
+      {
+        container: {
+          type: 'card1',
+          props: {
+            name: 'card1'
+          }
+        },
+        itemLayout: {
+          span: 12,
+        },
+        fields: [
+          {
+            name: 'objType1',
+            label: '抬头',
+            field: {
+              type: 'input1',
+            },
+          },
+          {
+            name: 'objCode',
+            label: '税号',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'use',
+            label: '单位地址',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'detail',
+            label: '电话',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'consignee',
+            label: '开户银行',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'phone',
+            label: '银行账户',
+            field: {
+              type: 'input',
+            },
+          },
+        ],
+      },
+      {
+        container: {
+          type: 'card2',
+          props: {
+            title: '财务信息',
+            id: Math.random(),
+            level: 1,
+            name: 'card2'
+          },
+        },
+        itemLayout: {
+          span: 12,
+        },
+        fields: [
+          {
+        container: {
+          type: 'card3',
+          props: {
+            name: 'card3'
+          }
+        },
+        itemLayout: {
+          span: 12,
+        },
+        fields: [
+          {
+            name: 'objType1',
+            label: '抬头',
+            field: {
+              type: 'input3434',
+            },
+          },
+          {
+            name: 'objCode1',
+            label: '税号',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'use1',
+            label: '单位地址',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'detail1',
+            label: '电话',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'consignee1',
+            label: '开户银行',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'phone1',
+            label: '银行账户',
+            field: {
+              type: 'input',
+            },
+          },
+        ],
+      },
+          {
+            name: 'objCode2',
+            label: '税号',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'use2',
+            label: '单位地址',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'detail2',
+            label: '电话',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'consignee2',
+            label: '开户银行',
+            field: {
+              type: 'input',
+            },
+          },
+          {
+            name: 'phone2',
+            label: '银行账户',
+            field: {
+              type: 'input',
+            },
+          },
+        ],
+      },
+    ],
+  submit: {},
+  remoteValues: {
+    url: '/api/manage/detail.json',
+    method: 'post',
+    params: {
+      id: 19
+    }
+  }
+};;
+
+
+  
+
+  return (
+    <JsonQueryTable codeProps={{...config1}} initialSetting={{
+      columns: [],
+    fields: [{
+      label: "免费理由",
+      name:"F10090",
+    }]
+    }} customerFields={[{
+      label: "免费理由",
+      name:"F10090",
+      field: {
+        type: 'select'
+      },
+      initialSource: [
+        {text: '销售会谈', value: '001'},
+        {text: '销售会2', value: '002'}
+      ]
+    },{
+      label: "免费理由3",
+      name:"F100901",
+      field: {
+        type: 'select'
+      },
+      initialSource: [
+        {text: '销售会谈', value: '001'},
+        {text: '销售会2', value: '002'}
+      ]
+    },{
+      label: "免费理由1",
+      name:"F100902",
+      field: {
+        type: 'select'
+      },
+      initialSource: [
+        {text: '销售会谈', value: '001'},
+        {text: '销售会2', value: '002'}
+      ]
+    },{
+      label: "免费理由2",
+      name:"F100903",
+      field: {
+        type: 'select'
+      },
+      initialSource: [
+        {text: '销售会谈', value: '001'},
+        {text: '销售会2', value: '002'}
+      ]
+    }]} callBack={(value) => {console.log('call',value)}} />
+  );
+};
+```

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

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