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
          prop="companyName"
          label="公司名称"
          show-overflow-tooltip
          minWidth="250"
        >
      </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.lasttRechargeBalance }}</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="orderId" 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 '转账'
      }
      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) => {
        this.tableData = res.data.list;
        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>