feat: 本地编辑

fast-crud · Feb 10, 2022 · ac80dbf · ac80dbf
1 parent 6acb3cb
commit ac80dbf
Show file tree

Hide file tree

Showing 7 changed files with 496 additions and 448 deletions.
diff --git a/packages/fast-admin/fs-admin-naive-ui b/packages/fast-admin/fs-admin-naive-ui
diff --git a/packages/fast-crud/src/components/crud/fs-form-wrapper.vue b/packages/fast-crud/src/components/crud/fs-form-wrapper.vue
@@ -120,12 +120,8 @@ export default {
     async function submit() {
       loading.value = true;
       try {
-        if (props.submit) {
-          props.submit({ formRef, close });
-        } else {
-          await formRef.value.submit();
-          close();
-        }
+        await formRef.value.submit();
+        close();
       } catch (e) {
         console.warn("submit error", e);
       } finally {

diff --git a/packages/fast-crud/src/components/fs-crud.vue b/packages/fast-crud/src/components/fs-crud.vue
@@ -63,7 +63,6 @@
           ref="formWrapperRef"
           :slots="computedFormSlots"
           :inner-wrapper="innerWrapperRef"
-          :submit="submit"
           @inner-change="onFormInnerChange"
           @value-change="$emit('form-value-change', $event)"
         />
@@ -353,9 +352,6 @@ export default defineComponent({
      */
     form: {},
 
-    modelValue: {
-      type: Array
-    }
   },
   emits: [
     "search-submit",
@@ -372,35 +368,34 @@ export default defineComponent({
     useProviders();
     const search = useSearch(props, ctx);
     const table = useTable(props, ctx, search);
-    const submit = computed(() => {
-      if (props.modelValue) {
-        return function ({ formRef, close }) {
-          const newData = [...props.modelValue];
-
-          if (formRef.value.mode === "add") {
-            newData.push({ ...formRef.value.form });
-          } else if (formRef.value.mode === "edit") {
-            newData[formRef.value.index] = { ...newData[formRef.value.index], ...formRef.value.form };
-          }
-          close();
-          ctx.emit("update:modelValue", newData);
-          nextTick(() => {
-            ctx.emit("refresh");
-          });
-        };
-      }
-      return undefined;
-    });
-    watch(
-      computed(() => props.modelValue),
-      () => {
-        ctx.emit("refresh");
-      }
-    );
+    // const submit = computed(() => {
+    //   if (props.modelValue) {
+    //     return function ({ formRef, close }) {
+    //       const newData = [...props.modelValue];
+    //
+    //       if (formRef.value.mode === "add") {
+    //         newData.push({ ...formRef.value.form });
+    //       } else if (formRef.value.mode === "edit") {
+    //         newData[formRef.value.index] = { ...newData[formRef.value.index], ...formRef.value.form };
+    //       }
+    //       close();
+    //       ctx.emit("update:modelValue", newData);
+    //       nextTick(() => {
+    //         ctx.emit("refresh");
+    //       });
+    //     };
+    //   }
+    //   return undefined;
+    // });
+    // watch(
+    //   computed(() => props.modelValue),
+    //   () => {
+    //     ctx.emit("refresh");
+    //   }
+    // );
     return {
       ...search,
       ...table,
-      submit
     };
   }
 });

diff --git a/packages/fast-crud/src/d.ts/expose.ts b/packages/fast-crud/src/d.ts/expose.ts
@@ -88,6 +88,24 @@ export type CrudExpose = {
    * 重新设置表格数据
    */
   setTableData: ([]) => void;
+  /**
+   * 插入行
+   * @param index
+   * @param row
+   */
+  insertTableRow: (index:number, row:Object) => void;
+  /**
+   * 更新行
+   * @param index
+   * @param row
+   */
+  updateTableRow: (index:number, row:Object, merge:boolean) => void,
+  /**
+   * 删除行
+   * @param index
+   */
+  removeTableRow: (index:number) => void,
+
   /**
    * 获取表格数据某一行
    */

diff --git a/packages/fast-crud/src/use/default-crud-options.ts b/packages/fast-crud/src/use/default-crud-options.ts
@@ -5,6 +5,7 @@ export default {
   defaultOptions({ t }) {
     const ui = uiContext.get();
     return {
+      mode:{},
       search: {
         options: {
           ...ui.form.inlineLayout,

diff --git a/packages/fast-crud/src/use/use-crud.ts b/packages/fast-crud/src/use/use-crud.ts
@@ -11,6 +11,14 @@ import { useColumns } from "./use-columns";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { merge, cloneDeep } = useMerge();
 export interface CrudOptions {
+  mode?:{
+    //模式名称: local,remote
+    name:string;
+    // 更新时是否merge
+    isMergeWhenUpdate:boolean;
+    // 添加时是否在列表最后插入
+    isAppendWhenAdd:boolean;
+  };
   table?: {};
   columns?: {};
   data?: [];
@@ -79,15 +87,24 @@ export function useCrud(ctx: UseCrudProps) {
       editForm: {
         async doSubmit(context) {
           doValueResolve(context);
-          await crudBinding.value.request.editRequest(context);
-          doRefresh();
+          if(options.mode?.name === 'local'){
+            expose.updateTableRow(context.index,context.form, options.mode.isMergeWhenUpdate)
+          }else{
+            await crudBinding.value.request.editRequest(context);
+            doRefresh();
+          }
         }
       },
       addForm: {
         async doSubmit(context) {
           doValueResolve(context);
-          await crudBinding.value.request.addRequest(context);
-          doRefresh();
+          if(options.mode?.name === 'local'){
+            const index = options.mode.isAppendWhenAdd ? expose.getTableData().length : 0;
+            expose.insertTableRow(index, context.form)
+          }else{
+            await crudBinding.value.request.addRequest(context);
+            doRefresh();
+          }
         }
       }
     };