aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/form/criteria-form.tsx

@@ -1,231 +1,339 @@
-import React, {useEffect} from 'react';
-import {Button, Card, Col, Collapse, Form as AntdForm, Popconfirm, Row, Select, Space} from 'antd';
-import {CriteriaConfig, DtmplData, JumpConfig, LtmplConfig, SelectConfig, SelectedRow} from "../tmpl/interface";
+import React, { useEffect } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Collapse,
+  Form as AntdForm,
+  Popconfirm,
+  Row,
+  Select,
+  Space,
+} from "antd";
+import {
+  CriteriaConfig,
+  DtmplData,
+  JumpConfig,
+  LtmplConfig,
+  SelectConfig,
+  SelectedRow,
+} from "../tmpl/interface";
 import EntryControl from "../controls/entry-control";
 import Action from "../controls/action";
-import CquickButton from '../controls/cquery/cquick-button'
+import CquickButton from "../controls/cquery/cquick-button";
+import { useLocale } from "../locale/useLocale";
 
-const {Panel} = Collapse;
+const { Panel } = Collapse;
 const FormItem = AntdForm.Item;
 
 export interface CriteriaFormProps {
-    serverKey?:string;
-    ltmplConfig: LtmplConfig | SelectConfig;
-    data: object;
-    selectedRows: SelectedRow[];
-    selectedDatas?: DtmplData[];
-    doSearch?: (data: object) => void;
-    doDelete?: () => void;
-    doAction?: (string, selectedRows: SelectedRow[], object) => void,
-    doJump?: (jump: JumpConfig) => void;
-    doCQuery?: (cqueryId: string) => void;
-    hiddenCriteriaIds?: string[];
-    open?: boolean;
-    loading: boolean;
-    mainCode?: string;
-};
+  serverKey?: string;
+  ltmplConfig: LtmplConfig & SelectConfig;
+  data: object;
+  selectedRows: SelectedRow[];
+  selectedDatas?: DtmplData[];
+  doSearch?: (data: object) => void;
+  doDelete?: () => void;
+  doAction?: (string, selectedRows: SelectedRow[], object) => void;
+  doJump?: (jump: JumpConfig) => void;
+  doCQuery?: (cqueryId: string) => void;
+  hiddenCriteriaIds?: string[];
+  open?: boolean;
+  loading: boolean;
+  mainCode?: string;
+}
 
 const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
