aldehyde 0.2.236 → 0.2.237

package/src/aldehyde/layout2/tabs/tabs-layout.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useMemo } from "react";
+import {Dropdown, Tabs} from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from './tabs-context';
+import {KeepAliveTab, useTabs} from "../../hooks/use-tabs";
+import antdIcons from '@ant-design/icons';
+import { useNavigate} from 'react-router-dom';
+import Units from '../../units';
+import {useLocale} from "../../locale/useLocale";
+// import {arrayMove} from "react-sortable-hoc";
+
+
+const TabsLayout: React.FC = (props) => {
+
+  const { translate } = useLocale();
+  const {
+    activeTabRoutePath,
+    tabs = [],
+    closeTab,
+    refreshTab,
+    closeOtherTab,
+    setTabs,
+  } = useTabs();
+
+  const getIcon = (icon?: string): React.ReactElement | undefined => {
+    return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+  }
+
+  const menuItems: MenuItemType[] = useMemo(
+    () => [
+      tabs.length <= 1 ? null : {
+        label: translate("${关闭}"),
+        key: "close",
+      },
+      tabs.length <= 1 ? null : {
+        label: translate("${关闭其他}"),
+        key:"other",
+      },
+    ].filter(o => o !== null) ,
+    [tabs]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const menuClick = useCallback(({ key, domEvent }: any, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+
+    if (key === 'refresh') {
+      refreshTab(tab.routePath);
+    } else if (key ==="close") {
+      closeTab(tab.routePath);
+    } else if (key === "other") {
+      closeOtherTab(tab.routePath);
+    }
+  }, [closeOtherTab, closeTab, refreshTab]);
+
+  const renderTabTitle = useCallback((tab: KeepAliveTab) => {
+    let label=Units.mapMenu(tab.title)?Units.mapMenu(tab.title):tab.title;
+    label=translate("${"+label+"}");
+    return (
+      <Dropdown
+        menu={{
+          items: menuItems,
+          onClick: (e) => menuClick(e, tab),
+        }}
+        trigger={['contextMenu']}
+        onOpenChange={open => {
+          if (open) {
+           navigate(tab.pathname);
+          }
+        }}
+      >
+        <div className='flex gap-[6px]' style={{ margin: '-12px 0', padding: '12px 0' }}>
+          {getIcon(tab.icon)}
+          {label}
+        </div>
+      </Dropdown>
+    )
+  }, [menuItems]);
+
+  const tabItems = useMemo(() => {
+    return tabs.map(tab => {
+      return {
+        key: tab.routePath,
+        label: renderTabTitle(tab),
+        children: (
+          <div
+            key={tab.key}
+            className='overflow-y-auto'
+            // style={{
+            //   height: `calc(100vh - ${defaultSetting.headerHeight + 36}px)`,
+            // }}
+          >
+            {/*<Watermark type='content'>*/}
+              {tab.children}
+            {/*</Watermark>*/}
+          </div>
+        ),
+        closable: tabs.length > 1, // 剩最后一个就不能删除了
+      }
+    })
+  },[tabs]);
+  //let tabItems=tabItemsf();
+
+  let navigate = useNavigate();
+
+  const onTabsChange =useCallback( (tabKey: string) => {
+    tabs.forEach(tab=>{
+      if(tab.routePath == tabKey){
+        navigate(tab.pathname);
+      }
+    })
+  },[tabs]);
+
+  const onTabEdit = (
+    targetKey:  string,
+    action: 'add' | 'remove',
+  ) => {
+    if (action === 'remove') {
+      closeTab(targetKey);
+    }
+  };
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+    }),
+    [closeTab, closeOtherTab, refreshTab]
+  );
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <Tabs
+          tabBarStyle={{marginBottom:'4px'}}
+        activeKey={activeTabRoutePath}
+        items={tabItems}
+        type="editable-card"
+        onChange={onTabsChange}
+        hideAdd
+        onEdit={(e,a)=>{onTabEdit(e.toString(),a)}}
+        size="small"
+        // onDragEnd={({ activeIndex, overIndex }) => {
+        //   setTabs(
+        //     arrayMove(tabs, activeIndex, overIndex)
+        //   );
+        // }}
+      />
+    </KeepAliveTabContext.Provider>
+  )
+}
+
+export default TabsLayout;

