110 lines
2.7 KiB
Vue
110 lines
2.7 KiB
Vue
<template>
|
|
<ai-detail list class="List">
|
|
<template slot="title">
|
|
<ai-title title="组织换届" isShowBottomBorder>
|
|
<template #rightBtn>
|
|
<el-button size="small" type="primary" @click="toAdd(selected.id)" v-if="hasConfig&&permissions('app_apporganizationchangeconfig')">换届设置
|
|
</el-button>
|
|
</template>
|
|
</ai-title>
|
|
</template>
|
|
<el-row slot="content" type="flex">
|
|
<ai-tree-menu title="组织目录" searchPlaceholder="请输入组织名称" @search="onSearch">
|
|
<ai-party-tree
|
|
:filter-node-method="filterNode"
|
|
ref="tree"
|
|
:instance="instance"
|
|
:root="user.info.organizationId"
|
|
:current-node-key="selected.id"
|
|
@select="onTreeChange"/>
|
|
</ai-tree-menu>
|
|
<el-scrollbar class="fill mar-l16 mainContent">
|
|
<ai-card title="当前届次">
|
|
<moment slot="content" :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
|
|
</ai-card>
|
|
<ai-card title="历史届次" v-if="hasConfig">
|
|
<history slot="content" :selected="selected" v-on="$listeners"/>
|
|
</ai-card>
|
|
</el-scrollbar>
|
|
</el-row>
|
|
</ai-detail>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
import moment from './moment.vue'
|
|
import history from './history.vue'
|
|
|
|
export default {
|
|
name: 'List',
|
|
inject: ['permissions', 'instance', 'dict'],
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{label: '当前届次', name: 'moment', comp: moment, permission: ''},
|
|
{label: '历史届次', name: 'history', comp: history, permission: ''}
|
|
],
|
|
currIndex: '0',
|
|
selected: null,
|
|
hasConfig: false
|
|
}
|
|
},
|
|
components: {
|
|
moment,
|
|
history,
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
methods: {
|
|
onTreeChange(e) {
|
|
this.selected = e
|
|
},
|
|
onSearch(v) {
|
|
this.$refs.tree?.$refs?.partyTree?.filter(v)
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true
|
|
return data.name.indexOf(value) !== -1
|
|
},
|
|
toAdd(oid) {
|
|
this.$router.push({hash: "#add", query: {oid}})
|
|
},
|
|
},
|
|
created() {
|
|
const {organizationId: id, organizationName: name} = this.user.info
|
|
this.selected = {id, name}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.List {
|
|
position: relative;
|
|
|
|
:deep(.ai-detail__content--wrapper ){
|
|
height: 100%;
|
|
|
|
& > * {
|
|
height: inherit;
|
|
}
|
|
|
|
.mainContent {
|
|
.el-scrollbar__wrap {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
.AiTreeMenu {
|
|
min-width: 300px;
|
|
box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
|
|
}
|
|
}
|
|
|
|
:deep( .is-current > .el-tree-node__content ){
|
|
width: 100% !important;
|
|
padding-right: 16px !important;
|
|
}
|
|
}
|
|
</style>
|