aldehyde 0.2.235 → 0.2.237

package/src/aldehyde/detail/view/tab-act-dtmpl-view.tsx

@@ -0,0 +1,304 @@
+import React from "react";
+import {Button, Card, Form as AntdForm, FormInstance, message, Tabs, Tooltip} from "antd";
+import {DtmplBaseProps, DtmplConfig, DtmplData} from "../../tmpl/interface";
+import {
+    ReloadOutlined,
+    ScheduleOutlined,
+    EditOutlined, BankOutlined,
+} from "@ant-design/icons";
+import HCDataSource from "../../tmpl/hc-data-source";
+import "../dtmpl.css";
+import SnapshotTimeline from "./snapshot-timeline";
+import DtmplView from "./dtmpl-view";
+import Units from "../../units";
+import ToolTipBar from "../tooltipbar";
+import {LocaleContext} from "../../locale/LocaleProvider";
+import Action from "../../controls/action";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import LtmplTable from "../../module/ltmpl-table";
+import ActionUtils from "../../controls/action/utils";
+
+export interface ActDtmplViewProps extends DtmplBaseProps {
+    versionId?: number;
+    goBackToLtmpl?: () => void,
+    title?: any;
+    showHeader?: boolean;
+}
+
+export interface ActDtmplViewStat {
+    loading?: boolean;
+    dtmplConfig?: DtmplConfig;
+    premisesTitle?: string;
+    snapshotOpen?: boolean;
+    layout?: object;
+    refreshCode?: string;
+    actionDtmplData?:DtmplData;
+}
+
+class TabActDtmplView extends React.PureComponent<
+    ActDtmplViewProps,
+    ActDtmplViewStat
+> {
+    static defaultProps = {
+        showRightNav: true,
+        rightBarPositionRight: 15,
+        showHeader: true,
+    };
+    formRef = React.createRef<FormInstance>();
+    static contextType = LocaleContext;
+    context: React.ContextType<typeof LocaleContext>;
+
+    state = {
+        loading: true,
+        dtmplConfig: undefined,
+        snapshotOpen: false,
+        premisesTitle: "默认字段",
+        layout: {
+            labelCol: {span: 8},
+            wrapperCol: {span: 16},
+        },
+        refreshCode: undefined,
+        actionDtmplData:undefined,
+    };
+
+    async componentDidMount() {
+        const {sourceId,code, serverKey} = this.props;
+        let dtmplConfig = await HCDataSource.requestViewDtmplConfig(
+            serverKey,
+            sourceId
+        );
+
+        await this.loadActionDtmplData(dtmplConfig);
+
+        this.setState({
+            dtmplConfig,
+        });
+    }
+
+    loadActionDtmplData = async (dtmplConfig:DtmplConfig) => {
+        let actionDtmplData=undefined;
+        const {sourceId,code, serverKey} = this.props;
+        if(dtmplConfig?.viewActions && dtmplConfig?.viewActions.length>0){
+            actionDtmplData = await HcserviceV3.requestViewDtmplData(
+                serverKey,
+                sourceId,
+                code,null
+            );
+        }
+        this.setState({
+            actionDtmplData,
+        });
+    };
+
+    doRefresh = async () => {
+        const {dtmplConfig} = this.state;
+        await this.loadActionDtmplData(dtmplConfig);
+        this.setState({
+            refreshCode: Units.getRandomNum(6),
+        });
+    };
+
+    goEdit = () => {
+        const {goDtmpl, code} = this.props;
+        goDtmpl(code);
+    };
+
+    showSnapshot = () => {
+        this.setState({
+            snapshotOpen: true,
+        });
+    };
+
+    onSnapshotClose = () => {
+        this.setState({
+            snapshotOpen: false,
+        });
+    };
+
+    toSnapshot = () => {
+    };
+
+    onSubmit = async (values: any) => {
+        this.setState({
+            loading: true,
+        });
+        const { sourceId, code, serverKey } = this.props;
+        if (code) {
+            //有code是修改，没有是新增实体模板
+            values["唯一编码"] = code;
+        }
+        let res = await HcserviceV3.postDtmplData(
+            serverKey,
+            sourceId,
+            values,
+            message
+        );
+        this.setState({
+            loading: false,
+        });
+        if (res.status === "success") {
+            if(this.props.goBackToLtmpl){
+                this.props.goBackToLtmpl();
+            }else{
+                this.doRefresh();
+            }
+        }
+    };
+
+    doSubmit = (actionId?: number, codes?: string[], params?: object) => {
+        const { mainCode } = this.props;
+        //if (actionId) {
+        this.formRef.current.setFieldsValue({ actionId: actionId });
+        // }
+        if (mainCode) {
+            this.formRef.current.setFieldsValue({ mainCode: mainCode });
+        }
+        if (params) {
+            this.formRef.current.setFieldsValue(params);
+        }
+        this.formRef.current.submit();
+    };
+
+    render() {
+        const {
+            showRightNav,
+            rightBarPositionRight,
+            code,
+            sourceId,
+            goDtmpl,
+            serverKey,
+            codeSource,
+            title,
+            showHeader
+        } = this.props;
+        const {
+            dtmplConfig,
+            snapshotOpen,
+            refreshCode,actionDtmplData,
+        } = this.state;
+        const {translate} = this.context;
+
+        const buttons = dtmplConfig ? dtmplConfig.buttons : undefined;
+        //const premises = dtmplConfig ? dtmplConfig.premises : undefined;
+        let showRightNav_ = showRightNav;
+        if (dtmplConfig && dtmplConfig.groups.length < 4) {
+            showRightNav_ = false;
+        }
+
+        let items=[];
+        items.push( {
+            label: <BankOutlined size={50}/>,
+            key: 'main',
+            children: <DtmplView
+                codeSource={codeSource}
+                serverKey={serverKey}
+                refreshCode={refreshCode}
+                showRightNav={showRightNav_}
+                rightBarPositionRight={rightBarPositionRight}
+                dtmplConfig={dtmplConfig}
+                sourceId={sourceId}
+                code={code}
+            ></DtmplView>,
+        })
+        if(code && dtmplConfig?.viewRactions){
+            dtmplConfig.viewRactions.forEach(r=>{
+                if(ActionUtils.isShow(
+                    r?.preposes,
+                    [actionDtmplData],
+                    undefined
+                )){
+                    items.push( {
+                        label: r.title,
+                        key: r.id,
+                        children: <LtmplTable readOnly={true}
+                                              serverKey={null}
+                                              sourceId={r.id}
+                                              mainCode={code}
+                        ></LtmplTable>,
+                    });
+                }
+
+            })
+        }
+        return (
+            <div
+                className={`detailPage ${
+                    showRightNav_ ? "showRightNav" : "noRightNav"
+                }`}
+            ><Tabs type="card"
+                defaultActiveKey="main"
+                // size={"small"}
+                style={{ marginBottom: 32 }}
+                   tabBarExtraContent={{left:<h3 style={{marginRight:20,marginLeft:10}}>{translate("${" + (title ? title : "详情") + "}")}
+                           {dtmplConfig ? <ToolTipBar content={dtmplConfig.tip}/> : null}</h3>,
+                right:<div className="fr">
+                    {buttons &&
+                    buttons.includes("dtmplEdit") &&
+                    goDtmpl &&
+                    !dtmplConfig.editAction ? (
+                        <Button className="hoverbig" onClick={this.goEdit}>
+                            <EditOutlined/>
+                        </Button>
+                    ) : (
+                        ""
+                    )}
+                    {dtmplConfig?.viewActions?.map((ac) => {
+                        return (<Action
+                            serverKey={serverKey}
+                            iconType={"icon-title"}
+                            hiddenType={"disabled"}
+                            data={[actionDtmplData]}
+                            key={ac.id}
+                            formRef={this.formRef}
+                            actionConfig={ac}
+                            doAction={this.doSubmit}
+                        ></Action>)
+                    })}
+
+                    {buttons && buttons.includes("history") ? (
+                        <Tooltip title={translate("${数据快照}")}>
+                            <Button className="hoverbig" onClick={this.showSnapshot}>
+                                <ScheduleOutlined/>
+                            </Button>
+                        </Tooltip>
+                    ) : (
+                        ""
+                    )}
+                    <Button
+                        className="hoverbig"
+                        title={translate("${刷新}")}
+                        onClick={this.doRefresh}
+                    >
+                        <ReloadOutlined/>
+                    </Button>
+                    <SnapshotTimeline
+                        serverKey={serverKey}
+                        dtmplConfig={dtmplConfig}
+                        code={code}
+                        onClose={this.onSnapshotClose}
+                        showSnapshot={this.toSnapshot}
+                        sourceId={sourceId}
+                        open={snapshotOpen}
+                    ></SnapshotTimeline>
+                </div>}
+                }
+                items={items}
+            />
+
+                <AntdForm
+                    scrollToFirstError={true}
+                    labelWrap={true}
+                    ref={this.formRef}
+                    name="control-hooks"
+                    //onValuesChange={this.onValuesChange}
+                    onFinish={this.onSubmit}
+                >
+                    <AntdForm.Item hidden={true} name={"actionId"}></AntdForm.Item>
+                    <AntdForm.Item hidden={true} name={"mainCode"}></AntdForm.Item>
+                </AntdForm>
+            </div>
+        );
+    }
+}
+
+export default TabActDtmplView;

