k8swebapi/sharetransmit/public/js/admin/pages/scripts/components.js

var componentSelect = {
    template: `
    <div class="my-Select"  v-bind:style="'width:'+ width">  
            <i v-if="!specile" class="fa  fa-sort-up" v-bind:class="selectShow ? 'rotate180' : ''"></i>
    <div    @click.stop = "showList($event)"
            class="select-screen" 
            v-bind:class="changeClass()"
            ref="selectBorder">
            <input 
                    placeholder="请选择" 
                    type="text" 
                    ref="selectSearch"
                    v-if="!multiple"
                    v-bind:disabled="disabled" 
                    v-bind:value="name" 
                    @foucs.stop = "showList($event)"
                    @blur.stop = "hideList()"
                    @input="setScreen($event)"
             />
             <div 
                    v-if="multiple" 
                    @click.stop = "showList($event)">
                            
                            <span v-for="(item,index) in multipleList" class="multiple-list">
                                    <span>{{item.name}}</span>      
                            <i v-on:click.stop="multipleRemove(index)" style="font-style:normal;">&times;</i>
                    </span>
             </div>
    </div>
    <transition type="animation" enter-active-class="fadeIn">
            <ul v-if="!specile" v-bind:class="disabled ? 'disabled': ''" :style="'top:'+top+'px;'" class="select-list" v-show = "selectShow">  <slot v-bind:message="val"></slot>
            </ul>

            <ul v-else-if="specile" v-bind:class="disabled ? 'disabled': ''" class="select-list select-list-specile" >  <slot v-bind:message="val"></slot>
            </ul>
    </transition>
    </div>
    </div>`,

    props: ['width', 'value'],
    data: function () {        //data必须是一个函数
        return {
            selectShow: false,
            top: '',
            name: '',
            screen: '',
            multipleList: [],
            val: ''

        }
    },
    computed: {
        disabled: function () {
            if (this.$attrs && (this.$attrs.disabled === 'true' || this.$attrs.disabled === '' || this.$attrs.disabled === 'disabled')) {
                return true
            } else {
                return false
            }
        },
        multiple: function () {
            if (this.$attrs && (this.$attrs.multiple === 'true' || this.$attrs.multiple === '' || this.$attrs.multiple === 'multiple')) {
                return true
            } else {
                return false
            }
        },
        specile: function () {
            if (this.$attrs && (this.$attrs.specile === 'true' || this.$attrs.specile === '' || this.$attrs.specile === 'specile')) {
                return true;
            } else {
                return false;
            }
        }
    },
    methods: {
        hideList: function () {
            var _this = this;
            window.setTimeout(function () {
                _this.selectShow = false
            }, 250);
        },
        setScreen: function (e) {
            var ele = e.target || e.srcElement;
            this.screen = ele.value
        },
        /* 切换外层class */
        changeClass: function () {
            if (this.disabled) {
                return 'disabled'
            } else if (this.selectShow) {
                return 'active'
            } else {
                return ''
            }
        },


        /* 展开子组件 */
        showList: function (event) {
            if (this.disabled) {
                return;
            }
            var ele = event.target || event.srcElement;
            if (!this.multiple) {
                if (ele.tagName == 'INPUT') {
                    ele.select();
                } else {
                    this.$refs.selectSearch.select();
                }
            }
            this.top = this.$refs.selectBorder.clientHeight + 7;
            this.selectShow = true;
        },

        findName: function () {
            var self = this;
            var status = false;
            this.$children.forEach(function () {
                if (self.val !== undefined && arguments[0].value !== undefined && ((self.val !== undefined && self.val !== null && self.val.toString) ? self.val.toString() : self.val) === (arguments[0].value.toString ? arguments[0].value.toString() : arguments[0].value)) {
                    self.name = arguments[0].name;
                    status = true;
                }
            })
            if (!status) {
                self.name = '';
            }
        },
        findMultipleName: function () {
            var self = this;
            /* 与循环的value顺序一致 用作删除 （就说了表达能力不强 不适合注释） */
            var ary = [];
            this.multipleList = [];
            this.$children.forEach(function () {
                if ($.inArray(arguments[0].value.toString(), self.val) != -1) {
                    self.multipleList.push({value: arguments[0].value, name: arguments[0].name})
                    ary.push(arguments[0].value.toString())
                }
            })
            this.val = ary
        },

        /* 多选删除项 */
        multipleRemove: function (index) {
            this.multipleList.splice(index, 1);
            this.val.splice(index, 1);
            this.$emit('input', this.val);
        }
    },


    mounted: function () {
        var self = this;
        //     $('body').bind('click',function(){
        //             self.selectShow = false;
        //     });
        this.val = this.value;
        !this.multiple ? this.findName() : this.findMultipleName();
    },
    watch: {
        'value': {
            handler: function (val, value) {
                this.val = val;
                this.$nextTick(function () {
                    !this.multiple ? this.findName() : this.findMultipleName();
                })
            }
        },
        'selectShow': {
            handler: function (val) {
                if (val == false) {
                    this.screen = '';
                }
            }
        },
        /* 检测增加删除多选 改变多选框top值 */
        'multipleList': {
            handler: function () {
                this.$nextTick(function () {
                    this.top = this.$refs.selectBorder.clientHeight + 7;
                })
            }
        }
    }
}

