搜索词条展示

src/views/using/query.vue

@@ -1,6 +1,25 @@
 <template>
     <div class="hc-page-box" id="carry-spot-checks-layout-target">
         <HcCard ui="hc-query-card-box" v-show="!isCarrySpotChecksDrawer">
+            <div  v-if="isShowheader" class="flex_box">
+               
+                    <div class="hc-arrow-icon">
+                        <HcIcon name="arrow-left-s"/>
+                    </div>
+                    <div class="hc-tag-box">
+                        <el-scrollbar>
+                            <div class="scrollbar-content">
+                                <template v-for="item in tags">
+                                    <el-tag class="mx-1" closable effect="light" size="large" @close="deltag(item)">{{ item.name }}</el-tag>
+                                </template>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                    <div class="hc-arrow-icon">
+                        <HcIcon name="arrow-right-s"/>
+                    </div>
+              
+            </div>
             <div class="hc-query-input-box">
                 <el-input placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开" v-model="searchInput" clearable @clear="clearinput">
                     <template #prepend>
@@ -286,13 +305,20 @@ const projectInfo = ref(useAppState.getProjectInfo);
 const isBubble = ref(useAppState.getBubble);
 const userRoleId = ref(useAppState.getRoleId);
 const hoverHand = ref(true)
+const isShowheader = ref(false)
+const tags = ref([])
 
 
 //监听
 watch(() => [
-    useAppState.getBubble,
-], ([bubble]) => {
+    useAppState.getBubble,tags.value
+], ([bubble,Tags]) => {
     isBubble.value = bubble
+   if(Tags.length==0){
+    isShowheader.value=false
+   }else{
+    isShowheader.value=true
+   }
 })
 
 //渲染完成
@@ -303,6 +329,99 @@ onMounted(() => {
     getTableData()
 })
 
