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 | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 110 insertions(+), 10 deletions(-) diff --git a/src/components/table/FYTable.vue b/src/components/table/FYTable.vue index e00929f..4a5d520 100644 --- a/src/components/table/FYTable.vue +++ b/src/components/table/FYTable.vue @@ -9,18 +9,41 @@ </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 @@ -48,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() { @@ -60,10 +97,11 @@ 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) { @@ -73,6 +111,42 @@ pageSize(nValue, oValue) { if (nValue != oValue) { 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'; } } }, @@ -91,17 +165,28 @@ pageSize: this.pageSize }, (res) => { - this.tableData = res.data; - this.total = res.total ? res.total : 0; + 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 h2 = this.$refs.paginationRef + ? this.$refs.paginationRef.$el.offsetHeight + : 0; const h3 = this.$refs.expandRef.$el.offsetHeight; - const h = h1 + h2 + h3; + 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)`; }, @@ -115,12 +200,27 @@ } else { 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(); - } + }, }; </script> -- Gitblit v1.9.3