feat: 动态计算支持ref和compImpl

docs/api/crud-options/columns.md

@@ -137,6 +137,21 @@ const crudOptions = {
 * 默认：{span:12}
 * 同[form.col](form#col)
 
+### [key].form.value
+* 说明：该字段的默认值
+* 类型：any
+* 注意：此处配置了默认值，会被search复制过去，一般来说，search是不需要默认值的，此时需要配置search.value=null进行取消。
+```
+columns:{
+    fieldKey:{
+        form:{
+            value:2 //当此字段value为空时，将被设置为默认值2
+        }
+    }
+}
+
+```
+
 
 ## [key].addForm
 * 说明：该字段在添加表单里面的配置

docs/guide/advance/compute.md

@@ -1,12 +1,42 @@
 # 动态计算
+
+动态计算分为三类
+1. `ref、computed`类,将配置传入一个`ref`或者`computed`，就能够动态变化。
+2. `compute` 同步计算，基于`vue`的`computed`，但又有所不同。
+3. `asyncCompute`异步计算，基于`vue`的`watch 和 computed`实现。 
 
-这里的动态计算是基于`vue`的`computed`的，但又有所不同。      
-主要用于解决某些配置项需要根据当前上下文数据动态变化的问题。    
+动态计算主要用于解决配置需要动态变化的问题，其中2、3类更为强大，可以根据当前上下文（form和row数据）动态计算。    
 
 动态计算demo：
 [antdv版](http://fast-crud.docmirror.cn/antdv/#/basis/compute)  | 
 [element版](http://fast-crud.docmirror.cn/antdv/#/basis/compute)
 
+## ref和computed【ref引用】
+可以给`crudOptions`里的属性配置`ref`即可实现全局动态变化。     
+你只需保存ref的引用，然后通过修改ref.value，达到动态修改的目的。
+```js
+//默认ref不显示table
+const showTableRef = ref(false)
+//或者使用computed计算出是否显示table
+const showTableComputed = computed(()=>{
+    return showTableRef.value
+})
+const crudOptions = {
+    table:{
+        show:showTableRef //换成showTableComputed是一样的效果
+    }
+}
+
+// 当修改showTableRef.value=true，可实现table的动态显隐
+showTableRef.value = true
+
+```
+:::warning
+某些配置可能不支持此方式进行动态，当出现问题时您可以提交issue，需要进行具体分析。
+实际上通过直接修改`crudBinding.xxx.xxx.xxx`也可以达到一样的效果             
+建议只将末端配置使用`ref或computed`    
+:::
+
 ## compute 【同步计算】
 > 注意后面没有`d`，基于`vue`的`computed`，与之用法类似，但不是同一个东西
 

packages/fast-crud/src/components/search/index.vue

@@ -166,7 +166,8 @@ export default {
     let autoSearch = ref(null);
     let initialForm = _.cloneDeep(props.initialForm || {});
     _.forEach(props.columns, (column, key) => {
-      if (column.value !== undefined) {
+      if (column.value !== undefined && column.show !== false && column.component?.show !== false) {
+        //默认值
         initialForm[key] = column.value;
       }
     });
@@ -194,7 +195,6 @@ export default {
         autoSearch.value.cancel();
       }
       const valid = await searchFormRef.value.validate();
-      logger.debug("valid", valid);
       if (valid) {
         ctx.emit("search", { form });
       } else {
@@ -268,13 +268,7 @@ export default {
     function initAutoSearch() {
       // 构建防抖查询函数
       if (props.debounce !== false) {
-        let wait = null;
-        if (props.debounce) {
-          wait = props.debounce.wait;
-        }
-        if (wait == null) {
-          wait = 500;
-        }
+        let wait = props.debounce?.wait || 500;
         autoSearch = _.debounce(doSearch, wait, props.debounce);
       }
     }
@@ -321,10 +315,9 @@ export default {
         const componentRef = getComponentRef(key);
         item.valueChange({ key, value, componentRef, ...getContextFn() });
       }
-      if (item.autoSearchTrigger === "change") {
+      if (!item.autoSearchTrigger || item.autoSearchTrigger === "change") {
         doAutoSearch();
       }
-      doAutoSearch();
     }
 
     const computedRules = computed(() => {

packages/fast-crud/src/types/list/assist.ts

@@ -1,7 +1,7 @@
 import { uiContext } from "../../ui";
 
-function antdvColspan(ui) {
-  return ui.type !== "antdv" ? {} : { labelCol: { span: 2 }, wrapperCol: { span: 21 } };
+function antdvColspan(ui, labelSpan) {
+  return ui.type !== "antdv" ? {} : { labelCol: { span: labelSpan }, wrapperCol: { span: 23 - labelSpan } };
 }
 
 /**
@@ -14,7 +14,21 @@ export default function () {
       //跨列
       form: {
         col: { span: 24 },
-        ...antdvColspan(ui)
+        ...antdvColspan(ui, 2)
+      }
+    },
+    colspan3: {
+      //跨列
+      form: {
+        col: { span: 24 },
+        ...antdvColspan(ui, 3)
+      }
+    },
+    colspan4: {
+      //跨列
+      form: {
+        col: { span: 24 },
+        ...antdvColspan(ui, 4)
       }
     }
   };

packages/fast-crud/src/use/use-compute.ts

@@ -147,7 +147,7 @@ export class AsyncComputeValue {
       async (value) => {
         //执行异步方法
         asyncRef.value = await this.asyncFn(value, getContextFn());
-        console.log("asyncRef.value geted", asyncRef.value);
+        console.log("asyncRef.value,get->", asyncRef.value);
       },
       { immediate: true }
     );

packages/fast-crud/src/use/use-merge.ts

@@ -1,12 +1,24 @@
 import _ from "lodash-es";
-
+import { isRef } from "vue";
+function isUnMergeable(srcValue) {
+  return srcValue != null && (srcValue instanceof UnMergeable || isRef(srcValue));
+}
+function isUnCloneable(value) {
+  return isUnMergeable(value) && !value.cloneable;
+}
 function merge(target, ...sources) {
+  /**
+   * 如果目标为不可合并对象，比如array、unMergeable、ref,则直接覆盖不合并
+   * @param objValue 被合并对象
+   * @param srcValue 覆盖对象
+   */
   function customizer(objValue, srcValue) {
+    // 如果被合并对象为数组，则直接被覆盖对象覆盖，只要覆盖对象不为空
     if (_.isArray(objValue) && srcValue != null) {
       return srcValue;
     }
 
-    if (srcValue != null && srcValue instanceof UnMergeable) {
+    if (isUnMergeable(srcValue)) {
       return srcValue;
     }
   }
@@ -22,9 +34,7 @@ function merge(target, ...sources) {
   }
   return _.mergeWith(target, ...sources, customizer);
 }
-function isUnCloneable(value) {
-  return value != null && value instanceof UnMergeable && !value.cloneable;
-}
+
 function cloneDeep(target) {
   if (isUnCloneable(target)) {
     return target;