!1889 修复 修改当前语言后，菜单名称无变化，规范代码

Merge pull request !1889 from 夜鹰/v2

Web/eslint.config.mjs

@@ -5,107 +5,115 @@ import vueParser from 'vue-eslint-parser';
 import globals from 'globals';
 
 export default [
-	{
-		ignores: [
-			'**/*.sh',
-			'**/node_modules',
-			'**/lib',
-			'**/*.md',
-			'**/*.scss',
-			'**/*.woff',
-			'**/*.ttf',
-			'**/.vscode',
-			'**/.idea',
-			'**/dist',
-			'**/mock',
-			'**/public',
-			'**/bin',
-			'**/build',
-			'**/config',
-			'**/index.html',
-			'src/assets',
-		],
-	},
-	js.configs.recommended,
-	{
-		plugins: {
-			vue,
-			'@typescript-eslint': tseslint,
-		},
+    {
+        ignores: [
+            '**/*.sh',
+            '**/node_modules',
+            '**/lib',
+            '**/*.md',
+            '**/*.scss',
+            '**/*.woff',
+            '**/*.ttf',
+            '**/.vscode',
+            '**/.idea',
+            '**/dist',
+            '**/mock',
+            '**/public',
+            '**/bin',
+            '**/build',
+            '**/config',
+            '**/index.html',
+            'src/assets',
+        ],
+    },
+    js.configs.recommended,
+    {
+        plugins: {
+            vue,
+            '@typescript-eslint': tseslint,
+        },
 
-		languageOptions: {
-			parser: vueParser,
-			parserOptions: {
-				parser: '@typescript-eslint/parser',
-				ecmaVersion: 2022,
-				sourceType: 'module',
-			},
-			globals: {
-				...globals.browser,
-				...globals.node,
-			},
-		},
-		rules: {
-			'@typescript-eslint/ban-ts-ignore': 'off',
-			'@typescript-eslint/explicit-function-return-type': 'off',
-			'@typescript-eslint/no-explicit-any': 'off',
-			'@typescript-eslint/no-var-requires': 'off',
-			'@typescript-eslint/no-empty-function': 'off',
-			'@typescript-eslint/no-use-before-define': 'off',
-			'@typescript-eslint/ban-ts-comment': 'off',
-			'@typescript-eslint/ban-types': 'off',
-			'@typescript-eslint/no-non-null-assertion': 'off',
-			'@typescript-eslint/explicit-module-boundary-types': 'off',
-			'@typescript-eslint/no-redeclare': 'off',
-			'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-			'@typescript-eslint/no-unused-vars': 'warn',
-			'vue/no-unused-vars': 'off',
-			'vue/no-mutating-props': 'warn',
-			'vue/custom-event-name-casing': 'off',
-			'vue/attributes-order': 'off',
-			'vue/one-component-per-file': 'off',
-			'vue/html-closing-bracket-newline': 'off',
-			'vue/max-attributes-per-line': 'off',
-			'vue/multiline-html-element-content-newline': 'off',
-			'vue/singleline-html-element-content-newline': 'off',
-			'vue/attribute-hyphenation': 'off',
-			'vue/valid-v-else': 'warn',
-			'vue/no-deprecated-filter': 'warn',
-			'vue/html-self-closing': 'off',
-			'vue/no-multiple-template-root': 'off',
-			'vue/require-default-prop': 'off',
-			'vue/no-v-model-argument': 'off',
-			'vue/no-arrow-functions-in-watch': 'off',
-			'vue/no-template-key': 'off',
-			'vue/no-v-for-template-key': 'warn',
-			'vue/no-v-html': 'off',
-			'vue/comment-directive': 'off',
-			'vue/no-parsing-error': 'off',
-			'vue/no-deprecated-v-on-native-modifier': 'off',
-			'vue/multi-word-component-names': 'off',
-			'no-constant-binary-expression': 'warn',
-			'no-useless-escape': 'off',
-			'no-sparse-arrays': 'off',
-			'no-prototype-builtins': 'off',
-			'no-constant-condition': 'off',
-			'no-use-before-define': 'off',
-			'no-restricted-globals': 'off',
-			'no-restricted-syntax': 'off',
-			'generator-star-spacing': 'off',
-			'no-unreachable': 'off',
-			'no-multiple-template-root': 'off',
-			'no-unused-vars': 'off',
-			'no-v-model-argument': 'off',
-			'no-case-declarations': 'off',
-			'no-console': 'off',
-			'no-redeclare': 'off',
-		},
-	},
-	{
-		files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+        languageOptions: {
+            parser: vueParser,
+            parserOptions: {
+                parser: '@typescript-eslint/parser',
+                ecmaVersion: 2022,
+                sourceType: 'module',
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+        },
+        rules: {
+            '@typescript-eslint/ban-ts-ignore': 'off',
+            '@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-var-requires': 'off',
+            '@typescript-eslint/no-empty-function': 'off',
+            '@typescript-eslint/no-use-before-define': 'off',
+            '@typescript-eslint/ban-ts-comment': 'off',
+            '@typescript-eslint/ban-types': 'off',
+            '@typescript-eslint/no-non-null-assertion': 'off',
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+            '@typescript-eslint/no-redeclare': 'off',
+            '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+            '@typescript-eslint/no-unused-vars': ['warn', {
+                'args': 'all',
+                'argsIgnorePattern': '^_',
+                'caughtErrors': 'all',
+                'caughtErrorsIgnorePattern': '^_',
+                'destructuredArrayIgnorePattern': '^_',
+                'varsIgnorePattern': '^_',
+                'ignoreRestSiblings': true
+            }],
+            'vue/no-unused-vars': 'off',
+            'vue/no-mutating-props': 'warn',
+            'vue/custom-event-name-casing': 'off',
+            'vue/attributes-order': 'off',
+            'vue/one-component-per-file': 'off',
+            'vue/html-closing-bracket-newline': 'off',
+            'vue/max-attributes-per-line': 'off',
+            'vue/multiline-html-element-content-newline': 'off',
+            'vue/singleline-html-element-content-newline': 'off',
+            'vue/attribute-hyphenation': 'off',
+            'vue/valid-v-else': 'warn',
+            'vue/no-deprecated-filter': 'warn',
+            'vue/html-self-closing': 'off',
+            'vue/no-multiple-template-root': 'off',
+            'vue/require-default-prop': 'off',
+            'vue/no-v-model-argument': 'off',
+            'vue/no-arrow-functions-in-watch': 'off',
+            'vue/no-template-key': 'off',
+            'vue/no-v-for-template-key': 'warn',
+            'vue/no-v-html': 'off',
+            'vue/comment-directive': 'off',
+            'vue/no-parsing-error': 'off',
+            'vue/no-deprecated-v-on-native-modifier': 'off',
+            'vue/multi-word-component-names': 'off',
+            'no-constant-binary-expression': 'warn',
+            'no-useless-escape': 'off',
+            'no-sparse-arrays': 'off',
+            'no-prototype-builtins': 'off',
+            'no-constant-condition': 'off',
+            'no-use-before-define': 'off',
+            'no-restricted-globals': 'off',
+            'no-restricted-syntax': 'off',
+            'generator-star-spacing': 'off',
+            'no-unreachable': 'off',
+            'no-multiple-template-root': 'off',
+            'no-unused-vars': 'off',
+            'no-v-model-argument': 'off',
+            'no-case-declarations': 'off',
+            'no-console': 'off',
+            'no-redeclare': 'off',
+        },
+    },
+    {
+        files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
 
-		rules: {
-			'no-undef': 'off',
-		},
-	},
+        rules: {
+            'no-undef': 'off',
+        },
+    },
 ];

