ConsumSupplier-Platform/src/views/page/report-sup/consum-report/index.vue

<template>
  <!-- 消息中心 -->
  <div style="display: flex">
    <el-card style="width: 18%; margin-right: 18px; border-radius: 6px">
      <el-tabs
        v-model="activeNametree"
        type="card"
        @tab-click="tabClick"
        stretch
      >
        <!-- <el-tab-pane label="按分类" name="grp"></el-tab-pane> -->
        <el-tab-pane label="按机构" name="org"></el-tab-pane>
      </el-tabs>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="spdId"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top: 10px"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>{{ node.label }}</div>
        </span>
      </el-tree>
    </el-card>
    <div class="right-common-box">
      <el-form :model="listQuery" ref="queryForm" :inline="true">
        <el-form-item label="时间" prop="docmkDate" class="long">
          <el-date-picker
            v-model="listQuery.docmkDate"
            type="daterange"
            range-separator="至"
            :editable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 230px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getorderData('search')"
            >查询
          </el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="right-btn">
        <el-button
          type="primary"
          icon="el-icon-download"
          @click="DownloadData()"
          >导出</el-button
        >
      </div>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
        stripe
        border
        show-summary
        :summary-method="getSummaries"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="机构名称" prop="orgName" />
        <el-table-column label="对账金额" prop="dzje" />
        <el-table-column label="退货金额" prop="thje" />
        <el-table-column label="应付总金额" prop="yfzje" />
        <el-table-column label="卫生院（非4+7）" prop="wsyfjcje" />
        <el-table-column label="卫生院（4+7）" prop="wsyjcje" />
        <el-table-column label="卫生室（非4+7）" prop="wssfjcje" />
        <el-table-column label="卫生室（4+7）" prop="wssfjcje" />
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getorderData"
      />
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import {
  getMcsOrdPageSpler,
  getMcsOrdPageYqrSpler,
  selectSpdList
} from "@/api/orderManage-sup/index";
import { exportData } from "./const";
import {
  getSelectRkAmtPage,
  exportRkAmtList
} from "@/api/report-sup/consum-report";
import moment from "moment";
const startOfMonth = moment()
  .startOf("month")
  .format("YYYY-MM-DD HH:mm:ss");
const endOfMonth = moment()
  .endOf("month")
  .format("YYYY-MM-DD HH:mm:ss");
export default {
  components: {
    ylPagination
  },
  data() {
    return {
      activeNametree: "org",
      data: [],
      spdId: null,
      defaultProps: {
        children: "children",
        label: "spdName"
      },
      listQuery: {
        current: 1,
        size: 10,
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [startOfMonth, endOfMonth],
        spdId: ""
      },
      options: [],
      listLoading: false,
      list: [],
      total: 0
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //数据导出
    DownloadData() {
      exportRkAmtList({
        ...this.listQuery
      }).then(res => {
        const _res = res.data;
        exportData(_res);
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              let newCont = Number(prev) + Number(curr);
              return newCont.toFixed(4);
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " ";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      selectSpdList()
        .then(res => {
          this.listQuery.spdId = res.data[0].spdId;
          this.data = res.data;
          this.getorderData("search");
        })
        .catch(err => {});
    },
    getorderData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.listQuery.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQuery.docmkDateEnd = this.listQuery.docmkDate[1];
      getSelectRkAmtPage(this.listQuery)
        .then(res => {
          this.list = res.data;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 点击获取耗材列表
    handleNodeClick(data) {
      this.listLoading = true;
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      this.getorderData("");
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.getorderData();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .long .el-input__inner {
  width: 199px;
}

.right-common-box ::v-deep .el-table__fixed {
  height: 100% !important;
}

.right-common-box ::v-deep .el-table__fixed-right {
  height: 100% !important;
}

.custom-tree-node {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.custom-tree-node ::v-deep .redTit {
  min-width: 30px;
  background-color: #f56c6c;
  min-height: 1px;
  border-radius: 10px;
  text-align: center;
  margin-left: 10px;
  padding: 1px;
  color: #fff;
}

.right-btn {
  width: 100px;
  height: 40px;
  position: absolute;
  right: 20px;
  top: 30px;
}
</style>