update 添加侧边栏组件
This commit is contained in:
yoe
parent
a95b45265d
commit
8fd7b712b1
42
src/components/menu-tree/index.vue
Normal file
42
src/components/menu-tree/index.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<el-submenu
|
||||
v-if="menu.children && menu.children.length >= 1"
|
||||
:index="menu.id + ''">
|
||||
<template slot="title">
|
||||
<icon-svg :name="menu.icon==null?'':menu.icon" class="site-sidebar__menu-icon"></icon-svg>
|
||||
<span>{{menu.name}} ({{menu.number}})</span>
|
||||
</template>
|
||||
<menu-tree
|
||||
v-for="item in menu.children"
|
||||
:key="item.id"
|
||||
:menu="item">
|
||||
</menu-tree>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="menu.id.toString()" @click.native="handleGoRoute(menu)">
|
||||
<icon-svg :name="menu.icon==null?'':menu.icon" class="site-sidebar__menu-icon"></icon-svg>
|
||||
<span>{{menu.name}} ({{menu.number}})</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuTree from './index'
|
||||
|
||||
export default {
|
||||
name: 'menu-tree',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
menuTree
|
||||
},
|
||||
methods: {
|
||||
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
||||
handleGoRoute (menu) {
|
||||
this.$router.push({name: 'staff', query: {id: menu.id}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,37 +1,251 @@
|
||||
<template>
|
||||
<div class="staff-archives">
|
||||
员工档案
|
||||
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
|
||||
<div class="staff">
|
||||
<el-card>
|
||||
<el-row>
|
||||
<el-col class="menu" :span="6">
|
||||
<el-menu @open="openMenu" :default-active="current" :collapse-transition="true" :unique-opened="true">
|
||||
<menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="block">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="员工姓名"><el-input v-model="searchParams.staffName"></el-input></el-form-item>
|
||||
<el-form-item label="人员状态">
|
||||
<el-select v-model="searchParams.staffState" placeholder="请选择">
|
||||
<el-option v-for="item in staffStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTable()">查询</el-button>
|
||||
<el-button @click="clear()">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
|
||||
style="width: 100%"
|
||||
height="100%">
|
||||
<el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="bl-form3"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="pageTotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuTree from '@/components/menu-tree'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
menuTree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuList: [], // 架构数据
|
||||
tableData: [], // 表格数据
|
||||
// 搜索数据
|
||||
searchParams: {
|
||||
staffName: '',
|
||||
staffState: ''
|
||||
},
|
||||
// 在职状态
|
||||
staffStateList: [
|
||||
{ value: '0', label: '在职' },
|
||||
{ value: '1', label: '离职' }
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
deptId: '',
|
||||
// 弹窗相关
|
||||
showAddDialogForm: false,
|
||||
activeName: 'first',
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.handleDrawLine()
|
||||
watch: {
|
||||
$route: function (val) {
|
||||
if (val.name === 'staff') {
|
||||
this.clearData()
|
||||
this.handleGetTableList(val.query.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current () {
|
||||
return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.handleGetMenuList()
|
||||
this.handleGetTableList(this.current)
|
||||
},
|
||||
methods: {
|
||||
handleDrawLine () {
|
||||
let myChart = this.$echarts.init(document.getElementById('myChart'))
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
title: { text: '在Vue中使用echarts' },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}]
|
||||
})
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 70990627,
|
||||
'name': '结算部',
|
||||
'parentId': 55969991,
|
||||
'number': '1'
|
||||
}
|
||||
],
|
||||
'id': 55969991,
|
||||
'name': '结算中心',
|
||||
'parentId': 1,
|
||||
'number': 2
|
||||
}, {
|
||||
'children': [
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 92131240,
|
||||
'name': '金融运营团队',
|
||||
'parentId': 87839336
|
||||
},
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124111,
|
||||
'name': '2B业务组',
|
||||
'parentId': 92131239
|
||||
},
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124222,
|
||||
'name': '2C业务组',
|
||||
'parentId': 92131239
|
||||
}
|
||||
],
|
||||
'id': 92131239,
|
||||
'name': '电商运营团队',
|
||||
'parentId': 87839336
|
||||
}
|
||||
],
|
||||
'id': 87839336,
|
||||
'name': '运营中心',
|
||||
'parentId': 87839327
|
||||
}
|
||||
],
|
||||
'id': 87839327,
|
||||
'name': '业务前台',
|
||||
'parentId': 1
|
||||
}]
|
||||
this.menuList = data
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.$router.push({name: 'staff', query: {id: ''}})
|
||||
},
|
||||
clearData () {
|
||||
this.tableData = []
|
||||
this.currentPage = 1
|
||||
this.pageTotal = 10
|
||||
this.loading = true
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.pageSize = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 弹窗相关
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
handleView () {
|
||||
this.showAddDialogForm = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.staff .block, .staff .table {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-form-item .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.add-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.turn-work-list {
|
||||
background-color: pink;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bl-form3{
|
||||
&.el-pagination{
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate } from '@/utils'
|
||||
import Icon from '@/icons'
|
||||
import Icon from '@/element/icons'
|
||||
import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
|
||||
|
||||
export default {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user