mirror of
https://gitee.com/ssssssss-team/magic-boot.git
synced 2025-04-02 11:22:40 +08:00
样式优化等
This commit is contained in:
吕金泽
parent
90e2d367fd
commit
3a46a3f505
@ -1,30 +0,0 @@
|
||||
{
|
||||
"properties" : { },
|
||||
"id" : "0adb88c728814db88b901701faa56161",
|
||||
"script" : null,
|
||||
"groupId" : "67b2ce258e24491194b74992958c74aa",
|
||||
"name" : "搜索菜单数据",
|
||||
"createTime" : null,
|
||||
"updateTime" : 1641828392961,
|
||||
"lock" : "0",
|
||||
"method" : "GET",
|
||||
"path" : "/search",
|
||||
"parameters" : [ ],
|
||||
"option" : "[]",
|
||||
"requestBody" : "",
|
||||
"headers" : [ ],
|
||||
"paths" : [ ],
|
||||
"responseBody" : null,
|
||||
"description" : null,
|
||||
"requestBodyDefinition" : null,
|
||||
"responseBodyDefinition" : null,
|
||||
"optionMap" : { }
|
||||
}
|
||||
================================
|
||||
var toTree = (list,pid) => select t.*,toTree(list,t.id) children from list t where t.pid = pid
|
||||
var list = toTree(db.select('select id,name as label,pid,url from sys_menu where is_del = 0 and is_show = 1 order by sort'),'0')
|
||||
|
||||
return {
|
||||
list: list,
|
||||
total: list.getLength()
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"axios": "^0.24.0",
|
||||
"drag-tree-table": "2.2.0",
|
||||
"element-ui": "2.13.0",
|
||||
"element-ui": "2.15.7",
|
||||
"file-saver": "2.0.1",
|
||||
"fuse.js": "3.4.4",
|
||||
"jquery": "^1.7.2",
|
||||
|
||||
@ -27,6 +27,8 @@
|
||||
</template>
|
||||
</pd-table-column>
|
||||
|
||||
<el-empty :description="emptyText" slot="empty" />
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="total > 0 && page" :total="total || 0" :page.sync="listCurrent" :limit.sync="limit" @pagination="handlerPagination" />
|
||||
</div>
|
||||
@ -88,6 +90,10 @@ export default {
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-button v-if="checked" type="primary" size="mini" icon="el-icon-check" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(searchData, treeAllChecked) }">全选/全不选</el-button>
|
||||
</div>
|
||||
<div style="margin: 5px 0px;" v-if="search">
|
||||
<el-input v-model="searchValue" @input="searchTree" style="width: 90%" />
|
||||
<el-input v-model="searchValue" placeholder="输入关键字进行过滤" @input="searchTree" :style="{ width: searchWidth }" />
|
||||
</div>
|
||||
<el-tree
|
||||
v-if="refreshTree"
|
||||
@ -58,6 +58,10 @@ export default {
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
searchWidth: {
|
||||
type: String,
|
||||
default: '230px'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
1
magic-boot-ui/src/icons/svg/fullscreen.svg
Normal file
1
magic-boot-ui/src/icons/svg/fullscreen.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
1
magic-boot-ui/src/icons/svg/search.svg
Normal file
1
magic-boot-ui/src/icons/svg/search.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
|
||||
|
After Width: | Height: | Size: 600 B |
@ -24,7 +24,8 @@ export default {
|
||||
min-height: calc(100vh - 50px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
background: #F0F2F5;
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
@ -35,6 +36,7 @@ export default {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img src="@/assets/psyduck.png" class="user-avatar">
|
||||
<span style="font-size: 14px">{{ $store.getters.username }}({{ $store.getters.name }})</span>
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
@ -128,12 +129,12 @@ export default {
|
||||
margin-right: 30px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
|
||||
@ -7,18 +7,6 @@
|
||||
</span>
|
||||
</div>
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-form v-if="!isCollapse">
|
||||
<el-form-item>
|
||||
<treeselect
|
||||
style="width: 90%;margin: 0px 5%"
|
||||
:options="menuTree"
|
||||
placeholder="输入菜单名称搜索查找"
|
||||
:disable-branch-nodes="true"
|
||||
:show-count="true"
|
||||
@select="selectMenu"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
@ -37,11 +25,8 @@
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item--small.el-form-item{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.el-scrollbar >>> .el-scrollbar__wrap{
|
||||
height: calc(100% - 60px - 36px)
|
||||
height: calc(100% - 60px)
|
||||
}
|
||||
.logo-title {
|
||||
color:white;
|
||||
@ -50,7 +35,7 @@
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
/*box-shadow: 0px -1px 5px 0px #000;*/
|
||||
box-shadow: 0px -1px 5px 0px #000;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
@ -61,12 +46,10 @@ import { mapGetters } from 'vuex'
|
||||
import Logo from './Logo'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import variables from '@/styles/variables.scss'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import treeTable from "@/scripts/treeTable";
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo, Treeselect },
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permission_routes',
|
||||
@ -95,19 +78,6 @@ export default {
|
||||
return {
|
||||
menuTree: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$get('menu/search').then(res => {
|
||||
this.menuTree = res.data.list
|
||||
this.$treeTable.deleteEmptyChildren(this.menuTree)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
selectMenu(node) {
|
||||
if(node.url){
|
||||
this.$router.push({ path: node.url })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -11,3 +11,6 @@ body {
|
||||
.toolbar-container{
|
||||
margin-bottom: 10px
|
||||
}
|
||||
.clear{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@ -62,6 +62,9 @@ div:focus {
|
||||
// main-container global css
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<pd-tree ref="tree" :el="{ 'show-checkbox': true }" url="menu/tree" :select-values.sync="menus" />
|
||||
<pd-tree ref="tree" :el="{ 'show-checkbox': true }" url="menu/tree" :search="true" search-width="230px" :select-values.sync="menus" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
</template>
|
||||
</pd-dialog>
|
||||
|
||||
<pd-dialog ref="assignPermissionsDialog" @confirm-click="$refs.assignPermissions.save()">
|
||||
<pd-dialog ref="assignPermissionsDialog" width="40%" @confirm-click="$refs.assignPermissions.save()">
|
||||
<template #content>
|
||||
<role-assign-permissions ref="assignPermissions" :key="Math.random()" :id="temp.id" @close="() => { $refs.assignPermissionsDialog.hide(); temp.id = '' }" />
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<style>
|
||||
.el-input-number .el-input__inner{
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
|
||||
<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="120px">
|
||||
<el-form-item label="登录名称" prop="username">
|
||||
<el-input v-model="temp.username" />
|
||||
</el-form-item>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="left">
|
||||
<pd-tree url="office/tree" :el="{ 'expand-on-click-node': false,'show-checkbox': true }" :search="true" :checked="false" @check-change="checkChange" />
|
||||
<pd-tree url="office/tree" :el="{ 'expand-on-click-node': false,'show-checkbox': true }" :expand="false" :search="true" search-width="100%" :checked="false" @check-change="checkChange" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="filter-container">
|
||||
@ -44,13 +44,15 @@
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
|
||||
|
||||
<pd-dialog ref="userFormDialog" @confirm-click="$refs.userForm.save()">
|
||||
<pd-dialog ref="userFormDialog" @confirm-click="$refs.userForm.save()" width="40%">
|
||||
<template #content>
|
||||
<user-form ref="userForm" :dialog-status="dialogStatus" @reload-table="reloadTable" />
|
||||
</template>
|
||||
</pd-dialog>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user