linkMultiSelect.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  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">已选</div>
  25. <div class="linkMulti_list"></div>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. import MultiCheckBox from './MultiCheckBox'
  31. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  32. export default {
  33. props: ['title', 'listArr','listUrl','maxLayers'],
  34. components: {
  35. MultiCheckBox
  36. },
  37. data() {
  38. return {
  39. listArr1:[],
  40. title1:'',
  41. title2: '',
  42. listArr2: [],
  43. title3: '',
  44. listArr3: [],
  45. title4: '',
  46. listArr4: [],
  47. clickKey: 0,
  48. parentChecked1: false,
  49. parentChecked2: false,
  50. parentChecked3: false,
  51. currentData: null,
  52. layersNum: 0
  53. }
  54. },
  55. watch: {},
  56. methods: {
  57. getItemData(val) {
  58. this.$nextTick(() => {
  59. this.clickKey = val.clickObj.dataset.layers
  60. let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
  61. this.currentData = val.data
  62. let childrensArr = Array.from(this.$refs.mycheckBox.children)
  63. setTimeout(() => {
  64. console.log(val, val.clickObj.dataset.layers)
  65. // console.log(val.data.checked)
  66. if (index == 1 || this.clickKey == 1) {
  67. this.$refs.mycheckBox.style.width = '100%'
  68. if(val.data.hasChild){
  69. getAction(this.listUrl,{
  70. parentCode:val.data.code,
  71. level:this.maxLayers
  72. }).then((res)=>{
  73. console.log(res);
  74. if(res.success){
  75. if(res.result.records.length>0){
  76. res.result.records.forEach((item,index)=>{
  77. item.value=item.code
  78. item.checked=val.data.checked;
  79. item.indeterminates=false;
  80. })
  81. this.listArr3 = []
  82. this.title3 = ''
  83. this.listArr4 = []
  84. this.title4 = ''
  85. //处理样式
  86. this.styleHandle(childrensArr, index)
  87. this.parentChecked1 = val.data.checked
  88. this.parentChecked2 = val.data.checked
  89. this.parentChecked3 = val.data.checked
  90. this.listArr2=res.result.records
  91. this.title2 = val.data.name
  92. }
  93. };
  94. })
  95. }else{
  96. this.listArr3 = []
  97. this.title3 = ''
  98. this.listArr4 = []
  99. this.title4 = ''
  100. this.listArr2 = []
  101. this.title2 = ''
  102. this.resetStyle(childrensArr, index)
  103. }
  104. } else if (index == 2 || this.clickKey == 2) {
  105. if(val.data.hasChild){
  106. getAction(this.listUrl,{
  107. parentCode:val.data.code,
  108. level:this.maxLayers
  109. }).then((res)=>{
  110. console.log(res);
  111. if(res.success){
  112. if(res.result.records.length>0){
  113. res.result.records.forEach((item,index)=>{
  114. item.value=item.code
  115. item.checked=val.data.checked;
  116. item.indeterminates=false;
  117. })
  118. this.listArr4 = []
  119. this.title4 = ''
  120. this.$refs.mycheckBox.style.width = '150%'
  121. this.styleHandle(childrensArr, index)
  122. this.parentChecked2 = val.data.checked
  123. this.parentChecked3 = val.data.checked
  124. this.listArr3=res.result.records
  125. this.title3 = val.data.name
  126. }
  127. };
  128. })
  129. }else{
  130. this.listArr4 = []
  131. this.title4 = ''
  132. this.listArr3 = []
  133. this.title3 = ''
  134. this.$refs.mycheckBox.style.width = '100%'
  135. this.resetStyle(childrensArr, index)
  136. }
  137. let ind=-1
  138. this.listArr1.forEach((ele,i)=>{
  139. if(ele.code==val.data.parentCode){
  140. ind=i
  141. // console.log(ind)
  142. }
  143. })
  144. if(ind>-1){
  145. this.listArr1[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  146. this.listArr1[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  147. }
  148. } else if (index == 3 || this.clickKey == 3) {
  149. if(val.data.hasChild){
  150. getAction(this.listUrl,{
  151. parentCode:val.data.code,
  152. level:this.maxLayers
  153. }).then((res)=>{
  154. console.log(res);
  155. if(res.success){
  156. if(res.result.records.length>0){
  157. res.result.records.forEach((item,index)=>{
  158. item.value=item.code
  159. item.checked=val.data.checked;
  160. item.indeterminates=false;
  161. })
  162. this.listArr4 = res.result.records
  163. this.title4 = val.data.name
  164. this.$refs.mycheckBox.style.width = '200%'
  165. this.styleHandle(childrensArr, index)
  166. this.parentChecked3 = val.data.checked
  167. }
  168. };
  169. })
  170. }else{
  171. this.$refs.mycheckBox.style.width = '150%'
  172. this.resetStyle(childrensArr, index)
  173. }
  174. if(this.listArr2){
  175. console.log(this.listArr2)
  176. let ind=-1;
  177. this.listArr2.forEach((ele,i)=>{
  178. if(ele.code==val.data.parentCode){
  179. ind=i
  180. // console.log(ind)
  181. }
  182. })
  183. if(ind>-1){
  184. this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  185. this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  186. }
  187. }
  188. this.listArr1.forEach((element,num)=>{
  189. if(element.code==this.listArr2[ind].parentCode){
  190. ind=num
  191. console.log(ind)
  192. }
  193. })
  194. let checklist=this.listArr2.filter((item,index)=>{
  195. return item.checked
  196. })
  197. // console.log(checklist)
  198. if(ind>-1){
  199. this.listArr1[ind].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
  200. this.listArr1[ind].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
  201. }
  202. }else if (index == 4 || this.clickKey == 4){
  203. if(this.listArr3){
  204. // console.log(this.listArr3)
  205. let ind=-1
  206. this.listArr3.forEach((ele,i)=>{
  207. if(item.code==val.data.parentCode){
  208. ind=i
  209. // console.log(ind)
  210. }
  211. })
  212. if(ind>-1){
  213. this.listArr3[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
  214. this.listArr3[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
  215. }
  216. }
  217. if(this.listArr2){
  218. // console.log(this.listArr2)
  219. let ind=-1
  220. this.listArr3.forEach((ele,i)=>{
  221. if(item.code==val.data.parentCode){
  222. ind=i
  223. // console.log(ind)
  224. }
  225. })
  226. this.listArr2.forEach((element,num)=>{
  227. if(item.code==this.listArr3[ind].parentCode){
  228. ind=num
  229. console.log(ind)
  230. }
  231. })
  232. if(ind>-1){
  233. let checklist3=this.listArr3.filter((item,index)=>{
  234. return item.checked
  235. })
  236. // console.log(checklist)
  237. this.listArr2[ind].indeterminates = !!checklist3.length && checklist3.length < this.listArr3.length
  238. this.listArr2[ind].checked = checklist3.length === this.listArr3.length && this.listArr3.length!=0
  239. let z=-1;
  240. this.listArr1.forEach((element,num)=>{
  241. if(item.code==this.listArr2[ind].parentCode){
  242. z=num
  243. console.log(z)
  244. }
  245. })
  246. let checklist2=this.listArr1.filter((item,index)=>{
  247. return item.checked
  248. })
  249. if(z>-1){
  250. this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
  251. this.listArr1[z].checked = checklist2.length === this.listArr2.length && this.listArr2.length!=0
  252. }
  253. }
  254. }
  255. }
  256. }, 100)
  257. })
  258. },
  259. styleHandle(arr, i) {
  260. arr.forEach((item, index) => {
  261. if (index <= i) {
  262. item.style.width = `${100 / (i + 1)}%`
  263. item.style.borderRight = '1px solid #ccc'
  264. }
  265. })
  266. },
  267. resetStyle(arr, i) {
  268. arr.forEach((item, index) => {
  269. if (index < i) {
  270. item.style.width = `${100 / i}%`
  271. item.style.borderRight = '1px solid #ccc'
  272. }
  273. if (index == i - 1) {
  274. item.style.borderRight = 'none'
  275. }
  276. })
  277. }
  278. },
  279. mounted() {
  280. // this.listArr1=this.listArr;
  281. this.title1=this.title;
  282. // console.log(this.listUrl)
  283. if(this.listUrl){
  284. getAction(this.listUrl,{
  285. parentCode:0,
  286. level:this.maxLayers
  287. }).then((res)=>{
  288. console.log(res);
  289. if(res.success){
  290. res.result.records.forEach((item,index)=>{
  291. item.value=item.code
  292. item.checked=false;
  293. item.indeterminates=false;
  294. })
  295. };
  296. this.listArr1=res.result.records
  297. })
  298. }
  299. }
  300. }
  301. </script>
  302. <style lang="scss" scoped>
  303. .linkMultiSel {
  304. width: 100%;
  305. height: 310px;
  306. display: flex;
  307. ul,
  308. li {
  309. margin: 0;
  310. padding: 0;
  311. list-style: none;
  312. }
  313. .leftBox {
  314. width: 62%;
  315. margin-right: 3%;
  316. border: 1px solid #ccc;
  317. border-radius: 5px;
  318. overflow-x: auto;
  319. }
  320. .rightBox {
  321. width: 35%;
  322. border: 1px solid #ccc;
  323. border-radius: 5px;
  324. }
  325. .title {
  326. height: 36px;
  327. line-height: 36px;
  328. font-size: 14px;
  329. font-weight: 600;
  330. border-radius: 5px 5px 0 0;
  331. background-color: rgb(248, 249, 250);
  332. padding: 0 15px;
  333. border-bottom: 1px solid #ccc;
  334. }
  335. .big_item {
  336. width: 100%;
  337. // min-width: 200px;
  338. // width: 426px;
  339. display: inline-block;
  340. // height: calc(100% - 10px);
  341. }
  342. .bigBOX {
  343. // width: calc(2 * 100%);
  344. height: calc(100% - 10px);
  345. box-sizing: border-box;
  346. // display: flex;
  347. }
  348. }
  349. </style>