You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
9.2 KiB
287 lines
9.2 KiB
<template>
|
|
<!-- 权限配置 -->
|
|
<div class="dashboard-container" style="padding:20px">
|
|
<el-container>
|
|
<!-- 左侧内容 -->
|
|
<el-aside width="250px">
|
|
<div>
|
|
<el-input
|
|
|
|
placeholder="搜索"
|
|
v-model="filterText">
|
|
</el-input>
|
|
<el-tree
|
|
class="filter-tree"
|
|
:data="data"
|
|
:props="defaultProps"
|
|
default-expand-all
|
|
@node-click="treeClick"
|
|
:filter-node-method="filterNode"
|
|
ref="tree">
|
|
</el-tree>
|
|
</div>
|
|
|
|
</el-aside>
|
|
<!-- 右侧内容 -->
|
|
<el-main style="padding:10px">
|
|
<div style="">
|
|
<div style="width: 180px;float: left;">
|
|
<div class="tabletop" style="width:180px;border: 1px solid #DCDFE6;padding: 5px;height: 48px;padding: 12px 0;font-weight: 500;text-overflow: ellipsis;text-align: left;color: #909399;font-size: 14px;padding-left: 10px;">主菜单</div>
|
|
<div style="width:180px;border: 1px solid #DCDFE6;padding: 5px;">
|
|
<el-checkbox-group v-model="menu">
|
|
<el-checkbox style="margin-bottom:3px" label="绩效考核" name="type"></el-checkbox>
|
|
<el-checkbox style="margin-bottom:3px" label="hr系统" name="type"></el-checkbox>
|
|
<el-checkbox style="margin-bottom:3px" label="基础信息" name="type"></el-checkbox>
|
|
<el-checkbox style="margin-bottom:3px" label="数据提报" name="type"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
<div style="width: 180px;float: left;">
|
|
<div class="tabletop" style="width:180px;border: 1px solid #DCDFE6;padding: 5px;height: 48px;padding: 12px 0;font-weight: 500;text-overflow: ellipsis;text-align: left;color: #909399;font-size: 14px;padding-left: 10px;">
|
|
<el-checkbox v-model="checked">全选</el-checkbox>
|
|
</div>
|
|
<div v-for="(iteam,index) in tableData" style="width:180px;border: 0.5px solid #DCDFE6;height: 104px;font-weight: 500;text-overflow: ellipsis;text-align: left;font-size: 14px;padding-left: 10px;padding: 12px 5px;line-height: 4.15;padding-left: 10px;">
|
|
<el-checkbox v-model="checked">{{iteam.name}}</el-checkbox>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width:1000px">
|
|
<el-table-column
|
|
prop="date"
|
|
label="表单权限">
|
|
<template slot-scope="scope">
|
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="date"
|
|
label="列表权限">
|
|
<template slot-scope="scope">
|
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
<el-checkbox v-for="iteam in listQuan" :label="iteam" :key="iteam">{{iteam}}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="数据权限">
|
|
<template slot-scope="scope">
|
|
<el-radio-group v-model="radio">
|
|
<el-radio :label="3">本人</el-radio>
|
|
<el-radio :label="6">服务部门</el-radio>
|
|
<el-radio :label="9">全部</el-radio>
|
|
</el-radio-group>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const cityOptions = ['暂存', '提交', '打印', '删除'];
|
|
import { dutieslist,positionlist } from '@/api/personnel/post'
|
|
import { dutyclasslist,statedutyclass,eitedutyclassinfo,getdutyclassinfo,adddutyclass } from '@/api/duty/dimension'
|
|
export default {
|
|
name: 'Dashboard',
|
|
data() {
|
|
return {
|
|
radio:'',
|
|
checkAll: false,
|
|
checkedCities: ['暂存', '提交', '打印'],
|
|
cities: cityOptions,
|
|
listQuan:['新增','导入','导出','删除','打印二维码'],
|
|
isIndeterminate: true,
|
|
checked:'',
|
|
tableData: [{
|
|
date: '2016-05-02',
|
|
name: '期初向导',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: '初始设置',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: '编码规则',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: '清除数据',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}],
|
|
menu:'',
|
|
// 职务列表
|
|
dutiesList:[],
|
|
positionList:[],
|
|
// 查询详情的数据
|
|
editFrom:{},
|
|
filterText: '',
|
|
data: [{
|
|
id: 1,
|
|
name: '角色',
|
|
children: [{
|
|
id: 4,
|
|
name: '超级管理员',
|
|
},{
|
|
id: 66,
|
|
name: '管理员',
|
|
}]
|
|
}, {
|
|
id: 2,
|
|
name: '职务',
|
|
children: []
|
|
}, {
|
|
id: 3,
|
|
name: '岗位',
|
|
children: []
|
|
}],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
created() {
|
|
console.log(this.$store.state.user.token)
|
|
if (this.$store.state.user.token=='') {
|
|
this.$router.push('/login')
|
|
}
|
|
// 页面渲染时获取初始数据
|
|
// this.getDataList()
|
|
this.getDutiesList()
|
|
this.getPositionlistList()
|
|
},
|
|
methods: {
|
|
|
|
// 点击左侧树回调函数
|
|
treeClick(val){
|
|
console.log("val")
|
|
console.log(val)
|
|
},
|
|
handleCheckAllChange(val) {
|
|
this.checkedCities = val ? cityOptions : [];
|
|
this.isIndeterminate = false;
|
|
},
|
|
handleCheckedCitiesChange(value) {
|
|
let checkedCount = value.length;
|
|
this.checkAll = checkedCount === this.cities.length;
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
|
},
|
|
// el 自带过滤函数
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.label.indexOf(value) !== -1;
|
|
},
|
|
// 获取职务列表数据
|
|
async getDutiesList() {
|
|
const searchInfo = {
|
|
page: 1, //分页页码，数字类型
|
|
pagesize: 1000000, //每页显示多少条数据
|
|
}
|
|
const res = await dutieslist(searchInfo)
|
|
this.dutiesList = res.data.list
|
|
this.data[1].children=this.dutiesList
|
|
},
|
|
// 获取岗位列表数据
|
|
async getPositionlistList() {
|
|
const searchInfo = {
|
|
page: 1, //分页页码，数字类型
|
|
pagesize: 1000000, //每页显示多少条数据
|
|
}
|
|
const res = await positionlist(searchInfo)
|
|
this.positionList = res.data.list
|
|
this.data[2].children=this.positionList
|
|
},
|
|
// 获取初始数据
|
|
// async getDataList() {
|
|
// const res = await dutyclasslist(this.searchInfo)
|
|
// this.tableData = res.data.list
|
|
// this.total = res.data.total
|
|
// this.searchInfo.page = res.data.page
|
|
// this.searchInfo.pagesize = res.data.pageSize
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-table__header .el-table-column--selection .cell .el-checkbox:after {
|
|
color: #333;
|
|
content: "全选" !important;
|
|
font-size: 16px;
|
|
margin-left: 12px;
|
|
font-weight: bold;
|
|
}
|
|
.tabletop{
|
|
padding: 12px 0;
|
|
min-width: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
// .el-aside::-webkit-scrollbar {
|
|
// display: none;
|
|
// }
|
|
// .el-input {
|
|
// width: 200px;
|
|
// }
|
|
// .el-header, .el-footer {
|
|
// background-color: #B3C0D1;
|
|
// color: #333;
|
|
// text-align: center;
|
|
// line-height: 60px;
|
|
// }
|
|
|
|
// .el-aside {
|
|
// background-color: #D3DCE6;
|
|
// color: #333;
|
|
// text-align: center;
|
|
// line-height: 200px;
|
|
// }
|
|
|
|
// .el-main {
|
|
// background-color: #E9EEF3;
|
|
// color: #333;
|
|
// text-align: center;
|
|
// line-height: 160px;
|
|
// }
|
|
|
|
// body > .el-container {
|
|
// margin-bottom: 40px;
|
|
// }
|
|
|
|
// .el-container:nth-child(5) .el-aside,
|
|
// .el-container:nth-child(6) .el-aside {
|
|
// line-height: 260px;
|
|
// }
|
|
|
|
// .el-container:nth-child(7) .el-aside {
|
|
// line-height: 320px;
|
|
// }
|
|
// .dashboard {
|
|
// &-container {
|
|
// margin: 30px;
|
|
// }
|
|
// &-text {
|
|
// font-size: 30px;
|
|
// line-height: 46px;
|
|
// }
|
|
// }
|
|
</style>
|
|
|