feat:[系统管理] [菜单管理] 菜单管理模块增加双语

src/lang/en.js

@@ -10,7 +10,10 @@ export default {
     add: 'add',
     export: 'export',
     confirm: 'confirm',
-    cancel: 'cancel'
+    cancel: 'cancel',
+    operate: 'operate',
+    placeholderInput: 'Please Enter',
+    placeholderSelect: 'Please Select'
   },
   menu: {
     PersonalCenter: 'Personal Center',
@@ -75,5 +78,40 @@ export default {
     tagsView: 'Open Tags-View',
     fixedHeader: 'Fixed Header',
     sidebarLogo: 'Sidebar Logo'
+  },
+  page: {
+    system: {
+      menu: {
+        name: 'name',
+        namePlaceholder: 'namePlaceholder',
+        status: 'status',
+        statusAll: 'statusAll',
+        statusVisible: 'visible',
+        statusHide: 'hide',
+
+        index: 'index',
+        sort: 'sort',
+        router: 'router',
+        type: 'type',
+        typeDir: 'dir',
+        typeMenu: 'menu',
+        typeBtn: 'btn',
+        add: 'add',
+        edit: 'edit',
+        delete: 'delete',
+
+        parent: 'parent',
+        comp: 'comp',
+        icon: 'icon',
+        permit: 'permit',
+
+        addMenu: 'addMenu',
+        modifyMenu: 'modifyMenu',
+
+        root: 'root',
+
+        notEmpty: ' can not be empty'
+      }
+    }
   }
 }

src/lang/zh.js

@@ -10,7 +10,10 @@ export default {
     add: '新增',
     export: '导出',
     confirm: '确定',
-    cancel: '取消'
+    cancel: '取消',
+    operate: '操作',
+    placeholderInput: '请输入',
+    placeholderSelect: '请选择'
   },
   menu: {
     PersonalCenter: '个人中心',
@@ -75,5 +78,42 @@ export default {
     tagsView: '开启 Tags-View',
     fixedHeader: '固定 Header',
     sidebarLogo: '侧边栏 Logo'
+  },
+  page: {
+    system: {
+      menu: {
+        name: '菜单名称',
+        namePlaceholder: '请输入',
+        status: '菜单状态',
+        statusAll: '全部',
+        statusVisible: '显示',
+        statusHide: '隐藏',
+
+        index: '序号',
+        sort: '菜单排序',
+        router: '路由地址',
+        type: '菜单类型',
+        typeDir: '目录',
+        typeMenu: '菜单',
+        typeBtn: '按钮',
+        add: '添加',
+        edit: '编辑',
+        delete: '删除',
+
+        parent: '上级菜单',
+        comp: '组件路径',
+        icon: '菜单图标',
+        permit: '权限字符',
+
+        addMenu: '添加菜单',
+        modifyMenu: '修改菜单',
+        addMent: '添加菜单',
+        addMent: '添加菜单',
+
+        root: '主类目',
+
+        notEmpty: '不能为空'
+      }
+    }
   }
 }

src/views/system/menu/index.vue

@@ -1,27 +1,24 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="菜单名称" prop="menuName">
+      <el-form-item :label="$t('page.system.menu.name')+'：'" prop="menuName">
         <el-input
           v-model="queryParams.menuName"
-          placeholder="请输入菜单名称"
+          :placeholder="$t('page.system.menu.namePlaceholder')"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+      <el-form-item :label="$t('page.system.menu.status')+'：'" prop="visible">
+        <el-select v-model="queryParams.visible" :placeholder="$t('page.system.menu.status')">
+          <el-option :label="$t('page.system.menu.statusAll')" value="" />
+          <el-option :label="$t('page.system.menu.statusVisible')" :value="0" />
+          <el-option :label="$t('page.system.menu.statusHide')" :value="1" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('form.search')}}</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('form.reset')}}</el-button>
       </el-form-item>
     </el-form>
 
@@ -34,9 +31,9 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:menu:add']"
-        >新增</el-button>
+        >{{$t('form.add')}}</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="info"
           plain
@@ -44,8 +41,8 @@
           size="mini"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-col> -->
+      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
     </el-row>
 
     <el-table
@@ -56,14 +53,26 @@
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
-      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
+      <el-table-column prop="menuName" :label="$t('page.system.menu.name')" :show-overflow-tooltip="true"></el-table-column>
+      
+      <el-table-column prop="orderNum" :label="$t('page.system.menu.sort')" width="100"></el-table-column>
+      <el-table-column prop="path" :label="$t('page.system.menu.router')" :show-overflow-tooltip="true"></el-table-column>
+
+      <el-table-column prop="menuType" :label="$t('page.system.menu.type')" width="100">
         <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon" />
