mirror of
https://github.com/dataease/dataease.git
synced 2025-02-27 13:52:53 +08:00
102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-button v-show="!showSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSearchWidget" />
|
|
<div v-show="showSearchInput" class="de-input">
|
|
<el-input v-model="key">
|
|
<el-button slot="append" icon="el-icon-close" @click="closeSearchWidget" />
|
|
</el-input>
|
|
</div>
|
|
|
|
<el-tabs v-model="activeName" :class="{'de-search-header': showSearchInput}" @tab-click="handleClick">
|
|
<el-tab-pane :lazy="true" class="de-tab" label="部门" :name="tabNames[0]"><grant-dept :ref="tabNames[0]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
|
|
<el-tab-pane :lazy="true" class="de-tab" label="角色" :name="tabNames[1]"><grant-role :ref="tabNames[1]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
|
|
<el-tab-pane :lazy="true" class="de-tab" label="用户" :name="tabNames[2]"><grant-user :ref="tabNames[2]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
|
|
</el-tabs>
|
|
<div class="auth-root-class">
|
|
<span slot="footer">
|
|
<el-button @click="cancel">取 消</el-button>
|
|
<el-button type="primary" @click="save">确 定</el-button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import GrantDept from './dept'
|
|
import GrantRole from './role'
|
|
import GrantUser from './user'
|
|
export default {
|
|
name: 'GrantAuth',
|
|
components: { GrantDept, GrantRole, GrantUser },
|
|
props: {
|
|
resourceId: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabNames: ['grantDept', 'grantRole', 'grantUser'],
|
|
activeName: null,
|
|
showSearchInput: false,
|
|
key: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.activeName = this.tabNames[0]
|
|
},
|
|
|
|
methods: {
|
|
handleClick(tab, event) {
|
|
console.log(tab, event)
|
|
},
|
|
showSearchWidget() {
|
|
this.showSearchInput = true
|
|
},
|
|
closeSearchWidget() {
|
|
this.key = ''
|
|
this.showSearchInput = false
|
|
},
|
|
save() {
|
|
this.$refs[this.activeName].save()
|
|
this.$emit('close-grant', 0)
|
|
},
|
|
cancel() {
|
|
this.$refs[this.activeName].cancel()
|
|
this.$emit('close-grant', 0)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.de-tab {
|
|
border:1px solid #E6E6E6;
|
|
min-height:200px !important;
|
|
max-height:300px !important;
|
|
overflow:auto;
|
|
}
|
|
.de-icon {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50px;
|
|
z-index: 99;
|
|
}
|
|
.el-input-group__append{
|
|
background-color: #ffffff;
|
|
}
|
|
.el-input__inner{
|
|
border-right: none;
|
|
}
|
|
|
|
.auth-root-class {
|
|
margin: 15px 0px 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
// ::-webkit-scrollbar {
|
|
|
|
// }
|
|
</style>
|