Merge branch '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 
+     */
+    editMenu: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,132 @@
+<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
+            }
+            if(e.file.size>50*1024){
+                this.$message.warning('图标文件大小不能超过50kb')
+                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,247 @@
+<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" :hide-required-asterisk="true" 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="nameLabel" 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" v-if="form.treeLevel===0">
+                            <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-tooltip effect="dark" content="页面跳转路径" placement="right">
+                                <span class="hint-text">
+                                    <i class="el-icon-warning-outline"></i>
+                                </span>
+                            </el-tooltip>
+                        </el-form-item>
+                        <el-form-item label="组件地址" prop="Component">
+                            <el-input v-model="form.Component"></el-input>
+                            <el-tooltip effect="dark" content="代码中页面地址" placement="right">
+                                <span class="hint-text">
+                                    <i class="el-icon-warning-outline"></i>
+                                </span>
+                            </el-tooltip>
+                        </el-form-item>
+                    </template>
+                    <el-form-item label="按钮ID" prop="ButtonCode" v-if="form.MenuType!==0">
+                        <el-input v-model="form.ButtonCode"></el-input>
+                    </el-form-item>
+                    <el-form-item label="显示排序" prop="Sort">
+                        <el-input v-model="form.Sort" type="number" :min="0"></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: {
+                ParentId:[{required:true,message:'请选择上级菜单'}],
+                Name:[{required:true,message:'请输入菜单标题'}],
+                IconPath:[{required:true,message:'请选择菜单图标'}],
+                Path:[{required:true,message:'请输入路由地址'}],
+                Component:[{required:true,message:'请输入组件地址'}],
+                Sort:[{required:true,message:'请输入显示排序'}],
+                ButtonCode:[{required:true,message:'请输入按钮ID'}]
+            },
+            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();
+                this.$nextTick(()=>{
+                    this.$refs.menuForm&&this.$refs.menuForm.clearValidate();
+                })
+            }
+        },
+        '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';
+        },
+        nameLabel(){
+            const nameMap = {
+                0:'菜单标题',
+                1:'按钮名称',
+                2:'字段名称'
+            }
+            return nameMap[this.form.MenuType]||'菜单标题'
+        },
+    },
+    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;
+            }
+            if(this.form.treeLevel===0 && this.openType !== 'add'){
+                this.form.ParentId = -1
+            }
+        },
+        saveMenu() {
+            //检验表单
+            this.$refs.menuForm.validate((valid)=>{
+                if(valid){
+                    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,205 @@
+<template>
+    <div class="eta-menu-config-wrap">
+        <div class="menu-top">
+            <el-button type="primary" @click="handleModifyMenu('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="handleModifyMenu('addNext',row)">添加子项</el-button>
+                        <el-button type="text" @click="handleModifyMenu('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"
+            @add="(params)=>{modifyMenu(params,'addMenu')}"
+            @edit="(params)=>{modifyMenu(params,'editMenu')}"
+            @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
+        },
+        handleModifyMenu(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){
+            const hintTextMap = {
+                0:'菜单及子项',
+                1:'按钮',
+                2:'字段'
+            }
+            this.$confirm(`删除后不可恢复，确认删除该${hintTextMap[data.MenuType]}吗？`,'提示',{
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(()=>{
+                menuConfigInterface.removeMenu({MenuId:data.MenuId}).then(res=>{
+                    if(res.Ret!==200) return 
+                    this.$message.success('删除成功')
+                    this.getMenuData()
+                })
+            }).catch(()=>{})
+            
+        },
+        modifyMenu(params,type){
+            let InterfaceParams = {}
+            if(params.MenuType===0){
+                const {ParentId,MenuType,Name,IconPath,Sort,Path,Component,Hidden} = params
+                InterfaceParams = {
+                    ParentId:ParentId===-1?0:ParentId,
+                    MenuType,
+                    Name,
+                    IconPath,
+                    Sort:Number(Sort),
+                    Path,
+                    Component,
+                    Hidden
+                }
+            }else{
+                const {ParentId,MenuType,Name,Sort,Hidden,ButtonCode} = params
+                InterfaceParams = {
+                    ParentId:ParentId===-1?0:ParentId,
+                    MenuType,
+                    Name,
+                    Sort,
+                    Hidden,
+                    ButtonCode
+                }
+            }
+            if(type==='editMenu'){
+                InterfaceParams = {...{MenuId:params.MenuId},...InterfaceParams}
+            }
+            menuConfigInterface[type](InterfaceParams).then(res=>{
+                    if(res.Ret!==200) return 
+                    this.$message.success(`${type==='addMenu'?'添加':'编辑'}成功`)
+                    this.getMenuData()
+                    this.isShowMenuDialog = false
+                })
+        },
+        editMenu(params){}
+    },
+    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>