131 lines
3.2 KiB
Vue
131 lines
3.2 KiB
Vue
<!--
|
|
* @name: 组织机构选择
|
|
* @author:zhangpengcheng
|
|
* @CreateTime:2022-10-26
|
|
-->
|
|
<template>
|
|
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" @handleConfirmClick="handleConfirmClick"
|
|
@handleClose="handleClose" :dialogVisible="dialogVisible" class="userDialog" title="选择机构部门" :width="width"
|
|
:top="top" :footerShow="true" @close='close'>
|
|
<div class="organizationBody">
|
|
<base-layout title="组织机构" class="box" style="overflow: auto;" :operateButtonSwitch="false"
|
|
:mainColor="mainColor" :mainHight='mainHight' :bodyHight="treeHight">
|
|
<div slot="main">
|
|
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
|
|
:menuData="menuData" @handleNodeClick="handleNodeClick">
|
|
</base-tree>
|
|
</div>
|
|
</base-layout>
|
|
<base-layout title="选中机构" class="box" :operateButtonSwitch="false" :mainHight="mainHight"
|
|
:bodyHight="treeHight">
|
|
<div slot="main" style="padding: 10px;">
|
|
<div flex="cross:center" style="margin-bottom: 10px;">
|
|
<label style="width: 35%;">机构编码</label>
|
|
<el-input style="flex:1;" v-model="organizationForm.id" disabled></el-input>
|
|
</div>
|
|
<div flex="cross:center">
|
|
<label style="width: 35%;">机构名称</label>
|
|
<el-input style="flex:1" v-model="organizationForm.label" disabled></el-input>
|
|
</div>
|
|
</div>
|
|
</base-layout>
|
|
</div>
|
|
</base-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import baseDialog from "@/components/base/BaseNewDialog/index.vue"
|
|
import baseTree from "@/components/base/BaseMenuTree/index.vue"
|
|
import baseLayout from "@/components/base/baseLayout"
|
|
export default {
|
|
components: {
|
|
baseLayout,
|
|
baseTree,
|
|
baseDialog,
|
|
},
|
|
props: {
|
|
width: {
|
|
type: String,
|
|
default: '700px'
|
|
},
|
|
top: {
|
|
type: String,
|
|
default: '10vh'
|
|
},
|
|
mainColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
mainHight: {
|
|
type: String,
|
|
default: 'calc(100% - 38px)'
|
|
},
|
|
treeHight: {
|
|
type: String,
|
|
default: '350px'
|
|
},
|
|
menuData: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
organizationForm: {},
|
|
dialogVisible: false,
|
|
}
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.qingkong()
|
|
},
|
|
qingkong() {
|
|
this.$refs.baseTree.$refs.elTree.setCurrentKey(null);
|
|
},
|
|
// 点击确定
|
|
handleConfirmClick() {
|
|
if (JSON.stringify(this.organizationForm) == "{}") {
|
|
this.$vmNews('请选择组织机构！')
|
|
return
|
|
} else {
|
|
this.$emit('handleConfirmClick', this.organizationForm)
|
|
this.clearFrom()
|
|
}
|
|
},
|
|
handleClose() {
|
|
this.dialogVisible = false
|
|
this.clearFrom()
|
|
},
|
|
// 菜单树选中
|
|
handleNodeClick(data) {
|
|
console.log(data)
|
|
this.organizationForm = data
|
|
},
|
|
// 清空form
|
|
clearFrom() {
|
|
this.assignmentForm({})
|
|
},
|
|
// form赋值
|
|
assignmentForm(value) {
|
|
this.organizationForm = Object.assign({}, value)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.organizationBody {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
background-color: #f2f3f4;
|
|
padding: 10px;
|
|
|
|
.box {
|
|
width: 45%;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
</style>
|