ETA1.0.4 菜单配置

src/api/modules/etaMenuApi.js

@@ -0,0 +1,59 @@
+/* ETA菜单配置api */
+import http from "@/api/http.js"
+export const menuConfigInterface = {
+    /**
+     * 获取商家菜单列表
+     * @param {String} Keyword 关键词 
+     * @returns 
+     */
+    getMenuList:params=>{
+        return http.get('/eta_business/menu/list',params)
+    },
+    /**
+     * 新增菜单
+     * @param {Number} ParentId 父级id，一级菜单填0 
+     * @param {String} MenuType 菜单类型 0菜单 1按钮 2字段
+     * @param {String} Name 菜单名称
+     * @param {String} IconPath 菜单图标地址 
+     * @param {Number} Sort 排序
+     * @param {String} Path 路由地址 etaMenuConfig 不加斜杠
+     * @param {String} Component 组件路径，目前跟路由地址是一样的值
+     * @param {Number} Hidden 0显示 1隐藏
+     * @param {String} ButtonCode 按钮唯一标识，类型为按钮字段时必填
+     * @returns 
+     */
+    addMenu:params=>{
+        return http.post('/eta_business/menu/add',params)
+    },
+    /**
+     * 编辑菜单
+     * @param {Number} MenuId 菜单ID 其他参数同上
+     * @returns 
+     */
+    exitMenu:params=>{
+        return http.post('/eta_business/menu/edit',params)
+    },
+    /**
+     * 删除菜单
+     * @param {Number} MenuId 
+     * @returns 
+     */
+    removeMenu:params=>{
+        return http.post('/eta_business/menu/remove',params)
+    },
+    /**
+     * 获取菜单icon列表
+     * @returns 
+     */
+    getMenuIconList:params=>{
+        return http.get('/eta_business/menu/icon/list',params)
+    },
+    /**
+     * 新增icon
+     * @returns 
+     */
+    addMenuIcon:params=>{
+        return http.post('/eta_business/menu/icon/add',params)
+    },
+
+}

src/routes/modules/operateRoutes.js

@@ -117,6 +117,12 @@ export default [
 					pathName: '帮助中心配置'
 				}
 			},
+			{
+				path:"etaMenuConfig",
+				component:() => import('@/views/system_manage/etaMenu_manage/etaMenuConfig'),
+				name:'ETA菜单配置',
+				hidden:false,
+			}
 		]
 	}
 ]

