La123123.
/
im-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

后台配置页面调整

master
La123123 3 weeks ago
parent
282505ef27
commit
53b50538ce
2 changed files with 238 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 300
      im-admin-ui/src/views/im/setting/indexSetting.vue
  2. 2
      im-admin/ruoyi-im/src/main/java/org/dromara/im/service/impl/ImSettingServiceImpl.java

300
im-admin-ui/src/views/im/setting/indexSetting.vue
View File

@ -1,67 +1,93 @@
<template>
<div class="app-container">
<!-- <el-card class="box-card"> -->
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="翻译配置" name="translation" lazy>
<el-form
ref="translationFormRef"
:model="translationSettingData"
:rules="translationRules"
label-width="120px"
style="max-width: 600px; margin-top: 20px"
>
<el-form-item label="翻译类型" prop="type">
<el-select v-model="translationSettingData.type" placeholder="请选择翻译类型">
<el-option label="默认配置" value="0"></el-option>
<el-option label="百度翻译" value="1"></el-option>
<el-option label="有道翻译" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="translationSettingData.type === '1'" label="APP ID" prop="appId">
<el-input v-model="translationSettingData.appId" placeholder="请输入APP ID"></el-input>
</el-form-item>
<el-form-item v-if="translationSettingData.type === '1'" label="密钥" prop="secretKey">
<el-input v-model="translationSettingData.secretKey" :rows="4" placeholder="请输入密钥"></el-input>
</el-form-item>
<el-form-item v-if="translationSettingData.type === '2'" label="App Key" prop="appKey">
<el-input v-model="translationSettingData.appKey" placeholder="请输入App Key"></el-input>
</el-form-item>
<el-form-item v-if="translationSettingData.type === '2'" label="密钥" prop="appSecret">
<el-input v-model="translationSettingData.appSecret" :rows="4" placeholder="请输入密钥"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitTranslationForm">提交</el-button>
<el-button @click="resetTranslationForm">重置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<!-- </el-card> -->
<el-card shadow="never">
<!-- 总开关：是否使用默认配置 -->
<el-form :model="defaultSettingData" label-width="150px" style="max-width: 600px; margin-bottom: 20px">
<el-form-item label="是否使用默认配置">
<el-switch v-model="defaultSettingData.useDefault" @change="handleDefaultChange" />
</el-form-item>
</el-form>
<!-- 翻译配置选项卡（仅在不使用默认配置时显示） -->
<div v-show="!defaultSettingData.useDefault">
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="百度翻译" name="baidu" lazy>
<el-form ref="baiduFormRef" :model="baiduSettingData" :rules="baiduRules" label-width="120px" style="max-width: 600px; margin-top: 20px">
<el-form-item label="APP ID" prop="appId">
<el-input v-model="baiduSettingData.appId" placeholder="请输入APP ID"></el-input>
</el-form-item>
<el-form-item label="密钥" prop="secretKey">
<el-input v-model="baiduSettingData.secretKey" :rows="4" placeholder="请输入密钥"></el-input>
</el-form-item>
<el-form-item>
<div style="margin-left: 130px; margin-top: 20px">
<el-button type="primary" @click="submitBaiduForm">保存配置</el-button>
</div>
<!-- <el-button @click="resetBaiduForm">重置</el-button> -->
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="有道翻译" name="youdao" lazy>
<el-form
ref="youdaoFormRef"
:model="youdaoSettingData"
:rules="youdaoRules"
label-width="120px"
style="max-width: 600px; margin-top: 20px"
>
<el-form-item label="App Key" prop="appKey">
<el-input v-model="youdaoSettingData.appKey" placeholder="请输入App Key"></el-input>
</el-form-item>
<el-form-item label="密钥" prop="appSecret">
<el-input v-model="youdaoSettingData.appSecret" :rows="4" placeholder="请输入密钥"></el-input>
</el-form-item>
<el-form-item>
<div style="margin-left: 130px; margin-top: 20px">
<el-button type="primary" @click="submitYoudaoForm">保存配置</el-button>
<!-- <el-button @click="resetYoudaoForm">重置</el-button> -->
</div>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<script setup name="Setting" lang="ts">
import { listSetting, updateSetting } from '@/api/im/setting';
import { getCurrentInstance, ref, onMounted, ComponentInternalInstance } from 'vue';
import { getCurrentInstance, ref, onMounted, ComponentInternalInstance, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false);
const loading = ref(true);
const activeTab = ref('translation');
const activeTab = ref('baidu'); // 默认显示百度翻译
// 默认配置数据
const defaultSettingData = ref({
useDefault: false
});
const translationSettingData = ref({
type: '',
// 存储初始获取的数据
const initialBaiduData = ref({});
const initialYoudaoData = ref({});
const baiduSettingData = ref({
appId: '',
secretKey: '',
secretKey: ''
});
const youdaoSettingData = ref({
appKey: '',
appSecret: ''
});
// 翻译配置验证规则
const translationRules = {
type: [{ required: true, message: '请选择翻译类型', trigger: 'change' }],
// 百度翻译配置验证规则
const baiduRules = {
appId: [
{ required: true, message: '请输入APP ID', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
@ -69,7 +95,11 @@ const translationRules = {
secretKey: [
{ required: true, message: '请输入密钥', trigger: 'blur' },
{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
],
]
};
// 有道翻译配置验证规则
const youdaoRules = {
appKey: [
{ required: true, message: '请输入App Key', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
@ -88,9 +118,56 @@ const getList = async () => {
//转为json对象
// 更新翻译配置数据
if (res.TRANSLATION_SETTING) {
translationSettingData.value = JSON.parse(res.TRANSLATION_SETTING);
const parsedData = JSON.parse(res.TRANSLATION_SETTING);
// 根据type判断是否使用默认配置
if (parsedData.type === '0') {
defaultSettingData.value.useDefault = true;
} else {
defaultSettingData.value.useDefault = false;
// 初始化百度和有道的数据并保存初始值
if (parsedData.type === '1') {
Object.assign(baiduSettingData.value, parsedData);
Object.assign(initialBaiduData.value, parsedData); // 保存初始数据
activeTab.value = 'baidu';
} else if (parsedData.type === '2') {
Object.assign(youdaoSettingData.value, parsedData);
Object.assign(initialYoudaoData.value, parsedData); // 保存初始数据
activeTab.value = 'youdao';
}
// 如果两种配置都有数据，也保存下来
if (parsedData.appId) {
Object.assign(initialBaiduData.value, {
appId: parsedData.appId,
secretKey: parsedData.secretKey
});
// 如果当前不是百度配置，也要更新百度配置的数据
if (parsedData.type !== '1') {
Object.assign(baiduSettingData.value, {
appId: parsedData.appId,
secretKey: parsedData.secretKey
});
}
}
if (parsedData.appKey) {
Object.assign(initialYoudaoData.value, {
appKey: parsedData.appKey,
appSecret: parsedData.appSecret
});
// 如果当前不是有道配置，也要更新有道配置的数据
if (parsedData.type !== '2') {
Object.assign(youdaoSettingData.value, {
appKey: parsedData.appKey,
appSecret: parsedData.appSecret
});
}
}
}
}
console.log('成功:', translationSettingData.value);
console.log('成功:', baiduSettingData.value, youdaoSettingData.value);
} catch (error) {
ElMessage.error('获取配置失败');
} finally {
@ -98,9 +175,43 @@ const getList = async () => {
}
};
/** 提交翻译配置表单 */
const submitTranslationForm = async () => {
const formRef = proxy.$refs.translationFormRef as (typeof import('element-plus'))['ElForm'];
/** 处理默认配置开关变化 */
const handleDefaultChange = (value: boolean) => {
if (value) {
// 如果切换到默认配置，发送type为0的请求
updateTranslationSetting({ type: '0' });
} else {
// 如果从默认配置切换到自定义配置，需要显示提示或让用户选择一种自定义配置
ElMessage.info('已切换到自定义配置，请选择并填写翻译配置');
}
};
/** 更新翻译设置 */
const updateTranslationSetting = async (params: any) => {
try {
buttonLoading.value = true;
params.settingName = 'TRANSLATION_SETTING';
await updateSetting(params);
ElMessage.success('翻译配置更新成功');
// 如果设置了默认配置，则更新状态
if (params.type === '0') {
defaultSettingData.value.useDefault = true;
} else {
defaultSettingData.value.useDefault = false;
}
} catch (error) {
console.error('更新翻译配置失败:', error);
ElMessage.error('更新翻译配置失败');
} finally {
buttonLoading.value = false;
}
};
/** 提交百度翻译配置表单 */
const submitBaiduForm = async () => {
const formRef = proxy.$refs.baiduFormRef as (typeof import('element-plus'))['ElForm'];
const isValid = await formRef.validate().catch(() => false);
if (!isValid) return;
@ -109,26 +220,89 @@ const submitTranslationForm = async () => {
buttonLoading.value = true;
const params = {
settingName: 'TRANSLATION_SETTING',
type: translationSettingData.value.type,
appId: translationSettingData.value.appId,
secretKey: translationSettingData.value.secretKey,
appKey: translationSettingData.value.appKey,
appSecret: translationSettingData.value.appSecret
type: '1', // 百度翻译
appId: baiduSettingData.value.appId,
secretKey: baiduSettingData.value.secretKey,
appKey: '', // 有道翻译相关的字段清空
appSecret: ''
};
await updateSetting(params);
ElMessage.success('翻译配置更新成功');
ElMessage.success('百度翻译配置更新成功');
// 更新初始数据
Object.assign(initialBaiduData.value, {
appId: baiduSettingData.value.appId,
secretKey: baiduSettingData.value.secretKey
});
} catch (error) {
console.error('更新翻译配置失败:', error);
ElMessage.error('更新翻译配置失败');
console.error('更新百度翻译配置失败:', error);
ElMessage.error('更新百度翻译配置失败');
} finally {
buttonLoading.value = false;
}
};
/** 提交有道翻译配置表单 */
const submitYoudaoForm = async () => {
const formRef = proxy.$refs.youdaoFormRef as (typeof import('element-plus'))['ElForm'];
const isValid = await formRef.validate().catch(() => false);
if (!isValid) return;
try {
buttonLoading.value = true;
const params = {
settingName: 'TRANSLATION_SETTING',
type: '2', // 有道翻译
appId: '', // 百度翻译相关的字段清空
secretKey: '',
appKey: youdaoSettingData.value.appKey,
appSecret: youdaoSettingData.value.appSecret
};
await updateSetting(params);
ElMessage.success('有道翻译配置更新成功');
// 更新初始数据
Object.assign(initialYoudaoData.value, {
appKey: youdaoSettingData.value.appKey,
appSecret: youdaoSettingData.value.appSecret
});
} catch (error) {
console.error('更新有道翻译配置失败:', error);
ElMessage.error('更新有道翻译配置失败');
} finally {
buttonLoading.value = false;
}
};
/** 重置翻译配置表单 */
const resetTranslationForm = () => {
const formRef = proxy.$refs.translationFormRef as (typeof import('element-plus'))['ElForm'];
formRef.resetFields();
/** 重置百度翻译配置表单 */
const resetBaiduForm = () => {
const formRef = proxy.$refs.baiduFormRef as (typeof import('element-plus'))['ElForm'];
// 重置为初始获取的数据
if (initialBaiduData.value && Object.keys(initialBaiduData.value).length > 0) {
Object.assign(baiduSettingData.value, {
appId: initialBaiduData.value.appId || '',
secretKey: initialBaiduData.value.secretKey || ''
});
} else {
formRef.resetFields();
}
};
/** 重置有道翻译配置表单 */
const resetYoudaoForm = () => {
const formRef = proxy.$refs.youdaoFormRef as (typeof import('element-plus'))['ElForm'];
// 重置为初始获取的数据
if (initialYoudaoData.value && Object.keys(initialYoudaoData.value).length > 0) {
Object.assign(youdaoSettingData.value, {
appKey: initialYoudaoData.value.appKey || '',
appSecret: initialYoudaoData.value.appSecret || ''
});
} else {
formRef.resetFields();
}
};
onMounted(() => {

2
im-admin/ruoyi-im/src/main/java/org/dromara/im/service/impl/ImSettingServiceImpl.java
View File

@ -284,7 +284,7 @@ public class ImSettingServiceImpl implements IImSettingService {
return false;
}
origin.setType("2");
origin.setAppId(value.getStr("appKey"));
origin.setAppKey(value.getStr("appKey"));
origin.setAppSecret(value.getStr("appSecret"));
}

Write Preview
Loading…
Cancel
Save