From 5efcf83a4a67bf5cefbee480c58a697553f9f8de Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 01 八月 2025 17:32:51 +0800
Subject: [PATCH] 新增问题复发清清单界面
---
src/components/table/FYTable.vue | 154 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 129 insertions(+), 25 deletions(-)
diff --git a/src/components/table/FYTable.vue b/src/components/table/FYTable.vue
index 0e6e982..4a5d520 100644
--- a/src/components/table/FYTable.vue
+++ b/src/components/table/FYTable.vue
@@ -4,19 +4,46 @@
<template #options>
<slot name="options"></slot>
</template>
+ <template #buttons>
+ <slot name="buttons"></slot>
+ </template>
</FYSearchBar>
</el-row>
- <el-row ref="expandRef">
- <slot name="options-expand"></slot>
+ <el-row ref="expandRef" justify="space-between">
+ <el-col span="22">
+ <slot name="options-expand"></slot>
+ </el-col>
+ <el-col span="2">
+ <el-space :wrap="false">
+ <el-text size="small">瀛椾綋</el-text>
+ <el-radio-group v-model="fontSize" size="small">
+ <el-radio-button value="small">灏�</el-radio-button>
+ <el-radio-button value="default">涓�</el-radio-button>
+ <el-radio-button value="large">澶�</el-radio-button>
+ </el-radio-group>
+ </el-space>
+ </el-col>
</el-row>
+ <div ref="expand2Ref">
+ <slot name="options-expand2"></slot>
+ </div>
<el-table
+ id="fyTable"
+ ref="tableRef"
:data="tableData"
v-loading="loading"
table-layout="fixed"
:row-class-name="tableRowClassName"
:height="tableHeight"
+ :size="fontSize"
+ @cell-click="cellClick"
+ :cell-class-name="cellClassName"
+ @paste="handlePaste"
+ @sort-change="handleSortChange"
+ :show-overflow-tooltip="true"
+ border
>
- <slot name="table-column"></slot>
+ <slot name="table-column" :size="fontSize"></slot>
</el-table>
<el-pagination
@@ -44,9 +71,23 @@
export default {
props: {
rowClassName: undefined,
+ cellClassName: Function || String,
pagination: {
type: Boolean,
default: true
+ },
+ // '' | 'small' | 'default' | 'large'
+ size: {
+ type: String,
+ default: 'default'
+ },
+ data: {
+ type: Array,
+ default: () => []
+ },
+ totalCount: {
+ type: Number,
+ default: 0
}
},
data() {
@@ -56,19 +97,56 @@
total: 0,
currentPage: 1,
pageSize: 20,
- loading: false
- }
+ loading: false,
+ fontSize: 'default'
+ };
},
- emits: ['search'],
+ emits: ['search', 'cellClick', 'tablePaste', 'sortChange'],
watch: {
currentPage(nValue, oValue) {
if (nValue != oValue) {
- this.onSearch()
+ this.onSearch();
}
},
pageSize(nValue, oValue) {
if (nValue != oValue) {
- this.onSearch()
+ this.onSearch();
+ }
+ },
+ size: {
+ handler(nValue, oValue) {
+ if (nValue != oValue) {
+ this.fontSize = nValue;
+ }
+ },
+ immediate: true
+ },
+ data(nValue, oValue) {
+ if (nValue != oValue) {
+ this.tableData = nValue;
+ }
+ },
+ totalCount(nValue, oValue) {
+ if (nValue != oValue) {
+ this.total = nValue;
+ }
+ }
+ },
+ computed: {
+ cTableHeight() {
+ if (this.$refs.searchRef) {
+ const h1 = this.$refs.searchRef.$el.offsetHeight;
+ const h2 = this.$refs.paginationRef
+ ? this.$refs.paginationRef.$el.offsetHeight
+ : 0;
+ const h3 = this.$refs.expandRef.$el.offsetHeight;
+ const h4 = this.$refs.expand2Ref.offsetHeight;
+
+ const h = h1 + h2 + h3 + h4;
+ // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
+ return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
+ } else {
+ return '500';
}
}
},
@@ -79,7 +157,7 @@
* 鍥炶皟鍑芥暟鎺ユ敹涓�涓璞★紝鍖呮嫭琛ㄦ牸鏁版嵁鏁扮粍data鍜屾暟鎹�绘暟total
*/
onSearch() {
- this.loading = true
+ this.loading = true;
this.$emit(
'search',
{
@@ -87,37 +165,63 @@
pageSize: this.pageSize
},
(res) => {
- this.tableData = res.data
- this.total = res.total ? res.total : 0
- this.loading = false
+ if (res) {
+ if (res.data) {
+ this.tableData = res.data;
+ }
+ if (res.total) {
+ this.total = res.total;
+ }
+ }
+ this.loading = false;
+ this.doLayout();
}
- )
+ );
},
calcTableHeight() {
- const h1 = this.$refs.searchRef.$el.offsetHeight
- const h2 = this.$refs.paginationRef ? this.$refs.paginationRef.$el.offsetHeight : 0
- const h3 = this.$refs.expandRef.$el.offsetHeight
- const h = h1 + h2 + h3
+ const h1 = this.$refs.searchRef.$el.offsetHeight;
+ const h2 = this.$refs.paginationRef
+ ? this.$refs.paginationRef.$el.offsetHeight
+ : 0;
+ const h3 = this.$refs.expandRef.$el.offsetHeight;
+ const h4 = this.$refs.expand2Ref.offsetHeight;
+
+ const h = h1 + h2 + h3 + h4;
// return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
- return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`
+ return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
},
tableRowClassName({ row }) {
if (this.rowClassName) {
if (typeof this.rowClassName == 'string') {
- return this.rowClassName
+ return this.rowClassName;
} else if (typeof this.rowClassName == 'function') {
- return this.rowClassName({ row })
+ return this.rowClassName({ row });
}
} else {
- return row.extension1 != '0' ? 'online-row' : 'offline-row'
+ return row.extension1 != '0' ? 'online-row' : 'offline-row';
}
+ },
+ cellClick(row, column, cell, event) {
+ this.$emit('cellClick', row, column, cell, event);
+ },
+ handlePaste(event) {
+ this.$emit('tablePaste', event);
+ },
+ doLayout() {
+ this.$refs.tableRef.doLayout();
+ },
+ handleSortChange({ column, prop, order }) {
+ this.$emit('sortChange', { column, prop, order });
+ },
+ clearSort() {
+ this.$refs.tableRef.clearSort();
}
},
mounted() {
- this.tableHeight = this.calcTableHeight()
- this.onSearch()
- }
-}
+ this.tableHeight = this.calcTableHeight();
+ this.onSearch();
+ },
+};
</script>
<style>
--
Gitblit v1.9.3