src/views/system_manage/etaMenu_manage/components/ChoosedIconDialog.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="choosed-icon-wrap">
+        <el-dialog
+            :visible.sync="isShowIconDialog"
+            :close-on-click-modal="false"
+            :modal-append-to-body='false'
+            title="选择图标"
+            @close="$emit('close')"
+            width="420px"
+            v-dialogDrag
+            center
+        >
+            <div class="dialog-container-wrap">
+                <div class="top">
+                    <el-upload action="" accept="image/*" 
+                        :http-request="handleUploadImg" 
+                        :show-file-list="false"
+                    >
+                        <el-button size="small">选择文件</el-button>
+                        <span>支持上传图标</span>
+                    </el-upload>
+                    
+                    
+                </div>
+                <div class="icon-box">
+                    <div class="icon-item" :class="{'active':icon.IconPath===choosedIcon}" 
+                        v-for="icon in iconList" :key="icon.IconId"
+                        @click.stop="choosedIcon = icon.IconPath">
+                        <img :src="icon.IconPath">
+                    </div>
+                </div>
+                <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
+                    <el-button type="primary" plain  @click="$emit('close')">取消</el-button>
+                    <el-button type="primary"  style="margin-left:50px;" @click="saveIcon">保存</el-button>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {menuConfigInterface} from '@/api/modules/etaMenuApi';
+import {bannerupload} from '@/api/api.js';
+export default {
+    props:{
+        isShowIconDialog:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            iconList:[],
+            choosedIcon:''
+        };
+    },
+    watch:{
+        isShowIconDialog(newVal){
+            if(newVal){
+                this.getIconList()
+            }
+        }
+    },
+    methods: {
+        getIconList(){
+            menuConfigInterface.getMenuIconList().then(res=>{
+                if(res.Ret!==200) return 
+                this.iconList = res.Data||[]
+            })
+        },
+        async handleUploadImg(e){
+            if(!['image/png','image/jpeg'].includes(e.file.type)){
+                this.$message.warning('仅支持png、jpg格式的图片')
+                return
+            }
+            let form = new FormData()
+            form.append("file", e.file)
+            const res = await bannerupload(form)
+            if(res.Ret===200){
+                await menuConfigInterface.addMenuIcon({
+                    IconPath:res.Data.ResourceUrl
+                })
+                this.getIconList()
+            }
+        },
+        saveIcon(){
+            if(!this.choosedIcon){
+                this.$message.warning('请选择图标')
+                return
+            }
+            this.$emit('save',this.choosedIcon)
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.choosed-icon-wrap{
+    .top{
+        span{
+            margin-left: 15px;
+            color: #DCDCDC;
+        }
+    }
+    .icon-box{
+        margin: 20px 0;
+        border:1px dashed #DCDCDC;
+        padding:20px;
+        display: flex;
+        flex-wrap: wrap;
+        gap:20px;
+        max-height: 256px;
+        overflow-y: auto;
+        .icon-item{
+            width:30px;
+            height:30px;
+            cursor: pointer;
+            img{
+                width: 100%;
+            }
+            &:hover,&.active{
+                background-color: antiquewhite;
+                border-radius: 50%;
+            }
+        }
+    }
+}
+</style>

src/views/system_manage/etaMenu_manage/components/ModifyMenuDialog.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="modify-menu-wrap">
+        <el-dialog
+            :visible.sync="isShowMenuDialog"
+            :close-on-click-modal="false"
+            :modal-append-to-body='false'
+            :title="form.MenuId?'编辑菜单':'添加菜单'"
+            @close="$emit('close')"
+            width="820px"
+            v-dialogDrag
+            center
+        >
+            <div class="dialog-container-wrap">
+                <el-form :model="form" :rules="rules" label-width="80px" ref="menuForm">
+                    <el-form-item label="菜单类型" prop="MenuType">
+                        <el-radio-group v-model="form.MenuType" :disabled="form.MenuId">
+                            <el-radio :label="0" :disabled="isMenuDisabled">菜单</el-radio>
+                            <el-radio :label="1" :disabled="isbtnDisabled">按钮</el-radio>
+                            <el-radio :label="2" :disabled="isbtnDisabled">字段</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="上级菜单" prop="ParentId">
+                        <el-cascader v-model="form.ParentId"
+                            :options="menuList"
+                            :props="menuProps"
+                            :disabled="openType!=='add'"
+                        >
+                        </el-cascader>
+                    </el-form-item>
+                    <el-form-item label="菜单标题" prop="Name">
+                        <el-input v-model="form.Name"></el-input>
+                    </el-form-item>
+                    <template v-if="form.MenuType===0">
+                        <el-form-item label="菜单图标" prop="Name">
+                            <div class="icon-wrap">
+                                <img :src="form.IconPath" v-if="form.IconPath">
+                                <el-button @click="isShowIconDialog = true">选择图标</el-button>
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="路由地址" prop="Path">
+                            <el-input v-model="form.Path"></el-input>
+                        </el-form-item>
+                        <el-form-item label="组件地址" prop="Component">
+                            <el-input v-model="form.Component"></el-input>
+                        </el-form-item>
+                    </template>
+                    <el-form-item label="按钮ID" prop="ButtonCode">
+                        <el-input v-model="form.ButtonCode"></el-input>
+                    </el-form-item>
+                    <el-form-item label="显示排序" prop="Sort">
+                        <el-input v-model="form.Sort"></el-input>
+                    </el-form-item>
+                    <el-form-item label="是否隐藏" prop="Hidden">
+                        <el-radio-group v-model="form.Hidden">
+                            <el-radio :label="0">显示</el-radio>
+                            <el-radio :label="1">隐藏</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-form>
+                <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
+                    <el-button type="primary" plain style="width:200px;" @click="$emit('close')">取消</el-button>
+                    <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveMenu">保存</el-button>
+                </div>
+            </div>
+        </el-dialog>
+        <ChoosedIconDialog 
+            :isShowIconDialog="isShowIconDialog"
+            @save="(e)=>{form.IconPath = e;isShowIconDialog = false}"
+            @close="isShowIconDialog = false"
+        />
+    </div>
+</template>
+
+<script>
+import ChoosedIconDialog from './ChoosedIconDialog.vue';
+
+export default {
+    props: {
+        formData: {
+            type: Object,
+            default: {}
+        },
+        isShowMenuDialog: {
+            type: Boolean,
+            default: false
+        },
+        etaMenu: {
+            type: Array,
+            default: []
+        },
+        openType: {
+            type: String,
+            default: 'add'
+        }
+    },
+    data() {
+        return {
+            form: {
+                MenuType: 0,
+                ParentId: 0,
+                Name: '',
+                IconPath: '',
+                Path: '',
+                Component: '',
+                Sort: 0,
+                Hidden: 0,
+                ButtonCode: '',
+                treeLevel: 0
+            },
+            rules: {},
+            menuList: [{
+                    MenuId: -1,
+                    Name: '无'
+                }],
+            menuProps: {
+                value: 'MenuId',
+                label: 'Name',
+                children: 'Children',
+                checkStrictly: true,
+                emitPath: false,
+            },
+            isShowIconDialog: false,
+        };
+    },
+    watch: {
+        isShowMenuDialog(newVal) {
+            if (newVal) {
+                this.form = this.$options.data().form;
+                this.menuList = this.$options.data().menuList;
+                this.initForm();
+            }
+        },
+        'form.MenuType': {
+            handler(newVal) {
+                this.changeListLevel(newVal);
+            },
+            deep: true
+        }
+    },
+    computed: {
+        //菜单类型-菜单 是否禁用
+        isMenuDisabled() {
+            return this.form.treeLevel > 1 && this.openType !== 'add';
+        },
+        //菜单类型-按钮、字段 是否禁用
+        isbtnDisabled() {
+            return this.form.treeLevel === 1 && this.openType !== 'add';
+        }
+    },
+    methods: {
+        initForm() {
+            this.menuList = [...this.menuList, ..._.cloneDeep(this.etaMenu)];
+            if (this.openType === 'addNext') {
+                this.form.ParentId = this.formData.ParentId;
+                this.form.treeLevel = this.formData.treeLevel;
+            }
+            if (this.openType === 'edit') {
+                this.form = _.cloneDeep(this.formData);
+            }
+            if (this.form.treeLevel > 1 && this.openType !== 'edit') {
+                this.form.MenuType = 1;
+            }
+        },
+        saveMenu() {
+            //检验表单
+            this.$emit(this.form.MenuId ? 'edit' : 'add', this.form);
+        },
+        changeListLevel(level) {
+            if (level === 0) {
+                this.menuList = this.menuList.map(m => {
+                    if (m.Children) {
+                        delete m.Children;
+                    }
+                    return m;
+                });
+            }
+            else {
+                this.menuList = [...this.$options.data().menuList, ..._.cloneDeep(this.etaMenu)];
+            }
+        }
+    },
+    components: { ChoosedIconDialog }
+};
+</script>
+
+<style lang="scss">
+.modify-menu-wrap{
+    .dialog-container-wrap{
+        display: flex;
+        flex-direction: column;
+        .el-form{
+            align-self: center;
+            .el-form-item{
+                .el-input{
+                    width: 315px;
+                }
+                .icon-wrap{
+                    display: flex;
+                    align-items: center;
+                    img{
+                        width:24px;
+                        height: 24px;
+                        margin-right: 15px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/system_manage/etaMenu_manage/etaMenuConfig.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="eta-menu-config-wrap">
+        <div class="menu-top">
+            <el-button type="primary" @click="modifyMenu('add',{})">添加菜单</el-button>
+            <el-input placeholder="请输入菜单名称" prefix-icon="el-icon-search" clearable
+                v-model="Keyword" @input="getMenuData"></el-input>
+        </div>
+        <div class="menu-table">
+            <el-table border
+                :data="tableData"
+                row-key="MenuId"
+                :tree-props="{children:'Children'}"
+            >
+                <el-table-column v-for="column in tableColumns" :key="column.key"
+                    header-align="center"
+                    :align="column.key==='Name'?'':'center'"
+                    :prop="column.key"
+                    :label="column.label">
+                    <template slot-scope="{row}">
+                        <!-- 菜单名称 -->
+                        <div class="menu-name" v-if="column.key==='Name'">
+                            <span>{{row[column.key]}}</span>
+                        </div>
+                        <!-- 图标 -->
+                        <div class="menu-icon" v-else-if="column.key==='IconPath'">
+                            <img :src="row[column.key]" v-if="row[column.key]" style="width:24px;height:24px;">
+                            <span v-else>-</span>
+                        </div>
+                        <!-- 状态 -->
+                        <div class="menu-status" v-else-if="column.key==='Hidden'">
+                            <span>{{row[column.key]===0?'显示':'隐藏'}}</span>
+                        </div>
+                        <div v-else>
+                            <span>{{row[column.key]}}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="操作">
+                    <template slot-scope="{row}">
+                        <el-button type="text" @click="modifyMenu('addNext',row)">添加子项</el-button>
+                        <el-button type="text" @click="modifyMenu('edit',row)">编辑</el-button>
+                        <el-button type="text" style="color:#FF0000;" @click="deleteMenu(row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <ModifyMenuDialog 
+            :isShowMenuDialog="isShowMenuDialog"
+            :formData="formData"
+            :etaMenu="tableData"
+            :openType="openType"
+            @close="()=>{formData = {};isShowMenuDialog = false;}"
+        />
+    </div>
+</template>
+
+<script>
+import {menuConfigInterface} from '@/api/modules/etaMenuApi';
+import ModifyMenuDialog from './components/ModifyMenuDialog.vue';
+export default {
+    data() {
+        return {
+            Keyword: '',
+            tableColumns: [{
+                    label: '菜单名称',
+                    key: 'Name',
+                }, {
+                    label: '图标',
+                    key: 'IconPath',
+                }, {
+                    label: '状态',
+                    key: 'Hidden',
+                }, {
+                    label: '创建时间',
+                    key: 'CreateTime',
+                }],
+            tableData: [{}],
+            formData: {},
+            openType:'add',
+            isShowMenuDialog: false,
+        };
+    },
+    methods: {
+        getMenuData() {
+            menuConfigInterface.getMenuList({
+                Keyword: this.Keyword
+            }).then(res => {
+                if (res.Ret !== 200)
+                    return;
+                this.tableData = res.Data.List || [];
+                this.tableData.forEach(d=>{
+                    this.formatData(d,0)
+                })
+            });
+        },
+        //给data加上层级
+        formatData(data,level){
+            data.treeLevel = level
+            if(data.Children && data.Children.length){
+                data.Children = data.Children.map(i=>{
+                    return this.formatData(i,level+1)
+                })
+            }
+            return data
+        },
+        modifyMenu(type, data) {
+            if (type === 'addNext') {
+                this.formData.ParentId = data.MenuId;
+                this.formData.treeLevel = data.treeLevel+1
+            }
+            else if (type === 'edit') {
+                this.formData = data;
+            }
+            else {
+                this.formData = {treeLevel:0};
+            }
+            this.openType = type
+            this.isShowMenuDialog = true;
+        },
+        deleteMenu(data){
+            console.log('scope',data)
+        }
+    },
+    mounted() {
+        this.getMenuData();
+    },
+    components: { ModifyMenuDialog }
+};
+</script>
+
+<style scoped lang="scss">
+.eta-menu-config-wrap{
+    .menu-top{
+        padding:20px;
+        background-color: #fff;
+        display: flex;
+        justify-content: space-between;
+        .el-input{
+            width:260px;
+        }
+    }
+    .menu-table{
+        margin-top: 20px;
+        padding:20px;
+        background-color: #fff;
+        .menu-name{
+            display: inline-block;
+        }
+    }
+}
+</style>