|  |  | 
 |  |  | <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.childList.length > 0"></i> | 
 |  |  |                 <i class="el-icon-caret-right color" v-show="item.childList.length > 0 && item.status === 0"></i> | 
 |  |  |                 <div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.status === 1 && item.childList.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.childList" | 
 |  |  |                     :defaultProps="defaultProps" | 
 |  |  |                     @callback="callback" | 
 |  |  |                   :list="item.childList" | 
 |  |  |                   :defaultProps="defaultProps" | 
 |  |  |                   @callback="callback" | 
 |  |  |                 /> | 
 |  |  |                  <!-- @callback="callback" --> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | 
 |  |  |           name: 'name', | 
 |  |  |           status: 'status', | 
 |  |  |           children: 'children', | 
 |  |  |           id: 'erpId' | 
 |  |  |           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 | 
 |  |  |         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) { | 
 |  |  |       console.log('data', data) | 
 |  |  |       console.log('item', item) | 
 |  |  |       if (this.tempItem.id === data.id) { | 
 |  |  |         this.tempItem = {} | 
 |  |  |       } else { | 
 |  |  |         this.tempItem.id = data.erpId | 
 |  |  |         this.tempItem.id = data.id | 
 |  |  |         this.tempItem.name = data.name | 
 |  |  |       } | 
 |  |  |       this.$emit('callback', data, item) |