AIoT前端基础组件文档

Appearance

Return to top
On this page

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

基础用法

模板名称

<template>
  <div style="height: 500px">
    <common-page-panel
    height="300"
    :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>


<template>
  <div style="height: 500px">
    <common-page-panel
    height="300"
    :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对象Objectfalse
formValues搜索项form表单元素列表，参数与form表单一样Arrayfalse
functionButtons功能按钮集合Arrayfalse
tableHeader表格头Arrayfalse
tableData表格数据Arrayfalse
tableAttrs表格属性Objectfalse
highlight是否高亮Booleanfalse
page页码信息Objectfalse

事件

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