jiaoyixt/src/pages/RobotSec/Account.vue

<template>
  <div>
    <base-button @click="modal.accountAddVisible = true">
      添加ApiKey</base-button
    >
    <el-table
      :data="tableData"
      size="mini"
      style="width: 100%"
      class="customer-no-border-table"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <card>
            <el-table
              size="mini"
              :data="props.row.APIKeyList"
              class="customer-no-border-table"
            >
              <el-table-column
                v-for="item in SubColumns"
                :key="item.props"
                :label="item.label"
                :prop="item.props"
              ></el-table-column>
              <el-table-column>
                <base-button>删除</base-button>
              </el-table-column>
            </el-table></card
          >
        </template>
      </el-table-column>
      <el-table-column
        v-for="i in MainColumns"
        :label="i.label"
        :prop="i.props"
        :key="i.props"
      >
        <!-- <template slot-scope="scope">
          <span v-if="i.props == 'AccountType'"> </span>
          <span v-else> {{ scope.row[i.props] }}</span>
        </template> -->
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-dropdown
            trigger="click"
            :tabindex="1000"
            @command="handleCommand"
          >
            <base-button>操作</base-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="apiKeyVisible"
                >添加API Key</el-dropdown-item
              >
              <el-dropdown-item command="moneyVisible"
                >资金划转</el-dropdown-item
              >
              <el-dropdown-item command="apiKeyVisible"
                >资金记录</el-dropdown-item
              >
              <el-dropdown-item command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加账户 -->
    <modal
      :show.sync="modal.accountAddVisible"
      body-classes="p-0"
      modal-classes="modal-dialog-centered modal-sm"
    >
      <card
        type="secondary"
        header-classes="bg-white pb-5"
        body-classes="px-lg-5 py-lg-5"
        class="border-0 mb-0"
      >
        <template>
          <div class="text-muted text-center mb-3">
            <small>添加账号</small>
          </div>
          <form role="form">
            <base-input
              label="登陆名"
              placeholder="请填写登陆名"
              v-model="apiKeyform.LoginName"
            >
            </base-input>
            <base-input
              label="账号AccessKey"
              placeholder="请填写账号AccessKey"
              v-model="apiKeyform.AccessKey"
            >
            </base-input>
            <!-- 账号SecretKey -->
            <base-input
              label="账号SecretKey"
              placeholder="请填写账号SecretKey"
              v-model="apiKeyform.SecretKey"
            >
            </base-input>
            <!-- 关联交易对 -->
            <div>
              <p class="form-label" style="color:rgba(255, 255, 255, 0.6)">
                交易对：
              </p>
              <el-select
                class="select-danger"
                placeholder="选择交易对"
                style="width:100%"
                v-model="apiKeyform.Symbol"
              >
                <el-option
                  v-for="item in allSymbol"
                  class="select-danger"
                  :value="item.Symbol"
                  :label="item.Symbol"
                  :key="item.Symbol"
                >
                </el-option>
              </el-select>
            </div>

            <!-- 账户类型 -->
            <!-- <p class="form-label" style="color:rgba(255, 255, 255, 0.6)">
              账号类型：
            </p>
            <el-select
              class="select-danger mb-4"
              style="width:100%"
              placeholder="选择账号类型"
              v-model="apiKeyform.AccountType"
            >
              <el-option
                v-for="item in accountTypes"
                class="select-danger"
                :value="item.value"
                :label="item.title"
                :key="item.value"
              >
              </el-option>
            </el-select> -->

            <div class="text-center">
              <base-button
                type="primary"
                class="my-4"
                @click="addAccount"
                :loading="createLoading"
                >添加</base-button
              >
            </div>
          </form>
        </template>
      </card>
    </modal>

    <!-- 添加账户 -->
    <modal
      :show.sync="modal.apiKeyVisible"
      body-classes="p-0"
      modal-classes="modal-dialog-centered modal-sm"
    >
      <card
        type="secondary"
        header-classes="bg-white pb-5"
        body-classes="px-lg-5 py-lg-5"
        class="border-0 mb-0"
      >
        <template>
          <div class="text-muted text-center mb-3">
            <small>添加ApiKey</small>
          </div>
          <form role="form">
            <base-input
              label="登陆名"
              placeholder="请填写登陆名"
              v-model="accountForm.AccessKey"
            >
            </base-input>
            <!-- UID -->
            <base-input
              label="UID"
              placeholder="请填写UID"
              v-model="accountForm.SecretKey"
            >
            </base-input>

            <div class="text-center">
              <base-button
                type="primary"
                class="my-4"
                @click="addRobot"
                :loading="createLoading"
                >添加</base-button
              >
            </div>
          </form>
        </template>
      </card>
    </modal>

    <!-- 资金划转 -->
    <modal
      :show.sync="modal.moneyVisible"
      body-classes="p-0"
      modal-classes="modal-dialog-centered modal-sm"
    >
      <card
        type="secondary"
        header-classes="bg-white pb-5"
        body-classes="px-lg-5 py-lg-5"
        class="border-0 mb-0"
      >
        <template>
          <div class="text-muted text-center mb-3">
            <small>资金划转</small>
          </div>
          <form role="form">
            <!-- 从 -->
            <p class="form-label" style="color:rgba(255, 255, 255, 0.6)">
              从
            </p>
            <el-select
              class="select-danger mb-4"
              style="width:100%"
              placeholder="选择账号类型"
              v-model="moneyForm.AccountType"
            >
              <el-option
                v-for="item in accountTypes"
                class="select-danger"
                :value="item.value"
                :label="item.title"
                :key="item.value"
              >
              </el-option>
            </el-select>
            <!-- 到 -->
            <p class="form-label" style="color:rgba(255, 255, 255, 0.6)">
              到
            </p>
            <el-select
              class="select-danger mb-4"
              style="width:100%"
              placeholder="选择账号类型"
              v-model="moneyForm.AccountType"
            >
              <el-option
                v-for="item in accountTypes"
                class="select-danger"
                :value="item.value"
                :label="item.title"
                :key="item.value"
              >
              </el-option>
            </el-select>
            <!-- 用途 -->
            <base-input
              label="用途"
              placeholder="请填写用途"
              v-model="moneyForm.AccessKey"
            >
            </base-input>
            <!-- 划转数量 -->
            <base-input
              label="划转数量"
              placeholder="请填写划转数量"
              v-model="moneyForm.SecretKey"
            >
            </base-input>
            <!-- 备注 -->
            <base-input
              label="备注"
              placeholder="请填写备注"
              v-model="moneyForm.SecretKey"
            >
            </base-input>
            <div class="text-center">
              <base-button
                type="primary"
                class="my-4"
                @click="transferMoney"
                :loading="createLoading"
                >确定</base-button
              >
            </div>
          </form>
        </template>
      </card>
    </modal>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
