lizhixin
4 years ago
4 changed files with 419 additions and 1 deletions
@ -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> |
|||
Loading…
Reference in new issue