aldehyde 0.2.97 → 0.2.99

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

@@ -1,209 +1,315 @@
-import React from 'react'
-import {DtmplBaseProps, DtmplConfig, DtmplData, FieldGroupConfig} from "../../tmpl/interface";
+import React from "react";
+import {
+  DtmplBaseProps,
+  DtmplConfig,
+  DtmplData,
+  FieldGroupConfig,
+} from "../../tmpl/interface";
 import RelationTable from "../../table/relation-table";
-import FieldViewGroup from './field-view-group';
+import FieldViewGroup from "./field-view-group";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
 import RightBar from "../rightbar";
-import '../dtmpl.css';
-import Units from '../../units';
+import "../dtmpl.css";
+import Units from "../../units";
 import CollapseCard from "../../controls/collapse-card";
 import CqueryButtonBar from "../button/cquery-button-bar";
 import TmplConfigAnalysis from "../../tmpl/tmpl-config-analysis";
-import {Card} from "antd";
+import { Card } from "antd";
 import LtmplTable from "../../module/ltmpl-table";
 import DtmplViewCard from "../../module/dtmpl-view-card";
 
-
 export interface DtmplViewProps extends DtmplBaseProps {
-    versionId?: number;
-    dtmplConfig: DtmplConfig,
-    refreshCode?: string,
-    parentId?:string
-};
+  versionId?: number;
+  dtmplConfig: DtmplConfig;
+  refreshCode?: string;
+  parentId?: string;
+}
 
 export interface DtmplViewStat {
-    id?: string;
-    loading?: boolean,
-    dtmplData?: DtmplData,
-    premisesTitle?: string,
-    layout?: object,
-};
+  id?: string;
+  loading?: boolean;
+  dtmplData?: DtmplData;
+  premisesTitle?: string;
+  layout?: object;
+}
 
 class DtmplView extends React.PureComponent<DtmplViewProps, DtmplViewStat> {
-    static defaultProps = {
-        showRightNav: true,
+  static defaultProps = {
+    showRightNav: true,
+  };
+
+  state = {
+    loading: true,
+    id: "dtmplView" + Units.getRandomNum(6),
+    snapshotOpen: false,
+    dtmplData: undefined,
+    premisesTitle: "默认字段",
+    layout: {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+    },
+  };
+
+  async componentDidMount() {
+    await this.loadData();
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { sourceId, code, versionId, refreshCode } = this.props;
+    const {
+      code: preCode,
+      versionId: preVersionId,
+      refreshCode: preRefreshCode,
+    } = prevProps;
+    if (
+      code != preCode ||
+      (versionId && versionId != prevProps.versionId) ||
+      (refreshCode && refreshCode != preRefreshCode)
+    ) {
+      await this.loadData();
     }
+  }
 
-    state = {
+  loadData = async () => {
+    const {
+      sourceId,
+      code: propsCode,
+      versionId,
+      serverKey,
+      codeSource,
+    } = this.props;
+    let code = propsCode;
+    if (!code && codeSource) {
+      code = await HcserviceV3.queryCode(sourceId, codeSource, serverKey);
+    }
+    if (code) {
+      this.setState({
         loading: true,
-        id: 'dtmplView' + Units.getRandomNum(6),
-        snapshotOpen: false,
-        dtmplData: undefined,
-        premisesTitle: "默认字段",
-        layout: {
-            labelCol: {span: 8},
-            wrapperCol: {span: 16},
-        },
+      });
+      const dtmplData = await HcserviceV3.requestViewDtmplData(
+        serverKey,
+        sourceId,
+        code,
+        versionId
+      );
+      this.setState({
+        dtmplData,
+        loading: false,
+      });
+    } else {
+      this.setState({
+        loading: false,
+      });
     }
+  };
 
-    async componentDidMount() {
-        await this.loadData();
-    }
+  fieldGroupList = () => {
+    const {
+      dtmplConfig,
+      serverKey,
+      mainCode,
+      showRightNav,
+      parentId,
+    } = this.props;
+    const { dtmplData, loading, id } = this.state;
 
-    async componentDidUpdate(prevProps) {
-        const {sourceId, code, versionId, refreshCode} = this.props;
-        const {code: preCode, versionId: preVersionId, refreshCode: preRefreshCode} = prevProps;
-        if (code != preCode || (versionId && versionId != prevProps.versionId) || (refreshCode && refreshCode != preRefreshCode)) {
-            await this.loadData();
-        }
+    let groups: FieldGroupConfig[] = [];
+    if (dtmplConfig) {
+      groups = dtmplConfig.groups;
     }
-
-    loadData = async () => {
-        const {sourceId, code: propsCode, versionId, serverKey, codeSource} = this.props;
-        let code = propsCode;
-        if (!code && codeSource) {
-            code = await HcserviceV3.queryCode(sourceId, codeSource, serverKey);
+    return groups.map((item) => {
+      if (item.type == "embed") {
+        if (!dtmplData) {
+          return;
+        }
+        let codeSource = undefined;
+        //code 从来源字段里面拿
+        let code = TmplConfigAnalysis.getFieldValueCodeOfMstrucId(
+          dtmplConfig,
+          dtmplData.fieldMap,
+          item.codeSourceFieldMstrucId
+        );
+        let innerSourceId = TmplConfigAnalysis.getFieldValueCodeOfMstrucId(
+          dtmplConfig,
+          dtmplData.fieldMap,
+          item.pageSourceFieldMstrucId
+        );
+        innerSourceId = innerSourceId ? innerSourceId : item.pointSourceId;
+        if (!innerSourceId) {
+          return null;
         }
-        if (code) {
-            this.setState({
-                loading: true,
-            })
-            const dtmplData = await HcserviceV3.requestViewDtmplData(serverKey, sourceId, code, versionId);
-            this.setState({
-                dtmplData, loading: false,
-            })
+        if (item.embedType == "列表") {
+          return (
+            <Card
+              bodyStyle={{ padding: 0 }}
+              bordered={false}
+              style={{ width: showRightNav ? "90%" : "100%" }}
+            >
+              <LtmplTable
+                readOnly={true}
+                serverKey={null}
+                collapsible={true}
+                initCollapse={false}
+                title={item.title}
+                mainCode={mainCode}
+                funcMode={"common"}
+                sourceId={innerSourceId}
+              ></LtmplTable>
+            </Card>
+          );
+        } else if (item.embedType == "详情") {
+          codeSource = "listop";
+          return (
+            <CollapseCard
+              showRightNav={showRightNav}
+              tip={item.tip}
+              title={item.title}
+              key={item.id}
+              id={parentId + item.id}
+              className="hoverable"
+              headStyle={{ background: "#f2f4f5" }}
+              loading={loading}
+              bodyStyle={{ padding: "6px" }}
+            >
+              <DtmplViewCard
+                showHeader={false}
+                codeSource={codeSource}
+                code={code}
+                sourceId={innerSourceId}
+              ></DtmplViewCard>{" "}
+            </CollapseCard>
+          );
         } else {
-            this.setState({
-                loading: false,
-            })
+          switch (item.embedType) {
+            case "编辑":
+              codeSource = "listop";
+              break;
+            case "编辑或添加":
+              codeSource = "new";
+              break;
+          }
+          return (
+            <CollapseCard
+              showRightNav={showRightNav}
+              tip={item.tip}
+              title={item.title}
+              key={item.id}
+              id={parentId + item.id}
+              className="hoverable"
+              headStyle={{ background: "#f2f4f5" }}
+              loading={loading}
+              bodyStyle={{ padding: "6px" }}
+            >
+              <DtmplViewCard
+                showHeader={false}
+                codeSource={codeSource}
+                code={code}
+                sourceId={innerSourceId}
+              ></DtmplViewCard>{" "}
+            </CollapseCard>
+          );
         }
-    }
-
-    fieldGroupList = () => {
-        const {dtmplConfig, serverKey,mainCode,showRightNav,parentId} = this.props;
-        const {dtmplData, loading, id} = this.state;
-
-        let groups: FieldGroupConfig[] = [];
-        if (dtmplConfig) {
-            groups = dtmplConfig.groups;
+      } else if (item.type == "relation") {
+        //关系
+        if (item.fields) {
+          let data: DtmplData[] = undefined;
+          if (dtmplData) {
+            data = dtmplData.arrayMap[item.id];
+          }
+          // console.log("dtmplData", dtmplData );
+          // console.log("dtmplData data", data );
+          // console.log("initCollapsed", dtmplData && (!data || data.length<=0));
+          return (
+            <RelationTable
+              serverKey={serverKey}
+              initCollapse={dtmplData && (!data || data.length <= 0)}
+              loading={loading}
+              parentId={id}
+              key={item.id}
+              fieldGroupConfig={item}
+              value={data}
+              viewOrEdit={"view"}
+            />
+          );
         }
-        return groups.map((item) => {
-
-            if(item.type == 'embed'){
-                if(!dtmplData){
-                    return;
-                }
-                let codeSource=undefined;
-                //code 从来源字段里面拿
-                let code=TmplConfigAnalysis.getFieldValueCodeOfMstrucId(dtmplConfig,dtmplData.fieldMap,item.codeSourceFieldMstrucId);
-                let innerSourceId=TmplConfigAnalysis.getFieldValueCodeOfMstrucId(dtmplConfig,dtmplData.fieldMap,item.pageSourceFieldMstrucId);
-                innerSourceId=innerSourceId?innerSourceId:item.pointSourceId;
-                if(!innerSourceId){
-                    return null;
-                }
-                if(item.embedType=='列表'){
-                    return <Card bodyStyle={{padding:0}} bordered={false} style={{width:showRightNav?"90%":'100%'}}>
-                        <LtmplTable readOnly={true}  serverKey={null} collapsible={true} initCollapse={false}
-                                     title={item.title}
-                                     mainCode={mainCode} funcMode={'common'} sourceId={innerSourceId}></LtmplTable></Card>
-                }else if(item.embedType=='详情'){
-                    codeSource = 'listop';
-                    return <CollapseCard showRightNav={showRightNav}
-                                         tip={item.tip}
-                                         title={item.title}
-                                         key={item.id}
-                                         id={parentId + item.id}
-                                         className="hoverable"
-                                         headStyle={{background: "#f2f4f5"}}
-                                         loading={loading}
-                                         bodyStyle={{padding: '6px'}}
-                    ><DtmplViewCard showHeader={false} codeSource={codeSource}  code={code} sourceId={innerSourceId}></DtmplViewCard> </CollapseCard>
-                }else {
-                    switch (item.embedType) {
-                        case "编辑":
-                            codeSource = 'listop';
-                            break;
-                        case "编辑或添加":
-                            codeSource = 'new';
-                            break;
-                    }
-                    return <CollapseCard showRightNav={showRightNav}
-                                         tip={item.tip}
-                                         title={item.title}
-                                         key={item.id}
-                                         id={parentId + item.id}
-                                         className="hoverable"
-                                         headStyle={{background: "#f2f4f5"}}
-                                         loading={loading}
-                                         bodyStyle={{padding: '6px'}}
-                    ><DtmplViewCard showHeader={false} codeSource={codeSource}  code={code} sourceId={innerSourceId}></DtmplViewCard> </CollapseCard>
-                }
-            }else if (item.type == 'relation') {//关系
-                    if (item.fields) {
-                        let data: DtmplData[] = undefined;
-                        if (dtmplData) {
-                            data = dtmplData.arrayMap[item.id];
-                        }
-                        // console.log("dtmplData", dtmplData );
-                        // console.log("dtmplData data", data );
-                        // console.log("initCollapsed", dtmplData && (!data || data.length<=0));
-                        return <RelationTable serverKey={serverKey} initCollapse={dtmplData && (!data || data.length <= 0)}
-                                              loading={loading} parentId={id} key={item.id} fieldGroupConfig={item}
-                                              value={data}
-                                              viewOrEdit={"view"}/>
-                    }
-                } else {//字段组
-                    return <CollapseCard tip={item.tip}
-                                         title={item.title}
-                                         key={item.id}
-                                         id={id + item.id}
-                                         className="hoverable"
-                                         headStyle={{background: "#f2f4f5"}}
-                                         loading={loading}
-                    >
-                        <FieldViewGroup serverKey={serverKey} fields={item.fields}
-                                        valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-                                        width={220}></FieldViewGroup>
-                    </CollapseCard>
-                }
-
-            }
+      } else {
+        //字段组
+        return (
+          <CollapseCard
+            tip={item.tip}
+            title={item.title}
+            key={item.id}
+            id={id + item.id}
+            className="hoverable"
+            headStyle={{ background: "#f2f4f5" }}
+            loading={loading}
+          >
+            <FieldViewGroup
+              serverKey={serverKey}
+              fields={item.fields}
+              valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+              width={220}
+            ></FieldViewGroup>
+          </CollapseCard>
         );
-    }
+      }
+    });
+  };
 
-    render() {
-        const {showRightNav, rightBarPositionRight, code, sourceId, dtmplConfig, serverKey} = this.props;
-        const {premisesTitle, loading, dtmplData, layout, snapshotOpen, id} = this.state;
-        const premises = dtmplConfig ? dtmplConfig.premises : undefined;
+  render() {
+    const {
+      showRightNav,
+      rightBarPositionRight,
+      code,
+      sourceId,
+      dtmplConfig,
+      serverKey,
+    } = this.props;
+    const {
+      premisesTitle,
+      loading,
+      dtmplData,
+      layout,
+      snapshotOpen,
+      id,
+    } = this.state;
+    const premises = dtmplConfig ? dtmplConfig.premises : undefined;
 
-        return (
-
-            <div>
-                {this.fieldGroupList()}
-                {premises && premises.length > 0 ?
-                    <CollapseCard
-                        // title={<Button type="text"><HolderOutlined />{premisesTitle}</Button>}
-                        title={premisesTitle}
-                        key={premisesTitle}
-                        id={id + premises[0].id}
-                        className="hoverable"
-                        headStyle={{background: "#f2f4f5"}}
-                        loading={loading}
-                    >
-                        <FieldViewGroup serverKey={serverKey}
-                                        fields={premises}/>
-                    </CollapseCard>
-                    : ""
-                }
-                {showRightNav ?
-                    <RightBar parentId={id} positionRight={rightBarPositionRight} dtmplConfig={dtmplConfig}/> : ""
-                }
-                <CqueryButtonBar serverKey={serverKey} dtmplConfig={dtmplConfig} mainCode={code}></CqueryButtonBar>
-            </div>
-        );
-    }
+    return (
+      <div>
+        {this.fieldGroupList()}
+        {premises && premises.length > 0 ? (
+          <CollapseCard
+            // title={<Button type="text"><HolderOutlined />{premisesTitle}</Button>}
+            title={premisesTitle}
+            key={premisesTitle}
+            id={id + premises[0].id}
+            className="hoverable"
+            headStyle={{ background: "#f2f4f5" }}
+            loading={loading}
+          >
+            <FieldViewGroup serverKey={serverKey} fields={premises} />
+          </CollapseCard>
+        ) : (
+          ""
+        )}
+        {showRightNav ? (
+          <RightBar
+            parentId={id}
+            positionRight={rightBarPositionRight}
+            dtmplConfig={dtmplConfig}
+          />
+        ) : (
+          ""
+        )}
+        <CqueryButtonBar
+          serverKey={serverKey}
+          dtmplConfig={dtmplConfig}
+          mainCode={code}
+        ></CqueryButtonBar>
+      </div>
+    );
+  }
 }
 
-
 export default DtmplView;
-

package/src/aldehyde/detail/view/modal-dtmpl-view.tsx

@@ -1,59 +1,72 @@
-import React from 'react';
-import {Modal, ModalProps as AntdModalProps,Form,Button} from 'antd'
-import ActDtmplView, {ActDtmplViewProps} from "./act-dtmpl-view";
-import Scrollbars from 'react-custom-scrollbars';
-interface ModalDtmplViewProps extends  ActDtmplViewProps{
-    height?:any,
-    onCancel:()=>any,
-    open?:boolean,
-    children?:any,
+import React from "react";
+import { Modal, ModalProps as AntdModalProps, Form, Button } from "antd";
+import ActDtmplView, { ActDtmplViewProps } from "./act-dtmpl-view";
+import Scrollbars from "react-custom-scrollbars";
+import { LocaleContext } from "../../locale/LocaleProvider";
+interface ModalDtmplViewProps extends ActDtmplViewProps {
+  height?: any;
+  onCancel: () => any;
+  open?: boolean;
+  children?: any;
 }
 
-interface ModalDtmplViewState {
-
-}
-
-export default class ModalDtmplView extends React.PureComponent<ModalDtmplViewProps, ModalDtmplViewState> {
-
-    static defaultProps = {
-        showConfirm: true,
-        height:500,
-        //antd modal
-        forceRender:true,
-        style:{maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-        cancelText:"取消",
-        form:Form.useForm,
-    }
-    static state={
-        viewOrEdit:'view',
-    }
+interface ModalDtmplViewState {}
 
+export default class ModalDtmplView extends React.PureComponent<
+  ModalDtmplViewProps,
+  ModalDtmplViewState
+> {
+  static defaultProps = {
+    showConfirm: true,
+    height: 500,
+    //antd modal
+    forceRender: true,
+    style: { maxWidth: "calc(100vw - 60px)", maxHeight: "calc(100vh - 50px)" },
+    cancelText: "取消",
+    form: Form.useForm,
+  };
+  static state = {
+    viewOrEdit: "view",
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    // onCancel=()=>{
-    //
-    // }
+  // onCancel=()=>{
+  //
+  // }
 
-    render() {
-        // console.log('antdModalProps:',this.antdModalProps);
-        const {code,sourceId,serverKey,open,onCancel,height} = this.props
-
-        return <Modal
-            open={open}
-            title={"查看"}
-            width={"82vw"}
-            centered
-            wrapClassName={'aaa'}
-            bodyStyle={{height: height, overflow: 'auto'}}
-            onCancel={onCancel}
-            footer={[
-                <Button key="back"  onClick={onCancel}>
-                    取 消
-                </Button>]}
-        >
-            <Scrollbars  autoHide autoHideTimeout={1000}>
-            {code?<ActDtmplView serverKey={serverKey} showRightNav={false} sourceId={sourceId}  code={code} />:""}
-            </Scrollbars>
-        </Modal>
-    }
-
-}
+  render() {
+    // console.log('antdModalProps:',this.antdModalProps);
+    const { code, sourceId, serverKey, open, onCancel, height } = this.props;
+    const { translate } = this.context;
+    return (
+      <Modal
+        open={open}
+        title={translate("${查看}")}
+        width={"82vw"}
+        centered
+        wrapClassName={"aaa"}
+        bodyStyle={{ height: height, overflow: "auto" }}
+        onCancel={onCancel}
+        footer={[
+          <Button key="back" onClick={onCancel}>
+            {translate("${取消}")}
+          </Button>,
+        ]}
+      >
+        <Scrollbars autoHide autoHideTimeout={1000}>
+          {code ? (
+            <ActDtmplView
+              serverKey={serverKey}
+              showRightNav={false}
+              sourceId={sourceId}
+              code={code}
+            />
+          ) : (
+            ""
+          )}
+        </Scrollbars>
+      </Modal>
+    );
+  }
+}