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" >{{feiyong}}</span>\
                <el-table :data="tableData"  border style="width: 100%">\
                            <el-table-column prop="event_date" label="就诊时间">\
                            </el-table-column>\
                            <el-table-column prop="patient_name" label="姓名">\
                            </el-table-column>\
                            <el-table-column prop="demographic_id" label="身份证号" >\
                            </el-table-column>\
                            <el-table-column prop="fee" label="就诊费用">\
                            </el-table-column>\
                            <el-table-column prop="diagnosis" 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="address" 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>\
                <div class="flex f_y_c f_x_e">\
                <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="currentPage"\
                :page-sizes=" pageSizeArr" :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper"\
                :total="total">\
                </el-pagination>\
            </div>\
        </template>\
</div>',
    data: function () {
        return {
            currentPage: 1, //初始页
            pageSize: 10,    //    每页的数据 
            pageSizeArr: [10, 20, 30, 50],
            tableData: [],
            feiyong: '',
            total: 0,
            eventType: '0',
            item: '',
            hosLevel: '',
            level: "",
            hos: "",
            value4: new Date(),
            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 = 1000 + 'px';
            var height = 600+ 'px';
            top.layer.open({
                id: 'Lay_xiangqingB',
                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)
            this.initData()
            this.getFeiYongStr()
        },
        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: this.pageSize,
                page: this.currentPage
            }
            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;
                var obj = res.obj;
                vm.getFeiYongStr(obj)
                console.log(obj)
            }).catch(function (err) {
                console.log(err)
                GlobalEventBus.$emit('setLoading');

            })
        },
        getFeiYongStr: function (obj) {
            debugger
            if (this.eventType == "0") {
                this.feiyong = '门急诊费用>=' + obj .toFixed(2)+' ('+ obj.toFixed(2)+'='+ (obj/5).toFixed(2) +'(上月门急诊次均费用)*5)'
            } else {
                this.feiyong = '住院费用>='  + obj .toFixed(2)+' ('+ obj.toFixed(2)+'='+ (obj/5).toFixed(2) +'(上月住院次均费用)*5)'

            }

        }
    }
})