gitee/snowy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

【更新】优化一些代码，菜单功能丰富并使用s-table组件，修改s-table适配

Browse Source
This commit is contained in:
小诺 2021-06-01 00:19:30 +08:00 committed by 15099670051
parent b7783fe2cb
commit 3241cee232
14 changed files with 190 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_web/src/components/Table/README.md
View File

@ -11,6 +11,7 @@ Table 重封装组件说明
该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装
由 `小诺` 完成二次改进使用
例子1
----

8
_web/src/components/Table/index.js
View File

@ -201,7 +201,13 @@ export default {
} catch (e) {
this.localPagination = false
}
this.localDataSource = r.rows // 返回结果中的数组数据
// 返回结果中的数组数据
if (this.showPagination === false) {
// 因为按住小诺的套路，不分页的直接是在data中，我们在界面中直接就是返回了data
this.localDataSource = r
} else {
this.localDataSource = r.rows
}
this.localLoading = false
})
}

4
_web/src/views/system/app/addForm.vue
View File

@ -1,7 +1,7 @@
<template>
<a-modal
title="新增应用"
:width="900"
:width="500"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@ -47,7 +47,7 @@
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
sm: { span: 18 }
},
visible: false,
confirmLoading: false,

4
_web/src/views/system/app/editForm.vue
View File

@ -1,7 +1,7 @@
<template>
<a-modal
title="应用编辑"
:width="900"
:width="500"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@ -54,7 +54,7 @@
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
sm: { span: 18 }
},
visible: false,
confirmLoading: false,

17
_web/src/views/system/app/index.vue
View File

@ -31,9 +31,8 @@
ref="table"
:columns="columns"
:data="loadData"
:alert="true"
:alert="false"
:rowKey="(record) => record.id"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
>
<template slot="operator" v-if="hasPerm('sysApp:add')">
<a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysApp:add')">新增应用</a-button>
@ -78,14 +77,6 @@
data () {
return {
// description: '面包屑说明',
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
// 查询参数
queryParam: {},
// 表头
@ -117,8 +108,6 @@
})
},
loading: false,
selectedRowKeys: [],
selectedRows: [],
statusDict: [],
activeDict: []
}
@ -191,10 +180,6 @@
}).catch((err) => {
this.$message.error('删除错误：' + err.message)
})
},
onChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}

25
_web/src/views/system/config/index.vue
View File

