red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新模型配置字段结构

Browse Source
This commit is contained in:
吴思建
2026-05-09 19:31:09 +08:00
parent d1ef004100
commit cae76234b7
1 changed files with 164 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/views/digitalHuman/modelConfig/modelModule/component/editModule.vue
View File

@@ -2,6 +2,7 @@
<div class="system-edit-module-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
<el-form ref="editModuleFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="140px">
<!-- 基础配置 -->
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="模型名称" prop="modelName">
@@ -39,7 +40,9 @@
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求头绑定" prop="headMsg">
<el-input v-model="state.ruleForm.headMsg" placeholder="格式: key:value,key:value" clearable></el-input>
<el-button @click="showHeaderDialog = true" style="width: 100%">
配置请求头 ({{ state.headers.length }})
</el-button>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -50,47 +53,62 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="最大并发数" prop="maxConcurrency">
<el-input-number v-model="state.ruleForm.maxConcurrency" :min="1" :max="1000" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排队队列上限" prop="queueLimit">
<el-input-number v-model="state.ruleForm.queueLimit" :min="1" :max="10000" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求超时时间(秒)" prop="timeoutSeconds">
<el-input-number v-model="state.ruleForm.timeoutSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="预计执行时间(秒)" prop="expectedSeconds">
<el-input-number v-model="state.ruleForm.expectedSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="失败重试次数" prop="retryTimes">
<el-input-number v-model="state.ruleForm.retryTimes" :min="0" :max="10" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="重试最大排队时间" prop="retryQueueMaxSeconds">
<el-input-number v-model="state.ruleForm.retryQueueMaxSeconds" :min="0" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="自动清理间隔(秒)" prop="autoCleanSeconds">
<el-input-number v-model="state.ruleForm.autoCleanSeconds" :min="0" :max="86400" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="备注说明" prop="remark">
<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注说明" :rows="3" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 高级配置折叠区域 -->
<el-divider content-position="left">
<el-button link type="primary" @click="state.showAdvanced = !state.showAdvanced">
{{ state.showAdvanced ? '收起高级配置' : '展开高级配置' }}
<el-icon class="ml5">
<component :is="state.showAdvanced ? 'ArrowUp' : 'ArrowDown'" />
</el-icon>
</el-button>
</el-divider>
<el-collapse-transition>
<el-row v-show="state.showAdvanced" :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="最大并发数" prop="maxConcurrency">
<el-input-number v-model="state.ruleForm.maxConcurrency" :min="1" :max="1000" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排队队列上限" prop="queueLimit">
<el-input-number v-model="state.ruleForm.queueLimit" :min="1" :max="10000" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求超时时间(秒)" prop="timeoutSeconds">
<el-input-number v-model="state.ruleForm.timeoutSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="预计执行时间(秒)" prop="expectedSeconds">
<el-input-number v-model="state.ruleForm.expectedSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="失败重试次数" prop="retryTimes">
<el-input-number v-model="state.ruleForm.retryTimes" :min="0" :max="10" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="重试最大排队时间" prop="retryQueueMaxSeconds">
<el-input-number v-model="state.ruleForm.retryQueueMaxSeconds" :min="0" :max="3600" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="自动清理间隔(秒)" prop="autoCleanSeconds">
<el-input-number v-model="state.ruleForm.autoCleanSeconds" :min="0" :max="86400" style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-collapse-transition>
</el-form>
<template #footer>
<span class="dialog-footer">
@@ -99,16 +117,37 @@
</span>
</template>
</el-dialog>
<!-- 请求头配置弹窗 -->
<el-dialog v-model="showHeaderDialog" title="配置请求头" width="600px" :close-on-click-modal="false">
<div class="header-config-container">
<div v-for="(header, index) in state.headers" :key="index" class="header-item">
<el-input v-model="header.key" placeholder="请输入 Key" style="width: 40%" clearable></el-input>
<span class="separator">:</span>
<el-input v-model="header.value" placeholder="请输入 Value" style="width: 40%" clearable></el-input>
<el-button type="danger" link @click="removeHeader(index)">删除</el-button>
</div>
<el-button type="primary" link @click="addHeader" style="margin-top: 10px">+ 添加请求头</el-button>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showHeaderDialog = false" size="default">取 消</el-button>
<el-button type="primary" @click="confirmHeaders" size="default">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="systemEditModule">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { addModelModule, updateModelModule } from '/@/api/digitalHuman/modelConfig/modelModule/index';
const editModuleFormRef = ref();
const emit = defineEmits(['refresh']);
const showHeaderDialog = ref(false);
const state = reactive({
ruleForm: {
@@ -147,8 +186,48 @@ const state = reactive({
submitTxt: '',
loading: false,
},
showAdvanced: false, // 是否展开高级配置
headers: [] as Array<{ key: string; value: string }>, // 请求头列表
});
// 解析 headMsg 字符串为数组
const parseHeaders = (headMsg: string) => {
if (!headMsg) return [];
const headers: Array<{ key: string; value: string }> = [];
const pairs = headMsg.split(',');
pairs.forEach((pair) => {
const [key, value] = pair.split(':');
if (key && value) {
headers.push({ key: key.trim(), value: value.trim() });
}
});
return headers;
};
// 将数组转换为 headMsg 字符串
const stringifyHeaders = () => {
return state.headers
.filter((h) => h.key && h.value)
.map((h) => `${h.key}:${h.value}`)
.join(',');
};
// 添加请求头
const addHeader = () => {
state.headers.push({ key: '', value: '' });
};
// 删除请求头
const removeHeader = (index: number) => {
state.headers.splice(index, 1);
};
// 确认请求头配置
const confirmHeaders = () => {
state.ruleForm.headMsg = stringifyHeaders();
showHeaderDialog.value = false;
};
// 打开弹窗
const openDialog = (type: string, row?: any) => {
if (type === 'edit') {
@@ -171,6 +250,8 @@ const openDialog = (type: string, row?: any) => {
autoCleanSeconds: row.autoCleanSeconds,
remark: row.remark || '',
};
// 解析请求头
state.headers = parseHeaders(row.headMsg || '');
state.dialog.title = '修改模型配置';
state.dialog.submitTxt = '修 改';
} else {
@@ -192,11 +273,14 @@ const openDialog = (type: string, row?: any) => {
autoCleanSeconds: 300,
remark: '',
};
// 初始化一个空的请求头
state.headers = [{ key: '', value: '' }];
state.dialog.title = '新增模型配置';
state.dialog.submitTxt = '新 增';
}
state.dialog.type = type;
state.dialog.isShowDialog = true;
state.showAdvanced = false; // 每次打开弹窗时重置为收起状态
};
// 关闭弹窗
@@ -217,11 +301,30 @@ const onSubmit = () => {
state.dialog.loading = true;
try {
// 将 headMsg 转换为 form 的 JSON 格式
// headMsg: "X-API-Key:xxx,operation:true"
// 转换为 form: { "X-API-Key": { "value": "xxx" }, "operation": { "value": "true" } }
const formObj: Record<string, { value: string }> = {};
state.headers.forEach((header) => {
// 去除 key 和 value 的首尾空格
const key = header.key?.trim();
const value = header.value?.trim();
if (key && value) {
formObj[key] = { value: value };
}
});
// 提交数据
const submitData = {
...state.ruleForm,
form: formObj,
};
if (state.dialog.type === 'edit') {
await updateModelModule(state.ruleForm);
await updateModelModule(submitData);
ElMessage.success('修改成功');
} else {
await addModelModule(state.ruleForm);
await addModelModule(submitData);
ElMessage.success('新增成功');
}
closeDialog();
@@ -239,3 +342,26 @@ defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
.ml5 {
margin-left: 5px;
}
.header-config-container {
max-height: 400px;
overflow-y: auto;
}
.header-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.separator {
font-weight: bold;
color: #606266;
}
</style>