Compare commits
3 Commits
82aeb2818f
...
86b69caad8
| Author | SHA1 | Date | |
|---|---|---|---|
| 86b69caad8 | |||
| a767b0a14c | |||
| 59d90eabb3 |
@ -1,58 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="left-content-order fix-table">
|
<div class="left-content-order fix-table">
|
||||||
<techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
|
<techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
|
||||||
|
|
||||||
<!--
|
|
||||||
<el-table
|
|
||||||
key="LeftContentOrder1"
|
|
||||||
border
|
|
||||||
:data="tableData"
|
|
||||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
|
||||||
height="100%"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
label="订单编号"
|
|
||||||
prop="orderCode"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
:resizable="true"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
label="客户名称"
|
|
||||||
prop="clientName"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
:resizable="true"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column label="规格" prop="specs" :resizable="true" align="center" :width="100" />
|
|
||||||
<el-table-column label="完成度" prop="finished" :resizable="true" align="center" :width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-progress
|
|
||||||
class="lb-progress-bar"
|
|
||||||
type="circle"
|
|
||||||
:percentage="scope.row.finished"
|
|
||||||
:width="14"
|
|
||||||
:stroke-width="2"
|
|
||||||
color="#47FF27"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <div class="el-table-wrapper">
|
|
||||||
<el-table
|
|
||||||
key="LeftContentOrder2"
|
|
||||||
border
|
|
||||||
:data="tableData2"
|
|
||||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
|
||||||
>
|
|
||||||
<el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
|
|
||||||
<el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
|
|
||||||
<el-table-column label="规格" prop="specs" :resizable="true" />
|
|
||||||
<el-table-column label="完成度" prop="finished" :resizable="true" />
|
|
||||||
</el-table>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -18,7 +18,6 @@
|
|||||||
<LeftContentPublicConsume />
|
<LeftContentPublicConsume />
|
||||||
</techy-container>
|
</techy-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="techy-body-part__middle">
|
<div class="techy-body-part__middle">
|
||||||
<TechyBox>
|
<TechyBox>
|
||||||
@ -42,6 +41,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</TechyBox>
|
</TechyBox>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="techy-body-part__right">
|
<div class="techy-body-part__right">
|
||||||
<div class="realtime">
|
<div class="realtime">
|
||||||
@ -218,6 +219,7 @@ export default {
|
|||||||
padding: calc(24px * var(--beilv));
|
padding: calc(24px * var(--beilv));
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
gap: calc(16px * var(--beilv));
|
gap: calc(16px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -279,11 +281,12 @@ export default {
|
|||||||
/* height: calc(512px * var(--beilv));
|
/* height: calc(512px * var(--beilv));
|
||||||
flex: 1; */
|
flex: 1; */
|
||||||
width: calc(472px * var(--beilv));
|
width: calc(472px * var(--beilv));
|
||||||
overflow: hidden;
|
overflow: unset;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: calc(16px * var(--beilv));
|
gap: calc(16px * var(--beilv));
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__right-col-2 {
|
.techy-body-part__right-col-2 {
|
||||||
@ -292,9 +295,15 @@ export default {
|
|||||||
gap: calc(100vmin / 1920 * 36);
|
gap: calc(100vmin / 1920 * 36);
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__middle {
|
/* .techy-body-part__middle {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.techy-body-part__middle {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: calc(-16px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__middle .techy-box {
|
.techy-body-part__middle .techy-box {
|
||||||
|
|||||||
14
src/views/UserPage/=.svg
Normal file
14
src/views/UserPage/=.svg
Normal 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 |
135
src/views/UserPage/TestMenuItem.vue
Normal file
135
src/views/UserPage/TestMenuItem.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<template slot="title">
|
||||||
|
<!-- <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 + 1" />
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
|
||||||
|
<!-- 一级菜单 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TestMenuItem',
|
||||||
|
props: {
|
||||||
|
level: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
menuItem: {
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
defaultActive: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
constructIndex(menuItem) {
|
||||||
|
return menuItem.id + '$--$' + menuItem.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@ -27,80 +27,89 @@
|
|||||||
</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">
|
||||||
<ul class="root-routes">
|
<el-menu @select="handleSelect">
|
||||||
<li class="parent-route">
|
<!-- 此处假设了只有一个根节点 -->
|
||||||
<div class="route-title">
|
<template v-for="(menuItem, index) in menuListTrue[0].children">
|
||||||
<div>
|
<TestMenuItem :level="1" :menuItem="menuItem" />
|
||||||
<span class="menu-icon">
|
</template>
|
||||||
<span class="line" />
|
</el-menu>
|
||||||
<span class="line" />
|
|
||||||
<span class="line" />
|
|
||||||
</span>
|
|
||||||
<span>制造部</span>
|
|
||||||
</div>
|
|
||||||
<span class="arrow-icon rotate-down">
|
|
||||||
<span class="arrow-line1" />
|
|
||||||
<span class="arrow-line2" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ul class="children-routes">
|
|
||||||
<li class="parent-route">
|
|
||||||
<div class="route-title" style="padding-left: 16px;">
|
|
||||||
<div>
|
|
||||||
<span class="menu-icon">
|
|
||||||
<!-- level - 2 -->
|
|
||||||
<span class="circle" />
|
|
||||||
</span>
|
|
||||||
<span>人力资源</span>
|
|
||||||
</div>
|
|
||||||
<span class="arrow-icon">
|
|
||||||
<span class="arrow-line1" />
|
|
||||||
<span class="arrow-line2" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ul class="children-routes">
|
|
||||||
<li class="leaf-route" style="padding-left: 32px;">小组1</li>
|
|
||||||
<li class="leaf-route" style="padding-left: 32px;">小组2</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="leaf-route" style="padding-left: 16px;">小组2</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="leaf-route">财政部</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
<section class="footer-area" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import TestMenuItem from './TestMenuItem.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'TestTree',
|
name: 'TestTree',
|
||||||
props: {},
|
props: {
|
||||||
data() {
|
menuList: {
|
||||||
return {}
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {},
|
components: { TestMenuItem },
|
||||||
mounted() {},
|
data() {
|
||||||
methods: {}
|
return {
|
||||||
|
menuListTrue: [],
|
||||||
|
showList: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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) {
|
||||||
|
const [id, name] = index.split('$--$')
|
||||||
|
this.$emit('getOrganization', { id, name })
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.test-tree {
|
.test-tree {
|
||||||
background: lightblue;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 24px;
|
padding: 24px 0 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-area {
|
.title-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.routes-area {
|
.routes-area {
|
||||||
@ -121,112 +130,16 @@ export default {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
.routes-area >>> .el-submenu__title,
|
||||||
li {
|
.routes-area >>> .el-menu-item {
|
||||||
margin: 0;
|
font-size: 14px;
|
||||||
padding: 0;
|
line-height: 40px;
|
||||||
list-style: none;
|
height: 40px;
|
||||||
|
letter-spacing: 0.88px;
|
||||||
}
|
}
|
||||||
.parent-route div {
|
/*
|
||||||
display: flex;
|
.routes-area >>> .el-submenu__title span,
|
||||||
align-items: center;
|
.routes-area >>> .el-menu-item span {
|
||||||
}
|
|
||||||
|
|
||||||
.route-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.menu-icon {
|
|
||||||
height: 14px;
|
|
||||||
width: 14px;
|
|
||||||
margin-right: 6px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.508);
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-icon {
|
|
||||||
position: relative;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-line1,
|
|
||||||
.arrow-line2 {
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 1px;
|
|
||||||
background-color: #000a;
|
|
||||||
transform-origin: top 50% left 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-line1 {
|
|
||||||
top: 1px;
|
|
||||||
left: 0;
|
|
||||||
transform: rotateZ(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-line2 {
|
|
||||||
left: 0;
|
|
||||||
bottom: 1px;
|
|
||||||
transform: rotateZ(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotate-down {
|
|
||||||
/* transform-origin: top 50%; */
|
|
||||||
transform: rotateZ(90deg);
|
|
||||||
}
|
|
||||||
.circle {
|
|
||||||
width: 70%;
|
|
||||||
height: 70%;
|
|
||||||
background-color: #000c;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 70%;
|
|
||||||
height: 70%;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 15%;
|
|
||||||
left: 15%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* span.arrow-icon {
|
|
||||||
background: url('./right.png') 100% 100% / contain no-repeat;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
li.parent-route {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
/* background: lightpink; */
|
|
||||||
}
|
|
||||||
|
|
||||||
li.leaf-route::before {
|
|
||||||
content: '\25E6';
|
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.parent-route div.route-title:hover,
|
|
||||||
li.parent-route div.route-title:hover .circle::after,
|
|
||||||
li.leaf-route:hover {
|
|
||||||
background: #ccc;
|
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
11
src/views/UserPage/o.svg
Normal file
11
src/views/UserPage/o.svg
Normal 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 |
@ -9,21 +9,21 @@
|
|||||||
<div class="app-container system-manage-landpage">
|
<div class="app-container system-manage-landpage">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-aside>
|
<el-aside>
|
||||||
<side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
|
<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-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 label-width="60px" :label="$t('userManage.orgName') + '：'">
|
|
||||||
<span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('userManage.userName') + '：'" prop="name">
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<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"
|
||||||
@ -34,6 +34,8 @@
|
|||||||
<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"
|
||||||
@ -69,6 +71,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import TestTree from './TestTree.vue'
|
||||||
import sideTree from '../system-manage/sideTree'
|
import sideTree from '../system-manage/sideTree'
|
||||||
import { getOrgList } from '@/api/org'
|
import { getOrgList } from '@/api/org'
|
||||||
import AddUserForm from './AddUserForm'
|
import AddUserForm from './AddUserForm'
|
||||||
@ -157,7 +160,7 @@ const tableProps = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
|
components: { TestTree, sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
topBtnConfig,
|
topBtnConfig,
|
||||||
@ -223,6 +226,7 @@ export default {
|
|||||||
const res1 = await getOrgList(params)
|
const res1 = await getOrgList(params)
|
||||||
if (res1.code === 0) {
|
if (res1.code === 0) {
|
||||||
this.menuList = res1.data.records
|
this.menuList = res1.data.records
|
||||||
|
console.log('menulist===>', this.menuList)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getOrganization(data) {
|
getOrganization(data) {
|
||||||
@ -294,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;
|
||||||
@ -349,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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user