linkMultiSelect.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  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" />
  8. </div>
  9. <div class="big_item">
  10. <MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2" :parentChecked="parentChecked1"
  11. @getItemData="getItemData" 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" 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" v-if="listArr4.length>0" />
  20. </div>
  21. </div>
  22. </div>
  23. <div class="rightBox">
  24. <div class="title">已选<a-button class="clear" 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}}<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. this.currentData = val.data
  67. let childrensArr = Array.from(this.$refs.mycheckBox.children)
  68. setTimeout(() => {
  69. console.log(val, val.clickObj.dataset.layers)
  70. // console.log(val.data.checked)
  71. if (index == 1 || this.clickKey == 1) {
  72. this.$refs.mycheckBox.style.width = '100%'
  73. if(val.data.hasChild){
  74. getAction(this.listUrl,{
  75. parentCode:val.data.code,
  76. level:this.maxLayers
  77. }).then((res)=>{
  78. console.log(res);
  79. if(res.success){
  80. if(res.data.length>0){
  81. res.data.forEach((item,index)=>{
  82. item.value=item.code
  83. item.checked=val.data.checked;
  84. item.indeterminates=false;
  85. })
  86. this.listArr3 = []
  87. this.title3 = ''
  88. this.listArr4 = []
  89. this.title4 = ''
  90. //处理样式
  91. this.styleHandle(childrensArr, index)
  92. this.parentChecked1 = val.data.checked
  93. this.parentChecked2 = val.data.checked
  94. this.parentChecked3 = val.data.checked
  95. this.listArr2=res.data
  96. this.title2 = val.data.name
  97. }
  98. };
  99. })
  100. }else{
  101. this.listArr3 = []
  102. this.title3 = ''
  103. this.listArr4 = []
  104. this.title4 = ''
  105. this.listArr2 = []
  106. this.title2 = ''
  107. this.resetStyle(childrensArr, index)
  108. }
  109. this.checkedShowList=val.checkList
  110. } else if (index == 2 || this.clickKey == 2) {
  111. if(val.data.hasChild){
  112. getAction(this.listUrl,{
  113. parentCode:val.data.code,
  114. level:this.maxLayers
  115. }).then((res)=>{
  116. console.log(res);
  117. if(res.success){
  118. if(res.data.length>0){
  119. res.data.forEach((item,index)=>{
  120. item.value=item.code
  121. item.checked=val.data.checked;
  122. item.indeterminates=false;
  123. })
  124. this.listArr4 = []
  125. this.title4 = ''
  126. this.$refs.mycheckBox.style.width = '150%'
  127. this.styleHandle(childrensArr, index)
  128. this.parentChecked2 = val.data.checked
  129. this.parentChecked3 = val.data.checked
  130. this.listArr3=res.data
  131. this.title3 = val.data.name
  132. }
  133. };
  134. })
  135. }else{
  136. this.listArr4 = []
  137. this.title4 = ''
  138. this.listArr3 = []
  139. this.title3 = ''
  140. this.$refs.mycheckBox.style.width = '100%'
  141. this.resetStyle(childrensArr, index)
  142. }
  143. let ind=-1
  144. this.listArr1.forEach((ele,i)=>{
  145. if(ele.code==val.data.parentCode){
  146. ind=i
  147. // console.log(ind)
  148. }
  149. })
  150. if(ind>-1){
  151. this.listArr1[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  152. this.listArr1[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  153. }
  154. } else if (index == 3 || this.clickKey == 3) {
  155. if(val.data.hasChild){
  156. getAction(this.listUrl,{
  157. parentCode:val.data.code,
  158. level:this.maxLayers
  159. }).then((res)=>{
  160. console.log(res);
  161. if(res.success){
  162. if(res.data.length>0){
  163. res.data.forEach((item,index)=>{
  164. item.value=item.code
  165. item.checked=val.data.checked;
  166. item.indeterminates=false;
  167. })
  168. this.listArr4 = res.data
  169. this.title4 = val.data.name
  170. this.$refs.mycheckBox.style.width = '200%'
  171. this.styleHandle(childrensArr, index)
  172. this.parentChecked3 = val.data.checked
  173. }
  174. };
  175. })
  176. }else{
  177. this.$refs.mycheckBox.style.width = '150%'
  178. this.resetStyle(childrensArr, index)
  179. }
  180. if(this.listArr2){
  181. console.log(this.listArr2)
  182. let ind=-1;
  183. this.listArr2.forEach((ele,i)=>{
  184. if(ele.code==val.data.parentCode){
  185. ind=i
  186. // console.log(ind)
  187. }
  188. })
  189. if(ind>-1){
  190. this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  191. this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  192. }
  193. }
  194. this.listArr1.forEach((element,num)=>{
  195. if(element.code==this.listArr2[ind].parentCode){
  196. ind=num
  197. console.log(ind)
  198. }
  199. })
  200. let checklist=this.listArr2.filter((item,index)=>{
  201. return item.checked
  202. })
  203. // console.log(checklist)
  204. if(ind>-1){
  205. this.listArr1[ind].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
  206. this.listArr1[ind].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
  207. }
  208. }else if (index == 4 || this.clickKey == 4){
  209. if(this.listArr3){
  210. // console.log(this.listArr3)
  211. let ind=-1
  212. this.listArr3.forEach((ele,i)=>{
  213. if(item.code==val.data.parentCode){
  214. ind=i
  215. // console.log(ind)
  216. }
  217. })
  218. if(ind>-1){
  219. this.listArr3[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  220. this.listArr3[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  221. }
  222. }
  223. if(this.listArr2){
  224. // console.log(this.listArr2)
  225. let ind=-1
  226. this.listArr3.forEach((ele,i)=>{
  227. if(item.code==val.data.parentCode){
  228. ind=i
  229. // console.log(ind)
  230. }
  231. })
  232. this.listArr2.forEach((element,num)=>{
  233. if(item.code==this.listArr3[ind].parentCode){
  234. ind=num
  235. console.log(ind)
  236. }
  237. })
  238. if(ind>-1){
  239. let checklist3=this.listArr3.filter((item,index)=>{
  240. return item.checked
  241. })
  242. // console.log(checklist)
  243. this.listArr2[ind].indeterminates = !!checklist3.length && checklist3.length < this.listArr3.length
  244. this.listArr2[ind].checked = checklist3.length === this.listArr3.length && this.listArr3.length!=0
  245. let z=-1;
  246. this.listArr1.forEach((element,num)=>{
  247. if(item.code==this.listArr2[ind].parentCode){
  248. z=num
  249. console.log(z)
  250. }
  251. })
  252. let checklist2=this.listArr1.filter((item,index)=>{
  253. return item.checked
  254. })
  255. if(z>-1){
  256. this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
  257. this.listArr1[z].checked = checklist2.length === this.listArr2.length && this.listArr2.length!=0
  258. }
  259. }
  260. }
  261. }
  262. }, 100)
  263. })
  264. },
  265. styleHandle(arr, i) {
  266. arr.forEach((item, index) => {
  267. if (index <= i) {
  268. item.style.width = `${100 / (i + 1)}%`
  269. item.style.borderRight = '1px solid #ccc'
  270. }
  271. })
  272. },
  273. resetStyle(arr, i) {
  274. arr.forEach((item, index) => {
  275. if (index < i) {
  276. item.style.width = `${100 / i}%`
  277. item.style.borderRight = '1px solid #ccc'
  278. }
  279. if (index == i - 1) {
  280. item.style.borderRight = 'none'
  281. }
  282. })
  283. },
  284. deleteItem(item){
  285. console.log(item);
  286. let val='';
  287. this.plainOptions.forEach((ele,index)=>{
  288. if(ele.label==item){
  289. val=ele.value
  290. }
  291. })
  292. this.checkedList=this.checkedList.filter((element,index) => {
  293. return element!=val
  294. });
  295. this.checkedShowList=this.checkedShowList.filter((element,index) => {
  296. return element!=item
  297. });
  298. if(this.checkedList.length==0){
  299. this.indeterminate=false
  300. this.checkAll=false
  301. }
  302. },
  303. clearAll(){
  304. this.listArr1.forEach((item)=>{
  305. item.checked=false
  306. })
  307. this.listArr2.forEach((item)=>{
  308. item.checked=false
  309. })
  310. this.listArr3.forEach((item)=>{
  311. item.checked=false
  312. })
  313. this.listArr4.forEach((item)=>{
  314. item.checked=false
  315. })
  316. this.checkedShowList=[]
  317. },
  318. },
  319. mounted() {
  320. // this.listArr1=this.listArr;
  321. this.title1=this.title;
  322. // console.log(this.listUrl)
  323. if(this.listUrl){
  324. getAction(this.listUrl,{
  325. parentCode:0,
  326. level:this.maxLayers
  327. }).then((res)=>{
  328. console.log(res);
  329. if(res.success){
  330. res.data.forEach((item,index)=>{
  331. item.value=item.code
  332. item.checked=false;
  333. item.indeterminates=false;
  334. })
  335. };
  336. this.listArr1=res.data
  337. })
  338. }
  339. }
  340. }
  341. </script>
  342. <style lang="scss" scoped>
  343. .linkMultiSel {
  344. width: 100%;
  345. height: 310px;
  346. display: flex;
  347. ul,
  348. li {
  349. margin: 0;
  350. padding: 0;
  351. list-style: none;
  352. }
  353. .leftBox {
  354. width: 62%;
  355. margin-right: 3%;
  356. border: 1px solid #ccc;
  357. border-radius: 5px;
  358. overflow-x: auto;
  359. }
  360. .rightBox {
  361. width: 35%;
  362. border: 1px solid #ccc;
  363. border-radius: 5px;
  364. .selectBox1{
  365. height: 250px;
  366. overflow: auto;
  367. .selectList{
  368. display: block;
  369. width: 100%;
  370. // padding: 0 15px;
  371. // padding: 3px 0;
  372. }
  373. .selectLists{
  374. display: block;
  375. width: 100%;
  376. padding: 0 15px;
  377. }
  378. .selectLists:hover{
  379. background-color: rgba(0,0,0,.1);
  380. }
  381. .selectListitem{
  382. display: block;
  383. height: 25px;
  384. line-height: 25px;
  385. background-color: #eee;
  386. border-radius: 5px;
  387. padding: 0 10px;
  388. margin: 8px 10px;
  389. position: relative;
  390. #close{
  391. font-size: 12px;
  392. position: absolute;
  393. right: 10px;
  394. top: 5px;
  395. cursor: pointer;
  396. }
  397. }
  398. }
  399. }
  400. .title {
  401. height: 36px;
  402. line-height: 36px;
  403. font-size: 14px;
  404. font-weight: 600;
  405. border-radius: 5px 5px 0 0;
  406. background-color: rgb(248, 249, 250);
  407. padding: 0 15px;
  408. border-bottom: 1px solid #ccc;
  409. position: relative;
  410. .clear{
  411. position: absolute;
  412. top: 0px;
  413. right: 0;
  414. }
  415. }
  416. .big_item {
  417. width: 100%;
  418. // min-width: 200px;
  419. // width: 426px;
  420. display: inline-block;
  421. // height: calc(100% - 10px);
  422. }
  423. .bigBOX {
  424. // width: calc(2 * 100%);
  425. height: calc(100% - 10px);
  426. box-sizing: border-box;
  427. // display: flex;
  428. }
  429. }
  430. </style>