@ -18,7 +18,7 @@
<a-col :md="8" :sm="24">
<a-form-item label="所属分类">
<a-select v-model="queryParam.groupCode" placeholder="请选择所属分类" allow-clear>
<a-select-option v-for="(item,index) in groupCodeDictTypeDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
<a-select-option v-for="(item,index) in groupCodeDictTypeDropDown" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
@ -42,9 +42,8 @@
ref="table"
:columns="columns"
:data="loadData"
:alert="true"
:alert="false"
:rowKey="(record) => record.code"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<template slot="operator" v-if="hasPerm('sysConfig:add')">
<a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysConfig:add')">新增配置</a-button>
@ -62,7 +61,7 @@
<ellipsis :length="16" tooltip>{{ text }}</ellipsis>
</span>
<span slot="groupCode" slot-scope="text">
{{ groupCodeFilter(text) }}
{{ 'consts_type' | dictType(text) }}
</span>
<span slot="action" slot-scope="text, record">
<a v-if="hasPerm('sysConfig:edit')" @click="$refs.editForm.edit(record)">编辑</a>
@ -80,7 +79,6 @@
<script>
import { STable, Ellipsis, XCard } from '@/components'
import { sysConfigPage, sysConfigDelete } from '@/api/modular/system/configManage'
import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
import addForm from './addForm'
import editForm from './editForm'
export default {
@ -131,8 +129,6 @@
return res.data
})
},
selectedRowKeys: [],
selectedRows: [],
groupCodeDictTypeDropDown: []
}
},
@ -155,16 +151,7 @@
* 获取字典数据
*/
sysDictTypeDropDown () {
sysDictTypeDropDown({ code: 'consts_type' }).then((res) => {
this.groupCodeDictTypeDropDown = res.data
})
},
groupCodeFilter (groupCode) {
// eslint-disable-next-line eqeqeq
const values = this.groupCodeDictTypeDropDown.filter(item => item.code == groupCode)
if (values.length > 0) {
return values[0].value
}
this.groupCodeDictTypeDropDown = this.$options.filters['dictData']('consts_type')
},
sysConfigDelete (record) {
sysConfigDelete(record).then((res) => {
@ -183,10 +170,6 @@
},
handleOk () {
this.$refs.table.refresh()
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}

16
_web/src/views/system/dict/dictdata/index.vue
View File

@ -20,8 +20,8 @@
<a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
</a-form-item>
</a-col>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
</span>
@ -37,7 +37,6 @@
:data="loadData"
:alert="false"
:rowKey="(record) => record.code"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<template slot="operator" v-if="hasPerm('sysDictData:add')" >
<a-button @click="$refs.addForm.add(typeId)" icon="plus" type="primary" v-if="hasPerm('sysDictData:add')">新增数据</a-button>
@ -73,8 +72,6 @@
},
data () {
return {
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
@ -111,8 +108,6 @@
return res.data
})
},
selectedRowKeys: [],
selectedRows: [],
statusDict: []
}
},
@ -170,15 +165,8 @@
this.$message.error('删除错误：' + err.message)
})
},
toggleAdvanced () {
this.advanced = !this.advanced
},
handleOk () {
this.$refs.table.refresh()
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}

16
_web/src/views/system/dict/index.vue
View File

@ -14,8 +14,8 @@
<a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
</a-form-item>
</a-col>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
</span>
@ -31,7 +31,6 @@
:data="loadData"
:alert="false"
:rowKey="(record) => record.code"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<template slot="operator" v-if="hasPerm('sysDictType:add')">
<a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysDictType:add')">新增类型</a-button>
@ -81,8 +80,6 @@
},
data () {
return {
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
@ -121,8 +118,6 @@
return res.data
})
},
selectedRowKeys: [],
selectedRows: [],
statusDict: []
}
},
@ -157,15 +152,8 @@
this.$message.error('删除错误：' + err.message)
})
},
toggleAdvanced () {
this.advanced = !this.advanced
},
handleOk () {
this.$refs.table.refresh()
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}

348
_web/src/views/system/menu/index.vue
View File