package/src/aldehyde/locale/LocaleProvider.tsx

@@ -1,7 +1,7 @@
 
 import React, { ReactNode, createContext, useEffect, useState } from "react";
 import { useNavigatorLanguage } from "./useLocale";
-import { antdLangMp, getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
+import {getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
 import { LocaleType } from "./langMp";
 import HcserviceV3 from "../tmpl/hcservice-v3";
 
@@ -10,6 +10,8 @@ export const LocaleContext = createContext<{
   langPkg: any;
   availableLang: string[];
   changeLocale: (locale: LocaleType) => void;
+  siderCollapsed:boolean;
+  changeSiderCollapsed:()=>void;
   t: (...strs: string[]) => string;
   translate: (...strs: string[]) => string;
   getServiceLangStr?: ()=>string;
@@ -18,6 +20,8 @@ export const LocaleContext = createContext<{
   availableLang: [],
   langPkg: {},
   changeLocale: () => {},
+  siderCollapsed:false,
+  changeSiderCollapsed:()=>{},
   t: (...str) => str.join(""),
   translate: (str) => {
     let res = [],
@@ -76,6 +80,9 @@ export const LocaleProvider = ({
   const [locale, setLocale] = useState<LocaleType>(
     localeStorageLang ? localeStorageLang : getLangWithLangMp(navigatorLanguage)
   );
+
+  const [siderCollapsed, setSiderCollapsed] = useState<boolean>(false);
+
   const [langPkg, setLangPkg] = useState(
     localeStorageLangPkg ? localeStorageLangPkg : {}
   );
@@ -85,6 +92,10 @@ export const LocaleProvider = ({
     setLocale(locale);
   };
 
+  const changeSiderCollapsed =  () => {
+    setSiderCollapsed(!siderCollapsed);
+  };
+
   const getServiceLangStr =  () => {
     const langStr = getLangWithLangApiMp(locale);
     return langStr;
@@ -196,7 +207,7 @@ export const LocaleProvider = ({
 
   return (
     <LocaleContext.Provider
-      value={{ locale, availableLang, langPkg, changeLocale, t, translate ,getServiceLangStr}}
+      value={{ locale, availableLang, langPkg, changeLocale,siderCollapsed,changeSiderCollapsed, t, translate ,getServiceLangStr}}
     >
       {children}
     </LocaleContext.Provider>

package/src/aldehyde/locale/useLocale.ts

@@ -35,8 +35,9 @@ export const useNavigatorLanguage = (): Readonly<NavigatorLanguageState> => {
 export const useLocale = () => {
   const {
     locale,
-    langPkg,
     changeLocale,
+    siderCollapsed,
+    changeSiderCollapsed,
     t,
     translate,
     availableLang,
@@ -50,8 +51,15 @@ export const useLocale = () => {
     setLocale: (loacle: LocaleType) => {
       changeLocale(loacle);
     },
+    getSiderCollapsed: () => {
+      return siderCollapsed;
+    },
+    changeSiderCollapsed: () => {
+      changeSiderCollapsed();
+    },
     t,
     translate,
-    availableLang,getServiceLangStr
+    availableLang,getServiceLangStr,
+
   };
 };

package/src/aldehyde/login2/login-page.tsx

@@ -66,7 +66,7 @@ const LoginPage = (props:LoginPageProps) => {
         <Login
           onFinish={(token) => {
             HCDataSource.clear();
-            window.location.hash = "/v2";
+            window.location.hash = "/v2/home";
               ProgramConfig.setHydrocarbonToken(token);
           }}
         ></Login>

package/src/aldehyde/module/dtmpl-view-card.tsx

@@ -30,17 +30,6 @@ class DtmplViewCard extends React.PureComponent<DtmplViewCardProps, DtmplViewCar
     static defaultProps={editable:true,
         showHeader:true}
 
-    // async componentDidMount() {
-    //     this.loadDtmplConfig();
-    // }
-    //
-    // async componentDidUpdate(prevProps) {
-    //     const { sourceId} = this.props;
-    //     if(!prevProps || prevProps.sourceId!=sourceId){
-    //         this.loadDtmplConfig();
-    //     }
-    // }
-
     goDtmpl=()=>{
         this.setState({
             showDtmplEdit:true,

package/src/aldehyde/module/ltmpl-table.tsx

@@ -31,6 +31,7 @@ export interface LtmplTableProps {
   collapsible?: boolean;
   initCollapse?: boolean;
   readOnly?: boolean;
+  rowOperatable?: boolean;
 }
 
 export interface LtmplTableState {
@@ -72,6 +73,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
     collapsible: false,
     initCollapse: false,
     readOnly: false,
+    rowOperatable:true,
   };
 
   async componentDidMount() {
@@ -237,20 +239,12 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
       addTmplId,dtmplSourceId,
     } = this.state;
     const {
-      sourceId,
-      mainCode,
-      showView,
-      doSearch,
-      doRAction,
-      funcMode,
-      tip,
-      title,
-      collapsible,
-      initCollapse,
-      doCustomEdit,
-      doCustomCreate,
-      serverKey,
-      readOnly,
+      sourceId, mainCode,
+      showView, doSearch,
+      doRAction, funcMode,
+      tip, title, collapsible,
+      initCollapse, doCustomEdit, doCustomCreate,
+      serverKey,rowOperatable, readOnly,
     } = this.props;
     const { translate } = this.context;
 
@@ -260,24 +254,16 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
       const { buttons, customEditPagePath } = ltmplConfigRes.ltmplConfig;
       return (
         <>
-          <ActTable
-            readOnly={readOnly}
-            tip={tip}
-            serverKey={serverKey}
-            pageSize={pageSize}
-            pageNo={pageNo}
-            onChangePage={this.onChangePage}
-            collapsible={collapsible}
+          <ActTable operatable={rowOperatable} readOnly={readOnly} tip={tip}
+            serverKey={serverKey} pageSize={pageSize} pageNo={pageNo}
+            onChangePage={this.onChangePage} collapsible={collapsible}
             initCollapse={initCollapse && collapse}
-            title={title}
-            funcMode={funcMode}
-            mainCode={mainCode}
+            title={title} funcMode={funcMode} mainCode={mainCode}
             showView={showView ? showView : this.showView}
             doRAction={doRAction ? doRAction : this.doRAction}
             doSearch={doSearch ? doSearch : this.doSearch}
             doEdit={this.doEdit}
-            doCreate={this.doCreate}
-            sourceId={sourceId}
+            doCreate={this.doCreate} sourceId={sourceId}
             criteriaData={criteriaData}
             customEditable={doCustomEdit ? true : false}
             customCreatable={doCustomCreate ? true : false}

package/src/aldehyde/routable/ltmpl-route.tsx

@@ -18,10 +18,12 @@ import DtmplViewDrawer from "../module/dtmpl-view-drawer";
 import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
 import DtmplEditPage from "../module/dtmpl-edit-page";
 import DtmplViewModal from "../module/dtmpl-view-modal";
+import {arrowsOptions} from "ketcher-react/dist/script/ui/views/toolbars/LeftToolbar/leftToolbarOptions";
 
 export interface LtmplRouteProps extends RouterCompProps {
     layoutRootPath?: string;
     tableType?:"common"|"report";
+    rowOperatable?: boolean;
 }
 
 export interface LtmplRouteState {
@@ -44,6 +46,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
     static defaultProps = {
         basePath: "",
         tableType:"common",
+        rowOperatable:true,
     };
     state = {
         ltmplConfigRes: undefined,
@@ -55,7 +58,8 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         showViewDrawer: false,
         showViewModal: false,
         showEdit: false,
-        showWindowType: "modal"
+        showWindowType: "modal",
+        routeMode:'multiple',
     };
 
     async componentDidMount() {
@@ -126,7 +130,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         const {sourceId} = this.props.params;
         const {ltmplConfigRes} = this.state;
         let ltmplConfig: LtmplConfig = ltmplConfigRes.ltmplConfig;
-        let showType: string = !ltmplConfig.buttonViewConfig ? "routing" : ltmplConfig.buttonViewConfig.showType;
+        let showType: string = !ltmplConfig.buttonViewConfig ? "drawer" : ltmplConfig.buttonViewConfig.showType;
 
         let dtmplSourceId = showViewParam.dtmplSourceId
             ? showViewParam.dtmplSourceId
@@ -165,7 +169,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         let ltmplConfig: LtmplConfig = ltmplConfigRes.ltmplConfig;
         let showWindowType: PageType;
 
-        showWindowType = !ltmplConfig.buttonEditConfig ? "routing" : ltmplConfig.buttonEditConfig.showType;
+        showWindowType = !ltmplConfig.buttonEditConfig ? "modal" : ltmplConfig.buttonEditConfig.showType;
 
         let dtmplSourceId = param.dtmplSourceId ? param.dtmplSourceId : sourceId;
         let path = `${basePath}${
@@ -212,7 +216,9 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         const {sourceId} = this.props.params;
         const {ltmplConfigRes} = this.state;
         let ltmplConfig: LtmplConfig = ltmplConfigRes.ltmplConfig;
-        let showWindowType: string = !ltmplConfig.buttonAddConfig ? "routing" : ltmplConfig.buttonAddConfig.showType;
+
+        let showWindowType: string = !ltmplConfig.buttonAddConfig ?"modal" : ltmplConfig.buttonAddConfig.showType;
+
         let path = `${basePath}${
             this.computedLayoutPath
         }/${sourceId}/detail-edit?menuId=${this.getMenuId()}&addTmplId=${
@@ -317,8 +323,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
             ltmplConfigRes, showDraw, showWindowType, ractionId, selectedCode,
             showViewDrawer, showViewModal, showEdit
         } = this.state;
-        const {location, params,tableType} = this.props;
-
+        const {location, params,tableType,rowOperatable} = this.props;
         const {sourceId} = params;
         const {translate} = this.context;
         //let menuId = undefined;
@@ -338,41 +343,37 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
 
         let ltmplConfig = ltmplConfigRes ? ltmplConfigRes.ltmplConfig : null;
 
+        let windowWidth = ltmplConfig?.buttonViewConfig?.windowWidth
+        windowWidth= windowWidth && windowWidth>0 ? windowWidth : 1280;
+
+        let windowHeight = ltmplConfig?.buttonViewConfig?.windowHeight;
+        windowHeight= windowHeight && windowHeight>0 ? windowHeight : '80vh';
+
+        let windowEditWidth = ltmplConfig?.buttonEditConfig?.windowWidth;
+        windowEditWidth= windowEditWidth && windowEditWidth>0 ? windowEditWidth : 1280;
+
+        let windowEditHeight = ltmplConfig?.buttonEditConfig?.windowHeight;
+        windowEditHeight= windowEditHeight && windowEditHeight>0 ? windowEditHeight : '80vh';
+
         if (!ltmplConfig) {
             return <></>;
         } else {
             return (
                 <>
                     <ActTable
-                        tableType={tableType}
-                        serverKey={null}
-                        pageSize={pageSize}
-                        pageNo={pageNo}
-                        onChangePage={this.onChangePage}
-                        menuId={this.getMenuId()}
-                        mainCode={mainCode}
-                        showView={this.showView}
-                        doSearch={this.onChangeSearch}
-                        doEdit={this.doEdit}
-                        doCreate={this.doCreate}
-                        sourceId={sourceId}
-                        criteriaData={criteriaData}
-                        ltmplConfig={ltmplConfig}
-                        doRAction={this.doRAction}
+                        tableType={tableType} serverKey={null} pageSize={pageSize} pageNo={pageNo} onChangePage={this.onChangePage}
+                        menuId={this.getMenuId()} operatable={rowOperatable}
+                        mainCode={mainCode} showView={this.showView} doSearch={this.onChangeSearch} doEdit={this.doEdit}
+                        doCreate={this.doCreate} sourceId={sourceId}
+                        criteriaData={criteriaData} ltmplConfig={ltmplConfig} doRAction={this.doRAction}
                     />
                     {showDraw ? (
                         <Drawer
-                            placement={"left"}
-                            title={translate("${关联查询}")}
-                            closable={true}
-                            mask={false}
-                            onClose={this.doClose}
-                            open={showDraw}
-                            width={"calc(100% - 280px)"}
+                            placement={"left"} title={translate("${关联查询}")} closable={true} mask={false} onClose={this.doClose}
+                            open={showDraw} width={"calc(100% - 280px)"}
                             style={{
                                 maxWidth: 1960,
-                            }}
-                            extra={
+                            }} extra={
                                 <Space>
                                     <Button onClick={this.doClose}>
                                         {translate("${关闭}")}
@@ -381,19 +382,14 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                             }
                         >
                             {
-                                <LtmplTable
-                                    serverKey={null}
-                                    sourceId={ractionId}
-                                    mainCode={selectedCode}
-                                ></LtmplTable>
+                                <LtmplTable serverKey={null} sourceId={ractionId} mainCode={selectedCode}></LtmplTable>
                             }
                         </Drawer>
                     ) : null}
                     {showViewDrawer && selectedCode ? (
                         <DtmplViewDrawer
-                            serverKey={null}
-                            placement={ltmplConfig.buttonViewConfig.windowPosition}
-                            width={ltmplConfig.buttonViewConfig.windowWidth}
+                            serverKey={null} placement={ltmplConfig.buttonViewConfig.windowPosition}
+                            width={ windowWidth}
                             onClose={this.doClose}
                             open={showViewDrawer}
                             sourceId={sourceId}
@@ -402,12 +398,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                     ) : null}
                     {showViewModal && selectedCode ? (
                         <DtmplViewModal
-                            serverKey={null}
-                            width={ltmplConfig.buttonViewConfig.windowWidth}
-                            height={ltmplConfig.buttonViewConfig.windowHeight}
-                            onClose={this.doClose}
-                            open={showViewModal}
-                            sourceId={sourceId}
+                            serverKey={null} width={windowWidth} height={windowHeight} onClose={this.doClose} open={showViewModal} sourceId={sourceId}
                             code={selectedCode}
                         ></DtmplViewModal>
                     ) : null}
@@ -429,8 +420,8 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                                 serverKey={null}
                                 pageType={showWindowType=="modal"?"modal":"drawer"}
                                 open={showEdit}
-                                width={selectedCode ? ltmplConfig.buttonEditConfig.windowWidth : ltmplConfig.buttonAddConfig.windowWidth}
-                                height={selectedCode ? ltmplConfig.buttonEditConfig.windowHeight : ltmplConfig.buttonAddConfig.windowHeight}
+                                width={windowEditWidth }
+                                height={windowEditHeight}
                                 onCancel={this.doClose}
                                 mainCode={mainCode}
                                 sourceId={sourceId}

package/src/aldehyde/routable/ttmpl-route.tsx

@@ -12,6 +12,7 @@ import ActTree from "../tree/act-tree";
 import { Card } from "antd";
 export interface TtmplRouteProps extends RouterCompProps {
   layoutRootPath?: string;
+  treeTop?:number,
 }
 
 export interface TtmplRouteState {
@@ -78,14 +79,14 @@ class TtmplRoute extends React.PureComponent<TtmplRouteProps, TtmplRouteState> {
   }
 
   render() {
-    const {} = this.props;
+    const {treeTop} = this.props;
     const { ttmplConfig } = this.state;
     if (!ttmplConfig) {
       return <Card loading={true}></Card>;
     } else {
       return (
         <>
-          <ActTree ttmplConfig={ttmplConfig}></ActTree>
+          <ActTree top={treeTop} ttmplConfig={ttmplConfig}></ActTree>
         </>
       );
     }

package/src/aldehyde/routable/withroute.tsx

@@ -9,14 +9,24 @@ import {
 const withRouter = (Comp) => (props) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const params = useParams();
+
   const [searchParams, setSearchParams] = useSearchParams();
+
+  const {pathname} = location;
+    const {sourceId} = useParams();
+   //let sourceId= pathname.split("/")[2];
+
+  // debugger
+  // if(location.pathname.indexOf(sourceId)<=0){
+  //   return <></>
+  // }
+
   return (
     <Comp
       {...props}
       location={location}
       navigate={navigate}
-      params={params}
+      params={{sourceId}}
       searchParams={searchParams}
     />
   );