回款统计样式调整

sinake

3 小时以前 79678b7a83c996193fcefd284c972475af55c9d4

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

@@ -6,35 +6,35 @@
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="70px"
      v-show="showSearch"
      label-width="80px"
    >
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="医院名称">
            <org-selecter
              ref="orgSelecter"
              :org-type="'4'"
              v-model="queryParams.pahospitalno"
          <el-form-item label="案例时间">
            <el-date-picker
              v-model="selecttime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              style="width: 220px"
              @change="getTimeList"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统计日期">
            <el-date-picker
              style="width: 100%"
              v-model="selecttime"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM-dd"
              @change="getTimeList"
            >
            </el-date-picker>
        <el-col :span="7">
          <el-form-item label="医院名称">
            <el-input
              v-model="queryParams.pahospitalname"
              placeholder="请输入医院名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item>
            <el-button
@@ -52,7 +52,24 @@
      </el-row>
    </el-form>

    <!--<el-table v-loading="loading" border :data="donatebaseinfoList">     -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="jxidata"
@@ -63,34 +80,21 @@
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column label="序号" align="center" prop="id" width="100">
      </el-table-column>

      <el-table-column label="统计月份" align="center" prop="receivemonth" />
      <el-table-column label="医院名称" align="center" prop="hospitalname">
      </el-table-column>
      <el-table-column label="已收金额" align="center" prop="amount">
      </el-table-column>
      <el-table-column label="未收金额" align="center" prop="nonpayment">
      </el-table-column>
      <el-table-column label="应收金额" align="center" prop="organcharge">
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
      >
      <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">
        <template slot-scope="scope">
          <!--           v-if="scope.row.recordstate==2"
 -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            >说明</el-button
          >
          <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>
@@ -100,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>
@@ -113,7 +180,9 @@
  listsfeistatistics,
  listbxiaostatistics,
  listjixstatistics,
  listanlstatistics
  listanlstatistics,
  getChargeStatisticsDetail,
  exportChargeStatistics
} from "@/api/project/statistics";

import { listUser } from "@/api/project/organization";
@@ -139,7 +208,7 @@
      countyname: "",
      cuuntry: "",

      selecttime: "",
      selecttime: [],
      reportervalue: "",
      reportlist: [
        { label: "未收款", value: "0" },
@@ -207,7 +276,13 @@
      // 获取组织名称时间范围
      daterangeReporttime: [],
      // 查询参数
      queryParams: {},
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        pabegtime: "",
        paendtime: "",
        pahospitalname: ""
      },

      // 表单参数
      form: {},
@@ -223,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概念
@@ -246,15 +335,93 @@
      return Arr;
    },

    /** 查询捐献基础列表 */
    /** 查询收款统计 */
    getList() {
      listsfeistatistics(this.queryParams).then(res => {
        this.jxidata = res.rows;
        this.jxidata.forEach(($obj, $index) => {
          $obj.id = $index + 1;
      this.loading = true;
      listsfeistatistics(this.queryParams)
        .then(res => {
          this.jxidata = res.rows || [];
          this.jxidata.forEach(($obj, $index) => {
            $obj.id = $index + 1;
          });
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
        this.total = res.total;
    },
    /** 点击已收/未收金额，查询该医院明细 */
    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() {
      const queryParams = {
        pabegtime: this.queryParams.pabegtime,
        paendtime: this.queryParams.paendtime,
        pahospitalname: this.queryParams.pahospitalname
      };
      this.$modal
        .confirm("是否确认导出当前筛选条件下的收款统计数据？")
        .then(() => {
          this.exportLoading = true;
          return exportChargeStatistics(queryParams);
        })
        .then(response => {
          this.$download.name(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {
          this.exportLoading = false;
        });
    },

    // 表单重置
@@ -268,82 +435,39 @@
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeReporttime = [];

      this.reportervalue = "";

      this.queryParams = {};
      this.selecttime = [];
      this.getTimeList();
      this.searchAddress = {
        sheng: "",
        shi: "",
        qu: "",
        organizationname: null
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        pabegtime: "",
        paendtime: "",
        pahospitalname: ""
      };

      this.resetForm("queryForm");
      this.handleQuery();
      this.getList();
    },
    getTimeList(e) {
      if (this.selecttime != 0) {
        this.queryParams.pabegtime = this.selecttime[0];
        this.queryParams.paendtime = this.selecttime[1];
        // if (this.queryParams.paendtime == this.queryParams.pabegtime) {
        let num = Number(this.queryParams.paendtime.slice(5, 7));
        if (num < 9) {
          let mon = Number(this.queryParams.paendtime.slice(6, 7));
          this.queryParams.paendtime =
            this.queryParams.paendtime.slice(0, 5) +
            "0" +
            (mon + 1) +
            "-" +
            "01" +
            " " +
            "00" +
            ":" +
            "00" +
            ":" +
            "00";
        }
        // this.queryParams.paendtime=this.queryParams.paendtime.slice(0,5)年
        else if (num >= 10) {
          this.queryParams.paendtime =
            this.queryParams.paendtime.slice(0, 5) +
            (num + 1) +
            "-" +
            "01" +
            " " +
            "00" +
            ":" +
            "00" +
            ":" +
            "00";
        } else {
          this.queryParams.paendtime =
            this.queryParams.paendtime.slice(0, 5) +
            "10" +
            "-" +
            "01" +
            " " +
            "00" +
            ":" +
            "00" +
            ":" +
            "00";
        }
        this.queryParams.pabegtime =
          this.queryParams.pabegtime + " " + "00" + ":" + "00" + ":" + "00";
        // }
    /** 日期范围：案例时间，开始 00:00:00，结束 23:59:59 */
    getTimeList() {
      if (this.selecttime && this.selecttime.length === 2) {
        this.queryParams.pabegtime = this.selecttime[0] + " 00:00:00";
        this.queryParams.paendtime = this.selecttime[1] + " 23:59:59";
      } else {
        // this.queryParams.pabegtime = "1998-01-01 00:00:00";
        // this.queryParams.paendtime = "2998-01-01 00:00:00";
        this.queryParams.pabegtime = "";
        this.queryParams.paendtime = "";
      }
    },
    /** 金额显示：保留两位小数，0 显示 0.00 */
    amountFormatter(row, column, cellValue) {
      if (cellValue === null || cellValue === undefined || cellValue === "") {
        return "0.00";
      }
      const num = Number(cellValue);
      return Number.isFinite(num) ? num.toFixed(2) : "0.00";
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      var columnnames = ["receivemonth", "hospitalname"];
      var columnnames = ["hospitalname"];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
@@ -376,7 +500,7 @@
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //获取列表
    this.getList();
    //this.getList();
  }
  // //生命周期 - 挂载完成（可以访问DOM元素）
  //    mounted() {},