稳态电能质量分析页面组件
This commit is contained in:
stt
234
src/components/table/indexClick.vue
Normal file
234
src/components/table/indexClick.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
:key="key"
|
||||
:data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading"
|
||||
v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
:showOverflow="showOverflow"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<!-- Column 组件内部是 el-table-column -->
|
||||
<template v-if="isGroup">
|
||||
<GroupColumn :column="tableStore.table.column" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Column
|
||||
:attr="item"
|
||||
:key="key + '-column'"
|
||||
v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode"
|
||||
>
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if="item.render" #default="scope">
|
||||
<FieldRender
|
||||
:field="item"
|
||||
:row="scope.row"
|
||||
:column="scope.column"
|
||||
:index="scope.rowIndex"
|
||||
:key="
|
||||
key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 支持可点击和下划线的列 -->
|
||||
<template v-else-if="item.clickable" #default="scope">
|
||||
<span
|
||||
:class="{ 'clickable-underline':item.clickable }"
|
||||
@click="item.clickable ? handleCellClick(scope.row, scope.column) : undefined"
|
||||
>
|
||||
{{ item.field ? scope.row[item.field] : '' }}
|
||||
</span>
|
||||
</template>
|
||||
</Column>
|
||||
</template>
|
||||
<slot name="columns"></slot>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
<div v-if="tableStore.showPage" class="table-pagination">
|
||||
<el-pagination
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
background
|
||||
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, inject, computed, onMounted, watch } from 'vue'
|
||||
import type { ElTable } from 'element-plus'
|
||||
import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
|
||||
import FieldRender from '@/components/table/fieldRender/index.vue'
|
||||
import Column from '@/components/table/column/index.vue'
|
||||
import GroupColumn from '@/components/table/column/groupColumn.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import type TableStoreClass from '@/utils/tableStore'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const config = useConfig()
|
||||
const tableRef = ref<VxeTableInstance>()
|
||||
const tableStore = inject('tableStore') as TableStoreClass
|
||||
const router = useRouter()
|
||||
const key = ref(0)
|
||||
|
||||
const clickedRow = ref<any>(null)
|
||||
const clickedColumn = ref<any>(null)
|
||||
|
||||
const emit = defineEmits(['cell-click'])
|
||||
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||
isGroup?: boolean
|
||||
showOverflow?: boolean
|
||||
height?: string | boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isGroup: false,
|
||||
showOverflow: true,
|
||||
height: false
|
||||
})
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value as VxeTableInstance
|
||||
})
|
||||
// console.log(props)
|
||||
const onTableSizeChange = (val: number) => {
|
||||
tableStore.onTableAction('page-size-change', { size: val })
|
||||
}
|
||||
|
||||
const onTableCurrentChange = (val: number) => {
|
||||
tableStore.onTableAction('current-page-change', { page: val })
|
||||
}
|
||||
|
||||
const pageSizes = computed(() => {
|
||||
let defaultSizes = [10, 20, 50, 100, 200]
|
||||
if (tableStore.table.params!.pageSize) {
|
||||
if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
|
||||
defaultSizes.push(tableStore.table.params!.pageSize)
|
||||
}
|
||||
}
|
||||
return defaultSizes
|
||||
})
|
||||
|
||||
/*
|
||||
* 记录选择的项
|
||||
*/
|
||||
const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
|
||||
const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
|
||||
tableStore.onTableAction('selection-change', records)
|
||||
}
|
||||
|
||||
const getRef = () => {
|
||||
return tableRef.value
|
||||
}
|
||||
// 排序
|
||||
const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
|
||||
// console.log('排序列:', column?.property);
|
||||
// console.log('排序顺序:', order);
|
||||
// tableStore.onTableAction('sortable', { column, order })
|
||||
tableStore.table.params.sortBy = column?.property
|
||||
tableStore.table.params.orderBy = order
|
||||
tableStore.table.params.pageNum = 1
|
||||
|
||||
tableStore.index()
|
||||
key.value += 1
|
||||
// // 在这里可以根据 column 和 order 进行相应的数据排序操作
|
||||
// if (order === 'asc') {
|
||||
// } else if (order === 'desc') {
|
||||
// }
|
||||
}
|
||||
|
||||
// 单元格点击事件处理函数
|
||||
const handleCellClick = (row: any, column: any) => {
|
||||
clickedRow.value = row
|
||||
clickedColumn.value = column
|
||||
// 触发自定义事件，通知父组件显示 dialog
|
||||
emit('cell-click', row, column)
|
||||
// 你也可以在这里触发一个自定义事件或调用 tableStore 的方法
|
||||
// tableStore.onTableAction('cell-click', { row, column })
|
||||
}
|
||||
|
||||
watch(
|
||||
() => tableStore.table.allFlag,
|
||||
newVal => {
|
||||
if (tableStore.table.allFlag) {
|
||||
tableRef.value?.exportData({
|
||||
filename:
|
||||
tableStore.table.filename || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: tableStore.table.allData, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column: any) {
|
||||
return !(
|
||||
column.column.title === undefined ||
|
||||
column.column.title === '序号' ||
|
||||
column.column.title === '操作'
|
||||
)
|
||||
}
|
||||
})
|
||||
tableStore.table.allFlag = false
|
||||
}
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => tableStore.table.data,
|
||||
newVal => {
|
||||
tableStore.onTableAction('selection-change', [])
|
||||
}
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
getRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ba-data-table :deep(.el-button + .el-button) {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.ba-data-table :deep(.table-header-cell) .cell {
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
|
||||
/* 添加可点击和下划线单元格样式 */
|
||||
.clickable-underline {
|
||||
text-decoration: underline; /* 下划线 */
|
||||
cursor: pointer; /* 鼠标指针 */
|
||||
}
|
||||
|
||||
.clickable-underline:hover {
|
||||
color: #66b1ff; /* 悬停时的颜色 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user