elizebeth/src/xt_pages/DepositManagement/Template/DeductionDetails.vue

<template>
<!--  扣费明细-->
  <div class="main-contain">
    <div class="app-container">
      <div
        style="
          justify-content: flex-start;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div style="display: flex">
          <div style="width: 250px">
            <el-input
              size="small"
              style="width: 200px; margin-left: 10px"
              class="filter-item"
              placeholder="请输入编号/患者名称"
              v-model.trim="keyword"
            />
          </div>

          <div style="width: 465px">
            <span>日期查询：</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
        </div>
      </div>

      <el-table
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableData"
        max-height="550"
        show-summary
        sum-text="押金支付金额合计"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="100">
        </el-table-column>
        <el-table-column label="就诊号" align="center" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.code	 ? scope.row.code : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="患者名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name	 ? scope.row.name	 : "" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="收费类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.chargetype	 ? scope.row.chargetype	 : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医疗费总额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.total	 ? scope.row.total	 : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="押金支付金额" align="center" prop="decimal">
          <template slot-scope="scope">
            <span>{{ scope.row.decimal	 ? scope.row.decimal	 : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收费日期" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.charge_date	 ? scope.row.charge_date	 : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350px">
          <template slot-scope="scope">
            <span v-if="scope.row.button_show == 1">
            <el-button
              size="small"
              type="primary"
              @click="Details(scope.row, scope.row.$index)"
            >
              查看详情
            </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- <div>押金支付金额合计：<span>{{sum}}</span></div> -->
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  deductiondetails,
  getweektime
}from "@/api/deposit";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "押金查询" },
      ],
      tableData: [],
      // total: 0,
      // page: 1,
      // limit: 10,
      keyword: "",
      value1: "",
      start_time:"",
      end_time:"",
      sum:""
    };
  },

  created(){
    this.init();
    // this.search()
  },
  methods: {

    // 合计表数据
    getSummaries(param) {
        let { columns, data } = param;
        console.log(param,'oo')
        let sums = [];
        columns.forEach((column, index) => {

          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          let values = data.map(item => Number(item[column.property]));
          console.log(values,'values')
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },

    // 初始化数据
    init() {
      var params = {}
      getweektime(params).then((res) => {
        if(res.data.state == 1){
          this.value1 = [res.data.data.srart_time,res.data.data.end_time]
        }
        this.search()
      })
    },

    // 查询操作
    search() {
      // this.value1 = ["2022-04-10","2022-05-10"],有空在改。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
      // console.log("value1",this.value1)
      if (this.value1 != null){
        if(this.value1[0] != undefined && this.value1[1] != undefined){
          this.start_time = this.value1[0]
          this.end_time = this.value1[1]
        }
      }else {
        this.start_time = ""
        this.end_time = ""
      }
      var params = {
        keyword: this.keyword,
        start_time: this.start_time,
        end_time: this.end_time,
      };
      console.log("params",params)
      deductiondetails(params).then((res) => {
        if (res.data.state == 1){
          this.tableData = res.data.data.list;
          this.sum = res.data.data.sum;
        }
      })
    },

    // 查看详情
    Details(val,index) {
      this.$router.push({path:"/outpatientCharges/summaryDetail?patient_id="+val.name_id+"&number="+val.number+"&id="+val.id})
    },
  },
};
</script>
<style>
</style>