perf(editable): 增加sub-crud示例

fast-crud · Nov 22, 2023 · d2b67da · d2b67da
1 parent 1e1e487
commit d2b67da
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 17 deletions.
diff --git a/packages/fast-crud/src/components/crud/editable/fs-editable-cell.tsx b/packages/fast-crud/src/components/crud/editable/fs-editable-cell.tsx
@@ -1,7 +1,7 @@
 import { computed, ComputedRef, defineComponent, defineExpose, PropType, ref } from "vue";
 import { uiContext } from "../../../ui";
 import { useCompute } from "../../../use/use-compute";
-import { EditableCell,EditableProps, EditableUpdateCellRequest } from "../../../d";
+import { EditableCell, EditableProps, EditableUpdateCellRequest } from "../../../d";
 /**
  * 可编辑单元格组件
  */
@@ -22,7 +22,9 @@ export default defineComponent({
     },
     editableOpts: {
       type: Object as PropType<EditableProps>
-    }
+    },
+    disabled: {},
+    readonly: {}
   },
   setup(props: any, ctx: any) {
     const ui = uiContext.get();
@@ -103,7 +105,7 @@ export default defineComponent({
     };
 
     return () => {
-      if (!computedIsEditable.value) {
+      if (!computedIsEditable.value || props.disabled || props.readonly) {
         return <fs-cell ref={"targetRef"} item={props.item} scope={props.scope} {...ctx.attrs} />;
       }
       const editableCell: EditableCell = props.editableCell;

diff --git a/packages/fast-crud/src/components/crud/editable/fs-editable.vue b/packages/fast-crud/src/components/crud/editable/fs-editable.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="fs-editable">
-    <div v-if="!editing" class="fs-editable-inner fs-editable-pointer" v-bind="activeTrigger">
+    <div v-if="!editing || disabled" class="fs-editable-inner fs-editable-pointer" v-bind="activeTrigger">
       <div class="fs-editable-input">
         <div v-if="dirty" class="fs-editable-dirty" />
         <slot></slot>
       </div>
-      <div v-if="trigger" class="fs-editable-action fs-editable-icon">
+      <div v-if="trigger && !disabled" class="fs-editable-action fs-editable-icon">
         <fs-icon :icon="ui.icons.edit" />
       </div>
     </div>
@@ -39,6 +39,7 @@ import { useUi } from "@fast-crud/ui-interface";
 import { computed } from "vue";
 
 type FsEditableProps = {
+  disabled?: boolean;
   editing: boolean;
   dirty?: boolean;
   trigger?: "onClick" | "onDbClick" | false;
@@ -47,6 +48,7 @@ type FsEditableProps = {
   validateErrors?: any[];
 };
 const props = withDefaults(defineProps<FsEditableProps>(), {
+  disabled: false,
   editing: false,
   dirty: false,
   loading: false,

diff --git a/packages/fast-crud/src/components/crud/editable/use-editable.ts b/packages/fast-crud/src/components/crud/editable/use-editable.ts
@@ -11,7 +11,8 @@ import {
   EditableEachCellsOpts,
   EditableEachRowsOpts,
   EditableRow,
-  EditableTable
+  EditableTable,
+  FormItemProps
 } from "../../../d";
 import { createValidator } from "./validator";
 
@@ -130,7 +131,7 @@ export function useEditable(props: any, ctx: any, tableRef: any): { editable: Ed
       return col.editable?.updateCell || options.value.updateCell;
     });
     const cell: EditableCell = reactive({
-      mode: "edit",
+      mode: editableId < 0 ? "add" : "edit",
       oldValue: undefined,
       newValue: undefined,
       loading: false,
@@ -177,7 +178,13 @@ export function useEditable(props: any, ctx: any, tableRef: any): { editable: Ed
           cell.showAction = null;
         }
         cell.isEditing = true;
+
         cell.oldValue = getValue(key);
+
+        const formItem = options.value.editForm[key];
+        if (formItem) {
+          setDefaultValue(formItem, tableRow);
+        }
       },
       inactive: () => {
         cell.isEditing = false;
@@ -544,8 +551,24 @@ export function useEditable(props: any, ctx: any, tableRef: any): { editable: Ed
 
   let addIndex = 0;
 
+  function setDefaultForm(formColumnConfigs: Record<string, FormItemProps>, row: any) {
+    //设置默认值
+    eachTree(formColumnConfigs, (item: FormItemProps) => {
+      setDefaultValue(item, row);
+    });
+  }
+
+  function setDefaultValue(formItem: FormItemProps, row: any) {
+    const value = _.get(row, formItem.key);
+    const defValue = unref(formItem.value);
+    if (defValue != null && value == null) {
+      _.set(row, formItem.key, defValue);
+    }
+  }
+
   async function addRow(opts: { row: any; active: boolean } = { row: undefined, active: true }) {
     const row = opts.row || { [options.value.rowKey]: --addIndex };
+    setDefaultForm(options.value.addForm, row);
     if (props.editable.addRow) {
       await props.editable.addRow(tableData.getData(), row);
     } else {

diff --git a/packages/fast-crud/src/components/crud/fs-table.tsx b/packages/fast-crud/src/components/crud/fs-table.tsx
@@ -399,6 +399,8 @@ export default defineComponent({
             editableOpts={editableWrap.editable?.options?.value}
             scope={newScope}
             slots={cellSlots}
+            disabled={editableWrap.editable?.options?.value?.disabled}
+            readonly={editableWrap.editable?.options?.value?.readonly}
             {...vModel}
           />
         );

diff --git a/packages/fast-crud/src/d/crud.ts b/packages/fast-crud/src/d/crud.ts
@@ -479,8 +479,15 @@ export type RemoveProps = {
 };
 
 export type EditableProps = {
-  rowKey?: string;
+  /**
+   * 是否启用编辑
+   */
   enabled?: boolean;
+  rowKey?: string;
+  /**
+   * 是否readonly
+   */
+  readonly?: boolean;
   addForm?: FormProps;
   editForm?: FormProps;
   //模式，free，row

diff --git a/packages/fast-crud/src/d/editable.ts b/packages/fast-crud/src/d/editable.ts
@@ -6,6 +6,7 @@ import { ValidateFieldsError } from "async-validator/dist-types/interface";
 export type EditableValidateResult = boolean | ValidateFieldsError;
 export type EditableTable = {
   options: Ref<EditableProps>;
+  disabled?: boolean;
   setupEditable: (data?: any[]) => void;
   inactive: () => void;
   active: () => void;

diff --git a/packages/fast-crud/src/use/use-expose.ts b/packages/fast-crud/src/use/use-expose.ts
@@ -1,4 +1,4 @@
-import { Ref, toRaw } from "vue";
+import { onMounted, Ref, toRaw, watch } from "vue";
 import { CrudExpose, OpenDialogProps, OpenEditContext, SetFormDataOptions } from "../d/expose";
 import _, { isArray } from "lodash-es";
 import logger from "../utils/util.log";
@@ -49,23 +49,33 @@ function useEditable(props: UseEditableProps) {
   const { ui } = useUi();
   const { t } = useI18n();
   const { merge } = useMerge();
+
+  watch(
+    () => {
+      return crudBinding.value?.table?.editable?.enabled;
+    },
+    (val) => {
+      if (val) {
+        if (crudBinding.value.table.editable.mode === "row") {
+          crudBinding.value.rowHandle.active = "editRow";
+        } else {
+          crudBinding.value.rowHandle.active = "editable";
+        }
+      } else {
+        crudBinding.value.rowHandle.active = "default";
+      }
+    }
+  );
   const editable: Editable = {
     /**
      * 启用编辑
      * @param opts
-     * @param onEnabled 默认根据mode切换rowHandle.active,[editRow,editable]
      */
-    async enable(opts: any, onEnabled: (opts: EditableOnEnabledProps) => void) {
+    async enable(opts?: any, onEnabled?: (opts: EditableOnEnabledProps) => void) {
       const editableOpts = crudBinding.value.table.editable;
       merge(editableOpts, { enabled: true }, opts);
       if (onEnabled) {
         onEnabled({ editable: editableOpts });
-      } else {
-        if (editableOpts.mode === "row") {
-          crudBinding.value.rowHandle.active = "editRow";
-        } else {
-          crudBinding.value.rowHandle.active = "editable";
-        }
       }
     },
     /**