huang
2025-11-20 366ba040d2447bacd3455299425e3166f1f992bb
mes-web/src/views/device/DeviceGroupEditDialog.vue
@@ -1,11 +1,10 @@
<template>
  <el-dialog
    :visible="visible"
    v-model="dialogVisible"
    :title="title"
    width="70%"
    :close-on-click-modal="false"
    @close="handleClose"
    @update:visible="(val) => emit('update:visible', val)"
  >
    <el-form
      ref="formRef"
@@ -51,10 +50,9 @@
            
            <el-form-item label="组类型" prop="groupType">
              <el-select v-model="form.groupType" placeholder="选择组类型">
                <el-option label="设备组" value="设备组" />
                <el-option label="管理组" value="管理组" />
                <el-option label="监控组" value="监控组" />
                <el-option label="维护组" value="维护组" />
                <el-option label="生产线" value="生产线" />
                <el-option label="测试线" value="测试线" />
                <el-option label="辅助设备组" value="辅助设备组" />
              </el-select>
            </el-form-item>
            
@@ -93,7 +91,16 @@
              <el-select v-model="form.groupStatus" placeholder="选择组状态">
                <el-option label="启用" value="ENABLED" />
                <el-option label="禁用" value="DISABLED" />
                <el-option label="维护中" value="MAINTENANCE" />
              </el-select>
            </el-form-item>
            <el-form-item label="执行模式" prop="executionMode">
              <el-radio-group v-model="form.executionMode">
                <el-radio label="SERIAL">串行执行</el-radio>
                <el-radio label="PARALLEL">并行执行</el-radio>
              </el-radio-group>
              <div class="form-tip">串行:按顺序依次执行设备操作;并行:同时执行多个设备操作</div>
            </el-form-item>
            
            <el-form-item label="最大设备数" prop="maxDeviceCount">
@@ -348,16 +355,23 @@
const testing = ref(false)
const saving = ref(false)
const validationResult = ref(null)
// 使用计算属性来同步 visible prop 和内部 dialogVisible
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})
const customParamsText = ref('')
// 表单数据
const form = reactive({
  groupName: '',
  groupCode: '',
  groupType: '设备组',
  groupType: '生产线',
  description: '',
  sortOrder: 0,
  groupStatus: 'ENABLED',
  executionMode: 'SERIAL', // 执行模式:SERIAL串行 / PARALLEL并行
  maxDeviceCount: 100,
  heartbeatInterval: 30,
  connectionTimeout: 10,
@@ -435,17 +449,18 @@
      }
    })
  }
})
}, { immediate: true })
// 方法定义
const resetForm = () => {
  Object.assign(form, {
    groupName: '',
    groupCode: '',
    groupType: '设备组',
    groupType: '生产线',
    description: '',
    sortOrder: 0,
    groupStatus: 'ENABLED',
    executionMode: 'SERIAL',
    maxDeviceCount: 100,
    heartbeatInterval: 30,
    connectionTimeout: 10,
@@ -471,13 +486,31 @@
const loadFormData = () => {
  if (!props.data) return
  
  // 转换后端状态字段到前端格式
  // 后端 status: 0=停用, 1=启用, 2=维护中
  // 前端 groupStatus: "ENABLED"/"DISABLED"/"MAINTENANCE"
  let groupStatus = 'ENABLED'
  if (props.data.status !== undefined) {
    // 优先使用后端的 status 字段
    if (props.data.status === 1) {
      groupStatus = 'ENABLED'
    } else if (props.data.status === 2) {
      groupStatus = 'MAINTENANCE'
    } else {
      groupStatus = 'DISABLED'
    }
  } else if (props.data.groupStatus) {
    // 兼容前端已有的 groupStatus 字段
    groupStatus = props.data.groupStatus
  }
  Object.assign(form, {
    groupName: props.data.groupName || '',
    groupCode: props.data.groupCode || '',
    groupType: props.data.groupType || '设备组',
    groupType: props.data.groupType || '生产线',
    description: props.data.description || '',
    sortOrder: props.data.sortOrder || 0,
    groupStatus: props.data.groupStatus || 'ENABLED',
    groupStatus: groupStatus,
    maxDeviceCount: props.data.maxDeviceCount || 100,
    heartbeatInterval: props.data.heartbeatInterval || 30,
    connectionTimeout: props.data.connectionTimeout || 10,
@@ -493,8 +526,24 @@
    logLevel: props.data.logLevel || 'INFO',
    enableAutoBackup: props.data.enableAutoBackup || false,
    backupInterval: props.data.backupInterval || 24,
    customParams: props.data.customParams || {}
    customParams: props.data.customParams || props.data.extraConfig ? (typeof props.data.extraConfig === 'string' ? JSON.parse(props.data.extraConfig) : props.data.extraConfig) : {}
  })
  // 从customParams或extraConfig中读取executionMode
  let executionMode = 'SERIAL' // 默认串行
  if (form.customParams && form.customParams.executionMode) {
    executionMode = form.customParams.executionMode
  } else if (props.data.extraConfig) {
    try {
      const extraConfig = typeof props.data.extraConfig === 'string' ? JSON.parse(props.data.extraConfig) : props.data.extraConfig
      if (extraConfig.executionMode) {
        executionMode = extraConfig.executionMode
      }
    } catch (e) {
      console.warn('解析extraConfig失败:', e)
    }
  }
  form.executionMode = executionMode
  
  customParamsText.value = JSON.stringify(form.customParams, null, 2)
}
@@ -595,10 +644,33 @@
      return
    }
    
    // 转换前端状态字段到后端格式
    // 前端 groupStatus: "ENABLED"/"DISABLED"/"MAINTENANCE"
    // 后端 status: 0=停用, 1=启用, 2=维护中
    let status = 1 // 默认启用
    if (form.groupStatus === 'ENABLED') {
      status = 1
    } else if (form.groupStatus === 'MAINTENANCE') {
      status = 2
    } else {
      status = 0
    }
    // 将executionMode保存到customParams中,以便后端从extraConfig中读取
    const customParams = {
      ...form.customParams,
      executionMode: form.executionMode
    }
    const config = {
      ...form,
      customParams: form.customParams
      status: status, // 后端需要的 status 字段
      customParams: customParams,
      extraConfig: JSON.stringify(customParams) // 后端使用extraConfig字段
    }
    // 移除前端专用的 groupStatus 和 executionMode 字段,避免后端混淆
    delete config.groupStatus
    delete config.executionMode
    
    const response = isEdit.value
      ? await deviceGroupApi.update(props.data.id, config)