package/src/aldehyde/form/criteria-form.tsx

@@ -23,7 +23,7 @@ import EntryControl from "../controls/entry-control";
 import Action from "../controls/action";
 import CquickButton from "../controls/cquery/cquick-button";
 import { useLocale } from "../locale/useLocale";
-import { SearchOutlined } from "@ant-design/icons";
+import {DownOutlined, LeftOutlined, RightOutlined, SearchOutlined, UpOutlined} from "@ant-design/icons";
 import { ProgramConfig } from "../index";
 import SelectCodeExport from "../controls/file-export/select-code-export";
 
@@ -80,7 +80,8 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
     drillingParams,
     columns,
     updrillButtonConfigs,
-      innerParams
+      innerParams,
+      defShowCriteriaCount,
   } = ltmplConfig;
   const initialValues = {};
   const searchSubmit = (data) => {
@@ -96,9 +97,18 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
   // let currentDrillButton=null;
   const [currentDrillButton, setCurrentDrillButton] = useState(null);
   const [drillLoadings, setDrillLoadings] = useState<string>(null);
+  const [collapsible, setCollapsible] = useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  let collapseCriteria:CriteriaConfig[] =defShowCriteriaCount<=0?criterias:criterias.slice(0,defShowCriteriaCount);
+
+
 
   useEffect(() => {
     form.resetFields();
+    if(collapseCriteria.length<criterias.length){
+      setCollapsible(true);
+    }
   });
 
   let showQueryButton = buttons.includes("query") && doSearch;
@@ -431,10 +441,20 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
                       {renderDrillDimension()}</>
                     : null}
                 {showQueryButton || (updrillButtonConfigs && updrillButtonConfigs.length > 0)
-                    ? renderCriteria(criterias)
+                    ? renderCriteria(expanded?criterias:collapseCriteria)
                     : null}
 
                 <Space className="btns">
