kz-ui-base 1.0.149 → 1.0.151

package/api/system/config.js

@@ -66,3 +66,20 @@ export function refreshCache() {
     method: 'delete'
   })
 }
+// 批量保存或更新翻译
+export function batchSaveTranslation(data) {
+  return request({
+    url: '/system/api/i18n/translation/batch-save',
+    method: 'post',
+    data: data
+  })
+}
+
+// 批量获取翻译
+export function batchGetTranslation(data) {
+  return request({
+    url: '/system/api/i18n/translation/batch-get-multi',
+    method: 'post',
+    data: data
+  })
+}

package/components/base/dialog/MultiLanguageDialog.vue

@@ -0,0 +1,245 @@
+<template>
+  <el-dialog
+    :title="t('config.multi_language_config')"
+    :visible.sync="dialogVisible"
+    width="900px"
+    append-to-body
+    v-dialogDrag
+    @close="handleDialogClose"
+  >
+    <div v-for="(columnName, index) in config.dataLangColumnFields" :key="index">
+      <el-card :body-style="{ padding: '10px' }" style="margin-bottom: 15px;">
+        <div slot="header" class="clearfix">
+          <span>{{ getLabelByKey(columnName) }}</span>
+        </div>
+        <el-table :data="getTableData(columnName)" height="300" border size="small">
+          <el-table-column property="value" :label="t('config.value')" />
+          <el-table-column v-for="(lang, langIndex) in languages" :key="langIndex">
+            <template slot="header">
+              <span>{{ lang.label }}</span>
+            </template>
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row[lang.value]"
+                :placeholder="`请输入${lang.label}`"
+                size="small"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ t('config.close') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ t('config.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import request from '@utils/request'
+import { batchSaveTranslation } from './config.js'
+
+export default {
+  name: "MultiLanguageDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    config: {
+      type: Object,
+      default: () => ({
+        entityName: 'sys_config',
+        dataLangColumnFields: [],
+        dataLangIdField: 'id',
+        data: []
+      })
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      languages: [],
+      tableDataMap: {} // 存储每个字段的表格数据
+    }
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val
+    },
+    dialogVisible(val) {
+      this.$emit('update:visible', val)
+      if (val) {
+        // 弹框打开时重新初始化数据
+        this.getLanguages()
+      }
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$t(key) || key
+    },
+    getLabelByKey(key) {
+      const labelMap = {
+        configName: this.t('config.config_name'),
+        configKey: this.t('config.config_key'),
+        configValue: this.t('config.config_value'),
+        configType: this.t('config.config_type'),
+        remark: this.t('config.remark')
+      }
+      return labelMap[key] || key
+    },
+    /**
+     * 通过 dataLangFieldMap 映射字段名
+     * 如果原始字段找不到，尝试通过映射获取值
+     * @param {Object} row - 数据行
+     * @param {string} field - 原始字段名
+     * @returns {any} 字段值
+     */
+    getFieldValueByMap(row, field) {
+      // 如果直接能找到字段，直接返回
+      if (row[field] !== undefined && row[field] !== null) {
+        return row[field]
+      }
+      // 如果找不到，尝试通过 dataLangFieldMap 映射
+      const fieldMap = this.config.dataLangFieldMap
+      if (fieldMap) {
+        // 查找映射关系中 value 等于 field 的 key
+        const mappedKey = Object.keys(fieldMap).find(key => fieldMap[key] === field)
+        if (mappedKey && row[mappedKey] !== undefined && row[mappedKey] !== null) {
+          return row[mappedKey]
+        }
+      }
+      return null
+    },
+    getTableData(columnName) {
+      // 如果已经有数据，直接返回（保持响应式）
+      if (this.tableDataMap[columnName]) {
+        return this.tableDataMap[columnName]
+      }
+      // 初始化数据
+      const data = this.config.data.map((row, index) => {
+        const item = {
+          id: this.getFieldValueByMap(row, this.config.dataLangIdField) || row.configId,
+          value: this.getFieldValueByMap(row, columnName) || '-',
+          configKey: row.configKey
+        }
+        // 为每个语言初始化字段
+        this.languages.forEach(lang => {
+          item[lang.value] = ''
+        })
+        return item
+      })
+      this.tableDataMap[columnName] = data
+      return data
+    },
+    initTableData() {
+      // 初始化所有字段的数据
+      this.config.dataLangColumnFields.forEach(columnName => {
+        this.tableDataMap[columnName] = this.config.data.map((row, index) => {
+          const item = {
+            id: this.getFieldValueByMap(row, this.config.dataLangIdField) || row.configId,
+            value: this.getFieldValueByMap(row, columnName) || '-',
+            configKey: row.configKey
+          }
+          this.languages.forEach(lang => {
+            item[lang.value] = ''
+          })
+          return item
+        })
+      })
+    },
+    getLanguages() {
+      request({
+        url: '/system/api/i18n/locales',
+        method: 'get'
+      }).then(response => {
+        if (response.data) {
+          this.languages = Object.keys(response.data).map(key => ({
+            label: response.data[key],
+            value: key
+          }))
+          // 语言加载完成后初始化表格数据
+          this.initTableData()
+        }
+      }).catch(error => {
+        console.error('获取语言列表失败:', error)
+        // 默认使用中英文
+        this.languages = [
+          { label: '中文 (中国)', value: 'zh_CN' },
+          { label: 'English (United States)', value: 'en_US' }
+        ]
+        // 语言加载完成后初始化表格数据
+        this.initTableData()
+      })
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleDialogClose() {
+      // 弹框关闭时清空数据，确保下次打开时重新初始化
+      this.languages = []
+      this.tableDataMap = {}
+    },
+    handleSubmit() {
+      // 构建批量保存翻译的请求数据
+      const saveData = []
+
+      this.config.dataLangColumnFields.forEach(columnName => {
+        const tableData = this.tableDataMap[columnName] || []
+        tableData.forEach((rowData, rowIndex) => {
+          const originalRow = this.config.data[rowIndex]
+          // 获取实际的记录 ID（通过 dataLangFieldMap 映射）
+          const recordId = this.getFieldValueByMap(originalRow, this.config.dataLangIdField) || originalRow.configId
+
+          this.languages.forEach(lang => {
+            const translationValue = rowData[lang.value]
+            // 只有当用户填写了翻译内容时才保存
+            if (translationValue && translationValue.trim() !== '') {
+              // 从 localStorage 获取 userInfo 中的 tenantId
+              const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
+              saveData.push({
+                entityName: this.config.entityName || 'sys_config',
+                recordId: String(recordId),
+                columnName: columnName,
+                locale: lang.value,
+                translation: translationValue,
+                tenantId: userInfo.tenantId || undefined
+              })
+            }
+          })
+        })
+      })
+
+      console.log('保存数据:', saveData)
+
+      if (saveData.length === 0) {
+        this.$message.warning(this.t('config.please_enter_translation'))
+        return
+      }
+
+      // 调用批量保存翻译接口
+      batchSaveTranslation(saveData).then(response => {
+        if (response.code === 200) {
+          this.$message.success(this.t('config.translation_save_success'))
+          this.$emit('update:visible', false)
+          this.$emit('saved')
+        } else {
+          this.$message.error(response.msg || this.t('config.translation_save_failed'))
+        }
+      }).catch(error => {
+        console.error('批量保存翻译失败:', error)
+        this.$message.error(this.t('config.translation_save_failed'))
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.clearfix {
+  font-weight: bold;
+  font-size: 14px;
+}
+</style>

package/components/base/dialog/config.js

@@ -0,0 +1,85 @@
+import request from '@utils/request'
+
+// 查询参数列表
+export function listConfig(query) {
+  return request({
+    url: '/system/config/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询参数详细
+export function getConfig(configId) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'get'
+  })
+}
+
+// 根据参数键名查询参数值
+export function getConfigKey(configKey) {
+  return request({
+    url: '/system/config/configKey/' + configKey,
+    method: 'get'
+  })
+}
+
+// 根据参数键名查询参数值
+export function innerConfigKey(configKey) {
+  return request({
+    url: '/system/config/innerConfigKey/' + configKey,
+    method: 'get'
+  })
+}
+
+// 新增参数配置
+export function addConfig(data) {
+  return request({
+    url: '/system/config',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改参数配置
+export function updateConfig(data) {
+  return request({
+    url: '/system/config',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除参数配置
+export function delConfig(configId) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'delete'
+  })
+}
+
+// 刷新参数缓存
+export function refreshCache() {
+  return request({
+    url: '/system/config/refreshCache',
+    method: 'delete'
+  })
+}
+// 批量保存或更新翻译
+export function batchSaveTranslation(data) {
+  return request({
+    url: '/system/api/i18n/translation/batch-save',
+    method: 'post',
+    data: data
+  })
+}
+
+// 批量获取翻译
+export function batchGetTranslation(data) {
+  return request({
+    url: '/system/api/i18n/translation/batch-get-multi',
+    method: 'post',
+    data: data
+  })
+}

package/list-base-page/listBasePageTs.vue

@@ -431,6 +431,22 @@
                 </el-dropdown>
               </el-col>
 
+              <el-col
+                :span="1.5"
+                v-if="multiLanguageConfig && multiLanguageConfig.entityName && multiLanguageConfig.dataLangColumnFields && multiLanguageConfig.dataLangColumnFields.length > 0"
+              >
+                <el-button
+                  type="info"
+                  plain
+                  icon="el-icon-connection"
+                  size="mini"
+                  :disabled="multiple"
+                  @click="handleMultiLanguage"
+                >
+                  {{ t('config.switch_multi_language') }}
+                </el-button>
+              </el-col>
+
               <right-toolbar
                 style="float: right"
                 v-if="showToolBar"
@@ -1235,6 +1251,13 @@
       v-dialogDragHeight
     >
     </printDialog>
+
+    <!-- 多语言配置对话框 -->
+    <MultiLanguageDialog
+      :visible.sync="multiLanguageOpen"
+      :config="multiLanguageConfig"
+      @saved="handleTranslationSaved"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -1282,6 +1305,8 @@ import KZ_Radio from "@srcComponents/customForm/radio.vue";
 import UploadDialog from "@srcComponents/customForm/uploadDialog.vue";
 import PrintDialog from "@srcComponents/customForm/printDialog.vue";
 import KZ_Lookup from "@srcComponents/customForm/lookup.vue";
+import MultiLanguageDialog from "@srcComponents/base/dialog/MultiLanguageDialog.vue";
+import { batchGetTranslation } from "@srcComponents/base/dialog/config.js";
 @Component({
   components: {
     // TableDialog,
@@ -1289,6 +1314,7 @@ import KZ_Lookup from "@srcComponents/customForm/lookup.vue";
     EditDialog,
     UploadDialog,
     PrintDialog,
+    MultiLanguageDialog,
     KZ_DropDownList,
     KZ_TextBox,
     KZ_Cascader,
@@ -1368,6 +1394,15 @@ export default class listBasePage extends Vue {
   pkField = "id";
   //当前功能显示文本字段
   displayField = undefined;
+  // 多语言对话框显示
+  multiLanguageOpen = false;
+  // 多语言配置
+  multiLanguageConfig = {
+    entityName: undefined,
+    dataLangColumnFields: [],
+    dataLangIdField: undefined,
+    data: []
+  };
   // 树名称
   treeShapeName = undefined;
   defaultProps = {
@@ -1569,7 +1604,7 @@ export default class listBasePage extends Vue {
     //{ text: `用户账号`, property: "userAccount", visible: true },
   ];
   listSerialNumber = {
-    label: '序号',
+    label: (this as any).t('common.serialNumber'),
     width: "50",
     align: "center",
   };
@@ -2159,12 +2194,88 @@ export default class listBasePage extends Vue {
 
         this.listQueryParams.total = Number((response as any).total);
         this.contentLoading = false;
+        // 获取翻译并替换字段
+        this.fetchAndApplyTranslations(this.listData);
       })
       .catch(() => {
         this.contentLoading = false;
       });
   }
 
+  /** 获取并应用翻译 */
+  fetchAndApplyTranslations(dataList) {
+    if (!dataList || dataList.length === 0) {
+      return;
+    }
+    // 检查是否配置了多语言字段
+    if (!this.multiLanguageConfig ||
+        !this.multiLanguageConfig.entityName ||
+        !this.multiLanguageConfig.dataLangIdField ||
+        !this.multiLanguageConfig.dataLangColumnFields ||
+        this.multiLanguageConfig.dataLangColumnFields.length === 0) {
+      return;
+    }
+    // 获取 locale 和 tenantId
+    const locale = (this as any).$cache.local.get('locale') || 'zh_CN';
+    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
+    const tenantId = userInfo.tenantId;
+
+    // 构建请求参数
+    const recordIds = dataList.map(item => String(item[this.multiLanguageConfig.dataLangIdField]));
+    const columnNames = this.multiLanguageConfig.dataLangColumnFields;
+
+    // 过滤掉没有 dataLangIdField 值的记录
+    const validRecordIds = recordIds.filter(id => id && id !== '' && id !== 'undefined' && id !== 'null');
+    if (validRecordIds.length === 0) {
+      return;
+    }
+
+    const params = {
+      entityName: this.multiLanguageConfig.entityName,
+      recordIds: validRecordIds,
+      columnNames: columnNames,
+      locale: locale,
+      tenantId: tenantId
+    };
+
+    batchGetTranslation(params).then(response => {
+      if ((response as any).code === 200 && response.data) {
+        this.applyTranslations(response.data, dataList);
+      }
+    }).catch(error => {
+      console.error('Failed to fetch translations:', error);
+    });
+  }
+
+  /** 应用翻译到表格数据 */
+  applyTranslations(translationMap, dataList) {
+    // translationMap 格式: {"1001": {"menu_name": "Menu"}, "1002": {"menu_name": "Submenu"}}
+    const idField = this.multiLanguageConfig.dataLangIdField;
+
+    dataList.forEach(row => {
+      const recordId = String(row[idField]);
+      if (translationMap[recordId]) {
+        const translations = translationMap[recordId];
+        // 遍历翻译字段并替换
+        Object.keys(translations).forEach(column => {
+          if (translations[column] && translations[column] !== '') {
+            row[column] = translations[column];
+          }
+        });
+      }
+    });
+  }
+
+  /** 切换多语言按钮操作 */
+  handleMultiLanguage() {
+    this.multiLanguageOpen = true;
+  }
+
+  /** 翻译保存成功后的处理 */
+  handleTranslationSaved() {
+    this.getList();
+  }
+
   isListClass(value, val, va) {
     let dict = JSON.parse(localStorage.getItem("dict"));
     for (const key in dict) {
@@ -2645,6 +2756,8 @@ export default class listBasePage extends Vue {
     //this.setOpMenuEnable();
     this.currentEntities = selection;
     this.setOpMenuEnable();
+    // 更新多语言配置的数据
+    this.multiLanguageConfig.data = selection;
   }
   // 表单重置
   reset() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kz-ui-base",
-  "version": "1.0.149",
+  "version": "1.0.151",
   "description": "",
   "main": "index.js",
   "scripts": {