app-big-data/page/bigDataOut/js/handleChangeViewB.js

Vue.component('comB', {
    template: '<div class="tab2" >\
          <template>\
                      <span>就诊类型：</span>  \
                      <el-select v-model="eventType" placeholder="请选择">\
                            <el-option v-for="item in event_type" :key="item.code" :label="item.name" :value="item.code">\
                            </el-option>\
                      </el-select>\
                      <span>机构等级：</span>  \
                      <el-select v-model="level" placeholder="请选择" @change="selectChange">\
                          <el-option v-for="item in level_id" :key="item.code" :label="item.name" :value="item.code">\
                          </el-option>\
                      </el-select>\
                      <el-select v-model="hos" placeholder="请选择">\
                          <el-option v-for="item in hos_hierarchy" :key="item.code" :label="item.name" :value="item.code">\
                          </el-option>\
                      </el-select>\
                      <el-date-picker v-model="value4" type="month" placeholder="选择时间">\
                      </el-date-picker>\
                    <div class="search" @click="searchClick">搜  索</div>\
                    <span class="span">门急诊费>=999,000.00(999,000.00=上月门急诊次均费用*3)/住院费用>=999,000.00(999,000.00=上月住院次均费用*3)</span>\
                <el-table :data="tableData"  border style="width: 100%"  :data.native="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">\
                    <el-table-column prop="patient_name" label="姓名">\
                    </el-table-column>\
                    <el-table-column prop="demographic_id" label="身份证号" >\
                    </el-table-column>\
                    <el-table-column label="性别">\
                    <template slot-scope="scope">\
                        <span v-if="scope.row.patient_sex == 1">男</span>\
                        <span v-else>女</span>\
                    </template>\
                    </el-table-column>\
                    <el-table-column prop="patient_age" label="年龄">\
                    </el-table-column>\
                    <el-table-column prop="EHR_000045" label="家庭地址" \
                    </el-table-column>\
                    <el-table-column fixed="right" label="操作">\
                        <template slot-scope="scope">\
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>\
                        </template>\
                    </el-table-column>\
                </el-table>\
        <el-pagination \
                @size-change="handleSizeChange"\
                @current-change="handleCurrentChange" \
                :current-page="currentPage"\
                :page-sizes="pageSizeArr"\
                :page-size="pageSize" \
                layout="total,sizes,prev, pager, next, jumper"\
                :total="total">\
        </el-pagination>\
        </template>\
</div>',
    data: function () {
        return {
            currentPage: 1, //初始页
            pageSize: 10,    //    每页的数据 
            pageSizeArr: [10, 20, 30, 50],
            tableData: [],
            total: 0,
            eventType: '0',
            item: '',
            hosLevel: '',
            level: "",
            hos: "",
            value4:new Date(getLastMonthStartDate()),
            event_type: [{
                "code": '0',
                "name": '门急诊'
            }, {
                "code": '1',
                "name": '住院'
            }],
            hos_hierarchy: [{
                "code": '',
                "name": '全部'
            }, {
                "code": "1",
                "name": '甲等'
            }, {
                "code": "2",
                "name": '乙等'
            }, {
                "code": "3",
                "name": '丙等'
            }],
            level_id: [{
                "code": "",
                "name": '全部',
            }, {
                "code": "1",
                "name": '一级'
            }, {
                "code": "2",
                "name": '二级'
            }, {
                "code": "3",
                "name": '三级'
            },
            ]
        }
    },
    watch: {
       
    },
    mounted: function () {
        this.getData()
    },
    methods: {
        handleClick:function(row) {
            demographic_id=row.demographic_id,
            blurry_type=row.eventType,
            searchParam=''
            var url =  httpRequest.server+'/profile/app/medication/html/jiuzhen-item.html?'+
            'healthProblemName='+'&demographic_id='+demographic_id+'&blurry_type='+blurry_type+'&searchParam='+searchParam
            console.log(url)
        //    window.open(url)
        var width=(0.5212*window.screen.width)+'px';
        var height=(0.7878*window.screen.height)+'px';
        top.layer.open({
            id:'Lay_xiangqing',
            type:2,
            title:false,
            closeBtn:0,
            shade:0.5,
            shadeClose:true,
            area:[width,height],
            content:url
        })
        },
        selectChange(value) {
            console.log(value);
            if(value==3){
                this.hos_hierarchy.push({'code':'9',"name": '特等'})
                this.hos=''
            }else{
               if(this.level.code==3){
             this.hos=''
               }else{
                this.hos=''
                var vm=this.hos_hierarchy[0].code
                console.log(vm)
                this.hos_hierarchy.splice(4)
               }
            }
        },
        handleCurrentChange: function (val) { //page 当前页
            this.currentPage = val;
            this.getData()
        },
        handleSizeChange: function (val) {// size 页面展示数据条数
            this.pageSize = val;
            this.initData()
        },
        searchClick: function () {
            console.log(this.eventType)
            console.log(this.level)
            console.log(this.hos)
            this.initData()

        },
        initData: function () {  //初始化数据
            this.currentPage = 1;
            this.getData()
        },
        getData: function () {
            var vm = this;
            var params = {
                month: this.value4.format('yyyy-MM'),
                eventType: this.eventType,
                hosLevel: this.level,
                hosHierarchy:this.hos,
                size: 15,
                page: 1,
            }
            GlobalEventBus.$emit('setLoading', {
                loading: true
            });
            bigDataOutApi.getHighCostList(params).then(function (res) {
                console.log(res)
                GlobalEventBus.$emit('setLoading');
                vm.tableData = res.detailModelList;
                vm.total = res.totalCount;
            }).catch(function (err) {
                console.log(err)
                GlobalEventBus.$emit('setLoading');

            })
        }
    }
})