123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503 |
- <template>
- <BasicLayout>
- <template #wrapper>
- <el-card class="box-card">
- <el-form :inline="true">
- <el-form-item label="菜单名称">
- <el-input
- v-model="queryParams.title"
- 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-option
- v-for="dict in visibleOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
- <el-button
- v-permisaction="['admin:sysMenu:add']"
- type="primary"
- icon="el-icon-plus"
- size="mini"
- @click="handleAdd"
- >新增</el-button>
- </el-form-item>
- </el-form>
- <el-table
- v-loading="loading"
- :data="menuList"
- border
- row-key="menuId"
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
- >
- <el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
- <el-table-column prop="icon" label="图标" align="center" width="100px">
- <template slot-scope="scope">
- <svg-icon :icon-class="scope.row.icon" />
- </template>
- </el-table-column>
- <el-table-column prop="sort" label="排序" width="60px" />
- <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
- <el-table-column prop="path" label="组建路径" :show-overflow-tooltip="true">
- <template slot-scope="scope">
- <span v-if="scope.row.menuType=='A'">{{ scope.row.path }}</span>
- <span v-else>{{ scope.row.component }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80">
- <template slot-scope="scope">
- <el-tag
- :type="scope.row.visible === '1' ? 'danger' : 'success'"
- disable-transitions
- >{{ visibleFormat(scope.row) }}</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
- <template slot-scope="scope">
- <span>{{ parseTime(scope.row.createdAt) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
- <template slot-scope="scope">
- <el-button
- v-permisaction="['admin:sysMenu:edit']"
- size="mini"
- type="text"
- icon="el-icon-edit"
- @click="handleUpdate(scope.row)"
- >修改</el-button>
- <el-button
- v-permisaction="['admin:sysMenu:add']"
- size="mini"
- type="text"
- icon="el-icon-plus"
- @click="handleAdd(scope.row)"
- >新增</el-button>
- <el-button
- v-permisaction="['admin:sysMenu:remove']"
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(scope.row)"
- >删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 添加或修改菜单对话框 -->
- <el-drawer
- ref="drawer"
- :title="title"
- :before-close="handleClose"
- :visible.sync="open"
- direction="rtl"
- custom-class="demo-drawer"
- size="830px"
- >
- <div class="demo-drawer__content">
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-row>
- <el-col :span="24">
- <el-form-item label="上级菜单">
- <treeselect
- v-model="form.parentId"
- :options="menuOptions"
- :normalizer="normalizer"
- :show-count="true"
- placeholder="选择上级菜单"
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="菜单标题" prop="title">
- <el-input v-model="form.title" placeholder="请输入菜单标题" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="显示排序" prop="sort">
- <el-input-number v-model="form.sort" controls-position="right" :min="0" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="菜单类型" 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-group>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="菜单图标">
- <el-popover
- placement="bottom-start"
- width="460"
- trigger="click"
- @show="$refs['iconSelect'].reset()"
- >
- <IconSelect ref="iconSelect" @selected="selected" />
- <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
- <svg-icon
- v-if="form.icon"
- slot="prefix"
- :icon-class="form.icon"
- class="el-input__icon"
- style="height: 32px;width: 16px;"
- />
- <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 v-if="form.menuType == 'M' || form.menuType == 'C'" label="路由名称" prop="menuName">
- <el-input v-model="form.menuName" placeholder="请输入路由名称" />
- </el-form-item>
- </el-col>
- <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
- <el-form-item label="组件路径" prop="component">
- <el-input v-model="form.component" placeholder="请输入组件路径" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" label="是否外链">
- <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 v-if="form.menuType != 'F'" label="路由地址" prop="path">
- <el-input v-model="form.path" placeholder="请输入路由地址" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'" label="权限标识">
- <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item v-if="form.menuType != 'F'" label="菜单状态">
- <el-radio-group v-model="form.visible">
- <el-radio
- v-for="dict in visibleOptions"
- :key="dict.dictValue"
- :label="dict.dictValue"
- >{{ dict.dictLabel }}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'" label="api权限">
- <el-transfer
- v-model="form.apis"
- style="text-align: left; display: inline-block"
- filterable
- :props="{
- key: 'id',
- label: 'title'
- }"
- :titles="['Source', 'Target']"
- :button-texts="['到左边', '到右边 ']"
- :format="{
- noChecked: '${total}',
- hasChecked: '${checked}/${total}'
- }"
- class="panel"
- :data="sysapiList"
- @change="handleChange"
- >
- <span slot-scope="{ option }">{{ option.id }} - {{ option.title }}</span>
- </el-transfer>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div class="demo-drawer__footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </div>
- </el-drawer>
- </el-card>
- </template>
- </BasicLayout>
- </template>
- <script>
- import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/admin/sys-menu'
- import { listSysApi } from '@/api/admin/sys-api'
- import Treeselect from '@riophae/vue-treeselect'
- import '@riophae/vue-treeselect/dist/vue-treeselect.css'
- import IconSelect from '@/components/IconSelect'
- export default {
- name: 'SysMenuManage',
- components: { Treeselect, IconSelect },
- data() {
- return {
- // 遮罩层
- loading: true,
- // 菜单表格树数据
- menuList: [],
- sysapiList: [],
- // 菜单树选项
- menuOptions: [],
- // 弹出层标题
- title: '',
- // 是否显示弹出层
- open: false,
- // 菜单状态数据字典
- visibleOptions: [],
- // 查询参数
- queryParams: {
- title: undefined,
- visible: undefined
- },
- // 表单参数
- form: {
- apis: [],
- sysApi: []
- },
- // 表单校验
- rules: {
- title: [{ required: true, message: '菜单标题不能为空', trigger: 'blur' }],
- sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }]
- }
- }
- },
- created() {
- this.getList()
- this.getApiList()
- this.getDicts('sys_show_hide').then(response => {
- this.visibleOptions = response.data
- })
- },
- methods: {
- handleChange(value, direction, movedKeys) {
- console.log(value, direction, movedKeys)
- const list = this.form.sysApi
- this.form.apis = value
- if (direction === 'right') {
- for (let x = 0; x < movedKeys.length; x++) {
- for (let index = 0; index < this.sysapiList.length; index++) {
- const element = this.sysapiList[index]
- if (element.id === movedKeys[x]) {
- list.push(element)
- break
- }
- }
- }
- this.form.sysApi = list
- } else if (direction === 'left') {
- const l = []
- for (let index = 0; index < movedKeys.length; index++) {
- const element = movedKeys[index]
- for (let x = 0; x < list.length; x++) {
- const e = list[x]
- if (element !== e.id) {
- l.push()
- break
- }
- }
- }
- this.form.sysApi = l
- }
- // this.setApis(this.form.SysApi)
- console.log(this.form.sysApi)
- },
- getApiList() {
- this.loading = true
- listSysApi({ 'pageSize': 10000 }).then(response => {
- this.sysapiList = response.data.list
- // this.total = response.data.count
- this.loading = false
- }
- )
- },
- handleClose(done) {
- if (this.loading) {
- return
- }
- this.$confirm('需要提交表单吗?')
- .then(_ => {
- this.loading = true
- this.timer = setTimeout(() => {
- done()
- // 动画关闭需要一定的时间
- setTimeout(() => {
- this.loading = false
- }, 400)
- }, 1000)
- })
- .catch(_ => {})
- },
- // 选择图标
- selected(name) {
- this.form.icon = name
- },
- /** 查询菜单列表 */
- getList() {
- this.loading = true
- listMenu(this.queryParams).then(response => {
- this.menuList = response.data
- this.loading = false
- })
- },
- /** 转换菜单数据结构 */
- normalizer(node) {
- if (node.children && !node.children.length) {
- delete node.children
- }
- return {
- id: node.menuId,
- label: node.title,
- children: node.children
- }
- },
- /** 查询菜单下拉树结构 */
- getTreeselect() {
- listMenu().then(response => {
- this.menuOptions = []
- const menu = { menuId: 0, title: '主类目', children: [] }
- menu.children = response.data
- this.menuOptions.push(menu)
- })
- },
- // 菜单显示状态字典翻译
- visibleFormat(row) {
- if (row.menuType === 'F') {
- return '-- --'
- }
- return this.selectDictLabel(this.visibleOptions, row.visible)
- },
- // 取消按钮
- cancel() {
- this.open = false
- this.reset()
- },
- // 表单重置
- reset() {
- this.form = {
- menuId: undefined,
- parentId: 0,
- menuName: undefined,
- icon: undefined,
- menuType: 'M',
- apis: [],
- sort: 0,
- action: this.form.menuType === 'A' ? this.form.action : '',
- isFrame: '1',
- visible: '0'
- }
- this.resetForm('form')
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.getList()
- },
- /** 新增按钮操作 */
- handleAdd(row) {
- this.reset()
- this.getTreeselect()
- if (row != null) {
- this.form.parentId = row.menuId
- }
- this.open = true
- this.title = '添加菜单'
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.reset()
- this.getTreeselect()
- getMenu(row.menuId).then(response => {
- this.form = response.data
- this.open = true
- this.title = '修改菜单'
- })
- },
- setApis(apiArray) {
- var l = []
- for (var index = 0; index < apiArray.length; index++) {
- const element = apiArray[index]
- l.push(element.id)
- }
- this.form.apis = l
- },
- /** 提交按钮 */
- submitForm: function() {
- this.$refs['form'].validate(valid => {
- if (valid) {
- if (this.form.menuId !== undefined) {
- updateMenu(this.form, this.form.menuId).then(response => {
- if (response.code === 200) {
- this.msgSuccess('修改成功')
- this.open = false
- this.getList()
- } else {
- this.msgError(response.msg)
- }
- })
- } else {
- addMenu(this.form).then(response => {
- if (response.code === 200) {
- this.msgSuccess('新增成功')
- this.open = false
- this.getList()
- } else {
- this.msgError(response.msg)
- }
- })
- }
- }
- })
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- this.$confirm('是否确认删除名称为"' + row.title + '"的数据项?', '警告', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(function() {
- var Ids = (row.menuId && [row.menuId]) || this.ids
- return delMenu({ 'ids': Ids })
- }).then(() => {
- this.getList()
- this.msgSuccess('删除成功')
- }).catch(function() {})
- }
- }
- }
- </script>
- <style lang="css">
- .panel .el-transfer__buttons{
- width: 150px;
- }
- .panel .el-transfer__buttons .el-button + .el-button{
- margin-left:0;
- }
- .panel .el-transfer-panel{
- width: 260px;
- }
- </style>
|