XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

管理平台菜单页新增国际化
continuous-integration/drone/push Build is passing Details

uat_us
wangxiaoshuang 2024-07-08 11:43:26 +08:00
parent 9ce1e569eb
commit 17c796bd53
1 changed files with 398 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

568
src/views/system/menu/index.vue
View File

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