<template>
|
<page-header-wrapper
|
:breadcrumb="false"
|
>
|
<a-card :bordered="false">
|
<!-- <div class="table-page-search-wrapper" style="background-color: #fff;">
|
<a-form layout="inline">
|
<a-row :gutter="48">
|
<a-col :md="8" :sm="24">
|
<a-form-item label="角色名称">
|
<a-input v-model="queryParam.name" placeholder="请输入角色名称"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="8" :sm="24">
|
<a-form-item>
|
<a-button type="primary" @click="onSearch">查询</a-button>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div> -->
|
<div>
|
<a-button style="margin-bottom: 10px;" type="primary" @click="createaccount">新建账号</a-button>
|
</div>
|
<a-table
|
rowKey="id"
|
ref="table"
|
size="default"
|
:pagination="pagination"
|
:columns="columns"
|
:data-source="data"
|
:loading="loading"
|
>
|
<span slot="action" slot-scope="text, record">
|
<template>
|
<a @click="handleEdit(record)">编辑</a>
|
<a-divider type="vertical" />
|
<a-popconfirm
|
title="是否确认删除该账号?"
|
ok-text="是"
|
cancel-text="否"
|
@confirm="handleDel(record)"
|
>
|
<a>删除</a>
|
</a-popconfirm>
|
</template>
|
</span>
|
</a-table>
|
|
<EditAccountForm
|
ref="editaccount"
|
:visible="accountVisible"
|
:model="editId"
|
:loading="confirmLoading"
|
@cancel="accountCancel"
|
@ok="acountOk"
|
/>
|
|
</a-card>
|
|
</page-header-wrapper>
|
</template>
|
|
<script>
|
import { ref } from 'vue'
|
import EditAccountForm from './modules/editaccountForm'
|
import { GetSubAccountList, DeleteSubAccount, AddUser, UpdateAccount } from '@/api/accountapi'
|
const columns = [
|
{
|
title: '账号名称',
|
dataIndex: 'userName'
|
},
|
{
|
title: '昵称',
|
dataIndex: 'nickName'
|
},
|
{
|
title: '手机号',
|
dataIndex: 'mobile'
|
},
|
{
|
title: '修改时间',
|
dataIndex: 'modifyTime'
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
scopedSlots: { customRender: 'action' }
|
}
|
]
|
export default {
|
name: 'Accountmanage',
|
components: {
|
EditAccountForm
|
},
|
data () {
|
return {
|
columns,
|
loading: false,
|
confirmLoading: false,
|
accountVisible: false,
|
editId: '',
|
data: [],
|
pagination: {
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizeOptions: ['10', '20'],
|
onChange: this.onPageChange,
|
onShowSizeChange: this.onPageChange
|
}
|
}
|
},
|
setup () {
|
|
},
|
created () {
|
this.onSearch()
|
},
|
methods: {
|
accountCancel () {
|
this.editId = ''
|
this.accountVisible = false
|
},
|
acountOk () {
|
const form = this.$refs.editaccount.form
|
const data = this.$refs.editaccount.model
|
|
form.validateFields((errors, values) => {
|
if (!errors) {
|
this.confirmLoading = true
|
const parameter = {
|
UserName: values.userName,
|
Pwd: values.pwd,
|
RoleId: values.roleId,
|
Mobile: values.mobile,
|
NickName: values.nickName,
|
Id: this.editId
|
}
|
if (this.editId != '') { // 修改
|
UpdateAccount(parameter).then(res => {
|
if (res.result) {
|
this.$message.success(`修改成功！`)
|
this.accountCancel()
|
this.onSearch()
|
}
|
}).finally(() => {
|
this.confirmLoading = false
|
})
|
} else {
|
// 创建
|
AddUser(parameter).then(res => {
|
if (res.result) {
|
this.$message.success(`创建成功！`)
|
this.accountCancel()
|
this.onSearch()
|
}
|
}).finally(() => {
|
this.confirmLoading = false
|
})
|
}
|
}
|
})
|
},
|
onPageChange (current, size) {
|
this.pagination.current = current
|
this.pagination.pageSize = size
|
this.onSearch()
|
},
|
onSearch () {
|
this.loading = true
|
var parameter = {
|
PageNo: this.pagination.current,
|
PageSize: this.pagination.pageSize
|
}
|
GetSubAccountList(parameter).then(res => {
|
this.data = res.result.data
|
this.pagination.total = res.result.totalCount
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
createaccount () {
|
this.editId = ''
|
this.accountVisible = true
|
},
|
// 删除
|
handleDel (record) {
|
const parameter = {
|
Id: record.id
|
}
|
DeleteSubAccount(parameter).then(res => {
|
if (res.result) {
|
this.$message.success(`删除成功！`)
|
this.onSearch()
|
}
|
})
|
},
|
// 编辑
|
handleEdit (record) {
|
this.editId = record.id
|
this.accountVisible = true
|
}
|
|
}
|
}
|
</script>
|
