修改pageWrapperSearch.vue 自定义按钮

使用方法参考project/Project/QueryForm

src/components/Search/PageWrapperSearch.vue

@@ -9,8 +9,10 @@ import {
   useSlots,
   withModifiers,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  PropType
 } from 'vue'
+import type { Component } from 'vue'
 
 import {
   ElRow,
@@ -67,7 +69,18 @@ export default defineComponent({
       type: Number,
       default: 6
     },
-    labelWidth: [Number, String]
+    labelWidth: [Number, String],
+    extraButtons: {
+    type: Array as PropType<Array<{
+      text: string
+      type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+      plain?: boolean
+      round?: boolean
+      icon?: Component
+      onClick: () => void
+    }>>,
+    default: () => []
+  }
   },
   setup(props, { emit, attrs, slots }) {
     let observer
@@ -145,7 +158,19 @@ export default defineComponent({
             class: 'buttons-space'
           },
           () => [
-
+            ...props.extraButtons.map(btn => h(
+              ElButton,
+              {
+                type: btn.type,
+                plain: btn.plain,
+                round: btn.round,
+                onClick: btn.onClick
+              },
+              () => [
+                btn.icon ? h(ElIcon, null, () => [h(btn.icon as Component)]) : null,
+                btn.text
+              ]
+            )),
             h(
               ElButton,
               {
@@ -155,7 +180,10 @@ export default defineComponent({
                   emit('reset', ElFormRef.value)
                 }
               },
-              () => '重置'
+              () => [
+                h(ElIcon, null, () => h(Refresh)),
+                '重置'
+              ]
             ),
             h(
               ElButton,
@@ -166,7 +194,10 @@ export default defineComponent({
                   emit('search')
                 }
               },
-              () => '查询'
+               () => [
+                h(ElIcon, null, () => h(Search)),
+                '搜索'
+              ]
             ),
             cols.length > max.value ? h(
               'div',

src/views/project/Project/QueryForm.vue

@@ -2,6 +2,14 @@
 import { computed,ref,watch } from 'vue'
 import type { FormInstance } from 'element-plus'
 import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
+import {
+  Check,
+  Delete,
+  Edit,
+  Message,
+  Search,
+  Star,
+} from '@element-plus/icons-vue'
 // import { useDict } from '@/utils/dict'
 // import { listDept } from '@/api/system/dept'// 部门
 
@@ -40,7 +48,6 @@ function onReset(formRef: FormInstance) {
   emit('reset', formRef)
 }
 
-
 </script>
 
 <template>
@@ -64,6 +71,41 @@ function onReset(formRef: FormInstance) {
       />
     </el-form-item>
   </page-wrapper-search>
+
+
+
+    <!-- <page-wrapper-search
+      :model="queryForm"
+      :extraButtons="[
+        {
+          text: '导出',
+          icon: Edit,
+          type: 'success',
+          onClick: handleExport
+        },
+        {
+          text: '打印',
+          type: 'warning',
+          onClick: handlePrint
+        }
+      ]"
+      @search="onSearch"
+      @reset="onReset">
+      <el-form-item label="项目名称" prop="proName">
+        <el-input
+            v-model="queryForm.proName"
+            placeholder="请输入项目名称"
+            clearable
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="note">
+        <el-input
+            v-model="queryForm.note"
+            placeholder="请输入备注"
+            clearable
+        />
+      </el-form-item>
+    </page-wrapper-search> -->
 </template>
 
 <style scoped>