var componentOption = {
    template: `<li
                v-bind:value="value" 
                v-show="screenVal" 
                v-bind:class="((parent.val !== undefined && parent.val !== null && parent.val.toString) ? parent.val.toString() : parent.val) === ((value !== undefined && value !== null && value.toString) ? value.toString() : value)? 'active' : ''" 
                v-on:click.stop="valueHandle(value,name)" >
                {{name}}
            </li>`,
    props: ['value', 'name'],
    data: function () {
        return {}
    },
    computed: {
        parent: function () {
            return this.$parent;
        },
        /* 搜索筛选时 */
        screenVal: function () {
            if (this.name && this.name.indexOf(this.$parent.screen) == -1) {
                return false
            } else {
                /* 如果多选 被选中的隐藏 */
                if (this.multiple) {
                    if ($.inArray(this.value.toString(), this.$parent.val) == -1) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    return true
                }

            }
        },
        multiple: function () {
            if (this.$parent.$attrs && (this.$parent.$attrs.multiple === 'true' || this.$parent.$attrs.multiple === '' || this.$parent.$attrs.multiple === 'multiple')) {
                return true
            } else {
                return false
            }
        },
        disabled: function () {
            if (this.$parent.$attrs && (this.$parent.$attrs.disabled === 'true' || this.$parent.$attrs.disabled === '' || this.$parent.$attrs.disabled === 'disabled')) {
                return true
            } else {
                return false
            }
        }

    },
    methods: {
        valueHandle: function (val, name) {
            if (this.disabled) {
                return;
            }
            if (this.multiple) {
                this.parent.multipleList.push({value: val, name: name})
                this.parent.val.push(val.toString());
                this.parent.$emit('input', this.parent.val);
                this.parent.$emit('change', this.parent.val)

            } else {
                var old = this.parent.val;
                this.parent.val = val;
                this.parent.name = name;
                this.parent.selectShow = false;
                this.parent.$emit('input', val, old);
                this.parent.$emit('change', val, old)

            }

        }
    },
    mounted: function () {
    }
}

var componentSelectbar = {
    template: `
                <ul>
                        <li v-for="item in list" v-bind:class="pathselect(item) ? 'active' : ''">

                        <a :target="item.target" v-bind:href="item.url" @click="item.slideDown = !item.slideDown">
                                <i v-bind:class="item.icon"></i> <span v-html="item.name"></span>
                                <i v-if="item.childs" v-bind:class="item.slideDown ? 'fa-angle-down' :' fa-angle-right'" class="fa pull-right"></i>
                        </a>
                        <div v-show="item.slideDown" v-if="item.childs" class="slidebar-childs">
                                <ul>
                                        <li v-for="item2 in item.childs" v-bind:class="pathselect(item2, item) ? 'active' : ''">
                                                <a :target="item2.target" v-bind:href="item2.url">
                                                        <i v-bind:class="item2.icon"></i> <span v-html="item2.name"></span>
                                                </a>
                                        </li>
                                </ul>
                        </div>
                        </li>
                </ul>
        `,
    data(){
        return {
            pathname: location.pathname,
            list: [
                {
                    item: '1',
                    name: '域名管理',
                    icon: 'fa fa-file-word-o',
                    url: 'domain',
                    target: '',
                },
                {
                    item: '1',
                    name: '任务管理',
                    icon: 'fa fa-link',
                    url: 'task',
                    target: '',
                },
            ],
        }
    },
    methods: {
        //是否被选中
        pathselect: function (item, parent) {
            if (item.url == this.pathname) {
                parent ? parent.slideDown = true : null;
                return true
            }
        }
    }
}

