counthospital-statistics2.vue 12.1 KB
<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">
            <h3 class="current-module">医院结算对账单明细</h3>
        </div>
        <div class="purchase-month-plan">
            <div class="fpart pd-form">
                <div class="fheader no-bottom">
                    <h4 class="no-l-icon"> <span style='font-size:14px; color:#373737;'>医院名称:</span>{{medDate.medname}}</h4>
                </div>
                <div class="form-group mb-30">
                    <div class="control pmp-time-type" style='position:relative;padding: 20px 20px 10px;width:600px; border-radius:0px;'>
                        <label for="cn1" class="label" style="height: 34px;line-height: 34px;width: 80px;position: absolute;top: -18px; background-color: #f5f5f5; text-align: center;">结算周期</label>
                        <div class="group-row">
                            <div class="form-group fl form-label" style="width: 506px;">
                                <div class="control control-date" style="height:34px;overflow: inherit;margin-left:0px;">
                                    <div style="float:left;width:45%;">
                                        <datepicker :disabled="true" :target.sync="medDate.begindate|getYMD" :readonly="readonlyFlag" :placeholder="'结束日期'" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
                                    </div>
                                    <span class="text-and" style="width: 45px"></span>
                                    <div style="float:left;width:46%;">
                                        <datepicker :disabled="true" :target.sync="medDate.enddate|getYMD" :readonly="readonlyFlag" :placeholder="'结束日期'" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="statistics" style='margin-top: 15px;margin-bottom:10px;'>
