elizebeth/src/xt_pages/outpatientTool/components/detailStatistics.vue

<template>
  <div>
    <div style="display: flex;justify-content: space-between;margin-bottom:10px;">
      <div>
        <el-select size="small" v-model="item_type" placeholder="请选择"
                   style="width:150px;margin-left:10px;" @change="changeItem">
          <el-option
              label="全部"
              value="0">
          </el-option>
          <el-option
              v-for="(item,index) in items"
              :key="index"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>

        <el-input
            size="small"
            style="width: 150px"
            v-model="keywords"
            class="filter-item"
        />
        <el-button
            size="small"
            style="margin: 0 10px"
            class="filter-item"
            type="primary"
            @click="searchAction"
        >搜索
        </el-button>
        <el-date-picker
            v-model="chargeDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            @change="changeDate"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div>
      </div>
    </div>
    <el-table :data="tableData" border :row-style="{ color: '#303133' }" ref="table"
              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
              show-summary
              max-height="600"
              v-loading="detail_loading"
              highlight-current-row>
      <el-table-column type="index" label="序号" width="60px" align="center"></el-table-column>
      <el-table-column align="center" prop="name" label="处方日期">
        <template slot-scope="scope">{{  }}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="费用编码">
        <template slot-scope="scope">{{scope.row.code}}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="项目名称">
        <template slot-scope="scope">{{scope.row.item_name}}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="规格">
        <template slot-scope="scope">{{scope.row.item_spec}}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="数量">
        <template slot-scope="scope">{{scope.row.count}}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="单价">
        <template slot-scope="scope">{{scope.row.price.toFixed(2)}}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="金额">
        <template slot-scope="scope">
          <div>{{(scope.row.price.toFixed(2)*scope.row.count).toFixed(2)}}</div>
        </template>
      </el-table-column>

    </el-table>
  </div>

  <!-- </div> -->
</template>


<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import {  } from '@/api/his/his'
const moment = require('moment')
export default {
  components: {
    BreadCrumb

  },
  props: {
    patient_id: {
      type: Number,
      default: 0
    }
  },

  data() {

    return {
      detail_loading: false,
      tempArr: [],
      pos: 0,
      search_input: '',

      sameRowArr: [],
      keywords: '',
      tableData: [],
      chargeDate: [moment(new Date()).add('year', 0).format('YYYY-MM-DD'), moment(new Date()).add('year', 0).format('YYYY-MM-DD')],
      item_type: '0',
      items: [
        { id: 1, name: '药品' },
        { id: 3, name: '耗材' },
        { id: 2, name: '项目' }

      ]

    }
  },
  methods: {
    searchAction(){


    },
    changeDate() {
      this.getSummaryDetailList()
    },
    changeItem() {
      this.getSummaryDetailList()
    },
    getSummaryDetailList() {
      let start_time = this.chargeDate[0]
      let end_time = this.chargeDate[1]
      let params = {
        patient_id:this.patient_id,
        start_time: start_time,
        end_time: end_time,
        type: this.item_type,
        keyword: this.keywords
      }



    },
  },
  created() {
    this.getSummaryDetailList()

  }
}
</script>