Files
orico-officialWebsite-ts-admin/src/views/feedbackManagement/contact/index.vue
2025-03-28 16:55:37 +08:00

52 lines
1.6 KiB
Vue

<!-- 联系我们列表 -->
<template>
<div class="table-box">
<div style="padding-bottom: 16px">
<el-button type="primary" @click="handleExport"> 导出 </el-button>
</div>
<ProTable
ref="proTableRef"
:formData="dataStore.formData"
:columns="dataStore.columns"
:request-api="getLeaveMsgListApi"
:init-param="dataStore.initParam"
>
</ProTable>
</div>
</template>
<script setup lang="ts" name="feedbackContactIndex">
import ProTable from "@/components/ProTable/index.vue";
import { useExport } from "@/hooks/useExport";
//列表接口
import { getLeaveMsgListExportApi, getLeaveMsgListApi } from "@/api/modules/contact";
//深拷贝方法
import { cloneDeep } from "lodash-es";
//表格和搜索條件
import { RULE_FORM, FORM_DATA, COLUMNS } from "./constant/index";
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数)
const proTableRef = ref<any>(null);
// 数据源
const dataStore = reactive<any>({
columns: COLUMNS, //列表配置项
initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
ruleForm: cloneDeep(RULE_FORM), // 搜索參數
formData: FORM_DATA //搜索配置项
});
const handleExport = () => {
getMenusLisExport();
};
//导出
const getMenusLisExport = async () => {
const result = await getLeaveMsgListExportApi({
...proTableRef?.value?.searchParam,
...proTableRef?.value?.pageable
});
await useExport(result);
};
</script>
<style scoped></style>