jiaoyixt/src/pages/ReCheck/OrderTable.vue

<template>
  <div>
    <el-select
      class="select-danger"
      style="width:200px"
      placeholder="不限"
      v-model="sortType"
      @change="sortChange"
    >
      <el-option
        v-for="item in orderTypes"
        class="select-danger"
        :value="item.value"
        :label="item.title"
        :key="item.value"
      >
      </el-option>
    </el-select>

    <el-table :data="data" height="600" class="customer-no-border-table">
      <el-table-column
        v-for="i in columns"
        :label="i.name"
        :width="i.width || 160"
        :prop="i.prop"
        :key="i.prop"
      >
        <template slot-scope="scope">
          <!-- 卖卖类型 -->
          <div v-if="i.customSlot == 'OrderType'">
            <p>买入</p>
            <p>卖出</p>
          </div>
          <!-- 手持资金 -->
          <div v-else-if="i.customSlot == 'CapitalAfter'">
            <p>{{ scope.row.CapitalAfterPurchase.toFixed(2) || 0 }}</p>
            <p>{{ scope.row.CapitalAfterSale.toFixed(2) || 0 }}</p>
          </div>
          <!-- 买卖时间 -->
          <div v-else-if="i.customSlot == 'KLineId'">
            <p>
              {{
                scope.row.PurchaseKLineId
                  ? moment(scope.row.PurchaseKLineId * 1000).format(
                      "YYYY-MM-DD HH:mm:ss"
                    )
                  : "-"
              }}
            </p>
            <p>
              {{
                scope.row.SaleKLineId
                  ? moment(scope.row.SaleKLineId * 1000).format(
                      "YYYY-MM-DD HH:mm:ss"
                    )
                  : "-"
              }}
            </p>
          </div>
          <!-- 买卖价格 -->
          <div v-else-if="i.customSlot == 'Price'">
            <p>{{ scope.row.PurchasePrice }}</p>
            <p>{{ scope.row.SalePrice }}</p>
          </div>
          <!-- 买卖数量 -->
          <div v-else-if="i.customSlot == 'Count'">
            <p>{{ scope.row.PurchaseCoinCount || "-" }}</p>
            <p>{{ scope.row.SaleCoinCount || "-" }}</p>
          </div>
          <!-- 成交总价 -->
          <div v-else-if="i.customSlot == 'Total'">
            <p>{{ scope.row.TotalPurchasePrice || "-" }}</p>
            <p>{{ scope.row.TotalSalePrice || "-" }}</p>
          </div>

          <!-- 借币金额 -->
          <div v-else-if="i.customSlot == 'BorrowAmount'">
            <p>{{ scope.row.BorrowAmount.toFixed(2) || "-" }}</p>
          </div>

          <!-- 借币利息 -->
          <div v-else-if="i.customSlot == 'BorrowFee'">
            <p>{{ scope.row.BorrowFee.toFixed(2) || "-" }}</p>
          </div>

          <!-- 借币比例 -->
          <div v-else-if="i.customSlot == 'BorrowRatio'">
            <p>{{ scope.row.BorrowRatio.toFixed(2) || "-" }}%</p>
          </div>

          <!-- 最大浮亏 -->
          <div v-else-if="i.customSlot == 'MaxLossRatio'">
            <p>{{ scope.row.MaxLossPrice || "-" }}</p>
            <p>{{ scope.row.MaxLossRatio || "-" }}%</p>
          </div>
          <!-- 盈亏 -->
          <div v-else-if="i.customSlot == 'Profit'">
            <p>{{ scope.row.Profit }}</p>
            <p v-if="scope.row.Profit">
              {{
                (
                  (scope.row.Profit / scope.row.TotalPurchasePrice) *
                  100
                ).toFixed(2)
              }}%
            </p>
            <p v-else>-</p>
          </div>
          <!-- 累计盈亏 -->
          <div v-else-if="i.customSlot == 'TotalProfit'">
            <p>{{ scope.row.TotalProfit }}</p>
            <p v-if="scope.row.TotalProfit">
              {{ scope.row.TotalProfitRatio }}%
            </p>
            <p v-else>-</p>
          </div>
          <div v-else>
            <p>{{ scope.row[i.prop] }}</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import CustomBaseTable from "../../components/CustomBaseTable";
import { tradeColumns } from "../../pages/prePages/js/columns";
import moment from "moment";
export default {
  model: { prop: "data", event: "tableDataChange" },
  props: {
    data: { type: Array, default: () => [] },
    positionFund: { type: Number, default: 1 }
  },
  components: { CustomBaseTable },
  data() {
    return {
      moment,
      columns: tradeColumns,
      sortType: 0,
      orderTypes: [
        { value: 0, title: "买入排序" },
        { value: 1, title: "卖出排序" }
      ]
    };
  },
  methods: {
    sortChange(value) {
      if (value == 0) {
        this.data.sort((a, b) => b.PurchaseKLineId - a.PurchaseKLineId);
      } else {
        this.data.sort((a, b) => b.SaleKLineId - a.SaleKLineId);
      }
    }
  }
};
</script>
<style></style>