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>