mirror of
https://github.com/jumpserver/lina.git
synced 2025-08-17 14:27:18 +00:00
[fix]抽象Tables
This commit is contained in:
OrangeM21
parent
888f64e3ca
commit
8b06b6f3be
97
src/layout/components/ListTables/table.vue
Normal file
97
src/layout/components/ListTables/table.vue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="tabledata"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-if="hasSelect"
|
||||||
|
type="selection"
|
||||||
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
v-for="col of columns"
|
||||||
|
:key="col.props"
|
||||||
|
:label="col.label"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button v-if="col.nextroute" type="text" size="small" style="font-size:14px" @click="$router.push({name: col.nextroute, params: { id: scope.row.id }})">{{ scope.row[col.key] }}</el-button>
|
||||||
|
<span v-else>{{ scope.row[col.key] }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<slot name="action" />
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
style="text-align:center;margin-top:20px;"
|
||||||
|
:current-page="current_page"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="page_size"
|
||||||
|
:total="total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import ElDataTableColumn from '@/components/el-data-table/components/el-data-table-column'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
// ElDataTableColumn
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
getData: {
|
||||||
|
type: Function,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
hasSelect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabledata: [],
|
||||||
|
loading: false,
|
||||||
|
page_size: 10,
|
||||||
|
current_page: 1,
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.get(this.current_page, this.page_size, this.offset)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.offset = (this.current_page - 1) * val
|
||||||
|
this.page_size = val
|
||||||
|
this.get(this.current_page, val, this.offset)
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.offset = (val - 1) * this.page_size
|
||||||
|
this.current_page = val
|
||||||
|
this.get(val, this.page_size, this.offset)
|
||||||
|
},
|
||||||
|
get(draw, limit, offset) {
|
||||||
|
this.loading = true
|
||||||
|
this.getData({ draw, limit, offset }, { row: 1 }).then(response => {
|
||||||
|
console.log(response)
|
||||||
|
this.tabledata = response.results
|
||||||
|
this.total = response.count
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -3,6 +3,7 @@ export { default as NavHeader } from './NavHeader'
|
|||||||
export { default as AppMain } from './AppMain'
|
export { default as AppMain } from './AppMain'
|
||||||
export { default as Page } from './Page'
|
export { default as Page } from './Page'
|
||||||
export { default as ListTables } from './ListTables'
|
export { default as ListTables } from './ListTables'
|
||||||
|
export { default as Tables } from './ListTables/table.vue'
|
||||||
export { default as TagsView } from './TagsView'
|
export { default as TagsView } from './TagsView'
|
||||||
export { default as Footer } from './Footer'
|
export { default as Footer } from './Footer'
|
||||||
export { default as IBox } from './IBox'
|
export { default as IBox } from './IBox'
|
||||||
|
|||||||
@ -2,131 +2,50 @@
|
|||||||
<Page>
|
<Page>
|
||||||
<template slot="content">
|
<template slot="content">
|
||||||
<IBox :title="$t('users.usergrouplist')">
|
<IBox :title="$t('users.usergrouplist')">
|
||||||
<ListTables
|
<tables v-bind="tableConfig" />
|
||||||
:tablebutton="$t('users.createusergroup')"
|
|
||||||
tableroute="UserGroupEdit"
|
|
||||||
@SizeChange="handleSizeChange"
|
|
||||||
@CurrentChange="handleCurrentChange"
|
|
||||||
>
|
|
||||||
<el-table
|
|
||||||
v-loading="listLoading"
|
|
||||||
:data="tableData"
|
|
||||||
stripe
|
|
||||||
border
|
|
||||||
class="userTable"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="55"
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
:label="this.$t('usergroup.name')"
|
|
||||||
sortable
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
:label="this.$t('usergroup.user')"
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span>{{ scope.row.users_amount }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
:label="this.$t('usergroup.comment')"
|
|
||||||
align="center"
|
|
||||||
sortable
|
|
||||||
header-align="center"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span>{{ scope.row.comment }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
:label="this.$t('usergroup.action')"
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="primary"
|
|
||||||
@click="handleEdit(scope.$index, scope.row)"
|
|
||||||
>{{ $t('usergroup.update') }}</el-button>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="danger"
|
|
||||||
@click="handleDelete(scope.$index, scope.row)"
|
|
||||||
>{{ $t('usergroup.delete') }}</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</ListTables>
|
|
||||||
</IBox>
|
</IBox>
|
||||||
</template>
|
</template>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ListTables, IBox, Page } from '@/layout/components'
|
import { IBox, Page, Tables } from '@/layout/components'
|
||||||
import { getUserGroupList } from '@/api/user'
|
import { getUserGroupList } from '@/api/user'
|
||||||
import Tables from '@/layout/mixin/ListTables'
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
ListTables,
|
|
||||||
IBox,
|
IBox,
|
||||||
Page
|
Page,
|
||||||
|
Tables
|
||||||
},
|
},
|
||||||
mixins: [Tables],
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableData: [],
|
tableConfig: {
|
||||||
listLoading: true
|
getData: getUserGroupList,
|
||||||
|
hasSelect: true,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
prop: 'name',
|
||||||
|
label: this.$t('usergroup.name'),
|
||||||
|
key: 'name',
|
||||||
|
nextroute: 'UserDetail'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'user',
|
||||||
|
label: this.$t('usergroup.user'),
|
||||||
|
key: 'users_amount'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'comment',
|
||||||
|
label: this.$t('usergroup.comment'),
|
||||||
|
key: 'comment'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getUsers(this.current_page, this.page_size, this.offset)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleDetail: function(index, row) {
|
|
||||||
this.$router.push({ name: 'UserGroupDetail', params: { id: row.id }})
|
|
||||||
},
|
|
||||||
handleEdit: function(index, row) {
|
|
||||||
this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
|
|
||||||
},
|
|
||||||
handleDelete: function(index, row) {
|
|
||||||
this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
|
|
||||||
},
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.offset = (this.current_page - 1) * val
|
|
||||||
this.page_size = val
|
|
||||||
this.getUsers(this.current_page, val, this.offset)
|
|
||||||
},
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.offset = (val - 1) * this.page_size
|
|
||||||
this.current_page = val
|
|
||||||
this.getUsers(val, this.page_size, this.offset)
|
|
||||||
},
|
|
||||||
getUsers(draw, limit, offset) {
|
|
||||||
this.listLoading = true
|
|
||||||
getUserGroupList({ draw, limit, offset }).then(response => {
|
|
||||||
this.tableData = response.results
|
|
||||||
this.total = response.count
|
|
||||||
this.listLoading = false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
132
src/views/users/UserGroupList_Backup.vue
Normal file
132
src/views/users/UserGroupList_Backup.vue
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<Page>
|
||||||
|
<template slot="content">
|
||||||
|
<IBox :title="$t('users.usergrouplist')">
|
||||||
|
<ListTables
|
||||||
|
:tablebutton="$t('users.createusergroup')"
|
||||||
|
tableroute="UserGroupEdit"
|
||||||
|
@SizeChange="handleSizeChange"
|
||||||
|
@CurrentChange="handleCurrentChange"
|
||||||
|
>
|
||||||
|
<el-table
|
||||||
|
v-loading="listLoading"
|
||||||
|
:data="tableData"
|
||||||
|
stripe
|
||||||
|
border
|
||||||
|
class="userTable"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="55"
|
||||||
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
:label="this.$t('usergroup.name')"
|
||||||
|
sortable
|
||||||
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
:label="this.$t('usergroup.user')"
|
||||||
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.users_amount }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
:label="this.$t('usergroup.comment')"
|
||||||
|
align="center"
|
||||||
|
sortable
|
||||||
|
header-align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.comment }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
:label="this.$t('usergroup.action')"
|
||||||
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="handleEdit(scope.$index, scope.row)"
|
||||||
|
>{{ $t('usergroup.update') }}</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.$index, scope.row)"
|
||||||
|
>{{ $t('usergroup.delete') }}</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</ListTables>
|
||||||
|
</IBox>
|
||||||
|
</template>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ListTables, IBox, Page } from '@/layout/components'
|
||||||
|
import { getUserGroupList } from '@/api/user'
|
||||||
|
import Tables from '@/layout/mixin/ListTables'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ListTables,
|
||||||
|
IBox,
|
||||||
|
Page
|
||||||
|
},
|
||||||
|
mixins: [Tables],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [],
|
||||||
|
listLoading: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getUsers(this.current_page, this.page_size, this.offset)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDetail: function(index, row) {
|
||||||
|
this.$router.push({ name: 'UserGroupDetail', params: { id: row.id }})
|
||||||
|
},
|
||||||
|
handleEdit: function(index, row) {
|
||||||
|
this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
|
||||||
|
},
|
||||||
|
handleDelete: function(index, row) {
|
||||||
|
this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.offset = (this.current_page - 1) * val
|
||||||
|
this.page_size = val
|
||||||
|
this.getUsers(this.current_page, val, this.offset)
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.offset = (val - 1) * this.page_size
|
||||||
|
this.current_page = val
|
||||||
|
this.getUsers(val, this.page_size, this.offset)
|
||||||
|
},
|
||||||
|
getUsers(draw, limit, offset) {
|
||||||
|
this.listLoading = true
|
||||||
|
getUserGroupList({ draw, limit, offset, row: 1 }).then(response => {
|
||||||
|
this.tableData = response.results
|
||||||
|
this.total = response.count
|
||||||
|
this.listLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user