crud组件插槽透传

Report-V3-TS/src/components/Base/Jsq-crud/src/Jsq-crud.vue

@@ -3,7 +3,7 @@
  * @Author: qianlishi
  * @Date: 2024-12-30 18:16:00
  * @LastEditors: qianlishi
- * @LastEditTime: 2025-01-12 22:03:10
+ * @LastEditTime: 2025-01-13 19:06:18
 -->
 <template>
   <div class="view-container">
@@ -12,14 +12,20 @@
     </div>
     <div class="view-container-right">
       <JsqSearchForm v-model="formModel" v-bind="getSearchFormOption" @toRestForm='toRestForm' @toQuery="toQuery"/>
-      <JsqButtons v-bind="getTableButtonsOptions" class="view-container-right-btn"/>
+      <JsqButtons v-bind="getTableButtonsOptions" class="view-container-right-btn" >
+        <template v-for="slot in tabBtnSlots" :key="slot.slotName" #[slot.slotName]>
+          <slot :name="slot.slotName"></slot>
+        </template>
+      </JsqButtons>
+    
       <JsqTable v-bind="getTableOptions" />
     </div>
   </div>
+
   <JsqDialog ref="dialogRef" v-bind='getDialogRecordingOptions' :api="getApiOptions" @refresh="toQuery"/>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, unref, useAttrs, computed, watch } from 'vue';
+  import { onMounted, ref, unref, useAttrs, useSlots, computed, watch } from 'vue';
   import { basicProps } from './props';
   import { CrudActionType, serachFormProps } from './types';
   import { deepMerge } from '@/utils';
@@ -52,6 +58,40 @@
   const emit = defineEmits(['register']);
 
   const propsRef = ref<Partial<CrudActionType>>({});
+
+      /**
+   * 插槽透传 父 -> 孙
+   * 规则：  1. 表格批量操作按钮以tabBtn-***开头
+   *        2. 搜索条件插槽以searchForm-***开头
+   *        3. 弹框新增编辑以 recordingForm-***开头 
+   */
+  const slots = useSlots()
+
+  const componentsSlots = computed(() => {
+    if (slots) {
+    return Object.keys(slots)
+        .map((t) => {
+          return { slotName: t, slot: slots[t] };
+      });
+    } 
+    return []
+  })
+
+  // 批量操作按钮插槽
+  const tabBtnSlots = computed(() => {
+    return unref(componentsSlots).filter(item => item.slotName.includes('tabBtn-'))
+  })
+
+  // 搜索条件表单插槽
+  const searchFormSlots = computed(() => {
+    return unref(componentsSlots).filter(item => item.slotName.includes('searchForm-'))
+  })
+
+  // 新增、编辑表单插槽
+  const recordingFormSlots = computed(() => {
+    return unref(componentsSlots).filter(item => item.slotName.includes('recordingForm-'))
+  })
+  
   // 将标签传递的属性与hooks传递的参数合并
   const getProps = computed(() => {
     return { ...props, ...attrs, ...(unref(propsRef) as any) };

Report-V3-TS/src/components/Base/Jsq-crud/src/components/Jsq-buttons/src/Jsq-buttons.vue

@@ -3,15 +3,19 @@
  * @Author: qianlishi
  * @Date: 2025-01-03 23:45:51
  * @LastEditors: qianlishi
- * @LastEditTime: 2025-01-12 21:33:34
+ * @LastEditTime: 2025-01-13 17:27:02
 -->
 <template>
   <n-space>
-    <n-button v-for="(item, index) in getSchema"
-      v-bind="getBindValue"
-      v-permission="item.permission" :key="index" :type="item.type" size="small" @click="item.click({ selectIds, selectSections })">
-      {{ item.label }}
-    </n-button>
+    <template v-for="(item, index) in getSchema">
+      <slot v-if="item.slotName" :name="item.slotName" :selectSections="selectSections" />
+      <n-button 
+        v-else
+        v-bind="getBindValue"
+        v-permission="item.permission" :key="index" :type="item.type" size="small" @click="item.click({ selectIds, selectSections })">
+        {{ item.label }}
+      </n-button>
+    </template>
   </n-space>
 </template>
 <script lang="ts" setup>

Report-V3-TS/src/views/system/fileManage/index.vue

@@ -3,11 +3,15 @@
  * @Author: qianlishi
  * @Date: 2024-12-08 17:38:28
  * @LastEditors: qianlishi
- * @LastEditTime: 2025-01-12 22:21:53
+ * @LastEditTime: 2025-01-13 17:23:17
 -->
 <template>
   <div class="view-container">
-    <JsqCrud @register="register" />
+    <JsqCrud @register="register">
+      <template #tabBtn-fileUpload>
+        <n-button class='111'>1111</n-button>
+      </template>
+    </JsqCrud>
   </div>
 </template>
 <script lang="ts" setup>
@@ -17,10 +21,6 @@
   import { useMessage } from 'naive-ui'
   
   const messages = useMessage()
-  // 新增
-  const addClick = () => {
-    toAdd()
-  }
 
   // 批量删除
   const removeAll = () => {
@@ -52,10 +52,10 @@
     document.body.removeChild(aux);
   }
 
-  const { rowsButtons } = getTableButtons({ addClick, removeAll })
+  const { rowsButtons } = getTableButtons({ removeAll })
   const { columns } = getTableColumns({ toCopyUrl, removeSingle, toDownLoad })
 
-  const [register, { toAdd, toRemoveAll, toRemove }] = useCrud({
+  const [register, { toRemoveAll, toRemove }] = useCrud({
     searchFormOption: {
       schemas: getFormSchemas({}).value,
     },

Report-V3-TS/src/views/system/fileManage/utils/schemas.ts

@@ -8,7 +8,7 @@
 import { computed, h } from 'vue';
 import { cloneDeep } from 'lodash-es';
 import { isObject } from '@/utils/is';
-import { NButton, NImage } from 'naive-ui'
+import { NImage } from 'naive-ui'
 import { editFormShow } from '@/enums/common'
 import { FormSchema } from '@/components/Base/Jsq-crud/src/components/Jsq-searchForm';
 import JsqTableAction from '@/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue';
@@ -47,17 +47,11 @@ export const getFormSchemas = ({ params }: Record<string, any>) => {
 
 
 // 批量操作
-export const getTableButtons = ({ addClick, removeAll }) => {
+export const getTableButtons = ({ removeAll }) => {
   const rowsButtons = computed(() => {
     return [
       {
-        label: '新增',
-        type: '',
-        permission: 'asd', // 权限嘛
-        plain: true,
-        click: () => {
-          addClick()
-        }
+        slotName: 'tabBtn-fileUpload'
       },
       {
         label: '删除',