Vue+ElementUI之Tree的使用方法

 { "success": true, "errorCode": null, "errorMsg": null, "data": [{ "label": "\u6E56\u5317\u7701\u8003\u8BD5\u9662", "id": "17", "parentId": "17", "nodeType": 0, "icon": null, "kids": [{ "label": "\u9662\u529E\u516C\u5BA4", "id": "23", "parentId": "17", "nodeType": 0, "icon": null, "kids": [{ "label": "\u9662\u529E\u516C\u5BA4\u4E00\u5904", "id": "24", "parentId": "23", "nodeType": 0, "icon": null, "kids": null }, { "label": "\u9662\u529E\u516C\u5BA4\u4E8C\u5904", "id": "25", "parentId": "23", "nodeType": 0, "icon": null, "kids": null }] }] }, { "label": "\u6E56\u5317\u77012020\u5E74\u9AD8\u8003\u5E94\u6025\u673A\u6784", "id": "18", "parentId": "18", "nodeType": 0, "icon": null, "kids": [{ "label": "\u4E2D\u5FC3\u94F6\u884C", "id": "A06E0C6FFB29198EE053437CA8C07A48", "parentId": "18", "nodeType": 1, "icon": "el-icon-monitor", "kids": null, "terminalType": 0, "terminalNum": "769025", "serialNum": "7D1846124E640764" }, { "label": "\u6B66\u6C49\u5E02\u4E00\u4E2D\u8003\u70B9\u5E94\u6025\u529E", "id": "20", "parentId": "18", "nodeType": 0, "icon": null, "kids": [{ "label": "\u6B66\u6C49\u4E00\u4E2D\u5E94\u6025\u6307\u6325\u4E2D\u5FC3", "id": "22", "parentId": "20", "nodeType": 0, "icon": null, "kids": null }] }, { "label": "\u6B66\u6C49\u4E8C\u4E2D\u8003\u70B9\u5E94\u6025\u529E", "id": "21", "parentId": "18", "nodeType": 0, "icon": null, "kids": null }] }, { "label": "2020\u5E74\u7814\u7A76\u751F\u8003\u8BD5\u5E94\u6025\u673A\u6784", "id": "19", "parentId": "19", "nodeType": 0, "icon": null, "kids": [{ "label": "\u738B\u7269\u6D41", "id": "A0BA62D5108D1565E053437CA8C0C74B", "parentId": "19", "nodeType": 1, "icon": "el-icon-user", "kids": null, "terminalType": 1, "terminalNum": "15010330199", "serialNum": "15010330199" }, { "label": "\u6B66\u6C49\u8003\u533A", "id": "27", "parentId": "19", "nodeType": 0, "icon": null, "kids": [{ "label": "\u6B66\u6C49\u4E00\u533A\u5E94\u6025\u529E", "id": "28", "parentId": "27", "nodeType": 0, "icon": null, "kids": null }, { "label": "\u6B66\u6C49\u4E8C\u533A\u5E94\u6025\u529E", "id": "41", "parentId": "27", "nodeType": 0, "icon": null, "kids": null }] }] }, { "label": "\u6E56\u5317\u77012019\u5E74\u9AD8\u8003\u5E94\u6025", "id": "26", "parentId": "26", "nodeType": 0, "icon": null, "kids": null }] }

 package com.itechhero.app.module.edu.meet.reminder.service; import com.github.pagehelper.PageHelper; import com.itechhero.app.module.edu.common.model.TreeBean; import com.itechhero.app.module.edu.meet.reminder.mapper.MeetReminderMapper; import com.itechhero.app.module.edu.meet.reminder.mapper.ReminderTerminalLinkMapper; import com.itechhero.app.module.edu.meet.reminder.model.MeetReminder; import com.itechhero.app.module.edu.meet.reminder.model.ReminderTerminalLink; import com.itechhero.app.module.edu.meet.reminder.model.TerminalTreeBean; import com.itechhero.app.module.edu.terminal.mapper.TerminalMapper; import com.itechhero.app.module.edu.terminal.model.Terminal; import com.itechhero.app.module.edu.utils.exceptions.ReqException; import com.itechhero.app.module.edu.utils.req.CMap; import com.itechhero.app.module.edu.utils.req.PageData; import com.itechhero.app.module.edu.utils.req.ResBean; import com.itechhero.app.module.edu.xylink.api.reminder.ReminderApi; import com.itechhero.app.module.edu.xylink.util.Result; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.util.ArrayList; import java.util.List; import java.util.Map; /** * 预约会议业务类 * 作者: 吴 波 * 时间: 2020-03-09 17:28 * 笔名: 那年秋天的茄子^^ */ @Slf4j @Service @Transactional public class MeetReminderService { @Autowired private MeetReminderMapper meetReminderMapper; @Autowired private TerminalMapper terminalMapper; @Autowired private ReminderTerminalLinkMapper reminderTerminalLinkmapper; /** * 获取通讯终端树 * 作者: 吴 波 * 时间: 2020-03-14 10:32 * 笔名: 那年秋天的茄子^^ */ public ResBean getContacts(Integer ifonlyTerminal) { List root = this.meetReminderMapper.getRootContacts(); getKidContacts(root, ifonlyTerminal); return ResBean.success(root); } /** * 获取终端通讯录子节点 * 作者: 吴 波 * 时间: 2020-03-14 11:07 * 笔名: 那年秋天的茄子^^ */ private void getKidContacts(List root, Integer ifonlyTerminal) { log.info("\n{}", root); for (TreeBean treeBean : root) { List kidsContacts = new ArrayList<>(); /*终端*/ List terminalContacts = this.terminalMapper.getTerminalKidsForTree(treeBean.getId(), ifonlyTerminal); if (terminalContacts != null && terminalContacts.size() != 0) { kidsContacts.addAll(terminalContacts); } /*部门*/ List orgKidsContacts = this.meetReminderMapper.getKidsContacts(treeBean.getId()); if (orgKidsContacts != null && orgKidsContacts.size() != 0) { kidsContacts.addAll(orgKidsContacts); } if (kidsContacts.size() != 0) { treeBean.setKids(kidsContacts); } getKidContacts(kidsContacts, ifonlyTerminal); } } /** * 获取已选中的终端 * 作者: 吴 波 * 时间: 2020-03-14 21:36 * 笔名: 那年秋天的茄子^^ */ public ResBean getTerminals(CMap param) { List list=this.reminderTerminalLinkmapper.getTerminals(param); log.info("\n[获取到预约会议呼叫的终端设备]\n{}",list); return ResBean.success(list); } }

  select ID||'' AS "id", YJJGMC AS "label", FBMID||'' as "parentId", 0 as "nodeType" -- 为了前端判断是否能选中用的 FROM YJ_ZB_ZBJG WHERE 1=1 AND ID=FBMID  select ID||'' AS "id", YJJGMC AS "label", FBMID||'' as "parentId", 0 as "nodeType" FROM YJ_ZB_ZBJG WHERE 1=1 AND ID||'' != #{parentId} AND FBMID||'' = #{parentId}  SELECT ID as "id", TERMINAL_NAME as "label", TERMINAL_TYPE, TERMINAL_NUM, SERIAL_NUM, ORG_ID||'' as "parentId", 1 as "nodeType", case TERMINAL_TYPE              -- 为前端设定图标使用(为了方便直接写数据库,介意前端判断) when 0 then 'el-icon-monitor' else 'el-icon-user' end as  "icon" FROM YJ_TERMINAL where 1=1 and ORG_ID||'' =#{parentId}  and TERMINAL_TYPE = 0