common-ui/docs/components/page-panel/base.md

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

基础用法

:::demo

<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改变触发后的回调事件	--