aldehyde 0.2.480 → 0.2.481

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

@@ -1,314 +1,314 @@
-import React, { ReactNode } from "react";
-import {
-  DtmplBaseProps,
-  DtmplConfig,
-  DtmplData,
-  FieldGroupConfig,
-} from "../../tmpl/interface";
-import RelationTable from "../../table/relation-table";
-import FieldViewGroup from "./field-view-group";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-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, Tabs } 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;
-  tabBarExtraContent?: ReactNode;
-}
-
-export interface DtmplViewStat {
-  id?: string;
-  loading?: boolean;
-  dtmplData?: DtmplData;
-  premisesTitle?: string;
-  layout?: object;
-}
-
-class DtmplView extends React.PureComponent<DtmplViewProps, DtmplViewStat> {
-  static defaultProps = {
-    showRightNav: true,
-    maxColsOnRow: 2,
-  };
-
-  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();
-    }
-  }
-
-  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,
-        dtmplData: undefined,
-      });
-      const dtmplData = await HcserviceV3.requestViewDtmplData(
-        serverKey,
-        sourceId,
-        code,
-        versionId
-      );
-      this.setState({
-        dtmplData,
-        loading: false,
-      });
-    } else {
-      this.setState({
-        loading: false,
-      });
-    }
-  };
-
-  fieldGroupList = () => {
-    const {
-      dtmplConfig,
-      serverKey,
-      mainCode,
-      showRightNav,
-      parentId, maxColsOnRow,
-    } = this.props;
-    const { dtmplData, loading, id } = this.state;
-    const { pageLayout } = dtmplConfig;
-    let groups: FieldGroupConfig[] = [];
-    if (dtmplConfig) {
-      groups = dtmplConfig.groups;
-    }
-
-    return groups.map((item) => {
-      if (item.type === "embed") {
-        if (!dtmplData) {
-          return null;
-        }
-        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;
-        }
-        let children = null;
-        switch (item.embedType) {
-          case "列表":
-            children = <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}
-              />
-            </Card>;
-            return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : children;
-          case "编辑":
-          case "编辑或添加":
-            codeSource = item.embedType === "编辑" ? "listop" : item.embedType === "编辑或添加" ? "new" : codeSource;
-            children = <DtmplViewCard
-              showHeader={false}
-              codeSource={codeSource}
-              code={code}
-              sourceId={innerSourceId}
-            />;
-            return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : <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" }}
-            >
-              {children}
-            </CollapseCard>;
-          case "详情":
-            codeSource = "listop";
-            children = <DtmplViewCard
-              showHeader={false}
-              codeSource={codeSource}
-              code={code}
-              sourceId={innerSourceId}
-            />;
-            return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : <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" }}
-            >
-              {children}
-            </CollapseCard>;
-          default:
-            break;
-        }
-      } else if (item.type == "relation") {
-        //关系
-        if (item.fields) {
-          let data: DtmplData[] = undefined;
-          if (dtmplData) {
-            data = dtmplData.arrayMap[item.id];
-          }
-          const children = <RelationTable
-            serverKey={serverKey}
-            initCollapse={dtmplData && (!data || data.length <= 0)}
-            loading={loading}
-            parentId={id}
-            key={item.id}
-            fieldGroupConfig={item}
-            value={data}
-            viewOrEdit={"view"}
-            showCollapseCard={pageLayout !== "horizontalTabs"}
-          />;
-          return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : children;
-        }
-      } else {
-        //字段组
-        const children = <FieldViewGroup column={maxColsOnRow} dataCode={dtmplData ? dtmplData.code : null}
-          serverKey={serverKey}
-          fields={item.fields}
-          valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-          width={220}
-        />;
-        return (
-          pageLayout === "horizontalTabs" ?
-            { key: item.id, label: item.title, children }
-            :
-            <CollapseCard
-              tip={item.tip}
-              title={item.title}
-              key={item.id}
-              id={id + item.id}
-              className="hoverable"
-              styles={{ header: { background: "#f2f4f5" } }}
-              loading={loading}
-            >
-              {children}
-            </CollapseCard>
-        );
-      }
-    });
-  };
-
-  render() {
-    const {
-      code,
-      dtmplConfig,
-      serverKey, maxColsOnRow, tabBarExtraContent
-    } = this.props;
-    const {
-      premisesTitle,
-      loading,
-      dtmplData,
-      id,
-    } = this.state;
-    const premises = dtmplConfig ? dtmplConfig.premises : undefined;
-    if (!dtmplConfig || !dtmplData) {
-      return <Card loading={true}></Card>;
-    }
-
-    const { pageLayout, groups } = dtmplConfig;
-
-    return (
-      <div>
-        {pageLayout === "horizontalTabs" ? <Tabs tabBarExtraContent={tabBarExtraContent} defaultActiveKey={groups[0]?.id} items={this.fieldGroupList()} /> : 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 column={maxColsOnRow} serverKey={serverKey} fields={premises} />
-          </CollapseCard>
-        ) : (
-          ""
-        )}
-        {/*因为编辑页以抽屉或模态框为主，且展示有些问题，暂时不用{showRightNav ? (*/}
-        {/*  <RightBar*/}
-        {/*    parentId={id}*/}
-        {/*    positionRight={rightBarPositionRight}*/}
-        {/*    dtmplConfig={dtmplConfig}*/}
-        {/*  />*/}
-        {/*) : (*/}
-        {/*  ""*/}
-        {/*)}*/}
-        <CqueryButtonBar
-          serverKey={serverKey}
-          dtmplConfig={dtmplConfig}
-          mainCode={code}
-        />
-      </div>
-    );
-  }
-}
-
-export default DtmplView;
+import React, { ReactNode } from "react";
+import {
+  DtmplBaseProps,
+  DtmplConfig,
+  DtmplData,
+  FieldGroupConfig,
+} from "../../tmpl/interface";
+import RelationTable from "../../table/relation-table";
+import FieldViewGroup from "./field-view-group";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+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, Tabs } 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;
+  tabBarExtraContent?: ReactNode;
+}
+
+export interface DtmplViewStat {
+  id?: string;
+  loading?: boolean;
+  dtmplData?: DtmplData;
+  premisesTitle?: string;
+  layout?: object;
+}
+
+class DtmplView extends React.PureComponent<DtmplViewProps, DtmplViewStat> {
+  static defaultProps = {
+    showRightNav: true,
+    maxColsOnRow: 2,
+  };
+
+  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();
+    }
+  }
+
+  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,
+        dtmplData: undefined,
+      });
+      const dtmplData = await HcserviceV3.requestViewDtmplData(
+        serverKey,
+        sourceId,
+        code,
+        versionId
+      );
+      this.setState({
+        dtmplData,
+        loading: false,
+      });
+    } else {
+      this.setState({
+        loading: false,
+      });
+    }
+  };
+
+  fieldGroupList = () => {
+    const {
+      dtmplConfig,
+      serverKey,
+      mainCode,
+      showRightNav,
+      parentId, maxColsOnRow,
+    } = this.props;
+    const { dtmplData, loading, id } = this.state;
+    const { pageLayout } = dtmplConfig;
+    let groups: FieldGroupConfig[] = [];
+    if (dtmplConfig) {
+      groups = dtmplConfig.groups;
+    }
+
+    return groups.map((item) => {
+      if (item.type === "embed") {
+        if (!dtmplData) {
+          return null;
+        }
+        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;
+        }
+        let children = null;
+        switch (item.embedType) {
+          case "列表":
+            children = <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}
+              />
+            </Card>;
+            return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : children;
+          case "编辑":
+          case "编辑或添加":
+            codeSource = item.embedType === "编辑" ? "listop" : item.embedType === "编辑或添加" ? "new" : codeSource;
+            children = <DtmplViewCard
+              showHeader={false}
+              codeSource={codeSource}
+              code={code}
+              sourceId={innerSourceId}
+            />;
+            return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : <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" }}
+            >
+              {children}
+            </CollapseCard>;
+          case "详情":
+            codeSource = "listop";
+            children = <DtmplViewCard
+              showHeader={false}
+              codeSource={codeSource}
+              code={code}
+              sourceId={innerSourceId}
+            />;
+            return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : <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" }}
+            >
+              {children}
+            </CollapseCard>;
+          default:
+            break;
+        }
+      } else if (item.type == "relation") {
+        //关系
+        if (item.fields) {
+          let data: DtmplData[] = undefined;
+          if (dtmplData) {
+            data = dtmplData.arrayMap[item.id];
+          }
+          const children = <RelationTable
+            serverKey={serverKey}
+            initCollapse={dtmplData && (!data || data.length <= 0)}
+            loading={loading}
+            parentId={id}
+            key={item.id}
+            fieldGroupConfig={item}
+            value={data}
+            viewOrEdit={"view"}
+            showCollapseCard={pageLayout !== "horizontalTabs"}
+          />;
+          return pageLayout === "horizontalTabs" ? { key: item.id, label: item.title, children } : children;
+        }
+      } else {
+        //字段组
+        const children = <FieldViewGroup column={maxColsOnRow} dataCode={dtmplData ? dtmplData.code : null}
+          serverKey={serverKey}
+          fields={item.fields}
+          valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+          width={220}
+        />;
+        return (
+          pageLayout === "horizontalTabs" ?
+            { key: item.id, label: item.title, children }
+            :
+            <CollapseCard
+              tip={item.tip}
+              title={item.title}
+              key={item.id}
+              id={id + item.id}
+              className="hoverable"
+              styles={{ header: { background: "#f2f4f5" } }}
+              loading={loading}
+            >
+              {children}
+            </CollapseCard>
+        );
+      }
+    });
+  };
+
+  render() {
+    const {
+      code,
+      dtmplConfig,
+      serverKey, maxColsOnRow, tabBarExtraContent
+    } = this.props;
+    const {
+      premisesTitle,
+      loading,
+      dtmplData,
+      id,
+    } = this.state;
+    const premises = dtmplConfig ? dtmplConfig.premises : undefined;
+    if (!dtmplConfig || !dtmplData) {
+      return <Card loading={true}></Card>;
+    }
+
+    const { pageLayout, groups } = dtmplConfig;
+
+    return (
+      <div>
+        {pageLayout === "horizontalTabs" ? <Tabs tabBarExtraContent={tabBarExtraContent} defaultActiveKey={groups[0]?.id} items={this.fieldGroupList()} /> : 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 column={maxColsOnRow} serverKey={serverKey} fields={premises} />
+          </CollapseCard>
+        ) : (
+          ""
+        )}
+        {/*因为编辑页以抽屉或模态框为主，且展示有些问题，暂时不用{showRightNav ? (*/}
+        {/*  <RightBar*/}
+        {/*    parentId={id}*/}
+        {/*    positionRight={rightBarPositionRight}*/}
+        {/*    dtmplConfig={dtmplConfig}*/}
+        {/*  />*/}
+        {/*) : (*/}
+        {/*  ""*/}
+        {/*)}*/}
+        <CqueryButtonBar
+          serverKey={serverKey}
+          dtmplConfig={dtmplConfig}
+          mainCode={code}
+        />
+      </div>
+    );
+  }
+}
+
+export default DtmplView;