|
|
@@ -0,0 +1,299 @@
|
|
|
+<template>
|
|
|
+ <div class="wrapper">
|
|
|
+ <el-row>
|
|
|
+ <h3>模型服务商管理</h3>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4" style="margin-left: 20px">
|
|
|
+ <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="服务商编码">
|
|
|
+ <el-input v-model="input" style="width: 240px" placeholder="请输入服务商编码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="服务商种类">
|
|
|
+ <el-select v-model="modelType" placeholder="全部">
|
|
|
+ <el-option
|
|
|
+ v-for="item in modelTypeOption"
|
|
|
+ :value="item"
|
|
|
+ :label="item"
|
|
|
+ :key="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="modelState" placeholder="全部">
|
|
|
+ <el-option
|
|
|
+ v-for="item in modelStateOption"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ :key="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1" :offset="4" style="padding-left: 30px">
|
|
|
+ <el-button type="primary">搜索</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1" style="padding-left: 30px">
|
|
|
+ <el-button>重置</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary">
|
|
|
+ +新增服务商
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button><el-icon><Upload /></el-icon>批量导入</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <el-button><el-icon><Download /></el-icon>导出</el-button>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <!--<div class="content">-->
|
|
|
+ <!-- -->
|
|
|
+ <!--</div>-->
|
|
|
+ <div class="table">
|
|
|
+
|
|
|
+ <el-table :data="models" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" />
|
|
|
+ <el-table-column label="Logo">
|
|
|
+ <template #default="slot">
|
|
|
+ <el-avatar :src="slot.row.logo" size="small" v-if="slot.row.logo" />
|
|
|
+ <span v-else>无</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="服务商编码" prop="providerCode" width="120" />
|
|
|
+ <el-table-column label="服务商名称" prop="providerName" width="120" />
|
|
|
+ <el-table-column label="模型种类" prop="modelType" width="420" />
|
|
|
+ <el-table-column label="官方认证" width="120">
|
|
|
+ <template #default="slot">
|
|
|
+ <el-icon size="15" color="#45D1A6" name="success" v-if="slot.row.officialCertified">
|
|
|
+ <component is="Check" />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon size="15" color="#FF4C4E" name="danger" v-else>
|
|
|
+ <component is="Close" />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="API接入" width="120">
|
|
|
+ <template #default="slot">
|
|
|
+ <el-icon size="15" color="#45D1A6" v-if="slot.row.apiAccess">
|
|
|
+ <component is="Check" />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon size="15" color="#FF4C4E" name="danger" v-else>
|
|
|
+ <component is="Close" />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="120">
|
|
|
+ <template #default="slot">
|
|
|
+ <el-tag
|
|
|
+ :type="
|
|
|
+ slot.row.status === 'active'
|
|
|
+ ? 'success'
|
|
|
+ : slot.row.status === 'configuring'
|
|
|
+ ? 'primary'
|
|
|
+ : 'warning'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ slot.row.status === 'active'
|
|
|
+ ? '启用'
|
|
|
+ : slot.row.status === 'configuring'
|
|
|
+ ? '配置中'
|
|
|
+ : '待配置'
|
|
|
+ }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" prop="createTime" width="240" />
|
|
|
+ <el-table-column label="操作" width="240">
|
|
|
+ <template #default="slot">
|
|
|
+ <!-- 查看 -->
|
|
|
+ <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><View /></el-icon>
|
|
|
+
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><Edit /></el-icon>
|
|
|
+
|
|
|
+ <!-- 启用/禁用图标 -->
|
|
|
+ <el-icon size="15" style="margin-right: 10px;" :color="slot.row.status === 'active' ? '#13ce66' : '#ff4949'">
|
|
|
+ <SwitchButton />
|
|
|
+ </el-icon>
|
|
|
+
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><More /></el-icon>
|
|
|
+
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ <div class="batch-actions">
|
|
|
+ <span>已选择 {{ selectedIds.length }} 项</span>
|
|
|
+ <el-button type="primary" size="small" :disabled="selected.length === 0" @click="batchEnable">批量启用</el-button>
|
|
|
+ <el-button type="danger" size="small" :disabled="selected.length === 0" @click="batchDisable">批量禁用</el-button>
|
|
|
+ <el-button type="warning" size="small" :disabled="selected.length === 0" @click="batchDelete">批量删除</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右下角的分页 -->
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+
|
|
|
+import {Download, More} from "@element-plus/icons-vue";
|
|
|
+import { ref } from 'vue'
|
|
|
+import { View, Edit, List, Check, Close } from '@element-plus/icons-vue'
|
|
|
+const serviceOption = ref(["OpenAI"])
|
|
|
+const modelNameOption = ref(["服务商1","服务商2"])
|
|
|
+const modelTypeOption = ref(["类型1","类型2"])
|
|
|
+const modelStateOption = ref(["全部","开启","关闭"])
|
|
|
+// const models = ref([])
|
|
|
+const total = ref(50) // 总条目数
|
|
|
+const currentPage = ref(1) // 当前页码
|
|
|
+const pageSize = ref(10) // 每页显示条目个数
|
|
|
+const selected = ref<number[]>([]) // 存储选中的行ID
|
|
|
+const modelName = ref(null)
|
|
|
+const modelType = ref(null)
|
|
|
+const service = ref(null)
|
|
|
+const modelState = ref(null)
|
|
|
+// 定义表格数据的类型
|
|
|
+interface ProviderModel {
|
|
|
+ id: number
|
|
|
+ logo?: string
|
|
|
+ providerCode: string
|
|
|
+ providerName: string
|
|
|
+ modelType: string
|
|
|
+ officialCertified: boolean
|
|
|
+ apiAccess: boolean
|
|
|
+ status: 'active' | 'configuring' | 'pending' // 状态枚举
|
|
|
+ createTime: string
|
|
|
+}
|
|
|
+
|
|
|
+// 表格数据
|
|
|
+const models = ref<ProviderModel[]>([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ logo: 'https://via.placeholder.com/40',
|
|
|
+ providerCode: 'PROV001',
|
|
|
+ providerName: '阿里云',
|
|
|
+ modelType: '大语言模型',
|
|
|
+ officialCertified: true,
|
|
|
+ apiAccess: true,
|
|
|
+ status: 'active',
|
|
|
+ createTime: '2025-01-01 10:30',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ logo: 'https://via.placeholder.com/40',
|
|
|
+ providerCode: 'PROV002',
|
|
|
+ providerName: '腾讯云',
|
|
|
+ modelType: '图像识别',
|
|
|
+ officialCertified: false,
|
|
|
+ apiAccess: true,
|
|
|
+ status: 'configuring',
|
|
|
+ createTime: '2025-02-15 10:30',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ logo: 'https://via.placeholder.com/40',
|
|
|
+ providerCode: 'PROV003',
|
|
|
+ providerName: '百度云',
|
|
|
+ modelType: '语音识别',
|
|
|
+ officialCertified: false,
|
|
|
+ apiAccess: false,
|
|
|
+ status: 'pending',
|
|
|
+ createTime: '2025-03-10 10:30',
|
|
|
+ },
|
|
|
+])
|
|
|
+// 批量启用
|
|
|
+const batchEnable = () => {
|
|
|
+ // 实现批量启用逻辑
|
|
|
+}
|
|
|
+
|
|
|
+// 批量禁用
|
|
|
+const batchDisable = () => {
|
|
|
+ // 实现批量禁用逻辑
|
|
|
+}
|
|
|
+
|
|
|
+// 批量删除
|
|
|
+const batchDelete = () => {
|
|
|
+ // 实现批量删除逻辑
|
|
|
+}
|
|
|
+
|
|
|
+// 分页处理
|
|
|
+const handlePageChange = (newPage: number) => {
|
|
|
+ currentPage.value = newPage
|
|
|
+ // 根据新页面加载数据
|
|
|
+}
|
|
|
+
|
|
|
+const selectedIds = ref<number[]>([])
|
|
|
+
|
|
|
+const handleSelectionChange = (selection: ProviderModel[]) => {
|
|
|
+ selectedIds.value = selection.map(item => item.id)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.wrapper{
|
|
|
+ margin:10px auto;
|
|
|
+ width:90%;
|
|
|
+}
|
|
|
+.model-msg{
|
|
|
+ span{
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+}
|
|
|
+.section-type{
|
|
|
+ span{
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.batch-actions {
|
|
|
+ padding: 10px;
|
|
|
+ border-top: 1px solid #EBEEF5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.pagination {
|
|
|
+ position:absolute;
|
|
|
+ right: 0;
|
|
|
+ padding: 10px;
|
|
|
+ border-top: 1px solid #EBEEF5;
|
|
|
+}
|
|
|
+.msg-space{
|
|
|
+ margin-top:5px;
|
|
|
+}
|
|
|
+.content{
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+.table{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
zhaoen