im-admin/im-admin-ui/src/views/im/setting/indexSetting.vue

<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> -->
  </div>
</template>

<script setup name="Setting" lang="ts">
import { listSetting, updateSetting } from '@/api/im/setting';
import { getCurrentInstance, ref, onMounted, ComponentInternalInstance } 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 translationSettingData = ref({
  type: '',
  appId: '',
  secretKey: '',
  appKey: '',
  appSecret: ''
});

// 翻译配置验证规则
const translationRules = {
  type: [{ required: true, message: '请选择翻译类型', trigger: 'change' }],
  appId: [
    { required: true, message: '请输入APP ID', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  secretKey: [
    { required: true, message: '请输入密钥', trigger: 'blur' },
    { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
  ],
  appKey: [
    { required: true, message: '请输入App Key', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  appSecret: [
    { required: true, message: '请输入密钥', trigger: 'blur' },
    { min: 1, max: 200, message: '长度在 1 到 200 个', trigger: 'blur' }
  ]
};

/** 查询配置列表 */
const getList = async () => {
  loading.value = true;
  try {
    const res = await listSetting();
    //转为json对象
    // 更新翻译配置数据
    if (res.TRANSLATION_SETTING) {
      translationSettingData.value = JSON.parse(res.TRANSLATION_SETTING);
    }
    console.log('成功:', translationSettingData.value);
  } catch (error) {
    ElMessage.error('获取配置失败');
  } finally {
    loading.value = false;
  }
};

/** 提交翻译配置表单 */
const submitTranslationForm = async () => {
  const formRef = proxy.$refs.translationFormRef 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: translationSettingData.value.type,
      appId: translationSettingData.value.appId,
      secretKey: translationSettingData.value.secretKey,
      appKey: translationSettingData.value.appKey,
      appSecret: translationSettingData.value.appSecret
    };
    await updateSetting(params);
    ElMessage.success('翻译配置更新成功');
  } 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();
};

onMounted(() => {
  getList();
});
</script>