列表选项配置指南

在配置列表选项时，可以参考“采购申请”页面。其使用和配置与按钮配置相似，但存在一些差异，特别是在返回参数方面。

通用功能说明

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

编辑
查看
删除
记录
作废
复制
沟通 自定义类型：custom 除了上述通用功能外，我们还提供了一个自定义类型 custom，以便快速配置简单的弹窗确认功能。confirmAttrs 是一个对象，它继承自 ant-design 的 Modal 组件参数。有关详细信息，请参阅Ant Design Vue 的 Modal 组件文档。如果 confirmAttrs 为空，弹窗的信息将默认使用当前选项的标题来构造确认弹窗的 title 和 content。请注意，如果您在 confirmAttrs 中配置了 onOk 方法，它将覆盖原有的请求发送逻辑。

json

{
        // 自定义
        type: 'custom',
        title: srmI18n('i18n_title_disable', '禁用'),
        authorityCode: 'forecastWhitelist#purchaseForecastWhitelist:disable',
        args: {
          url: '/forecast/purchaseForecastWhitelist/enable',
          // params 对象或者方法
          params({ row }) {
            return {
              id: row.id,
            }
          },
          // 是否需要弹窗确认
          confirm: true,
          //继承ant-design - Modal的参数为 object 参考https://www.antdv.com/components/modal-cn/#modal-method
          confirmAttrs: {
            title: srmI18n('i18n_title_confirmTodisable', '确认禁用'),
            content: srmI18n('i18n_title_disableSelecteData', '是否禁用选中数据?'),
            width: 500,
          },
        }
     },

代码展示

注意所有的按钮组配置，都需要在 optionConfig 数组内配置

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 type { GlobalListPageLayoutTypes } from "@qqt-product/ui";
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";
import { useRouter } from "vue-router";
const { setCurrentRow } = useGlobalStoreWithDefaultValue();
const router = useRouter();

const listLayoutRef = ref();
const apiUrls = reactive({
  columnsCode: "purchaseRequestHeadList",
  excelCode: "PurchaseRequestHeadExcel",
  list: "/demand/purchaseRequestHead/list",
  countTabsUrl: "/demand/purchaseRequestHead/counts",
});
// 新增
const handleCreate = ({
  row,
}: {
  row: GlobalListPageLayoutTypes.CurrentRow;
}) => {
  setCurrentRow(row);
  router.push({
    path: "/srm/demand/purchase/PurchaseRequestHeadEdit",
    query: { t: +new Date() },
  });
};

// 编辑
const handleEdit = (
  payload: GlobalListPageLayoutTypes.ListOptionsEventParams
) => {
  setCurrentRow(payload.row);
  router.push({ path: "/srm/demand/purchase/PurchaseRequestHeadEdit" });
};
// 查看
const handleView = (
  payload: GlobalListPageLayoutTypes.ListOptionsEventParams
) => {
  setCurrentRow(payload.row);
  router.push({ path: "/srm/demand/purchase/PurchaseRequestHeadDetail" });
};

// 页面配置
const pageData = reactive<GlobalListPageLayoutTypes.PageData>({
  optionConfig: {
    options: [
      {
        type: "view",
        title: srmI18n("i18n_title_view", "查看"),
        authorityCode: "purchaseRequest#purchaseRequestHead:view",
        click: handleView,
      },
      {
        type: "edit",
        title: srmI18n("i18n_title_edit", "编辑"),
        authorityCode: "purchaseRequest#purchaseRequestHead:edit",
        click: handleEdit,
      },
      {
        title: srmI18n("i18n_menu_ku_9fac3", "作废"),
        authorityCode: "purchaseRequest#purchaseRequestHead:cancel",
        type: "invalid",
        args: {
          url: "/demand/purchaseRequestHead/cancel",
        },
        disabled: showCancelCondition,
      },
      {
        type: "delete",
        title: srmI18n("i18n_title_delete", "删除"),
        authorityCode: "purchaseRequest#purchaseRequestHead:delete",
        args: {
          url: "/demand/purchaseRequestHead/delete",
        },
      },
      {
        type: "record",
        title: srmI18n("i18n_title_colunmRecord", "记录"),
      },
      {
        type: "chat",
        title: srmI18n("i18n_title_communicate", "沟通"),
        args: {
          moduleType: "PurchaseEnquiry", // 原来的type
          recordKey: "enquiryNumber", // enquiryNumber 为 row 的key
        },
      },
      {
        type: "copy",
        title: srmI18n("i18n_title_copy", "复制"),
        authorityCode: "purchaseRequest#purchaseRequestHead:copy",
        args: {
          url: "/demand/purchaseRequestHead/copy",
        },
      },
    ],
  },
});
function showCancelCondition({ row }) {
  if (
    row.requestStatus == "4" ||
    (row.requestStatus == "0" &&
      (row.auditStatus == "2" || row.auditStatus == "3"))
  ) {
    return false;
  } else {
    return true;
  }
}
</script>

