aldehyde 0.2.487 → 0.2.489

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

@@ -1,246 +1,246 @@
-import React, { RefObject, useState, useMemo } from "react";
-import { Col, Form, Row, Popconfirm } from "antd";
-import { FieldConfig, EditStatus } from "../tmpl/interface";
-import EntryControl from "../controls/entry-control";
-import Units from "../units";
-import { FormInstance } from "antd/lib/form/hooks/useForm";
-import { LocaleContext } from "../locale/LocaleProvider";
-import ControlTypeSupportor from "../tmpl/control-type-supportor";
-import TmplConfigAnalysis from "../tmpl/tmpl-config-analysis";
-
-const FormItem = Form.Item;
-
-// 渲染表单项，如果有关联项，则在更改值时弹出确认框，否则直接更改值
-const RenderEntryControl = ({ fieldValue, item, props, translate, getMainCode, ...otherProps }) => {
-  const { mainCode, serverKey, dataCode, valueFieldMap, editStatus } = props;
-  const { onChange } = otherProps;
-  const [isUpdateItem, setIsUpdateItem] = useState<boolean>(false);
-  const [value, setValue] = useState<any>(fieldValue);
-  const controlProps = { dataCode, serverKey, mainCode: getMainCode(item, mainCode), value: fieldValue, fieldConfig: item, editStatus, ...otherProps };
-
-  const popconfirm = useMemo(() => {
-    if (!valueFieldMap) {
-      return { isPopconfirm: false };
-    }
-    const isPopconfirm = !!valueFieldMap[item.id];
-    const fieldNames = valueFieldMap[item.id]?.map(item => ` [${item.title}] `)?.join("、");
-    const title = `修改数据会同步删除关联项${fieldNames}的数据，确认修改`;
-    return { title, isPopconfirm };
-  }, [valueFieldMap]);
-  // 当前项有值且存在关联项，则更改值时弹出确认框，否则直接更改值
-  return fieldValue && popconfirm.isPopconfirm ? <Popconfirm
-    key="back"
-    placement="top"
-    title={translate("${" + popconfirm.title + "}?")}
-    onConfirm={() => {
-      onChange(value);
-      setIsUpdateItem(false);
-    }}
-    onCancel={() => setIsUpdateItem(false)}
-    okText={translate("${确定}")}
-    cancelText={translate("${取消}")}
-    open={isUpdateItem}
-  >
-    <>
-      <EntryControl
-        {...controlProps}
-        onChange={(val) => {
-          setValue(val);
-          setIsUpdateItem(true);
-        }}
-      />
-    </>
-  </Popconfirm> :
-    <EntryControl {...controlProps} />;
-};
-
-export interface FieldGroupProps {
-  serverKey?: string;
-  fields: FieldConfig[];
-  nameAttr?: string;
-  valueMap: object;
-  width?: number;
-  maxColsOnRow?: number;
-  mainCode?: string;
-  formRef?: RefObject<FormInstance>;
-  dataCode?: string,
-  layout?: "horizontal" | "vertical";
-  valueFieldMap?: { [key: string]: any }; // 表单关联项配置
-  editStatus?: EditStatus
-}
-
-interface FieldGroupState {
-  fileList?: any;
-}
-
-export default class FormItemGroup extends React.PureComponent<
-  FieldGroupProps,
-  FieldGroupState
-> {
-  static defaultProps = {
-    nameAttr: "id",
-    maxColsOnRow: 2,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      fileList: [],
-    };
-  }
-
-  isPromise = (obj) => {
-    return (
-      !!obj && //有实际含义的变量才执行方法，变量null，undefined和''空串都为false
-      (typeof obj === "object" || typeof obj === "function") && // 初始promise 或 promise.then返回的
-      typeof obj.then === "function"
-    );
-  };
-
-  getMainCode = (item: FieldConfig, mainCode) => {
-    const { formRef } = this.props;
-    //  let a=formRef.current;
-    if (!item.mainCode) {
-      return mainCode;
-    }
-    if (typeof item.mainCode == "function") {
-      // let res = item.mainCode(formRef.current);
-      return item.mainCode(formRef.current);
-    } else {
-      return item.mainCode;
-    }
-  };
-
-  getFieldConfig = (item: FieldConfig) => {
-    const { formRef } = this.props;
-    let fieldConfig = item;
-    if (item.updateSelf) {
-      fieldConfig = item.updateSelf(formRef.current);
-    } else {
-      fieldConfig = item;
-    }
-    //debugger
-    return fieldConfig;
-  };
-  initFormItem = (fieldConfig: FieldConfig, fieldValue) => {
-    const { nameAttr, maxColsOnRow, layout } = this.props;
-    const { translate } = this.context;
-    let item = this.getFieldConfig(fieldConfig);
-
-    let labelColSpan = 24;
-    let wrapperColSpan = 24;
-    if (layout === "vertical") {
-      labelColSpan = 24;
-      wrapperColSpan = 24;
-    } else {
-      labelColSpan = maxColsOnRow == 1 ? 6 : item.colSpan == 1 ? 6 : 3;
-      wrapperColSpan = maxColsOnRow == 1 ? 18 : item.colSpan == 1 ? 15 : 19;
-    }
-
-    return (
-      <FormItem
-        label={translate("${" + item.title + "}")}
-        noStyle={item.noStyle || false}
-        hidden={item.hidden}
-        name={fieldConfig.controlType == "field-history" ? undefined : item[nameAttr]}
-        key={item.id}
-        labelCol={{ span: labelColSpan }}
-        wrapperCol={{ span: wrapperColSpan }}
-        tooltip={(!item.tip || item.tip == "") ? undefined : item.tip}
-        initialValue={fieldValue}
-        style={{ margin: "4px 4px 12px" }}
-        rules={item.hidden ? [] : TmplConfigAnalysis.getRules(item, translate)}
-      >
-        <RenderEntryControl
-          fieldValue={fieldValue}
-          item={item}
-          props={this.props}
-          translate={translate}
-          getMainCode={this.getMainCode}
-        />
-      </FormItem>
-    );
-  };
-
-  initFormList = () => {
-    const {
-      fields,
-      valueMap,
-      nameAttr,
-      maxColsOnRow,
-      mainCode,
-      serverKey,
-    } = this.props;
-    const formItemList = [];
-
-    if (fields && fields.length > 0) {
-      fields.forEach((item, index) => {
-        let fieldValue = valueMap ? valueMap[item.id] : undefined;
-        fieldValue =
-          fieldValue || fieldValue === 0
-            ? fieldValue
-            : item.defaultValue
-              ? Units.configParamTrans(item.defaultValue, ControlTypeSupportor.getControlType(item, item.defaultValue))
-              : undefined;
-        let formItem = null;
-        if (item.extControlType == "hidden") {
-          formItem = (
-            <FormItem
-              hidden={true}
-              initialValue={fieldValue}
-              name={item[nameAttr]}
-              key={item.id}
-            >
-              <EntryControl
-                serverKey={serverKey}
-                mainCode={this.getMainCode(item, mainCode)}
-                value={fieldValue}
-                fieldConfig={item}
-              />
-            </FormItem>
-          );
-        } else {
-          formItem = item.shouldUpdate ? (
-            <FormItem noStyle shouldUpdate={item.shouldUpdate}>
-              {() => this.initFormItem(item, fieldValue)}
-            </FormItem>
-          ) : (
-            this.initFormItem(item, fieldValue)
-          );
-        }
-        formItemList.push(formItem);
-      });
-    }
-
-    const colList = [];
-
-    for (let i = 0; i < formItemList.length; i = i + 1) {
-      let colSpan = fields[i].colSpan;
-
-      if (fields[i].extControlType == "hidden" || fields[i].hidden) {
-        colSpan = 0;
-      } else if (maxColsOnRow && maxColsOnRow == 1) {
-        colSpan = 2;
-      }
-      let col = (
-        <Col key={i} span={12 * colSpan} style={{ width: "stretch" }}>
-          {formItemList[i]}
-        </Col>
-      );
-      colList.push(col);
-    }
-
-    const row = (
-      <Row gutter={[16, 0]} key={1}>
-        {colList}
-      </Row>
-    );
-    return row;
-  };
-
-  render() {
-    return this.initFormList();
-  }
-}
+import React, { RefObject, useState, useMemo } from "react";
+import { Col, Form, Row, Popconfirm } from "antd";
+import { FieldConfig, EditStatus } from "../tmpl/interface";
+import EntryControl from "../controls/entry-control";
+import Units from "../units";
+import { FormInstance } from "antd/lib/form/hooks/useForm";
+import { LocaleContext } from "../locale/LocaleProvider";
+import ControlTypeSupportor from "../tmpl/control-type-supportor";
+import TmplConfigAnalysis from "../tmpl/tmpl-config-analysis";
+
+const FormItem = Form.Item;
+
+// 渲染表单项，如果有关联项，则在更改值时弹出确认框，否则直接更改值
+const RenderEntryControl = ({ fieldValue, item, props, translate, getMainCode, ...otherProps }) => {
+  const { mainCode, serverKey, dataCode, valueFieldMap, editStatus } = props;
+  const { onChange } = otherProps;
+  const [isUpdateItem, setIsUpdateItem] = useState<boolean>(false);
+  const [value, setValue] = useState<any>(fieldValue);
+  const controlProps = { dataCode, serverKey, mainCode: getMainCode(item, mainCode), value: fieldValue, fieldConfig: item, editStatus, ...otherProps };
+
+  const popconfirm = useMemo(() => {
+    if (!valueFieldMap) {
+      return { isPopconfirm: false };
+    }
+    const isPopconfirm = !!valueFieldMap[item.id];
+    const fieldNames = valueFieldMap[item.id]?.map(item => ` [${item.title}] `)?.join("、");
+    const title = `修改数据会同步删除关联项${fieldNames}的数据，确认修改`;
+    return { title, isPopconfirm };
+  }, [valueFieldMap]);
+  // 当前项有值且存在关联项，则更改值时弹出确认框，否则直接更改值
+  return fieldValue && popconfirm.isPopconfirm ? <Popconfirm
+    key="back"
+    placement="top"
+    title={translate("${" + popconfirm.title + "}?")}
+    onConfirm={() => {
+      onChange(value);
+      setIsUpdateItem(false);
+    }}
+    onCancel={() => setIsUpdateItem(false)}
+    okText={translate("${确定}")}
+    cancelText={translate("${取消}")}
+    open={isUpdateItem}
+  >
+    <>
+      <EntryControl
+        {...controlProps}
+        onChange={(val) => {
+          setValue(val);
+          setIsUpdateItem(true);
+        }}
+      />
+    </>
+  </Popconfirm> :
+    <EntryControl {...controlProps} />;
+};
+
+export interface FieldGroupProps {
+  serverKey?: string;
+  fields: FieldConfig[];
+  nameAttr?: string;
+  valueMap: object;
+  width?: number;
+  maxColsOnRow?: number;
+  mainCode?: string;
+  formRef?: RefObject<FormInstance>;
+  dataCode?: string,
+  layout?: "horizontal" | "vertical";
+  valueFieldMap?: { [key: string]: any }; // 表单关联项配置
+  editStatus?: EditStatus
+}
+
+interface FieldGroupState {
+  fileList?: any;
+}
+
+export default class FormItemGroup extends React.PureComponent<
+  FieldGroupProps,
+  FieldGroupState
+> {
+  static defaultProps = {
+    nameAttr: "id",
+    maxColsOnRow: 2,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileList: [],
+    };
+  }
+
+  isPromise = (obj) => {
+    return (
+      !!obj && //有实际含义的变量才执行方法，变量null，undefined和''空串都为false
+      (typeof obj === "object" || typeof obj === "function") && // 初始promise 或 promise.then返回的
+      typeof obj.then === "function"
+    );
+  };
+
+  getMainCode = (item: FieldConfig, mainCode) => {
+    const { formRef } = this.props;
+    //  let a=formRef.current;
+    if (!item.mainCode) {
+      return mainCode;
+    }
+    if (typeof item.mainCode == "function") {
+      // let res = item.mainCode(formRef.current);
+      return item.mainCode(formRef.current);
+    } else {
+      return item.mainCode;
+    }
+  };
+
+  getFieldConfig = (item: FieldConfig) => {
+    const { formRef } = this.props;
+    let fieldConfig = item;
+    if (item.updateSelf) {
+      fieldConfig = item.updateSelf(formRef.current);
+    } else {
+      fieldConfig = item;
+    }
+    //debugger
+    return fieldConfig;
+  };
+  initFormItem = (fieldConfig: FieldConfig, fieldValue) => {
+    const { nameAttr, maxColsOnRow, layout } = this.props;
+    const { translate } = this.context;
+    let item = this.getFieldConfig(fieldConfig);
+
+    let labelColSpan = 24;
+    let wrapperColSpan = 24;
+    if (layout === "vertical") {
+      labelColSpan = 24;
+      wrapperColSpan = 24;
+    } else {
+      labelColSpan = maxColsOnRow == 1 ? 6 : item.colSpan == 1 ? 6 : 3;
+      wrapperColSpan = maxColsOnRow == 1 ? 18 : item.colSpan == 1 ? 15 : 19;
+    }
+
+    return (
+      <FormItem
+        label={translate("${" + item.title + "}")}
+        noStyle={item.noStyle || false}
+        hidden={item.hidden}
+        name={fieldConfig.controlType == "field-history" ? undefined : item[nameAttr]}
+        key={item.id}
+        labelCol={{ span: labelColSpan }}
+        wrapperCol={{ span: wrapperColSpan }}
+        tooltip={(!item.tip || item.tip == "") ? undefined : item.tip}
+        initialValue={fieldValue}
+        style={{ margin: "4px 4px 12px" }}
+        rules={item.hidden ? [] : TmplConfigAnalysis.getRules(item, translate)}
+      >
+        <RenderEntryControl
+          fieldValue={fieldValue}
+          item={item}
+          props={this.props}
+          translate={translate}
+          getMainCode={this.getMainCode}
+        />
+      </FormItem>
+    );
+  };
+
+  initFormList = () => {
+    const {
+      fields,
+      valueMap,
+      nameAttr,
+      maxColsOnRow,
+      mainCode,
+      serverKey,
+    } = this.props;
+    const formItemList = [];
+
+    if (fields && fields.length > 0) {
+      fields.forEach((item, index) => {
+        let fieldValue = valueMap ? valueMap[item.id] : undefined;
+        fieldValue =
+          fieldValue || fieldValue === 0
+            ? fieldValue
+            : item.defaultValue
+              ? Units.configParamTrans(item.defaultValue, ControlTypeSupportor.getControlType(item, item.defaultValue))
+              : undefined;
+        let formItem = null;
+        if (item.extControlType == "hidden") {
+          formItem = (
+            <FormItem
+              hidden={true}
+              initialValue={fieldValue}
+              name={item[nameAttr]}
+              key={item.id}
+            >
+              <EntryControl
+                serverKey={serverKey}
+                mainCode={this.getMainCode(item, mainCode)}
+                value={fieldValue}
+                fieldConfig={item}
+              />
+            </FormItem>
+          );
+        } else {
+          formItem = item.shouldUpdate ? (
+            <FormItem noStyle shouldUpdate={item.shouldUpdate}>
+              {() => this.initFormItem(item, fieldValue)}
+            </FormItem>
+          ) : (
+            this.initFormItem(item, fieldValue)
+          );
+        }
+        formItemList.push(formItem);
+      });
+    }
+
+    const colList = [];
+
+    for (let i = 0; i < formItemList.length; i = i + 1) {
+      let colSpan = fields[i].colSpan;
+
+      if (fields[i].extControlType == "hidden" || fields[i].hidden) {
+        colSpan = 0;
+      } else if (maxColsOnRow && maxColsOnRow == 1) {
+        colSpan = 2;
+      }
+      let col = (
+        <Col key={i} span={12 * colSpan} style={{ width: "stretch" }}>
+          {formItemList[i]}
+        </Col>
+      );
+      colList.push(col);
+    }
+
+    const row = (
+      <Row gutter={[16, 0]} key={1}>
+        {colList}
+      </Row>
+    );
+    return row;
+  };
+
+  render() {
+    return this.initFormList();
+  }
+}

package/src/aldehyde/form/index.css

@@ -1,13 +1,13 @@
-
-.downAvatar,.infoStyle{
-    width:220px;
-    display:inline-block;
-}
-.downAvatar a,.deleAvatar{
-    visibility: hidden;
-    color:#1890ff;
-    cursor: pointer;
-}
-.downAvatar:hover a,.downAvatar:hover .deleAvatar{
-    visibility:visible;
+
+.downAvatar,.infoStyle{
+    width:220px;
+    display:inline-block;
+}
+.downAvatar a,.deleAvatar{
+    visibility: hidden;
+    color:#1890ff;
+    cursor: pointer;
+}
+.downAvatar:hover a,.downAvatar:hover .deleAvatar{
+    visibility:visible;
 }

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

@@ -1,63 +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;
+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;
 }