优化表格
This commit is contained in:
guanj
@@ -1,123 +1,123 @@
|
||||
<!-- 解析列表 -->
|
||||
<template>
|
||||
<el-dialog v-model.trim="dialogVisible" title="详情" width="70%" draggable @closed="close">
|
||||
<div :style="tableHeight">
|
||||
<vxe-table border auto-resize height="auto" :data="tableData" v-bind="defaultAttribute">
|
||||
<vxe-column field="name" align="center" title="文件名称"></vxe-column>
|
||||
<vxe-column field="createTime" align="center" title="导入时间"></vxe-column>
|
||||
<vxe-column field="allCount" align="center" title="数据总数(条)" width="120"></vxe-column>
|
||||
<vxe-column field="realCount" align="center" title="已入库总数(条)" width="120"></vxe-column>
|
||||
<vxe-column field="state" align="center" title="解析状态" width="100">
|
||||
<template v-slot:default="scoped">
|
||||
<el-tag type="warning" v-if="scoped.row.state == 0">未解析</el-tag>
|
||||
<el-tag type="success" v-if="scoped.row.state == 1">解析成功</el-tag>
|
||||
<el-tag type="danger" v-if="scoped.row.state == 2">解析失败</el-tag>
|
||||
<el-tag type="primary" v-if="scoped.row.state == 3">文件不存在</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const emit = defineEmits(['back'])
|
||||
const dialogVisible = ref(false)
|
||||
const tableHeight = mainHeight(440)
|
||||
const height = ref(0)
|
||||
height.value = window.innerHeight < 1080 ? 230 : 450
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '',
|
||||
// publicHeight: height.value,
|
||||
showPage: false,
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox', fixed: 'left' },
|
||||
{
|
||||
title: '序号', width: 80, formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '文件名称', minWidth: 170 },
|
||||
{ field: 'createTime', title: '导入时间', minWidth: 170 , sortable: true},
|
||||
{ field: 'allCount', title: '数据总数(条)', minWidth: 170 , sortable: true},
|
||||
{ field: 'realCount', title: '已入库总数(条)', minWidth: 170, sortable: true },
|
||||
{
|
||||
title: '解析状态',
|
||||
field: 'state',
|
||||
width: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success',
|
||||
2: 'danger',
|
||||
3: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '未解析',
|
||||
1: '解析成功',
|
||||
2: '解析失败',
|
||||
3: '文件不存在'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
// console.log(row.portableOfflLogList)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
//返回
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
const tableData: any = ref()
|
||||
const open = (val: any) => {
|
||||
dialogVisible.value = true
|
||||
tableData.value = val
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 10)
|
||||
}
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const updateViewportHeight = async () => {
|
||||
height.value = window.innerHeight < 1080 ? 230 : 450
|
||||
tableStore.table.publicHeight = height.value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateViewportHeight() // 初始化视口高度
|
||||
window.addEventListener('resize', updateViewportHeight) // 监听窗口大小变化
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateViewportHeight) // 移除监听
|
||||
})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
overflow-y: none !important;
|
||||
max-height: 70vh !important;
|
||||
}
|
||||
</style>
|
||||
<!-- 解析列表 -->
|
||||
<template>
|
||||
<el-dialog v-model.trim="dialogVisible" title="详情" width="70%" draggable @closed="close">
|
||||
<div :style="tableHeight">
|
||||
<vxe-table border auto-resize height="auto" :data="tableData" v-bind="defaultAttribute">
|
||||
<vxe-column field="name" align="center" title="文件名称"></vxe-column>
|
||||
<vxe-column field="createTime" align="center" title="导入时间"></vxe-column>
|
||||
<vxe-column field="allCount" align="center" title="数据总数(条)" width="120"></vxe-column>
|
||||
<vxe-column field="realCount" align="center" title="已入库总数(条)" width="120"></vxe-column>
|
||||
<vxe-column field="state" align="center" title="解析状态" width="100">
|
||||
<template v-slot:default="scoped">
|
||||
<el-tag type="warning" v-if="scoped.row.state == 0">未解析</el-tag>
|
||||
<el-tag type="success" v-if="scoped.row.state == 1">解析成功</el-tag>
|
||||
<el-tag type="danger" v-if="scoped.row.state == 2">解析失败</el-tag>
|
||||
<el-tag type="primary" v-if="scoped.row.state == 3">文件不存在</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const emit = defineEmits(['back'])
|
||||
const dialogVisible = ref(false)
|
||||
const tableHeight = mainHeight(440)
|
||||
const height = ref(0)
|
||||
height.value = window.innerHeight < 1080 ? 230 : 450
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '',
|
||||
// publicHeight: height.value,
|
||||
showPage: false,
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox', fixed: 'left' },
|
||||
{
|
||||
title: '序号', width: 80, formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '文件名称', minWidth: 170 },
|
||||
{ field: 'createTime', title: '导入时间', minWidth: 170 , sortable: true},
|
||||
{ field: 'allCount', title: '数据总数(条)', minWidth: 170 , sortable: true},
|
||||
{ field: 'realCount', title: '已入库总数(条)', minWidth: 170, sortable: true },
|
||||
{
|
||||
title: '解析状态',
|
||||
field: 'state',
|
||||
width: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success',
|
||||
2: 'danger',
|
||||
3: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '未解析',
|
||||
1: '解析成功',
|
||||
2: '解析失败',
|
||||
3: '文件不存在'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作', fixed: 'right',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
// console.log(row.portableOfflLogList)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
//返回
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
const tableData: any = ref()
|
||||
const open = (val: any) => {
|
||||
dialogVisible.value = true
|
||||
tableData.value = val
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 10)
|
||||
}
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const updateViewportHeight = async () => {
|
||||
height.value = window.innerHeight < 1080 ? 230 : 450
|
||||
tableStore.table.publicHeight = height.value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateViewportHeight() // 初始化视口高度
|
||||
window.addEventListener('resize', updateViewportHeight) // 监听窗口大小变化
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateViewportHeight) // 移除监听
|
||||
})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
overflow-y: none !important;
|
||||
max-height: 70vh !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user