提取审批组件

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

@@ -0,0 +1,281 @@
+<template>
+  <el-dialog title="审批挂起申请" v-model="visible" width="800px" append-to-body @close="handleClose">
+    <el-alert type="info" :closable="false" style="border-color: #a855f7; background-color: #f8f5ff; color: #6d28d9; height: 35px;">
+      <template #default>
+        <i class="fa fa-edit mr-2" style="color: #6d28d9;"> 请审批该工单的挂起申请，选择通过或驳回。</i>
+      </template>
+    </el-alert>
+    <!-- 工单信息 -->
+    <h3 class="text-sm font-medium text-gray-800 mb-3"></h3>
+    <el-form label-width="120px" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="工单编码">
+            <el-input v-model="formData.workOrderProjectNo" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="风机编号">
+            <el-input v-model="formData.pcsDeviceName" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="工单状态" prop="workOrderStatus">
+            <el-select v-model="formData.workOrderStatus" disabled>
+              <el-option
+                  v-for="dict in workOrderStatusOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="维保中心">
+            <el-input v-model="formData.gxtCenter" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="场站">
+            <el-input v-model="formData.pcsStationName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="品牌">
+            <el-input v-model="formData.brand" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="机型">
+            <el-input v-model="formData.model" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="formData.infoEntry == 1">
+          <el-form-item label="MIS工单编码">
+            <el-input v-model="formData.misNo" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="formData.infoEntry ==2">
+          <el-form-item label="工作票编号">
+            <el-input v-model="formData.workPermitNum" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="工作负责人">
+            <el-input v-model="formData.teamLeaderName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="挂起原因">
+            <el-select v-model="formData.suspendReason" style="width: 100%" disabled>
+              <el-option
+                  v-for="dict in suspendReasonOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" v-if="formData.suspendReason == '4'">
+        <el-col :span="24">
+          <el-form-item label="说明" prop="suspendExplain">
+            <el-input v-model="formData.suspendExplain" type="textarea" :rows="3" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="维保内容" prop="content">
+            <el-input v-model="formData.content" type="textarea" :rows="3" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 挂起信息 -->
+    <el-form ref="approveRef" :model="formData" :rules="approveRules" label-width="120px" label-position="top">
+      <el-form-item label="驳回理由" prop="rejectionReason">
+        <el-input v-model="formData.rejectionReason" type="textarea" placeholder="请输入驳回理由" :rows="3" />
+      </el-form-item>
+    </el-form>
+    <!--      </div>-->
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit('to_finish')">驳 回</el-button>
+        <el-button type="primary" @click="handleSubmit('suspended')">通 过</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, getCurrentInstance, watch, onMounted } from 'vue'
+// 获取当前实例
+const { proxy } = getCurrentInstance()
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  workOrderStatusOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  suspendReasonOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  onSubmit: {
+    type: Function,
+    default: null
+  }
+})
+
+// // 初始化时设置默认审批状态为通过
+// onMounted(() => {
+//   if (props.data && props.data.approvalStatus) {
+//     formData.value.approvalStatus = props.data.approvalStatus
+//   } else {
+//     formData.value.approvalStatus = 'approved' // 默认为通过
+//   }
+// })
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'success'])
+
+// 响应式数据
+const visible = ref(false)
+const formData = ref({})
+const approveRef = ref()
+
+// 表单验证规则
+const approveRules = ref({
+  rejectionReason: [
+    // { required: true, message: "驳回时审批意见不能为空", trigger: "blur" },
+    {
+      required: true,
+      message: "驳回时审批意见不能为空",
+      trigger: "blur",
+      validator: (rule, value, callback) => {
+        debugger
+        if (formData.value.workOrderStatus === 'to_finish' && !value) {
+          callback(new Error("驳回理由必填"))
+        } else {
+          callback()
+        }
+      }
+    }
+  ]
+})
+
+// // 监听审批状态变化，动态调整验证规则
+// watch(() => formData.value.approvalStatus, (newVal) => {
+//   if (newVal === 'suspended') {
+//     // 通过时不需要验证审批意见
+//     if (approveRules.value.rejectionReason && approveRules.value.rejectionReason[0]) {
+//       approveRules.value.rejectionReason[0].required = false
+//     }
+//   } else {
+//     // 驳回时需要验证审批意见
+//     if (approveRules.value.rejectionReason && approveRules.value.rejectionReason[0]) {
+//       approveRules.value.rejectionReason[0].required = true
+//     }
+//   }
+// }, { immediate: true }) // 立即执行一次以初始化验证规则
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) {
+    // 初始化表单数据
+    formData.value = { ...props.data }
+  }
+})
+
+// 监听props.data变化
+watch(() => props.data, (newData) => {
+  if (visible.value) {
+    // 只有在对话框打开时才更新数据
+    formData.value = { ...newData }
+  }
+}, { deep: true })
+
+// 监听visible变化
+watch(visible, (val) => {
+  emit('update:modelValue', val)
+  if (val) {
+    // 打开对话框后重置表单验证错误
+    proxy.$nextTick(() => {
+      if (approveRef.value) {
+        approveRef.value.clearValidate()
+      }
+    })
+  }
+})
+
+// 关闭对话框
+const handleClose = () => {
+  visible.value = false
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+}
+
+// 提交操作
+const handleSubmit = async (approvalStatusValue) => {
+  if (!approveRef.value) return
+
+  formData.value.workOrderStatus = approvalStatusValue
+
+  debugger
+  await approveRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        // 调用父组件传入的提交函数
+        if (props.onSubmit && typeof props.onSubmit === 'function') {
+          // 清除时间字段避免冲突
+          const submitData = { ...formData.value }
+          submitData.createTime = null
+          submitData.updateTime = null
+          await props.onSubmit(submitData)
+        } else {
+          throw new Error("未提供提交方法")
+        }
+
+        proxy.$modal.msgSuccess(approvalStatusValue === 'suspended' ? "审批通过成功" : "审批驳回成功")
+        visible.value = false
+        emit('success')
+      } catch (error) {
+        proxy.$modal.msgError("操作失败: " + (error.message || "未知错误"))
+      }
+    }
+  })
+}</script>
+
+<style scoped>
+/* 表单中的列间距调整 */
+:deep(.el-col) {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+</style>

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

@@ -241,7 +241,7 @@ const parseTime = (time, pattern) => {
   padding: 15px;
   /* background-color: #f9f9f9; */
   border-radius: 4px;
-  max-height: 400px;
+  max-height: 600px;
   overflow-y: auto;
 }
 .flow-item h4 {

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

@@ -0,0 +1,269 @@
+<template>
+  <el-dialog title="审批挂起申请" v-model="visible" width="800px" append-to-body @close="handleClose">
+    <el-form ref="approveFormRef" :model="formData" :rules="approveRules" label-width="120px" label-position="top">
+      <el-alert type="info" :closable="false" style="border-color: #a855f7; background-color: #f8f5ff; color: #6d28d9; height: 35px;">
+        <template #default>
+          <i class="fa fa-edit mr-2" style="color: #6d28d9;"> 请审批该工单的挂起申请，选择通过或驳回。</i>
+        </template>
+      </el-alert>      <el-row>
+        <el-col :span="12">
+          <el-form-item label="工单编码">
+            <el-input v-model="formData.workOrderProjectNo" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="风机编号">
+            <el-input v-model="formData.pcsDeviceName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工单状态">
+            <el-select v-model="formData.workOrderStatus" style="width: 100%" disabled>
+              <el-option
+                v-for="dict in workOrderStatusOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="维保中心">
+            <el-input v-model="formData.gxtCenter" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="场站">
+            <el-input v-model="formData.pcsStationName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="品牌">
+            <el-input v-model="formData.brand" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="故障代码">
+            <el-input v-model="formData.faultCode" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="故障信息">
+            <el-input
+              v-model="formData.faultBarcode"
+              type="textarea"
+              placeholder="请输入故障信息"
+              maxlength="100"
+              show-word-limit
+              :rows="3"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工作负责人">
+            <el-input v-model="formData.teamLeaderName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="挂起原因">
+            <el-select v-model="formData.suspendReason" style="width: 100%" disabled>
+              <el-option
+                v-for="dict in suspendReasonOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      <el-col :span="24" v-if="formData.suspendReason == '4'">
+        <el-form-item label="说明" prop="suspendExplain">
+          <el-input
+              v-model="formData.suspendExplain"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入说明"
+              disabled
+          />
+        </el-form-item>
+      </el-col>
+      </el-row>
+      <el-form-item label="审批意见" prop="rejectionReason">
+        <el-input
+          v-model="formData.rejectionReason"
+          type="textarea"
+          placeholder="请输入审批意见"
+          maxlength="100"
+          show-word-limit
+          :rows="3"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit('rejected')">驳 回</el-button>
+        <el-button type="primary" @click="handleSubmit('approved')">通 过</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, getCurrentInstance, watch, onMounted } from 'vue'
+// 获取当前实例
+const { proxy } = getCurrentInstance()
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  workOrderStatusOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  suspendReasonOptions: {
+    type: Array,
+    default: () => ([])
+  },
+  onSubmit: {
+    type: Function,
+    default: null
+  }
+})
+
+// 初始化时设置默认审批状态为通过
+onMounted(() => {
+  if (props.data && props.data.approvalStatus) {
+    formData.value.approvalStatus = props.data.approvalStatus
+  } else {
+    formData.value.approvalStatus = 'approved' // 默认为通过
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'success'])
+
+// 响应式数据
+const visible = ref(false)
+const formData = ref({})
+const approveFormRef = ref()
+
+// 表单验证规则
+const approveRules = ref({
+  rejectionReason: [
+    { required: true, message: "驳回时审批意见不能为空", trigger: "blur" }
+  ]
+})
+
+// 监听审批状态变化，动态调整验证规则
+watch(() => formData.value.approvalStatus, (newVal) => {
+  if (newVal === 'approved') {
+    // 通过时不需要验证审批意见
+    if (approveRules.value.rejectionReason && approveRules.value.rejectionReason[0]) {
+      approveRules.value.rejectionReason[0].required = false
+    }
+  } else {
+    // 驳回时需要验证审批意见
+    if (approveRules.value.rejectionReason && approveRules.value.rejectionReason[0]) {
+      approveRules.value.rejectionReason[0].required = true
+    }
+  }
+}, { immediate: true }) // 立即执行一次以初始化验证规则
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) {
+    // 初始化表单数据
+    formData.value = { ...props.data }
+  }
+})
+
+// 监听props.data变化
+watch(() => props.data, (newData) => {
+  if (visible.value) {
+    // 只有在对话框打开时才更新数据
+    formData.value = { ...newData }
+  }
+}, { deep: true })
+
+// 监听visible变化
+watch(visible, (val) => {
+  emit('update:modelValue', val)
+  if (val) {
+    // 打开对话框后重置表单验证错误
+    proxy.$nextTick(() => {
+      if (approveFormRef.value) {
+        approveFormRef.value.clearValidate()
+      }
+    })
+  }
+})
+
+// 关闭对话框
+const handleClose = () => {
+  visible.value = false
+}
+
+// 取消操作
+const handleCancel = () => {
+  visible.value = false
+}
+
+// 提交操作
+const handleSubmit = async (approvalStatusValue) => {
+  if (!approveFormRef.value) return
+
+  // 设置审批状态
+  formData.value.approvalStatus = approvalStatusValue
+
+  await approveFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        // 驳回时必须填写审批意见
+        if (approvalStatusValue === 'rejected' && !formData.value.rejectionReason) {
+          proxy.$modal.msgError("驳回时审批意见不能为空")
+          return
+        }
+
+        // 通过时清除审批意见
+        if (approvalStatusValue === 'approved') {
+          formData.value.rejectionReason = ''
+        }
+        // 调用父组件传入的提交函数
+        if (props.onSubmit && typeof props.onSubmit === 'function') {
+          // 清除时间字段避免冲突
+          const submitData = { ...formData.value }
+          submitData.createTime = null
+          submitData.updateTime = null
+          await props.onSubmit(submitData)
+        } else {
+          throw new Error("未提供提交方法")
+        }
+
+        proxy.$modal.msgSuccess(approvalStatusValue === 'approved' ? "审批通过成功" : "审批驳回成功")
+        visible.value = false
+        emit('success')
+      } catch (error) {
+        proxy.$modal.msgError("操作失败: " + (error.message || "未知错误"))
+      }
+    }
+  })
+}</script>
+
+<style scoped>
+/* 表单中的列间距调整 */
+:deep(.el-col) {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+</style>

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

@@ -283,7 +283,7 @@ const parseTime = (time, pattern) => {
   padding: 15px;
   //background-color: #f9f9f9;
   border-radius: 4px;
-  max-height: 400px;
+  max-height: 600px;
   overflow-y: auto;
 }
 

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

@@ -988,117 +988,15 @@
     </el-dialog>
 
     <!-- 审批挂起对话框 -->
-    <el-dialog title="审批挂起申请" v-model="approveDialogVisible" width="800px"  append-to-body>
-<!--      <div style="max-height: 500px; overflow-y: auto; padding-right: 10px;">-->
-        <el-alert type="info" :closable="false" style="border-color: #a855f7; background-color: #f8f5ff; color: #6d28d9; height: 35px;">
-          <template #default>
-            <i class="fa fa-edit mr-2" style="color: #6d28d9;"> 请审批该工单的挂起申请，选择通过或驳回。</i>
-          </template>
-        </el-alert>
-
-        <!-- 工单信息 -->
-        <h3 class="text-sm font-medium text-gray-800 mb-3"></h3>
-        <el-form label-width="120px" label-position="top">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="工单编码">
-                <el-input v-model="approveForm.workOrderProjectNo" disabled />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="风机编号">
-                <el-input v-model="approveForm.pcsDeviceName" disabled />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="工单状态" prop="workOrderStatus">
-                <el-select v-model="approveForm.workOrderStatus" disabled>
-                  <el-option
-                      v-for="dict in gxt_work_order_status"
-                      :key="dict.value"
-                      :label="dict.label"
-                      :value="dict.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="维保中心">
-                <el-input v-model="approveForm.gxtCenter" disabled />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="场站">
-                <el-input v-model="approveForm.pcsStationName" disabled />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="品牌">
-                <el-input v-model="approveForm.brand" disabled />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="机型">
-                <el-input v-model="approveForm.model" disabled />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="MIS工单编码">
-                <el-input v-model="approveForm.misNo" disabled />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="工作负责人">
-                <el-input v-model="approveForm.teamLeaderName" disabled />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="挂起原因">
-                <el-select v-model="approveForm.suspendReason" style="width: 100%" disabled>
-                  <el-option
-                      v-for="dict in gxt_order_suspend_reason"
-                      :key="dict.value"
-                      :label="dict.label"
-                      :value="dict.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20">
-            <el-col :span="24">
-              <el-form-item label="维保内容" prop="content">
-                <el-input v-model="approveForm.content" type="textarea" :rows="3" disabled />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-
-        <!-- 挂起信息 -->
-        <el-form ref="approveRef" :model="approveForm" :rules="approveRules" label-width="120px" label-position="top">
-          <el-form-item label="驳回理由" prop="rejectionReason">
-            <el-input v-model="approveForm.rejectionReason" type="textarea" placeholder="请输入驳回理由" :rows="3" />
-          </el-form-item>
-        </el-form>
-<!--      </div>-->
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="approveDialogVisible = false">取 消</el-button>
-<!--          <el-button type="primary" @click="submitApprove">提交审批</el-button>-->
-          <el-button type="primary" @click="submitApprove('to_finish')">驳 回</el-button>
-          <el-button type="primary" @click="submitApprove('suspended')">通 过</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <!-- 审批对话框组件 -->
+    <ApproveDialog
+        v-model="approveDialogVisible"
+        :data="approveForm"
+        :work-order-status-options="gxt_work_order_status"
+        :suspend-reason-options="gxt_order_suspend_reason"
+        :on-submit="submitApproveFromParent"
+        @success="handleApproveSuccess"
+    />
 
     <!-- 流转记录对话框 -->
     <el-dialog title="工单流转记录" v-model="flowDialogVisible" width="900px" append-to-body>
@@ -1418,6 +1316,7 @@ import EquipmentSelectSingle from "@/components/equipmentSelect/single.vue";
 import useUserStore from '@/store/modules/user'
 import SuspendDialog from "@/components/gxtOrder/suspend.vue";
 import ViewDialog from "@/components/gxtOrder/view.vue";
+import ApproveDialog from "@/components/gxtOrder/approve.vue";
 
 // 工作负责人快速检索相关响应式数据
 const showTeamLeaderQuickSelect = ref(false)
@@ -2365,6 +2264,17 @@ function handleSuspendSuccess() {
   getList()
 }
 
+// 在提交审批成功后的回调函数
+async function submitApproveFromParent(data) {
+  await approveWorkOrder(data.id, data)
+}
+
+// 在提交审批成功后的回调函数
+function handleApproveSuccess() {
+  approveDialogVisible.value = false
+  getList()
+}
+
 /** 复运 */
 function handleRestart(row) {
   getGxtOrder(row.id).then(response => {

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

@@ -859,173 +859,24 @@
     </el-dialog>
 
     <!-- 审批对话框 (维修工单) -->
-    <el-dialog title="审批挂起申请" v-model="approveRepairDialogVisible" width="800px" append-to-body>
-
-      <el-alert type="info" :closable="false" style="border-color: #a855f7; background-color: #f8f5ff; color: #6d28d9; height: 35px;">
-        <template #default>
-          <i class="fa fa-edit mr-2" style="color: #6d28d9;"> 请审批该工单的挂起申请，选择通过或驳回。</i>
-        </template>
-      </el-alert>
-      <el-form ref="approveRepairFormRef" :model="approveRepairForm" :rules="approveRepairRules" label-width="120px" label-position="top">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="工单编码"><el-input v-model="approveRepairForm.workOrderProjectNo" disabled /></el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="风机编号"><el-input v-model="approveRepairForm.pcsDeviceName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工单状态">
-              <el-select v-model="approveRepairForm.workOrderStatus" style="width: 100%" disabled>
-                <el-option
-                    v-for="dict in gxt_work_order_status"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="维保中心"><el-input v-model="approveRepairForm.gxtCenter" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="场站"><el-input v-model="approveRepairForm.pcsStationName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="品牌"><el-input v-model="approveRepairForm.brand" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="故障代码"><el-input v-model="approveRepairForm.faultCode" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="故障信息">
-              <el-input
-                v-model="approveRepairForm.faultBarcode"
-                type="textarea"
-                placeholder="请输入故障信息"
-                maxlength="100"
-                show-word-limit
-                :rows="3"
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工作负责人"><el-input v-model="approveRepairForm.teamLeaderName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="挂起原因">
-              <el-select v-model="approveRepairForm.suspendReason" style="width: 100%" disabled>
-                <el-option
-                    v-for="dict in gxt_order_suspend_reason"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="审批意见" prop="rejectionReason">
-          <el-input
-              v-model="approveRepairForm.rejectionReason"
-              type="textarea"
-              placeholder="请输入审批意见"
-              maxlength="100"
-              show-word-limit
-              :rows="3"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="approveRepairDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="submitApproveRepair('rejected')">驳 回</el-button>
-          <el-button type="primary" @click="submitApproveRepair('approved')">通 过</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <ApproveRepairDialog
+        v-model="approveRepairDialogVisible"
+        :data="approveRepairForm"
+        :work-order-status-options="gxt_work_order_status"
+        :suspend-reason-options="gxt_order_suspend_reason"
+        :on-submit="submitApproveFromParent"
+        @success="handleApproveSuccess"
+    />
 
-    <!-- 审批对话框 (维保工单) -->
-    <el-dialog title="审批挂起申请" v-model="approveWorkDialogVisible" width="800px" append-to-body>
-      <el-alert type="info" :closable="false" style="border-color: #a855f7; background-color: #f8f5ff; color: #6d28d9; height: 35px;">
-        <template #default>
-          <i class="fa fa-edit mr-2" style="color: #6d28d9;"> 请审批该工单的挂起申请，选择通过或驳回。</i>
-        </template>
-      </el-alert>
-      <el-form ref="approveWorkFormRef" :model="approveWorkForm" :rules="approveWorkRules" label-width="120px" label-position="top">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="工单编码"><el-input v-model="approveWorkForm.workOrderProjectNo" disabled /></el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="风机编号"><el-input v-model="approveWorkForm.pcsDeviceName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工单状态">
-              <el-select v-model="approveWorkForm.workOrderStatus" style="width: 100%" disabled>
-                <el-option
-                    v-for="dict in gxt_work_order_status"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="维保中心"><el-input v-model="approveWorkForm.gxtCenter" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="场站"><el-input v-model="approveWorkForm.pcsStationName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="品牌"><el-input v-model="approveWorkForm.brand" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="MIS工单编码"><el-input v-model="approveWorkForm.misNo" disabled /></el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="维保内容">
-              <el-input v-model="approveWorkForm.content" type="textarea" :rows="3" disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工作负责人"><el-input v-model="approveWorkForm.teamLeaderName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="挂起原因">
-              <el-select v-model="approveWorkForm.suspendReason" style="width: 100%" disabled>
-                <el-option
-                    v-for="dict in gxt_order_suspend_reason"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="审批意见" prop="rejectionReason">
-          <el-input
-              v-model="approveWorkForm.rejectionReason"
-              type="textarea"
-              placeholder="请输入审批意见"
-              maxlength="100"
-              show-word-limit
-              :rows="3"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="approveWorkDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="submitApproveWork('to_finish')">驳 回</el-button>
-          <el-button type="primary" @click="submitApproveWork('suspended')">通 过</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <!-- 维保审批对话框组件 -->
+    <ApproveDialog
+        v-model="approveWorkDialogVisible"
+        :data="approveWorkForm"
+        :work-order-status-options="gxt_work_order_status"
+        :suspend-reason-options="gxt_order_suspend_reason"
+        :on-submit="submitApproveFromParent"
+        @success="handleApproveSuccess"
+    />
 
     <!-- 复运对话框 (维修工单) -->
     <el-dialog title="复运" v-model="restartRepairDialogVisible" width="800px" append-to-body>
@@ -1414,7 +1265,6 @@ import {
   // finalizeRepairOrder,
   finalizeWorkOrder,
   approveRepairOrder,
-  approveWorkOrder,
   restartRepairOrder,
   restartWorkOrder,
   listMyRate,
@@ -1426,7 +1276,7 @@ import preview from '@/components/FileUpload/preview.vue'
 import MisInfoSelectSingle from "@/components/misInfoSelect/single.vue";
 import useUserStore from '@/store/modules/user'
 import {
-  listRepairOrder,updateRepairOrder,finalizeRepairOrder,getRepairOrder,returnRepairOrder,suspendRepairOrder
+  listRepairOrder,updateRepairOrder,finalizeRepairOrder,getRepairOrder,returnRepairOrder,suspendRepairOrder, approveSuspendRepairOrder
 } from "@/api/gxt/repairOrder";
 import ResetDialog from '@/components/repairOrder/reset.vue'
 import {
@@ -1434,7 +1284,8 @@ import {
   updateGxtOrder,
   completeWorkOrder,
   getGxtOrder,
-  suspendWorkOrder
+  suspendWorkOrder,
+  approveWorkOrder
 } from "@/api/gxt/gxtOrder"
 import EquipmentSelectSingle from "@/components/equipmentSelect/single.vue"
 import FinalizeDialog from "@/components/repairOrder/finalize.vue";
@@ -1444,6 +1295,9 @@ import SuspendDialog from "@/components/repairOrder/suspend.vue";
 import SuspendWorkDialog from "@/components/gxtOrder/suspend.vue";
 import ViewDialog from "@/components/repairOrder/view.vue";
 import ViewWorkOrderDialog from "@/components/gxtOrder/view.vue";
+import ApproveRepairDialog from "@/components/repairOrder/approve.vue";
+import ApproveDialog from "@/components/gxtOrder/approve.vue";
+
 
 const { proxy } = getCurrentInstance();
 const userStore = useUserStore();
@@ -2102,6 +1956,7 @@ function submitFinalizeWork() {
 // 处理审批
 function handleApprove(row) {
   getOrderInfo(row.orderType, row.id).then(response => {
+    debugger
     if (row.orderType === 1) {
       // 维修工单
       approveRepairForm.value = response.data;
@@ -2883,6 +2738,23 @@ function handleSuspend(row) {
     proxy.resetForm("suspendFormRef")
   })
 }
+
+// 在提交审批成功后的回调函数
+async function submitApproveFromParent(data) {
+  if (data.orderType == '1') {
+    await approveSuspendRepairOrder(data)
+  }
+  if (data.orderType == '2') {
+    await approveWorkOrder(data.id, data)
+  }
+}
+
+// 在提交审批成功后的回调函数
+function handleApproveSuccess() {
+  approveRepairDialogVisible.value = false
+  approveWorkDialogVisible.value = false
+  getList()
+}
 </script>
 
 <style scoped>

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

@@ -791,114 +791,6 @@
 <!--      </template>-->
 <!--    </el-dialog>-->
 
-    <!-- 审批对话框 -->
-    <el-dialog title="审批挂起申请" v-model="approveDialogVisible" width="800px" append-to-body @close="closeApproveDialog">
-      <el-alert type="info" :closable="false" style="border-color: #a855f7; background-color: #f8f5ff; color: #6d28d9; height: 35px;">
-        <template #default>
-          <i class="fa fa-edit mr-2" style="color: #6d28d9;"> 请审批该工单的挂起申请，选择通过或驳回。</i>
-        </template>
-      </el-alert>
-      <!-- 工单信息 -->
-      <h3 class="text-sm font-medium text-gray-800 mb-3"></h3>
-      <el-form ref="approveFormRef" :model="approveForm" :rules="approveRules" label-width="120px" label-position="top">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="工单编码"><el-input v-model="approveForm.workOrderProjectNo" disabled /></el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="风机编号"><el-input v-model="approveForm.pcsDeviceName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工单状态">
-              <el-select v-model="approveForm.workOrderStatus" style="width: 100%" disabled>
-                <el-option
-                    v-for="dict in gxt_work_order_status"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="维保中心"><el-input v-model="approveForm.gxtCenter" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="场站"><el-input v-model="approveForm.pcsStationName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="品牌"><el-input v-model="approveForm.brand" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="故障代码"><el-input v-model="approveForm.faultCode" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="故障信息">
-              <el-input
-                v-model="approveForm.faultBarcode"
-                type="textarea"
-                placeholder="请输入故障信息"
-                maxlength="100"
-                show-word-limit
-                :rows="3"
-                disabled
-              />
-            </el-form-item>
-          </el-col>
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="下发人"><el-input v-model="approveForm.assignUserName" disabled /></el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="下发时间"><el-input v-model="approveForm.assignTime" disabled /></el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="接单人"><el-input v-model="approveForm.acceptUserName" disabled /> </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="接单时间"><el-input v-model="approveForm.acceptTime" disabled /> </el-form-item>-->
-<!--          </el-col>-->
-          <el-col :span="12">
-            <el-form-item label="工作负责人"><el-input v-model="approveForm.teamLeaderName" disabled /> </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="挂起原因">
-              <el-select v-model="approveForm.suspendReason" style="width: 100%" disabled>
-                <el-option
-                    v-for="dict in gxt_order_suspend_reason"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-<!--        <el-form-item label="审批决定" prop="approvalStatus">
-          <el-radio-group v-model="approveForm.approvalStatus" @change="toggleRejectionReason">
-            <el-radio label="approved">通过</el-radio>
-            <el-radio label="rejected">驳回</el-radio>
-          </el-radio-group>
-        </el-form-item>-->
-        <el-form-item label="审批意见" prop="rejectionReason">
-          <el-input
-              v-model="approveForm.rejectionReason"
-              type="textarea"
-              placeholder="请输入审批意见"
-              maxlength="100"
-              show-word-limit
-              :rows="3"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeApproveDialog">取 消</el-button>
-          <el-button type="primary" @click="submitApprove('rejected')">驳 回</el-button>
-          <el-button type="primary" @click="submitApprove('approved')">通 过</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
     <!-- 结单对话框组件 -->
     <FinalizeDialog
       v-model="finalizeDialogVisible"
@@ -1370,8 +1262,17 @@
         :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>
+    <!-- 审批对话框组件 -->
+    <ApproveDialog
+      v-model="approveDialogVisible"
+      :data="approveForm"
+      :work-order-status-options="gxt_work_order_status"
+      :suspend-reason-options="gxt_order_suspend_reason"
+      :on-submit="submitApproveFromParent"
+      @success="handleApproveSuccess"
+    />
+
+    <!-- MIS工单导入对话框 -->    <el-dialog :title="uploadMis.title" v-model="uploadMis.open" width="400px" append-to-body>
       <el-upload ref="uploadMisRef" :limit="1" accept=".xlsx, .xls" :headers="uploadMis.headers" :action="uploadMis.url + '?updateSupport=' + uploadMis.updateSupport" :disabled="uploadMis.isUploading" :on-progress="handleFileUploadProgressMis" :on-success="handleFileSuccessMis" :on-change="handleFileChangeMis" :on-remove="handleFileRemoveMis" :auto-upload="false" drag>
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -1468,7 +1369,7 @@ 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'
-
+import ApproveDialog from '@/components/repairOrder/approve.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")
 
@@ -3148,6 +3049,8 @@ function handleApprove(row) {
     approveForm.value.approvalStatus = undefined
     approveForm.value.rejectionReason = undefined
     approveDialogVisible.value = true
+    // 打开对话框后重置表单验证错误
+    proxy.resetForm("approveFormRef")
   })
 }
 
@@ -3307,6 +3210,11 @@ async function submitSuspendFromParent(data) {
   await suspendRepairOrder(data)
 }
 
+// 在提交审批成功后的回调函数
+async function submitApproveFromParent(data) {
+  await approveSuspendRepairOrder(data)
+}
+
 // 在提交挂起成功后的回调函数
 function handleSuspendSuccess() {
   suspendDialogVisible.value = false
@@ -3314,6 +3222,12 @@ function handleSuspendSuccess() {
   getList()
 }
 
+// 在提交审批成功后的回调函数
+function handleApproveSuccess() {
+  approveDialogVisible.value = false
+  resetTimeOutOrder()
+  getList()
+}
 /** 检修人员选择变化 */
 function handleMembersChange(formName) {
   // 默认使用 acceptForm，但也支持其他表单