+          <span v-if="scope.row.menuType==='M'">{{$t('page.system.menu.typeDir')}}</span>
+          <span v-if="scope.row.menuType==='C'">{{$t('page.system.menu.typeMenu')}}</span>
+          <span v-if="scope.row.menuType==='F'">{{$t('page.system.menu.typeBtn')}}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
-      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="visible" :label="$t('page.system.menu.status')" width="100">
+        <template slot-scope="scope">
+          <span v-if="scope.row.visible==='0'">{{$t('page.system.menu.statusVisible')}}</span>
+          <span v-if="scope.row.visible==='1'">{{$t('page.system.menu.statusHide')}}</span>
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="status" label="状态" width="80">
         <template slot-scope="scope">
@@ -74,30 +83,28 @@
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      </el-table-column> -->
+      <el-table-column :label="$t('form.operate')" align="center" class-name="small-padding fixed-width" width="200">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:menu:edit']"
-          >修改</el-button>
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:menu:add']"
+          >{{$t('page.system.menu.add')}}</el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-            v-hasPermi="['system:menu:add']"
-          >新增</el-button>
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:edit']"
+          >{{$t('page.system.menu.edit')}}</el-button>
+          
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:menu:remove']"
-          >删除</el-button>
+          >{{$t('page.system.menu.delete')}}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -107,63 +114,61 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="上级菜单" prop="parentId">
+            <el-form-item :label="$t('page.system.menu.parent')+'：'" prop="parentId">
               <treeselect
                 v-model="form.parentId"
                 :options="menuOptions"
                 :normalizer="normalizer"
                 :show-count="true"
-                placeholder="选择上级菜单"
               />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="菜单类型" prop="menuType">
+            <el-form-item :label="$t('page.system.menu.type')+'：'" prop="menuType">
               <el-radio-group v-model="form.menuType">
