feat: 添加系统变量选择弹窗，更新antd版本

apps/er-designer/src/api/index.ts

@@ -84,4 +84,14 @@ export const GetFile = (data: {fileId: string}) => {
     params: data,
     responseType: "blob",
   });
+};
+
+/**
+ * 获取变量
+ * @returns
+ */
+export const GetSystemVariable = () => {
+  return request("/api/workflow/GetAllWorkflowVariable", {
+    method: "POST",
+  });
 };

apps/er-designer/src/components/TableEdit.tsx

@@ -1,22 +1,73 @@
 import React from "react";
 import { EditableProTable, ProColumns } from "@ant-design/pro-components";
 import type { ColumnItem } from "@/type";
-import { createColumn, uuid } from "@/utils";
+import { createColumn } from "@/utils";
 import { DataType } from "@/enum";
 import { DATA_TYPE_OPTIONS } from "@/constants";
-import { Input, InputNumber } from "antd";
+import { Button, Input, InputNumber } from "antd";
 import LangInput from "./LangInput";
+import { validateColumnCode } from "@/utils/validator";
+import VariableModal from "./VariableModal";
 export default function TableEdit(props: { tableId?: string; data: any[] }) {
   const [editableKeys, setEditableRowKeys] = React.useState<React.Key[]>([]);
   const [dataSource, setDataSource] = React.useState<readonly ColumnItem[]>(
     props.data
   );
+  const boxRef = React.useRef<HTMLDivElement>(null);
+
+  const DefaultValueComp = ({
+    value,
+    onChange,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+  }) => {
+    return (
+      <div className="flex gap-2px">
+        <Input
+          placeholder="默认值"
+          value={value}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+          }}
+        />
+        <div>
+        <VariableModal
+          trigger={
+            <Button size="small" style={{ width: 40, fontSize: 12 }} type="text">
+              +变量
+            </Button>
+          }
+          onOk={(val) => onChange?.(val)}
+        />
+        <Button size="small" style={{ width: 40, fontSize: 12 }} type="text">
+          +字段
+        </Button>
+        </div>
+        
+      </div>
+    );
+  };
+
   const columns: ProColumns[] = [
     {
       title: "字段代码",
       dataIndex: "schemaName",
       valueType: "text",
       width: 80,
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            message: "请输入字段名称",
+          },
+          {
+            max: 50,
+            message: "字段名称不能超过50个字符",
+          },
+          validateColumnCode,
+        ],
+      },
     },
     {
       title: "字段名称",
@@ -43,6 +94,14 @@ export default function TableEdit(props: { tableId?: string; data: any[] }) {
       fieldProps: {
         options: DATA_TYPE_OPTIONS,
       },
+      formItemProps: {
+        rules: [
+          {
+            required: true,
+            message: "请选择类型",
+          },
+        ],
+      }
     },
     {
       title: "长度",
@@ -104,7 +163,10 @@ export default function TableEdit(props: { tableId?: string; data: any[] }) {
       title: "默认值",
       dataIndex: "defaultValue",
       valueType: "text",
-      width: 120,
+      width: 150,
+      renderFormItem() {
+        return <DefaultValueComp />;
+      },
     },
     {
       title: "字符集",
@@ -113,7 +175,7 @@ export default function TableEdit(props: { tableId?: string; data: any[] }) {
       width: 120,
       renderFormItem: (_schema, config) => {
         return config.record.type === DataType.Nvarchar ? (
-          <Input placeholder="请输入" />
+          <Input placeholder="字符集" />
         ) : null;
       },
     },
@@ -124,7 +186,7 @@ export default function TableEdit(props: { tableId?: string; data: any[] }) {
       width: 120,
       renderFormItem: (_schema, config) => {
         return config.record.type === DataType.Nvarchar ? (
-          <Input.TextArea placeholder="请输入" />
+          <Input.TextArea placeholder="内容..." />
         ) : null;
       },
     },
@@ -134,7 +196,7 @@ export default function TableEdit(props: { tableId?: string; data: any[] }) {
       valueType: "textarea",
       width: 120,
       renderFormItem: () => {
-        return <Input.TextArea placeholder="请输入" />;
+        return <Input.TextArea placeholder="描述..." />;
       },
     },
     {
@@ -170,17 +232,24 @@ export default function TableEdit(props: { tableId?: string; data: any[] }) {
   const handleAdd = () => {
     return createColumn(props?.tableId);
   };
+
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full overflow-hidden" ref={boxRef}>
       <EditableProTable
         columns={columns}
         rowKey="id"
-        scroll={{ x: 960 }}
         value={dataSource}
         onChange={setDataSource}
         recordCreatorProps={{
           record: handleAdd,
         }}
+        pagination={{
+          total: 10,
+          pageSize: 10,
+          onChange: (page, pageSize) => {
+            console.log(page, pageSize);
+          },
+        }}
         editable={{
           type: "multiple",
           editableKeys,

apps/er-designer/src/components/VariableModal.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo, useRef } from "react";
+import { Modal, Table } from "antd";
+import { DEFAULT_SYSTEM_VARIABLES } from "@/constants";
+import { useRequest } from "umi";
+import { GetSystemVariable } from "@/api";
+export default function VariableModal(props: {
+  /**
+   * 触发节点
+   */
+  trigger: JSX.Element;
+  /**
+   * 确认
+   */
+  onOk: (code: string) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState<React.Key[]>([]);
+  const result = useRef<string>();
+
+  const { run, data, loading } = useRequest(GetSystemVariable, {
+    manual: true,
+  });
+
+  const dataSource = useMemo(() => {
+    return [
+      ...DEFAULT_SYSTEM_VARIABLES,
+      ...(data?.result || [])
+    ];
+  }, [data]);
+
+  const triggerDom = React.cloneElement(props.trigger, {
+    ...props.trigger.props,
+    onClick: () => {
+      setSelectedRowKeys([]);
+      result.current = '';
+      run();
+      setOpen(true);
+    },
+  });
+  const handleSelected = (keys: React.Key[], rows: any[]) => {
+    setSelectedRowKeys(keys);
+    result.current = rows?.[0]?.name;
+  };
+
+  const handleOk = () => {
+    props.onOk(result.current ? `<%${result.current}%>` : '');
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Modal
+        width={440}
+        open={open}
+        title="请选择"
+        onCancel={() => setOpen(false)}
+        onOk={handleOk}
+        okButtonProps={{
+          disabled: !result.current,
+        }}
+      >
+        <Table
+          rowKey={'id'}
+          loading={loading}
+          dataSource={dataSource}
+          rowSelection={{
+            type: "radio",
+            selectedRowKeys,
+            onChange: (keys, selectedRows) => {
+              handleSelected(keys, selectedRows);
+            },
+          }}
+          columns={[
+            { title: "变量名", dataIndex: "name" },
+            { title: "变量类型", dataIndex: "type" },
+          ]}
+        />
+      </Modal>
+      {triggerDom}
+    </>
+  );
+}

apps/er-designer/src/constants/index.ts

@@ -34,4 +34,15 @@ export const RELATION_TYPE_OPTIONS = [
   {label: "一对一", value: 1},
   {label: "一对多", value: 2},
   {label: "多对一", value: 3},
-];
+];
+
+/**
+ * 默认系统变量
+ */
+export const DEFAULT_SYSTEM_VARIABLES = [
+  {id: '1', name: "LanguageCulture", type: "String"},
+  {id: '2', name: "UserId", type: "String"},
+  {id: '3', name: "UserCode", type: "String"},
+  {id: '4', name: "SystemDate", type: "Date"},
+  {id: '5', name: "?", type: "运行中的参数"},
+]

apps/er-designer/src/pages/detail/index.tsx

@@ -13,7 +13,7 @@ import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import TableEdit from "@/components/TableEdit";
 import ER from "./components/ER";
 import AddTable from "./components/AddTable";
-import { useModel } from "umi";
+import { useModel, history } from "umi";
 import NoData from "@/assets/no-data.png";
 import { TableItemType } from "@/type";
 
@@ -125,7 +125,7 @@ export default function index() {
         <i className="iconfont icon-bianji text-12px" />
         修改
       </a>
-      <a>
+      <a onClick={() => history.push(`/er/${project.id}`)}>
         <i className="iconfont icon-bianji text-12px" />
         进入编辑
       </a>

package.json

@@ -56,7 +56,7 @@
     "@uiw/react-codemirror": "^4.23.3",
     "@unocss/cli": "^0.62.3",
     "ahooks": "^3.8.1",
-    "antd": "^5.20.5",
+    "antd": "^5.23.0",
     "axios": "^1.7.7",
     "insert-css": "^2.0.0",
     "lodash-es": "^4.17.21",