sl-ai-ui/src/views/modelMarket/components/addModel.vue

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import {addModel,editModel} from '@/api/modelConfig'
import {modelConfigForm} from '@/api/modelConfig/types'
import {onMounted} from 'vue';

const props = defineProps<{
  modelValue: boolean,
  addOrEdit:string,
  model: modelConfigForm,
}>()
const emit = defineEmits<{ (e: 'update:dialogVisible', value: boolean): void }>()
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const baseInfoFormRef = ref<FormInstance>()

const DEFAULT_FORM: modelConfigForm = {
  modelName: '',
  modelType: '',
  modelVersion: '',
  status: false,
  priority: undefined,
  description: '',
  apiKey: '',
  baseUrl: ''
}
const baseInfoForm = ref<modelConfigForm>({...DEFAULT_FORM})
const rules = reactive<FormRules<modelConfigForm>>(
  {
    modelName:[
      { required:true,message:"请输入模型名称",trigger:"blur" }
    ],
    modelType: [
      {required:true,message:"请输入模型类型",trigger:"blur"}
    ],
    modelVersion: [
      {required:true,message:"请输入模型版本",trigger:"blur"}
    ]
  }
)

const modelTypeOption = ref(['大语言模型'])
const activeName = ref("基本信息")

onMounted(() => {
  if(props.model){
    baseInfoForm.value = {...props.model};
  }
});

const submit = () =>{
  baseInfoFormRef.value?.validate(async(valid:boolean)=>{
    if(valid){
      baseInfoForm.value.status = baseInfoForm.value.status? 1 : 0
      if (props.addOrEdit==="新增"){
        const res = await addModel(baseInfoForm.value)
        if(res.code===0){
          proxy?.$modal.msgSuccess('新增成功')
          emit("update:dialogVisible",false)

        }
      }else {
        const  res = await editModel(baseInfoForm.value)
        if(res.code===0){
          proxy?.$modal.msgSuccess('编辑成功')
          emit("update:dialogVisible",false)
        }
      }
      baseInfoForm.value = {...DEFAULT_FORM}
      baseInfoFormRef.value?.resetFields()

    }
  })
}
</script>

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基本信息" name="基本信息">
      <el-form
        class="form-label"
        ref="baseInfoFormRef"
        :rules="rules"
        :model="baseInfoForm"
      >
        <el-form-item label="服务商">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="模型名称" prop="modelName">
          <el-input placeholder="请输入模型名称,如：GPT-4" v-model="baseInfoForm.modelName">
          </el-input>
        </el-form-item>
        <el-form-item label="模型类型" prop="modelType">
          <el-select v-model="baseInfoForm.modelType">
            <el-option
              v-for="item in modelTypeOption"
              :key = "item"
              :value="item"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模型版本" prop="modelVersion">
          <el-input placeholder="请输入模型版本，如：gpt-4-1106-preview" v-model="baseInfoForm.modelVersion">
          </el-input>
          <span>官方API调用时使用的模型标识符</span>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-input v-model="baseInfoForm.priority">
          </el-input>
          <span>数值越大优先级越高</span>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch active-text="启用" size="large" v-model="baseInfoForm.status" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" placeholder="请输入描述状态" v-model="baseInfoForm.description"></el-input>
        </el-form-item>
        <div class="form-btn">
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click.prevent="submit">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="API配置" name="API配置">
      <el-form class="form-label">
        <el-form-item label="API基础地址">
          <el-input v-model="baseInfoForm.baseUrl" />
          <span>默认继承服务配置，可单独设置</span>
        </el-form-item>
        <el-form-item label="API密钥">
          <el-input type="password" show-password v-model="baseInfoForm.apiKey"/>
          <span>默认继承服务商配置，可单独设置</span>
        </el-form-item>
        <el-form-item label="请求超过时间（秒）">
          <el-input/>
        </el-form-item>
        <el-form-item label="重试次数">
          <el-input/>
        </el-form-item>
        <el-form-item label="请求方法">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="请求头">
          <el-input type="textarea"/>
          <span>JSON格式,支持变量替换</span>
        </el-form-item>
        <div class="form-btn">
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click.prevent="submit">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="高级配置" name="高级配置">
      <el-form class="form-label">
        <el-form-item label="请求模板">
          <el-input type="textarea"/>
          <span>JSON格式，支持参数替换</span>
        </el-form-item>
        <el-form-item label="响应解析器">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="自定义解析器代码">
          <el-input type="textarea"/>
          <span>选择自定义解析器时可编辑</span>
        </el-form-item>
        <el-form-item label="Token计算器">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <div class="form-btn">
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click.prevent="submit">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
.form-label{
  :deep(.el-form-item){
    display: block;
  }
  // 注释
  span{
    color: #abadb4;
    font-size: 12px;
  }
}
.form-btn{
  display: flex;
  justify-content: flex-end;
}

</style>