|
|
@@ -33,7 +33,7 @@
|
|
|
class="!w-240px"
|
|
|
/>
|
|
|
</el-form-item> -->
|
|
|
- <el-form-item label="合同名称" prop="contractName">
|
|
|
+ <el-form-item label="合同名称" prop="contractName" :width="columnWidths.contractName">
|
|
|
<el-input
|
|
|
v-model="queryParams.contractName"
|
|
|
placeholder="请输入合同名称"
|
|
|
@@ -42,7 +42,7 @@
|
|
|
class="!w-240px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="合同编号" prop="contractCode">
|
|
|
+ <el-form-item label="合同编号" prop="contractCode" :width="columnWidths.contractCode">
|
|
|
<el-input
|
|
|
v-model="queryParams.contractCode"
|
|
|
placeholder="请输入合同编号"
|
|
|
@@ -91,6 +91,7 @@
|
|
|
:stripe="true"
|
|
|
style="width: 100%"
|
|
|
:cell-style="{ padding: '5px' }"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
>
|
|
|
<el-table-column
|
|
|
:label="t('iotDevice.serial')"
|
|
|
@@ -107,7 +108,7 @@
|
|
|
align="left"
|
|
|
prop="manufactureName"
|
|
|
:show-overflow-tooltip="true"
|
|
|
- width="200px"
|
|
|
+ :min-width="columnWidths.manufactureName"
|
|
|
class-name="manufacture-name-column"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
@@ -116,7 +117,7 @@
|
|
|
prop="contractName"
|
|
|
class-name="contract-name-column"
|
|
|
:show-overflow-tooltip="true"
|
|
|
- width="200px"
|
|
|
+ :min-width="columnWidths.contractName"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<el-link type="primary" @click="showTaskList(scope.row)">
|
|
|
@@ -128,7 +129,7 @@
|
|
|
label="合同编号"
|
|
|
align="center"
|
|
|
prop="contractCode"
|
|
|
- :width="columnWidths.contractCode"
|
|
|
+ :min-width="columnWidths.contractCode"
|
|
|
/>
|
|
|
<!--
|
|
|
<el-table-column label="总工作量" align="center" prop="workloadTotal" :width="columnWidths.workloadTotal" />
|
|
|
@@ -138,20 +139,20 @@
|
|
|
align="center"
|
|
|
prop="startTime"
|
|
|
:formatter="dateFormatter2"
|
|
|
- :width="columnWidths.startTime"
|
|
|
+ :min-width="columnWidths.startTime"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
label="合同完成时间"
|
|
|
align="center"
|
|
|
prop="endTime"
|
|
|
:formatter="dateFormatter2"
|
|
|
- :width="columnWidths.endTime"
|
|
|
+ :min-width="columnWidths.endTime"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
:label="t('project.payment')"
|
|
|
align="center"
|
|
|
prop="payment"
|
|
|
- :width="columnWidths.payment"
|
|
|
+ :min-width="columnWidths.payment"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<dict-tag :type="DICT_TYPE.PMS_PROJECT_SETTLEMENT" :value="scope.row.payment" />
|
|
|
@@ -162,9 +163,14 @@
|
|
|
align="center"
|
|
|
prop="createTime"
|
|
|
:formatter="dateFormatter"
|
|
|
- :width="columnWidths.createTime"
|
|
|
+ :min-width="columnWidths.createTime"
|
|
|
/>
|
|
|
- <el-table-column label="操作" align="center" :width="columnWidths.operation" fixed="right">
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ :min-width="columnWidths.operation"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
<el-button
|
|
|
link
|
|
|
@@ -519,6 +525,11 @@ const calculateColumnWidths = () => {
|
|
|
const minWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING
|
|
|
minWidths[key] = minWidth
|
|
|
totalMinWidth += minWidth
|
|
|
+
|
|
|
+ if (key === 'contractCode') {
|
|
|
+ console.log('minWidth', minWidth)
|
|
|
+ }
|
|
|
+
|
|
|
return minWidth
|
|
|
}
|
|
|
|
|
|
@@ -528,7 +539,8 @@ const calculateColumnWidths = () => {
|
|
|
t('iotDevice.serial'),
|
|
|
(row: any, index: number) => `${index + 1}`
|
|
|
)
|
|
|
- // calculateColumnMinWidth('manufactureName', '客户名称', (row: any) => row.manufactureName);
|
|
|
+ calculateColumnMinWidth('manufactureName', '客户名称', (row: any) => row.manufactureName)
|
|
|
+ calculateColumnMinWidth('contractName', '合同名称', (row: any) => row.contractName)
|
|
|
// 合同名称列:直接固定宽度,不参与动态计算
|
|
|
calculateColumnMinWidth('contractCode', '合同编号', (row: any) => row.contractCode)
|
|
|
calculateColumnMinWidth('workloadTotal', '总工作量', (row: any) => row.workloadTotal)
|
|
|
@@ -568,16 +580,16 @@ const calculateColumnWidths = () => {
|
|
|
newWidths.contractName = '200px'
|
|
|
|
|
|
// 计算可伸缩列需要的宽度
|
|
|
- if (totalMinWidth < availableWidth) {
|
|
|
- // 有剩余空间:按比例分配给可伸缩列
|
|
|
- const extraSpace = availableWidth - totalMinWidth
|
|
|
- const flexibleColumnCount = FLEXIBLE_COLUMNS.length
|
|
|
- const spacePerColumn = Math.floor(extraSpace / flexibleColumnCount)
|
|
|
-
|
|
|
- FLEXIBLE_COLUMNS.forEach((key) => {
|
|
|
- newWidths[key] = `${minWidths[key] + spacePerColumn}px`
|
|
|
- })
|
|
|
- }
|
|
|
+ // if (totalMinWidth < availableWidth) {
|
|
|
+ // // 有剩余空间:按比例分配给可伸缩列
|
|
|
+ // const extraSpace = availableWidth - totalMinWidth
|
|
|
+ // const flexibleColumnCount = FLEXIBLE_COLUMNS.length
|
|
|
+ // const spacePerColumn = Math.floor(extraSpace / flexibleColumnCount)
|
|
|
+
|
|
|
+ // FLEXIBLE_COLUMNS.forEach((key) => {
|
|
|
+ // newWidths[key] = `${minWidths[key] + spacePerColumn}px`
|
|
|
+ // })
|
|
|
+ // }
|
|
|
|
|
|
// 3. 更新列宽配置
|
|
|
columnWidths.value = newWidths
|
|
|
@@ -1074,32 +1086,32 @@ watch(
|
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
|
- padding: 0;
|
|
|
min-height: auto;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.dept-names {
|
|
|
- white-space: nowrap;
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 120px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- max-width: 120px;
|
|
|
- display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.device-names {
|
|
|
- white-space: nowrap;
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 120px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- max-width: 120px;
|
|
|
- display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.responsible-names {
|
|
|
- white-space: nowrap;
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 120px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- max-width: 120px;
|
|
|
- display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
:deep(.el-step__description) {
|
|
|
@@ -1112,10 +1124,10 @@ watch(
|
|
|
|
|
|
/* 确保步骤标题完全显示 */
|
|
|
:deep(.timeline-dialog .el-step__title) {
|
|
|
- white-space: nowrap;
|
|
|
+ max-width: none;
|
|
|
overflow: visible;
|
|
|
text-overflow: clip;
|
|
|
- max-width: none;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
/* 调整步骤容器的布局 */
|
|
|
@@ -1159,24 +1171,24 @@ watch(
|
|
|
}
|
|
|
|
|
|
.progress-section {
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
- border-radius: 8px;
|
|
|
padding: 16px;
|
|
|
background-color: #fafafa;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.progress-section:first-child {
|
|
|
- border-color: #409eff;
|
|
|
background-color: #f0f7ff;
|
|
|
+ border-color: #409eff;
|
|
|
}
|
|
|
|
|
|
.progress-section:last-child {
|
|
|
- border-color: #67c23a;
|
|
|
background-color: #f0f9eb;
|
|
|
+ border-color: #67c23a;
|
|
|
}
|
|
|
|
|
|
.progress-title {
|
|
|
- margin: 0 0 16px 0;
|
|
|
+ margin: 0 0 16px;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: #606266;
|
|
|
@@ -1197,15 +1209,15 @@ watch(
|
|
|
|
|
|
:deep(.progress-section .el-empty__description) {
|
|
|
margin-top: 8px;
|
|
|
- color: #909399;
|
|
|
font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
}
|
|
|
|
|
|
/* 核心:强制合同名称列的th/td固定宽度+溢出隐藏,确保省略号生效 */
|
|
|
:deep(.contract-name-column) {
|
|
|
width: 200px !important; /* 与脚本中固定宽度一致 */
|
|
|
- min-width: 200px !important;
|
|
|
max-width: 200px !important;
|
|
|
+ min-width: 200px !important;
|
|
|
}
|
|
|
|
|
|
/* 覆盖全局的 overflow: visible,强制单元格溢出隐藏 */
|
|
|
@@ -1215,19 +1227,19 @@ watch(
|
|
|
|
|
|
/* 合同名称单元格:溢出显示省略号(原有样式保留,增加优先级) */
|
|
|
:deep(.contract-name-column .cell) {
|
|
|
+ display: block !important; /* 添加此属性确保省略号生效 */
|
|
|
+ width: 100% !important;
|
|
|
overflow: hidden !important;
|
|
|
text-overflow: ellipsis !important;
|
|
|
white-space: nowrap !important;
|
|
|
- width: 100% !important;
|
|
|
- display: block !important; /* 添加此属性确保省略号生效 */
|
|
|
}
|
|
|
|
|
|
/* 确保合同名称链接也遵守溢出规则 */
|
|
|
:deep(.contract-name-column .el-link) {
|
|
|
display: block !important;
|
|
|
+ width: 100% !important;
|
|
|
overflow: hidden !important;
|
|
|
text-overflow: ellipsis !important;
|
|
|
white-space: nowrap !important;
|
|
|
- width: 100% !important;
|
|
|
}
|
|
|
</style>
|