🔱: [client] sync upgrade with 21 commits [trident-sync]

perf: 优化antdv4 示例授权页面tree的样式 build: publish success chore: 1 chore: 1 chore: 1 fix: getFileName支持item参数 https://github.com/fast-crud/fast-crud/issues/385 fix: fs-form独立使用支持插槽 https://github.com/fast-crud/fast-crud/issues/389 fix: 修复三级以上路由页面无法缓存的问题 https://github.com/fast-crud/fast-crud/issues/394 perf: form.wrapper.buttons支持compute动态计算 feat: 表单支持变更关闭前提醒保存，form.wrapper支持beforeClose事件 fix: 修复图片裁剪按钮上下和左右相反的bug https://github.com/fast-crud/fast-crud/issues/402 perf: alioss getAuthorization接口支持后台返回key https://github.com/fast-crud/fast-crud/issues/405 perf: alioss getAuthorization接口支持后台返回key https://github.com/fast-crud/fast-crud/issues/405 perf: fs-dict-tree支持插槽 https://github.com/fast-crud/fast-crud/issues/407 perf: 单选、多选、select、tree-select、table-select 都提供selected-change事件，可以获取选中的dict选项 feat: table-select 支持查看模式 https://github.com/fast-crud/fast-crud/issues/413 perf: 优化fs-admin可以在手机上操作 chore: pnpm workspace问题优化 docs: 1 chore: antdv4 支持主题色选择 ...
2026-05-16 21:27:34 +08:00 · 2024-06-15 18:32:36 +00:00
parent 9caa4cd1d4
commit ad360e81cb
173 changed files with 3386 additions and 1108 deletions
@@ -1,7 +1,8 @@
 import * as api from "./api";
 import * as textTableApi from "../text/api";
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi } from "@fast-crud/fast-crud";
 import createCrudOptionsText from "../text/crud";
+
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    return await api.GetList(query);
@@ -20,6 +21,17 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
    return await api.AddObj(form);
  };

+  const crudOptionsOverride = {
+    table: {
+      scroll: {
+        x: 2000
+      }
+    },
+    rowHandle: {
+      fixed: "right"
+    }
+  };
+  const { ui } = useUi();
  return {
    crudOptions: {
      request: {
@@ -40,6 +52,16 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
            show: false
          }
        },
+        dynamicShow: {
+          title: "动态显隐",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "显示" },
+              { value: false, label: "隐藏" }
+            ]
+          })
+        },
        single: {
          title: "单选",
          search: { show: true },
@@ -47,19 +69,31 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          dict: dict({
            value: "id",
            label: "name",
+            //重要，根据value懒加载数据
            getNodesByValues: async (values: any[]) => {
              return await textTableApi.GetByIds(values);
            }
          }),
          form: {
+            show: compute(({ form }) => {
+              return form.dynamicShow;
+            }),
            component: {
              crossPage: true,
+              valuesFormat: {
+                labelFormatter: (item: any) => {
+                  return `${item.id}.${item.name}`;
+                }
+              },
+              select: {
+                placeholder: "点击选择"
+              },
              createCrudOptions: createCrudOptionsText,
-              crudOptionsOverride: {
-                table: {
-                  scroll: {
-                    x: 2000
-                  }
+              crudOptionsOverride,
+              on: {
+                selectedChange({ $event }) {
+                  console.log("selectedChange", $event);
+                  ui.message.info(`你选择了${JSON.stringify($event)}`);
                }
              }
            }
@@ -72,6 +106,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          dict: dict({
            value: "id",
            label: "name",
+            //重要，根据value懒加载数据
            getNodesByValues: async (values: any[]) => {
              return await textTableApi.GetByIds(values);
            }
@@ -80,15 +115,126 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
            component: {
              crossPage: true,
              multiple: true,
+              valuesFormat: {
+                labelFormatter: (item: any) => {
+                  return `${item.id}.${item.name}`;
+                }
+              },
+              select: {
+                placeholder: "点击选择"
+              },
              createCrudOptions: createCrudOptionsText,
-              crudOptionsOverride: {
-                table: {
-                  scroll: {
-                    x: 2000
+              crudOptionsOverride: crudOptionsOverride
+            }
+          },
+          column: {
+            component: {
+              labelFormatter: (item: any) => {
+                return `${item.id}.${item.name}`;
+              }
+            }
+          }
+        },
+        valueType: {
+          title: "object类型",
+          search: { show: true },
+          type: "table-select",
+          dict: dict({
+            value: "id",
+            label: "name",
+            //重要，根据value懒加载数据
+            getNodesByValues: async (values: any[]) => {
+              return await textTableApi.GetByIds(values);
+            }
+          }),
+          column: {
+            component: {
+              valueType: "object"
+            }
+          },
+          form: {
+            helper: "这里提交的值是整个对象",
+            component: {
+              valueType: "object",
+              crossPage: true,
+              valuesFormat: {
+                labelFormatter: (item: any) => {
+                  return `${item.id}.${item.name}`;
+                }
+              },
+              select: {
+                placeholder: "点击选择"
+              },
+              createCrudOptions: createCrudOptionsText,
+              crudOptionsOverride
+            }
+          }
+        },
+        //值是object类型
+        valueTypeMulti: {
+          title: "object类型多选",
+          search: { show: true },
+          type: "table-select",
+          dict: dict({
+            value: "id",
+            label: "name",
+            getNodesByValues: async (values: any[]) => {
+              return await textTableApi.GetByIds(values);
+            }
+          }),
+          column: {
+            component: {
+              valueType: "object"
+            }
+          },
+          form: {
+            helper: "这里提交的值是对象数组",
+            component: {
+              valueType: "object",
+              crossPage: true,
+              multiple: true,
+              valuesFormat: {
+                labelFormatter: (item: any) => {
+                  return `${item.id}.${item.name}`;
+                }
+              },
+              select: {
+                placeholder: "点击选择"
+              },
+              createCrudOptions: createCrudOptionsText,
+              crudOptionsOverride
+            }
+          }
+        },
+        viewMode: {
+          title: "查看模式",
+          dict: dict({
+            value: "id",
+            label: "name"
+          }),
+          column: {
+            component: {
+              name: "fs-table-select",
+              //设置为查看模式
+              viewMode: true,
+              createCrudOptions: createCrudOptionsText,
+              crudOptionsOverride,
+              slots: {
+                default({ scope, value }) {
+                  async function open() {
+                    //打开时传入默认查询参数
+                    const crudOptions = {
+                      search: {
+                        initialForm: {
+                          classId: value
+                        }
+                      }
+                    };
+                    const { crudExpose } = await scope.open({ crudOptions });
+                    // 这里还能通过crudExpose等返回值操作表格
                  }
-                },
-                rowHandle: {
-                  fixed: "right"
+
+                  return <a-button onClick={open}>点我查看学生列表:{value}</a-button>;
                }
              }
            }