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

<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'?false:!(openType!=='add'&&form.MenuType===0&&form.treeLevel===1)"
                        >
                        </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>