feat: table 增加 data-change事件

fast-crud · Feb 24, 2022 · 291da67 · 291da67
1 parent 390cb95
commit 291da67
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 53 deletions.
diff --git a/docs/zh/api/crud-options/table.md b/docs/zh/api/crud-options/table.md
@@ -9,8 +9,8 @@
 * 类型：Boolean
 * 默认：`true`
 
-## el-table,a-table参数
-* 说明：支持el-table，a-table参数
+## fs-table,el-table/a-table参数
+* 说明：支持fs-table, 以及el-table/a-table的参数
 ```json5
 {// crudOptions
     table:{
@@ -86,4 +86,19 @@
   }    
 
 }
-```
+```
+
+## onDataChange
+* 说明：列表数据变化事件
+* 类型：Function
+* 默认值：无
+```js
+{
+  table:{
+    onDataChange({data}){
+        //列表数据变化时的操作
+    }
+  }    
+
+}
+```
diff --git a/packages/fast-crud/src/components/crud/fs-form-wrapper.vue b/packages/fast-crud/src/components/crud/fs-form-wrapper.vue
@@ -27,11 +27,14 @@ export default {
      * 插槽
      */
     slots: {},
+    /**
+     * 是否在内部打开对话框
+     */
     inner: {},
+    /**
+     * 内部打开对话框的wrapper
+     */
     innerWrapper: {},
-    submit: {
-      type: Function
-    }
   },
   emits: ["reset", "submit", "validationError", "value-change", "open", "opened", "closed", "inner-change"],
   setup(props, ctx) {

diff --git a/packages/fast-crud/src/components/crud/fs-table.vue b/packages/fast-crud/src/components/crud/fs-table.vue
@@ -8,14 +8,15 @@ import {
   resolveDirective,
   resolveDynamicComponent,
   withDirectives,
-  toRef
+  toRef,
+  watch
 } from "vue";
 import _ from "lodash-es";
-import { uiContext } from "../../ui";
-import { useEditable } from "./editable/use-editable";
+import {uiContext} from "../../ui";
+import {useEditable} from "./editable/use-editable";
 import logger from "../../utils/util.log";
 
-function buildTableSlots({ props, ctx, ui, getContextFn, componentRefs, renderRowHandle, renderCellComponent }) {
+function buildTableSlots({props, ctx, ui, getContextFn, componentRefs, renderRowHandle, renderCellComponent}) {
   const tableComp = resolveDynamicComponent(ui.table.name);
   const tableColumnComp = resolveDynamicComponent(ui.tableColumn.name);
   const tableColumnGroupComp = resolveDynamicComponent(ui.tableColumnGroup.name);
@@ -53,18 +54,18 @@ function buildTableSlots({ props, ctx, ui, getContextFn, componentRefs, renderRo
           return renderCellComponent(item, scope);
         };
       }
-      const newItem = { ...item };
+      const newItem = {...item};
       delete newItem.children;
 
       return (
-        <currentTableColumnComp
-          ref={"tableColumnRef"}
-          {...newItem}
-          label={item.title}
-          prop={item.key}
-          dataIndex={item.key}
-          v-slots={cellSlots}
-        />
+          <currentTableColumnComp
+              ref={"tableColumnRef"}
+              {...newItem}
+              label={item.title}
+              prop={item.key}
+              dataIndex={item.key}
+              v-slots={cellSlots}
+          />
       );
     };
     _.forEach(props.columns, (item) => {
@@ -80,13 +81,13 @@ function buildTableSlots({ props, ctx, ui, getContextFn, componentRefs, renderRo
         default: renderRowHandle
       };
       children.push(
-        <tableColumnComp
-          ref={"tableColumnRef"}
-          {...props.rowHandle}
-          label={props.rowHandle.title}
-          prop={props.rowHandle.key || "rowHandle"}
-          v-slots={rowHandleSlots}
-        />
+          <tableColumnComp
+              ref={"tableColumnRef"}
+              {...props.rowHandle}
+              label={props.rowHandle.title}
+              prop={props.rowHandle.key || "rowHandle"}
+              v-slots={rowHandleSlots}
+          />
       );
     }
     return children;
@@ -111,14 +112,14 @@ function buildTableSlots({ props, ctx, ui, getContextFn, componentRefs, renderRo
  * @param renderRowHandle
  * @returns {*[]}
  */
-function buildTableColumns({ props, ctx, ui, getContextFn, componentRefs, renderRowHandle, renderCellComponent }) {
+function buildTableColumns({props, ctx, ui, getContextFn, componentRefs, renderRowHandle, renderCellComponent}) {
   const columns = [];
 
   for (let column of props.columns) {
     if (column.show === false) {
       continue;
     }
-    const item = { ...column };
+    const item = {...column};
     item.dataIndex = column.key;
     columns.push(item);
     if (column.children != null) {
@@ -128,7 +129,7 @@ function buildTableColumns({ props, ctx, ui, getContextFn, componentRefs, render
     } else {
       //渲染组件
       const customRender = item[ui.table.renderMethod];
-      const newCol = { ...item };
+      const newCol = {...item};
       delete newCol[ui.table.renderMethod];
       if (!customRender) {
         //如果没有配置customRender 默认使用render cell component
@@ -164,6 +165,7 @@ function buildTableColumns({ props, ctx, ui, getContextFn, componentRefs, render
 
   return columns;
 }
+
 /**
  * fs-table,表格封装
  * 支持el-table/a-table的参数
@@ -214,7 +216,7 @@ export default {
     },
     request: {}
   },
-  emits: ["row-handle", "value-change", "pagination-change", "filter-change", "sort-change"],
+  emits: ["row-handle", "value-change", "pagination-change", "filter-change", "sort-change", 'data-change'],
   setup(props, ctx) {
     const tableRef = ref();
     const componentRefs = ref([]);
@@ -227,6 +229,12 @@ export default {
       return cellRef?.getTargetRef();
     };
 
+    watch(() => {
+      return props.data
+    }, (value) => {
+      ctx.emit('data-change', {data: value})
+    })
+
     const ui = uiContext.get();
     const tableComp = resolveDynamicComponent(ui.table.name);
     const tableColumnCI = ui.tableColumn;
@@ -274,7 +282,7 @@ export default {
           }
         }
       }
-      return <fs-row-handle {...props.rowHandle} scope={scope} onHandle={onRowHandle} v-slots={rowHandleSlots} />;
+      return <fs-row-handle {...props.rowHandle} scope={scope} onHandle={onRowHandle} v-slots={rowHandleSlots}/>;
     };
 
     const renderCellComponent = (item, scope) => {
@@ -317,23 +325,23 @@ export default {
         // if (props.editable && props.editable?.options?.value?.enabled === true) {
         const editable = editableWrap.editable.getEditableCell(index, item.key);
         return (
-          <fs-editable-cell
-            ref={setRef}
-            columnKey={item.key}
-            index={index}
-            item={item}
-            editable={editable}
-            getScope={getScopeFn}
-            slots={cellSlots}
-            {...vModel}
-          />
+            <fs-editable-cell
+                ref={setRef}
+                columnKey={item.key}
+                index={index}
+                item={item}
+                editable={editable}
+                getScope={getScopeFn}
+                slots={cellSlots}
+                {...vModel}
+            />
         );
       } else {
         return <fs-cell ref={setRef} item={item} getScope={getScopeFn} slots={cellSlots} {...vModel} />;
       }
     };
 
-    const { expose } = ctx;
+    const {expose} = ctx;
 
     expose({
       tableRef,
@@ -345,7 +353,7 @@ export default {
     const renderMode = ui.table.renderMode;
     if (renderMode === "slot") {
       const computedTableSlots = computed(() => {
-        return buildTableSlots({ props, ctx, ui, getContextFn, componentRefs, renderRowHandle, renderCellComponent });
+        return buildTableSlots({props, ctx, ui, getContextFn, componentRefs, renderRowHandle, renderCellComponent});
       });
 
       // 使用config render
@@ -357,7 +365,7 @@ export default {
           [ui.table.data]: props.data
         };
         const tableRender = (
-          <tableComp ref={tableRef} {...ctx.attrs} {...events} {...dataSource} v-slots={computedTableSlots.value} />
+            <tableComp ref={tableRef} {...ctx.attrs} {...events} {...dataSource} v-slots={computedTableSlots.value}/>
         );
         if (ui.table.vLoading) {
           const loading = resolveDirective(ui.table.vLoading);
@@ -387,14 +395,14 @@ export default {
           [ui.table.data]: props.data
         };
         return (
-          <tableComp
-            ref={tableRef}
-            {...ctx.attrs}
-            {...events}
-            columns={computedColumns.value}
-            {...dataSource}
-            v-slots={props.slots}
-          />
+            <tableComp
+                ref={tableRef}
+                {...ctx.attrs}
+                {...events}
+                columns={computedColumns.value}
+                {...dataSource}
+                v-slots={props.slots}
+            />
         );
       };
     }
@@ -404,8 +412,10 @@ export default {
 <style lang="less">
 .fs-crud-table {
   height: 100px;
+
   &.ant-table-wrapper {
   }
+
   .ant-table-bordered {
     border-bottom: 1px solid #eee;
 
@@ -415,6 +425,7 @@ export default {
 
   .fs-current-row {
     background-color: #b0e2ff;
+
     td {
       background-color: unset;
     }
@@ -423,6 +434,7 @@ export default {
   &.el-table--small td {
     padding: 2px 0;
   }
+
   .el-table__expanded-cell[class*="cell"] {
     padding: 10px 50px;
   }

diff --git a/packages/fast-crud/src/use/use-crud.ts b/packages/fast-crud/src/use/use-crud.ts
@@ -19,7 +19,10 @@ export interface CrudOptions {
     // 添加时是否在列表最后插入
     isAppendWhenAdd: boolean;
   };
-  table?: {};
+  table?: {
+    //列表数据变化事件
+    onDataChange:Function,
+  };
   columns?: {};
   data?: [];
   rowHandle?: {};