@bit-sun/business-component 2.2.49 → 2.3.0-alpha.2

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

@@ -60,6 +60,7 @@ export default (props: any) => {
 
   const [height, setHeight]: any = useState('100vh');
   const sortTableRef = useRef(null);
+  const searchTableRef = useRef(null);
 
   const bsTableCode = tableCode || window.location.hash; //设置列字段的唯一标识
   // 获取table高度
@@ -367,20 +368,17 @@ export default (props: any) => {
         props: {
           children: (
             <span className="ant-dropdown-link">
-                <Dropdown overlay={ 
-                  <Menu >
+                <Dropdown overlay={
+                  <Menu>
                     <Menu.Item>
-                      <SortableTable
-                        ref={sortTableRef}
-                        setShowColumns={setShowColumns}
-                        showColumn={showColumn}
-                        datasource={value?.columns || []}
-                        bsTableCode={bsTableCode}
-                      />
+                      <div 
+                        onClick={sortTableRef?.current?.showModal} 
+                        style={{fontSize:14, textAlign: 'center'}}
+                      >列设置</div>
                     </Menu.Item>
                     <Menu.Item>
                       <SearchItemTable
-                        ref={sortTableRef}
+                        ref={searchTableRef}
                         setShowSearchFields={setShowSearchFields}
                         showSearchFields={showSearchFields}
                         datasource={value?.fields || []}
@@ -388,7 +386,7 @@ export default (props: any) => {
                       />
                     </Menu.Item>
                   </Menu> 
-                } placement="bottom" >
+                } placement="bottomRight" >
                   <span className="ant-dropdown-link">
                     <img width={32}  src={shezhi} />
                   </span>
@@ -523,5 +521,15 @@ export default (props: any) => {
     }),
     [value, checkedList, showColumn, props.statusMapping, showSearchFields],
   );
-  return <MemoQueryTable {...memoConfig} />;
+  return <>
+    <MemoQueryTable {...memoConfig} />
+    <SortableTable
+      ref={sortTableRef}
+      setShowColumns={setShowColumns}
+      showColumn={showColumn}
+      datasource={value?.columns || []}
+      bsTableCode={bsTableCode}
+      onlyModal
+    />
+  </>;
 };

package/src/components/Business/BsSulaQueryTable/setting.tsx

@@ -8,6 +8,7 @@ import {
   Input,
   Button,
   Tooltip,
+  Typography,
 } from 'antd';
 import {
   SortableContainer,
@@ -56,19 +57,23 @@ class SortableTable extends React.Component {
           fixed: item.fixed,
         }))
       : '';
-    axios({
-      url: '/user/appConfig/saveUserOrder',
-      method: 'POST',
-      data: {
-        code: that.state.bsTableCode,
-        detail: configvalue ? JSON.stringify(configvalue) : '',
-      },
-    }).then((res:any) => {
-      if (res?.data?.status === '0') {
-        this.patchConfigToLocalstorage(configvalue)
-      } else {
-        message.error('保存表头列自定义失败，请稍后尝试');
-      }
+    return new Promise((resolve: any, reject: any) => {
+      axios({
+        url: '/user/appConfig/saveUserOrder',
+        method: 'POST',
+        data: {
+          code: that.state.bsTableCode,
+          detail: configvalue ? JSON.stringify(configvalue) : '',
+        },
+      }).then((res:any) => {
+        if (res?.data?.status === '0') {
+          this.patchConfigToLocalstorage(configvalue);
+          resolve({ status: '0' });
+        } else {
+          message.error('保存表头列自定义失败，请稍后尝试');
+          reject('');
+        }
+      })
     })
   };
 
@@ -447,7 +452,7 @@ class SortableTable extends React.Component {
     //   this.patchUserColumnConfig('');
     //   return;
     // }
-    this.patchUserColumnConfig(sortDataSource);
+    return this.patchUserColumnConfig(sortDataSource);
   };
 
   handleCancel = (e: React.MouseEvent<HTMLElement>) => {
@@ -478,7 +483,17 @@ class SortableTable extends React.Component {
         ],
       },
       () => {
-        this.handleOk();
+        this.handleOk()
+         .then((res: any) => {
+            if (res.status === '0') {
+              message.success(<span>
+                字段已隐藏，如需重新显示请前往<Typography.Link
+                  underline
+                  onClick={this.showModal}
+                >列设置</Typography.Link>
+              </span>)
+            }
+         });
       },
     );
   };
