163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<data-table :columns="data.columns" :data="data.data" :pagination="data.pagination" size="large" scroll-x="1200">
|
||
|
|
<template #tableTitle>
|
||
|
|
<n-button type="primary">
|
||
|
|
新建
|
||
|
|
</n-button>
|
||
|
|
<n-button type="primary">
|
||
|
|
删除
|
||
|
|
</n-button>
|
||
|
|
</template>
|
||
|
|
</data-table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import dataTable from '@/components/DataTable/index.vue'
|
||
|
|
import TableAction from '@/components/DataTable/tools/Action.vue'
|
||
|
|
import TableImage from '@/components/DataTable/tools/Image.vue'
|
||
|
|
import { getUserList } from '@/api/system/index.js'
|
||
|
|
import { h, onMounted } from 'vue'
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
export default {
|
||
|
|
name: 'MenuPage',
|
||
|
|
components: { dataTable },
|
||
|
|
setup() {
|
||
|
|
const data = reactive({
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
title: '用户编号',
|
||
|
|
key: 'code',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '头像',
|
||
|
|
key: 'avatar',
|
||
|
|
align: 'center',
|
||
|
|
render(row) {
|
||
|
|
return h(TableImage, {
|
||
|
|
images: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
src: row.avatar
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '用户账号',
|
||
|
|
key: 'username',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '用户姓名',
|
||
|
|
key: 'realname',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '用户类型',
|
||
|
|
key: 'type',
|
||
|
|
align: 'center',
|
||
|
|
width: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '角色',
|
||
|
|
key: 'roles',
|
||
|
|
align: 'center'
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '状态',
|
||
|
|
key: 'status',
|
||
|
|
align: 'center',
|
||
|
|
width: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '部门',
|
||
|
|
key: 'deptName',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '创建时间',
|
||
|
|
key: 'createTime',
|
||
|
|
align: 'center',
|
||
|
|
width: 160
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '更新时间',
|
||
|
|
key: 'updateTime',
|
||
|
|
align: 'center',
|
||
|
|
width: 160
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
align: 'center',
|
||
|
|
width: 150,
|
||
|
|
fixed: 'right',
|
||
|
|
render(row) {
|
||
|
|
return h(TableAction, {
|
||
|
|
actions: [
|
||
|
|
{
|
||
|
|
label: '添加',
|
||
|
|
type: 'button',
|
||
|
|
props: {
|
||
|
|
type: 'primary',
|
||
|
|
onClick: play.bind(null, row)
|
||
|
|
},
|
||
|
|
auth: 'basic_list'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '修改',
|
||
|
|
auth: 'basic_list'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '删除',
|
||
|
|
type: 'popconfirm',
|
||
|
|
auth: 'basic_list'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
align: 'center'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
data: [],
|
||
|
|
pagination: {
|
||
|
|
pageSize: 10
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function play(row) {
|
||
|
|
console.log(row)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description: 获取用户数据
|
||
|
|
* @return {*}
|
||
|
|
*/
|
||
|
|
async function fetchList() {
|
||
|
|
const params = {
|
||
|
|
page: 1,
|
||
|
|
limit: 10
|
||
|
|
}
|
||
|
|
const res = await getUserList(params)
|
||
|
|
data.data = res.data
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
fetchList()
|
||
|
|
})
|
||
|
|
|
||
|
|
return { data }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.n-button+.n-button{
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
</style>
|