feat: 详情表编辑

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

@@ -1,9 +0,0 @@
-import React from 'react'
-
-export default function AddTableModal() {
-  return (
-    <div>
-      
-    </div>
-  )
-}

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

@@ -11,11 +11,13 @@ interface LanItem {
 export default function LangInput({
   value,
   onChange,
-  disabled
+  disabled,
+  style
 }: {
   value?: Record<string, string>[];
   onChange?: (value: Record<string, string>[], key?: string) => void;
   disabled?: boolean;
+  style?: React.CSSProperties;
 }) {
   const [lanOptions, setLanOptions] = React.useState<any[]>([]);
   const [formModel, setFormModel] = React.useState({
@@ -84,12 +86,13 @@ export default function LangInput({
           onChange={(val) => handleChange("zh-CN", val)}
           onSelect={(_val, opt) => handleSelectLang(opt)}
           disabled={disabled}
+          style={style}
         />
       </div>
       <div>
         <AutoComplete
           allowClear
-          style={{ width: "100%" }}
+          style={{ width: "100%", ...(style || {}) }}
           placeholder="英文"
           options={lanOptions}
           onSearch={(val) => handleSearch(val, "en")}

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

@@ -101,7 +101,7 @@ export default function TableEdit(props: {
       title: "字段代码",
       dataIndex: "schemaName",
       valueType: "text",
-      width: 80,
+      width: 150,
       formItemProps: {
         rules: [
           {
@@ -120,7 +120,7 @@ export default function TableEdit(props: {
       title: "字段名称",
       dataIndex: "langNameList",
       valueType: "text",
-      width: 80,
+      width: 150,
       render: (_dom, entity) => {
         return (
           entity.langNameList?.find(
@@ -134,6 +134,7 @@ export default function TableEdit(props: {
         return (
           <LangInput
             value={model.langNameList}
+            style={{width: 150}}
             onChange={(langValue) =>
               form.setFieldValue([rowKey || "", "langNameList"], langValue)
             }

apps/er-designer/src/pages/detail/components/AddTable.tsx

@@ -5,7 +5,7 @@ import LangInputTextarea from "@/components/LangInputTextarea";
 import { TableType } from "@/enum";
 import { createTable } from "@/utils";
 import { TableItemType } from "@/type";
-import { useSearchParams } from "umi";
+import { useModel } from "umi";
 import { validateTableCode, validateAliasName } from "@/utils/validator";
 
 export default forwardRef(function AddTable(
@@ -16,14 +16,12 @@ export default forwardRef(function AddTable(
 ) {
   const [open, setOpen] = useState(false);
   const tableItemRef = useRef<TableItemType>();
-  const [searchParams] = useSearchParams();
+  const { project } = useModel("erModel");
   const [tabActiveKey, setTabActiveKey] = useState("1");
   useImperativeHandle(ref, () => ({
     open: () => {
       // 获取当前模型类型
-      tableItemRef.current = createTable(
-        searchParams.get("type") as unknown as TableType
-      );
+      tableItemRef.current = createTable(project.type, project.id);
       setFormModel(tableItemRef.current.table);
       setOpen(true);
     },

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

@@ -9,6 +9,7 @@ import {
   Empty,
   Spin,
 } from "antd";
+import { ProDescriptions } from "@ant-design/pro-components";
 import type { DescriptionsProps, MenuProps } from "antd";
 import { DownOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
 import TableEdit from "@/components/TableEdit";
@@ -21,6 +22,9 @@ import { ColumnItem, ProjectInfo, TableItemType } from "@/type";
 import { useFullscreen } from "ahooks";
 import AddModel from "@/components/AddModel";
 import insertCss from "insert-css";
+import LangInput from "@/components/LangInput";
+import LangInputTextarea from "@/components/LangInputTextarea";
+import { validateAliasName, validateTableCode } from "@/utils/validator";
 
 const { Content, Header } = Layout;
 export default function index() {
@@ -81,7 +85,7 @@ export default function index() {
       {
         key: "2",
         label: "创建用户",
-        children: project?.createdBy || "-",
+        children: project?.createdByName || "-",
       },
       {
         key: "3",
@@ -125,31 +129,41 @@ export default function index() {
       children?: MenuProps["items"];
     }[] = [];
 
-    tables.forEach((item) => {
-      const name = item.table.langNameList?.find(
-        (item) => item.name === "zh-CN"
-      )?.value;
-      const newItem = {
-        key: item.table.id,
-        label: item.table.schemaName + `${name ? `(${name})}` : ""}`,
-        icon: <i className="iconfont icon-biaogebeifen" />,
-      };
-      if (!item.table.parentBusinessTableId) {
-        treeList.push(newItem);
-      } else {
-        const parent = treeList.find(
-          (tableItem) => tableItem?.key === item.table.parentBusinessTableId
+    tables
+      .filter((item) => {
+        const tableName = item.table.langNameList?.find(
+          (item) => item.name === "zh-CN"
+        )?.value;
+        return (
+          item.table.schemaName.includes(searchKeyword) ||
+          tableName?.includes(searchKeyword)
         );
-        if (parent) {
-          if (!parent?.children) {
-            parent.children = [];
+      })
+      .forEach((item) => {
+        const name = item.table.langNameList?.find(
+          (item) => item.name === "zh-CN"
+        )?.value;
+        const newItem = {
+          key: item.table.id,
+          label: item.table.schemaName + `${name ? `(${name})}` : ""}`,
+          icon: <i className="iconfont icon-biaogebeifen" />,
+        };
+        if (!item.table.parentBusinessTableId) {
+          treeList.push(newItem);
+        } else {
+          const parent = treeList.find(
+            (tableItem) => tableItem?.key === item.table.parentBusinessTableId
+          );
+          if (parent) {
+            if (!parent?.children) {
+              parent.children = [];
+            }
+            parent.children?.push(newItem);
           }
-          parent.children?.push(newItem);
         }
-      }
-    });
+      });
     return treeList;
-  }, [project]);
+  }, [project, searchKeyword]);
 
   const currentTable = useMemo(() => {
     return project.tables.find((item) => item.table.id === selectKey);
@@ -178,11 +192,12 @@ export default function index() {
 
   // 修改表格字段
   const handleChangeColumn = (columns: readonly ColumnItem[]) => {
-    currentTable && updateTable({
-      ...currentTable,
-      tableColumnList: [...columns]
-    })
-  }
+    currentTable &&
+      updateTable({
+        ...currentTable,
+        tableColumnList: [...columns],
+      });
+  };
 
   const extra = (
     <div className="flex gap-12px">
@@ -349,8 +364,90 @@ export default function index() {
               ) : (
                 <div>
                   <div className="p-y-10px p-l-20px">
-                    <span className="font-bold">当前表格：</span>
-                    {currentTable?.table.schemaName}
+                    <ProDescriptions
+                      title={currentTable?.table.schemaName}
+                      dataSource={currentTable?.table}
+                      editable={{
+                        onSave: async (keypath, newInfo, oriInfo) => {
+                          console.log(keypath, newInfo, oriInfo);
+                          currentTable &&
+                            updateTable({
+                              ...currentTable,
+                              table: {
+                                ...currentTable?.table,
+                                ...newInfo,
+                              },
+                            });
+                          return true;
+                        },
+                      }}
+                      columns={[
+                        {
+                          label: "类型",
+                          dataIndex: "type",
+                          valueType: "select",
+                          valueEnum: {
+                            1: "业务表",
+                            2: "流程表",
+                          },
+                          editable: false,
+                        },
+                        {
+                          label: "编码",
+                          dataIndex: "schemaName",
+                          valueType: "text",
+                          formItemProps: {
+                            rules: [
+                              { required: true, message: "请输入编码" },
+                              validateTableCode,
+                            ],
+                          },
+                        },
+                        {
+                          label: "别名",
+                          dataIndex: "aliasName",
+                          valueType: "text",
+                          formItemProps: {
+                            rules: [
+                              { required: true, message: "请输入别名" },
+                              validateAliasName,
+                            ],
+                          },
+                        },
+                        {
+                          label: "名称",
+                          dataIndex: "langNameList",
+                          render: (_, record) => {
+                            return (
+                              record.langNameList?.find(
+                                (item) => item.name === "zh-CN"
+                              )?.value || "-"
+                            );
+                          },
+                          renderFormItem: (_schema, config, form) => {
+                            return <LangInput style={{width: 200}}  onChange={(val) => form.setFieldValue("langNameList", val)}/>;
+                          },
+                        },
+                        {
+                          label: "描述",
+                          dataIndex: "langDescriptionList",
+                          render: (_, record) => {
+                            return (
+                              record?.langDescriptionList?.find(
+                                (item) => item.name === "zh-CN"
+                              )?.value || "-"
+                            );
+                          },
+                          renderFormItem: () => {
+                            return (
+                              <>
+                                <LangInputTextarea />
+                              </>
+                            );
+                          },
+                        },
+                      ]}
+                    ></ProDescriptions>
                   </div>
                   <TableEdit
                     key={selectKey}

apps/er-designer/src/type.d.ts

@@ -163,8 +163,10 @@ export interface ProjectInfo {
   createTime?: string;
   // 创建者
   createdBy?: string;
+  createdByName?: string;
   // 更新者
   updatedBy?: string;
+  updatedByName?: string;
   // 更新时间
   updateTime?: string;
   // 模型说明