fix: 增加buttonsPosition=[default,bottom]配置

#63

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

@@ -7,11 +7,11 @@
         </div>
         <div class="fs-crud-search">
           <fs-search
-              ref="searchRef"
-              v-bind="search"
-              :slots="computedSearchSlots"
-              @search="onSearchSubmit"
-              @reset="onSearchReset"
+            ref="searchRef"
+            v-bind="search"
+            :slots="computedSearchSlots"
+            @search="onSearchSubmit"
+            @reset="onSearchReset"
           />
         </div>
         <div class="fs-header-middle">
@@ -20,22 +20,22 @@
 
         <div v-if="actionbar && actionbar.show !== false" class="fs-crud-actionbar">
           <slot name="actionbar-left"></slot>
-          <fs-actionbar v-bind="actionbar"/>
+          <fs-actionbar v-bind="actionbar" />
           <slot name="actionbar-right"></slot>
         </div>
 
         <div v-if="toolbar && toolbar.show !== false" class="fs-crud-toolbar">
           <slot name="toolbar-left"></slot>
           <fs-toolbar
-              v-bind="toolbar"
-              :slots="computedToolbarSlots"
-              :search="search.show"
-              :compact="toolbar.compact"
-              :columns="table.columns"
-              @update:search="$emit('update:search', $event)"
-              @update:compact="$emit('update:compact', $event)"
-              @update:columns="$emit('update:columns', $event)"
-              @refresh="$emit('refresh')"
+            v-bind="toolbar"
+            :slots="computedToolbarSlots"
+            :search="search.show"
+            :compact="toolbar.compact"
+            :columns="table.columns"
+            @update:search="$emit('update:search', $event)"
+            @update:compact="$emit('update:compact', $event)"
+            @update:columns="$emit('update:columns', $event)"
+            @refresh="$emit('refresh')"
           />
           <slot name="toolbar-right"></slot>
         </div>
@@ -48,23 +48,23 @@
     <slot></slot>
     <!-- table -->
     <fs-table
-        ref="tableRef"
-        class="fs-crud-table"
-        v-bind="computedTable"
-        :row-handle="rowHandle"
-        :data="data"
-        :cell-slots="computedCellSlots"
+      ref="tableRef"
+      class="fs-crud-table"
+      v-bind="computedTable"
+      :row-handle="rowHandle"
+      :data="data"
+      :cell-slots="computedCellSlots"
     />
 
     <template #box>
       <div ref="innerWrapperRef" class="fs-form-wrapper-container" :class="{ 'fs-form-inner-wrapper': isFormInner }">
         <!-- 编辑对话框 -->
         <fs-form-wrapper
-            ref="formWrapperRef"
-            :slots="computedFormSlots"
-            :inner-wrapper="innerWrapperRef"
-            @inner-change="onFormInnerChange"
-            @value-change="$emit('form-value-change', $event)"
+          ref="formWrapperRef"
+          :slots="computedFormSlots"
+          :inner-wrapper="innerWrapperRef"
+          @inner-change="onFormInnerChange"
+          @value-change="$emit('form-value-change', $event)"
         />
       </div>
     </template>
@@ -77,7 +77,7 @@
             <slot name="pagination-left"></slot>
           </div>
           <div class="fs-pagination">
-            <component :is="$fsui.pagination.name" v-if="pagination.show !== false" v-bind="pagination"/>
+            <component :is="$fsui.pagination.name" v-if="pagination.show !== false" v-bind="pagination" />
           </div>
           <div class="fs-pagination-right">
             <slot name="pagination-right"></slot>
@@ -89,13 +89,13 @@
   </fs-container>
 </template>
 <script>
-import {defineComponent, computed, provide, ref, toRef, nextTick, onMounted, watch} from "vue";
+import { defineComponent, computed, provide, ref, toRef, nextTick, onMounted, watch } from "vue";
 import _ from "lodash-es";
 import traceUtil from "../utils/util.trace";
