food/src/views/layout/components/main/admin/index.vue

131 lines
3.9 KiB
Vue

<template>
<div class="app-container">
<!-- 组合按钮 -->
<el-button-group>
<el-button type="primary" icon="el-icon-plus" @click="$router.replace('/admin/add')">添加</el-button>
<el-button type="danger" icon="el-icon-delete" @click="deleteAdmin(countSelIdArr($refs.myTable.selection))">删除
</el-button>
<el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
</el-button-group>
<!-- 用户select选项 -->
<el-button-group class="m-l-20">
<SelectionShopId v-model="form.shop_id" :allSel="true" />
</el-button-group>
<!-- 管理员列表 -->
<el-table class="m-t-20 w-100" ref="myTable"
:data="adminListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
<el-table-column align="center" type="selection" width="40">
</el-table-column>
<el-table-column align="center" prop="id" label="id" width="50">
</el-table-column>
<el-table-column prop="name" label="账户名" width="150" min-width="150">
</el-table-column>
<el-table-column prop="uname" label="昵称" min-width="150">
</el-table-column>
<el-table-column label="最后登录时间" width="140" min-width="120">
<template slot-scope="scope">
{{ scope.row.lasttime | parseTime('{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="注册时间" width="100" min-width="80">
<template slot-scope="scope">
{{ scope.row.addtime | parseTime('{y}-{m}-{d}') }}
</template>
</el-table-column>
<el-table-column prop="controler" label="操作" width="200" min-width="200">
<template slot-scope="scope">
<el-button-group>
<el-button type="warning" icon="el-icon-edit"
@click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
:total="adminListArr.length">
</el-pagination>
</div>
</template>
<script>
import { parseTime, countSelIdArr } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Admin',
data () {
return {
pageSize: 8, // 每页显示记录条数
currentPage: 1, // 当前页
form: {
shop_id: ''
}
}
},
components: {
SelectionShopId
},
computed: {
adminList () {
return this.$store.state.adminList
},
/**
* @description: 过滤掉 不对应客户的 飞机列表
* @return: 飞机列表
*/
adminListArr () {
if (this.form.shop_id !== '') {
return this.adminList.filter((item) => item.shop_id === this.form.shop_id)
} else {
return this.adminList
}
}
},
methods: {
countSelIdArr,
/**
* @description: 跳转到编辑页面
*/
toEditPage () {
const selId = this.countSelIdArr(this.$refs.myTable.selection)
switch (selId.length) {
case 0:
this.$message.error('请选择一条需要编辑的记录')
break
case 1:
this.$router.push('/admin/edit/' + selId['0'])
break
default:
this.$message.error('只能选择一条记录')
}
},
/**
* @description: 删除用户
*/
deleteAdmin (idArr) {
this.$store.dispatch('fetchDelAdmin', idArr)
}
},
watch: {
},
created () {
},
filters: {
parseTime,
countSelIdArr
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/theme.scss";
.el-tag {
i {
vertical-align: middle
}
}
</style>