pms 瑞都日报 填报 项目任务部分属性 设置表格框线

src/views/pms/iotrddailyreport/FillDailyReportForm.vue

@@ -7,101 +7,116 @@
 
     <!-- 第二部分：项目/任务信息 -->
     <ContentWrap>
-      <el-form :model="dailyReportData" label-width="130px" style="margin-top: 1em">
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="甲方：">
-              <span>{{ dailyReportData.manufactureName || '-' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="合同号：">
-              <span>{{ dailyReportData.contractName || '-' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="井号：">
-              <span>{{ dailyReportData.wellName || dailyReportData.taskName || '-' }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="施工队伍：">
-              <span>{{ dailyReportData.deptName || '-' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="施工地点：">
-              <span>{{ dailyReportData.location || '-' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="工艺：">
-              <span>{{ dailyReportData.techniqueNames || '-' }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="搬迁日期：">
-              <span>{{ formatDate(dailyReportData.dpDate) || '-' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="开工日期：">
-              <span>{{ formatDate(dailyReportData.sgDate) || '-' }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="完工日期：">
-              <span>{{ formatDate(dailyReportData.wgDate) || '-' }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="施工周期D：">
-              <span>{{ constructionPeriod || 0 }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="停待时间D：">
-              <span>{{ dailyReportData.faultDowntime || 0 }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="带班干部：">
-              <span>{{ dailyReportData.responsiblePersonNames || '-' }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="设备配置：">
-              <span>{{ dailyReportData.deviceNames || '-' }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
+      <div class="info-table" style="margin-top: 1em">
+        <!-- 表格行 -->
+        <div class="table-row">
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">甲方：</span>
+              <span class="cell-value">{{ dailyReportData.manufactureName || '-' }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">合同号：</span>
+              <span class="cell-value">{{ dailyReportData.contractName || '-' }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">井号：</span>
+              <span class="cell-value">{{ dailyReportData.wellName || dailyReportData.taskName || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="table-row">
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">施工队伍：</span>
+              <span class="cell-value">{{ dailyReportData.deptName || '-' }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">施工地点：</span>
+              <span class="cell-value">{{ dailyReportData.location || '-' }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">工艺：</span>
+              <span class="cell-value">{{ dailyReportData.techniqueNames || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="table-row">
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">搬迁日期：</span>
+              <span class="cell-value">{{ formatDate(dailyReportData.dpDate) || '-' }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">开工日期：</span>
+              <span class="cell-value">{{ formatDate(dailyReportData.sgDate) || '-' }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">完工日期：</span>
+              <span class="cell-value">{{ formatDate(dailyReportData.wgDate) || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="table-row">
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">施工周期D：</span>
+              <span class="cell-value">{{ constructionPeriod || 0 }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">停待时间D：</span>
+              <span class="cell-value">{{ dailyReportData.faultDowntime || 0 }}</span>
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="cell-content">
+              <span class="cell-label">带班干部：</span>
+              <span class="cell-value">{{ dailyReportData.responsiblePersonNames || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 第五行：设备配置（单独一行） -->
+        <div class="table-row">
+          <div class="table-cell full-width">
+            <div class="cell-content">
+              <span class="cell-label">设备配置：</span>
+              <span class="cell-value">{{ dailyReportData.deviceNames || '-' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </ContentWrap>
 
     <!-- 第三部分：日报填报表单 -->
-    <ContentWrap>
+    <ContentWrap class="section-padding">
       <el-form
         ref="formRef"
         :model="formData"
         :rules="formRules"
         v-loading="formLoading"
         style="margin-top: 1em"
-        label-width="130px"
+        label-width="200px"
       >
         <!-- 第一行：时间节点、施工状态 -->
-        <el-row :gutter="20">
+        <el-row :gutter="30">
           <el-col :span="12">
             <el-form-item label="时间节点" prop="timeRange">
               <el-time-picker
@@ -146,7 +161,7 @@
         </el-row>
 
         <!-- 动态属性区域：施工工艺与当日生产动态之间 -->
-        <el-row v-if="dynamicAttrs.length > 0">
+        <el-row v-if="dynamicAttrs.length > 0" :gutter="30">
           <el-col
             v-for="attr in dynamicAttrs"
             :key="attr.id"
@@ -248,7 +263,7 @@
     </ContentWrap>
 
     <!-- 操作按钮 -->
-    <ContentWrap>
+    <ContentWrap class="section-padding">
       <el-form>
         <el-form-item style="float: right">
           <el-button @click="submitForm" type="primary" :disabled="formLoading">
@@ -607,6 +622,82 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+
+.info-table {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.table-row {
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.table-cell {
+  flex: 1;
+  border-right: 1px solid #e0e0e0;
+  padding: 12px 8px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.table-cell:last-child {
+  border-right: none;
+}
+
+.table-cell.full-width {
+  flex: 1;
+  border-right: none;
+}
+
+.cell-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.cell-label {
+  font-weight: 500;
+  /* 统一字体大小为 14px（Element 表单默认） */
+  font-size: 14px;
+  color: #606266;
+  min-width: 80px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.cell-value {
+  /* 统一字体大小为 14px（Element 输入框默认） */
+  font-size: 14px;
+  color: #303133;
+  /* 统一行高为 1.5（Element 组件默认行高） */
+  line-height: 1.5;
+  flex: 1;
+  word-break: break-all;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .table-row {
+    flex-direction: column;
+  }
+
+  .table-cell {
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .table-cell:last-child {
+    border-bottom: none;
+  }
+}
+
 .daily-report-title {
   text-align: center;
   margin: 20px 0;
@@ -621,6 +712,12 @@ onMounted(async () => {
   font-weight: bold;
 }
 
+/* 为第二、三部分增加左右留白 */
+.section-padding {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
 .project-info-section {
   margin: 20px 0;
   padding: 20px;
@@ -651,4 +748,13 @@ onMounted(async () => {
 :deep(.el-textarea .el-textarea__inner) {
   min-height: 80px;
 }
+
+/* 确保表单label不换行 */
+:deep(.el-form-item__label) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
 </style>