|
|
@@ -8,6 +8,7 @@
|
|
|
<el-form-item label="服务商名称">
|
|
|
<el-input v-model="input" style="width: 240px" placeholder="请输入服务商名称" />
|
|
|
</el-form-item>
|
|
|
+
|
|
|
</el-col>
|
|
|
<el-col :span="5">
|
|
|
<el-form-item label="服务商编码">
|
|
|
@@ -47,9 +48,32 @@
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="2">
|
|
|
- <el-button type="primary">
|
|
|
- +新增服务商
|
|
|
- </el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = true">+新增服务商</el-button>
|
|
|
+ <el-dialog v-model="dialogVisible" title="新增服务商" width="40%">
|
|
|
+
|
|
|
+ <el-form>
|
|
|
+ <!-- Tab 栏 -->
|
|
|
+ <el-tabs tab-position="top" v-model="activeTab" type="card">
|
|
|
+ <el-tab-pane label="基本信息" name="info1">
|
|
|
+ <BasicInfo v-model="formData.info1" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="API配置" name="info2">
|
|
|
+ <ApiInfo v-model="formData.info2" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="附加信息" name="info3">
|
|
|
+ <AdditionInfo v-model="formData.info3" />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <!-- 提交按钮 -->
|
|
|
+ <div style="display: flex; justify-content: flex-end;">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
</el-col>
|
|
|
<el-col :span="1.5">
|
|
|
<el-button><el-icon><Upload /></el-icon>批量导入</el-button>
|
|
|
@@ -162,13 +186,19 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-
|
|
|
-import {Download, More} from "@element-plus/icons-vue";
|
|
|
import { ref } from 'vue'
|
|
|
+import type { TabsInstance, FormInstance } from 'element-plus'
|
|
|
+import {Download, More, UploadFilled} from "@element-plus/icons-vue";
|
|
|
import { View, Edit, List, Check, Close } from '@element-plus/icons-vue'
|
|
|
+import BasicInfo from "@/views/modleServiceProvide/components/BasicInfo.vue";
|
|
|
+import ApiInfo from "@/views/modleServiceProvide/components/ApiInfo.vue";
|
|
|
+import AdditionInfo from "@/views/modleServiceProvide/components/AdditionInfo.vue";
|
|
|
+import components from "../../../vite/plugins/components";
|
|
|
+
|
|
|
+
|
|
|
const serviceOption = ref(["OpenAI"])
|
|
|
const modelNameOption = ref(["服务商1","服务商2"])
|
|
|
-const modelTypeOption = ref(["类型1","类型2"])
|
|
|
+const modelTypeOption = ref(["大语言模型","多模态","OCR","视觉","向量化","重排序","语音"])
|
|
|
const modelStateOption = ref(["全部","开启","关闭"])
|
|
|
// const models = ref([])
|
|
|
const total = ref(50) // 总条目数
|
|
|
@@ -177,6 +207,7 @@ const pageSize = ref(10) // 每页显示条目个数
|
|
|
const selected = ref<number[]>([]) // 存储选中的行ID
|
|
|
const modelName = ref(null)
|
|
|
const modelType = ref(null)
|
|
|
+const activeTab = 'info1'
|
|
|
const service = ref(null)
|
|
|
const modelState = ref(null)
|
|
|
// 定义表格数据的类型
|
|
|
@@ -254,9 +285,111 @@ const selectedIds = ref<number[]>([])
|
|
|
const handleSelectionChange = (selection: ProviderModel[]) => {
|
|
|
selectedIds.value = selection.map(item => item.id)
|
|
|
}
|
|
|
+
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+
|
|
|
+interface Info1 {
|
|
|
+ name: string
|
|
|
+ desc: string
|
|
|
+}
|
|
|
+
|
|
|
+interface Info2 {
|
|
|
+ phone: string
|
|
|
+ email: string
|
|
|
+}
|
|
|
+const formData = ref({
|
|
|
+ info1: { name: '', desc: '' },
|
|
|
+ info2: { phone: '', email: '' },
|
|
|
+ info3: { address: '', remark: '' }
|
|
|
+})
|
|
|
+interface Info3 {
|
|
|
+ address: string
|
|
|
+ remark: string
|
|
|
+}
|
|
|
+
|
|
|
+interface formData {
|
|
|
+ info1: Info1
|
|
|
+ info2: Info2
|
|
|
+ info3: Info3
|
|
|
+}
|
|
|
+
|
|
|
+const form = ref({
|
|
|
+ providerName: '',
|
|
|
+ providerCode: '',
|
|
|
+ modelType: '',
|
|
|
+ logo: '',
|
|
|
+ officialCertified: false,
|
|
|
+ apiAccess: false,
|
|
|
+ status: 'active'
|
|
|
+})
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ providerName: [
|
|
|
+ { required: true, message: '服务商名称不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ providerCode: [
|
|
|
+ { required: true, message: '服务商编码不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ modelType: [
|
|
|
+ { required: true, message: '请选择模型种类', trigger: 'change' }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+// const modelTypeOption = ref(['大语言模型', '图像识别', '语音识别'])
|
|
|
+
|
|
|
+// Logo 上传成功回调
|
|
|
+const handleLogoSuccess = (response, file) => {
|
|
|
+ form.value.logo = URL.createObjectURL(file.raw)
|
|
|
+}
|
|
|
+
|
|
|
+// Logo 上传前校验
|
|
|
+const beforeLogoUpload = (file) => {
|
|
|
+ const isValid = ['image/jpeg', 'image/png'].includes(file.type)
|
|
|
+ if (!isValid) {
|
|
|
+ alert('只能上传 JPG/PNG 文件')
|
|
|
+ }
|
|
|
+ return isValid
|
|
|
+}
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const submitForm = () => {
|
|
|
+ formRef.value.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ // 添加 ID 和 创建时间
|
|
|
+ const newProvider = {
|
|
|
+ ...form.value,
|
|
|
+ id: Math.floor(Math.random() * 10000),
|
|
|
+ createTime: new Date().toLocaleString()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加到表格数据
|
|
|
+ models.value.unshift(newProvider)
|
|
|
+
|
|
|
+ // 关闭弹窗并重置表单
|
|
|
+ dialogVisible.value = false
|
|
|
+ form.value = {
|
|
|
+ providerName: '',
|
|
|
+ providerCode: '',
|
|
|
+ modelType: '',
|
|
|
+ logo: '',
|
|
|
+ officialCertified: false,
|
|
|
+ apiAccess: false,
|
|
|
+ status: 'active'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.input-tips{
|
|
|
+ font-size: 10px;
|
|
|
+ color: #989a9a;
|
|
|
+
|
|
|
+}
|
|
|
.wrapper{
|
|
|
margin:10px auto;
|
|
|
width:90%;
|
|
|
@@ -295,5 +428,9 @@ const handleSelectionChange = (selection: ProviderModel[]) => {
|
|
|
.table{
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
-
|
|
|
+.el-dialog {
|
|
|
+ .el-form {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
zhaoen