Web/src/App.vue

@@ -175,22 +175,3 @@ document.body.ondrop = function (event) {
 	event.stopPropagation();
 };
 </script>
-
-<style lang="scss">
-.el-form--inline {
-	.el-form-item {
-		.el-select {
-			width: 171px !important;
-		}
-		.el-select__wrapper {
-			line-height: 22px !important;
-		}
-		.el-date-editor {
-			--el-date-editor-width: 171px !important;
-		}
-		.el-input {
-			width: 171px !important;
-		}
-	}
-}
-</style>

Web/src/api-services/models/list-sys-lang-text-input.ts

@@ -51,4 +51,20 @@ export interface ListSysLangTextInput {
      * @memberof ListSysLangTextInput
      */
     langCode?: string | null;
+
+    /**
+     * 当前页码
+     *
+     * @type {number}
+     * @memberof PageNoticeInput
+     */
+    page?: number;
+
+    /**
+     * 页码容量
+     *
+     * @type {number}
+     * @memberof PageNoticeInput
+     */
+    pageSize?: number;
 }

Web/src/api-services/models/update-menu-input.ts

@@ -139,7 +139,7 @@ export interface UpdateMenuInput {
      * @type {string}
      * @memberof UpdateMenuInput
      */
-    icon?: string | null;
+    icon?: string;
 
     /**
      * 是否内嵌

Web/src/components/multiLangInput/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="multi-lang-input">
-        <el-input v-model="props.modelValue" :placeholder="`请输入 ${currentLangLabel}`" clearable @update:model-value="(val: string) => emit('update:modelValue', val)">
+    <el-input v-model="inputModelValue" :placeholder="`请输入 ${currentLangLabel}`" clearable @update:model-value="(val: string) => { emit('update:modelValue', val); }">
             <template #append>
                 <el-button @click="openDialog" circle>
                     <template #icon>
@@ -15,8 +15,7 @@
                 <el-row :gutter="35">
                     <el-col v-for="lang in languages" :key="lang.code" :span="24">
                         <el-form-item :label="lang.label">
-                            <el-input v-model="multiLangValue[lang.code]" :placeholder="`请输入: ${lang.label}`"
-                                clearable />
+                            <el-input v-model="multiLangValue[lang.code]" :placeholder="`请输入: ${lang.label}`" clearable />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -32,15 +31,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, reactive } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useLangStore } from '/@/stores/useLangStore';
 import { Local } from '/@/utils/storage';
 import { getAPI } from '/@/utils/axios-utils';
 import { SysLangTextApi } from '/@/api-services/api';
 import { ElMessage } from 'element-plus';
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-}>();
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void; }>();
 const ruleFormRef = ref();
 
 const fetchMultiLang = async () => {    
@@ -48,11 +45,15 @@ const fetchMultiLang = async () => {
     return result ?? [];
 };
 
+const inputModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
 
 const props = defineProps<{
     modelValue: string;
     entityName: string;
-    entityId: string;
+    entityId: number;
     fieldName: string;
 }>();
 
@@ -98,7 +99,7 @@ onMounted(async () => {
     }
 });
 const aiTranslation = async () => {
-    languages.value.forEach(async (element: { code: string | number; value: string | number; }) => {
+    languages.value.forEach(async (element: { code: string; value: string | null; }) => {
         if (element.code == currentLang.value) {
             return;
         }
@@ -126,8 +127,8 @@ const openDialog = async () => {
     multiLangValue.value = {};
     const res = await fetchMultiLang();
     multiLangValue.value[currentLang.value] = props.modelValue;
-    res.forEach((element: { langCode: string | number; content: string; }) => {
-        multiLangValue.value[element.langCode] = element.content;
+    res.forEach((element: { langCode?: string | null; content?: string | null; }) => {
+        multiLangValue.value[element.langCode ?? 0] = element.content ?? '';
     });
     dialogVisible.value = true;
     ruleFormRef.value?.resetFields();
@@ -145,11 +146,11 @@ const confirmDialog = async () => {
     const langItems = Object.entries(multiLangValue.value)
         .filter(([_, content]) => content && content.trim() !== '')
         .map(([code, content]) => ({
-            EntityName: props.entityName,
-            EntityId: props.entityId,
-            FieldName: props.fieldName,
-            LangCode: code,
-            Content: content,
+            entityName: props.entityName,
+            entityId: props.entityId,
+            fieldName: props.fieldName,
+            langCode: code,
+            content: content,
         }));
 
     if (langItems.length === 0) {
@@ -160,6 +161,8 @@ const confirmDialog = async () => {
     try {
         await getAPI(SysLangTextApi).apiSysLangTextBatchSavePost(langItems);
         ElMessage.success('保存成功！');
+        // 同步当前语言内容到父组件 input
+        emit('update:modelValue', multiLangValue.value[currentLang.value]);
         dialogVisible.value = false;
     } catch (err) {
         console.error(err);

Web/src/main.ts

@@ -21,8 +21,8 @@ import VForm3 from 'vform3-builds';
 import 'vform3-builds/dist/designer.style.css';
 // 关闭自动打印
 import { disAutoConnect } from 'vue-plugin-hiprint';
-import sysDict from "/src/components/sysDict/sysDict.vue";
-import multiLangInput from "/src/components/multiLangInput/index.vue";
+import sysDict from "/@/components/sysDict/sysDict.vue";
+import multiLangInput from "/@/components/multiLangInput/index.vue";
 disAutoConnect();
 
 const app = createApp(App);

Web/src/theme/element.scss

@@ -37,6 +37,13 @@
 	}
 }
 
+.el-date-editor {
+    //--el-date-editor-width: 220px;
+    //--el-date-editor-monthrange-width: 300px;
+    --el-date-editor-daterange-width: 250px;
+    //--el-date-editor-datetimerange-width: 400px;
+}
+
 /* Form 表单
 ------------------------------- */
 .el-form {
@@ -58,6 +65,10 @@
 
         .el-form-item,.el-form-item:last-of-type {
             margin: 5px 15px !important;
+
+            .el-select,.el-input {
+                width: 200px !important;
+            }
         }
 	}
 

Web/src/views/system/menu/component/editMenu.vue

@@ -26,7 +26,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="菜单名称" prop="title" :rules="[{ required: true, message: '菜单名称不能为空', trigger: 'blur' }]">
-							<g-multi-lang-Input entityName="SysMenu" fieldName="Title" :entityId="state.ruleForm.id" v-model="state.ruleForm.title" placeholder="菜单名称" clearable />
+							<g-multi-lang-Input entityName="SysMenu" fieldName="Title" :entityId="Number(state.ruleForm.id)" v-model="state.ruleForm.title" placeholder="菜单名称" clearable />
 						</el-form-item>
 					</el-col>
 					<template v-if="state.ruleForm.type === 1 || state.ruleForm.type === 2">