mirror of
https://gitee.com/ssssssss-team/magic-boot.git
synced 2025-01-19 03:52:50 +08:00
菜单搜索，菜单icon
This commit is contained in:
吕金泽
parent
7269b13382
commit
19343abd84
@ -29,6 +29,7 @@
|
||||
</template>
|
||||
</div>
|
||||
<el-image v-else-if="col.type === 'image'" :src="scope.row[col.field]" :preview-src-list="[scope.row[col.field]]" />
|
||||
<span v-else-if="col.type === 'html'" v-html="scope.row[col.field]"></span>
|
||||
<span v-else-if="col.click">
|
||||
<a style="color: blue" @click="col.click(scope.row)">{{ scope.row[col.field] }}</a>
|
||||
</span>
|
||||
|
||||
1
magic-boot-ui/src/icons/svg/dict.svg
Normal file
1
magic-boot-ui/src/icons/svg/dict.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017183540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5317" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M259.2 0H896a64 64 0 0 1 64 64v748.608a64 64 0 0 1-64 64H259.2a64 64 0 0 1-64-64V64a64 64 0 0 1 64-64z m132.8 183.04V640h171.264c76.096 0 133.12-20.48 172.544-61.44 37.376-39.04 56.384-94.72 56.384-167.04 0-72.96-19.008-128.64-56.384-167.04-39.36-40.96-96.448-61.44-172.544-61.44H392z m76.8 64h80c58.432 0 101.056 12.8 128 39.04 26.24 25.6 39.296 67.84 39.296 125.44 0 56.32-13.12 97.92-39.36 124.8-26.88 26.24-69.504 39.68-127.936 39.68h-80V247.04zM64 384h75.968v568.512h580.096V1024H128a64 64 0 0 1-64-64V384z" p-id="5318"></path></svg>
|
||||
|
After Width: | Height: | Size: 915 B |
1
magic-boot-ui/src/icons/svg/examples.svg
Normal file
1
magic-boot-ui/src/icons/svg/examples.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017365938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6713" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M922.317764 0H101.64469A100.312307 100.312307 0 0 0 1.634036 100.010654V923.989346a100.312307 100.312307 0 0 0 100.010654 100.010654h820.673074a100.299739 100.299739 0 0 0 99.998085-100.010654V100.06093A100.299739 100.299739 0 0 0 922.317764 0zM427.933063 402.04107l-177.321894 103.064894 177.321894 97.094672v81.257871L179.684925 534.831388v-57.477532l248.248138-160.529857z m70.938812 364.661192h-53.970812l78.643542-509.303973h53.958243z m345.393085-231.845736L596.004253 683.445938v-81.257871l177.321894-97.094672-177.321894-103.064894v-85.217071l248.260707 160.542426z" p-id="6714"></path></svg>
|
||||
|
After Width: | Height: | Size: 977 B |
1
magic-boot-ui/src/icons/svg/home.svg
Normal file
1
magic-boot-ui/src/icons/svg/home.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017648725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19289" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M555.541333 117.994667l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H640V746.666667c0-70.688-57.312-128-128-128s-128 57.312-128 128v170.666666H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0z" p-id="19290"></path></svg>
|
||||
|
After Width: | Height: | Size: 803 B |
1
magic-boot-ui/src/icons/svg/menu.svg
Normal file
1
magic-boot-ui/src/icons/svg/menu.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017024921" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2935" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M892.928 128q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0zM892.928 448.512q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0zM892.928 769.024q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0z" p-id="2936"></path></svg>
|
||||
|
After Width: | Height: | Size: 997 B |
1
magic-boot-ui/src/icons/svg/role.svg
Normal file
1
magic-boot-ui/src/icons/svg/role.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017706517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M792.703177 534.452774c-49.288352 33.217439-108.257215 52.515189-171.718341 52.515189-63.271312 0-122.050361-19.171208-171.1489-52.135561-132.996298 65.042909-224.866244 203.290726-224.866244 363.303875 0 169.314031 793.232441 166.972993 793.232441 0C1018.138862 737.7435 926.079103 599.305869 792.703177 534.452774L792.703177 534.452774 792.703177 534.452774zM354.359526 270.99103c0-149.636653 119.329695-270.99103 266.62531-270.99103 147.295615 0 266.62531 121.291105 266.62531 270.99103 0 149.636653-119.329695 270.864488-266.62531 270.864488C473.68922 541.855518 354.359526 420.627684 354.359526 270.99103L354.359526 270.99103 354.359526 270.99103 354.359526 270.99103zM177.959107 912.182508c0 6.200589 0.94907 12.084821 2.783938 17.905781C80.584558 913.827562 5.797867 881.749007 5.797867 833.409724c0-138.500902 79.468768-258.146954 194.622556-314.458422 40.177283 27.01685 88.010395 43.340849 139.576515 45.049174C241.040605 646.696082 177.959107 771.97328 177.959107 912.182508L177.959107 912.182508 177.959107 912.182508zM310.006336 270.99103c0-68.775916 21.638789-132.426856 58.399421-184.309332C361.952083 86.112256 355.561681 85.859171 349.108007 85.859171c-121.227834 0-219.488182 99.842131-219.488182 223.031376s98.197077 223.031376 219.424911 223.031376c27.269936 0 53.400988-5.061705 77.444086-14.362588C355.498409 459.666083 310.006336 370.76989 310.006336 270.99103L310.006336 270.99103zM310.006336 270.99103" p-id="20111"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -121,12 +121,8 @@ common.objAssign = (obj1, obj2) => {
|
||||
}
|
||||
}
|
||||
|
||||
common.copyNewObject = (obj) => {
|
||||
var newObj = {}
|
||||
for (var key in obj) {
|
||||
newObj[key] = obj[key]
|
||||
}
|
||||
return newObj
|
||||
common.copyNew = (obj) => {
|
||||
return JSON.parse(JSON.stringify(obj))
|
||||
}
|
||||
|
||||
common.getParam = (data) => {
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<style scoped>
|
||||
.icon-btn >>> i{
|
||||
font-size: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-button class="filter-item" style="margin-bottom:10px;" type="primary" icon="el-icon-edit" @click="addSubMenu('0')">
|
||||
添加菜单
|
||||
</el-button>
|
||||
<div class="filter-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="搜索菜单名称">
|
||||
<el-input v-model="searchValue" @input="searchMenu"></el-input>
|
||||
</el-form-item>
|
||||
<el-button class="filter-item" style="margin-bottom:10px;" type="primary" icon="el-icon-edit" @click="addSubMenu('0')">
|
||||
添加菜单
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" />
|
||||
<pd-table ref="table" v-bind="tableOptions" v-if="menuData && menuData.length > 0" />
|
||||
|
||||
<pd-dialog ref="menuFormDialog" width="800px" :title="textMap[dialogStatus]" @confirm-click="save()">
|
||||
<template #content>
|
||||
@ -63,6 +64,8 @@ export default {
|
||||
components: { MenuIcons },
|
||||
data() {
|
||||
return {
|
||||
menuData: [],
|
||||
searchValue: '',
|
||||
tableOptions: {
|
||||
el: {
|
||||
'default-expand-all': true,
|
||||
@ -70,13 +73,13 @@ export default {
|
||||
'row-key': 'id'
|
||||
},
|
||||
showNo: false,
|
||||
url: 'menu/tree',
|
||||
page: false,
|
||||
cols: [
|
||||
{
|
||||
field: 'name',
|
||||
title: '菜单名称',
|
||||
align: 'left'
|
||||
align: 'left',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
@ -89,6 +92,15 @@ export default {
|
||||
width: 150,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
field: 'icon',
|
||||
title: '图标',
|
||||
width: 45,
|
||||
align: 'left',
|
||||
templet: (row) => {
|
||||
return this.generateIconCode(row.icon)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'sort',
|
||||
title: '排序',
|
||||
@ -156,7 +168,34 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.reloadTable()
|
||||
},
|
||||
methods: {
|
||||
searchMenu() {
|
||||
this.$set(this.tableOptions, 'data', this.recursionSearch(this.$common.copyNew(this.menuData), this.searchValue))
|
||||
},
|
||||
recursionSearch(data, text){
|
||||
var searchData = []
|
||||
for(var i in data){
|
||||
var treeNode = data[i]
|
||||
var children = treeNode.children
|
||||
if(children && children.length > 0){
|
||||
var childrenSearch = this.recursionSearch(children, text)
|
||||
treeNode.children = childrenSearch && childrenSearch.length > 0 ? childrenSearch : treeNode.children
|
||||
if(treeNode.name.indexOf(text) != -1 || childrenSearch.length > 0){
|
||||
treeNode.name = treeNode.name.replace(text, `<font color="#FAA353">${text}</font>`)
|
||||
searchData.push(treeNode)
|
||||
}
|
||||
}else{
|
||||
if(treeNode.name.indexOf(text) != -1){
|
||||
treeNode.name = treeNode.name.replace(text, `<font color="#FAA353">${text}</font>`)
|
||||
searchData.push(treeNode)
|
||||
}
|
||||
}
|
||||
}
|
||||
return searchData
|
||||
},
|
||||
generateIconCode(symbol) {
|
||||
return `<svg style="width: 20px;height: 20px" aria-hidden="true" class="svg-icon disabled"><use href="#icon-${symbol}"></use></svg>`
|
||||
},
|
||||
@ -217,7 +256,10 @@ export default {
|
||||
})
|
||||
},
|
||||
reloadTable() {
|
||||
this.$refs.table.reloadList()
|
||||
this.$get('menu/tree').then(res => {
|
||||
this.menuData = res.data.list
|
||||
this.$set(this.tableOptions, 'data', this.menuData)
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
for (var t in this.temp) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user