-import {uiContext} from "../ui";
-import {useMerge} from "../use/use-merge";
+import { uiContext } from "../ui";
+import { useMerge } from "../use/use-merge";
 
-const {merge} = useMerge();
+const { merge } = useMerge();
 
 function useProviders(props, ctx) {
   provide("get:columns", () => {
@@ -132,7 +132,7 @@ function useSearch(props, ctx) {
 
   const getSearchFormData = () => {
     if (searchRef.value) {
-      searchFormData.value = searchRef.value.getForm()
+      searchFormData.value = searchRef.value.getForm();
     }
     return searchFormData.value;
   };
@@ -144,7 +144,7 @@ function useSearch(props, ctx) {
    *    isMerge:false 是否与原有form值合并,
    * }
    */
-  function setSearchFormData({form, mergeForm = false}) {
+  function setSearchFormData({ form, mergeForm = false }) {
     const baseForm = {};
     if (mergeForm) {
       _.merge(baseForm, searchFormData.value, form);
@@ -181,7 +181,7 @@ function slotFilter(ctxSlots, keyPrefix) {
   return slots;
 }
 
-function useFixedHeight(props, ctx, {tableRef, containerRef}) {
+function useFixedHeight(props, ctx, { tableRef, containerRef }) {
   const ui = uiContext.get();
   if (ui.table.hasMaxHeight(props.table)) {
     return {};
@@ -225,21 +225,21 @@ function useFixedHeight(props, ctx, {tableRef, containerRef}) {
     await nextTick();
     watchBodyHeightChange();
   });
-  return {maxHeightRef, computeBodyHeight};
+  return { maxHeightRef, computeBodyHeight };
 }
 
 function useTable(props, ctx) {
   const ui = uiContext.get();
   const tableRef = ref();
   const containerRef = ref();
-  const {maxHeightRef, computeBodyHeight} = useFixedHeight(props, ctx, {tableRef, containerRef});
+  const { maxHeightRef, computeBodyHeight } = useFixedHeight(props, ctx, { tableRef, containerRef });
   const computedTable = computed(() => {
     // antdv naive 高度自适应， 如果用户有配置scroll，则优先使用用户配置的
     let fixedHeight = {};
     if (maxHeightRef?.value != null) {
       fixedHeight = ui.table.buildMaxHeight(maxHeightRef.value);
     }
-    return _.merge(fixedHeight, {...ctx.attrs,...props.table});
+    return _.merge(fixedHeight, { ...ctx.attrs, ...props.table });
   });
 
   const computedToolbar = toRef(props, "toolbar");
@@ -260,7 +260,7 @@ function useTable(props, ctx) {
   const formWrapperRef = ref();
 
   const computedClass = computed(() => {
-    const clazz = {compact: props.toolbar.compact !== false};
+    const clazz = { compact: props.toolbar.compact !== false };
     if (props.customClass) {
       clazz[props.customClass] = true;
     }

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="fs-search-col fs-search-btns">
+    <component :is="$fsui.formItem.name">
+      <template v-for="(item, index) in buttons" :key="index">
+        <fs-button v-if="item.show" v-bind="item" @click="item.click()" />
+      </template>
+    </component>
+  </div>
+</template>
+<script>
+export default {
+  name: "FsSearchButtons",
+  inheritAttrs: false,
+  props: {
+    buttons: {
+      type: Object
+    }
+  }
+};
+</script>

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

@@ -50,25 +50,21 @@
                     </component>
                   </component>
                 </template>
+
+                <div v-if="slots['search-middle']" class="fs-search-col fs-search-middle">
+                  <component :is="$fsui.formItem.name">
+                    <fs-slot-render :slots="slots['search-middle']" :scope="{ form }" />
+                  </component>
+                </div>
+                <fs-search-buttons v-if="buttonsPosition === 'default'" :buttons="computedButtons"></fs-search-buttons>
+                <div v-if="slots['search-right']" class="fs-search-col fs-search-right">
+                  <component :is="$fsui.formItem.name">
+                    <fs-slot-render :slots="slots['search-right']" :scope="{ form }" />
+                  </component>
+                </div>
               </component>
             </div>
-            <div v-if="slots['search-middle']" class="fs-search-col fs-search-middle">
-              <component :is="$fsui.formItem.name">
-                <fs-slot-render :slots="slots['search-middle']" :scope="{ form }" />
-              </component>
-            </div>
-            <div class="fs-search-col fs-search-btns">
-              <component :is="$fsui.formItem.name">
-                <template v-for="(item, index) in computedButtons" :key="index">
-                  <fs-button v-if="item.show" v-bind="item" @click="item.click()" />
-                </template>
-              </component>
-            </div>
-            <div v-if="slots['search-right']" class="fs-search-col fs-search-right">
-              <component :is="$fsui.formItem.name">
-                <fs-slot-render :slots="slots['search-right']" :scope="{ form }" />
-              </component>
-            </div>
+            <fs-search-buttons v-if="buttonsPosition === 'bottom'" :buttons="computedButtons"></fs-search-buttons>
           </div>
 
           <div v-if="computedIsMultiLine" class="fs-search-action">
@@ -92,13 +88,14 @@ import { useCompute } from "../../use/use-compute";
 import { uiContext } from "../../ui";
 import { useI18n } from "../../locale";
 import logger from "../../utils/util.log";
-
+import FsSearchButtons from "./buttons.vue";
 import { Constants } from "../../utils/util.constants";
 /**
  * 查询框组件
  */
 export default {
   name: "FsSearch",
+  components: { FsSearchButtons },
   inheritAttrs: false,
   props: {
     /**
@@ -128,6 +125,13 @@ export default {
     buttons: {
       type: Object
     },
+    /**
+     * 按钮位置， default,bottom,right
+     */
+    buttonsPosition: {
+      type: String,
+      default: "default"
+    },
     /**
      * 点击重置后是否立即触发查询
      */
@@ -393,7 +397,7 @@ export default {
     };
 
     const onInput = (item) => {
-      console.log("value input",item.key,item)
+      console.log("value input", item.key, item);
       if (item.autoSearchTrigger == null || item.autoSearchTrigger === "input") {
         doAutoSearch();
       }
@@ -406,7 +410,7 @@ export default {
 
     function onValueChanged(value, item) {
       const key = item.key;
-      console.log("value changed",key,value)
+      console.log("value changed", key, value);
       _.set(form, key, value);
       if (item.valueChange) {
         const key = item.key;

packages/fast-crud/src/d.ts/expose.ts

@@ -67,6 +67,11 @@ export type CrudExpose = {
    * @param context = {...formWrapper.open的自定义参数}
    */
   openDialog: (context) => Promise<void>;
+
+  /**
+   *  获取查询组件ref
+   */
+  getSearchRef: () => any;
   /**
    * 获取查询表单数据
    * @param context

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

@@ -21,7 +21,7 @@ export interface CrudOptions {
   };
   table?: {
     //列表数据变化事件
-    onDataChange:Function,
+    onDataChange: Function;
   };
   columns?: {};
   data?: [];

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

@@ -126,7 +126,7 @@ function useEditable({ crudExpose }) {
           // do nothing
         } else {
           const rowData = row.getRowData(index);
-          await crudBinding.value.request.delRequest({row: rowData});
+          await crudBinding.value.request.delRequest({ row: rowData });
           crudExpose.doRefresh();
         }
       }
@@ -223,6 +223,12 @@ export function useExpose(props: UseExposeProps): { expose: CrudExpose; crudExpo
     setSearchFormData(context: { form: any; mergeForm?: boolean }) {
       crudRef.value.setSearchFormData(context);
     },
+    /**
+     * 获取search组件ref
+     */
+    getSearchRef() {
+      return crudRef.value.getSearchRef();
+    },
     async doRefresh() {
       let page;
       if (crudBinding.value.pagination) {