@ -1,203 +1,177 @@
/* eslint-disable */
<template>
<a-card :bordered="false">
<div class="table-operator" v-if="hasPerm('sysMenu:add')" >
<a-button type="primary" v-if="hasPerm('sysMenu:add')" icon="plus" @click="$refs.addForm.add()">新增菜单</a-button>
</div>
<!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{this.selectedRowKeys.length }}</a>项&nbsp;&nbsp;
<a style="margin-left: 24px" @click="clearSele()">清空</a>
</div>-->
<a-table
ref="table"
size="middle"
:rowKey="(record) => record.id"
:pagination="false"
:defaultExpandAllRows="true"
:columns="columns"
:dataSource="data"
:loading="loading"
showPagination="auto"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<!--:rowSelection="rowSelectionon"-->
<span slot="type" slot-scope="text">
{{ typeFilter(text) }}
</span>
<span slot="icon" slot-scope="text">
<div v-if="text != null && text != ''">
<a-icon :type="text"/>
</div>
</span>
<span slot="action" slot-scope="text, record">
<template>
<a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.edit(record)">编辑</a>
<a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
<a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
<a>删除</a>
</a-popconfirm>
<div>
<x-card v-if="hasPerm('sysMenu:list')">
<div slot="content" 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.name" allow-clear placeholder="请输入菜单名称"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="选择应用">
<a-select v-model="queryParam.application" placeholder="请选择选择应用" allow-clear>
<a-select-option v-for="(item,index) in this.userInfo.apps" :key="index" :value="item.code" >{{ item.name }}</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="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
</x-card>
<a-card :bordered="false">
<s-table
ref="table"
:rowKey="(record) => record.id"
:columns="columns"
:alert="false"
:data="loadData"
:showPagination="false"
:expandRowByClick="true"
>
<template slot="operator">
<a-button type="primary" v-if="hasPerm('sysMenu:add')" icon="plus" @click="$refs.addForm.add()">新增菜单</a-button>
</template>
</span>
</a-table>
<add-form ref="addForm" @ok="handleOk"/>
<edit-form ref="editForm" @ok="handleOk"/>
</a-card>
<span slot="type" slot-scope="text">
<a-tag color="cyan" v-if="text === 0">
{{ 'menu_type' | dictType(text) }}
</a-tag>
<a-tag color="blue" v-if="text === 1">
{{ 'menu_type' | dictType(text) }}
</a-tag>
<a-tag color="purple" v-if="text === 2">
{{ 'menu_type' | dictType(text) }}
</a-tag>
</span>
<span slot="icon" slot-scope="text">
<div v-if="text != null && text != ''">
<a-icon :type="text"/>
</div>
</span>
<span slot="action" slot-scope="text, record">
<template>
<a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.edit(record)">编辑</a>
<a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
<a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
<a>删除</a>
</a-popconfirm>
</template>
</span>
</s-table>
<add-form ref="addForm" @ok="handleOk"/>
<edit-form ref="editForm" @ok="handleOk"/>
</a-card>
</div>
</template>
<script>
import { getMenuList, sysMenuDelete } from '@/api/modular/system/menuManage'
import addForm from './addForm'
import editForm from './editForm'
import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
import { STable, XCard } from '@/components'
import { getMenuList } from '@/api/modular/system/menuManage'
import addForm from './addForm'
import editForm from './editForm'
import { mapGetters } from 'vuex'
export default {
components: {
addForm,
editForm
},
data () {
return {
data: [],
loading: true,
columns: [
{
title: '菜单名称',
dataIndex: 'name',
width: '20%'
},
{
title: '菜单类型',
dataIndex: 'type',
scopedSlots: { customRender: 'type' }
},
{
title: '图标',
dataIndex: 'icon',
scopedSlots: { customRender: 'icon' }
},
{
title: '组件',
dataIndex: 'component',
width: '20%',
ellipsis: true
},
{
title: '路由地址',
dataIndex: 'router',
key: 'router',
ellipsis: true
},
{
title: '排序',
dataIndex: 'sort'
}
],
selectedRowKeys: [],
typeDict: []
}
},
created () {
this.loadData()
if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
this.columns.push({
title: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' }
})
}
},
methods: {
loadData () {
this.loading = true
getMenuList(this.queryParam).then((res) => {
if (res.success) {
this.data = res.data
this.removeEmptyChildren(this.data)
}
}).finally(() => {
this.loading = false
})
this.sysDictTypeDropDown()
},
removeEmptyChildren(data) {
if (data == null || data.length === 0) return
for (let i = 0; i < data.length; i++) {
const item = data[i]
if (item.children != null && item.children.length === 0) {
item.children = null
} else {
this.removeEmptyChildren(item.children)
}
export default {
components: {
STable,
XCard,
addForm,
editForm
},
data () {
return {
data: [],
queryParam: {},
loading: true,
columns: [
{
title: '菜单名称',
dataIndex: 'name',
width: '20%'
},
{
title: '菜单类型',
dataIndex: 'type',
scopedSlots: { customRender: 'type' }
},
{
title: '图标',
dataIndex: 'icon',
scopedSlots: { customRender: 'icon' }
},
{
title: '组件',
dataIndex: 'component',
width: '20%',
ellipsis: true
},
{
title: '路由地址',
dataIndex: 'router',
key: 'router',
ellipsis: true
},
{
title: '排序',
dataIndex: 'sort'
}
},
typeFilter (type) {
// eslint-disable-next-line eqeqeq
const values = this.typeDict.filter(item => item.code == type)
if (values.length > 0) {
return values[0].value
}
},
/**
* 获取字典数据
*/
sysDictTypeDropDown () {
sysDictTypeDropDown({ code: 'menu_type' }).then((res) => {
this.typeDict = res.data
],
loadData: parameter => {
return getMenuList(Object.assign(parameter, this.queryParam)).then((res) => {
this.removeEmptyChildren(res.data)
return res.data
})
},
refreshSele () {
this.loadData()
},
handleOk () {
this.loadData()
},
handleDel (record) {
sysMenuDelete(record).then((res) => {
if (res.success) {
this.$message.success('删除成功')
this.loadData()
} else {
this.$message.error('删除失败：' + res.message)
}
}).catch((err) => {
this.$message.error('错误：' + err.message)
})
},
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
clearSele () {
this.selectedRowKeys = []
}
}
},
computed: {
...mapGetters(['userInfo'])
},
created () {
if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
this.columns.push({
title: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' }
})
}
},
methods: {
/**
* 去掉无用的支节点
*/
removeEmptyChildren(data) {
if (data == null || data.length === 0) return
for (let i = 0; i < data.length; i++) {
const item = data[i]
if (item.children != null && item.children.length === 0) {
item.children = null
} else {
this.removeEmptyChildren(item.children)
}
}
},
handleOk () {
this.$refs.table.refresh()
}
}
}
</script>
<style scoped>
.table-operator {
margin-bottom: 18px;
}
button {
margin-right: 8px;
}
.table-operator {
margin-bottom: 18px;
}
button {
margin-right: 8px;
}
</style>

4
_web/src/views/system/role/addForm.vue
View File

@ -1,7 +1,7 @@
<template>
<a-modal
title="新增角色"
:width="900"
:width="500"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@ -61,7 +61,7 @@
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
sm: { span: 18 }
},
visible: false,
confirmLoading: false,

4
_web/src/views/system/role/editForm.vue
View File

@ -1,7 +1,7 @@
<template>
<a-modal
title="角色编辑"
:width="900"
:width="500"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@ -72,7 +72,7 @@
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
sm: { span: 18 }
},
visible: false,
confirmLoading: false,

13
_web/src/views/system/role/index.vue
View File

@ -27,9 +27,8 @@
ref="table"
:columns="columns"
:data="loadData"
:alert="true"
:rowKey="(record) => record.code"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:alert="false"
:rowKey="(record) => record.id"
>
<template slot="operator" v-if="hasPerm('sysRole:add')">
<a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysRole:add')">新增角色</a-button>
@ -109,9 +108,7 @@
return getRolePage(Object.assign(parameter, this.queryParam)).then((res) => {
return res.data
})
},
selectedRowKeys: [],
selectedRows: []
}
}
},
@ -142,10 +139,6 @@
handleOk () {
this.$refs.table.refresh()
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}

2
_web/src/views/system/role/roleOrgForm.vue
View File

@ -140,7 +140,6 @@
sysRoleOwnData (record) {
sysRoleOwnData({ id: record.id }).then((res) => {
if (res.success) {
console.log(JSON.stringify(res.data))
this.checkedKeys = res.data
}
this.formLoading = false
@ -152,7 +151,6 @@
this.autoExpandParent = false
},
onCheck (checkedKeys) {
console.log(JSON.stringify(checkedKeys))
this.checkedKeys = checkedKeys
},
onSelect (selectedKeys, info) {

2
_web/src/views/system/sms/index.vue
View File

@ -44,7 +44,7 @@
ref="table"
:columns="columns"
:data="loadData"
:alert="true"
:alert="false"
:rowKey="(record) => record.id"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>