# CommonPage 搜索+表格+页脚 公共模块

### 基础用法
:::demo
```vue

<template>
  <div style="height: 500px">
    <common-page-panel
    :search-params="pageConfig.searchParams"
    :form-values="pageConfig.formValues"
    :table-header="pageConfig.tableHeader"
    :function-buttons="pageConfig.btns"
    :table-data="pageConfig.tableData"
    :page="pageConfig.page"
  ></common-page-panel>
  </div>

  <!-- 弹窗 -->
  <common-dialog
    v-if="showDialog"
    title="新增项"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <common-form :forms="forms"></common-form>
  </common-dialog>

  <!-- 抽屉 -->
  <common-drawer v-if="showDrawer" title="批量导入">
    <common-form :forms="forms"></common-form>
  </common-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const pageConfig = ref<any>({
  searchParams: [
    {
      label: '模板名称',
      name: 'specIdOrName',
      type: 'input',
      value: '',
      col: 6,
      attrs: {
        clearable: true
      }
    }
  ],
  btns: [
    // eslint-disable-next-line no-use-before-define
    { label: '批量删除', name: 'batchDelete', onClick: batchDelete },
    // eslint-disable-next-line no-use-before-define
    { label: '批量导入', name: 'batchImport', onClick: batchImport },
    // eslint-disable-next-line no-use-before-define
    { label: '新增', name: 'batchImport', onClick: createItem }
  ],
  formValues: {
    specIdOrName: ''
  },
  tableHeader: [
    { label: '姓名', name: 'name', width: '100' },
    { label: '年龄', name: 'age', 'min-width': '100' }
  ],
  tableData: [],
  page: {
    pageSize: 10,
    current: 1,
    total: 0
  }
});

const showDialog = ref<any>(false);

function batchDelete() {
  console.log('delete');
}

// 新增
function createItem() {
  showDialog.value = true;
}

function closeDialog() {
  showDialog.value = false;
}

function confirmDialog() {
  console.log('确定');
}

// 弹窗项
const forms = ref<any>([
  {
    label: '姓名',
    name: 'name',
    type: 'input',
    span: 12,
    value: '',
    attrs: {
      clearable: true,
      placeholder: '请输入姓名'
    }
  },
  {
    label: '年龄',
    name: 'age',
    type: 'input',
    span: 12,
    value: '',
    attrs: {
      clearable: true,
      placeholder: '请输入年龄',
      rules: []
    }
  }
]);

// 导入
const showDrawer = ref<any>(false);
function batchImport() {
  showDrawer.value = true;
}
</script>
```
:::


### 配置参数
| 参数      | 说明        | 类型    | 是否必须 |
| :------- | :------------ | :------- | :------- |
| searchParams | 如果存在搜索项时，为搜索项return出来的key value对象 | Object | false  |
| formValues | 搜索项form表单元素列表，参数与form表单一样 | Array | false  |
| functionButtons | 功能按钮集合 | Array | false  |
| tableHeader | 表格头 | Array | false  |
| tableData | 表格数据 | Array | false  |
| tableAttrs | 表格属性 | Object | false  |
| highlight | 是否高亮 | Boolean | false  |
| page | 页码信息 | Object | false  |



### 事件

| 事件名称   | 说明       | 回调     |
| :--------| :-------- | :--------------- | 
| doSearch |  点击搜索触发回调事件 | -- |
| clearSearch |  清除搜索项 | -- |
| handleSelectionChange |  点击新增时，触发回调函数 | -- |
| currentChange | 表格当前行点击时触发的回调事件 | -- |
| changeEvent |  搜索栏位表单元素value改变触发后的回调事件 | -- |