企企通产品部V6

Appearance

On this page

列表模板使用说明 ​

QListLayout 是一个通用的列表模板，它集成了列表页面的基础功能，包括表单查询、快速筛选、表格按钮组、表格选项组等。所有这些功能都是通过配置来生成的。以下将详细介绍各个功能模块的使用方法、案例代码以及 API 展示。 列表按钮组配置

QListLayout 实例化 ​

  1. 通过 ref 获取 QListLayout 实例中的方法或变量，例如 fetchListData()。这可以用于刷新列表、控制列表加载状态、获取列表中的选中项等。
vue
<q-list-layout
  ref="listLayoutRef"
  :apiUrls="apiUrls"
  :pageData="pageData"
></q-list-layout>
<script setup>
import { ref } from "vue";
const listLayoutRef = ref();
// 刷新列表
listLayoutRef.value.fetchListData();
// 刷新列表，并携带其他自定义参数，也可以通过在formState对象里面添加
listLayoutRef.value.fetchListData({ extraParams: { test: "test" } });
// 获取列表中的勾选项目
listLayoutRef.value.gridInstance.getCheckboxRecords();
// 打开列表加载状态
listLayoutRef.value.loading = true;
</script>
事件名/属性名说明回调参数/类型版本
fetchListData列表加载方法(params?: FetchDataOptions) => void

fetchListData 方法的类型定义如下：

ts
(params?: FetchDataOptions) => void
export interface FetchDataOptions {
    propsData?: ListContent | {
        [key: string]: any;
    };
    extraParams?: {
        [key: string]: unknown;
    };
    pagerConfig?: VxeGridPropTypes.PagerConfig;
    formState?: ObjectMap;
    statusFilter?: ObjectMap;
    getParams?: () => {
        [key: string]: unknown;
    };
}

API ​

QListLayout 列表模板参数 ​

参数说明类型默认值
apiUrlsHTTP 请求 URL 配置object- columnsCode: 列项 code
- list: 列表查询接口
- countTabsUrl: 状态事项接口
pageData页面配置object- optionConfig: 列操作按钮配置
- buttonConfig: 列表按钮组配置
- queryConfig: 页面查询配置
- pagerConfig: 页码配置
- navConfig: 快速导航
- statusConfig: 事项状态
- filterConfig: 快速筛选
- listMergeConfig: 列表合并配置
- toolsConfig: 工具栏按钮配置
- localColumns: 本地列项默认会跟接口返回的列项合并
- isUseLocalColumns：是否只用本地列项，跟 localColumns 一起用
- foldIconHide: 布尔值，是否隐藏头部折叠图标
extraListConfig表格配置拓展，参考 vxetableobject自定义表格配置

apiUrls 配置示例 ​

json
const apiUrls = reactive({
  columnsCode: 'purchaseRequestHeadList',
  excelCode: 'PurchaseRequestHeadExcel',
  list: '/demand/purchaseRequestHead/list',
  countTabsUrl: '/demand/purchaseRequestHead/counts',
})

如果特殊列表的请求方式不同，可以通过 method 属性进行配置：

json
const apiUrls = reactive({
  columnsCode: 'purchaseRequestHeadList',
  excelCode: 'PurchaseRequestHeadExcel',
  list: {
    url: '/demand/purchaseRequestHead/list',
    method: 'get',
  },
  countTabsUrl: '/demand/purchaseRequestHead/counts',
})

pageData 配置示例 ​

ts
import type { GlobalListPageLayoutTypes } from "@qqt-product/ui";
const pageData = reactive<GlobalListPageLayoutTypes.PageData>({
  optionConfig: {
    options: [
      // ...
    ],
  },
  buttonConfig: {
    buttons: [
      // ...
    ],
  },
  queryConfig: {
    form: [
      {
        type: "input",
        label: "关键字",
        fieldName: "keyWord",
      },
    ],
    formState: {
      keyWord: "",
    },
  },
  listMergeConfig: {
    options: [
      {
        title: srmI18n("i18n_field_it_c9c61", "整单"),
        key: "head",
      },
      {
        title: srmI18n("i18n_dict_RH_cda78", "明细"),
        key: "item",
      },
    ],
    change(event, value, options) {
      // 事件 ...
      console.log(event, value, options);
    },
    currentValue: "head",
  },
  statusConfig: {
    show: false,
  },
  filterConfig: {
    show: false,
  },
  navConfig: {
    show: false,
  },
});

