JLH/JLHAPP/src/components/lj-button-menu.vue

<!-- 
 @name 按钮菜单组件
 @desc 基于Muse UI
【必填参数】：
    @param [Array] [buttons] - 选填必要参数之一 或 使用方法 addMain({Object}) | addMore({Object}) 来初始化按钮
        @example1: buttons[
                {
                    type:"main", // 按钮分类
                    icon:"icon-ic_add", // 按钮图标
                    color:"primary", // 按钮颜色
                    span:3, // 按钮栅格占据的格数
                    label:"明细", // 按钮文本
                    isIconLeft:true, // 按钮图标是否靠左
                    methodName:"add" // 按钮执行方法名
                },
                {
                    type: "more",
                    icon:"icon-settings",
                    color:"grey",
                    label:"布局",
                    methodName:"setting"
                }
            ]
        @example2: 
            this.$refs.xxxx
            .addMainMenu({icon:"icon-ic_add",color:"primary",span:3,label:"明细",iconLeft:true,methodName:"add"})
            .addMoreMenu({icon:"icon-settings",color:"grey",label:"布局",methodName:"setting"})
            .addMoreMenu({icon:"icon-ic_refresh",color:"grey",label:"清空",methodName:"clean"})

【选填参数】
    @param String [justifyContent] - 主轴的 flex 元素对齐方式
        @default: start
    @param String [alignItems] - 定义了侧轴方向上将当前行上的 flex 元素对齐方式
        @default: end

【插槽】
    @slot [default] - 主按钮与更多按钮之间自定义内容

【回调出参】
    @function {out} callFunction(methodName) - 按钮事件；
        【参数】String methodName - 按钮事件方法名

【父组件调用方法】
    @function {in} handleLayoutSetting({param}) - 设置布局；
    @function {in} MergeCustomSetting({param}) - 获取布局；
        【参数】param:{
                    dwname:xxxx,
                    apiName:xxxx,
                    gridColumns:xxxx
                }
【实例】
e.g. <button-menu-tools align-items = "start" :buttons = "buttonList" />
 -->
