| | |
| | | <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> |
| | | <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> |
| | | <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]"> |
| | | <div class="tree_childern" v-show="item.fsStatus === 1"> |
| | | <tree |
| | | :list="item[defaultProps.children]" |
| | | :list="item.childList" |
| | | :defaultProps="defaultProps" |
| | | @callback="callback" |
| | | /> |
| | |
| | | name: 'name', |
| | | status: 'status', |
| | | children: 'children', |
| | | id: 'id' |
| | | id: 'id', |
| | | erpId: 'erpId' |
| | | } |
| | | } |
| | | } |
| | |
| | | return { |
| | | tempItem: { |
| | | id: null, |
| | | name: null |
| | | name: null, |
| | | erpId: null |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | // 点击当前项 |
| | | clickIten (item) { |
| | | 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)) { |
| | | subItem[this.defaultProps.status] = false |
| | | if (subItem[this.defaultProps.children]) { |
| | | this.recursion(subItem[this.defaultProps.children]) |
| | | } |
| | | } |
| | | }) |
| | | if (this.tempItem['id'] === item[this.defaultProps.id]) { |
| | | this.tempItem = { |
| | | id: null, |
| | | name: null |
| | | } |
| | | } else { |
| | | this.tempItem.id = item[this.defaultProps.id] |
| | | this.tempItem.name = item[this.defaultProps.name] |
| | | // 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)) { |
| | | // subItem[this.defaultProps.status] = false |
| | | // if (subItem[this.defaultProps.children]) { |
| | | // this.recursion(subItem[this.defaultProps.children]) |
| | | // } |
| | | // } |
| | | // }) |
| | | // if (this.tempItem['id'] === item[this.defaultProps.id]) { |
| | | // this.tempItem = { |
| | | // id: 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'] |
| | | // } |
| | | 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', this.tempItem, item) |
| | | 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]) |
| | | 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) |
| | | } |
| | | } |
| | | } |