linkMultiSelect.vue 26 KB

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