<em>{{search.total}}</em>个入库单,  共<em>{{sum}}</em>条明细,金额合计<em>{{con | numDigit 2 | numFmt}}</em>
                </div>
                <div class="form-label">
                    <label for="content" class="label">备注</label>
                    <div class="control">
                        <textarea rows="2" class="inp2" disabled="disabled" style='box-sizing: border-box;min-height:50px;'>{{medDate.remark}}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-section">
            <div class="ctable ct-parent">
                <div class="ct-head">
                    <span class="ct-col w90">序号</span>
                    <span class="ct-col w200">医疗机构</span>
                    <span class="ct-col w150">入库日期</span>
                    <span class="ct-col w150">入库单</span>
                    <span class="ct-col w150">供应商出库单</span>
                    <span class="ct-col w110">结算明细数</span>
                    <span class="ct-col w150">结算总金额(元)</span>
                </div>
                <div class="ct-row" id="warp{{$index}}" v-for='dilist in detailList'>
                    <div class="row-line" >
                        <span class="ct-col w90 cert-select cert-mini">{{$index+1}}</span>
                        <span class="ct-col w200 break-it t-left pr10"> {{dilist.medname}}</span>
                        <span class="ct-col w150 break-it  pr10"> {{dilist.mvdate|getYMD}}</span>
                        <span class="ct-col w150 break-it pr10"> <span class="valid-date break"> {{dilist.billno}} </span></span>
                        <span class="ct-col w150 break-it  pr10"> <span class="com-name break w150">{{dilist.supplierdobillno ==null?'- - -':dilist.supplierdobillno}}</span> </span>
                        <span class="ct-col w110 activate isFocus"><a href="javascript:void(0);" @click="slidedown($index,dilist.wvguid)"  class="status-switch text-color-blue">       {{dilist.countsum}}  </a>     </span>
                        <span class="ct-col w150 focus t-right" id="isFocus10">{{dilist.amount | numDigit 2 | numFmt }}</span>
                    </div>
                    <div class="row-launch" style="display: none;">
                        <table class="itable mb-30">
                            <thead>
                            <tr>
                                <th class="w40">序号</th>
                                <th class="w150">商品信息</th>
                                <th class="w100">批号效期</th>
                                <th class="w80">数量</th>
                                <th class="w80">单价(元)</th>
                                <th class="w80">结算金额(元)</th>
                                <th class="w80">发票号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="dli in dilist.mxList">
                                <td>{{$index+1}}</td>
                                <td class="t-left pr10">
                                    {{dli.supplierGoodscode}} <br>
                                    <span class="p-tit-green">{{dli.supplierGoodsname}}</span><br>
                                    {{dli.supplierGoodsspec}}
                                    <br>{{dli.registkey}}
                                    <br>{{dli.manufacturer}}
                                    <br>
                                </td>
                                <td class=" pr10">
                                    {{dli.lot}}<br>
                                    {{dli.productiondate|getYMD}}<br>
                                    {{dli.expiredate|getYMD}}
                                </td>
                                <td class="t-right pr10">{{dli.supplierSettleqty}}{{dli.supplierUnit}}</td>
                                <td class="t-right pr10">{{dli.supplierPrice | numDigit 2 | numFmt }}</td>
                                <td class="t-right pr10">
                                    {{dli.settleamount | numDigit 2 | numFmt }}
                                </td>
                                <td>{{dli.invoiceno}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pagination page-line">
                            <pagination @page-change="listTRSettleMVByMed($index,dilist.guid)" :page-no.sync="dilist.search.page" :total-pages.sync="dilist.search.totalPages">
                            </pagination>
                        </div>
                        <div class="zip" @click="slideup($index)"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--最外层翻页-->
        <div class="pagination m-20-0">
            <pagination @page-change="getDetailList" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
            </pagination>
        </div>
        <!--basic-message end-->
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                // 结算单汇总表
                medDate: {},
                // 明细数据
                detailList: [],
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total:0,
                    //total: 0,
                    guid: '',
                    pageNo: ''
                },
                sum:0,
                con:0,
                readonlyFlag: true,
            };
        },
        methods: {
            // 结算单汇总表
            getTrsettleByMed: function() {
                var self = this;
                // 结算单guid
                self.search.guid = self.$route.params.guid;
                Ajax.post('/distributorTrsettle/listTrsettleDisMed', this.search)
                    .then(function(response) {
                        var data = response.data.data;
                        self.$set('medDate', data.list[0]);
                    })
            },
            // 结算单明细表
            getDetailList: function() {
                var self = this;
                self.search.guid = self.$route.params.guid;
                Ajax.post('/distributorTrsettle/listSettleDetailDisMed', this.search)
                    .then(function(response) {
                        var data = response.data.data;
                        self.$set('detailList', data.list);
                        var sum = 0;
                        var con = 0;
                        for (var i = 0; i < self.detailList.length; i++) {
                            sum += self.detailList[i].countsum
                            con += self.detailList[i].amount
                        }
                        self.sum = sum;
                        self.con =con;
                        self.search.pageNo = data.pageno;
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;
                    })
            },
            // 选中之后的样式:默认只允许最多打开一个,如果当前的是已经打开的,那么关闭
            // cssActive: function(divIndex) {
            // 	$("#leftCtable .ct-row").each(function() {
            // 		if($(this).attr("id") == ("div" + divIndex)) {
            // 			$("#div" + divIndex).attr("class", "ct-row active");
            // 		} else {
            // 			// $(this).attr("class", "ct-row");
            // 		}
            // 	});

            // 	this.slidedown(divIndex);

            // },
            // slidedown: function(index) {
            // 	var self = this;
            // 	self.listTRSettleMVByMed(index);
            // 	$(".ct-row:eq(" + index + ")").addClass("active");
            // 	$(".row-launch:eq(" + index + ")").slideDown(400, function() {

            // 	});
            // },
            slidedown: function(index,guid) {
                this.listTRSettleMVByMed(index,guid);
                $('#warp' + index).addClass("active").siblings().removeClass('active');
                $('#warp' + index).find(".row-launch").slideDown(400, function() {
                    $('#warp' + index).find(".isFocus").addClass("focus active");
                })
            },
            slideup: function(index) {
                $('#warp' + index).find(".row-launch").slideUp(400, function() {
                    $('#warp' + index).removeClass('active');
                    $('#warp' + index).find(".isFocus").removeClass("focus");
                })
            },
            // 结算单出库明细(手风琴效果)
            listTRSettleMVByMed: function(index,guid) {
                var self = this;
                var medObj;
                medObj=self.detailList[index].search;

                // 设置每组的查询条件
                if(medObj==null){
                    medObj = {
                        pageSize: 5,
                        page: 1,
                        totalPages: 0,
                        guid: self.$route.params.guid,
                        wvguid: guid
                    };
                }


                Ajax.post('/distributorTrsettle/listTRSettleGoodsDismed', medObj)
                    .then(function(response) {
                        var data = response.data.data;
                        self.$set('detailList[' + index + '].mxList', data.list);
                        medObj.pageNo = data.pageNo;
                        medObj.totalPages = data.totalPages;
                        medObj.total = data.total;
                        self.$set('detailList[' + index + '].search', medObj);
                    });
            },
        },
        route: {
            activate: function() {
                this.getTrsettleByMed();
                this.getDetailList();
            }
        }
    };
</script>