You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
405 lines
10 KiB
405 lines
10 KiB
4 years ago
|
<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>
|