From 772f5894657d0ab3925faa2459966f31e2ef65de Mon Sep 17 00:00:00 2001 From: cwchen <1048842385@qq.com> Date: Wed, 5 Nov 2025 16:42:09 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E6=AE=B5=E8=A7=A3=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TableModel2/index.vue | 340 ++++++++--- src/router/index.js | 14 + .../analysis/components/AnalysisBidDetail.vue | 548 ++++++++++++++++++ .../analysis/components/AnalysisDetail.vue | 4 +- src/views/analysis/index.vue | 27 +- 5 files changed, 859 insertions(+), 74 deletions(-) create mode 100644 src/views/analysis/components/AnalysisBidDetail.vue diff --git a/src/components/TableModel2/index.vue b/src/components/TableModel2/index.vue index 5fb74e5..25922ff 100644 --- a/src/components/TableModel2/index.vue +++ b/src/components/TableModel2/index.vue @@ -3,18 +3,50 @@
- - - - - + + + + + - - - - - + " + /> + + + + - + 查询 - + 重置 @@ -52,15 +116,26 @@ - + -
+
@@ -71,29 +146,83 @@
- - - - + + + + + + + - + @@ -123,7 +256,7 @@ export default { // 列表请求接口 requestApi: { type: Function, - default: () => function () { }, + default: () => function () {}, }, // 列表配置项 columnsList: { @@ -178,6 +311,11 @@ export default { type: Boolean, default: false, }, + // 是否显示单选框 由父组件传递 默认不显示 + isRadioShow: { + type: Boolean, + default: false, + }, // 测试时使用的数据源 testTableList: { type: Array, @@ -196,20 +334,24 @@ export default { // 表格最大高度（像素），默认600px tableMaxHeight: { type: [Number, String], - default: 600 + default: 600, }, // 是否自动加载数据 默认自动加载 autoLoad: { type: Boolean, - default: true + default: true, }, handleColWidth: { type: Number, - default: 200 + default: 200, }, showSearch: { type: Boolean, - default: true + default: true, + }, + indexNumShow: { + type: Boolean, + default: true, }, }, computed: { @@ -221,14 +363,16 @@ export default { }, /* 表格卡片动态高度 */ tableCardStyle() { - const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度 - const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度 - const paginationHeight = 60; // 分页区域高度 - const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25}px)`; + const baseHeight = this.showSearch ? 200 : 120 // 搜索区域高度 + const toolbarHeight = this.showRightTools ? 40 : 0 // 工具栏高度 + const paginationHeight = 60 // 分页区域高度 + const availableHeight = `calc(100vh - ${ + baseHeight + toolbarHeight + paginationHeight + 25 + }px)` return { height: availableHeight, display: 'flex', - flexDirection: 'column' + flexDirection: 'column', } }, /* 表格容器样式 */ @@ -237,7 +381,7 @@ export default { flex: 1, overflow: 'hidden', display: 'flex', - flexDirection: 'column' + flexDirection: 'column', } }, }, @@ -272,11 +416,11 @@ export default { // 列表数据条数 total: 0, // 搜索区域是否隐藏 - + // 是否显示复选框 selectionShow: true, // 是否显示序号 - indexNumShow: true, + // 是否显示操作列 handleShow: true, // 列表每列 label @@ -290,6 +434,10 @@ export default { // 日期选择器配置 pickerOptions: {}, + // 单选框当前选中的行唯一标识 + currentRowId: null, + // 单选框当前选中的行数据 + currentRowData: null, } }, @@ -361,7 +509,11 @@ export default { delete queryParams.time // 剔除无关参数 // 删除日期范围选择器绑定的临时数组字段（如 openTime），保留实际使用的两个字段（如 openStartTime, openEndTime） this.formLabel.forEach((item) => { - if (item.f_type === 'dateRange' && item.dateType && item.dateType.length === 2) { + if ( + item.f_type === 'dateRange' && + item.dateType && + item.dateType.length === 2 + ) { delete queryParams[item.f_model] } }) @@ -376,6 +528,17 @@ export default { if (res.code === 200) { this.tableList = res.rows this.total = res.total + // 数据刷新后，如果之前选中的行不在当前列表中，清空选中状态 + if (this.isRadioShow && this.currentRowId) { + const exists = this.tableList.some( + (row) => + this.getRowUniqueId(row) === this.currentRowId, + ) + if (!exists) { + this.currentRowId = null + this.currentRowData = null + } + } } this.loading = false } catch (error) { @@ -440,7 +603,7 @@ export default { this.$set(setObj, 'unitName', res.data.unitName) this.$set(setObj, 'typeName', res.data.name) }) - .catch((err) => { }) + .catch((err) => {}) for (let key in this.queryParams) { this.$set(setObj, key, this.queryParams[key]) } @@ -484,6 +647,19 @@ export default { this.selectedData = e }, + // 获取行的唯一标识（优先使用id，否则使用索引） + getRowUniqueId(row) { + return row.id || row.proId || row.bidId || JSON.stringify(row) + }, + + + // 处理表格当前行变化（用于高亮） + handleCurrentChange(currentRow) { + if (this.isRadioShow && currentRow) { + this.currentRowId = this.getRowUniqueId(currentRow) + } + }, + /* 时间change事件 */ onChangeTime(e, type) { if (this.isOneMonth) { @@ -535,6 +711,18 @@ export default { }, deep: true, }, + // 监听单选框选中值的变化 + currentRowId(newVal, oldVal) { + if (this.isRadioShow && newVal && newVal !== oldVal) { + // 找到对应的行数据 + const row = this.tableList.find(r => this.getRowUniqueId(r) === newVal) + if (row) { + const index = this.tableList.findIndex(r => this.getRowUniqueId(r) === newVal) + this.currentRowData = row + this.$emit('radio-change', row, index) + } + } + }, }, } @@ -550,7 +738,7 @@ export default { .query-btn { width: 98px; height: 36px; - background: #1F72EA; + background: #1f72ea; box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5); border-radius: 4px 4px 4px 4px; color: #fff; @@ -559,7 +747,7 @@ export default { transition: all 0.3s; &:hover { - background: #4A8BFF; + background: #4a8bff; box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6); } } @@ -567,7 +755,7 @@ export default { .reset-btn { width: 98px; height: 36px; - background: #FFFFFF; + background: #ffffff; box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2); border-radius: 4px 4px 4px 4px; color: #333; @@ -618,13 +806,13 @@ export default { display: flex; flex-direction: column; min-height: 0; // 确保容器可以收缩 - + ::v-deep .el-table { flex: 1; height: 100%; width: 100%; margin-bottom: 0; - + // 确保表格体可以滚动 .el-table__body-wrapper { overflow-x: auto; @@ -669,6 +857,22 @@ export default { } } +// 单选框样式 +::v-deep .el-radio { + margin: 0; + + .el-radio__label { + padding-left: 0; + } + + .el-radio__input { + .el-radio__inner { + width: 16px; + height: 16px; + } + } +} + // 表格样式优化 ::v-deep .el-table { .el-button--text { @@ -679,7 +883,7 @@ export default { // 表头样式 thead { th { - background-color: #F1F6FF; + background-color: #f1f6ff; color: #424242; font-size: 16px; font-weight: 600; @@ -698,4 +902,4 @@ export default { } } } - \ No newline at end of file + diff --git a/src/router/index.js b/src/router/index.js index db07f3e..aebdb9e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -513,6 +513,20 @@ export const dynamicRoutes = [ } ] }, + { + path: '/analysisBidDetail', + component: Layout, + hidden: true, + permissions: ['enterpriseLibrary:analysis:detail'], + children: [ + { + path: 'index', + component: () => import('@/views/analysis/components/AnalysisBidDetail'), + name: 'AnalysisBidDetail', + meta: { title: '项目标段', activeMenu: '/analysis', noCache: true } + } + ] + }, ] // 防止连续点击多次路由报错 diff --git a/src/views/analysis/components/AnalysisBidDetail.vue b/src/views/analysis/components/AnalysisBidDetail.vue new file mode 100644 index 0000000..91e04e0 --- /dev/null +++ b/src/views/analysis/components/AnalysisBidDetail.vue @@ -0,0 +1,548 @@ + + + + + \ No newline at end of file diff --git a/src/views/analysis/components/AnalysisDetail.vue b/src/views/analysis/components/AnalysisDetail.vue index 1b32eb6..e2101e6 100644 --- a/src/views/analysis/components/AnalysisDetail.vue +++ b/src/views/analysis/components/AnalysisDetail.vue @@ -281,7 +281,7 @@ export default { .analysis-detail-content { .detail-row { - margin-bottom: 20px; + margin-bottom: 10px; &:last-of-type { margin-bottom: 0; @@ -289,7 +289,7 @@ export default { } .detail-col { - margin-bottom: 20px; + margin-bottom: 10px; } .detail-field { diff --git a/src/views/analysis/index.vue b/src/views/analysis/index.vue index 63189cb..4b48888 100644 --- a/src/views/analysis/index.vue +++ b/src/views/analysis/index.vue @@ -2,8 +2,16 @@
- + @@ -17,8 +25,8 @@ @click="handleDetail(data)"> 查看 - + 标段解析