refinery-admin/src/views/refineryAccount/accountDetails/index.vue

<template>
  <div class="order">
    <div class="frame">
      <autocomplete class="mr20" :params="parameter.params" :config="configAutocomplete" />
      <autocomplete class="mr20" :params="parameter.params" :config="configAutocompleteaccount" />
      <el-select
        v-model="parameter.params.createUser"
        filterable
        remote
        reserve-keyword
        clearable
        placeholder="请输入姓名/手机号码"
        :remote-method="searchUserInfo"
      >
        <el-option v-for="item in sysCustomerList" :key="item.id" :label="item.userName" :value="item.id">
          {{ item.phone }} ( {{ item.userName }} - {{ item.userCode }})
        </el-option>
      </el-select>
      <!-- <el-input v-model="parameter.params.creater" placeholder="创建人姓名或手机号" clearable></el-input> -->
      <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-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"></div>
      <el-table v-if="tableHeight" ref="multipleTable" :height="tableHeight" :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" :index="indexMethod" align="center" />
        <el-table-column prop="refineryName" label="炼厂信息" show-overflow-tooltip align="center" min-width="180">
          <template slot-scope="{ row }">
            <p>{{ row.refineryName }}</p>
            <p>{{ row.refineryId }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="transactionType" label="交易类型" show-overflow-tooltip align="center">
          <template slot-scope="{ row }">
            <p>
              {{ rechargeTypeEnum.find(item => item.value == row.transactionType).label }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="transactionAmount" label="发生金额" align="center"></el-table-column>
        <el-table-column prop="balance" label="账户余额" align="center">
          <template slot-scope="{ row }">
            <p>上次：{{ row.lastBalance }}</p>
            <p>当前：{{ row.currentBalance }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="rechargeBalance" label="充值余额" align="center">
          <template slot-scope="{ row }">
            <p>上次：{{ row.lastRechargeBalance }}</p>
            <p>当前：{{ row.currentRechargeBalance }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="totalRechargeBalance" label="创建信息" align="center" min-width="180">
          <template slot-scope="{ row }">
            <p>{{ row.userName }}</p>
            <p>{{ row.createTime }}</p>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="{ row }">
            <el-link type="primary" :underline="false" @click="detailBefore(row)">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>

    <el-drawer title="详情" direction="ltr" size="60%" :withHeader="false" :visible.sync="controlWindows.detail">
      <general-details
        class="pft14"
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        :mappingData2="mappingData2"
        @close="controlWindows.detail = false"
      >
        <template #refineryType>
          <p>
            {{ refineryTypeEnum.find(item => item.value == oilCompanyMatch[0].accountType).label }}
          </p>
        </template>
        <template #accountStatus>
          <p>
            {{ oilCompanyMatch[0].accountStatus === 'ENABLE' ? '启用' : '禁用' }}
          </p>
        </template>
      </general-details>
    </el-drawer>
  </div>
</template>

<script>
import serve from 'api/refineryAccount/accountDetails.js'

import pagination from 'components/pagination/index.vue'
import autocomplete from 'components/autocomplete/index.vue'
import generalDetails from './components/generalDetails.vue'

import { rechargeTypeEnum, refineryTypeEnum, refineryAccountTypeEnum } from 'utils/dataType.js'

export default {
  components: {
    pagination,
    autocomplete,
    generalDetails
  },
  data() {
    return {
      rechargeTypeEnum: rechargeTypeEnum,
      refineryTypeEnum: refineryTypeEnum,
      refineryAccountTypeEnum: refineryAccountTypeEnum,
      controlWindows: {
        addInfo: {},
        detail: false
      },
      configAutocomplete: {
        serveTarget: serve.getLikeByName,
        autocompleteKey: 'refineryName',
        labelKey: 'refineryName',
        valueKey: 'id',
        placeholder: '炼厂名称',
        querykey: 'refineryId'
      },
      configAutocompleteaccount: {
        serveTarget: serve.getLikeRefineryAccount,
        autocompleteKey: 'accountName',
        labelKey: 'accountName',
        valueKey: 'id',
        placeholder: '炼厂账户名称',
        querykey: 'refineryAccountId'
      },
      refineryList: [],
      tableHeight: 0,
      tableData: [],
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {}
      },
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: '炼厂账户明细基础信息',
          carItems: [
            { label: '炼厂名称', value: 'refineryName' },
            { label: '炼厂ID', value: 'refineryId' },
            { label: '炼厂账户名称', value: 'accountName' },
            { label: '炼厂账户ID', value: 'refineryAccountId' },
            { label: '订单ID', value: 'orderId' },
            { label: '业务申请ID', value: 'reverseId' }
          ]
        }
      ],
      mappingData2: [
        {
          carTitle: '炼厂账户明细财务信息',
          carItems: [
            { label: '发生金额', value: 'transactionAmount' },
            { label: '交易类型', value: 'transactionType' },
            { label: '上次累计充值金额', value: 'lastTotalRechargeAmount' },
            { label: '当前累计充值金额', value: 'currentTotalRechargeAmount' },
            { label: '上次账户总余额', value: 'lastBalance' },
            { label: '当前账户总余额', value: 'currentBalance' },
            { label: '上次充值金额', value: 'lastRechargeBalance' },
            { label: '当前充值金额', value: 'currentRechargeBalance' },
            { label: '创建人', value: 'userName' },
            { label: '创建时间', value: 'createTime' },
            { label: '创建系统', value: 'createSource' }
          ]
        }
      ],
      datetime: [],
      sysCustomerList: []
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.heightHandle()
    })
    window.addEventListener('resize', this.$utils.debounce(this.heightHandle, 500))
  },
  created() {
    this.getByPage()
  },
  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
      })
    },
    // 详情接口
    detailBefore(row) {
      serve.getById(row.id).then(res => {
        this.detail(res.data)
      })
    },
    // 详情
    detail(row) {
      this.oilCompanyMatch = [row]
      this.controlWindows.detail = true
    },
    // 重置
    reset() {
      Object.assign(this.parameter, {
        currentPage: 1,
        pageSize: 10,
        params: {}
      })
      this.datetime = []
    },
    // 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)
    },
    changeDateTime(val) {
      if (val) {
        this.parameter.params.startCreateTime = val[0]
        this.parameter.params.endCreateTime = val[1]
      }
    },
    indexMethod(index) {
      return index + 1
    },
    searchUserInfo(info) {
      if (info && info !== '') {
        serve.searchInfo(info).then(res => {
          this.sysCustomerList = res.data
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  .pft14 {
    font-size: 14px;
  }
  .frame {
    margin: 20px;
    padding: 20px;
    // width: 100%;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;
    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }
    .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-link {
      margin-right: 10px;
    }
  }
  .pft14 {
    font-size: 14px;
  }
}
</style>