<template>
    <div class="LjButtonMenu">
        <mu-row :justify-content="justifyContent" :align-items="alignItems">
            <mu-col :span="moreVisiable ? '10' : '12'">
                <mu-row class="button-menu-row">
                    <template v-if="mainMenu.length > 0">
                        <template v-for="(item,index) in mainMenu">
                            <mu-col  :key="index" :order="item.order" :span="item.span" v-if="item.visiable" :offset="item.offset">
                                <template v-if="item.type == 'search'">
                                    <div class="search-box">
                                        <div class="prepend">
                                            <mu-select v-model="selectValue" class="prepend-select" @change="handleSelmuSelect">
                                                <i class="iconfont icon-search" slot="prepend" />
                                                <mu-option v-for="(option, idx) in selectList" :key="idx" :label="option" :value="option"></mu-option>
                                            </mu-select>
                                        </div>
                                        <div class="content">
                                            <mu-auto-complete class="search-auto-complete" :data="autoCompleteFruits" :max-search-results="5"  v-model="searchAutoComplete" @select="handleSelectAutoComplete" @keyup.enter.native="handleEnterAutoComplete" open-on-focus>
                                            </mu-auto-complete>
                                        </div>
                                        <div class="append">
                                            <mu-button small round class="append-btn" color="primary" @click="handleEnterAutoComplete">
                                                搜索
                                            </mu-button>
                                        </div>
                                    </div>
                                </template>
                                <template v-else-if="item.type == 'chip'">
                                    <mu-chip class="btnmenu-chip" :color="item.color" @click.stop="callFunction(item.methodName)" @delete="handleDelChip" delete>
                                        <template v-if="item.icon">
                                            <i :class="['iconfont',item.icon]" v-if="item.isIconLeft" />
                                            <span class="text-ellipsis-one">
                                                {{item.label}}
                                            </span>
                                            <i :class="['iconfont',item.icon]" v-if="!item.isIconLeft" />
                                        </template>
                                        <template v-else>
                                            <span class="text-ellipsis-one">
                                                {{item.label}}
                                            </span>
                                        </template>
                                    </mu-chip>
                                </template>
                                <template v-else-if="item.type == 'select'">
                                    <van-popover v-model:show="popoverOpen" :actions="popoverList" @select="handleClickPopoverItem">
                                        <template #reference>
                                            <van-button :type="item.color" plain size="small" class="vanbuttonTomu" @click="callFunction(item.methodName)">
                                                {{item.label}}{{item.value}}
                                            </van-button>
                                        </template>
                                    </van-popover>
                                </template>
                                <template v-else>
                                    <mu-button :color="item.color" flat @click="callFunction(item.methodName)">
                                        <template v-if="item.icon">
                                            <i :class="['iconfont',item.icon]" v-if="item.isIconLeft" />
                                            {{item.label}}
                                            <i :class="['iconfont',item.icon]" v-if="!item.isIconLeft" />
                                        </template>
                                        <template v-else>{{item.label}}</template>
                                    </mu-button>
                                </template>
                            </mu-col>
                        </template>
                    </template>
                    <slot></slot>
                </mu-row>
            </mu-col>
            <mu-col v-if="moreVisiable && moreButtons.length > 0" span="2">
                <mu-menu placement="bottom-end" :open.sync="openMenu">
                    <mu-button class="more-btn" flat>
                        <i class="iconfont icon-more" />
                        <mu-badge class="more-badge" v-if="morebadge" color="#FF3B30" :content="morebadge"></mu-badge>
                    </mu-button>
                    <mu-list slot="content">
                        <template v-for="(item,index) in moreButtons">
                            <mu-list-item button :key="index" @click="callFunction(item.methodName)" v-if="item.visiable">
                                <mu-list-item-action><i :class="['iconfont',item.icon]" /></mu-list-item-action>
                                <mu-list-item-title>{{item.label}}</mu-list-item-title>
                                <mu-list-item-action v-if="item.badge">
                                    <mu-badge class="more-badge" :color="item.badgeColor" :content="item.badge"></mu-badge>
                                </mu-list-item-action>
                            </mu-list-item>
                        </template>
                    </mu-list>
                </mu-menu>
            </mu-col>
        </mu-row>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        justifyContent: {
            type: String,
            default: "between"
        },
        alignItems: {
            type: String,
            default: "end"
        },
        mainButtons: {
            type: Array,
            default: () => {return []}
        },
        moreButtons: {
            type: Array,
            default: () => {return []}
        },
        moreVisiable: {
            type: Boolean,
            default: true
        },
        morebadge: { // 更多icon的微标
            type: String,
            default:''
        },
        autoCompleteFruits: { // 搜索推荐列表
            type: Array,
            default: () => {return []}
        },
        selectList: { // 搜索推荐列表
            type: Array,
            default: () => {return []}
        }
    },
    watch:{
        mainButtons: function(){
            this.mainMenu = this.mainButtons
        },
        // moreMenu: function(){
        //     this.moreMenu = this.moreButtons
        // }
        // moreMenu: {
        //     handler(val, oldVal) {
        //         this.moreMenu = this.moreButtons
        //     },
        //     deep: true
        // }
    },
    data() {
        return {
            mainMenu: this.mainButtons,
            openMenu: false,
            // moreMenu: this.moreButtons
            selectValue: '',
            searchAutoComplete: "",
            popoverOpen: false,
            trigger: null,
            activeButton: null,
            popoverList: []
        }
    },
    methods: {
        /**清空搜索结果 */
        handleDelChip() {
            this.$emit('clearSearch');
        },
        /**搜索栏：mu-select下拉选择时 */
        handleSelmuSelect(val) {
            this.$emit('selMuSelect', val);
        },
        /**设置下拉初始值 */
        fnSetSelectVal(val) {
            this.selectValue = val;
            this.searchAutoComplete = '';
        },
        /**搜索栏：点击下拉推荐搜索 */
        handleSelectAutoComplete(val, item) {
            this.$emit('confirmAutoComplete', this.selectValue, {val, item});
        },
        /**搜索栏：回车或点击搜索 */
        handleEnterAutoComplete() {
            this.$emit('confirmAutoComplete', this.selectValue, {val:this.searchAutoComplete});
        },
        handleOpenPopover() {
            this.popoverOpen = true;
        },
        handleClosePopover() {
            this.popoverOpen = false;
        },
        handleSetPopoverList(list) {
            this.popoverList = list
        },
        handleClickPopoverItem(item) {
            this.$emit("callPopoverFunction",item.text)
        },
        callFunction(methodName) {
            this.openMenu = false;
            this.$emit("callFunction", methodName);
        },
        addMainMenu(button) {
            this.mainMenu.push(button)
            return this;
        },
        addMoreMenu(button) {
            this.moreMenu.push(button)
            return this;
        },
        /** 设置布局 */
        handleLayoutSetting(param) {
            let self = this;
            $lj.removeEventListener("grid_style_updated");
            $lj.addEventListener("grid_style_updated", function (ret) {
                if (ret.value) {
                    if (ret.value.dwname === param.dwname && ret.value.itemname === param.apiName) {
                        self.MergeCustomSetting(param);
                    }
                }
            });
            $lj.openWin('grid-drag-setting', {
                columns: param.gridColumns,
                apiName: param.apiName
            });
        },
        MergeCustomSetting(param, callback) {
            let userInfo = $lj.getStorage('userInfo');
            let empid = userInfo.empid;
            let requestBody = {
                token: $lj.getStorage("token"),
                empid: empid,
                dwname: param.dwname,
                itemname: param.apiName,
                ifcompress: 1
            };
            $lj.postLJRequest("GetSysUserFileString", requestBody, function (ret) {
                if (ret && ret.itemvalue) {
                    let customSetting = JSON.parse(ret.itemvalue);
                    // 构建field-style键值对
                    let customSettingDictionary = new Map();
                    for (let item of customSetting) {
                        customSettingDictionary.set(item.property, item);
                    }
                    // 合并过滤字段，以这个字典为准，用户历史设置多删少补
                    for (let item of param.gridColumns) {
                        let curField = item.property;
                        let userStyle = customSettingDictionary.get(curField);
                        if (userStyle) {
                            for (let prop in userStyle) {
                                item[prop] = userStyle[prop];
                            }
                            // item.order = userStyle.order;
                            // item.invisible = userStyle.invisible;
                        } else {
                            // 新增字段，暂不显示
                            // item.invisible = true;
                        }
                    }
                } else {
                    for (let i in param.gridColumns) {
                        param.gridColumns[i].order = i;
                    }
                }
                param.gridColumns.sort(function (object1, object2) {
                    return object1.order - object2.order;
                });
                for (let i in param.gridColumns) {
                    let item = param.gridColumns[i];
                    item.order = i;
                    if (item.optionid) {
                        let optionName = $lj.getOptionValue(item.optionid);
                        item.label = optionName ? optionName : item.label;
                    }
                    // if (item.fixed) {
                    //     param.gridColumns.push(item);
                    // }
                }
                callback && callback()
            });
        }
    },
    created() {
    },
    mounted() {
        
    }
}
</script>
<style lang='less'>
.vanbuttonTomu {
    border: none;
    line-height: 36px;
    font-size: 14px;
    background: transparent;
    min-width: 88px;
    border-radius: 2px;
    height: 36px;
}
.mu-flat-button .mu-button-wrapper{
    padding: 0px;
}
.button-menu-row {
    .iconfont {
        margin-right: 2px;
    }
}
.more-badge {
    margin-left: 4px;
    border-radius: 9px;
}
.search-auto-complete {
    width: 100%;
}
.search-box {
    display: flex;
    width: 100%;
    .prepend, .append {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    .content {
        flex: 1;
    }
    .prepend {
        margin-left: 8px;
        width: 100px;
        display: flex;
    }
    .prepend-select {
        width: 100%!important;
        margin-bottom: 0;
        margin-left: 8px;
        padding: 0;
        padding-left: 8px;
        padding-bottom: 4px;
        line-height: 32px!important;
        font-size: 14px;
        .mu-select-action {
            padding: 0;
            .mu-select-icom {
                width: 14px;
                height: 14px;
            }
        }
    }
    .append-btn {
        width: 60px;
        min-width: 60px;
    }
    .mu-input {
        min-height: 32px;
        margin: 0;
        padding: 2px 0;
        font-size: 14px;
    }
}
.btnmenu-chip {
    vertical-align: middle;
    .mu-chip-delete-icon {
        flex-shrink: 0;
    }
}
</style>
<style lang='less' scoped>
.LjButtonMenu{
    width: 100%;
}
.iconfont{
    font-size: 14px;
}
.mu-item-action {
    min-width: 30px;
}
.mu-flat-button {
    min-width: auto;
    width:100%;
}
.mu-menu{
    width: 100%;
}
</style>