|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <!--    <div class="tree">--> | 
|---|
|  |  |  | <!--        <div v-for="(item, index) of list" :key="index" @click.stop="clickIten(item)">--> | 
|---|
|  |  |  | <!--            <div class="tree_item">--> | 
|---|
|  |  |  | <!--                <i class="el-icon-caret-bottom" :class="{ 'activeColor': item[defaultProps.status] }" v-show="item[defaultProps.status] && item[defaultProps.children]"></i>--> | 
|---|
|  |  |  | <div class="tree"> | 
|---|
|  |  |  | <div v-for="(item, index) of list" :key="index" @click.stop="clickIten(item)"> | 
|---|
|  |  |  | <div class="tree_item"> | 
|---|
|  |  |  | <i class="el-icon-caret-bottom" :class="{ 'activeColor': item.fsStatus === 1 }" v-show="item.fsStatus === 1 && item.childList.length > 0"></i> | 
|---|
|  |  |  | <i class="el-icon-caret-right color" v-show="item.childList.length > 0 && (item.fsStatus === 0 || !item.fsStatus)"></i> | 
|---|
|  |  |  | <div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.fsDate === 1 && item.childList.length === 0 }">{{ item.name }}</div> | 
|---|
|  |  |  | <!--                <i class="el-icon-caret-bottom" :class="{ 'activeColor': item[defaultProps.status] }" v-show="item[defaultProps.status] && item[defaultProps.children]"></i>--> | 
|---|
|  |  |  | <!--                <i class="el-icon-caret-right color" v-show="item[defaultProps.children] && !item[defaultProps.status]"></i>--> | 
|---|
|  |  |  | <!--                <div class="tree_item_label long-title-style" :title="item[defaultProps.name]" :class="{ 'activeColor': item[defaultProps.status] && !item[defaultProps.children] }">{{ item[defaultProps.name] }}</div>--> | 
|---|
|  |  |  | <!--            </div>--> | 
|---|
|  |  |  | <!--            <div class="tree_childern" v-show="item[defaultProps.status]">--> | 
|---|
|  |  |  | <!--                <tree--> | 
|---|
|  |  |  | <!--                  :list="item[defaultProps.children]"--> | 
|---|
|  |  |  | <!--                  :defaultProps="defaultProps"--> | 
|---|
|  |  |  | <!--                  @callback="callback"--> | 
|---|
|  |  |  | <!--                />--> | 
|---|
|  |  |  | <!--            </div>--> | 
|---|
|  |  |  | <!--        </div>--> | 
|---|
|  |  |  | <!--    </div>--> | 
|---|
|  |  |  | <div class="tree"> | 
|---|
|  |  |  | <div v-for="(item, index) in list" :key="index" @click.stop="clickIten(item)"> | 
|---|
|  |  |  | <div class="tree_item"> | 
|---|
|  |  |  | <i class="el-icon-caret-bottom" :class="{ 'activeColor': item.status }" v-show="item.status === 1 && item.companyDTOList.length > 0"></i> | 
|---|
|  |  |  | <i class="el-icon-caret-right color" v-show="item.companyDTOList.length > 0 && item.status === 0"></i> | 
|---|
|  |  |  | <div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.status === 1 && item.companyDTOList.length === 0 }">{{ item.name }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="tree_childern" v-show="item.status === 1"> | 
|---|
|  |  |  | <div class="tree_childern" v-show="item.fsStatus === 1"> | 
|---|
|  |  |  | <tree | 
|---|
|  |  |  | :list="item.companyDTOList" | 
|---|
|  |  |  | :defaultProps="defaultProps" | 
|---|
|  |  |  | @callback="callback" | 
|---|
|  |  |  | :list="item.childList" | 
|---|
|  |  |  | :defaultProps="defaultProps" | 
|---|
|  |  |  | @callback="callback" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <!-- @callback="callback" --> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | name: 'name', | 
|---|
|  |  |  | status: 'status', | 
|---|
|  |  |  | children: 'children', | 
|---|
|  |  |  | id: 'id' | 
|---|
|  |  |  | id: 'id', | 
|---|
|  |  |  | erpId: 'erpId' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | tempItem: { | 
|---|
|  |  |  | id: null, | 
|---|
|  |  |  | name: null | 
|---|
|  |  |  | name: null, | 
|---|
|  |  |  | erpId: null | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | // 点击当前项 | 
|---|
|  |  |  | clickIten (item) { | 
|---|
|  |  |  | this.recursion(this.list) | 
|---|
|  |  |  | item.status === 0 ? item.status = 1 : item.status = 0 | 
|---|
|  |  |  | // item[this.defaultProps.status] = !item[this.defaultProps.status] | 
|---|
|  |  |  | // this.list.forEach(subItem => { | 
|---|
|  |  |  | //   if ((subItem[this.defaultProps.id] !== item[this.defaultProps.id] && subItem[this.defaultProps.status]) || (this.list.length === 1 && subItem[this.defaultProps.status] === false)) { | 
|---|
|  |  |  | 
|---|
|  |  |  | //     } | 
|---|
|  |  |  | //   } | 
|---|
|  |  |  | // }) | 
|---|
|  |  |  | // if (this.tempItem.id === item[this.defaultProps.id]) { | 
|---|
|  |  |  | // if (this.tempItem['id'] === item[this.defaultProps.id]) { | 
|---|
|  |  |  | //   this.tempItem = { | 
|---|
|  |  |  | //     id: null, | 
|---|
|  |  |  | //     name: null | 
|---|
|  |  |  | //     name: null, | 
|---|
|  |  |  | //     erpId: null | 
|---|
|  |  |  | //   } | 
|---|
|  |  |  | // } else { | 
|---|
|  |  |  | //   this.tempItem.id = item[this.defaultProps.id] | 
|---|
|  |  |  | //   this.tempItem.name = item[this.defaultProps.name] | 
|---|
|  |  |  | //   this.tempItem.erpId = item['erpId'] | 
|---|
|  |  |  | // } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.$emit('callback', item) | 
|---|
|  |  |  | item.fsDate === 0 || !item.fsDate ? item.fsDate = 1 : item.fsDate = 0 | 
|---|
|  |  |  | if (item.childList.length > 0) { | 
|---|
|  |  |  | item.fsStatus === 0 || !item.fsStatus ? item.fsStatus = 1 : item.fsStatus = 0 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.$emit('callback', item, item) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 递归方法 | 
|---|
|  |  |  | recursion (children) { | 
|---|
|  |  |  | // children.forEach(item => { | 
|---|
|  |  |  | //   item[this.defaultProps.status] = false | 
|---|
|  |  |  | //   if (item[this.defaultProps.children]) { | 
|---|
|  |  |  | //     this.recursion(item[this.defaultProps.children]) | 
|---|
|  |  |  | //   } | 
|---|
|  |  |  | // }) | 
|---|
|  |  |  | children.forEach(item => { | 
|---|
|  |  |  | item.status = 0 | 
|---|
|  |  |  | if (item.companyDTOList.length > 0) { | 
|---|
|  |  |  | this.recursion(item.companyDTOList) | 
|---|
|  |  |  | item.fsDate = 0 | 
|---|
|  |  |  | if (item.childList.length > 0) { | 
|---|
|  |  |  | this.recursion(item.childList) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // item[this.defaultProps.status] = false | 
|---|
|  |  |  | // if (item[this.defaultProps.children]) { | 
|---|
|  |  |  | //   this.recursion(item[this.defaultProps.children]) | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | callback (data, item) { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.tempItem.id = data.id | 
|---|
|  |  |  | this.tempItem.name = data.name | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.$emit('callback', this.tempItem, item) | 
|---|
|  |  |  | this.$emit('callback', data, item) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|