mes-ai-admin-backend-ui/src/view/ModelConfiguration/aitoken.vue

<template>
  <div class="ai-model-config">
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
        <el-button icon="Refresh" @click="getTableData">刷新</el-button>
        <el-input
          v-model="searchKeyword"
          placeholder="搜索任意字段"
          style="width: 320px; margin-left: auto;"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <el-table v-loading="loading" :data="filteredTableData" row-key="id" style="width: 100%">
        <el-table-column align="left" label="ID" prop="id" width="40" />
        <el-table-column align="left" label="状态" width="70">
          <template #default="scope">
            <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">{{ scope.row.status === '1' ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="API地址名称" prop="supplier" min-width="80" show-overflow-tooltip />
        <el-table-column align="left" label="密钥" prop="api_key" min-width="55" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.api_key ? '***' + String(scope.row.api_key).slice(-4) : '-' }}</template>
        </el-table-column>
        <el-table-column align="left" label="接口地址" prop="api_url" min-width="200" show-overflow-tooltip />
        <el-table-column align="left" label="分组" prop="model_group" width="100" show-overflow-tooltip />
        <el-table-column align="left" label="模型" prop="model_name" min-width="160" show-overflow-tooltip />
        <el-table-column align="left" label="模型别名" prop="model_alias" min-width="160" show-overflow-tooltip />
        <el-table-column align="left" label="模型类型" prop="model_type" min-width="120" show-overflow-tooltip />
        <el-table-column align="left" label="优先级" prop="sort" width="90">
          <template #header>
            <el-tooltip content="同一模型内的优先级，数值越小越优先" placement="top">
              <span>优先级 <el-icon class="el-icon--right"><QuestionFilled /></el-icon></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" width="80" fixed="right">
          <template #default="scope">
            <el-button type="primary" link icon="edit" @click="updateRow(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="type === 'create' ? '新增 AI 模型配置' : '修改 AI 模型配置'"
      width="640px"
      :before-close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio value="1">启用</el-radio>
            <el-radio value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="API地址名称" prop="supplier">
          <el-select
            v-model="form.supplier"
            filterable
            allow-create
            placeholder="选择或输入"
            style="width: 100%"
          >
            <el-option v-for="item in supplierOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="密钥" prop="api_key">
          <el-input
            v-model="form.api_key"
            type="password"
            placeholder="必填"
            show-password
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item label="接口地址" prop="api_url">
          <el-input
            v-model="form.api_url"
            placeholder="必填"
          />
        </el-form-item>
        <el-form-item label="分组" prop="model_group">
          <el-select
            v-model="form.model_group"
            filterable
            allow-create
            placeholder="选择或输入"
            style="width: 100%"
          >
            <el-option v-for="item in modelGroupOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="模型" prop="model_name">
          <el-select
            v-model="form.model_name"
            filterable
            allow-create
            placeholder="选择或输入"
            style="width: 100%"
          >
            <el-option v-for="item in modelNameOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="模型别名" prop="model_alias">
          <el-input
            v-model="form.model_alias"
            placeholder="默认与模型相同"
          />
        </el-form-item>
        <el-form-item label="模型类型" prop="model_type">
          <el-input
            v-model="form.model_type"
            placeholder="必填，多能力逗号分隔如：文生图,图生图"
            @input="(v) => { if (v && v.includes('，')) form.model_type = v.replace(/，/g, ',') }"
          />
        </el-form-item>
        <el-form-item label="优先级" prop="sort">
          <el-tooltip content="同一模型内的优先级，数值越小越优先调用" placement="top">
            <el-input-number
              v-model="form.sort"
              :min="1"
              controls-position="right"
            />
          </el-tooltip>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="enterDialog"
        >确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { GetAIModel, AddAIModel, UpdateAIModel } from '@/api/mes/job'
import { ref, reactive, computed, onMounted } from 'vue'
import { QuestionFilled, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'ApiToken'
})

const formRef = ref(null)
const tableData = ref([])
const dialogVisible = ref(false)
const type = ref('create')
const submitLoading = ref(false)

const form = reactive({
  id: null,
  status: '1',
  supplier: '',
  api_key: '',
  api_url: '',
  model_group: '',
  model_name: '',
  model_alias: '',
  model_type: '',
  sort: 1
})

