sl-ai-ui/src/views/modleServiceProvide/components/BasicInfo.vue

<script setup lang="ts">
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// ================== 表单数据类型定义 ==================
interface Form {
  vendorCode: string
  vendorName: string
  modelKind: string[]
  isofficial: boolean
  status: boolean
  sortOrder: number | null
}

// ================== 表单数据初始化 ==================
const form = ref<Form>({
  vendorCode: '',
  vendorName: '',
  modelKind: [],
  isofficial: false,
  status: true,
  sortOrder: null
})

// ================== 模型种类选项 ==================
const modelKindOption = ['大语言模型', '多模态', 'OCR', '视觉', '向量化', '重排序', '语音']

// ================== 表单验证规则 ==================
const rules = {
  vendorCode: [
    { required: true, message: '请输入服务商编码', trigger: 'blur' },
    { pattern: /^[a-z0-9\-_]+$/, message: '只能使用小写字母、数字、下划线或横线', trigger: 'blur' }
  ],
  vendorName: [
    { required: true, message: '请输入服务商名称', trigger: 'blur' }
  ],
  modelKind: [
    { required: true, message: '请选择至少一个模型种类', trigger: 'change' }
  ],
  sortOrder: [
    { required: true, message: '请输入排序值', trigger: 'blur' },
    { type: 'number', message: '必须为数字', trigger: 'blur' }
  ]
}

// ================== 表单引用 ==================
const formRef = ref()

// ================== 提交方法 ==================
const submitForm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('验证通过，准备提交')
      console.log('提交数据：', form.value)
      // 这里可以调用 API 提交数据
    } else {
      ElMessage.error('请检查表单输入')
      return false
    }
  })
}

// ================== 控制对话框显示 ==================
const dialogVisible = ref(true)

interface ProviderModel {

}

</script>

<template>
  <el-form :model="form" label-position="top" label-width="100px" :rules="rules" ref="formRef">
    <!-- 服务商编码 -->
    <el-row>
      <el-col :span="24">
        <el-form-item prop="vendorCode" label="服务商编码">
          <template #label>
            <span class="el-form-item__label">服务商编码</span>
          </template>
          <el-input v-model="form.vendorCode" placeholder="输入服务商编码,如：openai" />
          <div class="input-tips">英文小写，不含特殊字符，作为系统标识</div>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 服务商名称 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="vendorName" label="服务商名称">
          <template #label>
            <span class="el-form-item__label">服务商名称</span>
          </template>
          <el-input v-model="form.vendorName" placeholder="输入服务商名称,如：OpenAi" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 模型种类 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item prop="modelKind" label="模型种类">
          <template #label>
            <span class="el-form-item__label">模型种类</span>
          </template>
          <el-checkbox-group v-model="form.modelKind" style="width: 100%">
            <el-checkbox
                v-for="option in modelKindOption"
                :key="option"
                :label="option"
                :value="option"
            />
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- Logo -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="Logo">
          <el-upload
              style="width: 100%"
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              点击或拖拽上传Logo
            </div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 官方认证 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="官方认证">
          <el-switch v-model="form.isofficial" />
          <span class="switch-label">{{ form.isofficial ? '是' : '否' }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 状态 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="状态">
          <el-switch v-model="form.status" />
          <span class="switch-label">{{ form.status ? '启用' : '未启用' }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 排序值 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="排序值" >
          <el-input v-model.number="form.sortOrder" placeholder="0" />
          <div class="input-tips">数值越小越靠前</div>
        </el-form-item>
      </el-col>
    </el-row>


  </el-form>
</template>

<style scoped lang="scss">
.input-tips{
  font-size: 10px;
  color: #989a9a;

}
.switch-label {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
  line-height: 32px;
}
</style>