@@ -606,6 +621,7 @@ class SortableTable extends React.Component {
   };
 
   render() {
+    const { onlyModal } = this.props;
     const {
       dataSource,
       searchDataSource,
@@ -823,7 +839,11 @@ class SortableTable extends React.Component {
             </div>
           </Modal>
         )}
-        <div onClick={this.showModal} style={{fontSize:14}}>列设置</div>
+        {
+          !onlyModal 
+            ? <div onClick={this.showModal} style={{fontSize:14}}>列设置</div>
+            : ''
+        }
       </div>
     );
   }

package/src/components/Business/BsSulaQueryTable/utils.tsx

@@ -572,33 +572,35 @@ export const renderFixed2 = (text: any) => text;
 //设置queryTable默认列宽
 export const getItemDefaultWidth = (item: any) => {
   let defaultWidth = 200;
-  let lowerCaseKey = (item.key || item.dataIndex).toLowerCase();
-  switch (true) {
-    case item?.title === '操作' || lowerCaseKey === 'operate':
-      defaultWidth = 60;
-      break;
-    case lowerCaseKey.indexOf('number') > -1:
-    case lowerCaseKey.indexOf('quantity') > -1:
-    case lowerCaseKey.indexOf('amount') > -1:
-      defaultWidth = 90;
-      break;
-    case (lowerCaseKey.indexOf('no') > -1):
-      defaultWidth = 200;
-      break;
-    case lowerCaseKey.indexOf('code') > -1:
-      defaultWidth = 170;
-      break;
-    case lowerCaseKey.indexOf('time') > -1:
-      defaultWidth = 130;
-      break;
-    case lowerCaseKey.indexOf('status') > -1:
-      defaultWidth = 100;
-      break;
-    case lowerCaseKey.indexOf('user') > -1:
-      defaultWidth = 130;
-      break;
-    default:
-      break;
+  let lowerCaseKey = (item.key || item.dataIndex)?.toLowerCase();
+  if (lowerCaseKey) {
+    switch (true) {
+      case item?.title === '操作' || lowerCaseKey === 'operate':
+        defaultWidth = 60;
+        break;
+      case lowerCaseKey.indexOf('number') > -1:
+      case lowerCaseKey.indexOf('quantity') > -1:
+      case lowerCaseKey.indexOf('amount') > -1:
+        defaultWidth = 90;
+        break;
+      case (lowerCaseKey.indexOf('no') > -1):
+        defaultWidth = 200;
+        break;
+      case lowerCaseKey.indexOf('code') > -1:
+        defaultWidth = 170;
+        break;
+      case lowerCaseKey.indexOf('time') > -1:
+        defaultWidth = 130;
+        break;
+      case lowerCaseKey.indexOf('status') > -1:
+        defaultWidth = 100;
+        break;
+      case lowerCaseKey.indexOf('user') > -1:
+        defaultWidth = 130;
+        break;
+      default:
+        break;
+    }
   }
   return defaultWidth;
 };
@@ -608,7 +610,7 @@ export const getItemDefaultWidth = (item: any) => {
  * @param params 要应用于查询的参数
  * @returns 返回处理后的查询参数
  */
- export function queryParams(params: any, flag?: any) {
+export function queryParams(params: any, flag?: any) {
   for (const key in params) {
     if (Object.prototype.hasOwnProperty.call(params, key)) {
       const element = params[key];
@@ -678,7 +680,7 @@ export const getItemDefaultWidth = (item: any) => {
  * @param code 对应权限值
  * @returns boolean
  */
- export const authFn = (code?: any) => {
+export const authFn = (code?: any) => {
   const authButton = localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES)
     ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) as string)
     : [];

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

@@ -12,6 +12,7 @@ export default (props:any)=>{
     codeProps='', 
     moduleType, 
     moduleRelationId, 
+    tableFlag = false
   } = props;
   
   const ref = useRef(null);
@@ -108,6 +109,9 @@ export default (props:any)=>{
         key: 'codeSnippet',
         title: '代码片段',
         render: ({text,record}:any) => {
+          if(tableFlag){
+            return <div> 列表：{`{"key": "extensionFields,${record.code}","dataIndex": "extensionFields,${record.code}","title": "${record.name}"},`}</div>
+          }
           if (!codeProps.columns) {
             return <div>表单：{`{"name": "extensionFields,${record.code}","label": "${record.name}"},`}</div>
           }

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import React, { useState, useRef, useEffect } from 'react';
-import { message, Button, Table } from 'antd';
+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';
@@ -76,13 +76,28 @@ function convertFileds (fields, falltValue, faltFieldRange, containerName) {
       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('axios','ctx', item.dependency.visible.type)).bind(null, axios)
+              }
+            }
+          }
           filedsValue.push(targetValue)
         }
       })
     } else  {
       const returnField = field.isStaticCode ? falltValue[containerName ? (containerName + field.name) : field.name] : faltFieldRange[field.name];
       if (returnField) {
-        returnField.label = field?.label;
+        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;
         }
@@ -120,16 +135,45 @@ function faltCustomerFieldRange(fileds) {
   return columnsValue;
 }
 
-function hanleCallbackValue(codeProps, value, customerFields) {
-  const faltFieldRange = faltCustomerFieldRange(customerFields)
-  const falltValue = flatFileds({fields: codeProps.fields})
+//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) {
-        return faltColumnsValue[item.key]
+        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(',')){
@@ -137,10 +181,19 @@ function hanleCallbackValue(codeProps, value, customerFields) {
             ...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] ||  '';
+                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);
               }
@@ -205,11 +258,13 @@ const tableStyleList = [
 ];
 const JsonQueryTable = React.memo(props => {
   const {
-    callBack,
-    codeProps,
-    customerFields,
-    initialSetting,
-    pageType
+    callBack, // 主保存函数回调
+    codeProps, // 整体的配置数据
+    customerFields, //可选的配置字段
+    initialSetting, //上一次添加自定义字段后保存的数据
+    pageType, //页面权限code
+    detailTablesSetting = [], //详情明细表格列配置数据
+    saveTableCallBack, //详情明细保存函数回调
   } = props;
 
   let codeFilter = {};
@@ -229,7 +284,6 @@ const JsonQueryTable = React.memo(props => {
   }  else {
     codeFilter.fields = iterFileds({fields: codeProps.fields}).fields
   }
-  console.log('codeFilter',codeFilter)
 
   const styleRef = useRef(null);
 
@@ -238,6 +292,9 @@ const JsonQueryTable = React.memo(props => {
   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([
@@ -258,6 +315,69 @@ const JsonQueryTable = React.memo(props => {
     })
   },[]);
 
+  useEffect(()=>{
+    //明细表的配置数据
+    const axiosArr = detailTablesSetting.map((item:any) => axios.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);
 
@@ -269,6 +389,38 @@ const JsonQueryTable = React.memo(props => {
     }
   };
 
+  //明细表保存
+  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]);
@@ -291,25 +443,88 @@ const JsonQueryTable = React.memo(props => {
 
   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"}}>
-              提示：业务对象未维护，请在通用单据对应业务类型下维护业务对象
+      <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>
-          ):(
-            <FieldsSettingsTable {...tableParams}/>
           )
         }
-        <Editor
-          type="table"
-          onRun={onClickRun}
-          value={jsonEditorVal}
-          shallowHeight={height}
-        />
+        {
+          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>}

package/src/components/Business/JsonQueryTable/static.ts

@@ -13,7 +13,7 @@ const normalMultipleSelectProps = {
   },
 };
 // inputType显示类型 10输入框 20单选 30多选 40公式 |||||  valueType字段类型
-export const inputTypes:any = {
+export const inputTypes: any = {
   20: {
     10: {
       type: 'select',
@@ -128,7 +128,7 @@ export const inputTypes:any = {
       type: 'bs-employeeSearchSelect',
       props: {
         ...normalSingleSelectProps,
-        requestConfig: { mappingValueField: 'employeeNumber' },
+        requestConfig: { mappingValueField: 'employeeNumber', filterInit: 'qp-employeeNumber-like', },
       },
     },
     280: {
@@ -291,7 +291,7 @@ export const inputTypes:any = {
       type: 'bs-employeeSearchSelect',
       props: {
         ...normalMultipleSelectProps,
-        requestConfig: { mappingValueField: 'employeeNumber' },
+        requestConfig: { mappingValueField: 'employeeNumber', filterInit: 'qp-employeeNumber-like', },
       },
     },
     280: {
@@ -368,13 +368,13 @@ export const choiceType = Object.freeze({
   340: '规则模板选择器',
   350: '营销区域选择器',
 });
-export const inputType:any ={
+export const inputType: any = {
   10: '输入',
   20: '单选',
   30: '多选',
   40: '公式',
 };
-export const valueType:any = {
+export const valueType: any = {
   10: '文本',
   20: '短整数',
   21: '长整数',