<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<div class="body_left">
|
<div style="margin:10px 0">
|
<i class="el-icon-s-comment" style="color:#42b983;" /> 车间信息：
|
</div>
|
<el-input
|
v-model="filterText"
|
placeholder="输入关键字进行过滤"
|
style="margin-bottom: 20px"
|
/>
|
<el-tree
|
ref="tree"
|
class="filter-tree"
|
:data="shopTree"
|
:props="defaultProps"
|
highlight-current
|
default-expand-all
|
:style="{height: contentHeight+'px',overflowY:'auto'}"
|
:filter-node-method="filterNode"
|
/>
|
</div>
|
<div class="body_right">
|
<el-tabs type="border-card">
|
<el-tab-pane label="用户管理">
|
<div :style="{height: (contentHeight+51)+'px'}">
|
<div class="pane_top">
|
<div style="display: flex;align-items: center">
|
<div class="bar" />
|
<div>响应人员</div>
|
<el-button
|
icon="el-icon-circle-plus-outline"
|
style="height: 30px;line-height: 30px;color: #42b983;font-size: 22px;padding: 10px"
|
/>
|
</div>
|
<div>
|
<el-checkbox v-model="allowClose">允许关闭</el-checkbox>
|
</div>
|
</div>
|
<el-empty v-if="tags.length===0" :image-size="200" description="暂无数据" />
|
<div v-else class="pane_content" :style="{maxHeight:contentHeight+'px',overflowY: 'scroll'}">
|
<el-tag
|
v-for="tag in tags"
|
:key="tag.name"
|
closable
|
type="success"
|
style="margin-right: 10px;margin-bottom: 10px"
|
@close="val=>tagClose(val,tag)"
|
>
|
{{ tag.name }}
|
</el-tag>
|
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="配置管理">
|
<div :style="{height: (contentHeight+51)+'px'}">
|
配置管理
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="角色管理">
|
<div :style="{height: (contentHeight+51)+'px'}">
|
角色管理
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="定时任务补偿">
|
<div :style="{height: (contentHeight+51)+'px'}">
|
定时任务补偿
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-button
|
style="position: absolute;top: 15px;right:10px;z-index: 1000"
|
icon="el-icon-setting"
|
@click="setting"
|
>自定义呼叫类型
|
</el-button>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
|
import { ShopSearch } from '@/api/dzkb'
|
import { AnDengTypeSearch } from '@/api/jcsz'
|
|
export default {
|
name: 'Zzjg',
|
|
data() {
|
return {
|
mainHeight: 0,
|
contentHeight: 0,
|
filterText: '',
|
shopTree: [], // 树形车间
|
defaultProps: {
|
children: 'children',
|
label: 'org_name'
|
},
|
allowClose: true, // 允许关闭
|
tags: [
|
{ name: '标签一' },
|
{ name: '标签二' },
|
{ name: '标签三' },
|
{ name: '标签四' }
|
]
|
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
created() {
|
this.handleRequest()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
handleRequest() {
|
this.getShopSearch().then(res => {
|
if (res.code === '200') {
|
this.getAnDengTypeSearch()
|
}
|
})
|
},
|
async getShopSearch() {
|
const { data: res } = await ShopSearch()
|
this.shopTree = res
|
},
|
async getAnDengTypeSearch() {
|
// const { data: res } = await AnDengTypeSearch()
|
},
|
|
// 过滤节点
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
// 自定义呼叫类型
|
setting() {
|
|
},
|
// tag关闭事件
|
tagClose(val, tag) {
|
console.log(val, tag)
|
},
|
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.contentHeight = this.mainHeight - 142
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<!--本页面单独样式-->
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
.body {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.body_left {
|
width: 360px;
|
background-color: #fff;
|
margin: 10px 0;
|
padding: 10px;
|
flex-direction: column;
|
}
|
|
.body_right {
|
width: 100%;
|
background-color: #fff;
|
margin: 10px 0 10px 10px;
|
}
|
|
.pane_top{
|
background-color: #fafafa;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
margin-bottom: 20px;
|
.bar{
|
width: 4px;
|
height: 20px;
|
border-radius: 2px;
|
background-color: $main_color;
|
margin-right: 10px;
|
}
|
}
|
.pane_content{
|
background-color: #fafafa;
|
padding: 10px;
|
min-height: 400px;
|
}
|
|
::v-deep .is-current>.el-tree-node__content{
|
background-color: $main_color;
|
font-weight: bolder;
|
}
|
</style>
|
|
<!--公共页面样式-->
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
|
::v-deep .el-button--text {
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
|
color: $main_color;
|
cursor: pointer;
|
}
|
|
.el-icon-edit-outline {
|
margin-right: 15px;
|
}
|
|
::v-deep .el-button--primary, .el-button--default, .el-button--info {
|
height: 34px;
|
display: flex;
|
align-items: center;
|
padding: 0 15px;
|
}
|
|
::v-deep .el-button--default {
|
background-color: #f8f8fa;
|
border: none;
|
}
|
|
::v-deep .el-input__inner {
|
height: 34px;
|
line-height: 34px;
|
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 20px 100px !important;
|
}
|
|
::v-deep .dialogVisibleRoles .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .importPickerClass .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .el-dialog__footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
::v-deep .el-table .caret-wrapper {
|
transform: scale(0.8);
|
}
|
|
::v-deep .cell {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
::v-deep .el-table::before {
|
height: 0;
|
}
|
|
::v-deep .el-table__body-wrapper {
|
background-color: #f8f8fa;
|
}
|
|
::v-deep .el-table__body .el-table__row.hover-row td {
|
background-color: #eaecef;
|
}
|
|
::v-deep .el-form--inline .el-form-item__label {
|
color: #a7a7a7;
|
}
|
|
.body ::v-deep .el-divider {
|
border: 1px solid #eee;
|
width: 99%;
|
margin: 10px auto;
|
}
|
|
.body ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
.userDialogVisible ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-select__caret {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.tableFixed {
|
::v-deep .el-table__fixed-right {
|
height: 100% !important;
|
}
|
|
::v-deep .el-table__fixed {
|
height: 100% !important;
|
}
|
}
|
</style>
|
|
<style>
|
.el-table .custom-row {
|
background: #f8f8fa;
|
}
|
</style>
|
