已收金额，未收金额钻取数据列表

sinake

6 小时以前 40987f843e458aa67694be30dccde1a3b920085e

已收金额，未收金额钻取数据列表

 src/api/project/statistics.js

@@ -80,6 +80,14 @@
      data: query
    })
  }
  // 收款统计明细（已收/未收金额钻取）
export function getChargeStatisticsDetail(query) {
    return request({
      url: '/project/donorchargeorgan/getSpStatChangeDetail',
      method: 'post',
      data: query
    })
  }
  // 导出收款统计
export function exportChargeStatistics(query) {
    return request({

 src/views/project/statistics/chargeStatistics/index.vue

@@ -83,8 +83,20 @@
      <el-table-column label="序号" align="center" prop="id" width="80" />
      <el-table-column label="医院名称" align="center" prop="hospitalname" show-overflow-tooltip width="260" />
      <el-table-column label="应收金额" align="center" prop="organcharge" width="160" :formatter="amountFormatter" />
      <el-table-column label="已收金额" align="center" prop="amount" width="160" :formatter="amountFormatter" />
      <el-table-column label="未收金额" align="center" prop="nonpayment" width="160" :formatter="amountFormatter" />
      <el-table-column label="已收金额" align="center" prop="amount" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row, '1')">{{
            amountFormatter(scope.row, null, scope.row.amount)
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="未收金额" align="center" prop="nonpayment" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row, '0')">{{
            amountFormatter(scope.row, null, scope.row.nonpayment)
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px;text-align: right;">
@@ -92,6 +104,69 @@
        共 <span style="color:#1890FF ;">{{ total }}</span> 条数据
      </div>
    </div>

    <!-- 已收 / 未收金额明细 -->
    <el-dialog
      :title="detailTitle"
      :visible.sync="detailOpen"
      width="1100px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table
        v-loading="detailLoading"
        border
        :data="detailList"
        max-height="520"
        show-summary
        :summary-method="getDetailSummaries"
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column label="案例时间" width="110" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.donatetime, "{y}-{m}-{d}") }}
          </template>
        </el-table-column>
        <el-table-column prop="donorname" label="捐献者" width="100" align="center" />
        <el-table-column prop="organname" label="器官名称" width="100" align="center" />
        <el-table-column prop="name" label="受体姓氏" width="100" align="center" />
        <el-table-column
          prop="caseno"
          label="器官分配编号"
          min-width="140"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="organcharge"
          label="应收金额"
          width="120"
          align="center"
          :formatter="amountFormatter"
        />
        <el-table-column
          prop="amount"
          label="已收金额"
          width="120"
          align="center"
          :formatter="amountFormatter"
        />
        <el-table-column
          prop="nonpayment"
          label="未收金额"
          width="120"
          align="center"
          :formatter="amountFormatter"
        />
      </el-table>
      <pagination
        v-show="detailTotal > 0"
        :total="detailTotal"
        :page.sync="detailQuery.pageNum"
        :limit.sync="detailQuery.pageSize"
        @pagination="getDetailList"
      />
    </el-dialog>

    <!-- 添加或修改家属确认对话框 -->
  </div>
@@ -106,6 +181,7 @@
  listbxiaostatistics,
  listjixstatistics,
  listanlstatistics,
  getChargeStatisticsDetail,
  exportChargeStatistics
} from "@/api/project/statistics";

@@ -222,7 +298,21 @@
      //是否显示确认登记表
      isShowConfirmationDialog: false,
      //确认登记表title
      confirmationTitle: ""
      confirmationTitle: "",
      // 已收/未收金额明细钻取
      detailOpen: false,
      detailLoading: false,
      detailTitle: "",
      detailList: [],
      detailTotal: 0,
      detailQuery: {
        pageNum: 1,
        pageSize: 10,
        pabegtime: "",
        paendtime: "",
        pahospitalname: "",
        pachargestate: ""
      }
    };
  },
  //监听属性 类似于data概念
@@ -260,6 +350,57 @@
        .catch(() => {
          this.loading = false;
        });
    },
    /** 点击已收/未收金额，查询该医院明细 */
    handleDetail(row, chargeState) {
      this.detailQuery = {
        pageNum: 1,
        pageSize: 10,
        pabegtime: this.queryParams.pabegtime,
        paendtime: this.queryParams.paendtime,
        pahospitalname: row.hospitalname,
        pachargestate: chargeState
      };
      this.detailTitle =
        (row.hospitalname || "") +
        " - " +
        (chargeState === "1" ? "已收金额明细" : "未收金额明细");
      this.detailOpen = true;
      this.getDetailList();
    },
    /** 查询明细列表 */
    getDetailList() {
      this.detailLoading = true;
      getChargeStatisticsDetail(this.detailQuery)
        .then(res => {
          this.detailList = res.rows || [];
          this.detailTotal = res.total || 0;
        })
        .finally(() => {
          this.detailLoading = false;
        });
    },
    /** 明细合计 */
    getDetailSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      const moneyProps = ["organcharge", "amount", "nonpayment"];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (moneyProps.indexOf(column.property) === -1) {
          sums[index] = "";
          return;
        }
        const total = data.reduce((prev, item) => {
          const value = Number(item[column.property]);
          return prev + (isNaN(value) ? 0 : value);
        }, 0);
        sums[index] = total.toFixed(2);
      });
      return sums;
    },
    /** 导出按钮操作 */
    handleExport() {
@@ -359,7 +500,7 @@
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //获取列表
    this.getList();
    //this.getList();
  }
  // //生命周期 - 挂载完成（可以访问DOM元素）
  //    mounted() {},