-
-    const {ltmplConfig, doSearch, doAction, doJump, doDelete, selectedRows, data, open, loading, selectedDatas, doCQuery,serverKey} = props;
-    let [form] = AntdForm.useForm();
-    // @ts-ignore
-    let {buttons, actions, jumps, cQuerys, criterias, drillingParams, columns} = ltmplConfig;
-    const initialValues = {};
-    const searchSubmit = (data) => {
-        if (doSearch) {
-            doSearch(data);
-        }
+  const { translate } = useLocale();
+  const {
+    ltmplConfig,
+    doSearch,
+    doAction,
+    doJump,
+    doDelete,
+    selectedRows,
+    data,
+    open,
+    loading,
+    selectedDatas,
+    doCQuery,
+    serverKey,
+  } = props;
+  let [form] = AntdForm.useForm();
+  let {
+    buttons,
+    actions,
+    jumps,
+    cQuerys,
+    criterias,
+    drillingParams,
+    columns,
+  } = ltmplConfig;
+  const initialValues = {};
+  const searchSubmit = (data) => {
+    if (doSearch) {
+      doSearch(data);
     }
+  };
 
-    useEffect(() => {
-        form.resetFields();
-    });
+  useEffect(() => {
+    form.resetFields();
+  });
 
-    let showQueryButton = buttons.includes("query") && doSearch;
-
-    let showDeleteButton = buttons.includes("batchDelete") && doDelete;
-    let deleteButtonDisabled = !(selectedRows && selectedRows.length > 0);
-
-    const renderAction = () => {
-        if (doAction && actions && actions.length > 0) {
-            return actions.map((action) => {
-                let disabled = true;
-                if (selectedRows) {
-                    if (selectedRows.length > 0 && action.multible) {
-                        disabled = false;
-                    } else if (selectedRows.length == 1) {
-                        disabled = false;
-                    }
-                }
-
-                return <Action serverKey={serverKey} hiddenType={"disabled"} key={action.id} disabled={disabled} data={selectedDatas}
-                               actionConfig={action} doAction={doAction} serial={1}></Action>
-            });
-        }
-    }
+  let showQueryButton = buttons.includes("query") && doSearch;
 
-    const renderJump = () => {
-        if (doJump && jumps && jumps.length > 0) {
-            return jumps.map((jump) => {
-                let disabled = true;
-                if (selectedRows && selectedRows.length == 1) {
-                    disabled = false;
-                }
-                return <Button key={jump.id}
-                               onClick={() => doJump(jump)}
-                               disabled={disabled}>{jump.title}</Button>;
-            });
+  let showDeleteButton = buttons.includes("batchDelete") && doDelete;
+  let deleteButtonDisabled = !(selectedRows && selectedRows.length > 0);
+
+  const renderAction = () => {
+    if (doAction && actions && actions.length > 0) {
+      return actions.map((action) => {
+        let disabled = true;
+        if (selectedRows) {
+          if (selectedRows.length > 0 && action.multible) {
+            disabled = false;
+          } else if (selectedRows.length == 1) {
+            disabled = false;
+          }
         }
+
+        return (
+          <Action
+            serverKey={serverKey}
+            hiddenType={"disabled"}
+            key={action.id}
+            disabled={disabled}
+            data={selectedDatas}
+            actionConfig={action}
+            doAction={doAction}
+            serial={1}
+          ></Action>
+        );
+      });
     }
+  };
 
-    const renderCQuery = () => {
-        const {serverKey}=props;
-        if (doCQuery && cQuerys && cQuerys.length > 0) {
-            return cQuerys.map((cquery) => {
-                let disabled = true;
-                if (selectedRows && selectedRows.length == 1) {
-                    disabled = false;
-                }
-                return <CquickButton serverKey={serverKey} key={cquery.id}
-                                     disabled={disabled} cQueryConfig={cquery}
-                                     mainCode={!disabled ? selectedRows[0].code : undefined}/>;
-            });
+  const renderJump = () => {
+    if (doJump && jumps && jumps.length > 0) {
+      return jumps.map((jump) => {
+        let disabled = true;
+        if (selectedRows && selectedRows.length == 1) {
+          disabled = false;
         }
+        return (
+          <Button
+            key={jump.id}
+            onClick={() => doJump(jump)}
+            disabled={disabled}
+          >
+            {jump.title}
+          </Button>
+        );
+      });
     }
+  };
 
-    const hasDimension = () => {
-        columns.forEach((item) => {
-            if (item.statColType == 'dimension') {
-                return true;
-            }
-        });
-        return false;
+  const renderCQuery = () => {
+    const { serverKey } = props;
+    if (doCQuery && cQuerys && cQuerys.length > 0) {
+      return cQuerys.map((cquery) => {
+        let disabled = true;
+        if (selectedRows && selectedRows.length == 1) {
+          disabled = false;
+        }
+        return (
+          <CquickButton
+            serverKey={serverKey}
+            key={cquery.id}
+            disabled={disabled}
+            cQueryConfig={cquery}
+            mainCode={!disabled ? selectedRows[0].code : undefined}
+          />
+        );
+      });
     }
+  };
 
+  const hasDimension = () => {
+    columns.forEach((item) => {
+      if (item.statColType == "dimension") {
+        return true;
+      }
+    });
+    return false;
+  };
 
-    const renderDrillDimension = () => {
-        let drillingColIdsName = 'drillingColIds'
-        let dimensionColIds = [];
-        const options = [];
-        columns.forEach((item) => {
-            if (item.statColType == 'dimension') {
-                options.push({label: item.title, value: item.id})
-                dimensionColIds.push(item.id);
-            }
-        });
-        options.push({label: '无', value: '5'});
+  const renderDrillDimension = () => {
+    let drillingColIdsName = "drillingColIds";
+    let dimensionColIds = [];
+    const options = [];
+    columns.forEach((item) => {
+      if (item.statColType == "dimension") {
+        options.push({ label: item.title, value: item.id });
+        dimensionColIds.push(item.id);
+      }
+    });
+    options.push({ label: translate("${无}"), value: "5" });
 
-        initialValues[drillingColIdsName] = data ? data[drillingColIdsName] ? data[drillingColIdsName] : dimensionColIds : dimensionColIds;
+    initialValues[drillingColIdsName] = data
+      ? data[drillingColIdsName]
+        ? data[drillingColIdsName]
+        : dimensionColIds
+      : dimensionColIds;
 
-        let fieldValue = data ? data[drillingColIdsName] : dimensionColIds;
-        let antdControlProps = {
-            placeholder: "请选择维度", disabled: false, value: fieldValue, style: {minWidth: 220, width: '100%'}
-        }
-        return <FormItem label={'维度'} name={drillingColIdsName} key={drillingColIdsName}
-                         rules={[{
-                             required: true, message: `请选择维度,上钻到顶层请只选【无】`,
-                         }]}>
-            <Select
-                mode="multiple"
-                {...antdControlProps}
-                notFoundContent="暂无选项"
-                allowClear={true}
-                showSearch
-                showArrow={true}
-                options={options}
-            ></Select>
-        </FormItem>
+    let fieldValue = data ? data[drillingColIdsName] : dimensionColIds;
+    let antdControlProps = {
+      placeholder: translate("${请选择}${维度}"),
+      disabled: false,
+      value: fieldValue,
+      style: { minWidth: 220, width: "100%" },
+    };
+    return (
+      <FormItem
+        label={translate("${维度}")}
+        name={drillingColIdsName}
+        key={drillingColIdsName}
+        rules={[
+          {
+            required: true,
+            message: translate("${请选择维度,上钻到顶层请只选[无]}"),
+          },
+        ]}
+      >
+        <Select
+          mode="multiple"
+          {...antdControlProps}
+          notFoundContent={translate("${暂无选项}")}
+          allowClear={true}
+          showSearch
+          showArrow={true}
+          options={options}
+        ></Select>
+      </FormItem>
+    );
+  };
 
+  const renderCriteria = (criterias: CriteriaConfig[]) => {
+    if (!criterias) {
+      return;
     }
+    const { hiddenCriteriaIds, serverKey } = props;
+    criterias.map((item) => {
+      let formItemName = "c_" + item.id;
+      let fieldValue = data ? data[formItemName] : undefined;
+      initialValues[formItemName] = fieldValue;
+    });
 
-    const renderCriteria = (criterias: CriteriaConfig[]) => {
-
-        if (!criterias) {
-            return;
+    if (doSearch) {
+      return criterias.map((item) => {
+        let formItemName = "c_" + item.id;
+        let fieldValue = data ? data[formItemName] : undefined;
+        if (!hiddenCriteriaIds.includes(item.id)) {
+          return (
+            <FormItem
+              label={translate("${" + item.title + "}")}
+              name={formItemName}
+              key={item.id}
+              tooltip={item.tip}
+              rules={
+                item.required
+                  ? [
+                      {
+                        required: true,
+                        message: translate("${请选择}" + item.title),
+                      },
+                    ]
+                  : undefined
+              }
+            >
+              <EntryControl
+                serverKey={serverKey}
+                mainCode={props.mainCode}
+                value={fieldValue}
+                fieldConfig={item}
+              />
+            </FormItem>
+          );
         }
-        const {hiddenCriteriaIds,serverKey} = props;
-        criterias.map((item) => {
-            let formItemName = 'c_' + item.id;
-            let fieldValue = data ? data[formItemName] : undefined;
-            initialValues[formItemName] = fieldValue;
-        });
-
-        if (doSearch) {
-            return criterias.map((item) => {
-                let formItemName = 'c_' + item.id;
-                let fieldValue = data ? data[formItemName] : undefined;
-                if (!hiddenCriteriaIds.includes(item.id)) {
-                    return <FormItem label={item.title} name={formItemName} key={item.id}
-                                     tooltip={item.tip}
-                                     rules={item.required ? [{
-                                         required: true, message: `请选择${item.title}`,
-                                     }] : undefined}>
-                        <EntryControl serverKey={serverKey} mainCode={props.mainCode} value={fieldValue} fieldConfig={item}/>
-                    </FormItem>
-                }
-            })
-        }
-    };
+      });
+    }
+  };
 
-    return (
-        <AntdForm form={form} name="control-hooks" initialValues={initialValues} layout="inline"
-                  onFinish={searchSubmit} style={{width: '100%'}}>
-            {buttons.includes("drilling") && open && (drillingParams.length > 0 || hasDimension()) ?
-                <Collapse style={{width: '100%'}} defaultActiveKey={['1']}>
-                    <Panel header="设置-数据上钻" key="1">
-                        <Row>
-                            <Col>
-                                <Space size={'small'} wrap>
-                                    {renderCriteria(drillingParams)}
-                                    {renderDrillDimension()}
-                                </Space>
-                            </Col>
-                        </Row>
-                    </Panel>
-                </Collapse> : ""}
-            <Card
-                className="hoverable"
-                style={{display: open ? "block" : "none", width: '100%'}}
-                headStyle={{background: "#f2f4f5"}}
-                >
-                <Row>
-                    <Col>
-                        <Space size={'small'} wrap>
-                            {showQueryButton?renderCriteria(criterias):null}
-                            <Space className="btns">
-                                {showQueryButton ?
-                                    <Button type="primary" htmlType="submit">
-                                        查询
-                                    </Button> : ""}
-                                {showDeleteButton ?
-                                    <Popconfirm
-                                        placement="rightBottom"
-                                        title={'确定要【删除】选中数据吗？'}
-                                        onConfirm={() => {
-                                            doDelete()
-                                        }}
-                                        okText="确定"
-                                        cancelText="取消"
-                                        okType={"danger"}
-                                    >
-                                        <Button danger disabled={deleteButtonDisabled}>删除选中</Button>
-                                    </Popconfirm>
-                                    : ""}
-                                {renderAction()}
-                                {renderJump()}
-                                {renderCQuery()}
-                            </Space>
-                        </Space>
-                    </Col>
-                </Row>
-            </Card>
-        </AntdForm>
-    );
-}
+  return (
+    <AntdForm
+      form={form}
+      name="control-hooks"
+      initialValues={initialValues}
+      layout="inline"
+      onFinish={searchSubmit}
+      style={{ width: "100%" }}
+    >
+      {buttons.includes("drilling") &&
+      open &&
+      (drillingParams.length > 0 || hasDimension()) ? (
+        <Collapse style={{ width: "100%" }} defaultActiveKey={["1"]}>
+          <Panel header={translate("设置-数据上钻")} key="1">
+            <Row>
+              <Col>
+                <Space size={"small"} wrap>
+                  {renderCriteria(drillingParams)}
+                  {renderDrillDimension()}
+                </Space>
+              </Col>
+            </Row>
+          </Panel>
+        </Collapse>
+      ) : (
+        ""
+      )}
+      <Card
+        className="hoverable"
+        style={{ display: open ? "block" : "none", width: "100%" }}
+        headStyle={{ background: "#f2f4f5" }}
+      >
+        <Row>
+          <Col>
+            <Space size={"small"} wrap>
+              {showQueryButton ? renderCriteria(criterias) : null}
+              <Space className="btns">
+                {showQueryButton ? (
+                  <Button type="primary" htmlType="submit">
+                    {translate("${查询}")}
+                  </Button>
+                ) : (
+                  ""
+                )}
+                {showDeleteButton ? (
+                  <Popconfirm
+                    placement="rightBottom"
+                    title={translate("${确定要[删除]选中数据吗}?")}
+                    onConfirm={() => {
+                      doDelete();
+                    }}
+                    okText={translate("${确定}")}
+                    cancelText={translate("${取消}")}
+                    okType={"danger"}
+                  >
+                    <Button danger disabled={deleteButtonDisabled}>
+                      {translate("${删除选中}")}
+                    </Button>
+                  </Popconfirm>
+                ) : (
+                  ""
+                )}
+                {renderAction()}
+                {renderJump()}
+                {renderCQuery()}
+              </Space>
+            </Space>
+          </Col>
+        </Row>
+      </Card>
+    </AntdForm>
+  );
+};
 CriteriaForm.defaultProps = {
-    hiddenCriteriaIds: [],
-    open: true,
-}
+  hiddenCriteriaIds: [],
+  open: true,
+};
 export default CriteriaForm;
-