定向包 - 地域封装 - 选择的还未完成

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/cascader.ts

@@ -1,8 +1,9 @@
 import {computed, getCurrentInstance, reactive, ref} from "vue";
 import SubList from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subList.vue'
 import {reactiveTableAndAny} from "@/api/ApiModel";
+import _ from "lodash";
 
-export function cascaderTs(propsParams:any,emitParams:any){
+export function cascaderTs(propsParams:any){
 
     const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
@@ -15,6 +16,7 @@ export function cascaderTs(propsParams:any,emitParams:any){
     })
 
     const acIdx = ref<number>(-1)
+
     //全选
     const isAllCheck = computed(()=>{
         let flag:boolean = true
@@ -27,38 +29,12 @@ export function cascaderTs(propsParams:any,emitParams:any){
     })
 
     const pageInfo = reactive<reactiveTableAndAny>({
-        chooseOpions:[],
         subOpions:[],
         subId:'',
+        chooseIds:[],
     })
 
 
-//已选的个数
-    const chooseNum = computed(()=>{
-        let num:number = 0
-        opionsList.value.forEach(item=>{
-            if(item.isCheck){
-                num+=1
-            }else{
-                item.child.forEach(sub=>{
-                    if(sub.isCheck){
-                        num+=1
-                    }
-                })
-            }
-        })
-        return num
-    })
-
-//最高级添加至已选列表
-    const addToChooseList = (item:any) => {
-        if(item.isCheck){
-            pageInfo.chooseOpions.push(item)
-        }else{
-            let idx:number = pageInfo.chooseOpions.findIndex(n=>n.id == item.id)
-            pageInfo.chooseOpions.splice(idx,1)
-        }
-    }
 
     //设置下级是否全选或全不选
     const set_check = (arr:any,val:boolean) => {
@@ -73,12 +49,12 @@ export function cascaderTs(propsParams:any,emitParams:any){
 //全选
     const allEvent = (val:boolean) => {
         set_check(opionsList.value,val)
-        pageInfo.chooseOpions = JSON.parse(JSON.stringify(opionsList.value))
         if(!val){ //清空子选项
             pageInfo.subOpions = []
             acIdx.value = -1
         }
     }
+
     //根据子全选 - 设置父级以及爷级是否选中
     const setParentItemCheckEvent = (checked: any,parentId:number|string) => {
         opionsList.value.forEach(item=>{
@@ -102,45 +78,24 @@ export function cascaderTs(propsParams:any,emitParams:any){
     }
 
 
+    const updateKey=ref<number>(1)
 
 //个别点击,选中的时候
     const ItemClickEvent = (itemIdx:number,item:any) => {
         //展示子选项
         ItemClickShowSubEvent(itemIdx,item)
-        pageInfo.chooseOpions = JSON.parse(JSON.stringify(opionsList.value))
     }
 
 
-//全选回显
-    const echoEvent = (obj:any) => {
-        let idx:number = opionsList.value.findIndex(n=>n.id == obj.id)
-        opionsList.value[idx].isCheck = obj.flag
-    }
-
-
-
-//已选框中的 删除
-    const deleEvent = (item:any) => {
-        item.isCheck = false
-        item.child.forEach(sub=>{
-            sub.isCheck = false
-        })
-    }
-
-
-
     return{
         acIdx,
         isAllCheck,
         pageInfo,
-        chooseNum,
-        addToChooseList,
         opionsList,
         allEvent,
+        updateKey,
         ItemClickShowSubEvent,
         ItemClickEvent,
-        echoEvent,
-        deleEvent,
-        setParentItemCheckEvent
+        setParentItemCheckEvent,
     }
 }

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flexWrap" style="align-items: flex-start">
-
+    {{testList.list}}
     <div class="panel" >
       <div class="title">{{title||'-'}}</div>
       <div class="content">
@@ -8,7 +8,7 @@
           <el-checkbox v-model="isAllCheck" size="default" @change="val=>allEvent(val)">全选</el-checkbox>
         </div>
         <div class="cItem" v-for="(item,itemIdx) in opionsList" :class="itemIdx == acIdx ? 'active' : ''" @click.stop="ItemClickShowSubEvent(itemIdx,item)">
-          <el-checkbox v-model="item.isCheck" size="default" @change="ItemClickEvent(itemIdx,item)">{{item.name}}</el-checkbox>
+          <el-checkbox v-model="item.isCheck" size="default" @change="val=>ItemClickEvent(itemIdx,item)">{{item.name}}</el-checkbox>
           <el-icon class="lMarauto" color="#606266" :size="14" v-if="item.child&&item.child.length>0"><i-ep-ArrowRight/></el-icon>
         </div>
       </div>
@@ -17,62 +17,35 @@
     <template v-if="pageInfo.subOpions&&pageInfo.subOpions.length>0">
       <SubList title="选项" :list="pageInfo.subOpions"
                :subId="pageInfo.subId"
-               @setParentItemCheck="setParentItemCheckEvent"
-               @echoVal="echoEvent"></SubList>
+               @setParentItemCheck="setParentItemCheckEvent"></SubList>
     </template>
 
 
-<!--
-    <div class="panel">
-      <div class="title c-000 f12">已选<span>({{pageInfo.chooseOpions&&pageInfo.chooseOpions.length}})</span></div>
-      <div class="content">
-        <template v-for="(item,idx) in pageInfo.chooseOpions">
-          <div class="cItem active tMar8"  v-if="item.isCheck">
-            {{item.name}}
-            <el-icon class="lMarauto" color="#606266" :size="14" @click="deleEvent(item)"><i-ep-Close/></el-icon>
-          </div>
-          <template v-else>
-            <template v-for="sub in item.child">
-              <div class="cItem active tMar8" v-if="sub.isCheck">
-                {{sub.name}}
-                <el-icon class="lMarauto" color="#606266" :size="14" @click="sub.isCheck = false"><i-ep-Close/></el-icon>
-              </div>
-            </template>
-          </template>
-        </template>
-      </div>
-    </div>
--->
-
-<!--    写到已选-->
     <div class="panel">
-      <div class="title c-000 f12">已选<span>({{pageInfo.chooseOpions&&pageInfo.chooseOpions.length}})</span></div>
+      <div class="title c-000 f12">已选<span>({{chooseNum}})</span></div>
       <div class="content">
         <template v-for="(item,idx) in opionsList">
           <div class="cItem active tMar8"  v-if="item.isCheck">
-            {{item.name}}
+            {{item.name}}-{{item.id}}}
             <el-icon class="lMarauto" color="#606266" :size="14" @click="deleEvent(item)"><i-ep-Close/></el-icon>
           </div>
           <template v-else>
             <template v-for="sub in item.child">
-              <div class="cItem active tMar8" v-if="sub.isCheck">
-                {{sub.name}}
-                <el-icon class="lMarauto" color="#606266" :size="14" @click="sub.isCheck = false"><i-ep-Close/></el-icon>
-              </div>
+              <SubChooseItem :ITEM="sub"></SubChooseItem>
             </template>
           </template>
         </template>
       </div>
     </div>
+
+
   </div>
 </template>
 <script setup lang="ts">
-import {cascaderTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/cascader";
-import {computed, defineEmits, defineProps, withDefaults} from "vue";
-
-const emit = defineEmits<{
-  (event: "echoVal", val: any): void;
-}>();
+import SubChooseItem from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChooseItem.vue'
+import {cascaderTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/index";
+import {subChooseTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChoose";
+import {computed, defineProps, withDefaults, watch, reactive} from "vue";
 
 
 const props = withDefaults(defineProps<{
@@ -85,20 +58,90 @@ const props = withDefaults(defineProps<{
   subId:''
 })
 
+
+//已选的个数
+const chooseNum = computed(()=>{
+  let num:number = 0
+  opionsList.value.forEach(item=>{
+    if(item.isCheck){
+      num+=1
+    }else{
+      if(item.child&&item.child.length>0){
+        item.child.forEach(sub=>{
+          if(sub.isCheck){
+            num+=1
+          }else{
+            if(sub.child&&sub.child.length>0){
+              sub.child.forEach(sun=>{
+                if(sun.isCheck){
+                  num+=1
+                }else{
+                  if(sun.child&&sun.child.length>0){
+                    sun.child.forEach(cSun=>{
+                      if(cSun.isCheck){
+                        num+=1
+                      }
+                    })
+                  }
+                }
+              })
+            }
+          }
+        })
+      }
+    }
+  })
+  return num
+})
+
+const subChooseNum = (arr:any,numProp:number) => {
+ if(arr&&arr.length>0){
+   arr.forEach(sub=>{
+     if(sub.isCheck){
+       numProp+=1
+     }else{
+       if(sub.child&&sub.child.length>0){
+         subChooseNum(sub.child,numProp)
+       }
+     }
+   })
+ }
+ return numProp
+}
+
+
+
+
 const {
   acIdx,
   isAllCheck,
   pageInfo,
-  chooseNum,
-  addToChooseList,
   opionsList,
   allEvent,
+  updateKey,
   ItemClickShowSubEvent,
   ItemClickEvent,
-  echoEvent,
-  deleEvent,
   setParentItemCheckEvent
-}  = cascaderTs(props,emit)
+}  = cascaderTs(props)
+
+
+const {deleEvent} = subChooseTs()
+
+
+// const testList = reactive<any>({
+//   list:[]
+// })
+// //获取选中的集合
+// const get_chooseItem = (item:any)=>{
+//   if(item.isCheck){
+//     // pageInfo.chooseIds.push(item.id)
+//     testList.list.push(item.id)
+//   }else{
+//     if(item.child&&item.child.length>0){
+//       get_chooseItem(item.child)
+//     }
+//   }
+// }
 
 </script>
 <style lang="scss" scoped>

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChoose.ts

@@ -0,0 +1,32 @@
+import {computed, getCurrentInstance, reactive, ref} from "vue";
+import SubChooseItem from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChooseItem.vue'
+import {reactiveTableAndAny} from "@/api/ApiModel";
+
+export function subChooseTs(){
+
+    const { proxy } = getCurrentInstance() as any;
+    // 全局方法定义
+    const NumberHandle = proxy.$NumberHandle
+
+
+    //已选框中的 删除
+    const deleEvent = (item:any) => {
+        item.isCheck = false
+        if(item.child&&item.child.length>0){
+            set_check(item.child,false)
+        }
+    }
+    //设置下级是否全选或全不选
+    const set_check = (arr:any,val:boolean) => {
+        arr.forEach(item=>{
+            item.isCheck = val
+            if(item.child&&item.child.length>0){
+                set_check(item.child,val)
+            }
+        })
+    }
+
+    return{
+        deleEvent
+    }
+}

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChooseItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="cItem active tMar8"  v-if="ITEM.isCheck">
+    {{ITEM.name}}-{{ITEM.id}}
+    <el-icon class="lMarauto" color="#606266" :size="14" @click="deleEvent(ITEM)"><i-ep-Close/></el-icon>
+  </div>
+  <template v-else>
+    <template v-for="sub in ITEM.child">
+      <SubChooseItem :ITEM="sub"></SubChooseItem>
+    </template>
+  </template>
+</template>
+<script setup lang="ts">
+import {defineProps, withDefaults} from "vue";
+import {subChooseTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChoose";
+
+const props = withDefaults(defineProps<{
+  ITEM?:any,
+  subId?:string|number,
+}>(), {
+  ITEM:{},
+  subId:''
+})
+
+const {deleEvent} = subChooseTs()
+</script>
+<style lang="scss" scoped>
+.panel{
+  border: 1px solid #dee4f5;
+  font-size: 14px;
+  width: 200px;
+  margin-right: 20px;
+  flex-shrink: 0;
+  margin-bottom: 10px;
+  .title{
+    height: 40px;
+    padding: 0 12px;
+    font-size: 14px;
+    line-height: 40px;
+    color: #333;
+    background-color: #fafbfe;
+    border-bottom: 1px solid #dee4f5;
+  }
+  .content{
+    height: 250px;
+    overflow-y: auto;
+    .cItem{
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      padding: 0 12px;
+      height: 32px;
+      line-height: 32px;
+      &:hover{
+        background-color: #f8f8f8;
+      }
+      &.active{
+        background-color: #f8f8f8;
+      }
+    }
+  }
+}
+</style>

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subList.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="flex">
     <div class="panel" >
-      <div class="title">{{title||'-'}}{{props.subId}}</div>
+      <div class="title">{{title||'-'}}subId:{{subId}}</div>
       <div class="content">
         <div class="cItem">
-          <el-checkbox v-model="isAllCheck" size="default" @change="val=>allEvent(val)">全选{{acIdx}}</el-checkbox>
+          <el-checkbox v-model="isAllCheck" size="default" @change="val=>allEvent(val)">全选</el-checkbox>
         </div>
         <div class="cItem"
              v-for="(item,itemIdx) in opionsList"
              @click.stop="ItemClickShowSubEvent(itemIdx,item)"
              :class="itemIdx == acIdx ? 'active' : ''">
-          <el-checkbox v-model="item.isCheck" size="default" @change="val=>ItemClickEvent(itemIdx,item)">{{item.name}}</el-checkbox>
+          <el-checkbox v-model="item.isCheck" size="default" @change="val=>ItemClickEvent(itemIdx,item)">{{item.name}}-{{item.id}}</el-checkbox>
           <el-icon class="lMarauto" color="#606266" :size="14" v-if="item.child&&item.child.length>0"><i-ep-ArrowRight/></el-icon>
         </div>
       </div>
     </div>
 
     <template v-if="pageInfo.subOpions&&pageInfo.subOpions.length>0">
-      <SubList title="选项"
+      <SubList title=""
                @setParentItemCheck="setParentItemCheckEvent"
                :list="pageInfo.subOpions"
                :subId="pageInfo.subId" ></SubList>
@@ -25,8 +25,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import {computed, defineEmits, defineProps, watch, withDefaults} from "vue";
-import {cascaderTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/cascader";
+import {computed, defineEmits, defineProps, reactive, watch, withDefaults} from "vue";
+import {cascaderTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/index";
+import {reactiveTableAndAny} from "@/api/ApiModel";
 
 const props = withDefaults(defineProps<{
   title?: string,
@@ -38,7 +39,6 @@ const props = withDefaults(defineProps<{
   subId:''
 })
 const emit = defineEmits<{
-  (event: "echoVal", val: any): void;
   (event: "setParentItemCheck", checked: any,parentId:number|string): void;//设置父级显隐
 }>();
 
@@ -53,16 +53,13 @@ const {
   acIdx,
   isAllCheck,
   pageInfo,
-  chooseNum,
-  addToChooseList,
   opionsList,
   allEvent,
   ItemClickShowSubEvent,
   ItemClickEvent,
-  echoEvent,
   deleEvent,
   setParentItemCheckEvent
-}  = cascaderTs(props,emit)
+}  = cascaderTs(props)
 
 //监听本页全选是否选中
 watch(()=>isAllCheck.value,(val)=>{