const MainColumns = [
  { label: "登录名", props: "LoginName" },
  { label: "UID", props: "UID" },
  { label: "账户类型", props: "AccountType" },
  { label: "账户余额", props: "Balance" },
  { label: "保底运营资金", props: "Balance1" },
  { label: "可转资金", props: "account5" },
  { label: "交易所借款金额", props: "account6" }
];

const SubColumns = [
  { label: "API Key", props: "AccessKey" },
  { label: "交易对", props: "Symbol" },
  { label: "账户余额", props: "Balance" },
  { label: "保底运营资金", props: "MinimumWorkingCapital" },
  { label: "可转资金", props: "RobotId" }
];

import { Modal } from "@/components";

import { accountTypes } from "../prePages/js/selectoptions";

export default {
  components: { Modal },
  data() {
    return {
      modal: {
        apiKeyVisible: false,
        accountAddVisible: false,
        moneyVisible: false
      },
      accountTypes,
      MainColumns,
      SubColumns,
      apiKeyform: {},
      accountForm: {},
      allSymbol: [],
      moneyForm: {},
      createLoading: false,
      tableData: []
    };
  },
  created() {
    this.getAccounts();
    this.getAllSymbol();
  },
  methods: {
    //获取所有交易对
    getAllSymbol() {
      this.$http.get("/Api/Symbol/GetList").then(res => {
        if (res.Code == 200) {
          this.allSymbol = res.Data;
        }
      });
    },

    getAccounts() {
      this.$http
        .get("/Api/StockExchangeAccount/GetAPIKeyList?policyType=2")
        .then(res => {
          if (res.Code == 200) {
            this.tableData = res.Data;
          }
        });
    },

    handleCommand(command) {
      this.modal[command] = true;
    },

    addAccount() {
      this.createLoading = true;
      this.$http
        .post("/Api/StockExchangeAccount/Add", {
          ...this.apiKeyform,
          PolicyType: 2
        })
        .then(res => {
          this.createLoading = false;
          if (res.Code == 200) {
            this.sMessage("success", "添加成功");
            this.getAccounts();
            this.modal.accountAddVisible = false;
          } else {
            this.sMessage("danger", res.Message);
          }
        });
    },
    //添加apikey
    addRobot() {},
    //划转资金
    transferMoney() {},
    // 封装showNotification
    sMessage(type, message) {
      this.$notify({
        type: type,
        message,
        timeout: 1800
      });
    }
  }
};
</script>

<style></style>