效果截图预览

自定义选项按钮事件

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

代码展示

optionConfig: {
    options: [
       {
        type: 'eabled',
        title: srmI18n('i18n_title_enable', '启用'),
        click: handleEnabled,
        disabled: ({ row }) => row.status == 'enabled',
        authorityCode: 'barcode#template:enable',
      },
    ]
 }
 function handleEnabled(payload: GlobalListPageLayoutTypes.ListOptionsEventParams) {
 	// payload.row
  	//...
}

// 通用功能新增，自定义事件
 optionConfig: {
    options: [
    	{
        type: 'edit',
        title: srmI18n('i18n_title_edit', '编辑'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:edit',
        click(payload: GlobalListPageLayoutTypes.ListOptionsEventParams){
        	// 自定义点击事件处理逻辑
    		console.log('自定义点击事件', buttonInfo);
        },
        disabled: showEditCondition,
      }
    ]
 }

在这个例子中，当点击新增按钮时，将不会触发列表模板的默认新增行为，而是执行您自定义的 click 函数。

按钮-置灰

只能配置置灰功能，选项按钮显隐由权限码控制

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

代码展示

optionConfig: {
    options: [
      {
        title: srmI18n('i18n_menu_ku_9fac3', '作废'),
        authorityCode: 'purchaseRequest#purchaseRequestHead:cancel',
        type: 'invalid',
        args: {
          url: '/demand/purchaseRequestHead/cancel',
        },
        // disabled: true
        disabled: showCancelCondition,
      },
    ]
 }
function showCancelCondition({ currentOpt, row }) {
  if (row.requestStatus == '4' || (row.requestStatus == '0' && (row.auditStatus == '2' || row.auditStatus == '3'))) {
    return false
  } else {
    return true
  }
}

API

参数	说明	类型
title	按钮文字	string
type	按钮类型，通用按钮时必填, 如：type：‘delete’	string
attrs	ant-design 按钮 Button 属性都可以配置	object
args	参数，给功能使用，比如请求的 url 等	object
authorityCode	权限码	string
disabled	置灰	boolean\| function
click	点击事件	function

TS 类型-ButtonItem

export interface OptColumnListItem {
    type?: string;
    title: string;
    authorityCode?: string;
    attrs?: ObjectMap;
    args?: {
        url?: string;
        [key: string]: unknown;
    };
    click?: (args: ListOptionsEventParams) => void;
    disabled?: (({ currentOpt, row }: {
        currentOpt: OptColumnListItem;
        row: ObjectMap;
    }) => boolean | void) | boolean;
}

列表业务组件

编辑业务组件

详情业务组件

列表选项配置指南

通用功能说明

代码展示

效果截图预览

自定义选项按钮事件

代码展示

按钮-置灰

API

TS 类型-ButtonItem

列表选项配置指南 ​

通用功能说明 ​

代码展示 ​

效果截图预览 ​

自定义选项按钮事件 ​

代码展示 ​

按钮-置灰 ​

API ​

TS 类型-ButtonItem ​

列表选项配置指南

通用功能说明

代码展示

效果截图预览

自定义选项按钮事件

代码展示

按钮-置灰

API

TS 类型-ButtonItem