linkMultiSelect.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  1. <template>
  2. <div class="linkMultiSel">
  3. <div class="leftBox">
  4. <div class="bigBOX" ref="mycheckBox">
  5. <div class="big_item">
  6. <MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
  7. @getItemData="getItemData" @getCheckedList='getCheckedList' />
  8. </div>
  9. <div class="big_item">
  10. <MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2" :parentChecked="parentChecked1"
  11. @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr2.length>0" />
  12. </div>
  13. <div class="big_item">
  14. <MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3" :parentChecked="parentChecked2"
  15. @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr3.length>0" />
  16. </div>
  17. <div class="big_item">
  18. <MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4" :parentChecked="parentChecked3"
  19. @getItemData="getItemData" @getCheckedList='getCheckedList' v-if="listArr4.length>0" />
  20. </div>
  21. </div>
  22. </div>
  23. <div class="rightBox">
  24. <div class="title">已选<a-button class="clearAllBtn" type="link" @click="clearAll">清空</a-button></div>
  25. <div class="linkMulti_list">
  26. <div class="selectBox1">
  27. <span class="selectListitem" v-for="(item,index) in checkedShowList" :key='index'>{{item.name}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import MultiCheckBox from './MultiCheckBox'
  35. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  36. export default {
  37. props: ['title', 'listArr','listUrl','maxLayers'],
  38. components: {
  39. MultiCheckBox
  40. },
  41. data() {
  42. return {
  43. listArr1:[],
  44. title1:'',
  45. title2: '',
  46. listArr2: [],
  47. title3: '',
  48. listArr3: [],
  49. title4: '',
  50. listArr4: [],
  51. clickKey: 0,
  52. parentChecked1: false,
  53. parentChecked2: false,
  54. parentChecked3: false,
  55. currentData: null,
  56. layersNum: 0,
  57. checkedShowList:[],
  58. }
  59. },
  60. watch: {},
  61. methods: {
  62. getItemData(val) {
  63. this.$nextTick(() => {
  64. // this.clickKey = val.clickObj.dataset.layers
  65. // let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
  66. let index = val.curLayerNum
  67. this.currentData = val.data
  68. let childrensArr = Array.from(this.$refs.mycheckBox.children)
  69. setTimeout(() => {
  70. // console.log(val, index)
  71. // console.log(val.data.checked)
  72. if (index == 1 || this.clickKey == 1) {
  73. this.$refs.mycheckBox.style.width = '100%'
  74. if(val.data.hasChild){
  75. getAction(this.listUrl,{
  76. parentCode:val.data.code,
  77. level:this.maxLayers
  78. }).then((res)=>{
  79. // console.log(res);
  80. if(res.success){
  81. if(res.data.length>0){
  82. res.data.forEach((item,index)=>{
  83. item.value=item.code
  84. item.checked=val.data.checked;
  85. item.indeterminates=false;
  86. })
  87. // console.log(this.checkedShowList)
  88. this.checkedShowList.forEach((ele)=>{
  89. res.data.forEach((item)=>{
  90. if(ele.code==item.code){
  91. item.checked=true;
  92. return
  93. }
  94. })
  95. })
  96. this.listArr3 = []
  97. this.title3 = ''
  98. this.listArr4 = []
  99. this.title4 = ''
  100. //处理样式
  101. this.styleHandle(childrensArr, index)
  102. this.parentChecked1 = val.data.checked
  103. this.parentChecked2 = val.data.checked
  104. this.parentChecked3 = val.data.checked
  105. this.listArr2=res.data
  106. this.title2 = val.data.name
  107. }
  108. };
  109. })
  110. }else{
  111. this.listArr3 = []
  112. this.title3 = ''
  113. this.listArr4 = []
  114. this.title4 = ''
  115. this.listArr2 = []
  116. this.title2 = ''
  117. this.resetStyle(childrensArr, index)
  118. }
  119. // this.checkedShowList=val.checkList
  120. } else if (index == 2 || this.clickKey == 2) {
  121. if(val.data.hasChild){
  122. getAction(this.listUrl,{
  123. parentCode:val.data.code,
  124. level:this.maxLayers
  125. }).then((res)=>{
  126. // console.log(res);
  127. if(res.success){
  128. if(res.data.length>0){
  129. res.data.forEach((item,index)=>{
  130. item.value=item.code
  131. item.checked=val.data.checked;
  132. item.indeterminates=false;
  133. })
  134. this.checkedShowList.forEach((ele)=>{
  135. res.data.forEach((item)=>{
  136. if(ele.code==item.code){
  137. item.checked=true;
  138. }
  139. })
  140. })
  141. this.listArr4 = []
  142. this.title4 = ''
  143. this.$refs.mycheckBox.style.width = '150%'
  144. this.styleHandle(childrensArr, index)
  145. this.parentChecked2 = val.data.checked
  146. this.parentChecked3 = val.data.checked
  147. this.listArr3=res.data
  148. this.title3 = val.data.name
  149. }
  150. };
  151. })
  152. }else{
  153. this.listArr4 = []
  154. this.title4 = ''
  155. this.listArr3 = []
  156. this.title3 = ''
  157. this.$refs.mycheckBox.style.width = '100%'
  158. this.resetStyle(childrensArr, index)
  159. }
  160. let ind=-1
  161. this.listArr1.forEach((ele,i)=>{
  162. if(ele.code==val.data.parentCode){
  163. ind=i
  164. // console.log(ind)
  165. }
  166. })
  167. if(ind>-1){
  168. this.listArr1[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  169. this.listArr1[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  170. }
  171. } else if (index == 3 || this.clickKey == 3) {
  172. if(val.data.hasChild){
  173. getAction(this.listUrl,{
  174. parentCode:val.data.code,
  175. level:this.maxLayers
  176. }).then((res)=>{
  177. // console.log(res);
  178. if(res.success){
  179. if(res.data.length>0){
  180. res.data.forEach((item,index)=>{
  181. item.value=item.code
  182. item.checked=val.data.checked;
  183. item.indeterminates=false;
  184. })
  185. this.checkedShowList.forEach((ele)=>{
  186. res.data.forEach((item)=>{
  187. if(ele.code==item.code){
  188. item.checked=true;
  189. }
  190. })
  191. })
  192. this.listArr4 = res.data
  193. this.title4 = val.data.name
  194. this.$refs.mycheckBox.style.width = '200%'
  195. this.styleHandle(childrensArr, index)
  196. this.parentChecked3 = val.data.checked
  197. }
  198. };
  199. })
  200. }else{
  201. this.$refs.mycheckBox.style.width = '150%'
  202. this.resetStyle(childrensArr, index)
  203. }
  204. let ind=-1;
  205. if(this.listArr2){
  206. // console.log(this.listArr2)
  207. this.listArr2.forEach((ele,i)=>{
  208. if(ele.code==val.data.parentCode){
  209. ind=i
  210. // console.log(ind)
  211. }
  212. })
  213. if(ind>-1){
  214. this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  215. this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  216. }
  217. }
  218. let z=-1
  219. this.listArr1.forEach((element,num)=>{
  220. if(element.code==this.listArr2[ind].parentCode){
  221. z=num
  222. // console.log(ind)
  223. }
  224. })
  225. let checklist=this.listArr2.filter((item,index)=>{
  226. return item.checked || item.indeterminates
  227. })
  228. // console.log(checklist)
  229. if(z>-1){
  230. this.listArr1[z].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
  231. this.listArr1[z].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
  232. }
  233. }else if (index == 4 || this.clickKey == 4){
  234. if(this.listArr3){
  235. // console.log(this.listArr3)
  236. let ind=-1
  237. this.listArr3.forEach((ele,i)=>{
  238. if(item.code==val.data.parentCode){
  239. ind=i
  240. // console.log(ind)
  241. }
  242. })
  243. if(ind>-1){
  244. this.listArr3[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  245. this.listArr3[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  246. }
  247. }
  248. if(this.listArr2){
  249. // console.log(this.listArr2)
  250. let ind=-1
  251. this.listArr3.forEach((ele,i)=>{
  252. if(item.code==val.data.parentCode){
  253. ind=i
  254. // console.log(ind)
  255. }
  256. })
  257. this.listArr2.forEach((element,num)=>{
  258. if(item.code==this.listArr3[ind].parentCode){
  259. ind=num
  260. // console.log(ind)
  261. }
  262. })
  263. if(ind>-1){
  264. let checklist3=this.listArr3.filter((item,index)=>{
  265. return item.checked || item.indeterminates
  266. })
  267. // console.log(checklist)
  268. this.listArr2[ind].indeterminates = !!checklist3.length && checklist3.length < this.listArr3.length
  269. this.listArr2[ind].checked = checklist3.length === this.listArr3.length && this.listArr3.length!=0
  270. let z=-1;
  271. this.listArr1.forEach((element,num)=>{
  272. if(item.code==this.listArr2[ind].parentCode){
  273. z=num
  274. // console.log(z)
  275. }
  276. })
  277. let checklist2=this.listArr1.filter((item,index)=>{
  278. return item.checked || item.indeterminates
  279. })
  280. if(z>-1){
  281. this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
  282. this.listArr1[z].checked = checklist2.length === this.listArr2.length && this.listArr2.length!=0
  283. }
  284. }
  285. }
  286. }
  287. }, 100)
  288. this.$emit('getSelectedArr',val.checkList)
  289. })
  290. },
  291. styleHandle(arr, i) {
  292. arr.forEach((item, index) => {
  293. if (index <= i) {
  294. item.style.width = `${100 / (i + 1)}%`
  295. item.style.borderRight = '1px solid #ccc'
  296. }
  297. })
  298. },
  299. resetStyle(arr, i) {
  300. arr.forEach((item, index) => {
  301. if (index < i) {
  302. item.style.width = `${100 / i}%`
  303. item.style.borderRight = '1px solid #ccc'
  304. }
  305. if (index == i - 1) {
  306. item.style.borderRight = 'none'
  307. }
  308. })
  309. },
  310. deleteItem(item){
  311. // console.log(item);
  312. let val='';
  313. this.checkedShowList.forEach((ele,index)=>{
  314. if(ele.code==item.code){
  315. val=ele.value
  316. }
  317. })
  318. this.checkedShowList=this.checkedShowList.filter((element,index) => {
  319. return element.code!=val;
  320. });
  321. if(item.level==1){
  322. this.listArr1.forEach((ele)=>{
  323. if(ele.code==val){
  324. ele.checked=false
  325. }
  326. })
  327. }
  328. if(item.level==2){
  329. // console.log('------------------------------------');
  330. let childList=this.checkedShowList.filter((element,index) => {
  331. return element.parentCode==item.parentCode;
  332. });
  333. let data=[]
  334. let checkList=[];
  335. let plainOptions=[]
  336. this.listArr1.forEach((ele)=>{
  337. if(ele.code==item.parentCode){
  338. data=ele;
  339. }
  340. if(ele.checked){
  341. checkList.push(ele.code)
  342. }
  343. plainOptions.push(ele.code)
  344. })
  345. if(childList.length==0){
  346. data.indeterminates=false
  347. }
  348. this.getItemData({
  349. clickObj:{},
  350. data: data,
  351. curLayerNum:1,
  352. checkList,
  353. plainOptions,
  354. })
  355. }
  356. if(item.level==3){
  357. }
  358. },
  359. clearAll(){
  360. this.listArr1.forEach((item)=>{
  361. item.checked=false;
  362. item.indeterminates=false;
  363. })
  364. this.listArr2.forEach((item)=>{
  365. item.checked=false;
  366. item.indeterminates=false;
  367. })
  368. this.listArr3.forEach((item)=>{
  369. item.checked=false
  370. item.indeterminates=false
  371. })
  372. this.listArr4.forEach((item)=>{
  373. item.checked=false
  374. item.indeterminates=false
  375. })
  376. this.checkedShowList=[]
  377. },
  378. getCheckedList(val){
  379. // console.log(val);
  380. if(val.curLayerNum==1){
  381. if(val.checkList.length>0){
  382. this.checkedShowList=this.checkedShowList.filter((item)=>{
  383. return item.level!=1
  384. })
  385. // console.log(this.checkedShowList)
  386. if(val.checkList.length==this.listArr1.length){
  387. this.checkedShowList=[];
  388. val.checkList.forEach((ele)=>{
  389. var result = this.checkedShowList.some(item => {
  390. if(item.code == ele){
  391. return true
  392. }
  393. })
  394. if(!result){
  395. this.listArr1.forEach((item)=>{
  396. if(ele==item.code){
  397. this.checkedShowList.push(item)
  398. }
  399. })
  400. }
  401. })
  402. }else if(val.checkList.length<this.listArr1.length){
  403. val.checkList.forEach((ele)=>{
  404. var result = this.checkedShowList.some(item => {
  405. if(item.code == ele){
  406. return true
  407. }
  408. })
  409. if(!result){
  410. this.listArr1.forEach((item)=>{
  411. if(ele==item.code){
  412. this.checkedShowList.push(item)
  413. }
  414. })
  415. }
  416. })
  417. }
  418. // console.log(this.checkedShowList)
  419. }else{
  420. this.checkedShowList=this.checkedShowList.filter((item)=>{
  421. return item.level!=1
  422. })
  423. }
  424. }else if(val.curLayerNum==2){
  425. this.checkedShowList=this.checkedShowList.filter((item)=>{
  426. return item.code!=val.currentList[0].parentCode
  427. })
  428. if(val.checkList.length>0&&val.checkList.length<val.currentList.length){
  429. this.checkedShowList=this.checkedShowList.filter((item)=>{
  430. return item.parentCode!=val.currentList[0].parentCode
  431. })
  432. // console.log(this.checkedShowList)
  433. val.checkList.forEach((ele)=>{
  434. var result = this.checkedShowList.some(item => {
  435. if(item.code == ele){
  436. return true
  437. }
  438. })
  439. if(!result){
  440. val.currentList.forEach((item)=>{
  441. if(ele==item.code){
  442. this.checkedShowList.push(item)
  443. }
  444. })
  445. }
  446. })
  447. // console.log(this.checkedShowList)
  448. }else if(val.checkList.length==0){
  449. this.checkedShowList=this.checkedShowList.filter((item)=>{
  450. return item.parentCode!=val.currentList[0].parentCode
  451. })
  452. }else if(val.checkList.length==val.currentList.length){
  453. this.checkedShowList=this.checkedShowList.filter((item)=>{
  454. return item.parentCode!=val.currentList[0].parentCode
  455. })
  456. this.listArr1.forEach((item)=>{
  457. if(item.code==val.currentList[0].parentCode){
  458. this.checkedShowList.push(item)
  459. }
  460. })
  461. }
  462. }else if(val.curLayerNum==3){
  463. this.checkedShowList=this.checkedShowList.filter((item)=>{
  464. return item.code!=val.currentList[0].parentCode
  465. })
  466. if(val.checkList.length>0&&val.checkList.length<val.currentList.length){
  467. this.checkedShowList=this.checkedShowList.filter((item)=>{
  468. return item.parentCode!=val.currentList[0].parentCode
  469. })
  470. // console.log(this.checkedShowList)
  471. val.checkList.forEach((ele)=>{
  472. var result = this.checkedShowList.some(item => {
  473. if(item.code == ele){
  474. return true
  475. }
  476. })
  477. if(!result){
  478. val.currentList.forEach((item)=>{
  479. if(ele==item.code){
  480. this.checkedShowList.push(item)
  481. }
  482. })
  483. }
  484. })
  485. // console.log(this.checkedShowList)
  486. }else if(val.checkList.length==0){
  487. this.checkedShowList=this.checkedShowList.filter((item)=>{
  488. return item.parentCode!=val.currentList[0].parentCode
  489. })
  490. }else if(val.checkList.length==val.currentList.length){
  491. this.checkedShowList=this.checkedShowList.filter((item)=>{
  492. return item.parentCode!=val.currentList[0].parentCode
  493. })
  494. this.listArr2.forEach((item)=>{
  495. if(item.code==val.currentList[0].parentCode){
  496. this.checkedShowList.push(item)
  497. }
  498. })
  499. }
  500. }else if(val.curLayerNum==4){
  501. }
  502. },
  503. },
  504. mounted() {
  505. // this.listArr1=this.listArr;
  506. this.title1=this.title;
  507. // console.log(this.listUrl)
  508. if(this.listUrl){
  509. getAction(this.listUrl,{
  510. parentCode:0,
  511. level:this.maxLayers
  512. }).then((res)=>{
  513. console.log(res);
  514. if(res.success){
  515. res.data.forEach((item,index)=>{
  516. item.value=item.code
  517. item.checked=false;
  518. item.indeterminates=false;
  519. })
  520. };
  521. this.listArr1=res.data
  522. })
  523. }
  524. }
  525. }
  526. </script>
  527. <style lang="scss" scoped>
  528. .linkMultiSel {
  529. width: 100%;
  530. height: 310px;
  531. display: flex;
  532. ul,
  533. li {
  534. margin: 0;
  535. padding: 0;
  536. list-style: none;
  537. }
  538. .leftBox {
  539. width: 62%;
  540. margin-right: 3%;
  541. border: 1px solid #ccc;
  542. border-radius: 5px;
  543. overflow-x: auto;
  544. overflow-y: hidden;
  545. }
  546. .rightBox {
  547. width: 35%;
  548. border: 1px solid #ccc;
  549. border-radius: 5px;
  550. .selectBox1{
  551. height: 250px;
  552. overflow: auto;
  553. .selectList{
  554. display: block;
  555. width: 100%;
  556. // padding: 0 15px;
  557. // padding: 3px 0;
  558. }
  559. .selectLists{
  560. display: block;
  561. width: 100%;
  562. padding: 0 15px;
  563. }
  564. .selectLists:hover{
  565. background-color: rgba(0,0,0,.1);
  566. }
  567. .selectListitem{
  568. display: block;
  569. height: 25px;
  570. line-height: 25px;
  571. background-color: #eee;
  572. border-radius: 5px;
  573. padding: 0 10px;
  574. margin: 8px 10px;
  575. position: relative;
  576. #close{
  577. font-size: 12px;
  578. position: absolute;
  579. right: 10px;
  580. top: 5px;
  581. cursor: pointer;
  582. }
  583. }
  584. }
  585. }
  586. .title {
  587. height: 36px;
  588. line-height: 36px;
  589. font-size: 14px;
  590. font-weight: 600;
  591. border-radius: 5px 5px 0 0;
  592. background-color: rgb(248, 249, 250);
  593. padding: 0 15px;
  594. border-bottom: 1px solid #ccc;
  595. position: relative;
  596. .clearAllBtn{
  597. position: absolute;
  598. top: 3px;
  599. right: 0;
  600. }
  601. }
  602. .big_item {
  603. width: 100%;
  604. // min-width: 200px;
  605. // width: 426px;
  606. display: inline-block;
  607. // height: calc(100% - 10px);
  608. }
  609. .bigBOX {
  610. // width: calc(2 * 100%);
  611. height: calc(100% - 10px);
  612. box-sizing: border-box;
  613. // display: flex;
  614. }
  615. }
  616. </style>