事件

事件名说明回调参数版本
cellClick表格点击触发
afterChangeTab头部状态事项选中触发（{currentValue，tabsData}）=> void
addButtonClick新增按钮点击事件（{ row }: { row: GlobalPageLayoutTypes.CurrentRow }）=> void

状态事项回调方法例子

可参考-菜单-竞价管理 /srm/enquiry/ebiddingHead/list

afterChangeTab

<q-list-layout ref="listLayoutRef" :apiUrls="apiUrls" :pageData="pageData" @add-button-click="handleCreate" @afterChangeTab="afterChangeTab" />
 省略...

 function afterChangeTab({ currentValue }) {
  pageData.queryConfig.formState.ebiddingStatus = currentValue
}

本地列项配置 ​

需要配置 localColumns, 默认会和列表接口返回的列项合并，以下是个例子

js
// ...省略其他代码
const pageData = {
  localColumns: [
    {
      title: srmI18n(`i18n_field_eBLRL_9daf066b`, "投标人名称"),
      field: "supplierName",
    },
    {
      title: srmI18n(`i18n_field_YVey_43196f4f`, "退款账号"),
      field: "refundAccount",
    },
    {
      title: srmI18n(`i18n_field_YVeyDR_e2871045`, "退款账号户名 "),
      field: "refundName",
    },
    {
      title: srmI18n(`i18n_field_YVeyvDc_6e512646`, "退款账号开户行"),
      field: "bankName",
    },
    {
      title: srmI18n(`i18n_field_YVKEy_1feb0481`, "退款联行号"),
      field: "interBankNo",
    },
    {
      title: srmI18n(`i18n_field_YVHfWjW_d1a4b644`, "退款金额（元）"),
      field: "refundAmount",
    },
    {
      title: srmI18n(`i18n_field_YVKI_4314f27c`, "退款时间"),
      field: "updateTime",
    },
    {
      title: srmI18n(`i18n_field_YVzE_431647c9`, "退款状态"),
      field: "status_dictText",
    },
  ],
};

如果只想使用本地列项，则配置 isUseLocalColumns 为 true 即可，配置后不会进行列项请求，以下是示列

js
// ...省略其他代码
const pageData = {
  isUseLocalColumns: true, // 设置为true
  localColumns: [
    {
      title: srmI18n(`i18n_field_eBLRL_9daf066b`, "投标人名称"),
      field: "supplierName",
    },
    {
      title: srmI18n(`i18n_field_YVey_43196f4f`, "退款账号"),
      field: "refundAccount",
    },
    {
      title: srmI18n(`i18n_field_YVeyDR_e2871045`, "退款账号户名 "),
      field: "refundName",
    },
    {
      title: srmI18n(`i18n_field_YVeyvDc_6e512646`, "退款账号开户行"),
      field: "bankName",
    },
    {
      title: srmI18n(`i18n_field_YVKEy_1feb0481`, "退款联行号"),
      field: "interBankNo",
    },
    {
      title: srmI18n(`i18n_field_YVHfWjW_d1a4b644`, "退款金额（元）"),
      field: "refundAmount",
    },
    {
      title: srmI18n(`i18n_field_YVKI_4314f27c`, "退款时间"),
      field: "updateTime",
    },
    {
      title: srmI18n(`i18n_field_YVzE_431647c9`, "退款状态"),
      field: "status_dictText",
    },
  ],
};

自定义表格配置 ​

extraListConfig选项默认会与表格的标准配置自动合并。若需要对表格的行高或其他属性进行定制，可以参考vxe-grid组件的详细参数说明文档进行配置。

例如，若业务需求中需要调整表格的行高

vue
// ...省略其他代码
<q-list-layout :extraListConfig="{ rowConfig: { height: 80 } }" ref="listLayoutRef" />