aldehyde 0.2.339 → 0.2.342

package/src/aldehyde/layout5/sider.tsx

@@ -0,0 +1,214 @@
+import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip, theme } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import { generate } from "@ant-design/colors";
+import {
+  getLeftMostRouteInfo,
+  getTargetMenuItemIdRouteList,
+  handlePropsMenuToAntdMenu,
+} from "../layout2/util/menu-util";
+import { useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import IconFont from "../layout2/components/icon-font";
+import homePng from "./imgs/home.png";
+
+type SiderPropsType = {
+  menuList: MenuType[];
+  collapsed: boolean;
+  systemName: string;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+type SecoundFloorMenuList = MenuType[][];
+
+/**
+ * @param menuList 自定义的menu
+ * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
+ * @desc 获取第二层级 menu 与其下标映射的数组
+ */
+const getSecoundFloorMenuList = (
+  menuList: MenuType[]
+): SecoundFloorMenuList => {
+  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
+    length: menuList.length,
+  }).map(() => Array.from({ length: 0 }));
+
+  for (let i = 0; i < menuList.length; i++) {
+    const menuItem = menuList[i];
+    Array.isArray(menuItem.children) &&
+      (secoundFloorMenuList[i] = menuItem.children);
+  }
+  return secoundFloorMenuList;
+};
+
+const { useToken } = theme;
+
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { translate, getLocale } = useLocale();
+  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [openKeys, setOpenKeys] = useState([]);
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+  const { token: { colorPrimary } } = useToken();
+  const colors = generate(colorPrimary);
+
+  useEffect(() => {
+    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
+  }, [menuList]);
+
+  // menu
+  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
+      const { disabled, label, children, icon } = menuItem;
+      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      if (disabled)
+        return (
+          <div
+            style={{
+              color: "inherit",
+              width: "100%",
+              height: "100%",
+              display: "block",
+            }}
+          >
+            {translate("${" + label + "}")}
+          </div>
+        );
+      const { path, target } = getLeftMostRouteInfo(menuItem);
+      if (Array.isArray(children) && !children.length)
+        return (
+          <Tooltip title={translate("${" + label + "}")}>
+            <NavLink
+              to={`/${path}`}
+              target={target}
+              style={{
+                color: "inherit",
+                width: "100%",
+                height: "100%",
+                display: "block",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+              }}
+            >
+              <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+            </NavLink>
+          </Tooltip>
+        );
+      return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
+    });
+  };
+
+  useEffect(() => {
+    if (!menuList.length) {
+      setMenu([]);
+      return;
+    }
+    const targetId =
+      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
+    if (!targetId) return;
+    const curSiderMenuList =
+      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
+    if (curSiderMenuList) {
+      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
+      const temIds = getTargetMenuItemIdRouteList(curSiderMenuList, targetId);
+      setTimeout(() => {
+        setSelectedKeys(temIds);
+        setOpenKeys(temIds);
+      }, 10);
+    }
+  }, [sourceId, menuId, menuList, getLocale()]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (secoundFloorMenuList.current[0] !== undefined) {
+        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
+        setSelectedKeys([]);
+        setOpenKeys([]);
+      }
+      setDocumentTitle("");
+    } else {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+    }
+  }, [menuList, sourceId, getLocale()]);
+
+  return (
+    <Layout.Sider collapsed={collapsed} collapsedWidth={0} width={230} style={{ background: colors[0] }}>
+      <NavLink
+        style={{
+          width: "100%",
+          height: "55px",
+          display: "flex",
+          paddingLeft: "10px",
+          alignItems: "center",
+          fontSize: "18px",
+          userSelect: "none",
+          color: "inherit",
+          borderBottom: "1px solid rgba(0,21,41,.08)",
+        }}
+        to={"/v5/home"}
+      >
+        <img
+          src={homePng}
+          alt="home"
+          width={35}
+          height={35}
+          style={{ marginRight: 5 }}
+        />
+        <Tooltip title={translate("${" + systemName + "}")}>
+          <span
+            style={{
+              width: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontWeight: "bolder",
+              color: "rgba(0,0,0,0.88)",
+            }}
+          >
+            {translate("${" + systemName + "}")}
+          </span>
+        </Tooltip>
+      </NavLink>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              itemHoverColor: "#222",
+              itemColor: "#222",
+              itemSelectedBg: colors[1],
+              groupTitleColor: "#222",
+              fontSize: 14,
+            },
+          },
+        }}
+      >
+        <Menu
+          mode="inline"
+          items={menu}
+          selectedKeys={selectedKeys}
+          openKeys={openKeys}
+          inlineCollapsed={false}
+          style={{
+            userSelect: "none",
+            borderInlineEnd: "none",
+            height: "calc(100% - 55px)",
+            overflowY: "auto",
+          }}
+          onOpenChange={(val) => setOpenKeys([...val])}
+        />
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;