var componentPage = {
    template: `<div class="st-pagination-box">
                        <p class="mr-10 total">
                                共<span>&nbsp;{{total}}&nbsp;条</span>
                        </p>
                        <ul class="st-pagination">
                                <template v-if="pageListTitle()">
                                <li v-on:click=""><a v-on:click="devnowpage(1)" v-bind:class="page == 1 ? 'active' : ''" href="javascript:void(0);">1</a></li>
                                <li><a>...</a></li>
                                </template>

                                <template v-for="(item, index) in pageListContent()">
                                <template v-if="(p + index) <= total_page">
                                        <li><a v-on:click="devnowpage(set(p, index))" v-bind:class="set(p, index) == page ? 'active' : ''" href="javascript:void(0);">{{set(p, index)}}</a></li>
                                </template>
                                </template>

                                <template v-if="pageListBottom()">
                                <li><a>...</a></li>
                                <li><a v-on:click="devnowpage(total_page)" v-bind:class="page == total_page ? 'active' : ''" href="javascript:void(0);">{{total_page}}</a></li>
                                </template>
                        </ul>
                        <div class="st-page">
                                <p>显示&nbsp;&nbsp;</p>
                                <input 
                                type="text" 
                                v-bind:value="page_rows"
                                name="page_rows" 
                                v-on:blur="setVal($event)" 
                                class="st-bdradius-4"/>

                                <p>&nbsp;条&nbsp;跳至&nbsp;&nbsp;</p>
                                <input 
                                type="text" 
                                v-bind:value="currentpage" 
                                name="currentpage" 
                                v-on:blur="setVal($event)" 
                                class="st-bdradius-4"/>
                                <p>&nbsp;/&nbsp;
                                <span>{{total_page}}</span>
                                &nbsp;页
                        </p>
                        </div>
                </div>`,
    data(){
        return {
            currentpage: this.page,//跳转到第几页
            total_page: Math.ceil(this.total / this.perpage), // 总共多少页
            s: 2, //每页左右间隔几个,
            page_rows: this.perpage,
        }
    },

    props: [
        'total', //总共多少条
        'perpage', // 每次显示多少条
        'page', // 当前第几页
    ],

    computed: {
        p: function () {
            var p = this.page - this.s;
            if ((p + this.s * 2) >= this.total_page) {
                p = this.total_page - this.s * 2
            }
            if (p <= 0) {
                p = 1
            }
            return p
        },
    },

    methods: {
        pageListTitle: function () {
            if (!(this.page - this.s <= 1)) {
                return true
            }
            return false
        },
        pageListBottom: function () {
            if (!(this.page + this.s >= this.total_page)) {
                if (this.s * 2 + 1 < this.total_page) {
                    return true
                }
            }
            return false
        },
        pageListContent: function () {
            var p = this.page - this.s;
            return this.s * 2 + 1;
        },
        set: function (p, index) {
            return (p + index) <= 0 ? '1' : (p + index)
        },
        setVal: function (e) {
            var el = e.target || e.srcElement;
            if (isNaN(el.value)) {
                this.$refs.alertbox.show('格式不正确 请出入纯数字 MMP');
                return;
            }
            this[el.name] = el.value;

            /*如果修改了每页显示多少条 默认跳回第一页*/
            if (el.name == 'page_rows') {
                this.devnowpage(1)
            } else {
                this.devnowpage(el.value)
            }
        },

        devnowpage: function (page) {
            if (page > this.total_page) {
                page = this.total_page;
            } else if (page <= 0) {
                page = 1;
            }
            this.$emit('nowpage', page, this.page_rows);
        },
    },
    watch: {
        'perpage': function (val) {
            this.total_page = Math.ceil(this.total / val);
            this.page_rows = val;
            // this.currentpage = 1;
        },
        'total': function (val) {
            this.total_page = Math.ceil(val / this.perpage)
        },
        'page': function (val) {
            this.currentpage = val;
        }
    }
}