管理平台菜单页新增国际化

src/views/system/menu/index.vue

@@ -1,21 +1,38 @@
 <template>
   <div class="app-container my_menu">
     <el-form :inline="true">
-      <el-form-item label="菜单名称">
+      <el-form-item :label="$t('system:menu:search:menuName')">
         <el-input
           v-model="queryParams.menuName"
-          placeholder="请输入菜单名称"
+          placeholder=""
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small" />
+      <el-form-item :label="$t('system:menu:search:visible')">
+        <el-select
+          v-model="queryParams.visible"
+          placeholder=""
+          clearable
+          size="small"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >{{ $t("system:menu:button:search") }}</el-button
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >{{ $t("system:menu:button:add") }}</el-button
+        >
       </el-form-item>
     </el-form>
     <div>
@@ -25,7 +42,8 @@
         icon="el-icon-sort"
         size="mini"
         @click="toggleExpandAll"
-      >展开/折叠</el-button>
+        >{{ $t("system:menu:button:foldAndExpand") }}</el-button
+      >
     </div>
     <el-table
       v-if="refreshTable"
@@ -33,38 +51,106 @@
       :data="menuList"
       :default-expand-all="isExpandAll"
       row-key="MenuId"
-      :tree-props="{children: 'Children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column
+        prop="MenuName"
+        :label="$t('system:menu:table:menuName')"
+        :show-overflow-tooltip="true"
+        min-width="130px"
+      />
+      <el-table-column
+        prop="icon"
+        :label="$t('system:menu:table:icon')"
+        align="center"
+        min-width="100px"
       >
-      <el-table-column prop="MenuName" label="菜单名称" :show-overflow-tooltip="true" min-width="130px" />
-      <el-table-column prop="icon" label="图标" align="center" min-width="100px">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.MenuIcon" />
         </template>
       </el-table-column>
-      <el-table-column prop="ShowOrder" label="排序" min-width="60px" />
-      <el-table-column prop="Path" label="路由" min-width="120px" show-overflow-tooltip />
-      <el-table-column prop="ApiPath" label="接口名" min-width="180px" show-overflow-tooltip />
-      <el-table-column prop="Component" label="组件路径" min-width="180px" :show-overflow-tooltip="true" />
-<!--      <el-table-column prop="Redirect" label="重定向" min-width="180px" :show-overflow-tooltip="true" />-->
-      <el-table-column prop="PermissionStr" label="权限标识" min-width="130px" :show-overflow-tooltip="true" />
-      <el-table-column prop="PermissionStr" label="类型" min-width="80px" :show-overflow-tooltip="true">
+      <el-table-column
+        prop="ShowOrder"
+        :label="$t('system:menu:table:showOrder')"
+        min-width="60px"
+      />
+      <el-table-column
+        prop="Path"
+        :label="$t('system:menu:table:path')"
+        min-width="120px"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="ApiPath"
+        :label="$t('system:menu:table:apiPath')"
+        min-width="180px"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="Component"
+        :label="$t('system:menu:table:component')"
+        min-width="180px"
+        :show-overflow-tooltip="true"
+      />
+      <!--      <el-table-column prop="Redirect" label="重定向" min-width="180px" :show-overflow-tooltip="true" />-->
+      <el-table-column
+        prop="PermissionStr"
+        :label="$t('system:menu:table:permissionStr')"
+        min-width="130px"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="PermissionStr"
+        :label="$t('system:menu:table:type')"
+        min-width="80px"
+        :show-overflow-tooltip="true"
+      >
         <template slot-scope="scope">
-          {{ scope.row.MenuType === 'M' ? '目录' : scope.row.MenuType === 'C' ? '菜单' : '权限点' }}
+          {{
+            scope.row.MenuType === "M"
+              ? $t("system:menu:template:message:directttory")
+              : scope.row.MenuType === "C"
+              ? $t("system:menu:template:message:menu")
+              : $t("system:menu:template:message:permission")
+          }}
         </template>
       </el-table-column>
-      <el-table-column label="显影" align="center" prop="CreateTime" min-width="80">
+      <el-table-column
+        :label="$t('system:menu:table:showOrNone')"
+        align="center"
+        prop="CreateTime"
+        min-width="80"
+      >
         <template slot-scope="scope">
