@@ -0,0 +1,14 @@ | |||
<?xml version="1.0" encoding="UTF-8"?> | |||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
<title>菜单</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero"> | |||
<g id="编组-7" transform="translate(376.000000, 200.000000)"> | |||
<g id="菜单" transform="translate(0.000000, 2.000000)"> | |||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect> | |||
<path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path> | |||
</g> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> |
@@ -1,22 +1,101 @@ | |||
<template> | |||
<el-submenu v-if="menuItem.children" :index="level ? level + '-' + index : '' + index"> | |||
<el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)"> | |||
<!-- 标题 --> | |||
<template slot="title"> | |||
<i class="el-icon-menu"></i> | |||
<span>{{ menuItem.label }}</span> | |||
<!-- <i class="el-icon-menu"></i> --> | |||
<i style="line-height: 1;"> | |||
<svg | |||
width="16px" | |||
height="16px" | |||
viewBox="0 0 16 16" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>菜单</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero"> | |||
<g id="编组-7" transform="translate(376.000000, 200.000000)"> | |||
<g id="菜单" transform="translate(0.000000, 2.000000)"> | |||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect> | |||
<path | |||
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" | |||
id="形状" | |||
fill="currentColor" | |||
></path> | |||
</g> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</i> | |||
<span>{{ menuItem.name }}</span> | |||
</template> | |||
<!-- 主体 --> | |||
<template v-for="(submenuItem, idx) in menuItem.children"> | |||
<TestMenuItem :menuItem="submenuItem" :level="level + '-' + index" :index="idx" /> | |||
<TestMenuItem :menuItem="submenuItem" :level="level + 1" /> | |||
</template> | |||
</el-submenu> | |||
<!-- 一级菜单 --> | |||
<el-menu-item v-else :index="level ? level + '-' + index : '' + index"> | |||
<i v-if="+level !== 1" class="el-icon-aim"></i> | |||
<i v-else class="el-icon-menu"></i> | |||
<span slot="title">{{ menuItem.label }}</span> | |||
<el-menu-item v-else :index="constructIndex(menuItem)"> | |||
<!-- <i v-if="level !== 1" class="el-icon-aim"></i> | |||
<i v-else class="el-icon-menu"></i> --> | |||
<i style="line-height: 1px" v-if="level !== 1"> | |||
<svg | |||
width="8px" | |||
height="8px" | |||
viewBox="0 0 8 8" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>椭圆形</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g | |||
id="质量追溯_设备参数追溯" | |||
transform="translate(-396.000000, -246.000000)" | |||
fill="currentColor" | |||
fill-rule="nonzero" | |||
> | |||
<g id="编组-3" transform="translate(396.000000, 240.000000)"> | |||
<path | |||
d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z" | |||
id="椭圆形" | |||
></path> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</i> | |||
<i style="line-height: 1;" v-else> | |||
<svg | |||
width="16px" | |||
height="16px" | |||
viewBox="0 0 16 16" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>菜单</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero"> | |||
<g id="编组-7" transform="translate(376.000000, 200.000000)"> | |||
<g id="菜单" transform="translate(0.000000, 2.000000)"> | |||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect> | |||
<path | |||
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" | |||
id="形状" | |||
fill="currentColor" | |||
></path> | |||
</g> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</i> | |||
<span slot="title">{{ menuItem.name }}</span> | |||
</el-menu-item> | |||
</template> | |||
@@ -25,12 +104,12 @@ export default { | |||
name: 'TestMenuItem', | |||
props: { | |||
level: { | |||
type: String, | |||
type: Number, | |||
default: 1 | |||
}, | |||
index: { | |||
type: Number, | |||
default: 0 | |||
type: String, | |||
default: '' | |||
}, | |||
menuItem: { | |||
default: () => ({}) | |||
@@ -45,7 +124,11 @@ export default { | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
methods: {} | |||
methods: { | |||
constructIndex(menuItem) { | |||
return menuItem.id + '$--$' + menuItem.name | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -27,10 +27,11 @@ | |||
</span> | |||
<span class="title-content">合肥新能源工厂</span> | |||
</section> | |||
<section class="routes-area"> | |||
<el-menu default-active="1-0-0" @select="handleSelect"> | |||
<template v-for="(menuItem, index) in testData"> | |||
<TestMenuItem :index="index" level="1" :menuItem="menuItem" /> | |||
<section class="routes-area" v-if="showList"> | |||
<el-menu @select="handleSelect"> | |||
<!-- 此处假设了只有一个根节点 --> | |||
<template v-for="(menuItem, index) in menuListTrue[0].children"> | |||
<TestMenuItem :level="1" :menuItem="menuItem" /> | |||
</template> | |||
</el-menu> | |||
</section> | |||
@@ -41,23 +42,55 @@ | |||
import TestMenuItem from './TestMenuItem.vue' | |||
export default { | |||
name: 'TestTree', | |||
props: {}, | |||
props: { | |||
menuList: { | |||
type: Array, | |||
default: () => [] | |||
} | |||
}, | |||
components: { TestMenuItem }, | |||
data() { | |||
return { | |||
testData: [ | |||
{ id: 0, label: '制造部', children: [{ label: '小组1' }, { label: '小组2' }] }, | |||
{ id: 1, label: '综合管理部' }, | |||
{ id: 2, label: '销售部' } | |||
] | |||
menuListTrue: [], | |||
showList: false | |||
} | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
mounted() { | |||
this.$nextTick(() => { | |||
this.reconstructMenuList() | |||
}) | |||
}, | |||
methods: { | |||
reconstructMenuList() { | |||
this.showList = false | |||
this.menuListTrue.splice(0) | |||
if (this.menuList) { | |||
this.menuList.forEach(item => { | |||
if (item.parentId === '-1') { | |||
this.menuListTrue.push(item) | |||
} else { | |||
this.constructMenuList(item) | |||
} | |||
}) | |||
} | |||
this.showList = true | |||
}, | |||
constructMenuList(child) { | |||
this.menuList.forEach(item => { | |||
if (child.parentId === item.id) { | |||
if (!('children' in item)) { | |||
this.$set(item, 'children', []) | |||
} | |||
item.children.push(child) | |||
} | |||
}) | |||
}, | |||
handleSelect(index, indexPath) { | |||
console.log('key, keyPath:', index, indexPath) | |||
this.$emit('getOrganization', { id, name: label }) | |||
const [id, name] = index.split('$--$') | |||
this.$emit('getOrganization', { id, name }) | |||
} | |||
} | |||
} | |||
@@ -65,12 +98,11 @@ export default { | |||
<style scoped> | |||
.test-tree { | |||
background: lightblue; | |||
height: 100%; | |||
padding: 24px 0; | |||
padding: 24px 0 0; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 24px; | |||
gap: 16px; | |||
} | |||
.title-area { | |||
@@ -97,4 +129,17 @@ export default { | |||
font-size: 16px; | |||
line-height: 1; | |||
} | |||
.routes-area >>> .el-submenu__title, | |||
.routes-area >>> .el-menu-item { | |||
font-size: 14px; | |||
line-height: 40px; | |||
height: 40px; | |||
letter-spacing: 0.88px; | |||
} | |||
/* | |||
.routes-area >>> .el-submenu__title span, | |||
.routes-area >>> .el-menu-item span { | |||
} | |||
*/ | |||
</style> |
@@ -0,0 +1,11 @@ | |||
<?xml version="1.0" encoding="UTF-8"?> | |||
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
<title>椭圆形</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-396.000000, -246.000000)" fill="#373738" fill-rule="nonzero"> | |||
<g id="编组-3" transform="translate(396.000000, 240.000000)"> | |||
<path d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z" id="椭圆形"></path> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> |
@@ -9,32 +9,33 @@ | |||
<div class="app-container system-manage-landpage"> | |||
<el-container> | |||
<el-aside> | |||
<TestTree /> | |||
<TestTree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> | |||
<!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> --> | |||
</el-aside> | |||
<el-main> | |||
<el-form | |||
ref="dataForm" | |||
:model="dataForm" | |||
:inline="true" | |||
size="medium" | |||
label-width="100px" | |||
label-position="left" | |||
> | |||
<el-form-item label-width="60px" :label="$t('userManage.orgName') + ':'"> | |||
<span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span> | |||
</el-form-item> | |||
<el-form-item :label="$t('userManage.userName') + ':'" prop="name"> | |||
<el-input | |||
v-model="dataForm.name" | |||
:placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" | |||
clearable | |||
:style="{ width: '100%' }" | |||
/> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button> | |||
</el-form-item> | |||
<el-form ref="dataForm" :model="dataForm" :inline="true" size="mini" label-position="left"> | |||
<el-row> | |||
<el-col style="margin: 0 0 28px;"> | |||
<!-- <el-form-item class="has-icon" label-width="100px" :label="$t('userManage.orgName')"> --> | |||
<el-form-item class="has-icon"> | |||
<span v-if="dataForm.orgName">{{ dataForm.orgName }}</span> | |||
<span v-else>用户管理</span> | |||
</el-form-item> | |||
</el-col> | |||
<el-col> | |||
<el-form-item :label="$t('userManage.userName')" prop="name"> | |||
<el-input | |||
v-model="dataForm.name" | |||
:placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" | |||
clearable | |||
:style="{ width: '100%' }" | |||
/> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
<base-table | |||
:top-btn-config="topBtnConfig" | |||
@@ -240,7 +241,7 @@ export default { | |||
confirmButtonText: i18n.t('btn.confirm'), | |||
cancelButtonText: i18n.t('btn.cancel'), | |||
type: 'warning' | |||
}).then(async() => { | |||
}).then(async () => { | |||
// 走接口 | |||
const result = await delUser({ | |||
id: raw.data.id | |||
@@ -297,11 +298,13 @@ export default { | |||
border-radius: 8px; | |||
background-color: #fff; | |||
width: 256px !important; | |||
padding-top: 20px; | |||
margin: 0; | |||
padding-left: 0; | |||
padding-right: 0; | |||
} | |||
aside { | |||
padding: 0; | |||
} | |||
.el-container >>> .el-main { | |||
border-radius: 8px; | |||
background-color: #fff; | |||
@@ -352,4 +355,49 @@ export default { | |||
letter-spacing: 0.88px; | |||
color: #161616; | |||
} | |||
.has-icon { | |||
position: relative; | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.has-icon::before { | |||
content: ''; | |||
width: 4px; | |||
border-radius: 2px; | |||
height: 55%; | |||
position: absolute; | |||
/* top: 13%; */ | |||
left: 0; | |||
background: #0b58ff; | |||
} | |||
:not(.has-icon) >>> .el-form-item__label { | |||
font-size: 14px; | |||
} | |||
.has-icon >>> .el-form-item__label { | |||
position: relative; | |||
left: 12px; | |||
font-size: 16px; | |||
} | |||
.has-icon >>> .el-form-item__content { | |||
font-size: 16px; | |||
margin-left: 12px; | |||
} | |||
.el-button--mini { | |||
padding: 6px 12px; | |||
border-radius: 4px; | |||
} | |||
/* .has-icon >>> .el-form-item__content { | |||
position: absolute; | |||
left: 24px; | |||
} */ | |||
.el-form-item { | |||
margin: 0; | |||
} | |||
</style> |