列表卡片式布局 ​

<template>
  <div style="height: 100%">
    <q-list-layout ref="listLayoutRef" :apiUrls="apiUrls" :pageData="pageData">
      <template
        v-if="toggleCardMode"
        #gridlist="{
          loading,
          tableData,
          tableColumns,
          pagerConfig,
          statusData,
          queryConfig,
          listConfig,
        }"
      >
        <a-spin :spinning="loading" :delayTime="300">
          <q-card-list-layout
            :tabsList="statusData"
            :tableData="tableData"
            :columns="tableColumns"
            :queryConfig="queryConfig"
            :pagerConfig="pagerConfig"
            :listConfig="listConfig"
            :buttons="listConfig.pageData.optionConfig.options"
            @search="cardListSearch"
            @handleToggleCardMode="handleToggleCardMode"
            @sidebarClick="handleSidebarClick"
            @pageChange="handlePageChange"
            @card-approve="showDetail"
          />
        </a-spin>
      </template>
    </q-list-layout>
  </div>
</template>

<!-- 具体方法事件已提供，按需要写具体逻辑 以下是部分方法代码展示 -->
<script lang="ts" setup>
import { VxeGridEvents } from "vxe-table";
import type { GlobalListPageLayoutTypes } from "@qqt-product/ui";
import { ref, reactive } from "vue";
const listLayoutRef = ref();
const toggleCardMode = ref(false);
const apiUrls = reactive({
  columnsCode: "bpmnTodoList",
  list: "/a1bpmn/audit/api/runtime/task/list",
  countTabsUrl: "/flow/tab/api/runtime/task/bpmn/tabs/count",
});
const pageData = reactive<GlobalListPageLayoutTypes.PageData>({
  onlyShowNav: false,
  queryConfig: {
    extend: {
      // show: false,
    },
    form: [
      {
        type: "input",
        label: "流程主题",
        fieldName: "subject",
        placeholder: "流程主题",
      },
    ],
    formState: {
      subject: "",
    },
  },
  buttonConfig: {
    buttons: [
      {
        label: "列自定义",
        icon: {
          type: "icon-Q-setting",
        },
        type: "setting",
      },
    ],
  },
  toolsConfig: {
    buttons: [
      {
        icon: {
          type: "icon-Q-card",
        },
        attrs: {
          shape: "circle",
        },
        type: "zoom",
        click: () => {
          toggleCardMode.value = !toggleCardMode.value;
          pageData.onlyShowNav = true;
        },
      },
    ],
  },
  optionConfig: {
    options: [
      {
        type: "view",
        title: "审批",
        click: showDetail,
        authorityCode: "bpmn#auditAPI:complete",
        args: {
          event: "approve",
        },
      },
    ],
  },
});
// 卡片布局查询
function cardListSearch({
  formState,
}: {
  formState: GlobalListPageLayoutTypes.ObjectMap;
}) {
  listLayoutRef.value.fetchListData({ formState });
}
// 切换卡片布局
function handleToggleCardMode() {
  toggleCardMode.value = !toggleCardMode.value;
  pageData.onlyShowNav = false;
}
// 详情操作
function showDetail(args: GlobalListPageLayoutTypes.ListOptionsEventParams) {
  console.log("打开详情~");
}
// 侧边栏状态过滤
function handleSidebarClick({
  tabsData,
  currentVal,
}: {
  tabsData: GlobalListPageLayoutTypes.TabListItem[];
  currentVal: GlobalListPageLayoutTypes.TabListItem;
}) {
  const customGetParams = () => {
    const tabData = tabsData.find(
      (rs) => rs[rs.proName] == currentVal[rs.proName]
    );
    let params: { [key: string]: unknown } = {};
    for (let key in tabData) {
      if (key !== "title" && key !== "flag") {
        params[key] = tabData[key];
      }
    }
    return params;
  };
  if (pageData?.statusConfig?.currentValue) {
    pageData.statusConfig.currentValue = currentVal;
  }
  listLayoutRef.value.fetchListData({ statusFilter: customGetParams() });
}

// 分页change
const handlePageChange: VxeGridEvents.PageChange = (options) => {
  const { currentPage, pageSize } = options;
  listLayoutRef.value.fetchListData({
    pagerConfig: {
      currentPage,
      pageSize,
    },
  });
};
</script>