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
        v-if="tableHeight"
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
      >
        >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="companyName" label="公司名称" minWidth="300">
          <template slot-scope="{ row }">
            <span style="padding-left: 8px">{{ row.companyName }}</span>
            <br />
            <span style="padding-left: 8px"
              >业务负责人:{{ row.businessLeader }}</span
            >
          </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="chargeRechargeBalance"
          label="赊销充值余额"
          minWidth="120"
        />
        <el-table-column
          prop="rechargeRebateBalance"
          label="充值返利余额"
          minWidth="120"
        />
        <el-table-column
          prop="consumeRebateBalance"
          label="消费返利余额"
          minWidth="120"
        />
        <el-table-column
          prop="totalChargeAmount"
          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.id)">
                  <el-button :size="$store.getters.size" type="text">
                    <svg-icon icon-class="iconicon-" />
                    充值
                  </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" @closeWindow="closeDialog" />
  </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";

export default {
  components: {
    recharge,
    pagination,
    autocomplete,
    generalDetails,
  },
  data() {
    return {
      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,
        },
        {
          label: "启用",
          value: 1,
        },
        {
          label: "冻结",
          value: -1,
        },
      ],
      companyNatureEnum: [
        {
          label: "零售客户",
          value: 0,
        },
        {
          label: "外请客户",
          value: 1,
        },
        {
          label: "渠道客户",
          value: 2,
        },
        {
          label: "存量客户",
          value: 3,
        },
        {
          label: "批发客户",
          value: 4,
        },
        {
          label: "LNG客户",
          value: 5,
        },
        {
          label: "推广业务",
          value: 6,
        },
      ],
    };
  },
  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() {
      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 || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
      this.multipleSelection.forEach((item) => {
        item.accountState = type;
      });
      serve.updateAccountState(this.multipleSelection).then((res) => {
        if (res.code === 20000) {
          this.$message.success(res.msg);
        }
        this.getByPage();
      });
    },
    detail(row) {
      //TODO
    },
    toRecharge(id) {
      // 跳转到充值
      serve.get(id).then((res) => {
        this.oilCompanyAccount = res.data;
        this.controlWindows.recharge = true;
      });
    },
    //重置
    reset() {
      this.parameter = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        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 {
  .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;
    }
  }

  .ft14 {
    font-size: 14px;
  }
}
</style>