动量2账户模块

src/layout/dashboard/DashboardLayout.vue

@@ -44,7 +44,7 @@
             <span>动量趋势2.0</span>
           </template>
           <!-- <el-menu-item index="2-1" @click="to('/')">概况</el-menu-item> -->
-          <el-menu-item index="3-2" @click="to('/account/2')">
+          <el-menu-item index="3-2" @click="to('/accountSec')">
             账号管理</el-menu-item
           >
           <el-menu-item index="3-3" @click="to('/robotsec')"

src/main.js

@@ -34,6 +34,9 @@ import {
   Menu,
   MenuItem,
   MenuItemGroup,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
   Submenu
 } from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
@@ -57,6 +60,9 @@ Vue.use(Menu);
 Vue.use(MenuItem);
 Vue.use(MenuItemGroup);
 Vue.use(Submenu);
+Vue.use(Dropdown);
+Vue.use(DropdownItem);
+Vue.use(DropdownMenu);
 /* eslint-disable no-new */
 new Vue({
   router,

src/pages/RobotSec/Account.vue

@@ -0,0 +1,404 @@
+<template>
+  <div>
+    <base-button @click="modal.accountAddVisible = true"> 添加用户</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.subTable"
+              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"
+      >
+      </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.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>添加API Key</small>
+          </div>
+          <form role="form">
+            <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>
+            <!-- 账户类型 -->
+            <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="createRobot"
+                :loading="createLoading"
+                >添加</base-button
+              >
+            </div>
+          </form>
+        </template>
+      </card>
+    </modal>
+
+    <!-- 添加账户 -->
+    <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="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="createRobot"
+                :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="createRobot"
+                :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: "account" },
+  { label: "UID", props: "account1" },
+  { label: "账户类型", props: "account2" },
+  { label: "账户余额", props: "account3" },
+  { label: "保底运营资金", props: "account4" },
+  { label: "可转资金", props: "account5" }
+];
+
+const SubColumns = [
+  { label: "API Key", props: "Apikey1" },
+  { label: "交易对", props: "Apikey2" },
+  { label: "保底运营资金", props: "Apikey3" },
+  { label: "机器人ID", props: "Apikey4" }
+];
+
+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: {},
+      moneyForm: {},
+      tableData: [
+        { account: "1", subTable: [{ Apikey1: "01" }] },
+        { account: "2", subTable: [{ Apikey1: "2" }] },
+        { account: "3", subTable: [{ Apikey1: "3" }] }
+      ]
+    };
+  },
+  methods: {
+    handleCommand(command) {
+      this.modal[command] = true;
+    }
+  }
+};
+</script>
+
+<style>
+.el-table th {
+  color: #a2a2a3; /* 字体颜色 */
+  font-size: 16px;
+  background-color: transparent !important; /* 背景透明 */
+  border: 0 !important;
+  height: 22px;
+  line-height: 22px;
+}
+.el-table tr,
+.el-table td {
+  color: #a2a2a3;
+  font-size: 12px;
+  background-color: transparent !important; /* 背景透明 */
+  border: 0 !important;
+  height: 22px;
+  line-height: 22px;
+}
+
+.el-table,
+.el-table__expanded-cell {
+  background-color: transparent !important;
+}
+.el-table th,
+.el-table tr,
+.el-table td {
+  background-color: transparent !important;
+}
+
+/*去掉表格单元格边框*/
+.customer-no-border-table th {
+  border: none;
+}
+.customer-no-border-table td,
+.customer-no-border-table th.is-leaf {
+  border: none;
+}
+/*表格最外边框*/
+.customer-no-border-table .el-table--border,
+.el-table--group {
+  border: none;
+}
+/*头部边框*/
+.customer-no-border-table thead tr th.is-leaf {
+  border: 0px solid #ebeef5;
+  border-right: none;
+}
+.customer-no-border-table thead tr th:nth-last-of-type(2) {
+  border-right: 0px solid #ebeef5;
+}
+/*表格最外层边框-底部边框*/
+.customer-no-border-table .el-table--border::after,
+.customer-no-border-table .el-table--group::after {
+  width: 0;
+}
+.customer-no-border-table::before {
+  width: 0;
+}
+.customer-no-border-table .el-table__fixed-right::before,
+.el-table__fixed::before {
+  width: 0;
+}
+.customer-no-border-table .el-table__header tr th {
+  background: #fff;
+  padding: 3px;
+  font-weight: 550;
+  height: 36px;
+  border: 0px;
+  font-size: 15px;
+}
+
+.el-table__expanded-cell[class*="cell"] {
+  padding: 0 20px;
+}
+</style>

src/router/routes.js

@@ -18,6 +18,7 @@ const ReCheck = () => import("@/pages/ReCheck");
 const Capital = () => import("@/pages/Profit");
 const Prev = () => import("@/pages/Prev");
 const RobotSec = () => import("@/pages/RobotSec");
+const AccountSec = () => import("@/pages/RobotSec/Account");
 const routes = [
   {
     path: "/",
@@ -71,7 +72,14 @@ const routes = [
         name: "robotsec",
         meta: { auth: true },
         component: RobotSec
+      },
+      {
+        path: "accountSec",
+        name: "accountSec",
+        meta: { auth: true },
+        component: AccountSec
       }
+
       // {
       //   path: "profile",
       //   name: "profile",