perf(form): 支持conditionalRender

fast-crud · May 22, 2023 · 270fd52 · 270fd52
1 parent 4db316b
commit 270fd52
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/packages/fast-crud/src/components/crud/fs-cell.tsx b/packages/fast-crud/src/components/crud/fs-cell.tsx
@@ -1,6 +1,6 @@
 import { useCompute } from "../../use/use-compute";
 import { defineComponent, PropType, ref } from "vue";
-import { CellConditionalRender } from "../../d";
+import { ConditionalRenderProps } from "../../d";
 
 /**
  * 单元格显示组件
@@ -26,7 +26,7 @@ export default defineComponent({
      * 条件渲染，符合条件的情况下优先渲染
      */
     conditionalRender: {
-      type: Object as PropType<CellConditionalRender>
+      type: Object as PropType<ConditionalRenderProps>
     }
   },
   setup(props: any, ctx) {
@@ -63,9 +63,10 @@ export default defineComponent({
         );
       };
       const scope = { ...props.scope, props: props.item };
-      if (props.conditionalRender && props.conditionalRender.match && props.conditionalRender.match(scope)) {
+      const conditionalRender = props.item.conditionalRender ?? props.conditionalRender;
+      if (conditionalRender && conditionalRender.match && conditionalRender.match(scope)) {
         //条件render
-        return cellContentRender(props.conditionalRender.render(scope));
+        return cellContentRender(conditionalRender.render(scope));
       } else if (props.slots) {
         return cellContentRender(props.slots(scope));
       } else if (props.item.formatter) {

diff --git a/packages/fast-crud/src/components/crud/fs-form-item.vue b/packages/fast-crud/src/components/crud/fs-form-item.vue
@@ -41,7 +41,12 @@
           <fs-slot-render v-if="formSlot" :slots="formSlot" :scope="scopeFunc()" />
           <template v-else-if="item.component?.show !== false">
             <fs-render
-              v-if="item.render || item.component?.render"
+              v-if="item.conditionalRender && item.conditionalRender.match && item.conditionalRender.match(scopeFunc())"
+              :render-func="item.conditionalRender.render"
+              :scope="scopeFunc()"
+            />
+            <fs-render
+              v-else-if="item.render || item.component?.render"
               :render-func="item.render || item.component.render"
               :scope="scopeFunc()"
             />

diff --git a/packages/fast-crud/src/components/crud/fs-table.tsx b/packages/fast-crud/src/components/crud/fs-table.tsx
@@ -14,7 +14,7 @@ import { useEditable } from "./editable/use-editable";
 import logger from "../../utils/util.log";
 import utilLog from "../../utils/util.log";
 import "./fs-table.less";
-import { CellConditionalRender, ColumnProps, ScopeContext, WriteableSlots } from "../../d";
+import { ConditionalRenderProps, ColumnProps, ScopeContext, WriteableSlots } from "../../d";
 import { UiInterface } from "@fast-crud/ui-interface/src";
 
 type BuildTableColumnsOption = {
@@ -223,7 +223,7 @@ export default defineComponent({
     },
 
     conditionalRender: {
-      type: Object as PropType<CellConditionalRender>
+      type: Object as PropType<ConditionalRenderProps>
     },
 
     /**

diff --git a/packages/fast-crud/src/d/crud.ts b/packages/fast-crud/src/d/crud.ts
@@ -357,11 +357,13 @@ export type RemoveProps = {
   [key: string]: any;
 };
 
-export type CellConditionalRender = {
+export type ConditionalRenderProps = {
   match: (scope: ScopeContext) => boolean;
   render: (scope: ScopeContext) => UiSlotRet;
 };
 
+export type CellConditionalRender = ConditionalRenderProps;
+
 /**
  * 表格配置
  */
@@ -399,7 +401,7 @@ export type TableProps = {
   /**
    * 条件渲染
    */
-  conditionalRender?: CellConditionalRender;
+  conditionalRender?: ConditionalRenderProps;
 
   /**
    * 表格最大高度调整
@@ -664,6 +666,12 @@ export type FormItemProps = {
    */
   valueResolve?: (context: ValueResolveContext) => void;
 
+  /**
+   * 条件渲染
+   * @param scope
+   */
+  conditionalRender?: ConditionalRenderProps;
+
   /**
    * 直接渲染组件
    * @param scope