aldehyde 0.2.461 → 0.2.463

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

@@ -48,6 +48,8 @@ interface ModalEditorState {
   dtmplData?: DtmplData;
   valueFieldMap?: { [key: string]: any };
   isContinueSave?: boolean; // 是否连续保存
+  btnLoading?: string; // 按钮loading控制
+  drawerSize?: number | string; // 抽屉组件尺寸
 }
 
 export default class DtmplEditPage extends React.PureComponent<
@@ -88,9 +90,14 @@ export default class DtmplEditPage extends React.PureComponent<
     dtmplData: undefined,
     valueFieldMap: {},
     isContinueSave: false, // 是否连续保存
+    btnLoading: "",
+    drawerSize: 0
   };
 
   async componentDidMount() {
+    const { height, width } = this.props;
+    const placement = this.props.placement || 'left';
+    this.setState({ drawerSize: ["top", "bottom"].includes(placement) ? height : width });
     if (this.props.open) {
       await this.loadConfigData();
     }
@@ -207,6 +214,7 @@ export default class DtmplEditPage extends React.PureComponent<
         if (this.autoSaveTimer >= dtmplConfig.autoSaveInterval) {
           //console.log('执行自动保存');
           this.autoSaveTimer = -1000000000000000;
+          this.setState({ btnLoading: "saveLoading" });
           this.doSubmit(undefined);
         } else {
           this.autoSaveTimer = this.autoSaveTimer + 1;
@@ -321,7 +329,6 @@ export default class DtmplEditPage extends React.PureComponent<
 
   doSubmit = (actionId?: number, codes?: string[], params?: object, isContinue?: boolean) => {
     const { mainCode } = this.props;
-    this.setState({ loading: true })
     //if (actionId) {
     this.formRef.current.setFieldsValue({ actionId: actionId });
     // }
@@ -337,20 +344,26 @@ export default class DtmplEditPage extends React.PureComponent<
 
   getFooter = () => {
     const { onCancel, serverKey } = this.props;
-    const { dtmplData, serial, loading } = this.state;
+    const { dtmplData, serial, loading, btnLoading } = this.state;
     const footerButtons = [];
     const { dtmplConfig } = this.state;
     const { saveBtnTitle, continueSaveBtnTitle } = dtmplConfig || {};
     const { translate } = this.context;
     if (dtmplConfig?.buttons?.includes("dtmplSave")) {
       footerButtons.unshift(
-        <Button type="primary" loading={loading} onClick={() => this.doSubmit()}>
+        <Button type="primary" loading={loading || btnLoading === "saveLoading"} onClick={() => {
+          this.setState({ btnLoading: "saveLoading" });
+          this.doSubmit();
+        }}>
           {translate("${" + (saveBtnTitle || "保存") + "}")}
         </Button>
       );
       if (continueSaveBtnTitle) {
         footerButtons.unshift(
-          <Button type="primary" loading={loading} onClick={() => this.doSubmit(null, null, null, true)}>
+          <Button type="primary" loading={loading || btnLoading === "continueSaveLoading"} onClick={() => {
+            this.setState({ btnLoading: "continueSaveLoading" });
+            this.doSubmit(null, null, null, true);
+          }}>
             {translate("${" + continueSaveBtnTitle + "}")}
           </Button>
         );
@@ -369,8 +382,12 @@ export default class DtmplEditPage extends React.PureComponent<
             data={[dtmplData]}
             formRef={this.formRef}
             actionConfig={ac}
-            doAction={this.doSubmit}
-          ></Action>
+            doAction={(...val) => {
+              this.setState({ btnLoading: `actionLoading${index}` });
+              this.doSubmit(...val);
+            }}
+            loading={loading || btnLoading === `actionLoading${index}`}
+          />
         );
       });
     }
@@ -392,7 +409,7 @@ export default class DtmplEditPage extends React.PureComponent<
   onFinish = (code) => {
     const { code: propsCode } = this.props;
     const { isContinueSave } = this.state;
-    this.setState({ loading: false });
+    this.setState({ loading: false, btnLoading: "" });
     if (code) {
       if (propsCode && isContinueSave) {
         this.loadConfigData();
@@ -415,8 +432,9 @@ export default class DtmplEditPage extends React.PureComponent<
       title,
       serverKey, parentFormInstance
     } = this.props;
-    const { dtmplConfig, id, dtmplData, valueFieldMap } = this.state;
+    const { dtmplConfig, id, dtmplData, valueFieldMap, drawerSize } = this.state;
     const placement = this.props.placement || "left";
+    const maxSize = ["top", "bottom"].includes(placement) ? document.documentElement.clientHeight : document.documentElement.clientWidth * 0.9;
 
     let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
     const { translate } = this.context;
@@ -427,7 +445,7 @@ export default class DtmplEditPage extends React.PureComponent<
 
     return (
       <>
-        {pageType == "modal" ? (
+        {pageType === "modal" ? (
           // <Draggable  handle=".ant-modal-header">
           <DraggableModal
             open={open}
@@ -461,40 +479,39 @@ export default class DtmplEditPage extends React.PureComponent<
           >
           </DraggableModal>
           // </Draggable>
-        ) : pageType == "drawer" ? (
-
+        ) : pageType === "drawer" ? (
           <Drawer
             onClick={this.onClickBody}
             title={title1}
             placement={placement}
+            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+            size={drawerSize}
+            maxSize={maxSize}
             closable={true}
             mask={false}
-            width={width}
             onClose={onCancel}
             open={open}
-            height={["top", "bottom"].includes(placement) ? height : "calc(100%)"}
-            style={{
-              maxWidth: ["top", "bottom"].includes(placement) ? "100vw" : "92vw",
-              border: "2px solid #d9d9d9",
-              width,
-            }}
+            style={{ border: "2px solid #d9d9d9" }}
             extra={<Space>{this.getFooter()}</Space>}
+            styles={{ body: { minWidth: width } }}
           >
-            <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}
-              valueFieldMap={valueFieldMap}
-            />
+            <div style={{ width: '100%', minWidth: width }}>
+              <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}
+                valueFieldMap={valueFieldMap}
+              />
+            </div>
           </Drawer>
         ) : (
           <Card title={title1}>

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

@@ -15,13 +15,13 @@ interface DtmplViewDrawerProps extends DtmplBaseProps {
 }
 
 interface DtmplViewDrawerState {
-
+    drawerSize?: number | string; // 抽屉组件尺寸
 }
 
 
 class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplViewDrawerState> {
     state = {
-
+        drawerSize: "82vw"
     }
 
     static defaultProps = {
@@ -35,29 +35,29 @@ class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplVie
     }
 
     async componentDidMount() {
-
+        const { height, width } = this.props;
+        const placement = this.props.placement || 'left';
+        this.setState({ drawerSize: ["top", "bottom"].includes(placement) ? height : width });
     }
 
     render() {
-        const { title, sourceId, code, open, onClose, width, height, cancelText, editable, serverKey, codeSource } = this.props;
+        const { title, sourceId, code, open, onClose, cancelText, editable, serverKey, codeSource } = this.props;
+        const { drawerSize } = this.state;
         const placement = this.props.placement || 'left';
+        const maxSize = ["top", "bottom"].includes(placement) ? document.documentElement.clientHeight : document.documentElement.clientWidth * 0.9;
 
         return (<Drawer
-            height={["top", "bottom"].includes(placement) ? height : "100%"}
+            size={drawerSize}
             placement={placement}
             title={title}
+            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+            maxSize={maxSize}
             closable={true}
             mask={false}
             destroyOnHidden={true}
             onClose={onClose}
             open={open}
-            style={{
-                maxWidth: ["top", "bottom"].includes(placement) ? "100vw" : "92vw",
-                border: "2px solid #d9d9d9",
-                width
-                // borderRightWidth:"2px",
-                // borderLeftWidth:"2px",
-            }}
+            style={{ border: "2px solid #d9d9d9" }}
             extra={
                 <Space>
                     <Button onClick={() => onClose()}>{cancelText}</Button>

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

@@ -12,7 +12,7 @@ interface LtmplDrawPageProps extends LtmplTableProps {
 }
 
 interface LtmplDrawPageState {
-
+    drawerSize?: number | string;
 }
 
 export default class LtmplDrawer extends React.PureComponent<LtmplDrawPageProps, LtmplDrawPageState> {
@@ -27,30 +27,32 @@ export default class LtmplDrawer extends React.PureComponent<LtmplDrawPageProps,
         placement: 'left',
     }
     state = {
-
+        drawerSize: 0
     }
 
+    async componentDidMount() {
+        const { width } = this.props;
+        this.setState({ drawerSize: width });
+    }
 
     render() {
         const { title, width, onCancel, open, ...other } = this.props;
+        const { drawerSize } = this.state;
         const placement = this.props.placement || 'left';
+        const maxSize = document.documentElement.clientWidth * 0.9;
 
         return (<Drawer
             title={title}
             placement={placement}
+            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
             closable={true}
             mask={false}
             onClose={onCancel}
             open={open}
-            width={width}
-            style={{
-                maxWidth: '92vw',
-            }}
-        // extra={
-        //     <Space>{this.getFooter()}</Space>
-        // }
+            size={drawerSize}
+            maxSize={maxSize}
         >
-            <LtmplTable {...other}></LtmplTable>
+            <LtmplTable {...other} />
         </Drawer>
         )
 

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

@@ -54,6 +54,7 @@ export interface LtmplTableState {
   collapse?: boolean;
   addTmplId?: string;
   dtmplSourceId?: string;
+  drawerSize?: number | string; // 抽屉组件
 }
 
 class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
@@ -71,6 +72,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
     collapse: false,
     addTmplId: undefined,
     dtmplSourceId: undefined,
+    drawerSize: "92vw"
   };
   static contextType = LocaleContext;
   context: React.ContextType<typeof LocaleContext>;
@@ -252,7 +254,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
       ractionId,
       showDraw,
       collapse,
-      addTmplId, dtmplSourceId,
+      addTmplId, dtmplSourceId, drawerSize
     } = this.state;
     const {
       sourceId, mainCode,
@@ -350,15 +352,13 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
             <Drawer
               placement={"left"}
               title={translate("${关联查询}")}
+              resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+              size={drawerSize}
               closable={true}
               mask={false}
               onClose={this.closeDrawer}
               open={showDraw}
-              width="100%"
-              rootStyle={{
-                width: "calc(100% - 280px)",
-                maxWidth: 1960,
-              }}
+              styles={{ body: { minWidth: "720px" } }}
               extra={
                 <Space>
                   <Button onClick={this.closeDrawer}>
@@ -367,13 +367,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
                 </Space>
               }
             >
-              {
-                <LtmplTable
-                  serverKey={serverKey}
-                  sourceId={ractionId}
-                  mainCode={selectedCode}
-                ></LtmplTable>
-              }
+              <LtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode} />
             </Drawer> : null}
         </>
       );

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

@@ -44,6 +44,7 @@ export interface LtmplRouteState {
     userPageConfigLoading?: boolean; // 缓存配置请求状态
     themeConfig?: ThemeConfig;
     pageSizeOptions?: number[]; // 分页条数
+    drawerSize?: number | string; // 抽屉组件
 }
 
 class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
@@ -73,7 +74,8 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         userPageConfig: undefined,
         userPageConfigLoading: true,
         themeConfig: undefined,
-        pageSizeOptions: []
+        pageSizeOptions: [],
+        drawerSize: "92vw"
     };
 
     async componentDidMount() {
@@ -374,7 +376,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         const {
             ltmplConfigRes, showDraw, showWindowType, ractionId, selectedCode,
             showViewDrawer, showViewModal, showEdit, editSourceId, viewSourceId, toCustomPage, userPageConfig,
-            themeConfig, pageSizeOptions, userPageConfigLoading
+            themeConfig, pageSizeOptions, userPageConfigLoading, drawerSize
         } = this.state;
         const { location, params, tableType, rowOperatable, defShowType } = this.props;
         const { sourceId } = params;
@@ -427,11 +429,8 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                         <Drawer
                             placement={"left"} title={translate("${关联查询}")} closable={true} mask={false} onClose={this.doClose}
                             open={showDraw}
-                            width="100%"
-                            rootStyle={{
-                                width: "calc(100% - 280px)",
-                                maxWidth: 1960,
-                            }}
+                            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+                            size={drawerSize}
                             extra={
                                 <Space>
                                     <Button onClick={this.doClose}>
@@ -439,10 +438,9 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                                     </Button>
                                 </Space>
                             }
+                            styles={{ body: { minWidth: "720px" } }}
                         >
-                            {
-                                <LtmplTable serverKey={null} sourceId={ractionId} mainCode={selectedCode}></LtmplTable>
-                            }
+                            <LtmplTable serverKey={null} sourceId={ractionId} mainCode={selectedCode} />
                         </Drawer>
                     ) : null}
                     {showViewDrawer && selectedCode ? (

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

@@ -41,6 +41,7 @@ const Index = (props: Props) => {
     const [userPageConfigLoading, setUserPageConfigLoading] = useState<boolean>(true);
     const [pageSizeOptions, setPageSizeOptions] = useState<number[]>([]); // 分页条数
     const [themeConfig, setThemeConfig] = useState<ThemeConfig>();     // 主题配置信息
+    const [drawerSize, setDrawerSize] = useState<number | string>("92vw");
     const { sourceId } = useParams();
     const { search } = useLocation();
     const { translate } = useLocale();
@@ -310,11 +311,9 @@ const Index = (props: Props) => {
             <Drawer
                 placement="left" title={translate("${关联查询}")} closable={true} mask={false} onClose={doCloseShowDraw}
                 open={showDraw}
-                width="100%"
-                rootStyle={{
-                    width: "calc(100% - 280px)",
-                    maxWidth: 1960,
-                }}
+                resizable={{ onResize: (newSize => setDrawerSize(newSize)) }}
+                size={drawerSize}
+                styles={{ body: { minWidth: "720px" } }}
                 extra={
                     <Space>
                         <Button onClick={doCloseShowDraw}>{translate("${关闭}")}</Button>

package/src/aldehyde/table/act-table.tsx

@@ -115,6 +115,7 @@ interface ActTableStat {
   tabsOptions?: { key: string, value: string, label: React.ReactNode, title?: string, id?: string, ids?: string[] }[]; // tabs选项
   tabActiveKey?: string; // Tabs选中项
   pageSizeOptions?: number[]; // 设备分页数
+  customDrawerSize?: number | string; // 自定义页面抽屉宽度
 }
 let serial_number = new Date().getTime();
 let busyReminderTime = 0;
@@ -150,7 +151,8 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
     delModalOpen: false, // 强删除弹窗是否打开
     tabsOptions: [],
     tabActiveKey: "all",
-    pageSizeOptions: defPageSizeOptions
+    pageSizeOptions: defPageSizeOptions,
+    customDrawerSize: undefined
   };
 
   static contextType = LocaleContext;
@@ -381,7 +383,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
       | "right-drawer"
   ) => {
     const { translate } = this.context;
-    const { customButton, customButtonData } = this.state;
+    const { customButton, customButtonData, customDrawerSize } = this.state;
 
     if (!customButton) {
       return "";
@@ -451,10 +453,12 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
           placement={
             customButton.windowPosition == "right-drawer" ? "right" : "left"
           }
-          width={customButton.windowWidth}
+          resizable={{ onResize: (newSize => this.setState({ customDrawerSize: newSize })) }}
+          size={customDrawerSize !== undefined ? customDrawerSize : customButton.windowWidth}
           onClose={() => {
             this.setState({ customButton: undefined });
           }}
+          styles={{ body: { minWidth: customButton.windowWidth } }}
         >
           {customElement}
         </Drawer>
@@ -497,7 +501,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
         const temPageSizes = Array.from({ length: 7 }, (_, i) => ltmplConfig.rowCardCount * Math.pow(2, i));
         onUpdatePageSizeOptions(temPageSizes);
         if (setUserPageConfig && !(userPageConfig?.pageSize >= 0)) setUserPageConfig({ pageSize: 1 });
-        this.setState({ pageSizeOptions: temPageSizes });
+        this.setState({ pageSizeOptions: temPageSizes, sortedColConfigs });
       } else {
         this.loadData(userPageConfig?.hiddenColIds || defaultDisabledColIds, [], sortedColConfigs);
       }