流程多语言

src/components/language/LangInput.vue

@@ -0,0 +1,157 @@
+
+<template>
+  <div class="lang-input-wrapper">
+    <el-input
+      v-model="displayValue"
+      v-bind="$attrs"
+      :type="type"
+    >
+      <template #suffix>
+        <el-popover
+          placement="right"
+          trigger="click"
+          :width="300"
+          popper-class="lang-popover"
+          ref="popoverRef"
+        >
+          <template #reference>
+            <Icon icon="fa:language" class="lang-icon" />
+          </template>
+          <div class="lang-popover-content">
+            <div class="lang-item mt-10">
+              <span class="flag-icon cn-flag"></span>
+              <el-input v-model="chineseValue" disabled placeholder="中文" />
+            </div>
+            <div class="lang-item mt-10">
+              <span class="flag-icon uk-flag"></span>
+              <el-input v-model="englishValue" placeholder="英文" />
+            </div>
+            <div class="lang-item mt-10">
+              <span class="flag-icon ru-flag"></span>
+              <el-input v-model="russiaValue" placeholder="俄文" />
+            </div>
+            <div class="popover-footer">
+              <el-button size="small" @click="closePopover">取消</el-button>
+              <el-button size="small" type="primary" @click="saveAndClose">确认</el-button>
+            </div>
+          </div>
+        </el-popover>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Edit } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const popoverRef = ref(null)
+
+const chineseValue = ref('')
+const englishValue = ref('')
+const russiaValue = ref('')
+
+const displayValue = computed({
+  get() {
+    return props.modelValue.split('~~')[0] || ''
+  },
+  set(val) {
+    // if (englishValue.value !== null&&englishValue.value !== undefined&&englishValue.value !== '') {
+    //   emit('update:modelValue', val + '~~en**' + englishValue.value)
+    // }else {
+      emit('update:modelValue', val)
+    // }
+  }
+})
+
+watch(() => props.modelValue, (newVal) => {
+  const [chinese, english, russia] = newVal.split('~~')
+  chineseValue.value = chinese || ''
+  englishValue.value = english?english.replace('en**','') : ''
+  russiaValue.value = russia?russia.replace('ru**','') : ''
+}, { immediate: true })
+
+const saveLang = () => {
+  emit('update:modelValue', chineseValue.value + '~~en**' + englishValue.value+'~~ru**'+russiaValue.value)
+}
+
+const closePopover = () => {
+  popoverRef.value?.hide()
+}
+
+const saveAndClose = () => {
+  saveLang()
+  closePopover()
+}
+</script>
+
+<style scoped>
+.lang-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.lang-icon {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  margin-left: 8px;
+  font-size: 20px;
+}
+.lang-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.flag-icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+}
+.cn-flag {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3crect width='512' height='512' fill='%23de2910'/%3e%3cpath fill='%23ffde00' d='M106.7 106.7h298.7v298.7H106.7z'/%3e%3cpath fill='%23de2910' d='M256 167.5l-33.2 102-87.5-63.5h108.1L289.2 269.5z'/%3e%3c/svg%3e");
+}
+.uk-flag {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3e%3cpath fill='%23012169' d='M0 0h60v30H0z'/%3e%3cpath fill='%23fff' d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3e%3cpath fill='%23c8102e' d='M0 0l60 30m0-30L0 30' stroke='%23c8102e' stroke-width='4'/%3e%3cpath fill='%23c8102e' d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3e%3c/svg%3e");
+}
+.ru-flag {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3e%3crect width='60' height='10' fill='%23FFFFFF'/%3e%3crect y='10' width='60' height='10' fill='%230039A6'/%3e%3crect y='20' width='60' height='10' fill='%23D52B1E'/%3e%3c/svg%3e");
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.popover-footer {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+  //gap: 3px;
+}
+</style>
+
+<style>
+.lang-popover {
+  padding: 15px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+}
+.lang-popover .el-input__wrapper {
+  //padding: 8px 12px;
+}
+.lang-popover .el-input__inner {
+  font-size: 12px;
+}
+</style>

src/config/axios/service.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
-
+import { langHelper } from '@/utils/langHelper'
+import { useLocaleStore } from '@/store/modules/locale'
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
 import qs from 'qs'
 import { config } from '@/config/axios/config'
@@ -221,7 +222,36 @@ service.interceptors.response.use(
       }
       return Promise.reject('error')
     } else {
-      return data
+      const requestUrl = response.config.url || ''
+      // 判断是否包含rq/iot路径
+      if (
+        requestUrl.includes('portal/flow/page') ||
+        requestUrl.includes('portal/flow-group/page')
+      ) {
+        const localeStore = useLocaleStore()
+        const lang = localeStore.getCurrentLocale.lang
+        if (data && data.data !== null && data.data !== undefined) {
+          if (data.data.list) {
+            if (Array.isArray(data.data.list)) {
+              const list = langHelper.transformArray(data.data.list, lang)
+              data.data.list = list
+              return data
+            }
+          } else if (data && Array.isArray(data.data)) {
+            const list = langHelper.transformArray(data.data, lang)
+            data.data = list
+            return data
+          } else if (data && typeof data.data === 'object') {
+            const object = langHelper.transformObject(data, lang)
+            data = object
+            return data
+          } else {
+            return data
+          }
+        }
+      } else {
+        return data
+      }
     }
   },
   (error: AxiosError) => {

src/utils/langHelper.ts

@@ -0,0 +1,52 @@
+
+interface LangPair {
+  zh: string
+  en: string
+  ru: string
+}
+
+export const langHelper = {
+  parseLangString(str: string): LangPair {
+    if (!str.includes('~~')) return { zh: str, en: str, ru: str }
+    const [zhPart, enPart, ruPart] = str.split('~~')
+    return {
+      zh: zhPart.replace('zh-CN**', ''),
+      en: enPart?.replace('en**', '') || zhPart.replace('zh-CN**', ''),
+      ru: ruPart?ruPart.replace('ru**', ''):zhPart.replace('zh-CN**', '')
+    }
+  },
+
+  getDisplayText(str: string, currentLang: string): string {
+    const { zh, en,ru } = this.parseLangString(str)
+    if (currentLang==='zh-CN'){
+        return zh;
+    } else if (currentLang==='en'){
+      return en;
+    } else if (currentLang==='ru'){
+      return ru;
+    }
+    // return currentLang === 'zh-CN' ? zh : (en || zh)
+  },
+
+  transformObject<T extends Record<string, any>>(obj: T, currentLang: string): T {
+    if (typeof obj === 'number') { return obj }
+    if (typeof obj === 'string') {
+      return this.getDisplayText(obj, currentLang)
+    }
+    const result = { ...obj }
+    for (const key in result) {
+      if(Array.isArray(result[key])) {
+        result[key] = this.transformArray(result[key], currentLang)
+      } else if (typeof result[key] === 'string') {
+        result[key] = this.getDisplayText(result[key], currentLang)
+      } else if (typeof result[key] === 'object' && result[key] !== null) {
+        result[key] = this.transformObject(result[key], currentLang)
+      }
+    }
+    return result
+  },
+
+  transformArray<T extends Record<string, any>>(arr: T[], currentLang: string): T[] {
+    return arr.map(item => this.transformObject(item, currentLang))
+  }
+}

src/views/flow/flowManagement/index.vue

@@ -123,7 +123,8 @@
       </el-form-item>
 
       <el-form-item label="流程名称" prop="flowName">
-        <el-input v-model="formData.flowName" placeholder="请输入流程名称" />
+        <!-- <el-input v-model="formData.flowName" placeholder="请输入流程名称" /> -->
+        <lang-input v-model="formData.flowName" placeholder="请输入流程名称" />
       </el-form-item>
 
       <el-form-item label="排序" prop="sort">

src/views/flow/group/index.vue

@@ -73,7 +73,8 @@
   >
     <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
       <el-form-item label="分组名称" prop="groupName">
-        <el-input v-model="formData.groupName" placeholder="请输入分组名称" />
+        <!-- <el-input v-model="formData.groupName" placeholder="请输入分组名称" /> -->
+        <lang-input v-model="formData.groupName" placeholder="请输入分组名称" />
       </el-form-item>
 
       <el-form-item label="排序" prop="sort">