企业模型配置 弹窗修改

src/views/enterpriseModelConfig/components/AddModelDialog.vue

@@ -1,5 +1,4 @@
 <template>
-
   <el-dialog
       v-model="dialogVisible"
       :title="isEdit ? '编辑模型配置' : '新增模型配置'"
@@ -7,7 +6,6 @@
       :close-on-click-modal="false"
       :destroy-on-close="true"
   >
-
     <!-- 步骤导航 -->
     <div class="step-header">
       <div
@@ -171,7 +169,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, defineEmits, defineProps } from 'vue'
+import { ref, reactive, defineEmits, defineProps } from 'vue'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps(['model'])
@@ -180,6 +178,7 @@ const emit = defineEmits(['success'])
 // 弹窗控制
 const dialogVisible = ref(false)
 const currentStep = ref(1)
+const steps = ['选择模型', '基本配置', '参数设置']
 const stepsCompleted = ref([false, false, false])
 const isEdit = ref(false)
 
@@ -254,6 +253,7 @@ const open = (row = null) => {
     form.step2.status = row.status
     form.step2.description = row.description
     form.step3.parameters = row.parameters || []
+    stepsCompleted.value = [true, true, true]
   } else {
     resetForm()
   }
@@ -265,11 +265,11 @@ const onModelSelected = () => {
 
 const nextStep = async () => {
   // const currentRules = getRulesForCurrentStep()
-  // const isValid = await formRef.value.validate(currentRules)
+  // const isValid = await formRef.value.validate(currentRules).catch(() => false)
   // if (!isValid) return
 
-  currentStep.value++
   stepsCompleted.value[currentStep.value - 1] = true
+  currentStep.value++
 }
 
 const prevStep = () => {
@@ -282,10 +282,9 @@ const cancelDialog = () => {
 }
 
 const submitForm = async () => {
-  const isValid = await formRef.value.validate()
+  const isValid = await formRef.value.validate().catch(() => false)
   if (!isValid) return
 
-  // 提交逻辑
   ElMessage.success('保存成功')
   dialogVisible.value = false
   emit('success')
@@ -306,7 +305,6 @@ const deleteParameter = (index) => {
 const resetForm = () => {
   currentStep.value = 1
   stepsCompleted.value = [false, false, false]
-  formRef.value.resetFields()
   form.step1.selectedVendor = ''
   form.step1.selectedModel = ''
   form.step2.modelName = ''
@@ -319,9 +317,11 @@ const resetForm = () => {
   form.step2.description = ''
   form.step3.selectedTemplate = ''
   form.step3.parameters = []
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
 }
 
-// 辅助函数
 const getRulesForCurrentStep = () => {
   const stepRules = {
     1: { selectedModel: rules.selectedModel },
@@ -332,13 +332,13 @@ const getRulesForCurrentStep = () => {
       apiBaseURL: rules.apiBaseURL,
       apiKey: rules.apiKey,
       priority: rules.priority
-    }
+    },
+    3: {}
   }
   return stepRules[currentStep.value]
 }
 
 defineExpose({ open })
-
 </script>
 
 <style scoped>
@@ -347,53 +347,42 @@ defineExpose({ open })
   justify-content: space-between;
   margin-bottom: 20px;
 }
-
 .step-item {
   flex: 1;
   text-align: center;
   position: relative;
-  padding-bottom: 10px;
-  cursor: not-allowed;
+  cursor: pointer;
 }
-
-.step-item.active, .step-item.completed {
-  cursor: default;
-}
-
 .step-item.active .step-number {
   background-color: #409EFF;
   color: white;
 }
-
 .step-item.completed .step-number {
   background-color: #67C23A;
   color: white;
 }
-
 .step-number {
   display: inline-block;
   width: 24px;
   height: 24px;
   line-height: 24px;
   border-radius: 50%;
-  background-color: #E4E7ED;
+  background-color: #ccc;
   margin-right: 8px;
-  font-weight: bold;
 }
-
+.step-title {
+  font-size: 14px;
+}
 .form-tip {
-  margin-top: 4px;
   font-size: 12px;
   color: #999;
+  margin-top: 4px;
 }
-
 .text-gray {
   color: #999;
 }
-
 .dialog-footer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: flex-end;
 }
 </style>

src/views/modleServiceProvide/index.vue

@@ -48,13 +48,14 @@
       </el-row>
     <el-row :gutter="20">
       <el-col :span="2">
-        <el-button type="primary" @click="dialogVisible = true">+新增服务商</el-button>
+        <el-button type="primary" @click="handleadd">+新增服务商</el-button>
 
-        <el-dialog v-model="dialogVisible" title="新增服务商" width="40%">
+        <el-dialog v-model="dialogVisible" :title="mode === 'add' ? '新增服务商' : '编辑服务商'" width="40%">
 
-          <el-form>
+          <!-- 新增表单 -->
+          <el-form v-if="mode === 'add'">
             <!-- Tab 栏 -->
-            <el-tabs  tab-position="top" v-model="activeTab" type="card">
+            <el-tabs tab-position="top" v-model="activeTab" type="card">
               <el-tab-pane label="基本信息" name="info1">
                 <BasicInfo v-model="formData.info1" />
               </el-tab-pane>
@@ -74,6 +75,29 @@
             </div>
           </el-form>
 
+          <!-- 编辑表单 -->
+          <el-form v-if="mode === 'edit'">
+            <!-- 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">
@@ -144,11 +168,13 @@
         <el-table-column label="创建时间" prop="createTime" width="240" />
         <el-table-column label="操作" width="240">
           <template #default="slot">
-            <!-- 查看 传入id进入详情页面 -->
-            <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><View /></el-icon>
+            <el-icon size="15" color="#15A9FF" style="margin-right: 10px;" @click="handleView(slot.row)">
+              <View />
+            </el-icon>
 
-            <!-- 编辑 传递现有信息 打开编辑弹窗 -->
-            <el-icon size="15" color="#15A9FF" style="margin-right: 10px;"><Edit /></el-icon>
+            <el-icon size="15" color="#15A9FF" style="margin-right: 10px;" @click="handleEdit(slot.row)">
+              <Edit />
+            </el-icon>
 
             <!-- 启用/禁用图标 -->
             <el-icon size="15" style="margin-right: 10px;" :color="slot.row.status === 'active' ? '#13ce66' : '#ff4949'">
@@ -194,9 +220,51 @@ 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 { listModelVendor,addModelVendor, ModelVendorQuery, ModelVendorDto } from '@/api/modleServiceProvide';
+import {
+  listModelVendor,
+  addModelVendor,
+  ModelVendorQuery,
+  ModelVendorDto,
+  updateModelVendor
+} from '@/api/modleServiceProvide';
 
 import request from "@/utils/request";
+
+import { useRouter } from 'vue-router'  // 引入 Vue Router
+
+const router = useRouter()
+
+// 查看详情（跳转到详情页）
+const handleView = (row) => {
+  router.push({
+    path: '/modleServiceProvideDetail',
+    query: { id: row.id }  // 假设 row.id 是模型的唯一标识
+  })
+}
+const mode = ref('add')
+// 编辑时的当前行数据
+const currentRow = ref(null)
+
+// 编辑（打开弹窗）
+const handleEdit = (row) => {
+  mode.value = 'edit'
+  currentRow.value = row
+  // 把当前行数据赋值给表单
+  formData.value = {
+    info1: { ...row.info1 },
+    info2: { ...row.info2 },
+    info3: { ...row.info3 }
+  }
+  dialogVisible.value = true
+}
+const handleadd = () =>
+{
+
+  mode.value = 'add'
+
+  dialogVisible.value = true
+}
+
 // 筛选条件
 const filters = ref({
     vendorName: '',
@@ -235,13 +303,42 @@ const queryParams = ref<ModelVendorQuery>({
 const dataList = ref<ModelVendorDto[]>([]);
 const total = ref<number>(0);
 const loading = ref<boolean>(false);
-
+/**
+ * 将后端返回的单个记录转换为 formData 格式
+ */
+const formatToFormData = (record) => {
+  return {
+    info1: {
+      vendorCode: record.vendorCode || '',
+      vendorName: record.vendorName || '',
+      modelKind: record.modelKind ? [record.modelKind] : [], // 假设 modelKind 是字符串，转为数组
+      logoUrl: record.logoUrl || '',
+      logoFile: null, // 文件对象不从后端获取
+      isOfficial: record.isOfficial || false,
+      status: record.status || 0,
+      sortOrder: record.sortOrder || 0
+    },
+    info2: {
+      defaultUrl: record.defaultUrl || '',
+      extraConfig: record.extraConfig || ''
+    },
+    info3: {
+      contactInfo: record.contactInfo || '',
+      website: record.website || '',
+      apiDocUrl: record.apiDocUrl || '',
+      pricingUrl: record.pricingUrl || '',
+      description: record.description || ''
+    }
+  }
+}
 // 获取数据方法
 const getList = async () => {
   loading.value = true;
   try {
     const res = await listModelVendor(queryParams.value);
-    dataList.value = res.data.list;
+    dataList.value = res.data.records.map(formatToFormData);
+    //
+    // dataList.value = res.data.list;
     total.value = res.data.total;
   } catch (error) {
     console.error('获取数据失败:', error);
@@ -342,7 +439,7 @@ const handleSelectionChange = (selection: ProviderModel[]) => {
   selectedIds.value = selection.map(item => item.id)
 }
 
-const dialogVisible = ref(false)
+let dialogVisible = ref(false)
 const formRef = ref<FormInstance>()
 
 
@@ -426,8 +523,16 @@ const submitForm = () => {
     if (data.info1.logoFile) {
         submitData.append('logo', data.info1.logoFile);
     }
+  if(mode.value = 'add')
+  {
+    const res =  addModelVendor(submitData);
+  }
+  else{
+    const  res = updateModelVendor(submitData)
+  }
+
+
 
-   const res =  addModelVendor(submitData);
 
     // 发送请求
     // axios.post('/api/model/vendor/save', submitData, {

src/views/modleServiceProvideDetail/index.vue

@@ -24,7 +24,15 @@ import BasicInfo from "@/views/modleServiceProvideDetail/components/BasicInfo.vu
 import ModleList from "@/views/modleServiceProvideDetail/components/ModleList.vue";
 import ConfigHistory from "@/views/modleServiceProvideDetail/components/ConfigHistory.vue";
 import CallStatistics from "@/views/modleServiceProvideDetail/components/CallStatistics.vue";
+import { useRoute } from 'vue-router'
 
+const route = useRoute()
+const modelId = ref(route.query.id)
+
+onMounted(() => {
+  console.log('当前查看的模型ID：', modelId.value)
+  // 调用接口加载详情数据
+})
 const activeTab = 'info1'
 const formData = ref({
   info1: { name: '', desc: '' },