PC-application/component/statistics/prescription-filter.js

(function(){
    Vue.component('prescription-filter', {
        template: '<div style="height: 400px;overflow: auto;">\
            <div class="mt10 ml10 filter-title">统计维度</div>\
            <div class="c-row mt10 plr20">\
                <div v-for="type in types" class="c-33 mt10" style="margin-left:0;margin-right:3%;" :class="{\'active\': sumType==type.value}" @click="selectType(type.value)"><a>{{type.name}}</a></div>\
            </div>\
            <div class="mt10 ml10 filter-title">疾病类型</div>\
            <div class="c-row mt10 plr20">\
                <div v-for="dis in diseases" class="c-33 mt10" style="margin-left:0;margin-right:3%;" :class="{\'active\': disease==dis.code}" @click="selectDisease(dis.code)"><a>{{dis.name}}</a></div>\
            </div>\
            <div class="mt10 ml10 filter-title">年度维度</div>\
            <div class="c-row mt10 plr20">\
                <div v-for="year in years" class="c-33 mt10" style="margin-left:0;margin-right:3%;" :class="{\'active\': chooseYear==year}" @click="selectYear(year)"><a>{{year}}</a></div>\
            </div>\
            <div id="footer">\
                <div class="c-row btn-wrap c-border-top fr">\
                    <div class="div-foot-btn mr20" @click="resetClick">\
                        <a href="#" class="c-666 f-fs16">重置</a>\
                    </div>\
                    <div class="div-foot-btn active" @click="confirmClick">\
                        <a href="#" class="c-666 f-fs16">确定</a>\
                    </div>\
                </div>\
            </div>\
        </div>',
        props:['sumType', 'disease', 'chooseYear'],
        data: function(){
            return {
                types: [{
                    value: 1,
                    name: "订单统计"
                },{
                    value: 2,
                    name: "费用统计"
                },{
                    value: 3,
                    name: "配送统计"
                },{
                    value: 4,
                    name: "年龄统计"
                }],
                diseases: [{
                    code: "",
                    name: "全部"
                },{
                    code: "HP0093",
                    name: "高血压"
                },{
                    code: "HP0047",
                    name: "糖尿病"
                },{
                    code: "other",
                    name: "其他"
                }],
                years: []
            }
        },
        methods: {
            selectType: function(val){
                this.sumType = val;
            },
            selectDisease: function(val){
                this.disease = val;
            },
            selectYear: function(val){
                this.chooseYear = val;
            },
            resetClick:function(){
                this.sumType = this.types[0].value;
                this.disease = this.diseases[0].code;
            },
            confirmClick:function(){
                //触发刷新
                var vm = this;
                var type = _.findWhere(vm.types, {value: vm.sumType}),
                    dis = _.findWhere(vm.diseases, {code: vm.disease});
                Vuedals.Bus.$emit('close', {
                    sumType: vm.sumType,
                    sumTypeName: type.name,
                    disease: vm.disease,
                    diseaseName: dis.name,
                    chooseYear: vm.chooseYear
                });
            }
        },
        mounted: function(){
            //如果前一个页面返回的选中的年份
            if(!this.sumType){
                this.sumType = this.types[0].value;
            }
            if(!this.disease){
                this.disease = this.diseases[0].code;
            }
            var now = new Date(),
                year = now.getFullYear();
            if(now.getMonth() < 6){
                year = year - 1;
            }
            for(i=year; i>=2017; i--){
                this.years.push(i);
            }
            if(!this.chooseYear){
                this.chooseYear = year;
            }
        }
    })
})()