feat: rowHandle按钮根据dropdown的配置来判断是否折叠

#27

docs/zh/api/crud-options/rowHandle.md

@@ -8,10 +8,15 @@
 * 说明：显示或隐藏查询框
 * 类型：Boolean
 * 默认：`true`
+* 示例： [antdv版](http://fast-crud.docmirror.cn/antdv/#/crud/feature/hide)
+  [element版](http://fast-crud.docmirror.cn/element/#/crud/feature/hide)
+
 
 ## buttons
 * 说明：按钮配置
 * 类型：Object
+* 示例： [antdv版](http://fast-crud.docmirror.cn/antdv/#/crud/feature/dropdown)
+  [element版](http://fast-crud.docmirror.cn/element/#/crud/feature/dropdown)
 * 默认：
 ```json5
 { //crudOptions
@@ -20,7 +25,8 @@
       view:{
           ...FsButton, // FsButton的配置，可以修改文本、颜色，也可以修改成图标按钮、纯文本按钮等
           order:1, //排序号，越小则排前面，默认值1
-          show:true,
+          show:true, 
+          dropdown:false,//是否折叠此按钮，当配置为true，将会收起到dropdown中
           //点击事件,点击此按钮会触发此方法
           //此处的查看按钮如果不配置默认打开查看对话框
           click:(context)=>{} 
@@ -34,22 +40,30 @@
 ```
 
 ## dropdown
-* 说明：按钮折叠配置，当按钮数多于`dropdown.atLeast`的个数时，将会被折叠
+* 说明：按钮折叠配置，当按钮配置了dropdown=true时，将会被折叠
 * 类型：Object
+* 示例： [antdv版](http://fast-crud.docmirror.cn/antdv/#/crud/feature/dropdown)
+  [element版](http://fast-crud.docmirror.cn/element/#/crud/feature/dropdown)
 ```json5
 { // rowHandle.dropdown
   dropdown: {
-    atLeast: 2, //当按钮大于2个时，多余的按钮将会被折叠
+    atLeast: 2, //当按钮大于2个时，多余的按钮将会被折叠,[注意：此参数将在1.x版中废弃]
     more: {...FsButton}//'更多'按钮的配置
     //此处支持el-dropdown,a-dropdown的配置
   }
 }
 ```
 
+::: warn
+`dropdown.atLeast` 将在1.x版中废弃
+:::
+
 
 ## group
 * 说明：按钮分组配置
 * 类型：Object
+  [antdv版](http://fast-crud.docmirror.cn/antdv/#/crud/form/group)
+  [element版](http://fast-crud.docmirror.cn/element/#/crud/form/group)
 ```json5
 { // rowHandle.dropdown
   group: {

packages/fast-crud/src/components/crud/fs-row-handle.vue

@@ -1,18 +1,23 @@
 <template>
   <div class="fs-row-handle">
     <template v-for="(item, index) in computedHandleBtns" :key="index">
-      <fs-button v-if="item.show !== false" class="row-handle-btn" v-bind="item" @click.stop="doClick(item)" />
+      <fs-button
+        v-if="item.show !== false && !isDropdownBtn(item, index)"
+        class="row-handle-btn"
+        v-bind="item"
+        @click.stop="doClick(item)"
+      />
     </template>
     <!-- 下拉按钮菜单 -->
-    <span v-if="computedDropdownBtns.length > 0" class="row-handle-btn fs-handle-row-dropdown">
+    <span v-if="hasDropdownBtn" class="row-handle-btn fs-handle-row-dropdown">
       <component :is="$fsui.dropdown.name" v-bind="computedDropdownBinding">
         <fs-button v-bind="dropdown.more" />
         <template #[$fsui.dropdown.slotName]>
           <component :is="$fsui.dropdownMenu.name" v-bind="$fsui.dropdownMenu.command(doDropdownItemClick)">
-            <template v-for="(item, index) in computedDropdownBtns" :key="index">
+            <template v-for="(item, index) in computedHandleBtns" :key="index">
               <component
                 :is="$fsui.dropdownItem.name"
-                v-if="item.show !== false"
+                v-if="item.show !== false && isDropdownBtn(item, index)"
                 :[$fsui.dropdownItem.command]="item.key"
               >
                 <div class="fs-row-handle-dropdown-item" v-bind="item">
@@ -107,8 +112,9 @@ export default defineComponent({
       const row = props.scope[ui.tableColumn.row];
       return { ...props.scope, index, row };
     });
+
     //const computeProps = { value: props };
-    const computedAllHandleBtns = computed(() => {
+    const computedHandleBtns = computed(() => {
       let mergedBtns = null;
       if (computeProps.value.active == null || computeProps.value.active === "default") {
         const defBtns = {
@@ -154,27 +160,35 @@ export default defineComponent({
         computeProps.value.dropdown == null ||
         computeProps.value.dropdown.atLeast == null ||
         computeProps.value.dropdown.atLeast <= 0 ||
-        computedAllHandleBtns.value.length <= computeProps.value.dropdown.atLeast
+        computedHandleBtns.value.length <= computeProps.value.dropdown.atLeast
       ) {
         return 0;
       }
       return computeProps.value.dropdown.atLeast || 0;
     });
-    const computedHandleBtns = computed(() => {
-      if (computedDropdownAtLeast.value <= 0) {
-        return computedAllHandleBtns.value;
+    function isDropdownBtn(item, index) {
+      if (item.dropdown === true) {
+        return true;
       }
-      return computedAllHandleBtns.value.slice(0, computedDropdownAtLeast.value);
-    });
-    const computedDropdownBtns = computed(() => {
-      if (computedDropdownAtLeast.value <= 0) {
-        return [];
+      if (computedDropdownAtLeast.value > 0 && computedDropdownAtLeast.value < index) {
+        return true;
+      }
+      return false;
+    }
+    const hasDropdownBtn = computed(() => {
+      let index = 0;
+      for (const item of computedHandleBtns.value) {
+        const is = isDropdownBtn(item, index);
+        if (is) {
+          return true;
+        }
+        index++;
       }
-      return computedAllHandleBtns.value.slice(computedDropdownAtLeast.value);
+      return false;
     });
 
     function doDropdownItemClick($event) {
-      for (let btn of computedAllHandleBtns.value) {
+      for (let btn of computedHandleBtns.value) {
         if ($event === btn.key) {
           doClick(btn);
           return;
@@ -190,12 +204,12 @@ export default defineComponent({
     });
 
     return {
-      computedAllHandleBtns,
+      hasDropdownBtn,
       computedHandleBtns,
-      computedDropdownBtns,
       doDropdownItemClick,
       computedDropdownAtLeast,
       doClick,
+      isDropdownBtn,
       computedDropdownBinding
     };
   }