<template>
|
<div>
|
<el-card class="box-card">
|
<el-button type="primary" @click="add()" icon="el-icon-circle-plus" class="add">注册新的管理员账号</el-button>
|
<!-- 新闻表格区域 -->
|
<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
|
<el-table-column type="index" label="序号" width="50">
|
<!-- <template slot-scope="scope">
|
<span>{{ (currentPage-1)*pageSize+scope.$index+1 }}</span>
|
</template> -->
|
</el-table-column>
|
<el-table-column prop="username" label="普通管理员账号" width=""> </el-table-column>
|
<el-table-column prop="id" label="id" width=""> </el-table-column>
|
<el-table-column label="操作" width="">
|
<template slot-scope="scope">
|
<!-- {{ scope.row.id }} -->
|
<div>
|
<el-button type="primary" @click="showEditDialog(scope.row.id)" icon="el-icon-edit"></el-button>
|
<el-button type="danger" @click="deleteAds(scope.row.id)" icon="el-icon-delete"></el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<!-- 修改账户的对话框 -->
|
<el-dialog title="修改普通管理员密码" :visible.sync="editDialogVisible" width="50%" @close="editClose">
|
<!-- rules表单验证规则，ref当前表单的验证对象 -->
|
<el-form ref="editFormRef" :model="editForm" label-width="80px" status-icon>
|
<el-form-item label="用户名:">
|
<el-input v-model="editForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable=""></el-input>
|
</el-form-item>
|
<el-form-item label="旧密码:">
|
<el-input v-model="editForm.oldPassword" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入旧密码"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码:">
|
<el-input v-model="editForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入新密码"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="cancel">取 消</el-button>
|
<el-button type="primary" @click="subEdit()">确 定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 添加管理员对话框 -->
|
<el-dialog title="添加普通管理员" :visible.sync="addDialogVisible" width="50%" @close="addClose">
|
<!-- rules表单验证规则，ref当前表单的验证对象 -->
|
<el-form ref="addFormRef" :model="addForm" label-width="80px" status-icon>
|
<el-form-item label="用户名:">
|
<el-input v-model="addForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable=""></el-input>
|
</el-form-item>
|
<el-form-item label="密码:">
|
<el-input v-model="addForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入密码"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="canceladd">取 消</el-button>
|
<el-button type="primary" @click="addEdit()">注 册</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getmain, editAccount, deleteAd, addAd } from '../../api/api'
|
export default {
|
data() {
|
return {
|
tableData: [], //普通管理员列表
|
editDialogVisible: false,
|
addDialogVisible: false,
|
editForm: { username: '', oldPassword: '', password: '' }, //修改表单对象
|
addForm: { username: '', password: '' } //添加管理对象
|
}
|
},
|
created() {
|
this.ready()
|
},
|
methods: {
|
//获取铺管列表
|
ready() {
|
getmain().then(res => {
|
// console.log(res);
|
if (res.code == 200) {
|
this.tableData = res.data
|
}
|
})
|
},
|
//展示编辑对话框
|
showEditDialog() {
|
this.editDialogVisible = true
|
},
|
editClose() {
|
this.editForm.username = ''
|
this.editForm.oldPassword = ''
|
this.editForm.password = ''
|
},
|
cancel() {
|
this.editForm.username = ''
|
this.editForm.oldPassword = ''
|
this.editForm.password = ''
|
this.editDialogVisible = false
|
},
|
//编辑确定事件
|
subEdit() {
|
const data = {
|
username: this.editForm.username,
|
oldPassword: this.editForm.oldPassword,
|
password: this.editForm.password
|
}
|
editAccount(data).then(res => {
|
// console.log(res);
|
if (res.code == 200) {
|
this.$message.success('账户修改成功')
|
this.editDialogVisible = false
|
this.ready()
|
} else {
|
this.$message.error('账户修改失败')
|
}
|
})
|
},
|
//删除普通管理员
|
async deleteAds(id) {
|
// console.log(id);
|
const res = await this.$confirm('此操作将永久删除该管理账号, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).catch(err => {
|
return err
|
})
|
//如果用户点击确定则返回confirm
|
//如果用户点击取消则返回cancel
|
console.log(res)
|
if (res !== 'confirm') {
|
return this.$message.info('已取消删除~')
|
} else {
|
// console.log(id);
|
const data = {
|
id: id
|
}
|
//参数data 要以对象的形式传入
|
deleteAd(data).then(res => {
|
// console.log('>>>'+res);
|
if (res.code == 200) {
|
this.$message.success('删除成功！')
|
this.ready()
|
} else {
|
return this.$message.error('删除失败！')
|
}
|
})
|
}
|
},
|
add() {
|
this.addDialogVisible = true
|
},
|
//注册取消清空
|
canceladd() {
|
this.addForm.username = ''
|
this.addForm.password = ''
|
this.addDialogVisible = false
|
},
|
addClose() {
|
this.addForm.username = ''
|
this.addForm.password = ''
|
},
|
//注册提交
|
addEdit() {
|
const data = {
|
username: this.addForm.username,
|
password: this.addForm.password
|
}
|
addAd(data).then(res => {
|
if (res.code == 200) {
|
this.$message.success('注册成功')
|
this.addDialogVisible = false
|
this.ready()
|
} else {
|
this.$message.error('注册失败')
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.add {
|
margin-bottom: 10px;
|
}
|
</style>
|
