123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404 |
- <template>
- <div class="linkMultiSel">
- <div class="leftBox">
- <div class="bigBOX" ref="mycheckBox">
- <div class="big_item">
- <MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
- @getItemData="getItemData" />
- </div>
- <div class="big_item">
- <MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2" :parentChecked="parentChecked1"
- @getItemData="getItemData" v-if="listArr2.length>0" />
- </div>
- <div class="big_item">
- <MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3" :parentChecked="parentChecked2"
- @getItemData="getItemData" v-if="listArr3.length>0" />
- </div>
- <div class="big_item">
- <MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4" :parentChecked="parentChecked3"
- @getItemData="getItemData" v-if="listArr4.length>0" />
- </div>
- </div>
- </div>
- <div class="rightBox">
- <div class="title">已选</div>
- <div class="linkMulti_list"></div>
- </div>
- </div>
- </template>
- <script>
- import MultiCheckBox from './MultiCheckBox'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- export default {
- props: ['title', 'listArr','listUrl','maxLayers'],
- components: {
- MultiCheckBox
- },
- data() {
- return {
- listArr1:[],
- title1:'',
- title2: '',
- listArr2: [],
- title3: '',
- listArr3: [],
- title4: '',
- listArr4: [],
- clickKey: 0,
- parentChecked1: false,
- parentChecked2: false,
- parentChecked3: false,
-
- currentData: null,
- layersNum: 0
- }
- },
- watch: {},
- methods: {
- getItemData(val) {
- this.$nextTick(() => {
- this.clickKey = val.clickObj.dataset.layers
- let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
- this.currentData = val.data
-
- let childrensArr = Array.from(this.$refs.mycheckBox.children)
- setTimeout(() => {
- console.log(val, val.clickObj.dataset.layers)
- // console.log(val.data.checked)
- if (index == 1 || this.clickKey == 1) {
- this.$refs.mycheckBox.style.width = '100%'
- if(val.data.hasChild){
- getAction(this.listUrl,{
- parentCode:val.data.code,
- level:this.maxLayers
- }).then((res)=>{
- console.log(res);
- if(res.success){
- if(res.result.records.length>0){
- res.result.records.forEach((item,index)=>{
- item.value=item.code
- item.checked=val.data.checked;
- item.indeterminates=false;
-
- })
- this.listArr3 = []
- this.title3 = ''
- this.listArr4 = []
- this.title4 = ''
- //处理样式
- this.styleHandle(childrensArr, index)
- this.parentChecked1 = val.data.checked
- this.parentChecked2 = val.data.checked
- this.parentChecked3 = val.data.checked
- this.listArr2=res.result.records
- this.title2 = val.data.name
- }
- };
-
- })
- }else{
- this.listArr3 = []
- this.title3 = ''
- this.listArr4 = []
- this.title4 = ''
- this.listArr2 = []
- this.title2 = ''
- this.resetStyle(childrensArr, index)
- }
-
- } else if (index == 2 || this.clickKey == 2) {
- if(val.data.hasChild){
- getAction(this.listUrl,{
- parentCode:val.data.code,
- level:this.maxLayers
- }).then((res)=>{
- console.log(res);
- if(res.success){
- if(res.result.records.length>0){
- res.result.records.forEach((item,index)=>{
- item.value=item.code
- item.checked=val.data.checked;
- item.indeterminates=false;
-
- })
- this.listArr4 = []
- this.title4 = ''
-
- this.$refs.mycheckBox.style.width = '150%'
- this.styleHandle(childrensArr, index)
- this.parentChecked2 = val.data.checked
- this.parentChecked3 = val.data.checked
- this.listArr3=res.result.records
- this.title3 = val.data.name
- }
- };
-
- })
- }else{
- this.listArr4 = []
- this.title4 = ''
- this.listArr3 = []
- this.title3 = ''
- this.$refs.mycheckBox.style.width = '100%'
- this.resetStyle(childrensArr, index)
- }
-
-
- let ind=-1
- this.listArr1.forEach((ele,i)=>{
- if(ele.code==val.data.parentCode){
- ind=i
- // console.log(ind)
- }
- })
- if(ind>-1){
- this.listArr1[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
- this.listArr1[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
- }
-
- } else if (index == 3 || this.clickKey == 3) {
- if(val.data.hasChild){
- getAction(this.listUrl,{
- parentCode:val.data.code,
- level:this.maxLayers
- }).then((res)=>{
- console.log(res);
- if(res.success){
- if(res.result.records.length>0){
- res.result.records.forEach((item,index)=>{
- item.value=item.code
- item.checked=val.data.checked;
- item.indeterminates=false;
-
- })
- this.listArr4 = res.result.records
- this.title4 = val.data.name
- this.$refs.mycheckBox.style.width = '200%'
- this.styleHandle(childrensArr, index)
- this.parentChecked3 = val.data.checked
-
- }
- };
-
- })
- }else{
- this.$refs.mycheckBox.style.width = '150%'
- this.resetStyle(childrensArr, index)
- }
-
- if(this.listArr2){
- console.log(this.listArr2)
- let ind=-1;
-
- this.listArr2.forEach((ele,i)=>{
- if(ele.code==val.data.parentCode){
- ind=i
- // console.log(ind)
- }
- })
- if(ind>-1){
- this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
- this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
- }
-
- }
-
-
- this.listArr1.forEach((element,num)=>{
-
- if(element.code==this.listArr2[ind].parentCode){
- ind=num
- console.log(ind)
- }
-
- })
- let checklist=this.listArr2.filter((item,index)=>{
- return item.checked
- })
- // console.log(checklist)
- if(ind>-1){
- this.listArr1[ind].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
- this.listArr1[ind].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
- }
-
-
-
- }else if (index == 4 || this.clickKey == 4){
- if(this.listArr3){
- // console.log(this.listArr3)
- let ind=-1
- this.listArr3.forEach((ele,i)=>{
-
- if(item.code==val.data.parentCode){
- ind=i
- // console.log(ind)
- }
-
- })
- if(ind>-1){
- this.listArr3[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
- this.listArr3[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
- }
-
- }
- if(this.listArr2){
- // console.log(this.listArr2)
- let ind=-1
- this.listArr3.forEach((ele,i)=>{
-
- if(item.code==val.data.parentCode){
- ind=i
- // console.log(ind)
- }
-
- })
- this.listArr2.forEach((element,num)=>{
- if(item.code==this.listArr3[ind].parentCode){
- ind=num
- console.log(ind)
- }
- })
- if(ind>-1){
-
- let checklist3=this.listArr3.filter((item,index)=>{
- return item.checked
- })
- // console.log(checklist)
-
- this.listArr2[ind].indeterminates = !!checklist3.length && checklist3.length < this.listArr3.length
- this.listArr2[ind].checked = checklist3.length === this.listArr3.length && this.listArr3.length!=0
- let z=-1;
- this.listArr1.forEach((element,num)=>{
-
- if(item.code==this.listArr2[ind].parentCode){
- z=num
- console.log(z)
- }
-
- })
- let checklist2=this.listArr1.filter((item,index)=>{
- return item.checked
- })
- if(z>-1){
- this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
- this.listArr1[z].checked = checklist2.length === this.listArr2.length && this.listArr2.length!=0
- }
-
- }
- }
-
- }
- }, 100)
- })
- },
- styleHandle(arr, i) {
- arr.forEach((item, index) => {
- if (index <= i) {
- item.style.width = `${100 / (i + 1)}%`
- item.style.borderRight = '1px solid #ccc'
- }
- })
- },
- resetStyle(arr, i) {
- arr.forEach((item, index) => {
- if (index < i) {
- item.style.width = `${100 / i}%`
- item.style.borderRight = '1px solid #ccc'
- }
- if (index == i - 1) {
- item.style.borderRight = 'none'
- }
- })
- }
- },
- mounted() {
- // this.listArr1=this.listArr;
- this.title1=this.title;
- // console.log(this.listUrl)
- if(this.listUrl){
- getAction(this.listUrl,{
- parentCode:0,
- level:this.maxLayers
- }).then((res)=>{
- console.log(res);
- if(res.success){
- res.result.records.forEach((item,index)=>{
- item.value=item.code
- item.checked=false;
- item.indeterminates=false;
-
- })
- };
- this.listArr1=res.result.records
- })
- }
-
-
- }
- }
- </script>
- <style lang="scss" scoped>
- .linkMultiSel {
- width: 100%;
- height: 310px;
- display: flex;
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .leftBox {
- width: 62%;
- margin-right: 3%;
- border: 1px solid #ccc;
- border-radius: 5px;
- overflow-x: auto;
- }
- .rightBox {
- width: 35%;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
- .title {
- height: 36px;
- line-height: 36px;
- font-size: 14px;
- font-weight: 600;
- border-radius: 5px 5px 0 0;
- background-color: rgb(248, 249, 250);
- padding: 0 15px;
- border-bottom: 1px solid #ccc;
- }
- .big_item {
- width: 100%;
- // min-width: 200px;
- // width: 426px;
- display: inline-block;
- // height: calc(100% - 10px);
- }
- .bigBOX {
- // width: calc(2 * 100%);
- height: calc(100% - 10px);
- box-sizing: border-box;
- // display: flex;
- }
- }
- </style>
|