+//处理数据
+const rowsToArr = (rows) => {
+    let newArr = [];
+    for (let i = 0; i < rows.length; i++) {
+        newArr.push(rows[i]?.key)
+    }
+    return newArr.join(',')
+}
+const deltag=(item)=>{
+    tags.value=tags.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    //设置年份
+    annual.value=annual.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    yeararr.value=yeararr.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    searchForm.value.year=rowsToArr(annual.value)
+    if(annual.value.length==0){
+        annual.value=[{key: 'all', name: '所有'}]
+    }
+
+    //设置月份  
+    month.value=month.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    montharr.value=montharr.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+  
+    searchForm.value.month=rowsToArr(month.value)
+    if(month.value.length==0){
+        month.value=[{key: 'all', name: '所有'}]
+    }
+     //设置保管期限
+     deadline.value=deadline.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    deadlinearr.value=deadlinearr.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    searchForm.value.storageTime=rowsToArr(deadline.value)
+    if(deadline.value.length==0){
+        deadline.value=[{key: 'all', name: '所有'}]
+    }
+    //设置密级
+    security.value=security.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    securityarr.value=securityarr.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    searchForm.value.secretLevel=rowsToArr(security.value)
+    if(security.value.length==0){
+        security.value=[{key: 'all', name: '所有'}]
+    }
+     //设置类别
+    classes.value=classes.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    classesarr.value=classesarr.value.filter((ele)=>{
+        if(item.name!==ele.name){
+            return item
+        }
+    })
+    searchForm.value.carrierType=rowsToArr(classes.value)
+    if(classes.value.length==0){
+        classes.value=[{key: 'all', name: '所有'}]
+    }
+    
+}
 //搜索表单
 const searchForm = ref({
     current: 1, size: 20, total: 0,searchType:"1"
@@ -341,10 +460,82 @@ const setAnnuals = () => {
     }
     annuals.value = annualArr
 }
+//数组去重
+const some=(arr)=> {
+    let some= [];
+    arr.forEach(el => {
+      if (!some.some(e => e.name == el.name)) {
+        some.push(el);
+      }
+    });
+  return some
+}
+const allarr=ref([])
+const montharr=ref([])
+const yeararr=ref([])
+const deadlinearr=ref([])
+const securityarr=ref([])
+const classesarr=ref([])
+const setTags=(val,type)=>{
+    let arr=[]
+    val.forEach((item)=>{
+        if(item.name!=='所有'){
+            arr.push({name:item.name})
+        }
+    })
+    let filarr=some(arr)
+    if(type==='month'){
+        montharr.value=some(filarr)
+        if(montharr.value.length==0){
+            month.value=[{key: 'all', name: '所有'}]
+        }
+    }else if(type==='year'){
+        yeararr.value=some(filarr)
+        if(yeararr.value.length==0){
+            annual.value=[{key: 'all', name: '所有'}]
+        }
+    }else if(type==='deadline'){
+        deadlinearr.value=some(filarr)
+        if(deadlinearr.value.length==0){
+            deadline.value=[{key: 'all', name: '所有'}]
+        }
+    }else if(type==='security'){
+        securityarr.value=some(filarr)
+        if(securityarr.value.length==0){
+            security.value=[{key: 'all', name: '所有'}]
+        }
+    }else if(type==='classes'){
+        classesarr.value=some(filarr)
+        if(classesarr.value.length==0){
+            classes.value=[{key: 'all', name: '所有'}]
+        }
+    }
+    let finalarr=[]
+
+    yeararr.value.forEach((item)=>{
+        finalarr.push({name:item.name})
+    })
+
+    montharr.value.forEach((item)=>{
+        finalarr.push({name:item.name})
+    })
+    deadlinearr.value.forEach((item)=>{
+        finalarr.push({name:item.name})
+    })
+    securityarr.value.forEach((item)=>{
+        finalarr.push({name:item.name})
+    })
+    classesarr.value.forEach((item)=>{
+        finalarr.push({name:item.name})
+    })
+    tags.value=some(finalarr)
+}
+
 const annual = ref([{key: 'all', name: '所有'}])
 const annualClick = (item) => {
     annual.value = setQueryFiltering(annual.value, item)
-   searchForm.value.year=item.name
+    setTags(annual.value,'year')
+   searchForm.value.year=item.name;
    let arr=[]
   annual.value.forEach((item)=>{
        arr.push(item.key)
@@ -370,6 +561,7 @@ const setMonths = () => {
 const month = ref([{key: 'all', name: '所有'}])
 const monthClick = (item) => {
     month.value = setQueryFiltering(month.value, item)
+    setTags(month.value,'month')
     let arr=[]
     month.value.forEach((item)=>{
         arr.push(item.key)
@@ -387,6 +579,7 @@ const deadlines = ref([
 ])
 const deadlineClick = (item) => {
     deadline.value = setQueryFiltering(deadline.value, item)
+    setTags(deadline.value,'deadline')
     let arr=[]
     deadline.value.forEach((item)=>{
         arr.push(item.key)
@@ -406,6 +599,7 @@ const securitys = ref([
 ])
 const securityClick = (item) => {
     security.value = setQueryFiltering(security.value, item)
+    setTags(security.value,'security')
     let arr=[]
     security.value.forEach((item)=>{
         arr.push(item.key)
@@ -430,6 +624,7 @@ const getCarrierTypeByDictdata=async()=>{
 
 const classesClick = (item) => {
     classes.value = setQueryFiltering(classes.value, item)
+    setTags(classes.value,'classes')
     let arr=[]
     classes.value.forEach((item)=>{
         arr.push(item.key)
@@ -443,6 +638,11 @@ const setQueryFiltering = (arr, {key, name}) => {
     if (key === 'all') {
         //如果选择所有，就删除其他
         arr = [{key, name}]
+        tags.value= tags.value.filter((item)=>{
+            if(item.name.indexOf===-1){
+                return item
+            }
+        })
     } else {
         //选中还是取消
         const index = arrIndex(arr, 'key', key)
@@ -931,4 +1131,20 @@ const loadNode=(tree, resolve)=>{
 .col_tree{
     font-size: 16px;
 }
+.hc-tag-box {
+    position: relative;
+    width: calc(100% - 40px);
+    overflow: hidden;
+   
+ 
+}
+.scrollbar-content {
+    white-space: nowrap;
+    padding: 10px;
+}
+.flex_box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 </style>