90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<template>
|
|
<van-popup v-model="popupShow"
|
|
position="right"
|
|
:style="{ height: '100%', width: '90%' }"
|
|
round
|
|
:close-on-click-overlay="false"
|
|
@click-overlay="handleCancel">
|
|
<h3 class="popup-title">
|
|
<span>体系结构</span>
|
|
<van-icon name="cross" size="22px" @click="handleCancel" />
|
|
</h3>
|
|
<div class="popup-main">
|
|
<folderTree ref="folderTreeRef" @checked="getChecked"></folderTree>
|
|
</div>
|
|
<div class="popup-footer">
|
|
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleReset">重置</el-button>
|
|
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleCancel">取消</el-button>
|
|
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="handleOk">确定</el-button>
|
|
</div>
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import folderTree from "./folderTree";
|
|
export default {
|
|
name: "folderPopup",
|
|
components: {
|
|
folderTree,
|
|
},
|
|
data () {
|
|
return {
|
|
popupShow: false,
|
|
currentData: {}
|
|
}
|
|
},
|
|
methods: {
|
|
open (id) {
|
|
this.popupShow = true
|
|
this.$nextTick(() => {
|
|
this.$refs.folderTreeRef.setCurrentKey(id)
|
|
})
|
|
},
|
|
hide () {
|
|
this.popupShow = false
|
|
},
|
|
getChecked (obj) {
|
|
this.currentData = obj
|
|
},
|
|
handleOk () {
|
|
this.$emit('checked', this.currentData)
|
|
this.hide()
|
|
},
|
|
handleCancel () {
|
|
this.hide()
|
|
},
|
|
handleReset () {
|
|
this.$emit('checked', {})
|
|
this.hide()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.popup-title{
|
|
line-height: 1rem;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding: 0 0.3rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.popup-main{
|
|
height: calc(100vh - 1rem - 50px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
}
|
|
.popup-footer{
|
|
border-top: 1px solid #e8e8e8;
|
|
text-align: right;
|
|
padding-right: 0.2rem;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
position: fixed;
|
|
bottom: 1px;
|
|
width: 100%;
|
|
}
|
|
</style>
|