-          <el-tag v-if="!scope.row.IsDisplay" size="medium">显示</el-tag>
-          <el-tag v-else size="warning">隐藏</el-tag>
+          <el-tag v-if="!scope.row.IsDisplay" size="medium">{{
+            $t("system:menu:tag:show")
+          }}</el-tag>
+          <el-tag v-else size="warning">{{
+            $t("system:menu:tag:none")
+          }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="启用" align="center" prop="CreateTime" min-width="80">
+      <el-table-column
+        :label="$t('system:menu:table:enable')"
+        align="center"
+        prop="CreateTime"
+        min-width="80"
+      >
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.IsEnable" size="success">启用</el-tag>
-          <el-tag v-else size="danger">禁用</el-tag>
+          <el-tag v-if="scope.row.IsEnable" size="success">{{
+            $t("system:menu:tag:enable")
+          }}</el-tag>
+          <el-tag v-else size="danger">{{
+            $t("system:menu:tag:disable")
+          }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" min-width="180" class-name="small-padding fixed-width">
+      <el-table-column
+        :label="$t('system:menu:table:action')"
+        align="center"
+        min-width="180"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             v-hasPermi="['system:menu:edit']"
@@ -72,51 +158,72 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-          >修改</el-button>
+            >{{ $t("system:menu:button:edit") }}</el-button
+          >
           <el-button
             v-hasPermi="['system:menu:add']"
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
-          >新增</el-button>
+            >{{ $t("system:menu:button:add") }}</el-button
+          >
           <el-button
             v-hasPermi="['system:menu:delete']"
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-          >删除</el-button>
+            >{{ $t("system:menu:button:remove") }}</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="680px" append-to-body>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      :visible.sync="open"
+      width="680px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="上级菜单">
+            <el-form-item :label="$t('system:menu:form:lastMenu')">
               <treeselect
                 v-model="form.ParentId"
                 :options="menuOptions"
                 :normalizer="normalizer"
                 :show-count="true"
-                placeholder="选择上级菜单"
+                placeholder=""
               />
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="菜单类型" prop="menuType">
+            <el-form-item
+              :label="$t('system:menu:form:menuType')"
+              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("system:menu:template:message:directttory")
+                }}</el-radio>
+                <el-radio label="C">{{
+                  $t("system:menu:template:message:menu")
+                }}</el-radio>
+                <el-radio label="F">{{
+                  $t("system:menu:template:message:permission")
+                }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item v-if="form.MenuType != 'F'" label="菜单图标">
+            <el-form-item
+              v-if="form.MenuType != 'F'"
+              :label="$t('system:menu:form:menuIcon')"
+            >
               <el-popover
                 placement="bottom-start"
                 width="460"
@@ -124,118 +231,182 @@
                 @show="$refs['iconSelect'].reset()"
               >
                 <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input slot="reference" v-model="form.MenuIcon" placeholder="点击选择图标" readonly>
+                <el-input
+                  slot="reference"
+                  v-model="form.MenuIcon"
+                  placeholder="点击选择图标"
+                  readonly
+                >
                   <svg-icon
                     v-if="form.MenuIcon"
                     slot="prefix"
                     :icon-class="form.MenuIcon"
                     class="el-input__icon"
-                    style="height: 28px;width: 16px;margin-left: 6px;"
+                    style="height: 28px; width: 16px; margin-left: 6px"
+                  />
+                  <i
+                    v-else
+                    slot="prefix"
+                    class="el-icon-search el-input__icon"
                   />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                 </el-input>
               </el-popover>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="菜单名称" prop="MenuName">
-              <el-input v-model="form.MenuName" placeholder="请输入菜单名称" />
+            <el-form-item
+              :label="$t('system:menu:form:menuName')"
+              prop="MenuName"
+            >
+              <el-input v-model="form.MenuName" placeholder="" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="显示排序" prop="ShowOrder">
-              <el-input-number v-model="form.ShowOrder" controls-position="right" :min="0" />
+            <el-form-item
+              :label="$t('system:menu:form:showOrder')"
+              prop="ShowOrder"
+            >
+              <el-input-number
+                v-model="form.ShowOrder"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'F'">
               <span slot="label">
-                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                <!--选择是外链则路由地址需要以`http(s)://`开头-->
+                <el-tooltip
+                  :content="$t('system:menu:form:isExternalLinkMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                是否外链
+                {{ $t("system:menu:form:isExternalLink") }}
               </span>
               <el-radio-group v-model="form.IsExternalLink">
-                <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{item.label}}</el-radio>
+                <el-radio
+                  v-for="item of $d.YesOrNo"
+                  :label="item.value"
+                  :key="item.id"
+                  >{{ item.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'F'" prop="path">
               <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                <!--访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头-->
+                <el-tooltip
+                  :content="$t('system:menu:form:pathMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                路由地址
+                {{ $t("system:menu:form:path") }}
               </span>
-              <el-input v-model="form.Path" placeholder="请输入路由地址" />
+              <el-input v-model="form.Path" placeholder="" />
             </el-form-item>
           </el-col>
           <el-col v-if="form.MenuType == 'C'" :span="12">
             <el-form-item prop="component">
               <span slot="label">
-                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                <!--访问的组件路径，如：`system/user/index`，默认在`views`目录下-->
+                <el-tooltip
+                  :content="$t('system:menu:form:componentMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                组件路径
+                {{ $t("system:menu:form:component") }}
               </span>
-              <el-input v-model="form.Component" placeholder="请输入组件路径" />
+              <el-input v-model="form.Component" placeholder="" />
             </el-form-item>
           </el-col>
           <el-col v-if="form.MenuType != 'F'" :span="12">
             <el-form-item prop="Redirect Path">
               <span slot="label">
-                <el-tooltip content="重定向路由，如：`/system/user/index`" placement="top">
+                <!--重定向路由，如：`/system/user/index`-->
+                <el-tooltip
+                  :content="$t('system:menu:form:redirectPathMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                重定向
+                {{ $t("system:menu:form:redirectPath") }}
               </span>
-              <el-input v-model="form.Redirect" placeholder="请输入重定向路由" />
+              <el-input v-model="form.Redirect" placeholder="" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'M'">
-              <el-input v-model="form.PermissionStr" placeholder="请输入权限标识" maxlength="100" />
+              <el-input
+                v-model="form.PermissionStr"
+                placeholder=""
+                maxlength="100"
+              />
               <span slot="label">
-                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
+                <!--控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)-->
+                <el-tooltip
+                  :content="$t('system:menu:form:permissionStrMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                权限字符
+                {{ $t("system:menu:form:permissionStr") }}
               </span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'M'">
-              <el-input v-model="form.ApiPath" placeholder="接口名" />
+              <el-input v-model="form.ApiPath" placeholder="" />
               <span slot="label">
-                <el-tooltip content="接口名" placement="top">
+                <!--接口名-->
+                <el-tooltip
+                  :content="$t('system:menu:form:apiPathMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                接口名
+                {{ $t("system:menu:form:apiPath") }}
               </span>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.MenuType == 'C'">
               <span slot="label">
-                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
+                <!--选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致-->
+                <el-tooltip
+                  :content="$t('system:menu:form:isCacheMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                是否缓存
+                {{ $t("system:menu:form:isCache") }}
               </span>
               <el-radio-group v-model="form.IsCache">
-                <el-radio :label="true">缓存</el-radio>
-                <el-radio :label="false">不缓存</el-radio>
+                <el-radio :label="true">{{
+                  $t("system:menu:form:radio:cache")
+                }}</el-radio>
+                <el-radio :label="false">{{
+                  $t("system:menu:form:radio:notCache")
+                }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'F'">
               <span slot="label">
-                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                <!--选择隐藏则路由将不会出现在侧边栏，但仍然可以访问-->
+                <el-tooltip
+                  :content="$t('system:menu:form:isDisplayMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                是否隐藏
+                {{ $t("system:menu:form:isDisplay") }}
               </span>
               <el-switch
                 v-model="form.IsDisplay"
@@ -247,10 +418,14 @@
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'F'">
               <span slot="label">
-                <el-tooltip content="选择隐藏则不会在trials模块的TAB中显示，但仍然可以访问" placement="top">
+                <!--c-->
+                <el-tooltip
+                  :content="$t('system:menu:form:isInTabDisplayMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                Tab显隐
+                {{ $t("system:menu:form:isInTabDisplay") }}
               </span>
               <el-switch
                 v-model="form.IsInTabDisplay"
@@ -262,10 +437,14 @@
           <el-col :span="12">
             <el-form-item v-if="form.MenuType != 'F'">
               <span slot="label">
-                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                <!--选择停用则路由将不会出现在侧边栏，也不能被访问-->
+                <el-tooltip
+                  :content="$t('system:menu:form:isEnablesMessage')"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                菜单状态
+                {{ $t("system:menu:form:isEnable") }}
               </span>
               <el-switch
                 v-model="form.IsEnable"
@@ -275,33 +454,41 @@
             </el-form-item>
           </el-col>
           <el-col v-if="form.MenuType != 'F'" :span="24">
-            <el-form-item label="LangMark">
+            <el-form-item :label="$t('system:menu:form:LangMark')">
               <el-input v-model="form.LanguageMark" placeholder="LangMark" />
             </el-form-item>
           </el-col>
           <el-col v-if="form.MenuType != 'F'" :span="24">
-            <el-form-item label="mate">
-              <el-input v-model="form.Meta" type="textarea" placeholder="{ title: 'Setting', breadcrumb: false, role: [8, 1, 2, 3, 10] }" />
+            <el-form-item :label="$t('system:menu:form:meta')">
+              <el-input
+                v-model="form.Meta"
+                type="textarea"
+                placeholder="{ title: 'Setting', breadcrumb: false, role: [8, 1, 2, 3, 10] }"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">{{
+          $t("system:menu:button:save")
+        }}</el-button>
+        <el-button @click="cancel">{{
+          $t("system:menu:button:canel")
+        }}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getMenuList, addOrUpdateMenu, deleteMenu } from '@/api/system/menu'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import IconSelect from '@/components/IconSelect'
+import { getMenuList, addOrUpdateMenu, deleteMenu } from "@/api/system/menu";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
 
 export default {
-  name: 'Menu',
+  name: "Menu",
   components: { Treeselect, IconSelect },
   data() {
     return {
@@ -312,7 +499,7 @@ export default {
       // 菜单树选项
       menuOptions: [],
       // 弹出层标题
-      title: '',
+      title: "",
       // 是否显示弹出层
       open: false,
       // 菜单状态数据字典
@@ -320,7 +507,7 @@ export default {
       // 查询参数
       queryParams: {
         menuName: undefined,
-        visible: undefined
+        visible: undefined,
       },
       // 是否展开，默认全部折叠
       isExpandAll: false,
@@ -331,168 +518,207 @@ export default {
       // 表单校验
       rules: {
         MenuName: [
-          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("system:menu:form:rule:notMenuName"),
+            trigger: "blur",
+          }, // 菜单名称不能为空
         ],
         ShowOrder: [
-          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: this.$t("system:menu:form:rule:notShowOrder"),
+            trigger: "blur",
+          }, // 菜单顺序不能为空
+        ],
+      },
+    };
   },
   created() {
-    console.log(this.hasPermi(['trials:trials-list:new', 'trials:trials-list:export1'], '&&'))
-    this.getList()
+    console.log(
+      this.hasPermi(
+        ["trials:trials-list:new", "trials:trials-list:export1"],
+        "&&"
+      )
+    );
+    this.getList();
     // this.getDicts("sys_show_hide").then(response => {
     //   this.visibleOptions = response.data;
     // });
   },
   methods: {
     toggleExpandAll() {
-      this.refreshTable = false
-      this.isExpandAll = !this.isExpandAll
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
       this.$nextTick(() => {
-        this.refreshTable = true
-      })
+        this.refreshTable = true;
+      });
     },
     normalizer(node) {
       if (node.Children && !node.Children.length) {
-        delete node.Children
+        delete node.Children;
       }
       return {
         id: node.MenuId,
         label: node.MenuName,
-        children: node.Children
-      }
+        children: node.Children,
+      };
     },
     toTree(arr, ParentId) {
       function loop(ParentId) {
-        const res = []
+        const res = [];
         for (let i = 0; i < arr.length; i++) {
-          const item = arr[i]
-          item.hasChildren = false
+          const item = arr[i];
+          item.hasChildren = false;
           if (item.ParentId !== ParentId) {
-            continue
+            continue;
           }
-          item.Children = loop(item.MenuId)
-          res.push(item)
+          item.Children = loop(item.MenuId);
+          res.push(item);
         }
-        return res
+        return res;
       }
-      return loop(ParentId)
+      return loop(ParentId);
     },
     // 选择图标
     selected(name) {
-      this.form.MenuIcon = name
+      this.form.MenuIcon = name;
     },
     /** 查询菜单列表 */
     getList() {
-      this.loading = true
-      getMenuList(this.queryParams).then(res => {
-        this.menuList = this.toTree(res.Result, '00000000-0000-0000-0000-000000000000')
-        const menu = { MenuId: '00000000-0000-0000-0000-000000000000', MenuName: '主类目', Children: [] }
-        menu.Children = this.menuList
-        this.menuOptions = Object.assign([], [menu])
-        this.loading = false
-      }).catch(function() {})
+      this.loading = true;
+      getMenuList(this.queryParams)
+        .then((res) => {
+          this.menuList = this.toTree(
+            res.Result,
+            "00000000-0000-0000-0000-000000000000"
+          );
+          const menu = {
+            MenuId: "00000000-0000-0000-0000-000000000000",
+            MenuName: "主类目",
+            Children: [],
+          };
+          menu.Children = this.menuList;
+          this.menuOptions = Object.assign([], [menu]);
+          this.loading = false;
+        })
+        .catch(function () {});
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      this.loading = true
-      getMenuList({}).then(res => {
-        const menu = { MenuId: '00000000-0000-0000-0000-000000000000', MenuName: '主类目', Children: [] }
-        menu.Children = this.toTree(res.Result, '00000000-0000-0000-0000-000000000000')
-        this.menuOptions = Object.assign([], [menu])
-        this.loading = false
-      }).catch(function() {})
+      this.loading = true;
+      getMenuList({})
+        .then((res) => {
+          const menu = {
+            MenuId: "00000000-0000-0000-0000-000000000000",
+            MenuName: "主类目",
+            Children: [],
+          };
+          menu.Children = this.toTree(
+            res.Result,
+            "00000000-0000-0000-0000-000000000000"
+          );
+          this.menuOptions = Object.assign([], [menu]);
+          this.loading = false;
+        })
+        .catch(function () {});
     },
     // 菜单显示状态字典翻译
     visibleFormat(row, column) {
-      if (row.MenuType === 'F') {
-        return ''
+      if (row.MenuType === "F") {
+        return "";
       }
-      return this.selectDictLabel(this.visibleOptions, row.visible)
+      return this.selectDictLabel(this.visibleOptions, row.visible);
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
       this.form = {
         MenuId: null,
         ParentId: null,
-        MenuType: 'M',
-        MenuIcon: '',
-        MenuName: '',
-        Path: '',
-        Component: '',
+        MenuType: "M",
+        MenuIcon: "",
+        MenuName: "",
+        Path: "",
+        Component: "",
         ShowOrder: null,
         IsEnable: true,
         IsCache: false,
         IsDisplay: false,
         IsInTabDisplay: false,
         IsExternalLink: false,
-        PermissionStr: '',
-        Note: '',
-        CreateTime: '',
+        PermissionStr: "",
+        Note: "",
+        CreateTime: "",
         LanguageMark: null,
-        Apipath: null
-      }
-      this.resetForm('form')
+        Apipath: null,
+      };
+      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.getList()
+      this.getList();
     },
     /** 新增按钮操作 */
     handleAdd(row) {
-      this.reset()
-      this.getTreeselect()
+      this.reset();
+      this.getTreeselect();
       if (row != null) {
-        this.form.ParentId = row.MenuId
+        this.form.ParentId = row.MenuId;
       }
-      this.open = true
-      this.title = '添加菜单'
+      this.open = true;
+      this.title = this.$t("system:menu:form:title:addMenu");
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset()
-      this.getTreeselect()
-      this.form = Object.assign({}, row)
-      this.open = true
-      this.title = '修改菜单'
+      this.reset();
+      this.getTreeselect();
+      this.form = Object.assign({}, row);
+      this.open = true;
+      this.title = this.$t("system:menu:form:title:editMenu");
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs['form'].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
-          addOrUpdateMenu(this.form).then(response => {
-            this.$message.success(this.$t('common:message:savedSuccessfully'))
-            this.open = false
-            this.getList()
-          })
+          addOrUpdateMenu(this.form).then((response) => {
+            this.$message.success(this.$t("common:message:savedSuccessfully"));
+            this.open = false;
+            this.getList();
+          });
         }
-      })
+      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$confirm('是否确认删除名称为"' + row.MenuName + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        return deleteMenu(row.MenuId)
-      }).then(() => {
-        this.getList()
-        this.$message.success('删除成功')
-      }).catch(function() {})
-    }
-  }
-}
+      let message = this.$t("system:menu:confirm:message:delete").replace(
+        "xxx",
+        row.MenuName
+      );
+      //'是否确认删除名称为"' + row.MenuName + '"的数据项?'
+      this.$confirm(message, this.$t("system:menu:confirm:title:warning"), {
+        confirmButtonText: this.$t("system:menu:button:save"),
+        cancelButtonText: this.$t("system:menu:button:canel"),
+        type: "warning",
+      })
+        .then(function () {
+          return deleteMenu(row.MenuId);
+        })
+        .then(() => {
+          this.getList();
+          this.$message.success(this.$t("common:message:deletedSuccessfully"));
+        })
+        .catch(function () {});
+    },
+  },
+};
 </script>
 <style lang="scss">
-  .vue-treeselect div{
+.vue-treeselect div {
   line-height: 40px;
-  }
+}
 </style>