index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701
  1. <template xlang="wxml">
  2. <view class="tkitree">
  3. <view class="tkitree-mask show" v-if="showTree" @tap="_cancel"></view>
  4. <view class="tkitree-cnt show" v-if="showTree">
  5. <view class="tkitree-bar">
  6. <view
  7. class="tkitree-bar-cancel"
  8. :style="{ color: cancelColor }"
  9. hover-class="hover-c"
  10. @tap="_cancel"
  11. >取消
  12. </view>
  13. <view class="tkitree-bar-title" :style="{ color: titleColor }">{{
  14. title
  15. }}</view>
  16. <view
  17. class="tkitree-bar-confirm"
  18. :style="{ color: confirmColor }"
  19. hover-class="hover-c"
  20. @tap="_confirm"
  21. v-if="!custom"
  22. >确定
  23. </view>
  24. </view>
  25. <view class="tkitree-view">
  26. <view class="searchBox">
  27. <input
  28. type="text"
  29. placeholder="输入姓名搜索"
  30. v-model="searchname"
  31. confirm-type="search"
  32. @confirm="getList()"
  33. class="searchname"
  34. />
  35. <button class="clear" @click="clear()">清空</button>
  36. </view>
  37. <scroll-view class="tkitree-view-sc" :scroll-y="true">
  38. <block v-for="(item, index) in treeList" :key="index">
  39. <view
  40. class="tkitree-item"
  41. :style="[
  42. {
  43. paddingLeft: item.rank * 15 + 'px',
  44. zIndex: item.rank * -1 + 50,
  45. },
  46. ]"
  47. :class="{
  48. border: border === true,
  49. show: item.show,
  50. last: item.lastRank,
  51. showchild: item.showChild,
  52. open: item.open,
  53. }"
  54. >
  55. <view class="tkitree-label" @tap.stop="_treeItemTap(item, index)">
  56. <image
  57. class="tkitree-icon"
  58. :src="
  59. item.lastRank
  60. ? lastIcon
  61. : item.showChild
  62. ? currentIcon
  63. : defaultIcon
  64. "
  65. >
  66. </image>
  67. {{ item.name }}
  68. </view>
  69. <view v-if="!custom">
  70. <view
  71. class="tkitree-check"
  72. @tap.stop="_treeItemSelect(item, index)"
  73. v-if="selectParent ? true : item.lastRank"
  74. >
  75. <view
  76. class="tkitree-check-yes"
  77. v-if="item.checked"
  78. :class="{ radio: !multiple }"
  79. :style="{ 'border-color': confirmColor }"
  80. >
  81. <view
  82. class="tkitree-check-yes-b"
  83. :style="{ 'background-color': confirmColor }"
  84. >
  85. </view>
  86. </view>
  87. <view
  88. class="tkitree-check-no"
  89. v-else
  90. :class="{ radio: !multiple }"
  91. :style="{ 'border-color': confirmColor }"
  92. ></view>
  93. </view>
  94. </view>
  95. <view v-if="custom">
  96. <u-button
  97. type="success"
  98. size="mini"
  99. @tap.stop="_treeItemSelect2(item, index)"
  100. >选中
  101. </u-button>
  102. </view>
  103. </view>
  104. </block>
  105. </scroll-view>
  106. </view>
  107. </view>
  108. </view>
  109. </template>
  110. <script>
  111. import tools from "./tools";
  112. import { getTreeData6 } from "@/js_sdk/http";
  113. export default {
  114. name: "tkitree",
  115. props: {
  116. reciveUserInfo: {
  117. type: String,
  118. },
  119. range: {
  120. type: Array,
  121. default: [],
  122. },
  123. idKey: {
  124. type: String,
  125. default: "id",
  126. },
  127. default_value: {
  128. type: Array,
  129. default: [],
  130. },
  131. rangeKey: {
  132. type: String,
  133. default: "label",
  134. },
  135. title: {
  136. type: String,
  137. default: "",
  138. },
  139. multiple: {
  140. // 是否可以多选
  141. type: Boolean,
  142. default: false,
  143. // default: true
  144. },
  145. selectParent: {
  146. //是否可以选父级
  147. type: Boolean,
  148. default: false,
  149. },
  150. foldAll: {
  151. //折叠时关闭所有已经打开的子集,再次打开时需要一级一级打开
  152. type: Boolean,
  153. default: false,
  154. },
  155. confirmColor: {
  156. // 确定按钮颜色
  157. type: String,
  158. default: "", // #07bb07
  159. },
  160. cancelColor: {
  161. // 取消按钮颜色
  162. type: String,
  163. default: "", // #757575
  164. },
  165. titleColor: {
  166. // 标题颜色
  167. type: String,
  168. default: "", // #757575
  169. },
  170. currentIcon: {
  171. // 展开时候的ic
  172. type: String,
  173. default:
  174. "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg==",
  175. },
  176. defaultIcon: {
  177. // 折叠时候的ic
  178. type: String,
  179. default:
  180. "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC",
  181. },
  182. lastIcon: {
  183. // 没有子集的ic
  184. type: String,
  185. default: "",
  186. },
  187. border: {
  188. // 是否有分割线
  189. type: Boolean,
  190. default: false,
  191. },
  192. custom: {
  193. // 是否进入自定义
  194. type: Boolean,
  195. default: false,
  196. },
  197. spread: {
  198. // 展开第一层
  199. type: Boolean,
  200. default: false,
  201. },
  202. },
  203. data() {
  204. return {
  205. fartherKey: "",
  206. showTree: false,
  207. treeList: [],
  208. selectIndex: -1,
  209. idArr: [],
  210. searchname: "",
  211. selectName: [],
  212. getMsg: "",
  213. };
  214. },
  215. computed: {},
  216. methods: {
  217. clear() {
  218. console.log(this.treeList);
  219. this.searchname = "";
  220. },
  221. // 搜索组织接口
  222. async getList() {
  223. let departmentList = await getTreeData6(this.searchname);
  224. this._initTree(
  225. tools.transData(departmentList.data, "id", "parentid", "children")
  226. );
  227. // this.treeList=departmentList.data;
  228. let list = this.treeList;
  229. list.forEach((childItem, i) => {
  230. if (childItem.name == this.searchname) {
  231. childItem.show = true;
  232. }
  233. this.selectName.forEach((item) => {
  234. if (childItem.name == item) {
  235. childItem.checked = true;
  236. childItem.show = true;
  237. const obj = this.treeList.filter(
  238. (x) =>
  239. childItem.parentId[childItem.parentId.length - 1] ===
  240. x.parentId[x.parentId.length - 1]
  241. );
  242. obj.forEach((x) => {
  243. x.show = true;
  244. });
  245. }
  246. });
  247. this.treeList.forEach((k1, i1) => {
  248. if (k1.checked) {
  249. k1.parentId.forEach((k2, i2) => {
  250. this.treeList.forEach((k3, i3) => {
  251. if (k3.id == k2) {
  252. this.treeList[i3].checked = true;
  253. this.treeList[i3].show = true;
  254. this.treeList[i3].showChild = true;
  255. }
  256. });
  257. });
  258. }
  259. });
  260. });
  261. },
  262. _show(e) {
  263. try {
  264. this.showTree = true;
  265. this.fartherKey = e;
  266. } catch (e) {}
  267. },
  268. _hide() {
  269. this.showTree = false;
  270. },
  271. _cancel() {
  272. this._hide();
  273. this.$emit("cancel", "");
  274. },
  275. _confirm() {
  276. // 处理所选数据
  277. let rt = [];
  278. let obj = {};
  279. let str = "";
  280. this.treeList.forEach((v, i) => {
  281. if (this.treeList[i].checked && this.treeList[i].lastRank) {
  282. console.log(this.treeList[i]);
  283. let parentsName = this.treeList[i].parents.map((e) => {
  284. return e.label;
  285. });
  286. str +=
  287. parentsName.join("/") +
  288. (parentsName.join("/") ? "/" : "") +
  289. this.treeList[i].name;
  290. obj = Object.assign(obj, this.treeList[i].source);
  291. rt.push({
  292. ...obj,
  293. parentId1: this.treeList[i].parentId[0]
  294. ? this.treeList[i].parentId[0]
  295. : null,
  296. parentId2: this.treeList[i].parentId[1]
  297. ? this.treeList[i].parentId[1]
  298. : null,
  299. label: str,
  300. });
  301. }
  302. });
  303. this._hide();
  304. console.log(rt);
  305. this.$emit("confirm", [...rt], this.fartherKey);
  306. },
  307. //扁平化树结构
  308. getSearchObj(item) {
  309. if (item.children && item.children.length) {
  310. item.children.forEach((child) => {
  311. if (child.name === this.searchname) {
  312. return true;
  313. }
  314. });
  315. } else if (item.name === this.searchname) {
  316. return true;
  317. } else {
  318. return false;
  319. }
  320. },
  321. _renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
  322. list.forEach((item) => {
  323. this.treeList.push({
  324. id: item[this.idKey],
  325. name: item[this.rangeKey],
  326. source: item,
  327. parentId, // 父级id数组
  328. parents, // 父级id数组
  329. rank, // 层级
  330. showChild: false, //子级是否显示
  331. open: false, //是否打开
  332. show: rank === 0, // 自身是否显示
  333. hideArr: [],
  334. orChecked: item.checked ? item.checked : false,
  335. checked: item.checked ? item.checked : false,
  336. });
  337. if (Array.isArray(item.children) && item.children.length > 0) {
  338. let parentid = [...parentId],
  339. parentArr = [...parents],
  340. childrenid = [...childrenid];
  341. delete parentArr.children;
  342. parentid.push(item[this.idKey]);
  343. parentArr.push({
  344. [this.idKey]: item[this.idKey],
  345. [this.rangeKey]: item[this.rangeKey],
  346. });
  347. this._renderTreeList(item.children, rank + 1, parentid, parentArr);
  348. } else {
  349. this.treeList[this.treeList.length - 1].lastRank = true;
  350. }
  351. });
  352. },
  353. // 处理默认选择
  354. _defaultSelect() {
  355. let default_value = this.default_value;
  356. this.treeList.forEach((v, i) => {
  357. for (let j = 0; j < default_value; j++) {
  358. if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
  359. }
  360. }
  361. // if (v.checked) {
  362. // this.treeList.forEach((v2, i2) => {
  363. // if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
  364. // console.log(v2,v.parentId.toString().indexOf(v2.parentId.toString()));
  365. // v2.show = true
  366. // // if(v2.rank>0){
  367. // // v2.show=false
  368. // // }
  369. // if (v.parentId.includes(v2.id)) {
  370. // v2.showChild = true;
  371. // v2.open = true;
  372. // }
  373. // }
  374. // })
  375. // }
  376. });
  377. },
  378. // 点击
  379. _treeItemTap(item, index) {
  380. if (item.lastRank === true) {
  381. //点击最后一级时触发事件
  382. this.treeList[index].checked = !this.treeList[index].checked;
  383. this._fixMultiple(index);
  384. return;
  385. }
  386. let list = this.treeList;
  387. let id = item.id;
  388. item.showChild = !item.showChild;
  389. item.open = item.showChild ? true : !item.open;
  390. list.forEach((childItem, i) => {
  391. if (item.showChild === false) {
  392. //隐藏所有子级
  393. if (!childItem.parentId.includes(id)) {
  394. return;
  395. }
  396. if (!this.foldAll) {
  397. if (childItem.lastRank !== true && !childItem.open) {
  398. childItem.showChild = false;
  399. }
  400. // 为隐藏的内容添加一个标记
  401. if (childItem.show) {
  402. childItem.hideArr[item.rank] = id;
  403. }
  404. } else {
  405. if (childItem.lastRank !== true) {
  406. childItem.showChild = false;
  407. }
  408. }
  409. childItem.show = false;
  410. } else {
  411. // 打开子集
  412. if (childItem.parentId[childItem.parentId.length - 1] === id) {
  413. childItem.show = true;
  414. }
  415. // 打开被隐藏的子集
  416. if (childItem.parentId.includes(id) && !this.foldAll) {
  417. if (childItem.hideArr[item.rank] === id) {
  418. childItem.show = true;
  419. if (childItem.open && childItem.showChild) {
  420. childItem.showChild = true;
  421. } else {
  422. childItem.showChild = false;
  423. }
  424. childItem.hideArr[item.rank] = null;
  425. }
  426. }
  427. }
  428. });
  429. },
  430. _treeItemSelect(item, index) {
  431. this.treeList[index].checked = !this.treeList[index].checked;
  432. this._fixMultiple(index);
  433. // console.log(item.id, index,this.treeList[index].checked,9);
  434. // this.$emit('chenge',item,this.treeList[index].checked)
  435. this._chenge(item, this.treeList[index].checked);
  436. },
  437. _treeItemSelect2(item, index) {
  438. console.log(item, index, "点击事件1");
  439. this._hide();
  440. this.$emit("confirm", item);
  441. },
  442. _chenge(e, e1) {
  443. if (e.checked == true) {
  444. let isClud = this.selectName.indexOf(e.name);
  445. if (isClud > -1) {
  446. return;
  447. } else {
  448. this.selectName.push(e.name);
  449. }
  450. } else {
  451. let isClud = this.selectName.indexOf(e.name);
  452. if (isClud > -1) {
  453. this.selectName.splice(isClud, 1);
  454. } else {
  455. return;
  456. }
  457. }
  458. this.searchname = "";
  459. this.idArr.push(e.id);
  460. if (e.source.children == undefined) {
  461. this.treeList.forEach((k, i) => {
  462. this.idArr.forEach((k1, i1) => {
  463. if (k.id == k1 && e1 == true) {
  464. this.treeList[i].checked = true;
  465. } else if (k.id == k1 && e1 == false) {
  466. this.treeList[i].checked = false;
  467. }
  468. });
  469. });
  470. if (e.checked) {
  471. e.parentId.forEach((k, i) => {
  472. this.treeList.forEach((k1, i1) => {
  473. if (k1.id == k) {
  474. this.treeList[i1].checked = true;
  475. }
  476. });
  477. });
  478. } else {
  479. e.parentId.forEach((k, i) => {
  480. this.treeList.forEach((k1, i1) => {
  481. if (k1.id == k) {
  482. this.treeList[i1].checked = false;
  483. }
  484. });
  485. });
  486. }
  487. this.treeList.forEach((k1, i1) => {
  488. if (k1.checked) {
  489. k1.parentId.forEach((k2, i2) => {
  490. this.treeList.forEach((k3, i3) => {
  491. if (k3.id == k2) {
  492. this.treeList[i3].checked = true;
  493. }
  494. });
  495. });
  496. }
  497. });
  498. this.idArr = [];
  499. return;
  500. }
  501. this.handkeCheck1(e.source.children);
  502. this.treeList.forEach((k, i) => {
  503. this.idArr.forEach((k1, i1) => {
  504. if (k.id == k1 && e1 == true) {
  505. this.treeList[i].checked = true;
  506. } else if (k.id == k1 && e1 == false) {
  507. this.treeList[i].checked = false;
  508. }
  509. });
  510. });
  511. if (e.checked) {
  512. e.parentId.forEach((k, i) => {
  513. this.treeList.forEach((k1, i1) => {
  514. if (k1.id == k) {
  515. this.treeList[i1].checked = true;
  516. }
  517. });
  518. });
  519. } else {
  520. e.parentId.forEach((k, i) => {
  521. this.treeList.forEach((k1, i1) => {
  522. if (k1.id == k) {
  523. this.treeList[i1].checked = false;
  524. }
  525. });
  526. });
  527. }
  528. this.treeList.forEach((k1, i1) => {
  529. if (k1.checked) {
  530. k1.parentId.forEach((k2, i2) => {
  531. this.treeList.forEach((k3, i3) => {
  532. if (k3.id == k2) {
  533. this.treeList[i3].checked = true;
  534. }
  535. });
  536. });
  537. }
  538. });
  539. this.idArr = [];
  540. // this.handkeCheck(this.range, e, e1)
  541. },
  542. handkeCheck1(list) {
  543. list.forEach((k, i) => {
  544. this.idArr.push(k.id);
  545. if (k.children == undefined) return;
  546. this.handkeCheck1(k.children);
  547. });
  548. },
  549. handkeCheck(list, e, e1) {
  550. // 点击数据权限
  551. list.forEach((k, i) => {
  552. if (k.children != undefined) {
  553. if (k.id == e.id && e.checked == true) {
  554. k.checked = true;
  555. // console.log(k.id,'第一');
  556. this.handkeChecks(k.children, e, e1);
  557. } else if (k.id == e.id && e.checked == false) {
  558. k.checked = false;
  559. this.handkeChecks(k.children, e, e1);
  560. } else {
  561. this.handkeCheck(k.children, e, e1);
  562. }
  563. } else {
  564. // console.log(1);
  565. if (k.id == e.id && e.checked == true) {
  566. k.checked = true;
  567. } else if (k.id == e.id && e.checked == false) {
  568. k.checked = false;
  569. }
  570. }
  571. });
  572. // console.log(this.treeList);
  573. // this._reTreeList()
  574. // this._initTree(list)
  575. // this._renderTreeList(list)
  576. // list.splice()
  577. // this.lists = list
  578. // this.$forceUpdate()
  579. // console.log(this.lists,'执行了强制刷新');
  580. },
  581. handkeChecks(list, e, e1) {
  582. // console.log(list, e, e1,'循环执行');
  583. // console.log(list,'list','循环执行');
  584. // console.log(e.id,'e','循环执行');
  585. // console.log(e1,'e1','循环执行');
  586. list.forEach((k, i) => {
  587. if (k.children != undefined) {
  588. if (e.checked) {
  589. k.checked = true;
  590. this.handkeChecks(k.children, e, e1);
  591. } else {
  592. k.checked = false;
  593. this.handkeChecks(k.children, e, e1);
  594. }
  595. } else {
  596. // console.log(k, 'else');
  597. if (e.checked) {
  598. k.checked = true;
  599. } else {
  600. k.checked = false;
  601. }
  602. }
  603. });
  604. },
  605. // 处理单选多选
  606. _fixMultiple(index) {
  607. // console.log(index,'33333');
  608. console.log(this.spread);
  609. // if (this.spread) {
  610. // 如果是单选
  611. this.treeList.forEach((v, i) => {
  612. if (i != index) {
  613. this.treeList[i].checked = false;
  614. } else {
  615. this.treeList[i].checked = true;
  616. // console.log(index,'4444');
  617. }
  618. });
  619. // }
  620. },
  621. // 重置数据
  622. _reTreeList() {
  623. this.treeList.forEach((v, i) => {
  624. this.treeList[i].checked = v.orChecked;
  625. });
  626. },
  627. _initTree(range = this.range) {
  628. // console.log('接收值的事件');
  629. this.treeList = [];
  630. this._renderTreeList(range);
  631. this.$nextTick(() => {
  632. // this._defaultSelect(range)
  633. });
  634. let list = this.treeList;
  635. //展开第一列
  636. if (this.custom) {
  637. list.forEach((childItem, i) => {
  638. console.log("child", childItem);
  639. if (childItem.rank == "1") {
  640. childItem.show = true;
  641. }
  642. });
  643. }
  644. },
  645. },
  646. watch: {
  647. range(list) {
  648. // console.log('监视值的改变1');
  649. this._initTree(list);
  650. },
  651. multiple() {
  652. // console.log('监视值的改变2');
  653. if (this.range.length) {
  654. this._reTreeList();
  655. }
  656. },
  657. selectParent() {
  658. // console.log('监视值的改变3');
  659. if (this.range.length) {
  660. this._reTreeList();
  661. }
  662. },
  663. // searchname() {
  664. // this.getList();
  665. // },
  666. deep: true, // 深度监听
  667. immediate: true, // 初次监听即执行
  668. },
  669. mounted() {
  670. this._initTree();
  671. uni.$on("sendMsg", (data) => {
  672. this.getMsg = data.msg;
  673. });
  674. },
  675. };
  676. </script>
  677. <style scoped>
  678. @import "./style.css";
  679. .searchname {
  680. margin: 0;
  681. width: 80%;
  682. float: left;
  683. }
  684. .clear {
  685. width: 20%;
  686. float: left;
  687. }
  688. </style>