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

<template>
  <div class="bill-details">
    <div class="frame">
      <!-- 公司名称 -->
      <autocomplete
        class="mr20"
        :params="parameter.params"
        :config="configAutocomplete"
      />
      <!-- 总公司名称 -->
      <autocomplete
        class="mr20"
        :params="parameter.params"
        :config="configAutocompleteSec"
      />

      <el-select
        v-model="parameter.params.accountState"
        placeholder="账户状态"
        clearable
      >
        <el-option
          v-for="(item, index) in accountStateEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-select
        v-model="parameter.params.companyNature"
        placeholder="企业性质"
        clearable
      >
        <el-option
          v-for="(item, index) in companyNatureEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 业务负责人 -->
      <autocomplete
        :params="parameter.params"
        :config="configAutocompleteBusinessLeader"
      />

      <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="accountTypeHandler(0)">禁用</el-button>
        <el-button @click="accountTypeHandler(1)">启用</el-button>
        <el-button @click="accountTypeHandler(-1)">冻结</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="companyName" label="企业名称" minWidth="300">
          <template slot-scope="{ row }">
            <div class="companyName">
              <el-tag
                effect="dark"
                :type="
                  accountStateEnum.find(
                    (item) => item.value === row.accountState
                  ).type
                "
              >
                {{
                  accountStateEnum.find(
                    (item) => item.value === row.accountState
                  ).label
                }}
              </el-tag>
              <p>{{ row.companyName }}</p>
              <p>业务负责人:{{ row.businessLeader }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业性质" minWidth="120">
          <template slot-scope="{ row }">
            {{
              companyNatureEnum.find((item) => item.value === row.companyNature)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="totalBalance"
          label="公司企业总余额"
          minWidth="120"
        />
        <el-table-column label="司机油卡余额" minWidth="130">
          <template slot-scope="{ row }">
            <span>外:{{ row.outCountBalance }}</span>
            <br />
            <span>自:{{ row.inCountBalance }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="账户总余额" minWidth="120" />
        <el-table-column
          prop="rechargeBalance"
          label="充值余额"
          minWidth="120"
        />
        <el-table-column
          prop="rechargeRebateBalance"
          label="充值返利余额"
          minWidth="120"
        />
        <el-table-column
          prop="consumeRebateBalance"
          label="消费返利余额"
          minWidth="120"
        />
        <el-table-column prop="createTime" label="创建时间" minWidth="200" />

        <el-table-column fixed="right" label="操作" width="150px">
          <template slot-scope="{ row }">
            <span class="el-dropdown-link" @click="detail(row)">详情</span>
            <el-dropdown>
              <el-button type="text">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toRecharge(row)">
                  <el-button type="text"> 充值 </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>
    <!-- 添加充值 -->
    <recharge
      :controlWindows="controlWindows"
      @getByPage="getByPage"
      @closeWindow="closeDialog"
    />

    <!-- 详情 -->
    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible.sync="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
        <template #parentMark>
          <p>
            {{ oilCompanyMatch[0].parentMark === 0 ? "主体公司" : "分公司" }}
          </p>
        </template>
        <template #companyNature>
          <p v-if="oilCompanyMatch[0]">
            {{
              companyNatureEnum.find(
                (item) => item.value === oilCompanyMatch[0].companyNature
              ).label
            }}
          </p>
        </template>
        <template #enableMark>
          <p>
            {{ oilCompanyMatch[0].enableMark === 0 ? "禁用" : "启用" }}
          </p>
        </template>
        <template #auditMark>
          <p>
            {{ auditMarkEnum[oilCompanyMatch[0].enableMark] }}
          </p>
        </template>
        <template #accountState>
          <p v-if="oilCompanyMatch[1]">
            {{
              accountStatusEnum.find(
                (item) => item.value === oilCompanyMatch[1].accountState
              ).label
            }}
          </p>
        </template>
        <template #accountType>
          <p>
            {{ oilCompanyMatch[1].accountType == 0 ? "基础账户" : "" }}
          </p>
        </template>
        <template #businessLienceImg>
          <el-image
            style="width: 100px; height: 100px"
            :src="oilCompanyMatch[2].businessLienceImg"
          />
        </template>
        <template #settlementModes>
          <p>
            {{ settlementModesEnum[oilCompanyMatch[3].settlementModes] }}
          </p>
        </template>
        <template #defaultShare>
          <p>
            {{ oilCompanyMatch[3].defaultShare === 1 ? "共享" : "不共享" }}
          </p>
        </template>
      </general-details>
    </el-drawer>
  </div>
</template>

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

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

import { accountStatusEnum } from "utils/dataType.js";

export default {
  components: {
    recharge,
    pagination,
    autocomplete,
    generalDetails,
  },
  data() {
    return {
      accountStatusEnum: accountStatusEnum,
      // oilCompanyAccount: {},
      controlWindows: {
        detail: false,
        recharge: false, // 充值弹窗
      },
      tableDataSec: [],
      tableHeight: 0,
      tableData: [],
      multipleSelection: [], // 选择表格数据集合
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "企业名称",
        querykey: "companyId",
      },
      configAutocompleteSec: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "总公司名称",
        querykey: "name",
      },
      configAutocompleteBusinessLeader: {
        serveTarget: commonServe.liekQuery,
        autocompleteKey: "",
        labelKey: "nickName",
        valueKey: "id",
        placeholder: "业务负责人",
        querykey: "businessLeader",
      },
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },
      accountStateEnum: [
        {
          label: "禁用",
          value: 0,
          type: "info",
        },
        {
          label: "启用",
          value: 1,
          type: "",
        },
        {
          label: "冻结",
          value: -1,
          type: "info",
        },
      ],
      companyNatureEnum: [
        {
          label: "零售客户",
          value: 0,
        },
        {
          label: "外请客户",
          value: 1,
        },
        {
          label: "渠道客户",
          value: 2,
        },
        {
          label: "存量客户",
          value: 3,
        },
        {
          label: "批发客户",
          value: 4,
        },
        {
          label: "LNG客户",
          value: 5,
        },
        {
          label: "推广业务",
          value: 6,
        },
      ],
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "基础信息",
          // 标记
          carItems: [
            { label: "账户ID", value: "id" },
            { label: "企业名称", value: "name" },
            { label: "企业简称", value: "abbreviaName" },
            { label: "是否为主体公司", value: "parentMark" },
            // { label: "上级公司", value: "name" },
            { label: "企业性质", value: "companyNature" },
            { label: "启用标识", value: "enableMark" },
            { label: "审核标识", value: "auditMark" },
            { label: "审核说明", value: "auditRemarks" },
            { label: "创建人编码", value: "createUser" },
            { label: "创建时间", value: "createTime" },
          ],
        },
        {
          carTitle: "账户信息",
          carItems: [
            { label: "账户总余额", value: "balance" },
            { label: "待还总金额", value: "totalChargeAmount" },
            { label: "账户状态", value: "accountState" },
            { label: "账户类型", value: "accountType" },
            { label: "账户充值余额", value: "rechargeBalance" },
            { label: "充值返利余额", value: "rechargeRebateBalance" },
            { label: "消费返利余额", value: "consumeRebateBalance" },
            { label: "累计充值金额", value: "totalRechargeAmount" },
            { label: "累计充值返利金额", value: "totalRechargeRebateAmount" },
            { label: "累计消费返利金额", value: "totalConsumeRebateAmount" },
          ],
        },
        {
          carTitle: "认证信息",
          carItems: [
            { label: "企业名称", value: "companyName" },
            { label: "省份名称", value: "provinceName" },
            { label: "城市名称", value: "cityName" },
            { label: "区县名称", value: "areaName" },
            { label: "详细地址", value: "address" },
            { label: "法人代表", value: "companyLegalPerson" },
            { label: "注册资本", value: "registeredCapital" },
            { label: "经营范围", value: "businessScope" },
            { label: "经营资质", value: "businessQualia" },
            { label: "联系方式", value: "contactPhone" },
            { label: "企业网址", value: "website" },
            { label: "营业执照号码", value: "businessLienceId" },
            { label: "营业执照照片", value: "businessLienceImg" },
            { label: "创建人编号", value: "createUser" },
            { label: "创建时间", value: "createTime" },
          ],
        },
        {
          carTitle: "财务信息",
          carItems: [
            { label: "结算方式", value: "settlementModes" },
            { label: "充值返利费率", value: "rechargeRebate" },
            { label: "消费返利叠加费率", value: "consumptionRebate" },
            { label: "结账周期", value: "billingCycle" },
            { label: "是否开启企业共享额度", value: "defaultShare" },
            { label: "默认单次额度上限", value: "defaultOnceUp" },
            { label: "默认单日加油额度上限", value: "defaultDayUp" },
            { label: "创建人编号", value: "createUser" },
            { label: "创建时间", value: "createTime" },
          ],
        },
      ],
      auditMarkEnum: {
        0: "零售客户",
        1: "外请客户",
        2: "渠道客户",
        "-3": "存量客户",
      },
      settlementModesEnum: {
        1: "充值返利",
        2: "消费返利",
        3: "充值返利+消费返利",
      },
    };
  },
  created() {
    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["companyType"] = "4";
      serve.getByPage(this.parameter).then((res) => {
        this.tableData = res.data.list;
        this.parameter.total = res.data.totalCount;
      });
    },

    //禁启用
    accountTypeHandler(type) {
      //0:禁用 1:启用 -1:冻结
      if (!this.multipleSelection.length) {
        this.$message.warning("请选择需要操作的数据");
        return;
      }
      this.multipleSelection.map((item) => {
        return (item.accountState = type);
      });
      serve.updateAccountState(this.multipleSelection).then((res) => {
        if (res.code === 20000) {
          this.$message.success(res.msg);
          this.getByPage();
        }
      });
    },

    // 详情
    detail(row) {
      serve.get(row.id).then((res) => {
        Promise.all([
          //基础信息
          commonServe.getInfo(res.data.companyId),
          // 账户信息
          commonServe.getByCompanyIdAccount(res.data.companyId),
          // 认证信息
          commonServe.getByCompanyIdAuth(res.data.companyId),
          // 财务信息
          commonServe.getByCompanyIdFinance(res.data.companyId),
        ]).then(([firstRes, secondRes, thirdRes, fourthRes]) => {
          this.oilCompanyMatch = [
            firstRes.data,
            secondRes.data,
            thirdRes.data,
            fourthRes.data,
          ];
          if (firstRes.parentMark === 1) {
            commonServe.getInfo(firstRes.parentId).then((res) => {
              this.oilCompanyMatch[0] = res.data;
              this.controlWindows.detail = true;
            });
          } else this.controlWindows.detail = true;
        });
      });
    },
    // 充值
    toRecharge(row) {
      serve.get(row.id).then((res) => {
        this.controlWindows.addInfo = {
          id: res.data.companyId,
        };
        this.controlWindows.recharge = true;
      });

      return;
      // 跳转到充值
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //重置
    reset() {
      Object.assign(this.parameter, {
        currentPage: 1,
        pageSize: 10,
        params: {},
      });
    },
    closeDialog() {
      this.controlWindows.recharge = false;
    },
    // 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>
.bill-details {
  .pft14 {
    font-size: 14px;
  }
  .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;
    }

    .companyName {
      position: relative;
      .el-tag {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      p {
        padding-left: 50px;
      }
    }

    .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>