添加表格导出功能

This commit is contained in:
GGJ
2024-12-26 15:56:32 +08:00
parent aed771578a
commit 46dc032c4c
14 changed files with 2453 additions and 2827 deletions

View File

@@ -1,6 +1,6 @@
<template>
<!-- 异常事件 -->
<TableHeader datePicker ref="refheader">
<TableHeader datePicker ref="refheader" showExport>
<!-- <template v-slot:select>
<el-form-item label="数据来源">
<el-cascader

View File

@@ -1,5 +1,5 @@
<template>
<TableHeader datePicker ref="refheader">
<TableHeader datePicker ref="refheader" showExport>
<template v-slot:select>
<el-form-item label="数据来源">
<el-cascader v-model.trim="tableStore.table.params.cascader" placeholder="请选择数据来源"

View File

@@ -1,5 +1,5 @@
<template>
<TableHeader datePicker ref="refheader">
<TableHeader datePicker ref="refheader" showExport>
<template v-slot:select>
<el-form-item label="数据来源">
<el-cascader v-model.trim="tableStore.table.params.cascader" placeholder="请选择数据来源"

View File

@@ -1,6 +1,6 @@
<template>
<div ref="refheader" v-if="!isWaveCharts">
<TableHeader datePicker>
<TableHeader datePicker showExport>
<template v-slot:select>
<el-form-item label="数据来源">
<el-cascader placeholder="请选择数据来源" @change="sourceChange"

View File

@@ -223,9 +223,7 @@
{{ child.anotherName }}:
{{ child.dataValue === 3.1415926 ? '暂无数据' : child.dataValue }}
</div>
</div>
</div>
<div v-else-if="item.children.length" class="box-card-div">
<div style="display: flex; align-items: center">

View File

@@ -47,21 +47,30 @@
{{ deviceData.appCheck }}
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model.trim="dataSet" type="border-card" class="device-manage-box-card" @tab-click="handleClick">
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
:key="index"></el-tab-pane>
<div :style="{ height: tableHeight }" v-loading="tableLoading">
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
<vxe-column type="seq" title="序号" width="80"></vxe-column>
<vxe-column field="name" title="数据名称"></vxe-column>
<vxe-column field="phasic" title="相别"></vxe-column>
<vxe-column field="type" title="数据类型"></vxe-column>
<vxe-column field="unit" title="单位"></vxe-column>
<vxe-column field="startTimes" title="开始次数"></vxe-column>
<vxe-column field="endTimes" title="结束次数"></vxe-column>
</vxe-table>
</div>
</el-tabs>
<div style="position: relative">
<el-tabs v-model.trim="dataSet" type="border-card" class="device-manage-box-card"
@tab-click="handleClick">
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
:key="index"></el-tab-pane>
<div :style="{ height: tableHeight }" v-loading="tableLoading">
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" ref="xTableRef"
style="width: 100%">
<vxe-column type="seq" title="序号" width="80"></vxe-column>
<vxe-column field="name" title="数据名称"></vxe-column>
<vxe-column field="phasic" title="相别"></vxe-column>
<vxe-column field="type" title="数据类型"></vxe-column>
<vxe-column field="unit" title="单位"></vxe-column>
<vxe-column field="startTimes" title="开始次数"></vxe-column>
<vxe-column field="endTimes" title="结束次数"></vxe-column>
</vxe-table>
</div>
</el-tabs>
<el-button icon="el-icon-Download" type="primary" @click="exportData" class="export-btn">导出</el-button>
</div>
</div>
<el-empty v-else description="请选择设备" class="device-manage-right" />
<MangePopup ref="mangePopup" />
@@ -103,6 +112,7 @@ const tableData = ref([])
const tableHeight = mainHeight(260).height
const mangePopup = ref()
const activeName = ref(0)
const xTableRef = ref()
//治理设备和便携式设备切换判断
const deviceType = ref('0')
const deviceTypeChange = (val: any, obj: any) => {
@@ -250,6 +260,21 @@ const handleRestartDevice = () => {
deviceRestartLoading.value = false
})
}
const exportData = () => {
xTableRef.value.exportData({
filename: deviceData.value.dataSetList.filter((item: any) => item.id == dataSet.value)[0]?.name, // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
download: false,
data: tableData.value, // 数据源 // 过滤那个字段导出
columnFilterMethod: function (column, $columnIndex) {
return !(column.$columnIndex === 0)
}
})
}
</script>
<style lang="scss">
@@ -279,4 +304,11 @@ const handleRestartDevice = () => {
-webkit-text-security: disc !important;
}
}
.export-btn {
position: absolute;
top: 4px;
right: 10px;
z-index: 10;
}
</style>