refinery-admin/src/views/financialCenter/enterpriseRecharge/index.vue

<template>
  <div class="enterprise-recharge">
    <div class="frame">
      <!-- 公司名称 -->
      <autocomplete
        class="mr20"
        :params="parameter.params"
        :config="configAutocomplete"
      />
      <!-- 业务负责人 -->
      <autocomplete
        :params="parameter.params"
        :config="configAutocompleteSec"
      />
      <el-select
        v-model="parameter.params.transactionType"
        placeholder="交易类型"
        clearable
      >
        <el-option
          v-for="(item, index) in rechargeTypeEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="parameter.params.transactionState"
        placeholder="交易状态"
        clearable
      >
        <el-option
          v-for="(item, index) in rechargeStatusEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="parameter.params.auditMark"
        placeholder="交易审核标识"
        clearable
      >
        <el-option
          v-for="(item, index) in auditMarkEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="parameter.params.chargeSalesAuditMark"
        placeholder="赊账还款审核"
        clearable
      >
        <el-option
          v-for="(item, index) in repaymentExamineEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="datetime"
        type="datetimerange"
        align="right"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="changeDateTime"
      >
      </el-date-picker>
      <div class="buttons">
        <el-button icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation">
        <el-button @click="addition">企业充值</el-button>
        <el-button @click="additionTurn">圈回</el-button>
      </div>
      <el-table
        v-if="tableHeight"
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        show-summary
        :summary-method="getSummaries"
        style="width: 100%"
      >
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="企业名称" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-tag
              size="small"
              type="danger"
              effect="dark"
              v-show="row.operationCode"
              >急</el-tag
            >
            <span style="margin-left: 10px">{{ row.companyName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="交易类型">
          <template slot-scope="{ row }">
            <span>
              {{
                row.transactionType === "TURN"
                  ? LoopBackTypeEnum.find((item) => item.value === row.turnType)
                      .label
                  : rechargeTypeEnum.find(
                      (item) => item.value === row.transactionType
                    ).label
              }}
            </span>
            <el-popover
              placement="top-start"
              trigger="click"
              content="{row.settlementNo}"
            >
              <el-tag
                style="cursor: pointer"
                slot="reference"
                size="small"
                type="p"
                effect="dark"
                v-show="row.settlementNo"
                >结</el-tag
              >
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="交易状态">
          <template slot-scope="{ row }">
            <p v-if="row.transactionState">
              {{
                rechargeStatusEnum.find(
                  (item) => item.value === row.transactionState
                ).label
              }}
            </p>
          </template>
        </el-table-column>

        <el-table-column
          prop="transactionAmount"
          label="交易金额"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="rechargeRebateAmount"
          label="充值返利比例/金额"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.rechargeRebate }}/{{ row.rechargeRebateAmount }}
          </template>
        </el-table-column>
        <el-table-column label="付款/收款公司账户">
          <template slot-scope="{ row }">
            <el-tooltip
              className="item"
              effect="dark"
              placement="top"
              :disabled="!row.internalCompanyName"
            >
              <div slot="content">
                <p>收款公司账户：{{ row.internalCompanyName }}</p>
                <p>收款开户行：{{ row.bankDeposit }}</p>
                <p>收款银行卡号：{{ row.bankCardNo }}</p>
              </div>
              <div>
                <el-tag size="mini">付</el-tag>
                <span>{{
                  row.offlinePaymentCompany ? row.offlinePaymentCompany : "暂无"
                }}</span>
                <br />
                <el-tag size="mini" type="success">收</el-tag>
                <span>{{
                  row.internalCompanyName ? row.internalCompanyName : "暂无"
                }}</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="交易审核标识" show-overflow-tooltip>
          <template slot-scope="{ row }">
            {{
              auditMarkEnum.find((item) => item.value === row.auditMark).label
            }}
          </template>
        </el-table-column>
        <el-table-column label="赊账还款审核">
          <template slot-scope="{ row }">
            <p v-if="row.transactionType && row.chargeSalesAuditMark">
              {{
                row.transactionType !== "CHARGE_SALES" ||
                (row.transactionType === "CHARGE_SALES" &&
                  row.transactionState === -1)
                  ? "无状态"
                  : repaymentExamineEnum.find(
                      (item) => item.value === row.chargeSalesAuditMark
                    ).label
              }}
            </p>
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <span class="el-dropdown-link" @click="detail(row)">详情</span>
            <el-dropdown
              @command="
                (val) => {
                  commandMore(val, row);
                }
              "
            >
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-if="row.transactionType == 'TURN'">
                  <el-dropdown-item
                    command="updateTurn"
                    v-if="row.auditMark === 0"
                    >圈回编辑</el-dropdown-item
                  >
                </template>
                <template v-else>
                  <el-dropdown-item command="update" v-if="row.auditMark === 0"
                    >编辑</el-dropdown-item
                  >
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>
    <add :controlWindows="controlWindows" @closeWindow="search" />
    <add-turn :controlWindows="controlWindows" @closeWindow="search" />
    <!-- 详情 -->
    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
        <template #offlineTransactionProof>
          <el-image
            style="width: 100px; height: 100px"
            :src="oilCompanyMatch.offlineTransactionProof"
          />
        </template>
      </general-details>
    </el-drawer>
  </div>