-                <el-radio label="M">目录</el-radio>
-                <el-radio label="C">菜单</el-radio>
-                <el-radio label="F">按钮</el-radio>
+                <el-radio label="M">{{$t('page.system.menu.typeDir')}}</el-radio>
+                <el-radio label="C">{{$t('page.system.menu.typeMenu')}}</el-radio>
+                <el-radio label="F">{{$t('page.system.menu.typeBtn')}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item label="菜单图标" prop="icon">
-              <el-popover
-                placement="bottom-start"
-                width="460"
-                trigger="click"
-                @show="$refs['iconSelect'].reset()"
-              >
-                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                  <svg-icon
-                    v-if="form.icon"
-                    slot="prefix"
-                    :icon-class="form.icon"
-                    style="width: 25px;"
-                  />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                </el-input>
-              </el-popover>
+          <!-- <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item prop="isFrame">
+              <span slot="label">
+                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                是否外链
+              </span>
+              <el-radio-group v-model="form.isFrame">
+                <el-radio label="0">是</el-radio>
+                <el-radio label="1">否</el-radio>
+              </el-radio-group>
             </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+          </el-col> -->
+          <el-col :span="24" v-if="form.menuType != 'F'">
+            <el-form-item prop="path">
+              <span slot="label">
+                <!-- <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip> -->
+                 {{$t('page.system.menu.router')+'：'}}
+              </span>
+              <el-input v-model="form.path" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-          <el-col :span="12">
-            <el-form-item label="菜单名称" prop="menuName">
-              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.menu.name')+'：'" prop="menuName">
+              <el-input v-model="form.menuName" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType == 'C'">
+          <!-- <el-col :span="12" v-if="form.menuType == 'C'">
             <el-form-item prop="routeName">
               <el-input v-model="form.routeName" placeholder="请输入路由名称" />
               <span slot="label">
@@ -173,60 +178,102 @@
                 路由名称
               </span>
             </el-form-item>
+          </el-col> -->
+
+          <el-col :span="24">
+            <el-form-item :label="$t('page.system.menu.sort')+'：'" prop="orderNum">
+              <el-input-number style="width:100%" v-model="form.orderNum" controls-position="right" :min="0"  :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
           </el-col>
         </el-row>
+
         <el-row>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item prop="isFrame">
+          <el-col :span="24" v-if="form.menuType != 'F'">
+            <el-form-item prop="visible">
               <span slot="label">
-                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                <!-- <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                 <i class="el-icon-question"></i>
-                </el-tooltip>
-                是否外链
+                </el-tooltip> -->
+                {{$t('page.system.menu.status')+'：'}}
               </span>
-              <el-radio-group v-model="form.isFrame">
-                <el-radio label="0">是</el-radio>
-                <el-radio label="1">否</el-radio>
+              <el-radio-group v-model="form.visible">
+                <el-radio key="0" label="0" >{{$t('page.system.menu.statusVisible')}}</el-radio>
+                <el-radio key="1" label="1" >{{$t('page.system.menu.statusHide')}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item prop="path">
+          <!-- <el-col :span="12">
+            <el-form-item prop="status">
               <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                 <i class="el-icon-question"></i>
                 </el-tooltip>
-                路由地址
+                菜单状态
               </span>
-              <el-input v-model="form.path" placeholder="请输入路由地址" />
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
             </el-form-item>
-          </el-col>
+          </el-col> -->
         </el-row>
+
         <el-row>
-          <el-col :span="12" v-if="form.menuType == 'C'">
+          <el-col :span="24" v-if="form.menuType == 'C'">
             <el-form-item prop="component">
               <span slot="label">
-                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                <!-- <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                 <i class="el-icon-question"></i>
-                </el-tooltip>
-                组件路径
+                </el-tooltip> -->
+                {{$t('page.system.menu.comp')+'：'}}
               </span>
-              <el-input v-model="form.component" placeholder="请输入组件路径" />
+              <el-input v-model="form.component" :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType != 'M'">
+          <!-- <el-col :span="12" v-if="form.menuType != 'M'">
             <el-form-item prop="perms">
               <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
               <span slot="label">
                 <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                 <i class="el-icon-question"></i>
                 </el-tooltip>
-                权限字符
+                {{$t('page.system.menu.permit')+'：'}}
               </span>
             </el-form-item>
-          </el-col>
+          </el-col> -->
         </el-row>
+
         <el-row>
+          <el-col :span="24" v-if="form.menuType != 'F'">
+            <el-form-item :label="$t('page.system.menu.icon')+'：'" prop="icon">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
+                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
+                <el-input slot="reference" v-model="form.icon" :placeholder="$t('form.placeholderSelect')" readonly>
+                  <svg-icon
+                    v-if="form.icon"
+                    slot="prefix"
+                    :icon-class="form.icon"
+                    style="width: 25px;"
+                  />
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          
+        </el-row>
+        
+        
+        
+        <!-- <el-row>
           <el-col :span="12" v-if="form.menuType == 'C'">
             <el-form-item prop="query">
               <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
@@ -252,43 +299,8 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item prop="visible">
-              <span slot="label">
-                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                显示状态
-              </span>
-              <el-radio-group v-model="form.visible">
-                <el-radio
-                  v-for="dict in dict.type.sys_show_hide"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item prop="status">
-              <span slot="label">
-                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                菜单状态
-              </span>
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
+        </el-row> -->
+        
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -329,21 +341,30 @@ export default {
       // 查询参数
       queryParams: {
         menuName: undefined,
-        visible: undefined
+        visible: ''
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        menuType: [
+          { required: true, message: this.$t('page.system.menu.type')+ this.$t('page.system.menu.notEmpty'), trigger: "change" }
+        ],
         menuName: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+          { required: true, message: this.$t('page.system.menu.name')+ this.$t('page.system.menu.notEmpty'), trigger: "blur" }
         ],
         orderNum: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+          { required: true, message: this.$t('page.system.menu.sort')+ this.$t('page.system.menu.notEmpty'), trigger: "blur" }
         ],
         path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" }
-        ]
+          { required: true, message: this.$t('page.system.menu.router')+ this.$t('page.system.menu.notEmpty'), trigger: "blur" }
+        ],
+        component: [
+          { required: true, message: this.$t('page.system.menu.comp')+ this.$t('page.system.menu.notEmpty'), trigger: "blur" }
+        ],
+        visible: [
+          { required: true, message: this.$t('page.system.menu.status')+ this.$t('page.system.menu.notEmpty'), trigger: "change" }
+        ],
       }
     }
   },
@@ -378,7 +399,7 @@ export default {
     getTreeselect() {
       listMenu().then(response => {
         this.menuOptions = []
-        const menu = { menuId: 0, menuName: '主类目', children: [] }
+        const menu = { menuId: 0, menuName: this.$t('page.system.menu.root'), children: [] }
         menu.children = this.handleTree(response.data, "menuId")
         this.menuOptions.push(menu)
       })
@@ -423,7 +444,7 @@ export default {
         this.form.parentId = 0
       }
       this.open = true
-      this.title = "添加菜单"
+      this.title = this.$t('page.system.menu.addMenu')
     },
     /** 展开/折叠操作 */
     toggleExpandAll() {
@@ -440,7 +461,7 @@ export default {
       getMenu(row.menuId).then(response => {
         this.form = response.data
         this.open = true
-        this.title = "修改菜单"
+        this.title = this.$t('page.system.menu.modifyMenu')
       })
     },
     /** 提交按钮 */
@@ -449,13 +470,13 @@ export default {
         if (valid) {
           if (this.form.menuId != undefined) {
             updateMenu(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
+              // this.$modal.msgSuccess("修改成功")
               this.open = false
               this.getList()
             })
           } else {
             addMenu(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
+              // this.$modal.msgSuccess("新增成功")
               this.open = false
               this.getList()
             })
@@ -474,4 +495,4 @@ export default {
     }
   }
 }
-</script>
+</script>