Skip to content

Commit 7c36a05

Browse files
奇淼（piexlmaxmr-91qiang
奇淼（piexlmax
and
mr-91qiang
authored
前端性能优化，体验优化 (flipped-aurora#1178)
* 优化角色管理中菜单和api管理的确定按钮，固定在右上角，更容易操作，每次修改完不需要拉到最上面再确定 * 角色管理中 api和菜单树 增加筛选框 * vite更新至3.0 * 取消sass-loader * 取消*zoom 的打包报错 Co-authored-by: qiang <1604864658@qq.com>
1 parent 0cb368d commit 7c36a05

File tree

7 files changed

+118
-76
lines changed

7 files changed

+118
-76
lines changed

‎web/package.json

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,13 @@
2323
"qs": "^6.8.0",
2424
"quill": "^1.3.7",
2525
"screenfull": "^5.0.2",
26-
"script-ext-html-webpack-plugin": "^2.1.4",
2726
"spark-md5": "^3.0.1",
2827
"vue": "^3.2.25",
2928
"vue-router": "^4.0.0-0"
3029
},
3130
"devDependencies": {
32-
"@vitejs/plugin-legacy": "^1.4.4",
33-
"@vitejs/plugin-vue": "^2.3.3",
31+
"@vitejs/plugin-legacy": "^2.0.0",
32+
"@vitejs/plugin-vue": "^3.0.1",
3433
"@vue/cli-plugin-babel": "~4.5.0",
3534
"@vue/cli-plugin-eslint": "~4.5.0",
3635
"@vue/cli-plugin-router": "~4.5.0",
@@ -43,9 +42,9 @@
4342
"dotenv": "^10.0.0",
4443
"eslint": "^6.7.2",
4544
"eslint-plugin-vue": "^7.0.0",
46-
"sass": "^1.26.5",
47-
"sass-loader": "^8.0.2",
48-
"vite": "^2.8.0",
45+
"sass": "^1.54.0",
46+
"terser": "^5.4.0",
47+
"vite": "^3.0.1",
4948
"vite-plugin-banner": "^0.1.3",
5049
"vite-plugin-importer": "^0.2.5"
5150
}

