|
@@ -0,0 +1,374 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" style="height: 100%; box-sizing: border-box; overflow-y: auto">
|
|
|
+ <div class="mymain-container">
|
|
|
+ <div class="btn-group clearfix">
|
|
|
+ <div class="fl">
|
|
|
+ <el-button size="small" type="primary" icon="el-icon-plus" @click="openFormWin('add', '0')"
|
|
|
+ >添加菜单</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="dataList"
|
|
|
+ row-key="moduleId"
|
|
|
+ border
|
|
|
+ default-expand-all
|
|
|
+ :tree-props="{ children: 'pages' }"
|
|
|
+ >
|
|
|
+ <el-table-column prop="moduleName" label="菜单名称" width="340px" />
|
|
|
+ <el-table-column prop="code" label="code" width="260px" />
|
|
|
+ <el-table-column align="center" prop="status" label="状态" width="80px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ ['显示', '不显示'][[true, false].indexOf(scope.row.status)] || '' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="remark" label="描述" />
|
|
|
+ <el-table-column align="right" label="操作" width="150" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="openFormWin('add', scope.row.moduleId)"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="openFormWin('edit', scope.row.moduleId)"
|
|
|
+ />
|
|
|
+ <el-popconfirm style="margin-left: 10px" title="确定删除吗?" @confirm="handleDelete(scope.row.moduleId)">
|
|
|
+ <el-button slot="reference" size="mini" icon="el-icon-delete" />
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 创建编辑菜单 -->
|
|
|
+ <div class="cartographer_big">
|
|
|
+ <el-dialog
|
|
|
+ :title="this.menuFormData.moduleId ? '编辑菜单' : '创建菜单'"
|
|
|
+ width="100%"
|
|
|
+ :modal="false"
|
|
|
+ :visible.sync="menuFormBool"
|
|
|
+ :before-close="cancelFormWin"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <zj-page-container v-if="menuFormBool">
|
|
|
+ <zj-page-fill class="neibuviewaaaaa">
|
|
|
+ <zj-form-container
|
|
|
+ ref="formRef"
|
|
|
+ :form-data="menuFormData"
|
|
|
+ :form-attributes="{ size: 'medium' }"
|
|
|
+ :styleSwitch="false"
|
|
|
+ >
|
|
|
+ <zj-form-module
|
|
|
+ title="基本信息"
|
|
|
+ :form-data="menuFormData"
|
|
|
+ :form-items="basicInfo"
|
|
|
+ :showHade="false"
|
|
|
+ label-width="120px"
|
|
|
+ />
|
|
|
+ </zj-form-container>
|
|
|
+ </zj-page-fill>
|
|
|
+ <div>
|
|
|
+ <div style="box-sizing: border-box; padding: 10px 60px; text-align: right">
|
|
|
+ <el-button @click="cancelFormWin">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitMenuForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </zj-page-container>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import { getMenuList, addMenu, editMenu, deleteMenu, getMenuDetail } from '@/api/miniMenus'
|
|
|
+import iconList from '@/const/iconList.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [], // 列表数据
|
|
|
+ listLoading: true, // 列表加载loading
|
|
|
+ isChooseIconDialog: false,
|
|
|
+ iconList: iconList,
|
|
|
+ menuTypeList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '服务产品'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '页面'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: '模块'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ menuFormData: {
|
|
|
+ parentId: '',
|
|
|
+ moduleId: '',
|
|
|
+ moduleName: '',
|
|
|
+ code: '',
|
|
|
+ type: 1,
|
|
|
+ status: true,
|
|
|
+ remark: '',
|
|
|
+ url: '',
|
|
|
+ fullUrl: '',
|
|
|
+ icon: '',
|
|
|
+ sortNum: 0,
|
|
|
+ flag: '',
|
|
|
+ isCache: 1,
|
|
|
+ childList: []
|
|
|
+ },
|
|
|
+ menuFormBool: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userid', 'name']),
|
|
|
+ basicInfo() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'el-radio',
|
|
|
+ md: 24,
|
|
|
+ options: this.menuTypeList,
|
|
|
+ attributes: {
|
|
|
+ placeholder: '请选择'
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '类型',
|
|
|
+ prop: 'type'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-cascader',
|
|
|
+ md: 24,
|
|
|
+ attributes: {
|
|
|
+ placeholder: '请选择',
|
|
|
+ options: [{ moduleId: '0', moduleName: '设定一级' }, ...this.dataList],
|
|
|
+ props: { checkStrictly: true, value: 'moduleId', label: 'moduleName', emitPath: false },
|
|
|
+ filterable: true,
|
|
|
+ clearable: true,
|
|
|
+ style: { width: '100%' }
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '上级',
|
|
|
+ prop: 'parentId'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 24,
|
|
|
+ attributes: {
|
|
|
+ placeholder: '请输入菜单名称'
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '菜单名称',
|
|
|
+ prop: 'moduleName',
|
|
|
+ rules: [{ required: true, message: '请选择类型', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 24,
|
|
|
+ attributes: {
|
|
|
+ placeholder: '请输入CODE'
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: 'CODE',
|
|
|
+ prop: 'code',
|
|
|
+ rules: [{ required: true, message: '请选择类型', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 24,
|
|
|
+ attributes: {
|
|
|
+ type: 'textarea',
|
|
|
+ rows: 3,
|
|
|
+ placeholder: '请输入'
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '备注',
|
|
|
+ prop: 'remark',
|
|
|
+ rules: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-switch',
|
|
|
+ md: 24,
|
|
|
+ attributes: {
|
|
|
+ 'active-value': true,
|
|
|
+ 'inactive-value': false,
|
|
|
+ 'active-color': '#13ce66',
|
|
|
+ 'inactive-color': '#ff4949'
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '是否显示',
|
|
|
+ prop: 'status'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取菜单列表
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ getMenuList({
|
|
|
+ adminUserId: this.userid,
|
|
|
+ flag: 'menu'
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.dataList = this.recursionFn(res.data)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 组合数据
|
|
|
+ recursionFn(arr) {
|
|
|
+ if (!arr.length) return
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if (arr[i].children.length) {
|
|
|
+ arr[i].pages = []
|
|
|
+ arr[i].controls = []
|
|
|
+ for (let j = 0; j < arr[i].children.length; j++) {
|
|
|
+ if ([1, 2, 4].includes(arr[i].children[j].type)) {
|
|
|
+ arr[i].pages.push(arr[i].children[j])
|
|
|
+ }
|
|
|
+ if ([3].includes(arr[i].children[j].type)) {
|
|
|
+ arr[i].controls.push(arr[i].children[j])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.recursionFn(arr[i].children)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr || []
|
|
|
+ },
|
|
|
+ // 打开 新增编辑
|
|
|
+ openFormWin(type, cid) {
|
|
|
+ if (type == 'add') {
|
|
|
+ this.menuFormData.parentId = cid
|
|
|
+ this.menuFormBool = true
|
|
|
+ } else if (type == 'edit') {
|
|
|
+ getMenuDetail({ moduleId: cid }).then(res => {
|
|
|
+ this.menuFormData = {
|
|
|
+ ...res.data
|
|
|
+ }
|
|
|
+ this.menuFormBool = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭窗口
|
|
|
+ cancelFormWin() {
|
|
|
+ this.$data.menuFormData = this.$options.data().menuFormData
|
|
|
+ this.$refs?.formRef?.resetFields()
|
|
|
+ this.menuFormBool = false
|
|
|
+ },
|
|
|
+ // 提交菜单
|
|
|
+ submitMenuForm() {
|
|
|
+ this.$refs.formRef.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.menuFormData.moduleId) {
|
|
|
+ editMenu(this.menuFormData).then(res => {
|
|
|
+ this.getList()
|
|
|
+ this.cancelFormWin()
|
|
|
+ this.$successMsg('编辑成功')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addMenu(this.menuFormData).then(res => {
|
|
|
+ this.getList()
|
|
|
+ this.cancelFormWin()
|
|
|
+ this.$successMsg('添加成功')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 操作 - 删除
|
|
|
+ handleDelete(id) {
|
|
|
+ deleteMenu({ id: id }).then(res => {
|
|
|
+ this.getList()
|
|
|
+ this.$successMsg()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.iconList {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ max-height: 40vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .item {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: #f5f5f5;
|
|
|
+ i {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .iconInput {
|
|
|
+ display: flex;
|
|
|
+ .icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #606266;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.el-image-viewer__wrapper .el-icon-circle-close {
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-size: 60px;
|
|
|
+}
|
|
|
+.el-table__row.expanded {
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+.neibuviewaaaaa {
|
|
|
+ .zj-page-fill-scroll {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|