feat(系统变量): 支持 key-value #1310

frontend/src/i18n/en.json

@@ -23,14 +23,19 @@
     "variable_name": "Variable Name",
     "variable_type": "Variable Type",
     "variable_value": "Variable Value",
+    "variable_key": "Variable Key",
+    "kv": "Key-Value",
     "edit_variable": "Edit Variable",
     "no_variables_yet": "No Variables Yet",
     "please_enter_value": "Please Enter Value",
     "date": "Date",
     "start_date": "Start Date",
     "end_date": "End Date",
     "enter_variable_name": "Please Enter Variable Name",
-    "enter_variable_value": "Please Enter Variable Value"
+    "enter_variable_value": "Please Enter Variable Value",
+    "enter_variable_key": "Please Enter Variable Key",
+    "key_value_cannot_be_empty": "Key and value cannot be empty.",
+    "key_repeat": "Keys cannot be duplicated."
   },
   "authorized_space": {
     "authorized_space": "Authorized Space",

frontend/src/i18n/ko-KR.json

@@ -23,14 +23,19 @@
     "variable_name": "변수 이름",
     "variable_type": "변수 유형",
     "variable_value": "변수 값",
+    "variable_key": "변수 키",
+    "kv": "키-값",
     "edit_variable": "변수 편집",
     "no_variables_yet": "아직 변수가 없습니다",
     "please_enter_value": "값을 입력하세요",
     "date": "날짜",
     "start_date": "시작일",
     "end_date": "종료일",
     "enter_variable_name": "변수 이름을 입력하세요",
-    "enter_variable_value": "변수 값을 입력하세요"
+    "enter_variable_value": "변수 값을 입력하세요",
+    "enter_variable_key": "변수 키를 입력하세요",
+    "key_value_cannot_be_empty": "키와 값은 비워둘 수 없습니다.",
+    "key_repeat": "키는 중복될 수 없습니다."
   },
   "authorized_space": {
     "authorized_space": "권한 있는 공간",

frontend/src/i18n/zh-CN.json

@@ -23,14 +23,19 @@
     "variable_name": "变量名称",
     "variable_type": "变量类型",
     "variable_value": "变量值",
+    "variable_key": "变量键",
+    "kv": "键值",
     "edit_variable": "编辑变量",
     "no_variables_yet": "暂无变量",
     "please_enter_value": "请输入数值",
     "date": "日期",
     "start_date": "开始日期",
     "end_date": "结束日期",
     "enter_variable_name": "请输入变量名称",
-    "enter_variable_value": "请输入变量值"
+    "enter_variable_value": "请输入变量值",
+    "enter_variable_key": "请输入变量键",
+    "key_value_cannot_be_empty": "键和值不能为空",
+    "key_repeat": "键不能重复"
   },
   "authorized_space": {
     "authorized_space": "授权空间",

frontend/src/i18n/zh-TW.json

@@ -23,14 +23,19 @@
     "variable_name": "變數名稱",
     "variable_type": "變數類型",
     "variable_value": "變數值",
+    "variable_key": "變數鍵",
+    "kv": "鍵值",
     "edit_variable": "編輯變數",
     "no_variables_yet": "暫無變數",
     "please_enter_value": "請輸入數值",
     "date": "日期",
     "start_date": "開始日期",
     "end_date": "結束日期",
     "enter_variable_name": "請輸入變數名稱",
-    "enter_variable_value": "請輸入變數值"
+    "enter_variable_value": "請輸入變數值",
+    "enter_variable_key": "請輸入變數鍵",
+    "key_value_cannot_be_empty": "鍵和值不能為空",
+    "key_repeat": "鍵不能重複"
   },
   "authorized_space": {
     "authorized_space": "授權空間",

frontend/src/style.less

@@ -441,6 +441,9 @@ strong {
 .string-variables.string-variables {
   color: #3370ff;
 }
+.kv-variables.kv-variables {
+  color: #3370ff;
+}
 .number-variables.number-variables,
 .int-variables.int-variables,
 .float-variables.float-variables {

frontend/src/views/system/permission/auth-tree/FilterFiled.vue

@@ -124,6 +124,7 @@ const initEnumOptions = () => {
 
 const iconMap = {
   text: field_text,
+  kv: field_text,
   number: field_value,
   datetime: field_time,
 }

frontend/src/views/system/user/User.vue

@@ -438,6 +438,23 @@
               >
               </el-option>
             </el-select>
+            <el-select
+              v-else-if="
+                variableValueMap[state.form.system_variables[index].variableId].var_type === 'kv'
+              "
+              v-model="state.form.system_variables[index].variableValues"
+              multiple
+              style="width: 236px"
+              :placeholder="$t('datasource.Please_select')"
+            >
+              <el-option
+                v-for="item in getVariableOptionList(state.form.system_variables[index].variableId)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              >
+              </el-option>
+            </el-select>
             <el-input-number
               v-else-if="
                 variableValueMap[state.form.system_variables[index].variableId].var_type ===
@@ -587,6 +604,7 @@ const selectionLoading = ref(false)
 
 const iconMap = {
   text: field_text,
+  kv: field_text,
   number: field_value,
   datetime: field_time,
 }
@@ -643,6 +661,56 @@ const defaultForm = {
 const options = ref<any[]>([])
 const variables = shallowRef<any[]>([])
 const variableValueMap = shallowRef<any>({})
+
+const getVariableDefinition = (variableId: string) => variableValueMap.value[variableId]
+
+const getVariableOptionList = (variableId: string) => {
+  const variable = getVariableDefinition(variableId)
+  if (!variable) return []
+
+  if (variable.var_type === 'text') {
+    return variable.value.map((item: string) => ({
+      label: item,
+      value: item,
+    }))
+  }
+
+  if (variable.var_type === 'kv') {
+    return variable.value.map((item: any) => ({
+      label: item.key,
+      value: item.key,
+      actualValue: item.value,
+    }))
+  }
+
+  return []
+}
+
+const getSelectedKeysFromStoredValues = (variableId: string, storedValues: any[] = []) => {
+  const variable = getVariableDefinition(variableId)
+  if (!variable || variable.var_type !== 'kv') return storedValues
+
+  return storedValues
+    .map((storedValue: any) => {
+      const matched = variable.value.find(
+        (item: any) => item.key === storedValue || item.value === storedValue
+      )
+      return matched?.key
+    })
+    .filter(Boolean)
+}
+
+const getStoredValuesFromSelectedKeys = (variableId: string, selectedKeys: any[] = []) => {
+  const variable = getVariableDefinition(variableId)
+  if (!variable || variable.var_type !== 'kv') return selectedKeys
+
+  return selectedKeys
+    .map((selectedKey: any) => {
+      const matched = variable.value.find((item: any) => item.key === selectedKey)
+      return matched?.value
+    })
+    .filter((item: any) => item !== undefined && item !== null && item !== '')
+}
 const state = reactive<any>({
   tableData: [],
   filterTexts: [],
@@ -653,7 +721,7 @@ const state = reactive<any>({
     pageSize: 20,
     total: 0,
     sortColumn: '',
-    sortOrder: '',  // 'ascending' | 'descending' | ''
+    sortOrder: '', // 'ascending' | 'descending' | ''
   },
 })
 
@@ -908,20 +976,26 @@ const editHandler = (row: any) => {
           ...row,
           system_variables: (row.system_variables || []).map((ele: any) => ({
             ...ele,
-            variableValue: ele.variableValues[0],
+            variableValue: ele.variableValues?.[0],
+            variableValues: Array.isArray(ele.variableValues) ? [...ele.variableValues] : [],
           })),
         }
       }
     })
     .finally(() => {
       state.form.system_variables = state.form.system_variables.filter((ele: any) => {
-        if (variableValueMap.value[ele.variableId]) {
-          if (variableValueMap.value[ele.variableId].var_type === 'text') {
-            ele.variableValues = variableValueMap.value[ele.variableId].value.filter(
+        const variable = variableValueMap.value[ele.variableId]
+        if (variable) {
+          if (variable.var_type === 'text') {
+            ele.variableValues = variable.value.filter(
               (item: any) => ele.variableValues.indexOf(item) > -1
             )
             return !!ele.variableValues.length
           }
+          if (variable.var_type === 'kv') {
+            ele.variableValues = getSelectedKeysFromStoredValues(ele.variableId, ele.variableValues)
+            return !!ele.variableValues.length
+          }
           return true
         }
         return false
@@ -1036,9 +1110,19 @@ const formatVariableValues = () => {
   if (!state.form.system_variables?.length) return []
   return state.form.system_variables.map((ele: any) => ({
     variableId: ele.variableId,
-    variableValues: ['number', 'datetime'].includes(variableValueMap.value[ele.variableId].var_type)
-      ? [ele.variableValue]
-      : ele.variableValues,
+    variableValues: (() => {
+      const variable = variableValueMap.value[ele.variableId]
+      if (!variable) {
+        return ele.variableValues
+      }
+      if (['number', 'datetime'].includes(variable.var_type)) {
+        return [ele.variableValue]
+      }
+      if (variable.var_type === 'kv') {
+        return getStoredValuesFromSelectedKeys(ele.variableId, ele.variableValues)
+      }
+      return ele.variableValues
+    })(),
   }))
 }
 
@@ -1097,11 +1181,26 @@ const validateSystemVariables = () => {
   if (system_variables?.length) {
     return system_variables.some((ele: any) => {
       const obj = variableValueMap.value[ele.variableId]
+      if (!obj) {
+        return false
+      }
       if (obj.var_type === 'text' && !ele.variableValues.length) {
         ElMessage.error(t('variables.​​cannot_be_empty'))
         return true
       }
 
+      if (obj.var_type === 'kv') {
+        if (!ele.variableValues.length) {
+          ElMessage.error(t('variables.key_value_cannot_be_empty'))
+          return true
+        }
+
+        if (new Set(ele.variableValues).size !== ele.variableValues.length) {
+          ElMessage.error(t('variables.key_repeat'))
+          return true
+        }
+      }
+
       if (obj.var_type === 'number' && [null, undefined, ''].includes(ele.variableValue)) {
         ElMessage.error(t('variables.​​cannot_be_empty'))
         return true