123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <template>
- <div class="sideTree" v-loading="load">
- <div class="tree-top">
- <el-switch
- :width="35"
- v-model="switchValue"
- active-text="包含下级"
- size="mini">
- </el-switch>
- </div>
- <el-tree :data="data" :props="defaultProps" node-key="id" highlight-current :expand-on-click-node="false" :default-expand-all="attrs.defaultExpandAll" @node-click="handleNodeClick"></el-tree>
- </div>
- </template>
- <script lang="ts">
- /*
- config:{
- attr:{
- retConfig:{}, //返回值配置
- label:'',
- children:'',
- defaultExpandAll: true/false // 是否默认展开所有节点
- resType:'' //请求返回数据所在位置
- },
- request:{
- url:'',
- method:'',
- data:'',
- params:''
- }
- }
- */
- import { Component, Prop, Vue, Watch } from "vue-property-decorator";
- import VueViews from '@/benyun/compVue/VueViews'
- @Component
- export default class SideTree extends VueViews {
- load = false;
- value:any={}
- switchValue = true;
- data:Array<any>=[]
- config:any={}
-
- get defaultProps(){
- let obj = {
- children: 'children',
- label: 'label'
- }
- if(this.attrs.label){
- obj.label = this.attrs.label
- }
- if(this.attrs.children){
- obj.children = this.attrs.children
- }
- return obj;
- }
- get requestConfig(){
- return this.config.request
- }
-
- created(){
- if(this.propConfig){
- this.setConfig(this.propConfig)
- }
- if(this.requestConfig){
- this.request()
- }
- }
- setData(data:Array<any>){
- this.data=data;
- }
- handleNodeClick(data:any){
- this.value={}
- let newData = this.getChildData([data]);
- if(this.attrs.retConfig){
- if(this.switchValue){
- for(const item of newData){
- for(const key in this.attrs.retConfig){
- if(!this.value[key]) this.value[key] = [];
- this.value[key].push(item[this.attrs.retConfig[key]])
- }
- }
- }else{
- for(const key in this.attrs.retConfig){
- if(!this.value[key]) this.value[key] = [];
- this.value[key].push(data[this.attrs.retConfig[key]])
- }
- }
- }
- this.value['isContain'] = this.switchValue;
-
- this.onChange();
- }
- onChange(){
- this.$emit('onChange',this.value)
- }
- //获取下级数据
- getChildData(data:Array<any>):Array<any>{
- let d:Array<any> = [];
- for(const item of data){
- d.push(item);
- if(item.children && item.children.length > 0){
- d = d.concat(this.getChildData(item.children))
- }
- }
- return d;
- }
- request(){
- this.data = []
- this.load = true;
- if(this.requestConfig){
- this.requestHandle({
- ...this.requestConfig,
- success:(res:any) => {
- let t = this.attrs.resType?this.attrs.resType:'data'
- if(res && res[t]){
- this.setData(res[t])
- }
- this.load = false
- },
- fail:() => {
- this.load = false;
- }
- })
- }
- }
-
- }
- </script>
- <style scoped lang="scss">
- .tree-top{
- width: 100%;
- display: flex;
- justify-content: flex-end;
- padding-bottom: 8px;
- }
- </style>
- <style lang="scss">
- .tree-top{
- .el-switch__label *{
- font-size: 12px !important;
- }
- }
- </style>
|