update 系统管理ui

This commit is contained in:
lb 2022-11-15 11:31:38 +08:00
parent 59d90eabb3
commit a767b0a14c
5 changed files with 255 additions and 54 deletions

14
src/views/UserPage/=.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1,22 +1,101 @@
<template> <template>
<el-submenu v-if="menuItem.children" :index="level ? level + '-' + index : '' + index"> <el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
<!-- 标题 --> <!-- 标题 -->
<template slot="title"> <template slot="title">
<i class="el-icon-menu"></i> <!-- <i class="el-icon-menu"></i> -->
<span>{{ menuItem.label }}</span> <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>
<!-- 主体 --> <!-- 主体 -->
<template v-for="(submenuItem, idx) in menuItem.children"> <template v-for="(submenuItem, idx) in menuItem.children">
<TestMenuItem :menuItem="submenuItem" :level="level + '-' + index" :index="idx" /> <TestMenuItem :menuItem="submenuItem" :level="level + 1" />
</template> </template>
</el-submenu> </el-submenu>
<!-- 一级菜单 --> <!-- 一级菜单 -->
<el-menu-item v-else :index="level ? level + '-' + index : '' + index"> <el-menu-item v-else :index="constructIndex(menuItem)">
<i v-if="+level !== 1" class="el-icon-aim"></i> <!-- <i v-if="level !== 1" class="el-icon-aim"></i>
<i v-else class="el-icon-menu"></i> <i v-else class="el-icon-menu"></i> -->
<span slot="title">{{ menuItem.label }}</span> <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> </el-menu-item>
</template> </template>
@ -25,12 +104,12 @@ export default {
name: 'TestMenuItem', name: 'TestMenuItem',
props: { props: {
level: { level: {
type: String, type: Number,
default: 1 default: 1
}, },
index: { index: {
type: Number, type: String,
default: 0 default: ''
}, },
menuItem: { menuItem: {
default: () => ({}) default: () => ({})
@ -45,7 +124,11 @@ export default {
}, },
created() {}, created() {},
mounted() {}, mounted() {},
methods: {} methods: {
constructIndex(menuItem) {
return menuItem.id + '$--$' + menuItem.name
}
}
} }
</script> </script>

View File

@ -27,10 +27,11 @@
</span> </span>
<span class="title-content">合肥新能源工厂</span> <span class="title-content">合肥新能源工厂</span>
</section> </section>
<section class="routes-area"> <section class="routes-area" v-if="showList">
<el-menu default-active="1-0-0" @select="handleSelect"> <el-menu @select="handleSelect">
<template v-for="(menuItem, index) in testData"> <!-- 此处假设了只有一个根节点 -->
<TestMenuItem :index="index" level="1" :menuItem="menuItem" /> <template v-for="(menuItem, index) in menuListTrue[0].children">
<TestMenuItem :level="1" :menuItem="menuItem" />
</template> </template>
</el-menu> </el-menu>
</section> </section>
@ -41,23 +42,55 @@
import TestMenuItem from './TestMenuItem.vue' import TestMenuItem from './TestMenuItem.vue'
export default { export default {
name: 'TestTree', name: 'TestTree',
props: {}, props: {
menuList: {
type: Array,
default: () => []
}
},
components: { TestMenuItem }, components: { TestMenuItem },
data() { data() {
return { return {
testData: [ menuListTrue: [],
{ id: 0, label: '制造部', children: [{ label: '小组1' }, { label: '小组2' }] }, showList: false
{ id: 1, label: '综合管理部' },
{ id: 2, label: '销售部' }
]
} }
}, },
created() {},
mounted() {}, mounted() {
this.$nextTick(() => {
this.reconstructMenuList()
})
},
methods: { 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) { handleSelect(index, indexPath) {
console.log('key, keyPath:', index, indexPath) const [id, name] = index.split('$--$')
this.$emit('getOrganization', { id, name: label }) this.$emit('getOrganization', { id, name })
} }
} }
} }
@ -65,12 +98,11 @@ export default {
<style scoped> <style scoped>
.test-tree { .test-tree {
background: lightblue;
height: 100%; height: 100%;
padding: 24px 0; padding: 24px 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 16px;
} }
.title-area { .title-area {
@ -97,4 +129,17 @@ export default {
font-size: 16px; font-size: 16px;
line-height: 1; 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> </style>

11
src/views/UserPage/o.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 858 B

View File

@ -9,32 +9,33 @@
<div class="app-container system-manage-landpage"> <div class="app-container system-manage-landpage">
<el-container> <el-container>
<el-aside> <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" /> --> <!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
</el-aside> </el-aside>
<el-main> <el-main>
<el-form <el-form ref="dataForm" :model="dataForm" :inline="true" size="mini" label-position="left">
ref="dataForm" <el-row>
:model="dataForm" <el-col style="margin: 0 0 28px;">
:inline="true" <!-- <el-form-item class="has-icon" label-width="100px" :label="$t('userManage.orgName')"> -->
size="medium" <el-form-item class="has-icon">
label-width="100px" <span v-if="dataForm.orgName">{{ dataForm.orgName }}</span>
label-position="left" <span v-else>用户管理</span>
> </el-form-item>
<el-form-item label-width="60px" :label="$t('userManage.orgName') + ''"> </el-col>
<span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span> <el-col>
</el-form-item> <el-form-item :label="$t('userManage.userName')" prop="name">
<el-form-item :label="$t('userManage.userName') + ''" prop="name"> <el-input
<el-input v-model="dataForm.name"
v-model="dataForm.name" :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
:placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" clearable
clearable :style="{ width: '100%' }"
:style="{ width: '100%' }" />
/> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button> </el-form-item>
</el-form-item> </el-col>
</el-row>
</el-form> </el-form>
<base-table <base-table
:top-btn-config="topBtnConfig" :top-btn-config="topBtnConfig"
@ -240,7 +241,7 @@ export default {
confirmButtonText: i18n.t('btn.confirm'), confirmButtonText: i18n.t('btn.confirm'),
cancelButtonText: i18n.t('btn.cancel'), cancelButtonText: i18n.t('btn.cancel'),
type: 'warning' type: 'warning'
}).then(async() => { }).then(async () => {
// //
const result = await delUser({ const result = await delUser({
id: raw.data.id id: raw.data.id
@ -297,11 +298,13 @@ export default {
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: #fff;
width: 256px !important; width: 256px !important;
padding-top: 20px;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
aside {
padding: 0;
}
.el-container >>> .el-main { .el-container >>> .el-main {
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: #fff;
@ -352,4 +355,49 @@ export default {
letter-spacing: 0.88px; letter-spacing: 0.88px;
color: #161616; 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> </style>