refactor: 合并表头

田强
1 parent 0cc560e7
Showing 6 changed files with 145 additions and 101 deletions
libs
package.json
src/components/view-render/index.tsx
src/pages/form/util.tsx
src/pages/list-view/index.tsx
src/pages/list-view/util.tsx
--- a/libs @ 737655fc
+++ b/libs @ 737655fc
-Subproject commit 16bddbb35931fb0371a6a31229de0fee5dddfe02
+Subproject commit 737655fcfa7b7a088a8e554aafadb982789b7c74
--- a/package.json
View file @b6d9ac7
+++ b/package.json
View file @b6d9ac7
@@ -28,11 +28,11 @@
     "@antv/x6": "^1.34.6",
     "@antv/x6-react-shape": "^1.6.0",
     "@formulajs/formulajs": "^3.1.7",
-    "@qx/common": "0.2.12-beta.5",
+    "@qx/common": "^0.2.13",
     "@qx/form-design": "^0.0.35",
-    "@qx/form-render": "0.0.51",
+    "@qx/form-render": "^0.0.60",
     "@qx/utils": "^0.0.37",
-    "@qx/view-render": "0.1.9-beta.19",
+    "@qx/view-render": "0.1.19",
     "@tinymce/tinymce-react": "^4.2.0",
     "ahooks": "^3.7.2",
     "antd": "^4.24.1",
--- a/src/components/view-render/index.tsx
View file @b6d9ac7
+++ b/src/components/view-render/index.tsx
View file @b6d9ac7
-// import { QIXIAO_TOKEN } from '@/libs/token';
+import { QIXIAO_TOKEN } from '@/libs/token';
 import { SYSTEM_WIDGETS } from '@/packages/qx-form-generator/src/utils/common';
 import QxIcon from '@/packages/qx-icon';
 import { RelMoreModal, RelSingleModal } from '@/pages/app-view/form';
