perf: 增加formWatch示例

src/router/modules/crud.ts

@@ -612,13 +612,22 @@ const formRoutes = {
     },
     {
       meta: {
-        title: '查看表单使用cell组价',
+        title: '查看表单使用cell组件',
         keepAlive: true,
       },
       name: 'FormView',
       path: 'view',
       component: () => import('@/views/crud/form/view/index.vue'),
     },
+    {
+      meta: {
+        title: '表单Watch',
+        keepAlive: true,
+      },
+      name: 'FormWatch',
+      path: 'view',
+      component: () => import('@/views/crud/form/watch/index.vue'),
+    },
   ],
 };
 const featureRoutes = {

src/views/crud/form/watch/api.ts

@@ -0,0 +1,44 @@
+import { requestForMock } from '@/utils/http/service';
+const request = (req: any) => {
+  return requestForMock(req);
+};
+const apiPrefix = '/mock/FormWatch';
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + '/page',
+    method: 'get',
+    data: query,
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + '/add',
+    method: 'post',
+    data: obj,
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + '/update',
+    method: 'post',
+    data: obj,
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + '/delete',
+    method: 'post',
+    params: { id },
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + '/get',
+    method: 'get',
+    params: { id },
+  });
+}

src/views/crud/form/watch/crud.tsx

@@ -0,0 +1,80 @@
+import * as api from './api';
+import {
+  AddReq,
+  CreateCrudOptionsRet,
+  DelReq,
+  EditReq,
+  FormScopeContext,
+  UserPageQuery,
+  UserPageRes,
+} from '@fast-crud/fast-crud';
+
+export default function (): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    if (form.id == null) {
+      form.id = row.id;
+    }
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      settings: {
+        viewFormUseCellComponent: true,
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      form: {
+        initialForm: {
+          name: '123',
+        },
+        watch(context: FormScopeContext) {
+          const { form } = context;
+          form.c = form.a + form.b;
+        },
+      },
+      columns: {
+        name: {
+          title: '姓名',
+          type: 'text',
+        },
+        age: {
+          title: '年龄',
+          type: 'text',
+        },
+        a: {
+          title: 'a',
+          type: 'number',
+        },
+        b: {
+          title: 'b',
+          type: 'number',
+        },
+        c: {
+          title: 'c',
+          type: 'number',
+          form: {
+            component: {
+              disabled: true,
+            },
+            helper: 'c=a+b，实时计算',
+          },
+        },
+      },
+    },
+  };
+}

src/views/crud/form/watch/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        form监听
+        <span class="sub">监听form数据变化，触发计算操作（表单示例演示，c=a+b）</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted } from 'vue';
+  import { useFs } from '@fast-crud/fast-crud';
+  import createCrudOptions from './crud';
+
+  export default defineComponent({
+    name: 'FormWatch',
+    setup() {
+      const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+      // 页面打开后获取列表数据
+      onMounted(() => {
+        crudExpose.doRefresh();
+      });
+
+      return {
+        crudBinding,
+        crudRef,
+      };
+    },
+  });
+</script>

src/views/crud/form/watch/mock.ts

@@ -0,0 +1,29 @@
+//@ts-ignore
+import mockUtil from '/src/mock/base';
+
+const options: any = {
+  name: 'FormWatch',
+  idGenerator: 0,
+};
+const list = [
+  {
+    name: '王小虎',
+    age: 15,
+    a: 1,
+    b: 2,
+    c: null,
+  },
+  {
+    name: '王小虎',
+    age: 15,
+    a: 1,
+    b: 3,
+    c: null,
+  },
+];
+
+options.list = list;
+options.copyTimes = 1000;
+const mock = mockUtil.buildMock(options);
+
+export default mock;