package/src/aldehyde/locale/LocaleProvider.tsx

@@ -1,7 +1,7 @@
 
 import React, { ReactNode, createContext, useEffect, useState } from "react";
 import { useNavigatorLanguage } from "./useLocale";
-import {getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
+import { getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
 import { LocaleType } from "./langMp";
 import HcserviceV3 from "../tmpl/hcservice-v3";
 
@@ -10,18 +10,22 @@ export const LocaleContext = createContext<{
   langPkg: any;
   availableLang: string[];
   changeLocale: (locale: LocaleType) => void;
-  siderCollapsed:boolean;
-  changeSiderCollapsed:()=>void;
+  siderCollapsed: boolean;
+  changeSiderCollapsed: () => void;
   t: (...strs: string[]) => string;
   translate: (...strs: string[]) => string;
-  getServiceLangStr?: ()=>string;
+  getServiceLangStr?: () => string;
+  compactTheme?: boolean;
+  changeCompactTheme?: () => void;
 }>({
   locale: undefined,
   availableLang: [],
   langPkg: {},
-  changeLocale: () => {},
-  siderCollapsed:false,
-  changeSiderCollapsed:()=>{},
+  changeLocale: () => { },
+  siderCollapsed: false,
+  changeSiderCollapsed: () => { },
+  compactTheme: false,
+  changeCompactTheme: () => { },
   t: (...str) => str.join(""),
   translate: (str) => {
     let res = [],
@@ -83,6 +87,8 @@ export const LocaleProvider = ({
 
   const [siderCollapsed, setSiderCollapsed] = useState<boolean>(false);
 
+  const [compactTheme, setCompactTheme] = useState<boolean>(localStorage.getItem("compactTheme") === "true");
+
   const [langPkg, setLangPkg] = useState(
     localeStorageLangPkg ? localeStorageLangPkg : {}
   );
@@ -92,11 +98,16 @@ export const LocaleProvider = ({
     setLocale(locale);
   };
 
-  const changeSiderCollapsed =  () => {
+  const changeSiderCollapsed = () => {
     setSiderCollapsed(!siderCollapsed);
   };
 
-  const getServiceLangStr =  () => {
+  const changeCompactTheme = () => {
+    setCompactTheme(!compactTheme);
+    localStorage.setItem("compactTheme", `${!compactTheme}`);
+  };
+
+  const getServiceLangStr = () => {
     const langStr = getLangWithLangApiMp(locale);
     return langStr;
   };
@@ -207,7 +218,7 @@ export const LocaleProvider = ({
 
   return (
     <LocaleContext.Provider
-      value={{ locale, availableLang, langPkg, changeLocale,siderCollapsed,changeSiderCollapsed, t, translate ,getServiceLangStr}}
+      value={{ locale, availableLang, langPkg, changeLocale, siderCollapsed, changeSiderCollapsed, t, translate, getServiceLangStr, compactTheme, changeCompactTheme }}
     >
       {children}
     </LocaleContext.Provider>

package/src/aldehyde/locale/useLocale.ts

@@ -41,7 +41,9 @@ export const useLocale = () => {
     t,
     translate,
     availableLang,
-    getServiceLangStr
+    getServiceLangStr,
+    compactTheme,
+    changeCompactTheme
   } = useContext(LocaleContext);
 
   return {
@@ -59,7 +61,8 @@ export const useLocale = () => {
     },
     t,
     translate,
-    availableLang,getServiceLangStr,
-
+    availableLang, getServiceLangStr,
+    compactTheme,
+    changeCompactTheme
   };
 };

package/src/aldehyde/lowcode-components/base-table/index.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import _ from "lodash";
-import { ConfigProvider } from "antd";
+import { ConfigProvider, Empty } from "antd";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 import { ViewControl } from "../../index";
@@ -195,7 +195,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [dataConfig?.sourceType, dataConfig?.sourceId]);
 
-    const renderEmpty = () => <div className={'base-table-empty'} style={{ ...bodyStyle }}>暂无数据</div>;
+    const renderEmpty = () => <div className={'base-table-empty'} style={{ ...bodyStyle }}><Empty styles={{ description: { color: bodyStyle.color || "#000000" } }} image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" /></div>;
 
     return (
         <div className={'base-table'} ref={tableRef} style={carousel.enable ? { overflowX: "auto" } : { overflow: "auto" }}>

package/src/aldehyde/module/dtmpl-edit-page.tsx

@@ -36,12 +36,12 @@ interface ModalEditorProps extends DtmplBaseProps {
   pageType: PageType;
   placement?: "top" | "right" | "bottom" | "left";
   title?: ReactNode;
-  extendButtons?:ReactNode[];
+  extendButtons?: ReactNode[];
 }
 
 interface ModalEditorState {
   id?: string;
-  queryingCode?:string;
+  queryingCode?: string;
   dtmplConfig?: DtmplConfig;
   loading?: boolean;
   serial?: number;
@@ -80,7 +80,7 @@ export default class DtmplEditPage extends React.PureComponent<
   state = {
     id: "modelDtmplEdit" + Units.getRandomNum(6),
     dtmplConfig: undefined,
-    queryingCode:undefined,
+    queryingCode: undefined,
     loading: false,
     serial: 1,
     dtmplData: undefined,
@@ -100,7 +100,7 @@ export default class DtmplEditPage extends React.PureComponent<
         prevProps.sourceId != this.props.sourceId ||
         prevProps.code != this.props.code ||
         prevProps.addTmplId != this.props.addTmplId ||
-        !dtmplConfig || dtmplConfig=='null'
+        !dtmplConfig || dtmplConfig == 'null'
       ) {
         await this.loadConfigData();
       } else {
@@ -135,15 +135,15 @@ export default class DtmplEditPage extends React.PureComponent<
       );
     }
     // 直接复制
-    if(dtmplConfig?.entity && dtmplConfig?.entity?.code==code){
-      let dtmplData=dtmplConfig.entity;
-      dtmplConfig.entity=undefined;
+    if (dtmplConfig?.entity && dtmplConfig?.entity?.code == code) {
+      let dtmplData = dtmplConfig.entity;
+      dtmplConfig.entity = undefined;
       this.setState({
         dtmplData,
         id: code,
         loading: false,
       });
-    }else{
+    } else {
       await this.loadData(dtmplConfig);
     }
     this.setState({
@@ -152,6 +152,33 @@ export default class DtmplEditPage extends React.PureComponent<
     });
   };
 
+  // 表单关联项secondCriteria处理start
+  getSubDtmplData = async (valueField, code) => {
+    const { serverKey } = this.props;
+    const dtmplData = await HcserviceV3.requestDtmplData(serverKey, valueField.id, code.split("@R@")[0], null);
+    const subField = valueField.subRelValueField;
+    const subData = dtmplData.fieldMap[subField.id];
+    if (subField.subRelValueField && subData) { // 存在下级关联项
+      return this.getSubDtmplData(subField, subData);
+    }
+    return subData;
+  }
+
+  getSecondCriteria = async (field) => {
+    const { parentFormInstance } = this.props;
+    const { relValueField, baseCriteria = {} } = field;
+    if (relValueField) {
+      let relValueData = parentFormInstance.getFieldValue(relValueField.id);
+      if (relValueField.subRelValueField && relValueData) {
+        relValueData = await this.getSubDtmplData(relValueField, relValueData);
+      }
+      field.baseCriteria = { ...(baseCriteria || {}), "secondCriteria": relValueData };
+      field.configChanged = true;
+    }
+    return field;
+  }
+  // 表单关联项secondCriteria处理end
+
   loadData = async (dtmplConfig: DtmplConfig) => {
     const {
       sourceId,
@@ -160,12 +187,21 @@ export default class DtmplEditPage extends React.PureComponent<
       open,
       serverKey,
       codeSource,
+      parentFormInstance
     } = this.props;
 
     if (!open) {
       return;
     }
 
+    //根据 parentFormInstance 完善 dtmplConfig
+    if (parentFormInstance && dtmplConfig) {
+      if (!dtmplConfig.buildInFuncFields) {
+        dtmplConfig.buildInFuncFields = TmplConfigAnalysis.buildInFuncFields(dtmplConfig);
+      }
+      dtmplConfig.buildInFuncFields = await Promise.all(dtmplConfig.buildInFuncFields.map(field => this.getSecondCriteria(field)));
+    }
+
     if (dtmplConfig?.autoSaveInterval && dtmplConfig?.autoSaveInterval > 0) {
       if (this.autoSaveInterval) {
         clearInterval(this.autoSaveInterval);
@@ -189,8 +225,8 @@ export default class DtmplEditPage extends React.PureComponent<
     if (code) {
       this.setState({
         loading: true,
-        queryingCode:code,
-        dtmplData:undefined,
+        queryingCode: code,
+        dtmplData: undefined,
       });
 
       const dtmplData_: DtmplData = await HcserviceV3.getDtmplData(
@@ -200,8 +236,8 @@ export default class DtmplEditPage extends React.PureComponent<
         code
       );
 
-      if( (!this.state.queryingCode  || this.state.queryingCode==dtmplData_.code) &&
-          (!dtmplData_.sourceId  || (this.props.sourceId==dtmplData_.sourceId))){
+      if ((!this.state.queryingCode || this.state.queryingCode == dtmplData_.code) &&
+        (!dtmplData_.sourceId || (this.props.sourceId == dtmplData_.sourceId))) {
         this.setState({
           dtmplData: dtmplData_,
           id: code,
@@ -237,7 +273,7 @@ export default class DtmplEditPage extends React.PureComponent<
 
   doSubmit = (actionId?: number, codes?: string[], params?: object) => {
     const { mainCode } = this.props;
-    this.setState({loading:true})
+    this.setState({ loading: true })
     //if (actionId) {
     this.formRef.current.setFieldsValue({ actionId: actionId });
     // }
@@ -252,7 +288,7 @@ export default class DtmplEditPage extends React.PureComponent<
 
   getFooter = () => {
     const { onCancel, serverKey } = this.props;
-    const { dtmplData, serial,loading} = this.state;
+    const { dtmplData, serial, loading } = this.state;
     const footerButtons = [];
     const { dtmplConfig } = this.state;
     const { translate } = this.context;
@@ -300,9 +336,9 @@ export default class DtmplEditPage extends React.PureComponent<
     return footerButtons;
   };
 
-  onFinish=(code)=>{
-    this.setState({loading:false})
-    if(code){
+  onFinish = (code) => {
+    this.setState({ loading: false })
+    if (code) {
       this.props.onOk(code);
     }
   }
@@ -319,69 +355,52 @@ export default class DtmplEditPage extends React.PureComponent<
       placement,
       maxColsOnRow,
       title,
-      serverKey,parentFormInstance
+      serverKey, parentFormInstance
     } = this.props;
     const { dtmplConfig, id, dtmplData } = this.state;
 
     let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
     const { translate } = this.context;
     //判断是不是 字符串
-    if (typeof title1 === "string"){
-      title1=translate("${" + title1 + "}");
+    if (typeof title1 === "string") {
+      title1 = translate("${" + title1 + "}");
     }
 
-
-    //根据 parentFormInstance 完善 dtmplConfig
-    if(parentFormInstance && dtmplConfig){//
-      if (!dtmplConfig.buildInFuncFields) {
-        dtmplConfig.buildInFuncFields = TmplConfigAnalysis.buildInFuncFields(dtmplConfig);
-      }
-      for (let field of dtmplConfig.buildInFuncFields){
-        if(field.relValueField ){
-          if(!field.baseCriteria){
-            field.baseCriteria={}
-          }
-          field.baseCriteria={...field.baseCriteria,"secondCriteria":parentFormInstance.getFieldValue(field.relValueField.id)};
-          field.configChanged=true;
-        }
-      }
-    }
     return (
       <>
-        {" "}
         {pageType == "modal" ? (
-         // <Draggable  handle=".ant-modal-header">
+          // <Draggable  handle=".ant-modal-header">
           <DraggableModal
             open={open}
             width={width}
             title={title1}
             closable={false}
-            styles={{body:{ height: height, overflow: "auto" }}}
+            styles={{ body: { height: height, overflow: "auto" } }}
             destroyOnHidden={true}
-             centered
+            centered
             onCancel={onCancel}
             footer={this.getFooter()}
             children={<Scrollbars autoHide autoHideTimeout={1000}>
               <div onClick={this.onClickBody}>
                 <DtmplForm
-                    serverKey={serverKey}
-                    mainCode={mainCode}
-                    parentId={id}
-                    dtmplConfig={dtmplConfig}
-                    formRef={this.formRef}
-                    sourceId={sourceId}
-                    onFinish={this.onFinish}
-                    maxColsOnRow={maxColsOnRow}
-                    showConfirm={false}
-                    dtmplData={dtmplData}
-                    onValuesChange={this.onValuesChange}
-                    parentFormInstance={parentFormInstance}
+                  serverKey={serverKey}
+                  mainCode={mainCode}
+                  parentId={id}
+                  dtmplConfig={dtmplConfig}
+                  formRef={this.formRef}
+                  sourceId={sourceId}
+                  onFinish={this.onFinish}
+                  maxColsOnRow={maxColsOnRow}
+                  showConfirm={false}
+                  dtmplData={dtmplData}
+                  onValuesChange={this.onValuesChange}
+                  parentFormInstance={parentFormInstance}
                 />
               </div>
             </Scrollbars>}
           >
           </DraggableModal>
-             // </Draggable>
+          // </Draggable>
         ) : pageType == "drawer" ? (
 
           <Drawer
@@ -393,11 +412,11 @@ export default class DtmplEditPage extends React.PureComponent<
             width={width}
             onClose={onCancel}
             open={open}
-            height={placement=="top" || placement=="bottom" ? height : "calc(100%)"}
+            height={placement == "top" || placement == "bottom" ? height : "calc(100%)"}
             style={{
-              maxWidth: (placement=="top" || placement=="bottom")? "100vw" :"92vw",
-              border:"2px solid #d9d9d9",
-               width: width,
+              maxWidth: (placement == "top" || placement == "bottom") ? "100vw" : "92vw",
+              border: "2px solid #d9d9d9",
+              width: width,
             }}
             extra={<Space>{this.getFooter()}</Space>}
           >