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>
    <div class="table-full-width table-responsive" style="height:500px">
      <custom-base-table
        :data="data"
        :columns="columns"
        thead-classes="text-primary"
      >
        <!-- 卖卖类型 -->
        <template slot="OrderType">
          <p>买入</p>
          <p>卖出</p>
        </template>
        <!-- 买卖时间 -->
        <template slot="KLineId" slot-scope="item">
          <p>
            {{
              item.row.item.PurchaseKLineId
                ? moment(item.row.item.PurchaseKLineId * 1000).format(
                    "YYYY-MM-DD HH:mm:ss"
                  )
                : "-"
            }}
          </p>
          <p>
            {{
              item.row.item.SaleKLineId
                ? moment(item.row.item.SaleKLineId * 1000).format(
                    "YYYY-MM-DD HH:mm:ss"
                  )
                : "-"
            }}
          </p>
        </template>
        <!-- 买卖价格 -->
        <template slot="Price" slot-scope="item">
          <p>{{ item.row.item.PurchasePrice || "-" }}</p>
          <p>{{ item.row.item.SalePrice || "-" }}</p>
        </template>
        <!-- 买卖数量 -->
        <template slot="Count" slot-scope="item">
          <p>{{ item.row.item.PurchaseCoinCount || "-" }}</p>
          <p>{{ item.row.item.SaleCoinCount || "-" }}</p>
        </template>
        <!-- 最大浮亏 -->
        <template slot="MaxLossRatio" slot-scope="item">
          <p>{{ item.row.item.MaxLossPrice || "-" }}</p>
          <p>{{ item.row.item.MaxLossRatio || "-" }}%</p>
        </template>
        <!-- 盈亏 -->
        <template slot="Profit" slot-scope="item">
          <p>{{ item.row.item.Profit }}</p>
          <p v-if="item.row.item.Profit">
            {{
              (
                (item.row.item.Profit / item.row.item.TotalPurchasePrice) *
                100
              ).toFixed(2)
            }}%
          </p>
          <p v-else>-</p>
        </template>
        <!-- 累计盈亏 -->
        <template slot="TotalProfit" slot-scope="item">
          <p>{{ item.row.item.TotalProfit }}</p>
          <p v-if="item.row.item.TotalProfit">
            {{
              (
                (item.row.item.TotalProfit / item.row.item.TotalPurchasePrice) *
                100
              ).toFixed(2)
            }}%
          </p>
          <p v-else>-</p>
        </template>
      </custom-base-table>
    </div>
  </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>