‎web/src/style/base.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.clearfix {
2-
*zoom: 1;
3-
}
4-
51
.clearfix:after {
62
content: '';
73
display: block;

‎web/src/style/button.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.sticky-button {
2+
position: sticky;
3+
top: 2px;
4+
z-index: 2;
5+
background-color: #fff;
6+
}
7+
.fitler{
8+
width: 60%;
9+
}

‎web/src/view/superAdmin/authority/authority.vue

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@
8383
</template>
8484
</el-dialog>
8585

86-
<el-drawer v-if="drawer" v-model="drawer" :with-header="false" size="40%" title="角色配置">
87-
<el-tabs :before-leave="autoEnter" class="role-box" type="border-card">
86+
<el-drawer v-if="drawer" v-model="drawer" custom-class="auth-drawer" :with-header="false" size="40%" title="角色配置">
87+
<el-tabs :before-leave="autoEnter" type="border-card">
8888
<el-tab-pane label="角色菜单">
8989
<Menus ref="menus" :row="activeRow" @changeRow="changeRow" />
9090
</el-tab-pane>
@@ -396,10 +396,15 @@ export default {
396396
}
397397
}
398398
}
399-
.role-box {
400-
.el-tabs__content {
401-
height: calc(100vh - 72px);
402-
overflow: auto;
399+
.tree-content{
400+
overflow: auto;
401+
height: calc(100vh - 100px);
402+
margin-top: 10px;
403+
}
404+
405+
.auth-drawer{
406+
.el-drawer__body{
407+
overflow: hidden;
403408
}
404409
}
405410
</style>

‎web/src/view/superAdmin/authority/components/apis.vue

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
<template>
22
<div>
3-
<div class="clearfix">
3+
<div class="clearfix sticky-button">
4+
<el-input v-model="filterText" class="fitler" placeholder="筛选" />
45
<el-button class="fl-right" size="small" type="primary" @click="authApiEnter">确 定</el-button>
56
</div>
6-
<el-tree
7-
ref="apiTree"
8-
:data="apiTreeData"
9-
:default-checked-keys="apiTreeIds"
10-
:props="apiDefaultProps"
11-
default-expand-all
12-
highlight-current
13-
node-key="onlyId"
14-
show-checkbox
15-
@check="nodeChange"
16-
/>
7+
<div class="tree-content">
8+
<el-tree
9+
ref="apiTree"
10+
:data="apiTreeData"
11+
:default-checked-keys="apiTreeIds"
12+
:props="apiDefaultProps"
13+
default-expand-all
14+
highlight-current
15+
node-key="onlyId"
16+
show-checkbox
17+
:filter-node-method="filterNode"
18+
@check="nodeChange"
19+
/>
20+
</div>
1721
</div>
1822
</template>
1923
<script>
@@ -25,7 +29,7 @@ export default {
2529
<script setup>
2630
import { getAllApis } from '@/api/api'
2731
import { UpdateCasbin, getPolicyPathByAuthorityId } from '@/api/casbin'
28-
import { ref } from 'vue'
32+
import { ref, watch } from 'vue'
2933
import { ElMessage } from 'element-plus'
3034
const props = defineProps({
3135
row: {
@@ -40,7 +44,7 @@ const apiDefaultProps = ref({
4044
children: 'children',
4145
label: 'description'
4246
})
43-
47+
const filterText = ref('')
4448
const apiTreeData = ref([])
4549
const apiTreeIds = ref([])
4650
const activeUserId = ref('')
@@ -120,4 +124,16 @@ defineExpose({
120124
enterAndNext
121125
})
122126
127+
const filterNode = (value, data) => {
128+
if (!value) return true
129+
return data.description.indexOf(value) !== -1
130+
}
131+
watch(filterText, (val) => {
132+
apiTree.value.filter(val)
133+
})
134+
123135
</script>
136+
137+
<style lang="scss" scoped>
138+
@import "@/style/button.scss";
139+
</style>

‎web/src/view/superAdmin/authority/components/datas.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
22
<div>
3-
<div class="clearfix" style="margin: 18px">
3+
<div class="clearfix sticky-button" style="margin: 18px">
44
<el-button class="fl-right" size="small" type="primary" @click="authDataEnter">确 定</el-button>
55
<el-button class="fl-left" size="small" type="primary" @click="all">全选</el-button>
66
<el-button class="fl-left" size="small" type="primary" @click="self">本角色</el-button>
77
<el-button class="fl-left" size="small" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
88
</div>
9-
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
10-
<el-checkbox v-for="(item,key) in authoritys" :key="key" :label="item">{{ item.authorityName }}</el-checkbox>
11-
</el-checkbox-group>
9+
<div class="tree-content">
10+
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
11+
<el-checkbox v-for="(item,key) in authoritys" :key="key" :label="item">{{ item.authorityName }}</el-checkbox>
12+
</el-checkbox-group>
13+
</div>
1214
<warning-bar title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）" />
1315
</div>
1416
</template>

‎web/src/view/superAdmin/authority/components/menus.vue

Lines changed: 57 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,51 @@
11
<template>
22
<div>
3-
<div class="clearfix">
3+
<div class="clearfix sticky-button">
4+
<el-input v-model="filterText" class="fitler" placeholder="筛选" />
45
<el-button class="fl-right" size="small" type="primary" @click="relation">确 定</el-button>
56
</div>
6-
<el-tree
7-
ref="menuTree"
8-
:data="menuTreeData"
9-
:default-checked-keys="menuTreeIds"
10-
:props="menuDefaultProps"
11-
default-expand-all
12-
highlight-current
13-
node-key="ID"
14-
show-checkbox
15-
@check="nodeChange"
16-
>
17-
<template #default="{ node , data }">
18-
<span class="custom-tree-node">
19-
<span>{{ node.label }}</span>
20-
<span>
21-
<el-button
22-
type="primary"
23-
link
24-
size="small"
25-
:style="{color:row.defaultRouter === data.name?'#E6A23C':'#85ce61'}"
26-
:disabled="!node.checked"
27-
@click="() => setDefault(data)"
28-
>
29-
{{ row.defaultRouter === data.name?"首页":"设为首页" }}
30-
</el-button>
31-
</span>
32-
<span v-if="data.menuBtn.length">
33-
<el-button
34-
type="primary"
35-
link
36-
size="small"
37-
@click="() => OpenBtn(data)"
38-
>
39-
分配按钮
40-
</el-button>
7+
<div class="tree-content">
8+
<el-tree
9+
ref="menuTree"
10+
:data="menuTreeData"
11+
:default-checked-keys="menuTreeIds"
12+
:props="menuDefaultProps"
13+
default-expand-all
14+
highlight-current
15+
node-key="ID"
16+
show-checkbox
17+
:filter-node-method="filterNode"
18+
@check="nodeChange"
19+
>
20+
<template #default="{ node , data }">
21+
<span class="custom-tree-node">
22+
<span>{{ node.label }}</span>
23+
<span>
24+
<el-button
25+
type="primary"
26+
link
27+
size="small"
28+
:style="{color:row.defaultRouter === data.name?'#E6A23C':'#85ce61'}"
29+
:disabled="!node.checked"
30+
@click="() => setDefault(data)"
31+
>
32+
{{ row.defaultRouter === data.name?"首页":"设为首页" }}
33+
</el-button>
34+
</span>
35+
<span v-if="data.menuBtn.length">
36+
<el-button
37+
type="primary"
38+
link
39+
size="small"
40+
@click="() => OpenBtn(data)"
41+
>
42+
分配按钮
43+
</el-button>
44+
</span>
4145
</span>
42-
</span>
43-
</template>
44-
</el-tree>
45-
46+
</template>
47+
</el-tree>
48+
</div>
4649
<el-dialog v-model="btnVisible" title="分配按钮" destroy-on-close>
4750
<el-table
4851
ref="btnTableRef"
@@ -70,8 +73,9 @@ import {
7073
updateAuthority
7174
} from '@/api/authority'
7275
import { getAuthorityBtnApi, setAuthorityBtnApi } from '@/api/authorityBtn'
73-
import { nextTick, ref } from 'vue'
76+
import { nextTick, ref, watch } from 'vue'
7477
import { ElMessage } from 'element-plus'
78+
7579
const props = defineProps({
7680
row: {
7781
default: function() {
@@ -82,7 +86,7 @@ const props = defineProps({
8286
})
8387
8488
const emit = defineEmits(['changeRow'])
85-
89+
const filterText = ref('')
8690
const menuTreeData = ref([])
8791
const menuTreeIds = ref([])
8892
const needConfirm = ref(false)
@@ -192,6 +196,16 @@ const enterDialog = async() => {
192196
}
193197
}
194198
199+
const filterNode = (value, data) => {
200+
if (!value) return true
201+
// console.log(data.mate.title)
202+
return data.meta.title.indexOf(value) !== -1
203+
}
204+
205+
watch(filterText, (val) => {
206+
menuTree.value.filter(val)
207+
})
208+
195209
</script>
196210

197211
<script>
@@ -202,6 +216,7 @@ export default {
202216
</script>
203217

204218
<style lang="scss" scope>
219+
@import "@/style/button.scss";
205220
.custom-tree-node{
206221
span+span{
207222
margin-left: 12px;

0 commit comments

Comments
 (0)