mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-05 18:15:28 +08:00
JeecgBoot 2.4 微服务正式版本发布，基于SpringBoot的低代码平台
This commit is contained in:
zhangdaiscott
110
ant-design-vue-jeecg/src/views/examples/list/CardList.vue
Normal file
110
ant-design-vue-jeecg/src/views/examples/list/CardList.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="card-list" ref="content">
|
||||
<a-list
|
||||
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
|
||||
:dataSource="dataSource"
|
||||
>
|
||||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||||
<template v-if="item === null">
|
||||
<a-button class="new-btn" type="dashed">
|
||||
<a-icon type="plus"/>
|
||||
新增产品
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-card :hoverable="true">
|
||||
<a-card-meta>
|
||||
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
|
||||
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
|
||||
<div class="meta-content" slot="description">{{ item.content }}</div>
|
||||
</a-card-meta>
|
||||
<template class="ant-card-actions" slot="actions">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const dataSource = []
|
||||
dataSource.push(null)
|
||||
for (let i = 0; i < 11; i++) {
|
||||
dataSource.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "CardList",
|
||||
data () {
|
||||
return {
|
||||
description: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
|
||||
linkList: [
|
||||
{ icon: 'rocket', href: '#', title: '快速开始' },
|
||||
{ icon: 'info-circle-o', href: '#', title: '产品简介' },
|
||||
{ icon: 'file-text', href: '#', title: '产品文档' }
|
||||
],
|
||||
extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.ant-card-actions {
|
||||
background: #f7f9fa;
|
||||
li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
width: 50%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
.meta-content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
height: 64px;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
272
ant-design-vue-jeecg/src/views/examples/list/PermissionList.vue
Normal file
272
ant-design-vue-jeecg/src/views/examples/list/PermissionList.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<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">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table :columns="columns" :data="loadData">
|
||||
|
||||
<span slot="actions" slot-scope="text, record">
|
||||
<a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
|
||||
</span>
|
||||
|
||||
<span slot="status" slot-scope="text">
|
||||
{{ text | statusFilter }}
|
||||
</span>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(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>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="权限名称"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="permission_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="赋予权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
mode="multiple"
|
||||
v-model="mdl.actions"
|
||||
:allowClear="true"
|
||||
>
|
||||
<a-select-option v-for="(action, index) in permissionList" :key="index" :value="action.value">{{ action.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '权限名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '可操作权限',
|
||||
dataIndex: 'actions',
|
||||
scopedSlots: { customRender: 'actions' },
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 向后端拉取可以用的操作列表
|
||||
permissionList: null,
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/permission', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
let result = res.result
|
||||
result.data.map(permission => {
|
||||
permission.actionList = JSON.parse(permission.actionData)
|
||||
return permission
|
||||
})
|
||||
return result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: '正常',
|
||||
2: '禁用'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissionList()
|
||||
},
|
||||
methods: {
|
||||
loadPermissionList () {
|
||||
// permissionList
|
||||
new Promise((resolve => {
|
||||
const data = [
|
||||
{ label: '新增', value: 'add', defaultChecked: false },
|
||||
{ label: '查询', value: 'get', defaultChecked: false },
|
||||
{ label: '修改', value: 'update', defaultChecked: false },
|
||||
{ label: '列表', value: 'query', defaultChecked: false },
|
||||
{ label: '删除', value: 'delete', defaultChecked: false },
|
||||
{ label: '导入', value: 'import', defaultChecked: false },
|
||||
{ label: '导出', value: 'export', defaultChecked: false }
|
||||
]
|
||||
setTimeout(resolve(data), 1500)
|
||||
})).then(res => {
|
||||
this.permissionList = res
|
||||
})
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
182
ant-design-vue-jeecg/src/views/examples/list/RoleList.vue
Normal file
182
ant-design-vue-jeecg/src/views/examples/list/RoleList.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<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">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<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>
|
||||
</s-table>
|
||||
|
||||
<role-modal ref="modal" @ok="handleOk"></role-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import RoleModal from './modules/RoleModal'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable,
|
||||
RoleModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/role', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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.table.refresh()
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
ant-design-vue-jeecg/src/views/examples/list/StandardList.vue
Normal file
164
ant-design-vue-jeecg/src/views/examples/list/StandardList.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="我的待办" content="8个任务" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="本周完成任务数" content="24个"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<a-card
|
||||
style="margin-top: 24px"
|
||||
:bordered="false"
|
||||
title="标准列表">
|
||||
|
||||
<div slot="extra">
|
||||
<a-radio-group>
|
||||
<a-radio-button>全部</a-radio-button>
|
||||
<a-radio-button>进行中</a-radio-button>
|
||||
<a-radio-button>等待中</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search style="margin-left: 16px; width: 272px;" />
|
||||
</div>
|
||||
|
||||
<div class="operate">
|
||||
<a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>
|
||||
</div>
|
||||
|
||||
<a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
|
||||
<a-list-item :key="index" v-for="(item, index) in data">
|
||||
<a-list-item-meta :description="item.description">
|
||||
<a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
|
||||
<a slot="title">{{ item.title }}</a>
|
||||
</a-list-item-meta>
|
||||
<div slot="actions">
|
||||
<a>编辑</a>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item><a>编辑</a></a-menu-item>
|
||||
<a-menu-item><a>删除</a></a-menu-item>
|
||||
</a-menu>
|
||||
<a>更多<a-icon type="down"/></a>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="list-content-item">
|
||||
<span>Owner</span>
|
||||
<p>{{ item.owner }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<span>开始时间</span>
|
||||
<p>{{ item.startAt }}</p>
|
||||
</div>
|
||||
<div class="list-content-item">
|
||||
<a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
|
||||
</div>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
|
||||
const data = []
|
||||
data.push({
|
||||
title: 'Alipay',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
description: '那是一种内在的东西， 他们到达不了，也无法触及的',
|
||||
owner: '付晓晓',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 90
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Angular',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
owner: '曲丽丽',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 54
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
|
||||
description: '生命就像一盒巧克力，结果往往出人意料',
|
||||
owner: '林东东',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 66
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Ant Design Pro',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
owner: '周星星',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
value: 30
|
||||
}
|
||||
})
|
||||
data.push({
|
||||
title: 'Bootstrap',
|
||||
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
owner: '吴加好',
|
||||
startAt: '2018-07-26 22:44',
|
||||
progress: {
|
||||
status: 'exception',
|
||||
value: 100
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
name: "StandardList",
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-avatar-lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.list-content-item {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
span {
|
||||
line-height: 20px;
|
||||
}
|
||||
p {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,270 @@
|
||||
<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="规则编号">
|
||||
<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>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker style="width: 100%" 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">
|
||||
<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>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => $router.push({name: 'anime-add'})">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
|
||||
<div :key="index">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{ text }}</template>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="action" slot-scope="text, record, index">
|
||||
<div class="editable-row-operations">
|
||||
<span v-if="record.editable">
|
||||
<a @click="() => save(record)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
|
||||
<a>取消</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a class="edit" @click="() => edit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="delete" @click="() => del(record)">删除</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</s-table>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
scopedSlots: { customRender: 'description' },
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'callNo' },
|
||||
// customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: '100px',
|
||||
needTotal: true,
|
||||
scopedSlots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
scopedSlots: { customRender: 'updatedAt' },
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '120px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return this.$http.get('/mock/api/service', {
|
||||
params: Object.assign(parameter, this.queryParam)
|
||||
}).then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleChange (value, key, column) {
|
||||
console.log(value, key, column)
|
||||
},
|
||||
edit (row) {
|
||||
row.editable = true
|
||||
// row = Object.assign({}, row)
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
// eslint-disable-next-line
|
||||
del (row) {
|
||||
this.$confirm({
|
||||
title: '警告',
|
||||
content: '真的要删除吗?',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
// 在这里调用删除接口
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
|
||||
}).catch(() => console.log('Oops errors!'));
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
save (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
cancel (row) {
|
||||
delete row.editable
|
||||
this.$refs.table.updateEdit()
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.fold {
|
||||
width: calc(100% - 216px);
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.fold {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
337
ant-design-vue-jeecg/src/views/examples/list/TableList.vue
Normal file
337
ant-design-vue-jeecg/src/views/examples/list/TableList.vue
Normal file
@ -0,0 +1,337 @@
|
||||
<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="规则编号">
|
||||
<a-input v-model="queryParam.id" placeholder=""/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.status" 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>
|
||||
<template v-if="advanced">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="调用次数">
|
||||
<a-input-number v-model="queryParam.callNo" style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="更新日期">
|
||||
<a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="使用状态">
|
||||
<a-select v-model="queryParam.useStatus" 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">
|
||||
<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>
|
||||
</template>
|
||||
<a-col :md="!advanced && 8 || 24" :sm="24">
|
||||
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
|
||||
<a-button type="primary">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'"/>
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="() => this.handleModalVisible(true)">新建</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
|
||||
<!-- lock | unlock -->
|
||||
<a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px">
|
||||
批量操作 <a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showAlertInfo="true"
|
||||
@onSelect="onChange"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(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>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="规则编号"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="规则编号" v-model="mdl.no" id="no" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="服务调用次数"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input-number :min="1" id="callNo" v-model="mdl.callNo" style="width: 100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select defaultValue="1" v-model="mdl.status">
|
||||
<a-select-option value="1">Option 1</a-select-option>
|
||||
<a-select-option value="2">Option 2</a-select-option>
|
||||
<a-select-option value="3">Option 3</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
help="请填写一段描述"
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.description" placeholder="..." id="description"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="更新时间"
|
||||
hasFeedback
|
||||
validateStatus="error"
|
||||
>
|
||||
<a-date-picker
|
||||
style="width: 100%"
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="Select Time"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
||||
<!---->
|
||||
<a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
|
||||
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="描述" fieldDecoratorId="description" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}">
|
||||
<a-input placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import ATextarea from "ant-design-vue/es/input/TextArea"
|
||||
import AInput from "ant-design-vue/es/input/Input"
|
||||
import moment from "moment"
|
||||
import axios from 'axios';
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
AInput,
|
||||
ATextarea,
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visibleCreateModal:false,
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 12 },
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: true,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '规则编号',
|
||||
dataIndex: 'no'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description'
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
needTotal: true,
|
||||
customRender: (text) => text + ' 次'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
needTotal: true
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updatedAt',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
table: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getServiceList(Object.assign(parameter, this.queryParam))
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getRoleList({ t: new Date()})
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
console.log(this.mdl)
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
|
||||
//添加逻辑
|
||||
handleModalVisible(isVisible) {
|
||||
this.visibleCreateModal = isVisible;
|
||||
},
|
||||
handleCreateModalOk() {
|
||||
this.createForm.validateFields((err, fieldsValue) => {
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
const description = this.createForm.getFieldValue('description');
|
||||
axios.post('/saveRule', {
|
||||
desc: description,
|
||||
}).then((res) => {
|
||||
this.createForm.resetFields();
|
||||
this.visibleCreateModal = false;
|
||||
this.loadRuleData();
|
||||
});
|
||||
});
|
||||
},
|
||||
handleCreateModalCancel() {
|
||||
this.visibleCreateModal = false;
|
||||
},
|
||||
|
||||
onChange (row) {
|
||||
this.selectedRowKeys = row.selectedRowKeys
|
||||
this.selectedRows = row.selectedRows
|
||||
|
||||
console.log(this.$refs.table)
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
264
ant-design-vue-jeecg/src/views/examples/list/UserList.vue
Normal file
264
ant-design-vue-jeecg/src/views/examples/list/UserList.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<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">查询</a-button>
|
||||
<a-button style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
size="default"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
>
|
||||
<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 :lg="4" :md="24">
|
||||
<span>{{ role.permissionName }}：</span>
|
||||
</a-col>
|
||||
<a-col :lg="20" :md="24" 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="handleEdit(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>
|
||||
</s-table>
|
||||
|
||||
<a-modal
|
||||
title="操作"
|
||||
style="top: 20px;"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<a-form :autoFormCreate="(form)=>{this.form = form}">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="唯一识别码" v-model="mdl.id" id="no" disabled="disabled" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<a-input placeholder="起一个名字" v-model="mdl.name" id="role_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<a-select v-model="mdl.status">
|
||||
<a-select-option value="1">正常</a-select-option>
|
||||
<a-select-option value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
>
|
||||
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id="describe"/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in mdl.permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.permissionName }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox-group :options="permission.actionsOptions"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import STable from '@/components/table/'
|
||||
import { getRoleList, getServiceList } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "TableList",
|
||||
components: {
|
||||
STable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
||||
|
||||
visible: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
form: null,
|
||||
mdl: {},
|
||||
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '唯一识别码',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getRoleList(parameter)
|
||||
.then(res => {
|
||||
return res.result
|
||||
})
|
||||
},
|
||||
|
||||
selectedRowKeys: [],
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getServiceList().then(res => {
|
||||
console.log('getServiceList.call()', res)
|
||||
})
|
||||
|
||||
getRoleList().then(res => {
|
||||
console.log('getRoleList.call()', res)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
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 }
|
||||
})
|
||||
})
|
||||
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
|
||||
},
|
||||
onChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/*
|
||||
'selectedRows': function (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce( (sum, val) => {
|
||||
return sum + val[item.dataIndex]
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="操作"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="唯一识别码"
|
||||
hasFeedback
|
||||
>
|
||||
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="角色名称"
|
||||
hasFeedback >
|
||||
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="状态"
|
||||
hasFeedback >
|
||||
<a-select v-decorator="[ 'status', {rules: []} ]">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="描述"
|
||||
hasFeedback
|
||||
>
|
||||
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider/>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="拥有权限"
|
||||
hasFeedback
|
||||
>
|
||||
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
||||
<a-col :span="4">
|
||||
{{ permission.name }}：
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<a-checkbox
|
||||
v-if="permission.actionsOptions.length > 0"
|
||||
:indeterminate="permission.indeterminate"
|
||||
:checked="permission.checkedAll"
|
||||
@change="onChangeCheckAll($event, permission)">
|
||||
全选
|
||||
</a-checkbox>
|
||||
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPermissions } from '@/api/manage'
|
||||
import { actionToObject } from '@/utils/permissions'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
name: "RoleModal",
|
||||
data () {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
mdl: {},
|
||||
|
||||
form: this.$form.createForm(this),
|
||||
permissions: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPermissions()
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.edit({ id: 0 })
|
||||
},
|
||||
edit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
this.visible = true
|
||||
|
||||
// 有权限表，处理勾选
|
||||
if (this.mdl.permissions && this.permissions) {
|
||||
// 先处理要勾选的权限结构
|
||||
const permissionsAction = {}
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
||||
})
|
||||
// 把权限表遍历一遍，设定要勾选的权限 action
|
||||
this.permissions.forEach(permission => {
|
||||
permission.selected = permissionsAction[permission.id]
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
||||
})
|
||||
console.log('this.mdl', this.mdl)
|
||||
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.visible = false
|
||||
},
|
||||
handleOk () {
|
||||
const _this = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
// 验证表单没错误
|
||||
if (!err) {
|
||||
console.log('form values', values)
|
||||
|
||||
_this.confirmLoading = true
|
||||
// 模拟后端请求 2000 毫秒延迟
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => resolve(), 2000)
|
||||
}).then(() => {
|
||||
// Do something
|
||||
_this.$message.success('保存成功')
|
||||
_this.$emit('ok')
|
||||
}).catch(() => {
|
||||
// Do something
|
||||
}).finally(() => {
|
||||
_this.confirmLoading = false
|
||||
_this.close()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
onChangeCheck (permission) {
|
||||
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
||||
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
||||
},
|
||||
onChangeCheckAll (e, permission) {
|
||||
Object.assign(permission, {
|
||||
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
||||
indeterminate: false,
|
||||
checkedAll: e.target.checked
|
||||
})
|
||||
},
|
||||
loadPermissions () {
|
||||
getPermissions().then(res => {
|
||||
let result = res.result
|
||||
this.permissions = result.map(permission => {
|
||||
const options = actionToObject(permission.actionData)
|
||||
permission.checkedAll = false
|
||||
permission.selected = []
|
||||
permission.indeterminate = false
|
||||
permission.actionsOptions = options.map(option => {
|
||||
return {
|
||||
label: option.describe,
|
||||
value: option.action
|
||||
}
|
||||
})
|
||||
return permission
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="search-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchLayout",
|
||||
data () {
|
||||
return {
|
||||
tabs: {
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
title: '文章'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '项目'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
title: '应用'
|
||||
},
|
||||
],
|
||||
active: () => {
|
||||
switch (this.$route.path) {
|
||||
case '/list/search/article':
|
||||
return '1'
|
||||
case '/list/search/project':
|
||||
return '2'
|
||||
case '/list/search/application':
|
||||
return '3'
|
||||
default:
|
||||
return '1'
|
||||
}
|
||||
},
|
||||
callback: (key) => {
|
||||
switch (key) {
|
||||
case '1':
|
||||
this.$router.push('/list/search/article')
|
||||
break
|
||||
case '2':
|
||||
this.$router.push('/list/search/project')
|
||||
break
|
||||
case '3':
|
||||
this.$router.push('/list/search/application')
|
||||
break
|
||||
default:
|
||||
this.$router.push('/workplace')
|
||||
}
|
||||
}
|
||||
},
|
||||
search: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search-head{
|
||||
background-color: #fff;
|
||||
margin: -25px -24px -24px;
|
||||
.search-input{
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.search-content{
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user