+                  {collapsible ? (
+                      expanded?<Button icon={<LeftOutlined />} type={"link"}  onClick={()=>setExpanded(false)}>
+                            {translate("${收起}")}
+                          </Button>:
+                      <Button icon={<RightOutlined />} type={"link"}   onClick={()=>setExpanded(true)}>
+                        {translate("${更多条件}")}
+                      </Button>
+                  ) : (
+                      ""
+                  )}
                   {showQueryButton ? (
                       <Button type="primary" htmlType="submit">
                         {translate("${查询}")}

package/src/aldehyde/form/form-Item-group.tsx

@@ -97,7 +97,7 @@ export default class FormItemGroup extends React.PureComponent<
       }
       return rules;
     }
-
+    debugger
     return (
       <FormItem
         label={translate("${" + item.title + "}")}
@@ -118,7 +118,8 @@ export default class FormItemGroup extends React.PureComponent<
             ? { span: 15 }
             : { span: 19 }
         }
-        tooltip={item.tip}
+
+        tooltip={(!item.tip || item.tip=="")?undefined:item.tip}
         initialValue={fieldValue}
         style={{ margin: 4 }}
         rules={getRules(item)}
@@ -147,7 +148,7 @@ export default class FormItemGroup extends React.PureComponent<
     if (fields && fields.length > 0) {
       fields.forEach((item, index) => {
         let fieldValue = valueMap ? valueMap[item.id] : undefined;
-        const fieldKey = item.id + Math.random() * 100;
+        //const fieldKey = item.id + Math.random() * 100;
         fieldValue =
           fieldValue || fieldValue == 0
             ? fieldValue

package/src/aldehyde/hooks/use-match-route/index.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import {useLocation, useMatches, useOutlet, useParams, useSearchParams} from 'react-router-dom';
+
+interface MatchRouteType {
+  // 菜单名称
+  title: string;
+  // tab对应的url
+  pathname: string;
+  // 要渲染的组件
+  children: any;
+  // 路由，和pathname区别是，详情页 pathname是 /:id，routePath是 /1
+  routePath: string;
+  // 图标
+  icon?: string;
+ // searchParmStr:string;
+  //key:string;
+}
+
+export function useMatchRoute(): MatchRouteType | undefined {
+  // 获取路由组件实例
+  const children = useOutlet();
+  // 获取所有路由
+  const matches = useMatches();
+  // 获取当前url
+  const { pathname,search } = useLocation();
+
+  const { sourceId } = useParams();
+
+   // //const lastRoute = matches[matches.length - 1];
+   // const [searchParams, setSearchParams] = useSearchParams();
+   // console.log(searchParams.toString());
+   //  let searchParmStr=searchParams.toString();
+   //  if(searchParmStr){
+   //  searchParmStr="?"+searchParmStr;
+   //  }
+  let urlName=pathname+search;
+  //let urlName=pathname;
+  const [matchRoute, setMatchRoute] = useState<MatchRouteType | undefined>();
+
+  // 监听pathname变了，说明路由有变化，重新匹配，返回新路由信息
+  useEffect(() => {
+    // 获取当前匹配的路由
+    //const lastRoute = matches[matches.length - 1];
+
+   // if (!lastRoute?.handle) return;
+    //let sourceId=lastRoute?.params['sourceId'];
+    let sourceId_=sourceId;
+    if(pathname.indexOf("/home")>0){
+      sourceId_="home";
+    }
+    setMatchRoute({
+      title:sourceId_||'其他',
+      pathname:urlName,
+      children,
+      routePath: pathname,
+      //icon: (lastRoute?.handle as any)?.icon,
+    });
+
+  },[urlName])
+
+
+  return matchRoute;
+}

package/src/aldehyde/hooks/use-tabs/index.tsx

@@ -0,0 +1,130 @@
+import { useMatchRoute } from '../use-match-route';
+// import { router } from '@/router';
+import { useSessionStorageState } from 'ahooks';
+import { omit } from 'lodash-es';
+import React, { useCallback, useEffect, useState } from 'react';
+import {useNavigate} from "react-router-dom";
+
+export interface KeepAliveTab {
+  title: string;
+  routePath: string;
+  key: string;
+  pathname: string;
+  // searchParmStr:string;
+  icon?: string;
+  children: React.ReactNode;
+}
+
+function getKey() {
+  return new Date().getTime().toString();
+}
+
+export function useTabs() {
+  // 存放页面记录
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+    defaultValue: [],
+    serializer: value => {
+      // 把 children 剔除掉，不然会报错
+      return JSON.stringify(value.map(item => omit(item, ['children'])))
+    },
+   });
+  // 当前激活的tab
+  const [activeTabRoutePath, setActiveTabRoutePath] = useState<string>('');
+
+  const matchRoute = useMatchRoute();
+  let navigate = useNavigate();
+  // 关闭tab
+  const closeTab = useCallback(
+    (routePath: string = activeTabRoutePath || '') => {
+      if (!keepAliveTabs?.length) {
+        return;
+      }
+      const index = (keepAliveTabs || []).findIndex(o => o.routePath === routePath);
+      if (keepAliveTabs[index].routePath === activeTabRoutePath && keepAliveTabs.length > 1) {
+        if (index > 0) {
+          navigate(keepAliveTabs[index - 1].pathname);
+        } else {
+          navigate(keepAliveTabs[index + 1].pathname);
+        }
+      }
+      keepAliveTabs.splice(index, 1);
+      setKeepAliveTabs([...keepAliveTabs]);
+    },
+    [activeTabRoutePath],
+  );
+
+  // 关闭除了自己其它tab
+  const closeOtherTab = useCallback((routePath: string = activeTabRoutePath || '') => {
+    if (!keepAliveTabs?.length) {
+      return;
+    }
+    const tab = keepAliveTabs.find(o => o.routePath === routePath);
+    setKeepAliveTabs(keepAliveTabs.filter(o => o.routePath === routePath));
+    //router.navigate(tab?.pathname || routePath);
+  }, [activeTabRoutePath]);
+
+  // 刷新tab
+  const refreshTab = useCallback((routePath: string = activeTabRoutePath || '') => {
+
+    // setKeepAliveTabs(prev => {
+    //   const index = (prev || []).findIndex(tab => tab.pathname === routePath);
+    //
+    //   if (index >= 0 && prev) {
+    //     // 这个是react的特性，key变了，组件会卸载重新渲染
+    //     prev[index].key = getKey();
+    //   }
+    //   return [...prev || []];
+    // });
+  }, [activeTabRoutePath]);
+
+  useEffect(() => {
+    if (!matchRoute) return;
+
+    const existKeepAliveTab = (keepAliveTabs || []).find(o => o.routePath === matchRoute?.routePath);
+
+    // 如果不存在则需要插入
+    if (!existKeepAliveTab) {
+      setKeepAliveTabs([...(keepAliveTabs || []), {
+        title: matchRoute.title,
+        key: getKey(),
+        routePath: matchRoute.routePath,
+        pathname: matchRoute.pathname,
+        children: matchRoute.children,
+        icon: matchRoute.icon
+        // searchParmStr:matchRoute.searchParmStr||""
+      }]);
+    } else if (existKeepAliveTab.pathname !== matchRoute.pathname) {
+      // 如果是同一个路由，但是参数不同，我们只需要刷新当前页签并且把pathname设置为新的pathname， children设置为新的children
+      setKeepAliveTabs(prev => {
+        const index = (prev || []).findIndex(tab => tab.routePath === matchRoute.routePath);
+        if (index >= 0 && prev) {
+          prev[index].key = getKey();
+          prev[index].pathname = matchRoute.pathname;
+          prev[index].children = matchRoute.children;
+          // prev[index].searchParmStr=matchRoute.searchParmStr ||""
+        }
+        return [...(prev || [])];
+      });
+    } else if (!existKeepAliveTab.children) {
+      // 如果pathname相同，但是children为空，说明重缓存中加载的数据，我们只需要刷新当前页签并且把children设置为新的children
+      setKeepAliveTabs(prev => {
+        const index = (prev || []).findIndex(tab => tab.routePath === matchRoute.routePath);
+        if (index >= 0 && prev) {
+          prev[index].key = getKey();
+          prev[index].children = matchRoute.children;
+        }
+        return [...(prev || [])];
+      });
+    }
+    setActiveTabRoutePath(matchRoute.routePath);
+  }, [matchRoute])
+
+  return {
+    tabs: keepAliveTabs,
+    activeTabRoutePath,
+    closeTab,
+    closeOtherTab,
+    refreshTab,
+    setTabs: setKeepAliveTabs,
+  }
+}

package/src/aldehyde/layout/MainPage.tsx

@@ -292,7 +292,7 @@ class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
               <SideBar
                 header={leftHeader}
                 collapsedHeader={leftCollapsedHeader}
-                title={translate("${" + sideBartitle + "}")}
+                title={sideBartitle}
                 logo={sideBarLogo}
                 blockMenu={this.findCurrentBlock()}
                 currentL2MenuId={currentL2MenuId}

package/src/aldehyde/layout/coverstyle.css

@@ -17,7 +17,7 @@
 	font-size: 20px;
 }
 .ant-message{
-	z-index: 1090;
+	z-index: 2090;
 }
 .ant-tabs-bar{
 	z-index: 99;

package/src/aldehyde/layout/sidebar/index.tsx

@@ -20,7 +20,9 @@ const SideBar: React.FC<SideBarProps> = (props) => {
   const { translate } = useLocale();
   const { token } = useToken();
   let syyy = { "--logo-blue-background": token.colorPrimary } as CSSProperties;
-  let { collapsed,header,collapsedHeader } = props;
+  let { collapsed,header,collapsedHeader ,title} = props;
+  let programLabel= title ? title : Units.programName_NavLeft();
+  programLabel=translate("${"+ programLabel +"}");
   return (
     <div>
       <Scrollbars
@@ -67,9 +69,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
                           ) : (
                               <></>
                           )}
-                          {translate(
-                              props.title ? props.title : Units.programName_NavLeft()
-                          )}
+                          {programLabel}
                         </>
                       </h1>
                     </>

package/src/aldehyde/layout2/components/userButton.tsx

@@ -3,7 +3,7 @@ import {
   CaretDownOutlined,
   ClearOutlined,
   LoginOutlined,
-  LogoutOutlined,
+  LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
   SettingOutlined,
   UnlockOutlined,
   UserOutlined,
@@ -16,6 +16,7 @@ import { useLocale } from "../../locale/useLocale";
 import { NavLink, useNavigate } from "react-router-dom";
 import ResetPassword from "../../layout/menu/reset-password";
 import HCDataSource from "../../tmpl/hc-data-source";
+import Units from "../../units";
 
 type DropDownMenuType = {
   label: string | number | ReactNode;
@@ -26,7 +27,7 @@ type DropDownMenuType = {
 
 const UserButton: React.FC<ButtonProps> = (props) => {
   // translate
-  const { translate } = useLocale();
+  const { translate,changeSiderCollapsed,getSiderCollapsed } = useLocale();
 
   // navigation
   const navigate = useNavigate();
@@ -123,6 +124,17 @@ const UserButton: React.FC<ButtonProps> = (props) => {
       show: () => {
         return isLogin && userConfig.cleanCachable;
       },
+    },{
+      label: (
+          <span onClick={() => changeSiderCollapsed()}>
+          {getSiderCollapsed()?translate("${显示侧边栏}"):translate("${隐藏侧边栏}")}
+        </span>
+      ),
+      key: "collapseSider",
+      icon: <span>{getSiderCollapsed()? <MenuUnfoldOutlined /> :<MenuFoldOutlined /> }</span>,
+      show: () => {
+        return isLogin ;
+      },
     },
     {
       label: <span onClick={logout}>{translate("${退出}")}</span>,
@@ -132,6 +144,7 @@ const UserButton: React.FC<ButtonProps> = (props) => {
         return isLogin;
       },
     },
+
   ];
   const cleanDropdownMenuList: GetProp<MenuProps, "items"> = dropdownMenuList
     .filter((item) => {