ddac-front/src/views/sdk/components/SDKModal.vue

<template>
  <el-dialog title="1" v-model="dialogVisible" width="50%">
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="instance-form">
      <el-row :gutter="24">
        <!-- 第1行 -->
        <el-col :span="12">
          <el-form-item label="实例唯一标识" prop="instanceId">
            <el-input v-model="formData.instanceId" disabled placeholder="自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属用户" prop="userId">
            <el-select v-model="formData.userId" placeholder="请选择所属用户" style="width: 100%">
              <el-option label="用户A" value="1" />
              <el-option label="用户B" value="2" />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 第2行 -->
        <el-col :span="12">
          <el-form-item label="所属订单" prop="orderId">
            <el-select v-model="formData.orderId" placeholder="请选择所属订单" style="width: 100%">
              <el-option label="订单A" value="1" />
              <el-option label="订单B" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实例名称" prop="instanceName">
            <el-input v-model="formData.instanceName" placeholder="请输入实例名称" />
          </el-form-item>
        </el-col>

        <!-- 第3行 -->
        <el-col :span="12">
          <el-form-item label="实例类型" prop="instanceType">
            <el-input v-model="formData.instanceType" placeholder="请输入实例类型" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="无数据超时时间" prop="noDataTimeout">
            <el-input v-model="formData.noDataTimeout" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <!-- 第4行：状态与开关组 -->
        <el-col :span="12">
          <el-form-item label="实例状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 这里使用 flex 布局让三个开关并排 -->
          <div class="switch-group">
            <el-form-item label="无心跳通讯" prop="noHeartbeat">
              <el-switch v-model="formData.noHeartbeat" />
            </el-form-item>
            <el-form-item label="是否启用LTS" prop="enableLts">
              <el-switch v-model="formData.enableLts" />
            </el-form-item>
            <el-form-item label="断线自动重连" prop="autoReconnect">
              <el-switch v-model="formData.autoReconnect" />
            </el-form-item>
          </div>
        </el-col>

        <!-- 第5行 -->
        <el-col :span="12">
          <el-form-item label="限制单连接流量每秒NKBps" prop="flowLimit">
            <el-input v-model="formData.flowLimit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限制单连接每秒发送包数" prop="packetLimit">
            <el-input v-model="formData.packetLimit" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <!-- 第6行 -->
        <el-col :span="12">
          <el-form-item label="客户端最大并发数" prop="maxConcurrency">
            <el-input v-model="formData.maxConcurrency" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" class="is-gradient" @click="handleSubmit">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
const dialogVisible = defineModel<boolean>('visible', {
  default: false
})
const formRef = ref<FormInstance>()
const emit = defineEmits(['update:visible'])

const formData = reactive({
  instanceId: '',
  userId: '',
  orderId: '',
  instanceName: '',
  instanceType: '',
  noDataTimeout: '',
  status: 1, // 1:正常 0:禁用
  noHeartbeat: true,
  enableLts: false,
  autoReconnect: true,
  flowLimit: '',
  packetLimit: '',
  maxConcurrency: '',
  remark: ''
})

const rules = reactive<FormRules>({
  userId: [{ required: true, message: '请选择所属用户', trigger: 'change' }],
  orderId: [{ required: true, message: '请选择所属订单', trigger: 'change' }],
  instanceName: [{ required: true, message: '请输入实例名称', trigger: 'blur' }]
})


const close = () => {
  emit('update:visible', false)
}

const confirm = () => {
  emit('update:visible', false)
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('提交的数据：', formData)
      dialogVisible.value = false
    } else {
      console.log('校验失败：', fields)
    }
  })
}

</script>
<style lang="scss" scoped>
.switch-group {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  /* 让组内的 form-item 占满剩余空间 */
  :deep(.el-form-item) {
    flex: 1;
    margin-bottom: 0; // 消除多余的底部边距
  }
}
</style>