企企通产品部V6

Appearance

On this page

按钮配置指南 ​

在配置列表按钮时，可以参考“采购申请”页面。列表按钮设计为可跨多个页面复用的功能，列表模板已经内置了这些功能，您只需根据具体需求传递 type 或配置 url 即可使用。 目前，内置的通用按钮功能包括（未来将根据实际情况进行补充）：

  • 新增
  • 导出
  • 导入
  • 列自定义
  • 帮助说明
  • 附件说明
  • 视频说明
  • 获取 ERP 数据
  • 推送到 ERP

代码示例 ​

请注意，所有的按钮组配置都需要在 buttonConfig 内进行配置。以下是一个配置示例：

vue
<template>
  <q-list-layout ref="listLayoutRef" :apiUrls="apiUrls" :pageData="pageData" @add-button-click="handleCreate"/>
</template>

<script lang="ts" setup>
import { srmI18n } from '@/utils/srmI18n'
import { reactive, ref } from 'vue'
import { GlobalListPageLayoutTypes, message } from '@qqt-product/ui'

const listLayoutRef = ref()
const apiUrls = reactive({
  columnsCode: 'purchaseRequestHeadList',
  excelCode: 'PurchaseRequestHeadExcel',
  list: '/demand/purchaseRequestHead/list',
  countTabsUrl: '/demand/purchaseRequestHead/counts',
})
// 新增方法 弹窗回调事件
const handleCreate = ({ row }: { row: GlobalListPageLayoutTypes.CurrentRow }) => {
  console.log(row)
  setCurrentRow(row)
  const id = (row.id as string) || ''
router.push({ path: `/srm/demand/purchase/PurchaseRequestHeadEdit/${id}`, query: { t: +new Date() } })
}

const pageData = reactive<GlobalListPageLayoutTypes.PageData>({
  buttonConfig: { // 按钮组配置
    buttons: [
      {
        label: srmI18n('i18n_title_add', '新增'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:add',
        args: {
          businessType: 'purchaseRequest',
        },
        icon: {
          type: 'icon-Q-add',
        },
        attrs: {
          type: 'primary',
        },
        type: 'add',
      },
      {
        authorityCode: 'purchaseRequest#purchaseRequestHead:export',
        label: srmI18n('i18n_title_export', '导出'),
        args: {
          // fileName: '导出文件名字', // 默认取当前路由title
          url: '/demand/purchaseRequestHead/exportXls', // 原来的 exportXlsUrl
        },
        icon: {
          type: 'icon-Q-export',
        },
        type: 'export',
      },
      {
        label: srmI18n('i18n_title_improt', '导入'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:import',
        icon: 'import',
        args: {
          excelCode: 'PurchaseRequestHeadExcel', // excelCode
        },
        type: 'import',
      },
      {
        label: srmI18n('i18n_alert_SMWWWWF_b44eb4e2', '获取ERP数据'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:getPurchaseRequestByERP',
        args: {
          url: '/demand/purchaseRequestHead/getPurchaseRequestByERP',
        },
        type: 'data-by-ERP',
      },
      {
        label: srmI18n('i18n_btn_YduWWW_211799ec', '推送到ERP'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:pushPurchaseRequestData',
        args: {
          url: '/demand/purchaseRequestHead/pushPurchaseRequestData',
        },
        type: 'data-to-ERP',
      },
      {
        label: srmI18n('i18n_title_listCustom', '列自定义'),
        icon: {
          type: 'icon-Q-setting',
        },
        type: 'setting',
      },
      {
        label: srmI18n('i18n_title_helpText', '帮助说明'),
        icon: {
          type: 'icon-Q-help-text',
        },
        type: 'help-text',
      },
      {
        label: srmI18n('i18n_title_attachmentExplain', '附件说明'),
        icon: {
          type: 'icon-Q-attachment-text',
        },
        type: 'attachment-text',
      },
      {
        label: srmI18n('i18n_alert_KNlR_40eee965', '视频说明'),
        icon: {
          type: 'icon-Q-video-text',
        },
        type: 'video-text',
      },
    ],
  }
  })

在这个示例中，我们定义了一个包含多个按钮的 buttonConfig 对象。每个按钮都有一个 type 属性，用于指定按钮的功能类型。您可以根据需要添加其他配置属性，以自定义按钮的行为和外观。

效果截图预览 ​

image-20230802104337700

自定义按钮事件 ​

要实现自定义选项按钮事件，仅需配置 click 函数。此函数的参数将返回当前按钮的信息。 请注意，如果按钮是通用功能按钮且已经配置了 type，则再配置 click 函数将意味着不执行列表模板内置的函数，而是执行您自定义的 click 函数。例如，下面的代码展示了如何重置新增方法：

代码展示 ​

js
buttonConfig: {
    buttons: [
     {
        label: srmI18n('i18n_btn_YduXL_bf0b657f', '推送到商城'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:pushPurchaseRequestDataToMall',
        icon: 'arrow-up',
        click: pushDataToMall,
      }
    ]
 }
 function pushDataToMall(buttonItem) {
  ...
}

// 通用功能新增，自定义事件
 buttonConfig: {
    buttons: [
      {
        label: srmI18n('i18n_title_add', '新增'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:add',
        args: {
          businessType: 'purchaseRequest',
        },
        icon: {
          type: 'icon-Q-add',
        },
        type: 'add',
        click(buttonItem){
        	// 走下面自定义事件，列表模板将不触发add-button-click方法
        	...
        }
      },
    ]
 }

按钮-置灰 ​

按钮组以及后面介绍的选项组，都是只能配置置灰功能，按钮显隐由权限码控制

disabled 返回可以是方法或者是布尔值

代码展示

json
buttonConfig: {
    buttons: [
      {
        label: srmI18n('i18n_title_add', '新增'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:add',
        args: {
          businessType: 'purchaseRequest',
        },
        icon: {
          type: 'icon-Q-add',
        },
        type: 'add',
        // disabled: true,
       	disabled(buttonItem) {
          return true
        },
      },
    ]
 }

API ​

参数说明类型默认值
label按钮文字string
type按钮类型，通用按钮时必填, 如：type：‘add’string
attrsant-design 按钮 Button 属性都可以配置object
args参数，给功能使用，比如请求的 url 等object
authorityCode权限码string
disabled置灰boolean| function
click点击事件function
handleBefore点击事件前钩子Promise
handleAfter点击事件后钩子Promise

TS 类型-ButtonItem ​

typescript
export interface ButtonItem {
  label?: string;
  icon?: string | ObjectMap;
  type?: string;
  attrs?: ObjectMap;
  args?: {
    url?: string;
    [key: string]: unknown;
  };
  authorityCode?: string;
  disabled?: (<T>(args: T) => boolean | void) | boolean;
  click?: (args: ButtonItem) => void;
  handleBefore?: <T>(args: T) => Promise<T> | void;
  handleAfter?: <T>(args: T) => Promise<T> | void;
}

工具栏按钮(列表右上按钮) ​

工具栏按钮配置参数跟上面的按钮一致，为了统一建议用有意义图标，

使用示列代码

js
toolsConfig: {
  buttons: [
    {
      icon: {
        type: "icon-Q-card",
      },
      attrs: {
        shape: "circle",
      },
      type: "zoom",
      click: () => {
        toggleCardMode.value = !toggleCardMode.value;
        pageData.onlyShowNav = true;
      },
    },
  ];
}