</template>

<script>
import serve from "api/financialCenter/enterpriseRechargeDetails.js";
import commonServe from "api/common.js";

import add from "./components/add.vue";
import addTurn from "./components/addTurn.vue";

import autocomplete from "components/autocomplete/index.vue";
import pagination from "components/pagination/index.vue";
import generalDetails from "components/generalDetails/index.vue";

import {
  rechargeTypeEnum,
  rechargeStatusEnum,
  repaymentExamineEnum,
} from "utils/dataType.js";

export default {
  components: {
    add,
    addTurn,
    pagination,
    autocomplete,
    generalDetails,
  },
  data() {
    return {
      controlWindows: {
        add: false,
        addTurn: false,
        addInfo: {},
        detail: false,
      },
      rechargeTypeEnum: [
        {
          label: "圈回",
          value: "TURN",
        },
        ...rechargeTypeEnum,
      ],
      rechargeStatusEnum: rechargeStatusEnum,
      repaymentExamineEnum: [
        {
          label: "已拆分",
          value: -3,
        },
        ...repaymentExamineEnum,
      ],
      auditMarkEnum: [
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "已审核",
          value: 1,
        },
        {
          label: "审核失败",
          value: -1,
        },
      ],

      datetime: [],
      tableHeight: 0,
      tableData: [],
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "企业名称",
        querykey: "companyId",
      },
      configAutocompleteSec: {
        serveTarget: commonServe.liekQuery,
        autocompleteKey: "",
        labelKey: "nickName",
        valueKey: "id",
        placeholder: "业务负责人",
        querykey: "businessLeader",
      },
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },
      rechargeTypeEnum: [
        {
          label: "充值",
          value: "RECHARGE",
        },
        {
          label: "销账",
          value: "REVOKE",
        },
        {
          label: "赊销",
          value: "CHARGE_SALES",
        },
        {
          label: "消费返利",
          value: "CONSUME_REBATE",
        },
      ],
      LoopBackTypeEnum: [
        {
          label: "充值圈回",
          value: 1,
        },
        {
          label: "赊销圈回",
          value: 2,
        },
        {
          label: "充值返利圈回",
          value: 3,
        },
        {
          label: "消费返利圈回",
          value: 4,
        },
      ],
      rechargeStatusEnum: [
        {
          label: "已申请",
          value: 0,
        },
        {
          label: "已成功",
          value: 1,
        },
        {
          label: "已撤销",
          value: -1,
        },
      ],
      repaymentExamineEnum: [
        {
          label: "还款待审核",
          value: 0,
        },
        {
          label: "还款成功",
          value: 1,
        },
        {
          label: "还款失败",
          value: -1,
        },
        {
          label: "待还款",
          value: -2,
        },
      ],
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "",
          carItems: [
            { label: "ID", value: "id" },
            { label: "交易类型", value: "transactionType" },
            { label: "交易状态", value: "transactionState" },
            { label: "交易金额", value: "transactionAmount" },
            { label: "充值返利比例", value: "rechargeRebate" },
            { label: "充值返利金额", value: "rechargeRebateAmount" },
            { label: "线下汇款公司账户", value: "offlinePaymentCompany" },
            { label: "线下交易发起时间", value: "offlineStartTime" },
            { label: "线下交易完成时间", value: "offlineCompleteTime" },
            { label: "线下交易凭证", value: "offlineTransactionProof" },
            { label: "交易审核标识", value: "auditMark" },
            { label: "审核人", value: "auditUserName" },
            { label: "交易说明", value: "reverseRemark" },
            { label: "审核时间", value: "auditTime" },
            { label: "审核系统来源", value: "auditSource" },
            { label: "赊销还款审核", value: "chargeSalesAuditMark" },
            { label: "赊销还款审核人", value: "chargeSalesAuditUser" },
            { label: "赊销还款审核时间", value: "chargeSalesAuditTime" },
            { label: "赊销还款审核来源", value: "chargeSalesAuditSource" },
            { label: "创建用户", value: "createUserName" },
            { label: "创建时间", value: "createTime" },
            { label: "创建数据来源", value: "createSource" },
            { label: "企业收款账户", value: "internalCompanyName" },
            { label: "开户行", value: "bankDeposit" },
            { label: "银行卡号", value: "bankCardNo" },
          ],
        },
        {
          carTitle: "账户信息",
          carItems: [
            { label: "账户总余额", value: "balance" },
            { label: "待还总金额", value: "totalChargeAmount" },
            { label: "账户状态", value: "accountState" },
            { label: "账户类型", value: "accountType" },
            { label: "账户充值余额", value: "rechargeBalance" },
            { label: "赊销充值余额", value: "chargeRechargeBalance" },
            { label: "充值返利余额", value: "rechargeRebateBalance" },
            { label: "消费返利余额", value: "consumeRebateBalance" },
            { label: "累计充值金额", value: "totalRechargeAmount" },
            { label: "累计赊销充值金额", value: "totalChargeRechargeAmount" },
            { label: "累计充值返利金额", value: "totalRechargeRebateAmount" },
            { label: "累计消费返利金额", value: "totalConsumeRebateAmount" },
          ],
        },
      ],
    };
  },
  created() {
    this.initDateTime();
    this.getByPage();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle();
    });
    window.addEventListener(
      "resize",
      this.$utils.debounce(this.heightHandle, 500)
    );
  },
  methods: {
    search() {
      this.parameter.currentPage = 1;
      this.getByPage();
    },
    //table list
    getByPage() {
      // this.parameter.params.companyAccountType = "4";
      serve.getByPage(this.parameter).then((res) => {
        this.tableData = res.data.list;
        this.parameter.total = res.data.totalCount;
      });
    },
    //新增
    addition() {
      this.controlWindows.addInfo = {
        title: "企业充值",
      };
      this.controlWindows.add = true;
    },
    // 圈回
    additionTurn() {
      this.controlWindows.addInfo = {
        title: "资金圈回",
      };
      this.controlWindows.addTurn = true;
    },
    // 更多
    commandMore(val, row) {
      this.controlWindows.addInfo = {
        title: "编辑",
        ...row,
      };
      if (val === "update") {
        this.controlWindows.add = true;
      }
      if (val === "updateTurn") {
        this.controlWindows.addTurn = true;
      }
    },
    //详情
    detail(row) {
      Promise.all([
        serve.get(row.id),
        serve.getByCompanyId(row.companyId),
      ]).then(([firstRes, secondRes]) => {
        this.oilCompanyMatch = { ...firstRes.data, ...secondRes.data };
        this.controlWindows.detail = true;
      });
    },
    //
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let transactionAmount = 0; // 交易金额
      let rechargeRebateAmount = 0; // 充值返利金额
      data.forEach((item) => {
        transactionAmount += item.transactionAmount
          ? item.transactionAmount
          : 0;
        rechargeRebateAmount += item.rechargeRebateAmount
          ? item.rechargeRebateAmount
          : 0;
      });
      transactionAmount = transactionAmount.toFixed(2);
      rechargeRebateAmount = rechargeRebateAmount.toFixed(2);
      columns.forEach((item, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        switch (item.property) {
          case "transactionAmount":
            sums[index] = transactionAmount + "元";
            break;
          case "rechargeRebateAmount":
            sums[index] = rechargeRebateAmount + "元";
            break;

          default:
            break;
        }
      });
      return sums;
    },
    //重置
    reset() {
      this.parameter = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      };
      this.initDateTime();
    },
    // init时间
    initDateTime() {
      let now = new Date().getTime();
      let beforeDay30 = now - 1000 * 60 * 60 * 24 * 30;
      let nowRes = this.$utils.parseTime(now);
      let beforeDay30Res = this.$utils.parseTime(beforeDay30);
      let { y, M, d } = nowRes;
      let { y: beforey, M: beforeM, d: befored } = beforeDay30Res;
      this.datetime = [
        `${beforey}-${beforeM}-${befored} 00:00:00`,
        `${y}-${M}-${d} 23:59:59`,
      ];
      this.changeDateTime(this.datetime);
    },
    changeDateTime(val) {
      if (val) {
        this.parameter.params.createTimeStart = val[0];
        this.parameter.params.createTimeEnd = val[1];
      }
    },
    // table height
    heightHandle() {
      let bodyHeight = document.body.clientHeight;
      let frameHeight = this.obtainElement(".frame").clientHeight;
      let operationHeight = this.obtainElement(".operation").clientHeight;
      let paginationHeight = this.obtainElement(".el-pagination").clientHeight;
      this.tableHeight =
        bodyHeight - frameHeight - operationHeight - paginationHeight - 145;
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className);
    },
  },
};
</script>

<style lang="scss" scoped>
.enterprise-recharge {
  .frame {
    margin: 20px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;
    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }
    .el-autocomplete + .el-input,
    .el-input + .el-autocomplete,
    .el-autocomplete + .el-select,
    .el-input + .el-input,
    .el-input + .el-select,
    .el-select + .el-select,
    .el-select + .el-input {
      margin-right: 20px;
      margin-bottom: 15px;
    }
    .mr20 {
      margin-right: 20px;
    }
    .buttons {
      text-align: right;
    }
  }

  .table {
    overflow: hidden;
    margin: 0 20px;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    > .operation {
      box-sizing: content-box;
      padding: 15px;
    }
    .gray {
      color: #999;
      span {
        color: #333;
      }
    }
    .el-table {
      margin-bottom: 20px;
      border-radius: 10px 10px 0px 0px;
    }

    .el-dropdown-link {
      margin-right: 10px;
      cursor: pointer;
      color: #409eff;
      &.special {
        margin-right: 0;
      }
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>