2020-09-29-x

2020-09-29

todo-list

• 右键菜单通用组件开发
• 保存查询功能前后端对接

record-list

• 通用右键菜单组件

父组件引用子组件

<!--
<div class="menu" v-if="menuDisplay" v-bind:style="{top: menuY + 'px', left: menuX + 'px'}">
    <ul>
        <li v-on:click="menuType === 'item' ? addItemRow() : addCompareRow()"><a href="###">添加一行</a></li>
        <li v-if="itemList.length !== 1" v-on:click="menuType === 'item' ? deleteItemRow() : deleteCompareRow()"><a href="###">删除本行</a></li>
    </ul>            
</div>
-->
<right-click-menu v-bind:menu-display="menuDisplay" v-bind:menu-x="menuX" v-bind:menu-y="menuY" v-bind:menu-list="menuList" />

<script>
    data: function () {
        return {
            title: 'MacI耗材需求NPI阶段打样',
            locationList: [{id: 'HN', name: '華南'}, {id: 'HZ', name: '華中'}, {id: 'HB', name: '華北'}, {id: 'HX', name: '華西'}],
            location: 'HX',
            csTypeList: [{id: 'NewMaterialDev', name: '新物料開發'}, {id: 'SecondSource', name: 'Second Source'}],
            csType: 'NewMaterialDev',
            menuDisplay: false,
            menuX: 0,
            menuY: 0,
            itemList: [],
            itemClickedIndex: 0,
            compareList: [],
            compareClickIndex: 0,
            menuType: '',
        }
    },
    computed: {
        menuList () {
            return [
                {name: '添加一行', showFlag: true, onClick: this.menuType === 'item' ? this.addItemRow : this.addCompareRow},
                {name: '删除本行', showFlag: this.menuType === 'item' ? this.itemList.length !== 1 : this.compareList.length !== 1, onClick: this.menuType === 'item' ? this.deleteItemRow : this.deleteCompareRow},
            ];
        },
    },
</script>

子组件定义

<template>
    <div class="menu" v-if="menuDisplay" v-bind:style="{top: menuY + 'px', left: menuX + 'px'}">
        <ul>
            <li v-for="(x, index) in menuList" v-bind:key="index" v-show="x.showFlag" v-on:click="x.onClick()">
                <a href="###">{{ x.name }}</a>
            </li>
        </ul>          
    </div>
</template>

<script>
export default {
    name: 'RightClickMenu',
    props: {
        msg: String,
        menuDisplay: Boolean,
        menuX: Number,
        menuY: Number,
        menuList: Array,
    },
    data: function () {
        return {
            title: 'RightClickMenu',
        }
    },
}
</script>

<style scoped>
/* 右键菜单 */
.menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: white;
    width: 5rem;
    border: 1px solid #ccc;
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    transition: all .1s ease;
    font-size: 1px;    
}
.menu ul {
    margin: 0;
    padding: 0;
}
.menu li {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    list-style-type: none;
    width: 100%;
}
.menu li a {
    display: inline-block;
    text-decoration: none;
    color: #555;
    width: 100%;
    padding: 5px 0;
    text-align: center;
}
.menu li:first-of-type{
    border-radius: 5px 5px 0 0;
}
.menu li a:hover,
.menu li a:active {
    background: #eee;
    color: #0AAF88;
}
</style>

• 其实可以自己写一个前端通用数据对接框架，数据验证什么的，把前端一些重复的东西封装起来

home-record-list

*

reference-site-list

theme