feat: 优化表单弹窗的触发点

src/components/form/form-modal.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonInstance, FormInstance, Message, Modal } from "@arco-design/web-vue";
 import { assign, cloneDeep, omit } from "lodash-es";
-import { PropType, defineComponent } from "vue";
+import { PropType, VNode, defineComponent } from "vue";
 import { Form } from "./form";
 import { IFormItem } from "./form-item";
 
@@ -13,19 +13,26 @@ export const FormModal = defineComponent({
   props: {
     /**
      * 弹窗标题
-     * @default '新建'
+     * @default '添加'
      */
     title: {
       type: [String, Function] as PropType<
         string | ((args: { model: Record<string, any>; items: IFormItem[] }) => string)
       >,
-      default: "新建",
+      default: "添加",
     },
     /**
      * 触发元素
      */
     trigger: {
-      type: [Boolean, Object] as PropType<boolean | (ButtonInstance["$props"] & { text: string })>,
+      type: [Boolean, Object] as PropType<
+        | boolean
+        | ((props: { model: any; items: any[] }) => VNode)
+        | {
+            text?: string;
+            buttonProps?: ButtonInstance["$props"];
+          }
+      >,
       default: true,
     },
     /**
@@ -119,20 +126,23 @@ export const FormModal = defineComponent({
         return null;
       }
       let content;
-      if (typeof props.trigger === "boolean") {
+      if (typeof props.trigger === "boolean" || typeof props.trigger === "string") {
         content = (
           <Button type="primary">
             {{
-              default: () => "新建",
+              default: () => (typeof props.trigger === "string" ? props.trigger : "添加"),
               icon: () => <i class="icon-park-outline-plus" />,
             }}
           </Button>
         );
       }
+      if (typeof props.trigger === "function") {
+        content = props.trigger({ model: props.model, items: props.items });
+      }
       if (typeof props.trigger === "object") {
         content = (
           <Button type="primary" {...omit(props.trigger, "text")}>
-            {props.trigger?.text || "新建"}
+            {props.trigger?.text || "添加"}
           </Button>
         );
       }

src/components/form/form-node.tsx

@@ -19,10 +19,10 @@ const initOptions = ({ item, model }: any) => {
     item.nodeProps.options = item.options;
   }
   if (typeof item.options === "function") {
+    const loadData = item.options;
     item.nodeProps.options = reactive([]);
-    const fetchData = item.options;
     item._updateOptions = async () => {
-      let data = await fetchData({ item, model });
+      let data = await loadData({ item, model });
       if (Array.isArray(data?.data?.data)) {
         data = data.data.data.map((i: any) => ({ label: i.name, value: i.id }));
       }
@@ -35,10 +35,6 @@ const initOptions = ({ item, model }: any) => {
   }
 };
 
-const defineNodeMap = <T extends { [key: string]: { component: any; nodeProps: any } }>(map: T) => {
-  return map;
-};
-
 /**
  * 表单项组件映射
  */
@@ -101,12 +97,12 @@ export const nodeMap = {
    */
   cascader: {
     component: Cascader,
+    init: initOptions,
     nodeProps: {
       placeholder: "请选择",
       allowClear: true,
       expandTrigger: "hover",
     } as InstanceType<typeof Cascader>["$props"],
-    init: initOptions,
   },
   /**
    * 时间选择框
@@ -169,8 +165,6 @@ export const nodeMap = {
    */
   submit: {
     component: (props: any, { emit }: any) => {
-      const state = inject("tableInstance");
-      console.log("st", state);
       return (
         <>
           <Button type="primary" loading={props.loading} onClick={() => emit("submit")} class="mr-3">

src/components/form/util.ts

@@ -0,0 +1,34 @@
+import { cloneDeep } from "lodash-es";
+
+/**
+ * 获取表单数据
+ */
+export function getModel(model: any) {
+  const data: Record<string, any> = {};
+  for (const key of Object.keys(model)) {
+    if (/[^:]+:[^:]+/.test(key)) {
+      const keys = key.split(":");
+      const vals = cloneDeep(model[key] || []);
+      for (const k of keys) {
+        data[k] = vals.shift();
+      }
+    } else {
+      data[key] = cloneDeep(model[key]);
+    }
+  }
+  return data;
+}
+
+/**
+ * 设置表单数据
+ */
+export function setModel(model: any, data: Record<string, any>) {
+  for (const key of Object.keys(model)) {
+    if (/[^:]+:[^:]+/.test(key)) {
+      const subKeys = key.split(":");
+      model[key] = subKeys.map((k) => data[k]);
+    } else {
+      model[key] = data[key];
+    }
+  }
+}

src/pages/home/index.vue

@@ -137,7 +137,7 @@ const table = useTable({
   create: {
     title: "新建用户",
     submit: ({ model }) => {
-      return api.user.createUser(model, {
+      return api.user.addUser(model as any, {
         type: ContentType.FormData,
       });
     },

src/pages/user/index.vue

@@ -8,7 +8,7 @@
 import { api } from "@/api";
 import { Table, useTable } from "@/components";
 import { dayjs } from "@/plugins";
-import { Avatar } from "@arco-design/web-vue";
+import { Avatar, Button } from "@arco-design/web-vue";
 
 const table = useTable({
   data: async (model, paging) => {
@@ -119,6 +119,16 @@ const table = useTable({
   },
   create: {
     title: "新建用户",
+    trigger: () => {
+      return (
+        <Button type="primary">
+          {{
+            icon: () => <i class="icon-park-outline-people-plus-one"></i>,
+            default: () => "添加",
+          }}
+        </Button>
+      );
+    },
     submit: ({ model }) => {
       console.log(model);
     },