去除现有的Jtable表格
This commit is contained in:
zer0Black
@@ -1,223 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<j-table
|
||||
:isShowPage="isShowPage"
|
||||
:pagination="pagination"
|
||||
:isCheck="isCheck"
|
||||
:isShowDropdown="isShowDropdown"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
bordered
|
||||
>
|
||||
<!-- slot-scope参数必须加 {} 包裹，否则只能拿到一个对象 -->
|
||||
<span slot="action" slot-scope="{text, record, index}">
|
||||
<!-- text: {{ text }}-->
|
||||
<!-- record:{{ record }}-->
|
||||
<!-- index:{{ index }}-->
|
||||
</span>
|
||||
|
||||
</j-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTable from '@/components/jero/JTable'
|
||||
|
||||
export default {
|
||||
name: 'Jtable',
|
||||
components: {
|
||||
JTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isShowPage: true, // 是否显示分页
|
||||
isCheck: false, // 是否多选
|
||||
isShowDropdown: true, // 是否开启下拉功能
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 100,
|
||||
pageSizeOptions: ['100', '200', '300'],
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0,
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
}
|
||||
},
|
||||
dataSource: [
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌1',
|
||||
age: 35,
|
||||
address: '西湖区湖底公园1号',
|
||||
address1: '西湖区湖底公园1号',
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦斌2',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园3号',
|
||||
address1: '西湖区湖底公园1号',
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦斌3',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园5号',
|
||||
address1: '西湖区湖底公园1号',
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '胡彦斌4',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园7号',
|
||||
address1: '西湖区湖底公园1号',
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '胡彦斌5',
|
||||
age: 38,
|
||||
address: '西湖区湖底公园9号',
|
||||
address1: '西湖区湖底公园1号',
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '胡彦斌6',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园11号',
|
||||
address1: '西湖区湖底公园1号',
|
||||
address2: '西湖区湖底公园1号',
|
||||
address3: '西湖区湖底公园1号',
|
||||
address4: '西湖区湖底公园1号',
|
||||
address5: '西湖区湖底公园1号'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
// title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 1,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '姓名',
|
||||
// 冻结列头的参数
|
||||
// 1为左侧冻结
|
||||
// 2为右侧冻结
|
||||
// 3为不冻结或解冻
|
||||
fixedValue: 3
|
||||
}
|
||||
// fixed: 'right'
|
||||
|
||||
},
|
||||
{
|
||||
dataIndex: 'age',
|
||||
key: 2,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '年龄',
|
||||
fixedValue: 3
|
||||
},
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
dataIndex: 'address',
|
||||
key: 3,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址',
|
||||
fixedValue: 3
|
||||
},
|
||||
sorter: (a, b) => a.address.length - b.address.length
|
||||
},
|
||||
{
|
||||
// title: '住址1',
|
||||
dataIndex: 'address1',
|
||||
key: 4,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址1',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址2',
|
||||
dataIndex: 'address2',
|
||||
key: 5,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址2',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址3',
|
||||
dataIndex: 'address3',
|
||||
key: 6,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址3',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址4',
|
||||
dataIndex: 'address4',
|
||||
key: 7,
|
||||
width: 200,
|
||||
slots: {
|
||||
title: '住址4',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
// title: '住址5',
|
||||
dataIndex: 'address5',
|
||||
key: 8,
|
||||
width: 500,
|
||||
slots: {
|
||||
title: '住址5',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'address6',
|
||||
key: 9,
|
||||
width: 500,
|
||||
slots: {
|
||||
// title: '操作',
|
||||
fixedValue: 2
|
||||
},
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
watch: {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,235 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="角色ID">
|
||||
<a-input placeholder="请输入"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="状态">
|
||||
<a-select placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">全部</a-select-option>
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<j-table
|
||||
ref="jTable"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<div
|
||||
slot="expandedRowRender"
|
||||
slot-scope="{record}"
|
||||
style="margin: 0">
|
||||
<a-row
|
||||
:gutter="24"
|
||||
:style="{ marginBottom: '12px' }">
|
||||
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
|
||||
<a-col :span="4">
|
||||
<span>{{ role.permissionName }}：</span>
|
||||
</a-col>
|
||||
<a-col :span="20" v-if="role.actionEntitySet.length > 0">
|
||||
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="20" v-else>-</a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<span slot="action" slot-scope="{text, record}">
|
||||
<a @click="$refs.modal.edit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">禁用</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</j-table>
|
||||
|
||||
<role-modal ref="modal" @ok="handleOk"></role-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JTable from '@/components/jero/JTable'
|
||||
import RoleModal from './modules/RoleModal'
|
||||
import { getAction } from '@api/manage'
|
||||
import { filterObj } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
name: 'TableList',
|
||||
components: {
|
||||
JTable,
|
||||
RoleModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
mdl: {},
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
slots: {
|
||||
title: '唯一识别码',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
slots: {
|
||||
title: '角色名称',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
slots: {
|
||||
title: '状态',
|
||||
fixedValue: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
slots: {
|
||||
title: '创建时间',
|
||||
fixedValue: 3
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
url: {
|
||||
list: '/mock/api/role'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData (arg) {
|
||||
if (!this.url.list) {
|
||||
this.$message.error('请设置url.list属性!')
|
||||
return
|
||||
}
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.$refs.jTable.ispagination.current = 1
|
||||
}
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
var params = this.getQueryParams()// 查询条件
|
||||
this.loading = true
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
// update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
this.dataSource = res.result.data || res.result
|
||||
if (res.result.total) {
|
||||
this.$refs.jTable.ispagination.total = res.result.total
|
||||
} else {
|
||||
this.$refs.jTable.ispagination.total = 0
|
||||
}
|
||||
// update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
|
||||
if (res.status === 510) {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
// return this.$http.get('/mock/api/role', {
|
||||
// params: Object.assign(parameter, this.queryParam)
|
||||
// }).then(res => {
|
||||
// return res.result
|
||||
// })
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permission.actionsOptions = permission.actionEntitySet.map(action => {
|
||||
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
||||
})
|
||||
})
|
||||
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
// 新增/修改 成功时，重载列表
|
||||
this.$refs.jTable.refresh()
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
getQueryParams () {
|
||||
// 获取查询条件
|
||||
const sqp = {}
|
||||
if (this.superQueryParams) {
|
||||
sqp.superQueryParams = encodeURI(this.superQueryParams)
|
||||
sqp.superQueryMatchType = this.superQueryMatchType
|
||||
}
|
||||
var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
||||
param.field = this.getQueryField()
|
||||
param.pageNo = this.$refs.jTable.ispagination.current
|
||||
param.pageSize = this.$refs.jTable.ispagination.pageSize
|
||||
return filterObj(param)
|
||||
},
|
||||
getQueryField () {
|
||||
var str = 'id,'
|
||||
this.columns.forEach(function (value) {
|
||||
str += ',' + value.dataIndex
|
||||
})
|
||||
return str
|
||||
},
|
||||
searchQuery () {
|
||||
this.loadData(1)
|
||||
},
|
||||
searchReset () {
|
||||
this.queryParam = {}
|
||||
this.loadData(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user