|
|
@@ -1,76 +1,10 @@
|
|
|
-<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-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="model.vendorCode" placeholder="输入服务商编码,如：openai" />
|
|
|
+ <el-input v-model="form.vendorCode" placeholder="输入服务商编码,如：openai" />
|
|
|
<div class="input-tips">英文小写，不含特殊字符，作为系统标识</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -80,10 +14,7 @@ const formRef = ref()
|
|
|
<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-input v-model="form.vendorName" placeholder="输入服务商名称,如：OpenAi" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -92,51 +23,44 @@ const formRef = ref()
|
|
|
<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-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="#"
|
|
|
- :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>
|
|
|
+ <!-- Logo -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="36">
|
|
|
+ <el-form-item label="Logo">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="#"
|
|
|
+ :auto-upload="false"
|
|
|
+ :file-list="fileList"
|
|
|
+ :limit="1"
|
|
|
+ :on-change="handleLogoChange"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ >
|
|
|
+ <el-icon><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-switch v-model="form.isofficial" />
|
|
|
+ <span class="switch-label">{{ form.isofficial ? '是' : '否' }}</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -145,8 +69,8 @@ const formRef = ref()
|
|
|
<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-switch v-model="form.status" />
|
|
|
+ <span class="switch-label">{{ form.status ? '启用' : '未启用' }}</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -154,22 +78,69 @@ const formRef = ref()
|
|
|
<!-- 排序值 -->
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="排序值" >
|
|
|
- <el-input v-model.number="model.sortOrder" placeholder="0" />
|
|
|
+ <el-form-item label="排序值" prop="sortOrder">
|
|
|
+ <el-input v-model.number="form.sortOrder" placeholder="0" />
|
|
|
<div class="input-tips">数值越小越靠前</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
-
|
|
|
</el-form>
|
|
|
</template>
|
|
|
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { UploadFilled } from '@element-plus/icons-vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+
|
|
|
+// ================== 表单数据定义 ==================
|
|
|
+const model = defineModel()
|
|
|
+const form = computed({
|
|
|
+ get: () => model.value,
|
|
|
+ set: (value) => (model.value = value)
|
|
|
+})
|
|
|
+
|
|
|
+// ================== 表单字段 ==================
|
|
|
+const modelKindOption = ['LLM', 'MULTMIMDAL', 'OCR', 'VISION', 'VECTOR', 'RERANK', 'SPEECH', 'OTHER']
|
|
|
+
|
|
|
+// ================== 上传逻辑 ==================
|
|
|
+const fileList = ref<any[]>([])
|
|
|
+
|
|
|
+const handleLogoChange = (file: any) => {
|
|
|
+ form.value.logoFile = file.raw
|
|
|
+ form.value.logoUrl = URL.createObjectURL(file.raw)
|
|
|
+}
|
|
|
+
|
|
|
+const handleExceed = () => {
|
|
|
+ ElMessage.warning('最多只能上传一个文件')
|
|
|
+}
|
|
|
+
|
|
|
+// ================== 表单验证规则 ==================
|
|
|
+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>
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
|
-.input-tips{
|
|
|
+.input-tips {
|
|
|
font-size: 10px;
|
|
|
color: #989a9a;
|
|
|
-
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
.switch-label {
|
|
|
margin-left: 10px;
|
|
|
@@ -177,4 +148,9 @@ const formRef = ref()
|
|
|
color: #666;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
+.upload-demo {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
zhaoen