工单查看组件

ygtx-ui/src/components/gxtOrder/view.vue

@@ -0,0 +1,266 @@
+<template>
+  <el-dialog title="查看工单详情" v-model="visible" width="1000px" append-to-body @close="handleClose">    <el-row :gutter="20">
+      <!-- 工单信息 -->
+      <el-col :span="8">
+        <div class="info-section">
+          <h3 class="section-title">工单信息</h3>
+          <div class="info-content">
+            <el-form label-width="100px" label-position="top">
+              <el-row :gutter="20">
+                <el-col :span="24">
+                  <el-form-item label="工单编码">{{ formData.workOrderProjectNo || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="工单状态">
+                    <dict-tag :options="workOrderStatusOptions" :value="formData.workOrderStatus" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="风机编号">{{ formData.pcsDeviceName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="维保中心">{{ formData.gxtCenter || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="场站">{{ formData.pcsStationName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="品牌">{{ formData.brand || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="机型">{{ formData.model || '-' }}</el-form-item>
+                </el-col>
+
+                <!--                  <el-col :span="24">-->
+                <!--                    <el-form-item label="维保内容">{{ formData.content || '-' }}</el-form-item>-->
+                <!--                  </el-col>-->
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+
+      <!-- 处理信息 -->
+      <el-col :span="8">
+        <div class="info-section">
+          <h3 class="section-title">处理信息</h3>
+          <div class="info-content">
+            <el-form label-width="100px" label-position="top">
+              <el-row :gutter="20">
+                <el-col :span="24">
+                  <el-form-item label="接单人">{{ formData.acceptUserName || '-'}}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="接单时间">{{ parseTime(formData.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="工作负责人">{{ formData.teamLeaderName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="检修人员">{{ formData.workGroupMemberName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24" v-if="formData.infoEntry == '1'">
+                  <el-form-item label="MIS工单编码">{{ formData.misNo || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24" v-if="formData.infoEntry == '2'">
+                  <el-form-item label="工作票编号">{{ formData.workPermitNum|| '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="开始时间">{{ parseTime(formData.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="结束时间">{{ parseTime(formData.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="外委人员数（人）">{{ formData.wwryNum || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="外来人员数（人）">{{ formData.wlryNum || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="恢复运行时间">{{ parseTime(formData.restartTime,'{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="损失电量（kWh）">{{ formData.lostPower || '-' }}</el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+
+      <!-- 工单流转记录 -->
+      <el-col :span="8">
+        <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}')"
+              >
+                <div class="flow-item">
+                  <h4><dict-tag :options="repairOrderFlowActionTypeOptions" :value="flow.actionType" /></h4>
+                  <p>
+                    <!--                      {{ flow.actionRemark }}<br>-->
+                    {{ flow.operatorName }}
+                  </p>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-form label-position="top">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="维保内容">
+            <div class="content-text">{{ formData.content || '-' }}</div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 附件信息 -->
+    <div class="info-section" v-if="formData.attachmentUrls">
+      <h3 class="section-title">结单附件</h3>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="附件">
+            <preview :limit="8" v-model="formData.attachmentUrls" :filesize="5" disabled></preview>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">关 闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, getCurrentInstance, watch, computed } from 'vue'
+import preview from '@/components/FileUpload/preview.vue'
+import DictTag from '@/components/DictTag'
+
+// 获取当前实例
+const { proxy } = getCurrentInstance()
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  workOrderStatusOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  repairOrderFlowActionTypeOptions: {
+    type: Array,
+    default: () => ([])
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue'])
+
+// 响应式数据
+const visible = ref(false)
+const formData = ref({})
+const flowList = ref([])
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) {
+    // 初始化表单数据
+    formData.value = { ...props.data }
+    // 从repairOrderFlowList属性获取流转记录
+    flowList.value = props.data.workOrderFlowList || []
+  }
+})
+
+// 监听props.data变化
+watch(() => props.data, (newData) => {
+  if (visible.value) {
+    // 只有在对话框打开时才更新数据
+    formData.value = { ...newData }
+    // 从repairOrderFlowList属性获取流转记录
+    flowList.value = newData.workOrderFlowList || []
+  }
+}, { deep: true })
+
+// 监听visible变化
+watch(visible, (val) => {
+  emit('update:modelValue', val)
+})
+
+// 关闭对话框
+const handleClose = () => {
+  visible.value = false
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+}
+// 解析时间函数
+const parseTime = (time, pattern) => {
+  if (!time) return ''
+  return proxy.parseTime(time, pattern)
+}
+</script>
+
+<style scoped>
+.info-section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.info-content {
+  padding: 15px;
+  /* background-color: #f9f9f9; */
+  border-radius: 4px;
+}
+.flow-history {
+  padding: 15px;
+  /* background-color: #f9f9f9; */
+  border-radius: 4px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.flow-item h4 {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+}
+
+.flow-item p {
+  margin: 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.content-text {
+  min-height: 60px;
+  padding: 10px;
+  /* background-color: #f5f5f5; */
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}</style>

ygtx-ui/src/components/repairOrder/view.vue

@@ -0,0 +1,310 @@
+<template>
+  <el-dialog title="查看工单详情" v-model="visible" width="1000px" append-to-body @close="handleClose">
+    <el-row :gutter="20">
+      <!-- 工单信息 -->
+      <el-col :span="8">
+        <div class="info-section">
+          <h3 class="section-title">工单信息</h3>
+          <div class="info-content">
+            <el-form label-width="100px" label-position="top">
+              <el-row :gutter="20">
+                <el-col :span="24">
+                  <el-form-item label="工单编码">{{ formData.workOrderProjectNo }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="工单状态">
+                    <dict-tag :options="workOrderStatusOptions" :value="formData.workOrderStatus" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="风机编号">{{ formData.pcsDeviceName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="维保中心">{{ formData.gxtCenter || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="场站">{{ formData.pcsStationName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="品牌">{{ formData.brand || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="机型">{{ formData.model || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="发生时间">{{ parseTime(formData.occurTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="故障代码">{{ formData.faultCode || '-' }}</el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+
+      <!-- 处理信息 -->
+      <el-col :span="8">
+        <div class="info-section">
+          <h3 class="section-title">处理信息</h3>
+          <div class="info-content">
+            <el-form label-width="100px" label-position="top">
+              <el-row :gutter="20">
+                <el-col :span="24">
+                  <el-form-item label="下发人">{{ formData.assignUserName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="下发时间">{{ parseTime(formData.assignTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="接单人">{{ formData.acceptUserName || '-'}}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="接单时间">{{ parseTime(formData.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="工作负责人">{{ formData.teamLeaderName || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="检修人员">{{ formData.workGroupMemberName || '-' }}</el-form-item>
+                </el-col>
+                <template v-if="formData.repairMethod !== '2'">
+                  <el-col :span="24">
+                    <el-form-item label="工作部位">{{ formattedWorkArea }}</el-form-item>
+                  </el-col>
+                  <el-col :span="24" v-if="formData.infoEntry == 1">
+                    <el-form-item label="MIS工单编码">{{ formData.misOrderNo || '-' }}</el-form-item>
+                  </el-col>
+                  <el-col :span="24" v-if="formData.infoEntry == 2">
+                    <el-form-item label="工票编号">{{ formData.workPermitNum || '-' }}</el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="开始时间">{{ parseTime(formData.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="结束时间">{{ parseTime(formData.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="外委人员数（人）">{{ formData.wwryNum || '-' }}</el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="外来人员数（人）">{{ formData.wlryNum || '-' }}</el-form-item>
+                  </el-col>
+                </template>
+                <template v-if="formData.repairMethod === '2'">
+                  <el-col :span="24">
+                    <el-form-item label="复位方式">
+                      <dict-tag :options="resetMethodOptions" :value="formData.resetMethod" />
+                    </el-form-item>
+                  </el-col>
+                </template>
+                <el-col :span="24">
+                  <el-form-item label="恢复运行时间">{{ parseTime(formData.restartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="损失电量（kWh）">{{ formData.lostPower || '-' }}</el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
+
+      <!-- 工单流转记录 -->
+      <el-col :span="8">
+        <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}')"
+              >
+                <div class="flow-item">
+                  <h4><dict-tag :options="repairOrderFlowActionTypeOptions" :value="flow.actionType" /></h4>
+                  <p>
+                    {{ flow.operatorName }}
+                  </p>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </div>
+      </el-col>    </el-row>
+
+    <el-form label-position="top">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="故障信息">
+            <div class="content-text">{{ formData.faultBarcode || '-' }}</div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="真实故障原因">
+            <div class="content-text">{{ formData.realFailureReason || '-' }}</div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 附件信息 -->
+    <div class="info-section" v-if="formData.attachmentUrls">
+      <h3 class="section-title">结单附件</h3>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="附件">
+            <preview :limit="8" v-model="formData.attachmentUrls" :filesize="5" disabled></preview>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">关 闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, getCurrentInstance, watch, computed } from 'vue'
+import preview from '@/components/FileUpload/preview.vue'
+import DictTag from '@/components/DictTag'
+
+// 获取当前实例
+const { proxy } = getCurrentInstance()
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  workOrderStatusOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  resetMethodOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  repairOrderFlowActionTypeOptions: {
+    type: Array,
+    default: () => ([])
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue'])
+
+// 响应式数据
+const visible = ref(false)
+const formData = ref({})
+const flowList = ref([])
+
+// 计算属性
+const formattedWorkArea = computed(() => {
+  if (!formData.value.workArea) return '-'
+  // 如果是数组，转换为字符串
+  if (Array.isArray(formData.value.workArea)) {
+    return formData.value.workArea.join(',')
+  }
+  return formData.value.workArea
+})
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) {
+    // 初始化表单数据
+    formData.value = { ...props.data }
+    // 从repairOrderFlowList属性获取流转记录
+    flowList.value = props.data.repairOrderFlowList || []
+  }
+})
+
+// 监听props.data变化
+watch(() => props.data, (newData) => {
+  if (visible.value) {
+    // 只有在对话框打开时才更新数据
+    formData.value = { ...newData }
+    // 从repairOrderFlowList属性获取流转记录
+    flowList.value = newData.repairOrderFlowList || []
+  }
+}, { deep: true })
+
+// 监听visible变化
+watch(visible, (val) => {
+  emit('update:modelValue', val)
+})
+// 关闭对话框
+const handleClose = () => {
+  visible.value = false
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+}
+
+// 解析时间函数
+const parseTime = (time, pattern) => {
+  if (!time) return ''
+  return proxy.parseTime(time, pattern)
+}
+</script>
+
+<style scoped>
+.info-section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.info-content {
+  padding: 15px;
+  //background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.flow-history {
+  padding: 15px;
+  //background-color: #f9f9f9;
+  border-radius: 4px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.flow-item h4 {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+}
+
+.flow-item p {
+  margin: 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.content-text {
+  min-height: 60px;
+  padding: 10px;
+  //background-color: #f5f5f5;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+</style>

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

@@ -1120,147 +1120,153 @@
     </el-dialog>
 
     <!-- 查看工单详情对话框 -->
-    <el-dialog title="查看工单详情" v-model="detailDialogVisible" width="1000px" append-to-body>
-      <el-row :gutter="20">
-        <!-- 工单信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">工单信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="工单编码">{{ detailData.workOrderProjectNo || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工单状态">
-                      <dict-tag :options="gxt_work_order_status" :value="detailData.workOrderStatus" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="风机编号">{{ detailData.pcsDeviceName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="维保中心">{{ detailData.gxtCenter || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="场站">{{ detailData.pcsStationName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="品牌">{{ detailData.brand || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="机型">{{ detailData.model || '-' }}</el-form-item>
-                  </el-col>
-
+    <ViewDialog
+        v-model="detailDialogVisible"
+        :data="detailData"
+        :work-order-status-options="gxt_work_order_status"
+        :repair-order-flow-action-type-options="gxt_repair_order_flow_action_type"
+    />
+<!--    <el-dialog title="查看工单详情" v-model="detailDialogVisible" width="1000px" append-to-body>-->
+<!--      <el-row :gutter="20">-->
+<!--        &lt;!&ndash; 工单信息 &ndash;&gt;-->
+<!--        <el-col :span="8">-->
+<!--          <div class="info-section">-->
+<!--            <h3 class="section-title">工单信息</h3>-->
+<!--            <div class="info-content">-->
+<!--              <el-form label-width="100px" label-position="top">-->
+<!--                <el-row :gutter="20">-->
 <!--                  <el-col :span="24">-->
-<!--                    <el-form-item label="维保内容">{{ detailData.content || '-' }}</el-form-item>-->
+<!--                    <el-form-item label="工单编码">{{ detailData.workOrderProjectNo || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="工单状态">-->
+<!--                      <dict-tag :options="gxt_work_order_status" :value="detailData.workOrderStatus" />-->
+<!--                    </el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="风机编号">{{ detailData.pcsDeviceName || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="维保中心">{{ detailData.gxtCenter || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="场站">{{ detailData.pcsStationName || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="品牌">{{ detailData.brand || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="机型">{{ detailData.model || '-' }}</el-form-item>-->
 <!--                  </el-col>-->
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
 
-        <!-- 处理信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">处理信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="接单人">{{ detailData.acceptUserName || '-'}}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单时间">{{ parseTime(detailData.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工作负责人">{{ detailData.teamLeaderName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="检修人员">{{ detailData.workGroupMemberName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24" v-if="detailData.infoEntry == '1'">
-                    <el-form-item label="MIS工单编码">{{ detailData.misNo || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24" v-if="detailData.infoEntry == '2'">
-                    <el-form-item label="工作票编号">{{ detailData.workPermitNum|| '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="开始时间">{{ parseTime(detailData.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="结束时间">{{ parseTime(detailData.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="外委人员数（人）">{{ detailData.wwryNum || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="外来人员数（人）">{{ detailData.wlryNum || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="恢复运行时间">{{ parseTime(detailData.restartTime,'{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="损失电量（kWh）">{{ detailData.lostPower || '-' }}</el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 工单流转记录 -->
-        <el-col :span="8">
-          <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}')"
-                >
-                  <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>
-      <el-form label-position="top">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="维保内容">
-              <div class="content-text">{{ detailData.content || '-' }}</div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <!-- 附件信息 -->
-      <div class="info-section" v-if="detailData.attachmentUrls">
-        <h3 class="section-title">结单附件</h3>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="附件">
-              <preview :limit="8" v-model="detailData.attachmentUrls" :filesize="5" disabled></preview>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="detailDialogVisible = false">关 闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
+<!--&lt;!&ndash;                  <el-col :span="24">&ndash;&gt;-->
+<!--&lt;!&ndash;                    <el-form-item label="维保内容">{{ detailData.content || '-' }}</el-form-item>&ndash;&gt;-->
+<!--&lt;!&ndash;                  </el-col>&ndash;&gt;-->
+<!--                </el-row>-->
+<!--              </el-form>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </el-col>-->
+
+<!--        &lt;!&ndash; 处理信息 &ndash;&gt;-->
+<!--        <el-col :span="8">-->
+<!--          <div class="info-section">-->
+<!--            <h3 class="section-title">处理信息</h3>-->
+<!--            <div class="info-content">-->
+<!--              <el-form label-width="100px" label-position="top">-->
+<!--                <el-row :gutter="20">-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="接单人">{{ detailData.acceptUserName || '-'}}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="接单时间">{{ parseTime(detailData.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="工作负责人">{{ detailData.teamLeaderName || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="检修人员">{{ detailData.workGroupMemberName || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24" v-if="detailData.infoEntry == '1'">-->
+<!--                    <el-form-item label="MIS工单编码">{{ detailData.misNo || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24" v-if="detailData.infoEntry == '2'">-->
+<!--                    <el-form-item label="工作票编号">{{ detailData.workPermitNum|| '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="开始时间">{{ parseTime(detailData.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="结束时间">{{ parseTime(detailData.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="外委人员数（人）">{{ detailData.wwryNum || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="外来人员数（人）">{{ detailData.wlryNum || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="恢复运行时间">{{ parseTime(detailData.restartTime,'{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                  <el-col :span="24">-->
+<!--                    <el-form-item label="损失电量（kWh）">{{ detailData.lostPower || '-' }}</el-form-item>-->
+<!--                  </el-col>-->
+<!--                </el-row>-->
+<!--              </el-form>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </el-col>-->
+
+<!--        &lt;!&ndash; 工单流转记录 &ndash;&gt;-->
+<!--        <el-col :span="8">-->
+<!--          <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}')"-->
+<!--                >-->
+<!--                  <div class="flow-item">-->
+<!--                    <h4><dict-tag :options="gxt_repair_order_flow_action_type" :value="flow.actionType" /></h4>-->
+<!--                    <p>-->
+<!--                      &lt;!&ndash;                      {{ flow.actionRemark }}<br>&ndash;&gt;-->
+<!--                      {{ flow.operatorName }}-->
+<!--                    </p>-->
+<!--                  </div>-->
+<!--                </el-timeline-item>-->
+<!--              </el-timeline>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--      </el-row>-->
+<!--      <el-form label-position="top">-->
+<!--        <el-row>-->
+<!--          <el-col :span="24">-->
+<!--            <el-form-item label="维保内容">-->
+<!--              <div class="content-text">{{ detailData.content || '-' }}</div>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+<!--      </el-form>-->
+<!--      &lt;!&ndash; 附件信息 &ndash;&gt;-->
+<!--      <div class="info-section" v-if="detailData.attachmentUrls">-->
+<!--        <h3 class="section-title">结单附件</h3>-->
+<!--        <el-row>-->
+<!--          <el-col :span="24">-->
+<!--            <el-form-item label="附件">-->
+<!--              <preview :limit="8" v-model="detailData.attachmentUrls" :filesize="5" disabled></preview>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+<!--      </div>-->
+<!--      <template #footer>-->
+<!--        <div class="dialog-footer">-->
+<!--          <el-button @click="detailDialogVisible = false">关 闭</el-button>-->
+<!--        </div>-->
+<!--      </template>-->
+<!--    </el-dialog>-->
 
     <!-- 作废工单对话框 -->
     <el-dialog title="作废工单" v-model="invalidateDialogVisible" width="800px" append-to-body>
@@ -1411,6 +1417,7 @@ import {ElMessageBox} from "element-plus";
 import EquipmentSelectSingle from "@/components/equipmentSelect/single.vue";
 import useUserStore from '@/store/modules/user'
 import SuspendDialog from "@/components/repairOrder/suspend.vue";
+import ViewDialog from "@/components/gxtOrder/view.vue";
 
 // 工作负责人快速检索相关响应式数据
 const showTeamLeaderQuickSelect = ref(false)
@@ -2236,10 +2243,12 @@ function handleDelete(row) {
 
 /** 详情按钮操作 */
 function handleDetail(row) {
+  debugger
   getGxtOrder(row.id).then(response => {
     detailData.value = response.data
     // 从工单详情中获取流转记录
     flowList.value = response.data.workOrderFlowList || []
+    debugger
     detailDialogVisible.value = true
   })
 }

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

@@ -285,279 +285,21 @@
     />
 
     <!-- 维修工单详情对话框 -->
-    <el-dialog title="维修工单详情" v-model="repairDetailDialogVisible" width="1000px" append-to-body>
-      <el-row :gutter="20">
-        <!-- 工单信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">工单信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="工单编码">{{ detailData.workOrderProjectNo }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工单状态">
-                      <dict-tag :options="gxt_work_order_status" :value="detailData.workOrderStatus" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="风机编号">{{ detailData.pcsDeviceName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="维保中心">{{ detailData.gxtCenter || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="场站">{{ detailData.pcsStationName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="品牌">{{ detailData.brand || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="机型">{{ detailData.model || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="发生时间">{{ parseTime(detailData.occurTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="故障代码">{{ detailData.faultCode || '-' }}</el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 处理信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">处理信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="下发人">{{ detailData.assignUserName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="下发时间">{{ parseTime(detailData.assignTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单人">{{ detailData.acceptUserName || '-'}}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单时间">{{ parseTime(detailData.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工作负责人">{{ detailData.teamLeaderName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="检修人员">{{ detailData.workGroupMemberName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="MIS工单编码">{{ detailData.misOrderNo || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="开始时间">{{ parseTime(detailData.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="结束时间">{{ parseTime(detailData.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="恢复运行时间">{{ parseTime(detailData.restartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 工单流转记录 -->
-        <el-col :span="8">
-          <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}')"
-                >
-                  <div class="flow-item">
-                    <h4><dict-tag :options="gxt_repair_order_flow_action_type" :value="flow.actionType" /></h4>
-                    <p>
-                      {{ flow.operatorName }}
-                    </p>
-                  </div>
-                </el-timeline-item>
-              </el-timeline>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-      <el-form label-position="top">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="故障信息">
-              <div class="content-text">{{ detailData.faultBarcode || '-' }}</div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <!-- 附件信息 -->
-      <div class="info-section" v-if="detailData.attachmentUrls">
-        <h3 class="section-title">结单附件</h3>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="附件">
-              <preview :limit="8" v-model="detailData.attachmentUrls" :filesize="5" disabled></preview>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="repairDetailDialogVisible = false">关 闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <ViewDialog
+        v-model="repairDetailDialogVisible"
+        :data="detailData"
+        :work-order-status-options="gxt_work_order_status"
+        :reset-method-options="gxt_reset_method"
+        :repair-order-flow-action-type-options="gxt_repair_order_flow_action_type"
+    />
 
     <!-- 维保工单详情对话框 -->
-    <el-dialog title="维保工单详情" v-model="workDetailDialogVisible" width="1000px" append-to-body>
-      <el-row :gutter="20">
-        <!-- 工单信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">工单信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="工单编码">{{ detailData.workOrderProjectNo }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工单状态">
-                      <dict-tag :options="gxt_work_order_status" :value="detailData.workOrderStatus" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="风机编号">{{ detailData.pcsDeviceName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="维保中心">{{ detailData.gxtCenter || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="场站">{{ detailData.pcsStationName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="品牌">{{ detailData.brand || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="机型">{{ detailData.model || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="维保类型">
-                      <dict-tag :options="gxt_inspection_type" :value="detailData.inspectionType" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 处理信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">处理信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="下发人">{{ detailData.assignUserName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="下发时间">{{ parseTime(detailData.assignTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单人">{{ detailData.acceptUserName || '-'}}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单时间">{{ parseTime(detailData.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工作负责人">{{ detailData.teamLeaderName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="检修人员">{{ detailData.workGroupMemberName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="MIS工单编码">{{ detailData.misNo || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="开始时间">{{ parseTime(detailData.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="结束时间">{{ parseTime(detailData.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="恢复运行时间">{{ parseTime(detailData.restartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 工单流转记录 -->
-        <el-col :span="8">
-          <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}')"
-                >
-                  <div class="flow-item">
-                    <h4><dict-tag :options="gxt_repair_order_flow_action_type" :value="flow.actionType" /></h4>
-                    <p>
-                      {{ flow.operatorName }}
-                    </p>
-                  </div>
-                </el-timeline-item>
-              </el-timeline>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-      <el-form label-position="top">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="维保内容">
-              <div class="content-text">{{ detailData.content || '-' }}</div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <!-- 附件信息 -->
-      <div class="info-section" v-if="detailData.attachmentUrls">
-        <h3 class="section-title">结单附件</h3>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="附件">
-              <preview :limit="8" v-model="detailData.attachmentUrls" :filesize="5" disabled></preview>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="workDetailDialogVisible = false">关 闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <ViewWorkOrderDialog
+        v-model="workDetailDialogVisible"
+        :data="detailData"
+        :work-order-status-options="gxt_work_order_status"
+        :repair-order-flow-action-type-options="gxt_repair_order_flow_action_type"
+    />
 
     <!-- 接单对话框 (维修工单) -->
     <el-dialog title="接单" v-model="acceptRepairDialogVisible" width="800px" append-to-body>
@@ -1699,6 +1441,8 @@ import FinalizeDialog from "@/components/repairOrder/finalize.vue";
 import ReturnDialog from "@/components/repairOrder/return.vue";
 import FinishDialog from "@/components/gxtOrder/finalize.vue";
 import SuspendDialog from "@/components/repairOrder/suspend.vue";
+import ViewDialog from "@/components/repairOrder/view.vue";
+import ViewWorkOrderDialog from "@/components/gxtOrder/view.vue";
 
 const { proxy } = getCurrentInstance();
 const userStore = useUserStore();

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

@@ -1362,188 +1362,13 @@
 <!--    </el-dialog>-->
 
     <!-- 查看工单详情对话框 -->
-    <el-dialog title="查看工单详情" v-model="viewDialogVisible" width="1000px" append-to-body>
-      <el-row :gutter="20">
-        <!-- 工单信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">工单信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="工单编码">{{ viewForm.workOrderProjectNo }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工单状态">
-                      <dict-tag :options="gxt_work_order_status" :value="viewForm.workOrderStatus" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="风机编号">{{ viewForm.pcsDeviceName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="维保中心">{{ viewForm.gxtCenter || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="场站">{{ viewForm.pcsStationName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="品牌">{{ viewForm.brand || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="机型">{{ viewForm.model || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="发生时间">{{ parseTime(viewForm.occurTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="故障代码">{{ viewForm.faultCode || '-' }}</el-form-item>
-                  </el-col>
-<!--                  <el-col :span="24">
-                    <el-form-item label="故障描述">{{ viewForm.faultDesc }}</el-form-item>
-                  </el-col>-->
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 处理信息 -->
-        <el-col :span="8">
-          <div class="info-section">
-            <h3 class="section-title">处理信息</h3>
-            <div class="info-content">
-              <el-form label-width="100px" label-position="top">
-                <el-row :gutter="20">
-                  <el-col :span="24">
-                    <el-form-item label="下发人">{{ viewForm.assignUserName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="下发时间">{{ parseTime(viewForm.assignTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单人">{{ viewForm.acceptUserName || '-'}}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="接单时间">{{ parseTime(viewForm.acceptTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="工作负责人">{{ viewForm.teamLeaderName || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="检修人员">{{ viewForm.workGroupMemberName || '-' }}</el-form-item>
-                  </el-col>
-<!--                  <el-col :span="24">-->
-<!--                    <el-form-item label="检修类型">-->
-<!--                      <dict-tag :options="gxt_maintenance_type" :value="viewForm.maintenanceType" />-->
-<!--                    </el-form-item>-->
-<!--                  </el-col>-->
-<!--                  <el-col :span="24">-->
-<!--                    <el-form-item label="维修总结">{{ viewForm.content }}</el-form-item>-->
-<!--                  </el-col>-->
-<!--                  <el-col :span="24">-->
-<!--                    <el-form-item label="维修方式">-->
-<!--                      <dict-tag :options="gxt_repair_method" :value="viewForm.repairMethod" />-->
-<!--                    </el-form-item>-->
-<!--                  </el-col>-->
-                  <template v-if="viewForm.repairMethod !== '2'">
-                    <el-col :span="24">
-                      <el-form-item label="工作部位">{{ formattedWorkArea }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24" v-if="viewForm.infoEntry == 1">
-                      <el-form-item label="MIS工单编码">{{ viewForm.misOrderNo || '-' }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24" v-if="viewForm.infoEntry == 2">
-                    <el-form-item label="工票编号">{{ viewForm.workPermitNum || '-' }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                      <el-form-item label="开始时间">{{ parseTime(viewForm.realStartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                      <el-form-item label="结束时间">{{ parseTime(viewForm.realEndTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                      <el-form-item label="外委人员数（人）">{{ viewForm.wwryNum || '-' }}</el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                      <el-form-item label="外来人员数（人）">{{ viewForm.wlryNum || '-' }}</el-form-item>
-                    </el-col>
-                  </template>
-                  <template v-if="viewForm.repairMethod === '2'">
-                    <el-col :span="24">
-                      <el-form-item label="复位方式">
-                        <dict-tag :options="gxt_reset_method" :value="viewForm.resetMethod" />
-                      </el-form-item>
-                    </el-col>
-                  </template>
-                  <el-col :span="24">
-                    <el-form-item label="恢复运行时间">{{ parseTime(viewForm.restartTime, '{y}-{m}-{d} {h}:{i}') || '-' }}</el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-form-item label="损失电量（kWh）">{{ viewForm.lostPower || '-' }}</el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-          </div>
-        </el-col>
-
-        <!-- 工单流转记录 -->
-        <el-col :span="8">
-          <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}')"
-                >
-                  <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>
-      <el-form label-position="top">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="故障信息">
-              <div class="content-text">{{ viewForm.faultBarcode || '-' }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="真实故障原因">
-              <div class="content-text">{{ viewForm.realFailureReason || '-' }}</div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <!-- 附件信息 -->
-      <div class="info-section" v-if="viewForm.attachmentUrls">
-        <h3 class="section-title">结单附件</h3>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="附件">
-              <preview :limit="8" v-model="viewForm.attachmentUrls" :filesize="5" disabled></preview>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeViewDialog">关 闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <ViewDialog
+        v-model="viewDialogVisible"
+        :data="viewForm"
+        :work-order-status-options="gxt_work_order_status"
+        :reset-method-options="gxt_reset_method"
+        :repair-order-flow-action-type-options="gxt_repair_order_flow_action_type"
+    />
 
     <!-- MIS工单导入对话框 -->
     <el-dialog :title="uploadMis.title" v-model="uploadMis.open" width="400px" append-to-body>
@@ -1642,6 +1467,7 @@ import ResetDialog from '@/components/repairOrder/reset.vue'
 import FinalizeDialog from '@/components/repairOrder/finalize.vue'
 import ReturnDialog from '@/components/repairOrder/return.vue'
 import SuspendDialog from '@/components/repairOrder/suspend.vue'
+import ViewDialog from '@/components/repairOrder/view.vue'
 
 const { proxy } = getCurrentInstance()
 const { gxt_maintenance_type, gxt_work_order_status, gxt_order_priority_type,gxt_repair_order_flow_action_type,gxt_order_suspend_reason,gxt_repair_method,gxt_reset_method,gxt_return_type,gxt_info_entry,gxt_work_area } = proxy.useDict("gxt_maintenance_type", "gxt_work_order_status", "gxt_order_priority_type","gxt_repair_order_flow_action_type","gxt_order_suspend_reason","gxt_repair_method","gxt_reset_method","gxt_return_type","gxt_info_entry","gxt_work_area")