refinery-admin/src/views/refineryCenter/index.vue

<template>
  <div class="order">
    <div class="frame">
      <div class="centerStyle">
        <div>油批中心账户</div>
        <div class="centerStyle-bottom">
          <div>
            <span>{{ topData.balance }}</span
            ><br />
            <span>总余额</span>
          </div>
          <div>
            <span>{{ topData.rechargeBalance }}</span
            ><br />
            <span>充值余额</span>
          </div>
          <!-- <div>
            <span>{{ topData.totalRechargeBalance }}</span
            ><br />
            <span>累计充值余额</span>
          </div> -->
        </div>
      </div>
    </div>
    <div class="frame">
      <!-- 公司名称 -->
      <autocomplete class="mr20" :params="parameter.params" :config="configAutocomplete" />
      <el-select style="margin-right: 20px" v-model="parameter.params.transactionType" placeholder="交易类型" clearable>
        <el-option v-for="item in refineryList" :key="item.val" :label="item.label" :value="item.val"> </el-option>
      </el-select>
      <el-date-picker
        v-model="parameter.params.createTime"
        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>
      <!-- <el-select v-model="parameter.params.id" placeholder="产品名称" clearable>
        <el-option
          v-for="item in refineryList"
          :key="item.id"
          :label="item.refineryName"
          :value="item.id"
        >
        </el-option>
      </el-select> -->
      <div class="buttons">
        <el-button icon="el-icon-search" @click="handleCurrentChange(1)">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation">
        <!-- <el-button icon="el-icon-upload2" @click="addition">炼厂入驻</el-button> -->
      </div>
      <el-table v-if="tableHeight" ref="multipleTable" :height="tableHeight" :data="tableData" style="width: 100%">
        <el-table-column label="公司名称" show-overflow-tooltip minWidth="250">
          <template slot-scope="{ row }">
            <span>{{ row.companyName || row.refineryAccountName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易类型" minWidth="120">
          <template slot-scope="{ row }">
            <span>{{ row.transactionType | refineryType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易金额" minWidth="120" prop="transactionAmount"> </el-table-column>
        <el-table-column label="总余额变动" minWidth="120">
          <template slot-scope="{ row }">
            <p class="gray">
              当前 <span>{{ row.currentBalance }}</span>
            </p>
            <p class="gray">
              上次 <span>{{ row.lastBalance }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="充值余额变动" minWidth="120">
          <template slot-scope="{ row }">
            <p class="gray">
              当前 <span>{{ row.currentRechargeBalance }}</span>
            </p>
            <p class="gray">
              上次 <span>{{ row.lastRechargeBalance }}</span>
            </p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="累计充值余额变动" minWidth="120">
          <template slot-scope="{ row }">
            <p class="gray">
              当前 <span>{{ row.currentTotalRechargeAmount }}</span>
            </p>
            <p class="gray">
              上次 <span>{{ row.lastTotalRechargeAmount }}</span>
            </p>
          </template>
        </el-table-column> -->
        <el-table-column prop="reverseId" label="业务单号" minWidth="180"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间" minWidth="210"> </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="parameter.currentPage"
        :page-size="parameter.pageSize"
        :popper-append-to-body="false"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <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"
      >
      </general-details>
    </el-drawer>
    <!-- 提货单 -->
    <billOfLading :billData="billData" :controlWindows="controlWindows" @closeWindow="handleCurrentChange" />
  </div>
</template>

<script>
import serve from 'api/refineryInfo.js'
import commonServe from 'api/common.js'
import order from 'api/order.js'
import generalDetails from 'components/generalDetails/index.vue'
import autocomplete from 'components/autocomplete/index.vue'
import billOfLading from './components/billOfLading.vue'

export default {
  filters: {
    refineryType(val) {
      switch (val) {
        case 'RECHARGE':
          return '充值'
        case 'TURN':
          return '圈回'
        case 'CORRECTION':
          return '修正平账'
        case 'PAYMENT':
          return '订单支付'
        case 'RETURN':
          return '订单回退'
        case 'REFUND':
          return '订单退款'
        case 'TRANSFER':
          return '转账'
        case 'refineryRECHARGE':
          return '炼厂充值'
        case 'refineryTURN':
          return '炼厂圈回'
      }
      return val ? val : '暂无数据'
    }
  },
  refineryList: [
    { val: 'RECHARGE', label: '充值' },
    { val: 'TURN', label: '圈回' },
    { val: 'CORRECTION', label: '修正平账' },
    { val: 'PAYMENT', label: '订单支付' },
    { val: 'RETURN', label: '订单回退' },
    { val: 'REFUND', label: '订单退款' },
    { val: 'TRANSFER', label: '转账' }
  ],
  data() {
    return {
      topData: {},
      controlWindows: {
        add: false,
        addInfo: {},
        detail: false,
        bill: false
      },
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: 'name',
        labelKey: 'name',
        valueKey: 'id',
        placeholder: '企业名称',
        querykey: 'customerId'
      },
      configAutocompleteLc: {
        serveTarget: serve.findByEntity,
        autocompleteKey: 'name',
        labelKey: 'refineryName',
        valueKey: 'id',
        placeholder: '炼厂名称',
        querykey: 'refineryId'
      },
      configAutocompleteCp: {
        serveTarget: serve.findByEntity,
        autocompleteKey: 'name',
        labelKey: 'refineryName',
        valueKey: 'id',
        placeholder: '产品名称',
        querykey: 'refineryId'
      },
      refineryTypeEnum: [
        {
          label: '普通炼厂',
          value: 'COMMON'
        }
      ],
      refineryList: [
        { val: 'RECHARGE', label: '充值' },
        { val: 'TURN', label: '圈回' },
        { val: 'CORRECTION', label: '修正平账' },
        { val: 'PAYMENT', label: '订单支付' },
        { val: 'RETURN', label: '订单回退' },
        { val: 'REFUND', label: '订单退款' },
        { val: 'TRANSFER', label: '转账' }
      ],
      tableHeight: 0,
      tableData: [],
      total: 0,
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {}
      },
      oilCompanyMatch: {},
      billData: [],
      mappingData: [
        {
          carTitle: '',
          carItems: [
            { label: '订单ID', value: 'id' },
            { label: '炼厂ID', value: 'refineryId' },
            { label: '支付状态', value: 'payStatus' },
            { label: '订单状态', value: 'orderStatus' },
            { label: '提货单数量', value: 'deliveryCount' }
            // { label: "创建用户ID", value: "createUser" },
            // { label: "创建时间", value: "createTime" },
            // { label: "修改用户ID", value: "updateUser" },
            // { label: "修改时间", value: "updateTime" },
          ]
        }
      ]
    }
  },
  components: {
    generalDetails,
    billOfLading,
    autocomplete
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle()
    })
    window.addEventListener('resize', this.$utils.debounce(this.heightHandle, 500))
  },
  created() {
    this.getByPage()
  },
  methods: {
    changeDateTime(val) {
      if (val) {
        this.parameter.params.startCreateTime = val[0]
        this.parameter.params.endCreateTime = val[1]
      }
    },
    payTagType(val) {
      switch (val) {
        case 'PREPAID':
          return { label: '预支付', type: 'info' }
        case 'PAYING':
          return { label: '支付中', type: 'warning' }
        case 'SUCCESS':
          return { label: '支付成功', type: 'success', effect: 'dark' }
        case 'FAILURE':
          return { label: '支付失败', type: 'danger', effect: 'dark' }
        case 'CANCELED':
          return { label: '支付取消', type: 'info' }
        case 'REFUNDED':
          return { label: '退款成功', type: 'danger', effect: 'dark' }
        case 'REFUNDING':
          return { label: '退款中', type: 'warning' }
        case 'REFUNDFAIL':
          return { label: '退款失败', type: 'info', effect: 'dark' }
      }
      return { label: val ? val : '暂无数据', type: 'info', effect: 'plain' }
    },
    orderTagType(val) {
      switch (val) {
        case 'SUBMITED':
          return { label: '订单提交 ', type: 'info' }
        case 'ORDER_LOCKED':
          return { label: '订单锁定', type: 'warning' }
        case 'ORDER_SUCCESS':
          return { label: '下单成功', type: 'success', effect: 'dark' }
        case 'DELIVERING':
          return { label: '提货中', type: '' }
        case 'COMPLETE':
          return { label: '订单完成', type: 'success', effect: 'dark' }
        case 'CANCELED':
          return { label: '订单取消', type: 'info' }
      }
      return { label: val ? val : '暂无数据', type: 'info' }
    },
    // currentPage change
    handleCurrentChange(page) {
      this.parameter.currentPage = page
      this.getByPage()
    },
    // pageSize change
    handleSizeChange(size) {
      this.parameter.currentPage = 1
      this.parameter.pageSize = size
      this.getByPage()
    },
    //table list
    getByPage() {
      this.parameter.params.id = '123454321'
      order.getlnfoByld({ id: this.parameter.params.id }).then(res => {
        this.topData = res.data
        // this.tableData = res.data.list;
        // this.total = res.data.totalCount;
      })
      order.getRecordsByActld(this.parameter).then(res => {
        let data = res.data.list.map(item => {
          // 2023.06.20 因孔哥时间不够 应其强烈要求 暂出此下策
          if (item.refineryAccountName) {
            item.transactionType === 'TURN' && (item.transactionType = 'refineryRECHARGE')
            item.transactionType === 'RECHARGE' && (item.transactionType = 'refineryTURN')
          }
          return item
        })
        this.tableData = data
        this.total = res.data.totalCount
      })
    },

    //下单取消
    orderCencle(row) {
      if (row.orderStatus == 'SUBMITED' || row.orderStatus == 'ORDER_LOCKED') {
        order.orderUpdate({ id: row.id, orderStatus: 'CANCELED' }).then(res => {
          if (res.code == 20000) {
            this.getByPage()
          }
        })
      } else {
        order.orderRefund({ id: row.id }).then(res => {
          if (res.code == 20000) {
            this.getByPage()
          }
        })
      }
    },
    //新增
    addition() {
      this.controlWindows.addInfo.title = '炼厂入驻'
      this.controlWindows.add = true
    },
    //提货单
    async billOfLading(row) {
      this.controlWindows.addInfo.title = ''
      await order.findDeliveryByOrderId(row.id).then(res => {
        this.billData.list = res.data
      })
      await order.findByOrderId(row.id).then(res => {
        this.billData.orderInfo = res.data
      })
      this.controlWindows.addInfo = row
      this.controlWindows.bill = true
    },
    //详情
    detail(row) {
      this.oilCompanyMatch = [row]
      this.controlWindows.detail = true
    },
    //订单锁定
    Locked(row) {
      if (row.orderStatus == 'SUBMITED') {
        order.orderLock({ id: row.id }).then(res => {
          if (res.code == 20000) {
            this.getByPage()
          }
        })
      } else {
        order.orderSuccess({ id: row.id }).then(res => {
          if (res.code == 20000) {
            this.getByPage()
          }
        })
      }
    },
    //启用禁用
    switchTrigger(val, row) {
      row.enableMark = row.enableMark
      serve
        .update({
          id: row.id,
          enableMark: val
        })
        .then(res => {
          if (res.code === 20000) {
            this.getByPage()
          } else this.$message.error(res.msg)
        })
    },
    //重置
    reset() {
      this.parameter = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {}
      }
    },
    // 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
      let centerHeight = this.obtainElement('.centerStyle').clientHeight
      this.tableHeight = bodyHeight - frameHeight - operationHeight - paginationHeight - centerHeight - 280
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className)
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  .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-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;
    }
  }
}
.centerStyle {
  width: 50%;
  .centerStyle-bottom {
    display: flex;
    div {
      width: 30%;
    }
  }
}
</style>