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'

// ================== 表单数据类型定义 ==================

const props = defineProps<{
    modelValue: {
        vendorCode: string
        vendorName: string
        modelKind: string[]
        logoUrl: string;
        logoFile: File | null;
        isofficial: boolean
        status: boolean
        sortOrder: number | null
    };
}>();

const emit = defineEmits(['update:modelValue']);

const model = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
});

const fileList = ref<any[]>([]);
// 文件变更时更新 logoFile
const handleLogoChange = (file: any) => {
    model.value.logoFile = file.raw; // 获取原始 File 对象
};

// 超出文件数量限制提示
const handleExceed = () => {
    alert('最多只能上传一个文件');
};

// ================== 模型种类选项 ==================
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()
</script>

<template>
  <el-form :model="model" 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="model.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="model.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="model.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="#"
                          :auto-upload="false"
                          :on-change="handleLogoChange"
                          :file-list="fileList"
                          :limit="1"
                          :on-exceed="handleExceed"
                  >
                      <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="model.isofficial" />
          <span class="switch-label">{{ model.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="model.status" />
          <span class="switch-label">{{ model.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="model.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>