维修工单调整

ygtx-ui/src/views/gxt/repairOrder/index.vue

@@ -1044,108 +1044,200 @@
     </el-dialog>
     
     <!-- 查看工单详情对话框 -->
-    <el-dialog title="查看工单详情" v-model="viewDialogVisible" width="1200px" append-to-body @close="closeViewDialog">
+    <el-dialog title="查看工单详情" v-model="viewDialogVisible" width="1000px" append-to-body>
       <el-row :gutter="20">
-        <!-- 工单基本信息 -->
-        <el-col :span="16">
-          <el-form :model="viewForm" label-width="100px">
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="工单编号">{{ viewForm.workOrderProjectNo }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="工单状态">
-                  <dict-tag :options="gxt_work_order_status" :value="viewForm.workOrderStatus" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="风机编号">{{ viewForm.pcsDeviceName }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="维保中心">{{ viewForm.gxtCenter }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="场站">{{ viewForm.pcsStationName }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="品牌">{{ viewForm.brand }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="机型">{{ viewForm.model }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="故障代码">{{ viewForm.faultCode }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="故障条纹">{{ viewForm.faultBarcode }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="发生时间">{{ parseTime(viewForm.occurTime) }}</el-form-item>
-              </el-col>
-<!--              <el-col :span="12">
-                <el-form-item label="优先级">
-                  <dict-tag :options="gxt_order_priority_type" :value="viewForm.priorityType" />
-                </el-form-item>
-              </el-col>-->
-              <el-col :span="12">
-                <el-form-item label="MIS工单编码">
-                  {{ viewForm.misOrderNo }}
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="检修类型">
-                  <dict-tag :options="gxt_maintenance_type" :value="viewForm.maintenanceType" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="下发人">{{ viewForm.assignUserName }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="下发时间">{{ parseTime(viewForm.assignTime) }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="接单人">{{ viewForm.acceptUserName }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="接单时间">{{ parseTime(viewForm.acceptTime) }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="工作负责人">{{ viewForm.teamLeaderName }}</el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="检修人员">{{ viewForm.workGroupMemberName }}</el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item label="故障描述">{{ viewForm.faultDesc }}</el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item label="维修内容">
-                {{ viewForm.content }}
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+        <!-- 工单信息 -->
+        <el-col :span="8">
+          <div class="info-section">
+            <h3 class="section-title">工单信息</h3>
+            <div class="info-content">
+              <el-row :gutter="0">
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>工单编号</label>
+                    <p>{{ viewForm.workOrderProjectNo }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>工单状态</label>
+                    <p>
+                      <dict-tag :options="gxt_work_order_status" :value="viewForm.workOrderStatus" />
+                    </p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>风机编号</label>
+                    <p>{{ viewForm.pcsDeviceName }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>维保中心</label>
+                    <p>{{ viewForm.gxtCenter }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>场站</label>
+                    <p>{{ viewForm.pcsStationName }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>品牌</label>
+                    <p>{{ viewForm.brand }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>机型</label>
+                    <p>{{ viewForm.model }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>故障代码</label>
+                    <p>{{ viewForm.faultCode }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>故障条纹</label>
+                    <p>{{ viewForm.faultBarcode }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>发生时间</label>
+                    <p>{{ parseTime(viewForm.occurTime) }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>MIS工单编码</label>
+                    <p>{{ viewForm.misOrderNo }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>故障描述</label>
+                    <p>{{ viewForm.faultDesc }}</p>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
         </el-col>
-        
+
+        <!-- 处理信息 -->
+        <el-col :span="8">
+          <div class="info-section">
+            <h3 class="section-title">处理信息</h3>
+            <div class="info-content">
+              <el-row :gutter="0">
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>下发人</label>
+                    <p>{{ viewForm.assignUserName }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>下发时间</label>
+                    <p>{{ parseTime(viewForm.assignTime) }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>接单人</label>
+                    <p>{{ viewForm.acceptUserName }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>接单时间</label>
+                    <p>{{ parseTime(viewForm.acceptTime) }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>工作负责人</label>
+                    <p>{{ viewForm.teamLeaderName }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>检修人员</label>
+                    <p>{{ viewForm.workGroupMemberName }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>检修类型</label>
+                    <p>
+                      <dict-tag :options="gxt_maintenance_type" :value="viewForm.maintenanceType" />
+                    </p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>维修内容</label>
+                    <p>{{ viewForm.content }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>开始时间</label>
+                    <p>{{ parseTime(viewForm.realStartTime) }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>结束时间</label>
+                    <p>{{ parseTime(viewForm.realEndTime) }}</p>
+                  </div>
+                </el-col>
+                <el-col :span="24">
+                  <div class="info-item">
+                    <label>恢复运行时间</label>
+                    <p>{{ parseTime(viewForm.restartTime) }}</p>
+                  </div>
+                </el-col>
+<!--                <el-col :span="24" v-if="viewForm.suspendReason">
+                  <div class="info-item">
+                    <label>挂起原因</label>
+                    <p>{{ viewForm.suspendReason }}</p>
+                  </div>
+                </el-col>-->
+
+              </el-row>
+            </div>
+          </div>
+        </el-col>
+
         <!-- 工单流转记录 -->
         <el-col :span="8">
-          <div class="flow-history">
-            <h3>工单流转记录</h3>
-            <el-timeline style="margin-left: -30px">
-              <el-timeline-item type="primary"
-                v-for="(flow, index) in flowList"
-                :key="index"
-                :timestamp="parseTime(flow.actionTime, '{y}-{m}-{d} {h}:{i}:{s}')" 
-              >
-                <div class="flow-item">
-                  <h4><dict-tag :options="gxt_repair_order_flow_action_type" :value="flow.actionType" /></h4>
-                  <p>
-<!--                    {{ flow.actionRemark }}<br>-->
-                    {{ flow.operatorName }}
-                  </p>
-                </div>
-              </el-timeline-item>
-            </el-timeline>
+          <div class="info-section">
+            <h3 class="section-title">工单流转</h3>
+            <div class="flow-history">
+              <el-timeline>
+                <el-timeline-item type="primary"
+                  v-for="(flow, index) in flowList"
+                  :key="index"
+                  :timestamp="parseTime(flow.actionTime, '{y}-{m}-{d} {h}:{i}:{s}')" 
+                >
+                  <div class="flow-item">
+                    <h4><dict-tag :options="gxt_repair_order_flow_action_type" :value="flow.actionType" /></h4>
+                    <p>
+<!--                      {{ flow.actionRemark }}<br>-->
+                      {{ flow.operatorName }}
+                    </p>
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -1490,6 +1582,10 @@ onMounted(() => {
   window.addEventListener('resize', handleResize)
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
 /** 查询维修工单列表 */
 function getList() {
   loading.value = true
@@ -2202,16 +2298,6 @@ async function submitRestart() {
   })
 }
 
-onMounted(() => {
-  getList()
-  getMaintenanceCenterAndStationList()
-  getFaultCodeList()
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-})
 </script>
 
 <style scoped>
@@ -2229,10 +2315,53 @@ onUnmounted(() => {
   font-size: 16px;
 }
 
-.flow-history h3 {
+.info-section {
+  padding: 16px 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.section-title {
   font-weight: bold;
   font-size: 16px;
   margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.info-content {
+  height: calc(100% - 30px);
+  overflow-y: auto;
+  overflow-x: hidden; /* 防止横向滚动 */
+  padding: 0 10px; /* 添加内边距防止内容贴边 */
+}
+
+.info-item {
+  margin-bottom: 12px;
+}
+
+.info-item label {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.info-item p {
+  font-size: 14px;
+  color: #333;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.flow-history {
+  height: 100%;
+  padding: 0 10px; /* 添加内边距防止内容贴边 */
+}
+
+.flow-history .el-timeline {
+  margin-left: 0;
+  padding-left: 0;
 }
 
 .flow-item {
@@ -2252,4 +2381,19 @@ onUnmounted(() => {
   line-height: 1.4;
   color: #606266;
 }
-</style>
+
+/* 修复对话框底部按钮点击区域问题 */
+:deep(.el-dialog__footer) {
+  padding: 20px !important;
+  position: relative;
+  z-index: 10;
+}
+
+/* 确保关闭按钮有完整的点击区域 */
+.dialog-footer :deep(.el-button) {
+  padding: 12px 20px;
+  min-width: 80px;
+  z-index: 20;
+  position: relative;
+}
+</style>