@@ -43,7 +43,7 @@ interface QxRuntimeTableProps {
   sort?: any[];
   onChange?: (pagination: any, filters: any, sorter: any) => void;
   [propName: string]: any;
-  bodyHeight?: number;
+  bodyHeight?: number
 }
 const QxRuntimeTable: React.FC<QxRuntimeTableProps> = (props) => {
@@ -84,15 +84,11 @@ const QxRuntimeTable: React.FC<QxRuntimeTableProps> = (props) => {
     return customAlphabet('abcdefghijklmnopqistuvwxyz', 6)();
   }
-  const handleCellClick = (
-    record: any,
-    schemaData: QxTableCellAPISchema,
-    info?: any,
-  ) => {
+  const handleCellClick = (record: any, schemaData: QxTableCellAPISchema, info?: any) => {
     // console.log(record,schemaData,info)
     setRowData(record); //点击行的数据
     setCellSchema(schemaData); //列的schema
-    setClickInfo(info || ''); // 点击标签的data_title id
+    setClickInfo(info || '') // 点击标签的data_title id
     setRandom(getId());
   };
@@ -104,10 +100,7 @@ const QxRuntimeTable: React.FC<QxRuntimeTableProps> = (props) => {
       //1、关联记录以标签显示的时候，直接弹出该条数据详情
       //2、关联记录以表格显示的时候，弹出关联记录表格
       if (cellSchema?.widget === 'relSelector') {
-        if (
-          cellSchema?.mode === 'TABLE' &&
-          (rowData[cellSchema?.dataIndex] || []).length
-        ) {
+        if (cellSchema?.mode === 'TABLE' && (rowData[cellSchema?.dataIndex] || []).length) {
           //关联记录  表格形式
           relMoreModalRef.current.open({
             appCode: appCode,
@@ -135,10 +128,7 @@ const QxRuntimeTable: React.FC<QxRuntimeTableProps> = (props) => {
             modalTitle: clickInfo?.data_title, //表名
           });
         }
-      } else if (
-        cellSchema?.widget === 'subform' &&
-        cellSchema?.type === 'TABLE'
-      ) {
+      } else if (cellSchema?.widget === 'subform' && cellSchema?.type === 'TABLE') {
         //子表
         relMoreModalRef.current.open({
           appCode: appCode,
@@ -171,7 +161,7 @@ const QxRuntimeTable: React.FC<QxRuntimeTableProps> = (props) => {
         max={props.max}
         sort={props?.sort}
         onPage={props?.onPage}
-        // QIXIAO_TOKEN={QIXIAO_TOKEN}
+        QIXIAO_TOKEN={QIXIAO_TOKEN}
       />
       <RelMoreModal cRef={relMoreModalRef} />
       <RelSingleModal cRef={relSingleModalRef} />
@@ -274,26 +264,23 @@ const QxRuntimeTree: React.FC<QxRuntimeTreeProps> = (props) => {
     });
   };
-  const generateTreeData = useCallback(
-    (_data: any[], _keywords?: string): any[] => {
-      const _treeNode: any[] = [];
-      _data.map((item) => {
-        if (typeof item.visible === 'boolean' && !item.visible) {
-          return;
-        }
-        const _item: any = {
-          ...item,
-          children: [],
-        };
-        if (item.children) {
-          _item.children = generateTreeData(item.children, _keywords);
-        }
-        _treeNode.push(_item);
-      });
-      return _treeNode;
-    },
-    [],
-  );
+  const generateTreeData = useCallback((_data: any[], _keywords?: string): any[] => {
+    const _treeNode: any[] = [];
+    _data.map((item) => {
+      if (typeof item.visible === 'boolean' && !item.visible) {
+        return;
+      }
+      const _item: any = {
+        ...item,
+        children: [],
+      };
+      if (item.children) {
+        _item.children = generateTreeData(item.children, _keywords);
+      }
+      _treeNode.push(_item);
+    });
+    return _treeNode;
+  }, []);
   const filter = (word: string) => {
     setKeyword(word);
@@ -429,9 +416,7 @@ const QxRuntimeTree: React.FC<QxRuntimeTreeProps> = (props) => {
   // 渲染节点
   const renderTitle = (nodeData: any) => {
-    const btnList = (
-      treeSchema?.tree?.action?.renderData?.buttons || []
-    ).filter((item: any) => {
+    const btnList = (treeSchema?.tree?.action?.renderData?.buttons || []).filter((item: any) => {
       if (!!nodeData?.extract?.[item.flag]) {
         return item;
       }
@@ -472,9 +457,7 @@ const QxRuntimeTree: React.FC<QxRuntimeTreeProps> = (props) => {
                 <Menu>
                   {_.drop(btnList, MAX).map((val: any) => {
                     return (
-                      <Menu.Item key={val.code}>
-                        {getBtnDom(val, nodeData, treeSchema)}
-                      </Menu.Item>
+                      <Menu.Item key={val.code}>{getBtnDom(val, nodeData, treeSchema)}</Menu.Item>
                     );
                   })}
                 </Menu>
@@ -492,10 +475,7 @@ const QxRuntimeTree: React.FC<QxRuntimeTreeProps> = (props) => {
   };
   return (
-    <div
-      className={'qx-tree-list'}
-      style={{ padding: '20px', backgroundColor: '#fff' }}
-    >
+    <div className={'qx-tree-list'} style={{ padding: '20px', backgroundColor: '#fff' }}>
       {data && data.length > 0 && treeSchema?.tree?.searchSwitch && (
         <Input
           className={'qx-selector-sub-search'}
@@ -545,10 +525,7 @@ const QxRuntimeTree: React.FC<QxRuntimeTreeProps> = (props) => {
             onExpand={(keys) => setExpandedKeys(keys)}
           />
         ) : (
-          <Empty
-            className={'qx-tree-list__empty'}
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
-          />
+          <Empty className={'qx-tree-list__empty'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
         )}
       </>
     </div>
@@ -596,8 +573,7 @@ const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
         setScroll(SCROLL.start);
       } else if (Math.abs(Number(translateNum)) > 0) {
         if (
-          Math.abs(Number(translateNum)) ==
-          Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth)
+          Math.abs(Number(translateNum)) == Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth)
         ) {
           setScroll(SCROLL.end);
         } else {
@@ -614,19 +590,15 @@ const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
     const tabItemWidth = e.currentTarget.clientWidth;
     const tabsDom: any = document?.getElementById('quickSearchTabs');
     const translate = tabsDom.style?.transform;
-    const translateNum = Math.abs(
-      Number(translate.split('(').pop().split('p').shift() || 0),
-    );
-    let widget =
-      translateNum + tabsDom.clientWidth - (tabItemLeft + tabItemWidth);
+    const translateNum = Math.abs(Number(translate.split('(').pop().split('p').shift() || 0));
+    let widget = translateNum + tabsDom.clientWidth - (tabItemLeft + tabItemWidth);
     if (widget > 0) {
       if (translateNum === 0) {
         tabsDom.style.cssText = 'transform: translate(0px,0px);';
       } else {
         widget = index > 0 ? tabItemLeft + 20 : tabItemLeft;
         if (translateNum > tabItemLeft) {
-          tabsDom.style.cssText =
-            'transform: translate(' + -widget + 'px,0px);';
+          tabsDom.style.cssText = 'transform: translate(' + -widget + 'px,0px);';
         }
       }
     } else if (widget < 0) {
@@ -641,9 +613,7 @@ const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
   const scrollPrev = () => {
     const tabsDom: any = document?.getElementById('quickSearchTabs');
     const translate = tabsDom.style?.transform;
-    const translateNum = Math.abs(
-      Number(translate.split('(').pop().split('p').shift() || 0),
-    );
+    const translateNum = Math.abs(Number(translate.split('(').pop().split('p').shift() || 0));
     let widget = translateNum - tabsDom?.offsetWidth;
     if (widget < 0) {
       widget = 0;
@@ -657,9 +627,7 @@ const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
   const scrollNext = () => {
     const tabsDom: any = document?.getElementById('quickSearchTabs');
     const translate = tabsDom.style?.transform;
-    const translateNum = Math.abs(
-      Number(translate.split('(').pop().split('p').shift() || 0),
-    );
+    const translateNum = Math.abs(Number(translate.split('(').pop().split('p').shift() || 0));
     let widget = translateNum + tabsDom?.offsetWidth;
     if (widget > Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth)) {
       widget = Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth);
@@ -696,9 +664,7 @@ const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
         <Button
           className={'left-button'}
           type="text"
-          icon={
-            <QxIcon type={'icon-tag-left-translate'} style={{ fontSize: 10 }} />
-          }
+          icon={<QxIcon type={'icon-tag-left-translate'} style={{ fontSize: 10 }} />}
           disabled={scroll == SCROLL.start}
           onClick={scrollPrev}
         />
@@ -734,12 +700,7 @@ const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
         <Button
           className={'right-button'}
           type="text"
-          icon={
-            <QxIcon
-              type={'icon-tag-right-translate'}
-              style={{ fontSize: 10 }}
-            />
-          }
+          icon={<QxIcon type={'icon-tag-right-translate'} style={{ fontSize: 10 }} />}
           disabled={scroll == SCROLL.end}
           onClick={scrollNext}
         />
--- a/src/pages/form/util.tsx
View file @b6d9ac7
+++ b/src/pages/form/util.tsx
View file @b6d9ac7
@@ -62,8 +62,11 @@ function loopSchema(
   callbacks?: any, // 关联记录表格展示时，存储操作按钮的回调函数
   _isVirtualListExit?: boolean,
   isDataSet = false, //代表是否为聚合表，聚合表查询的currentFunCode需要为relFunCode
+  merge_field?: string,
 ) {
-  const properties = schema.properties;
+  const properties = merge_field?.startsWith('merge|')
+    ? schema
+    : schema.properties;
   if (!properties) {
     return;
   }
@@ -76,9 +79,15 @@ function loopSchema(
       property.default_init = true;
     }
     const { widget } = property;
+    if (merge_field?.startsWith('merge|')) {
+      property.belongRelForm = true;
+      property.relformKey = merge_field.split('|')[1];
+      property.readOnly = true;
+    }
     if (typeof property.auth === 'boolean' && property.auth === false) {
       property.hidden = true;
+      property.bind = false;
       // 仅有一个子元素且子元素被隐藏时，隐藏父元素
       if (type === 'view' && Object.keys(properties).length === 1) {
         schema.hidden = true;
@@ -568,6 +577,18 @@ function loopSchema(
       property.qxProps.currentFunCode = param.referQuery?.funCode;
       property.props.isSub = true;
       delete property.items;
+    } else if (key.indexOf('_merge_field') > -1) {
+      loopSchema(
+        property.children,
+        param,
+        callback,
+        undefined,
+        type,
+        '',
+        isVirtualListExit,
+        false,
+        'merge|' + property.relformKey,
+      );
     }
     // 处理关联属性
@@ -869,6 +890,20 @@ export const handleEditFormSchema = (
         property.default = _data[key];
         property.defaultData = _data[key + '_info_'] || [];
       }
+      if (property.originWidget === 'subform') {
+        Object.keys(property.items.properties || {}).forEach((sub: any) => {
+          if (Array.isArray(_data[key])) {
+            _data[key].map((item: string) => {
+              if (
+                item[sub] &&
+                property.items.properties[sub].widget === 'relSelector'
+              ) {
+                property.items.properties[sub].default = item[sub];
+              }
+            });
+          }
+        });
+      }
       //TODO 临时对按钮参数值处理 obj 对象
       if (
         !property.belongSubForm &&
@@ -1863,12 +1898,22 @@ function executeActions(
   Object.keys(actionMap).forEach((key) => {
     if (pathMap[key]) {
-      const widget =
-        targetForm.getSchemaByPath(pathMap[key]).originWidget || '';
-      if (widget === 'subform' && actionMap[key].hasOwnProperty('readOnly')) {
+      const schema = targetForm.getSchemaByPath(pathMap[key]) || {};
+      if (
+        schema.originWidget === 'subform' &&
+        actionMap[key].hasOwnProperty('readOnly')
+      ) {
         // 子表的只读单独处理
         actionMap[key].subReadOnly = actionMap[key].readOnly;
         delete actionMap[key].readOnly;
+      } else if (
+        schema.originWidget === 'relSelector' &&
+        ['TABLE', 'EDIT_TABLE'].includes(schema.props?.mode) &&
+        actionMap[key].hasOwnProperty('readOnly')
+      ) {
+        // 关联记录的只读单独处理
+        actionMap[key].isReadOnly = actionMap[key].readOnly;
+        delete actionMap[key].readOnly;
       }
       targetForm.setSchemaByPath(pathMap[key], actionMap[key]);
     }
@@ -2548,7 +2593,7 @@ const getSubFormSummaries = (
   //   subTableSumArr = form?.schema?.properties?.[subTableKey]?.qxProps?.summary || [];
   // } else if (type === 'rel') {
   subTableSumArr =
-    form.getSchemaByPath(pathMap[subTableKey])?.qxProps?.summary || [];
+    form?.getSchemaByPath(pathMap[subTableKey])?.qxProps?.summary || [];
   // }
   let subTableData: any[] = [];
   // 子表数据
@@ -2557,7 +2602,7 @@ const getSubFormSummaries = (
   } else if (type === 'rel') {
     // subTableData = form?.formData?.[subTableKey + '_info_'] || [];
     subTableData =
-      form.getSchemaByPath(pathMap[subTableKey])?.dataForFormula || [];
+      form?.getSchemaByPath(pathMap[subTableKey])?.dataForFormula || [];
   }
   // 对子表汇总项实时计算，得出结果
@@ -2583,10 +2628,10 @@ const getSubFormSummaries = (
         if (sts.fx === 'MAX' || sts.fx === 'MIN') {
           let widget = '';
           if (type === 'rel') {
-            widget = form.getSchemaByPath(pathMap?.[subTableKey])?.items
+            widget = form?.getSchemaByPath(pathMap?.[subTableKey])?.items
               ?.properties?.[sts.relField]?.widget;
           } else {
-            widget = form.getSchemaByPath(pathMap?.[sts.relField])?.widget;
+            widget = form?.getSchemaByPath(pathMap?.[sts.relField])?.widget;
           }
           if (['qxDatetime', 'createdAt', 'updatedAt'].includes(widget)) {
             fxSum = fxSum.filter((it: any) => it); // 计算日期的最大最小时，过滤掉空值
@@ -2687,7 +2732,18 @@ const getSchemaKeysByWidget = (form: any, widget: string) => {
   return percentItemKeys;
 };
-const getCurVal = (pathMap: any, values: any, key: string) => {
+export const getCurVal = (
+  pathMap: any,
+  values: any,
+  key: string,
+  form?: any,
+) => {
+  const _arr = key.split('.');
+  if (_arr.length === 3) {
+    // 关联表的汇总
+    const res = getSubFormSummaries(form, _arr[0], '', 'rel', pathMap);
+    return res[key];
+  }
   if (!values.hasOwnProperty(key)) {
     return getValue(values, pathMap[key]);
   } else {
@@ -2723,6 +2779,7 @@ export const dealFormula = (
   pathMap: any,
   form: any,
   keyDownCount: number,
+  formData: any,
 ) => {
   if (flag !== keyDownCount) {
     // flag = _.clone(keyDownCount);
@@ -2746,7 +2803,7 @@ export const dealFormula = (
       dateFormat,
     } = calculate;
     // 子表数据
-    const allValues = form.getValues();
+    const allValues = formData;
     const subTableData: any[] =
       allValues?.[subForm?.subFormKey] ||
       form.formData?.[subForm?.subFormKey] ||
@@ -2898,7 +2955,7 @@ export const dealFormula = (
         } else {
           const _depsVal: any = handleNullType(depsVal, nullType);
           if (_depsVal === 'EMPTY' || _depsVal.includes('EMPTY')) {
-            return form.setValueByPath(schemaKeyRel, '');
+            return form.setValueByPath(schemaKeyRel, null);
           }
           if (formula) {
             // @ts-ignore
@@ -2910,8 +2967,8 @@ export const dealFormula = (
         }
         if (typeof formulaRes !== 'object') {
-          if (isNaN(formulaRes)) {
-            formulaRes = 0;
+          if (isNaN(formulaRes) || formulaRes === Infinity) {
+            formulaRes = null;
           }
           // if (typeof formulaRes === 'number') {
           //   console.log(formulaRes, precision)
--- a/src/pages/list-view/index.tsx
View file @b6d9ac7
+++ b/src/pages/list-view/index.tsx
View file @b6d9ac7
@@ -128,11 +128,30 @@ type ListViewCoreProps = {
   initSelectedIds?: string[];
 };
-const useTableScrollY = (deps: string[]) => {
+const getRows = (columns: any[]) => {
+  let rows = 1;
+  const _columns = columns.filter(item => (item.key || item.dataIndex).indexOf('_merge_field') === 0);
+  _columns.forEach(item => {
+    if (item.children?.length) {
+      if (rows === 1) rows = 2;
+      item.children.forEach((it: any) => {
+        if ((it.key || it.dataIndex).indexOf('_merge_field') === 0 && it.children?.length) {
+          rows = 3;
+        }
+      })
+    }
+  })
+  return rows
+}
+
+const useTableScrollY = (deps: any[]) => {
+  const size = deps?.[0]?.size;
+  const itemHeaderHeight = size === 'middle' ? 48 : size === 'default' ? 56 : 40;
+  const headerRows = getRows(deps?.[0]?.columns || []);
   const TABLE_VIEW_LIST = 'qx-view-list';
   const PAGINATION_HEIGHT_CLASS_NAME = 'ant-pagination';
   const TOOLBAR_NAME = 'qx-view-container__toolbar';
-  const tableHeader = 55;
+  const tableHeader = itemHeaderHeight * headerRows;
   const paginationDefaultHeight = 32;
   const paginationDefaultMargin = 32;
   const tableViewListDefaultHeight = 400;
@@ -140,7 +159,7 @@ const useTableScrollY = (deps: string[]) => {
   const $ = (selectors: string) => document.querySelector<HTMLElement>(selectors);
-  const defaultScrollY = useMemo(() => document.body.clientHeight, []);
+  const defaultScrollY = useMemo(() => document.body.clientHeight, [tableHeader]);
   const [scrollY, setScrollY] = useState<number>(defaultScrollY ?? 200);
@@ -203,7 +222,7 @@ const useTableScrollY = (deps: string[]) => {
     return () => {
       removeObserver();
     };
-  }, []);
+  }, [tableHeader]);
   useEffect(() => {
     if (deps) {
@@ -331,6 +350,7 @@ export const ListViewCore: React.FC<ListViewCoreProps> = ({
   const [relationAside, setRelationAside] = useState<any>();
   const [relationFun, setRelationFun] = useState<any>();
   const [relationApp, setRelationApp] = useState<any>();
+  const [relationView, setRelationView] = useState<any>();
   const [childFun, setChildFun] = useState<boolean>(false);
   const [relationkeys, setRelationkeys] = useState<any>([]);
   const [selectRelModalOpen, setSelectRelModalOpen] = useState(false);
@@ -359,6 +379,7 @@ export const ListViewCore: React.FC<ListViewCoreProps> = ({
     if (info) {
       setRelationFun(info.extract?.code);
       setRelationApp(info.extract?.appCode);
+      setRelationView(info.extract?.viewCode);
     }
     if (_flag) {
       return;
@@ -709,7 +730,12 @@ export const ListViewCore: React.FC<ListViewCoreProps> = ({
     setLoading(false);
   };
-  const relationView = async (data: any, _appCode: string, _funCode: string, _viewCode: string) => {
+  const relationSetting = async (
+    data: any,
+    _appCode: string,
+    _funCode: string,
+    _viewCode: string,
+  ) => {
     const params = {
       viewCode: _viewCode || (query && query.viewCode),
       viewType: 'RELATION',
@@ -884,7 +910,7 @@ export const ListViewCore: React.FC<ListViewCoreProps> = ({
           return;
         } else if (data.hasOwnProperty('relation')) {
           setViewType('RELATION');
-          await relationView(data, appCode, funCode, viewCode || (query && query.viewCode));
+          await relationSetting(data, appCode, funCode, viewCode || (query && query.viewCode));
           return;
         }
         setViewType('list');
@@ -1961,7 +1987,7 @@ export const ListViewCore: React.FC<ListViewCoreProps> = ({
       {props.mode !== 'selector' ? (
         <RuntimeFormDrawer
           appCode={childFun ? relationApp : appCode}
-          viewCode={viewCode}
+          viewCode={childFun ? relationView : viewCode}
           funCode={childFun ? relationFun : funCode}
           dRef={drawerRef}
           type={currDataItemCtrl.type || 'add'}
@@ -2314,6 +2340,7 @@ const PageList: React.FC = () => {
       return msg;
     }
   };
+
   return views.length ? (
     <div
       className="app-view-cont"
@@ -2391,4 +2418,3 @@ const PageList: React.FC = () => {
 };
 export default PageList;
-
--- a/src/pages/list-view/util.tsx
View file @b6d9ac7
+++ b/src/pages/list-view/util.tsx
View file @b6d9ac7
-import { handleWindowOpen } from '@/src/utils';
+import { handleWindowOpen } from '@/utils';
 import _ from 'lodash';
 const TARGET_MAP = {