const formRules = {
  api_key: [{ required: true, message: 'KEY不能为空', trigger: 'blur' }],
  api_url: [{ required: true, message: '接口地址不能为空', trigger: 'blur' }],
  model_name: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
  model_type: [{ required: true, message: '模型类型不能为空', trigger: 'blur' }]
}

const loading = ref(false)
const searchKeyword = ref('')

const supplierOptions = computed(() => {
  const set = new Set()
  tableData.value.forEach((row) => {
    const v = String(row.supplier ?? '').trim()
    if (v) set.add(v)
  })
  return Array.from(set).sort()
})

const modelGroupOptions = computed(() => {
  const set = new Set()
  tableData.value.forEach((row) => {
    const v = String(row.model_group ?? '').trim()
    if (v) set.add(v)
  })
  return Array.from(set).sort()
})

const modelNameOptions = computed(() => {
  const set = new Set()
  tableData.value.forEach((row) => {
    const v = String(row.model_name ?? '').trim()
    if (v) set.add(v)
  })
  return Array.from(set).sort()
})

const filteredTableData = computed(() => {
  const kw = (searchKeyword.value || '').trim().toLowerCase()
  if (!kw) return tableData.value
  return tableData.value.filter((row) => {
    const statusText = row.status === '1' ? '启用' : '禁用'
    const fields = [
      row.id,
      statusText,
      row.supplier,
      row.api_key,
      row.api_url,
      row.model_group,
      row.model_name,
      row.model_alias,
      row.model_type,
      row.sort
    ]
    return fields.some((v) => String(v ?? '').toLowerCase().includes(kw))
  })
})

const getTableData = async () => {
  loading.value = true
  try {
    const res = await GetAIModel({ manage: 1 })
    if (res.code === 0) {
      tableData.value = Array.isArray(res.data) ? res.data : []
    } else {
      ElMessage.error(res.msg || '获取列表失败')
      tableData.value = []
    }
  } catch (e) {
    console.error('GetAIModel error:', e)
    ElMessage.error('获取列表失败，请检查网络或接口')
    tableData.value = []
  } finally {
    loading.value = false
  }
}

const resetForm = () => {
  form.id = null
  form.status = '1'
  form.supplier = ''
  form.api_key = ''
  form.api_url = ''
  form.model_group = ''
  form.model_name = ''
  form.model_alias = ''
  form.model_type = ''
  form.sort = 1
}

const openDialog = () => {
  type.value = 'create'
  resetForm()
  dialogVisible.value = true
}

const updateRow = (row) => {
  type.value = 'update'
  form.id = row.id
  form.status = String(row.status ?? '1')
  form.supplier = row.supplier ?? ''
  form.api_key = row.api_key ?? ''
  form.api_url = row.api_url ?? ''
  form.model_group = row.model_group ?? ''
  form.model_name = row.model_name ?? ''
  form.model_alias = row.model_alias ?? row.model_name ?? ''
  form.model_type = row.model_type ?? ''
  form.sort = Math.max(1, Number(row.sort) || 1)
  dialogVisible.value = true
}

const closeDialog = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
}

const enterDialog = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
  } catch {
    return
  }

  submitLoading.value = true
  try {
    let res
    if (type.value === 'create') {
      res = await AddAIModel({
        status: form.status,
        supplier: form.supplier,
        api_key: form.api_key,
        api_url: form.api_url,
        model_group: form.model_group,
        model_name: form.model_name,
        model_alias: form.model_alias || form.model_name,
        model_type: form.model_type,
        sort: form.sort
      })
    } else {
      res = await UpdateAIModel({
        id: form.id,
        status: form.status,
        supplier: form.supplier,
        api_key: form.api_key,
        api_url: form.api_url,
        model_group: form.model_group,
        model_name: form.model_name,
        model_alias: form.model_alias || form.model_name,
        model_type: form.model_type,
        sort: form.sort
      })
    }

    if (res.code === 0) {
      ElMessage.success(res.msg || '操作成功')
      closeDialog()
      getTableData()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (e) {
    console.error(e)
  } finally {
    submitLoading.value = false
  }
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped></style>