Переглянути джерело

feat: 企业搜索部分筛选条件全部选中逻辑调整

cuiyalong 11 місяців тому
батько
коміт
20b8cd0917

+ 57 - 34
apps/bigmember_pc/src/components/filter-items/OnecascadeContent.vue

@@ -1,14 +1,28 @@
 <template>
-  <Layout :type="type" :placeholder="placeholder" :trigger="trigger" :value="computedVal">
+  <Layout
+    :type="type"
+    :placeholder="placeholder"
+    :trigger="trigger"
+    :value="computedVal"
+  >
     <div class="cascade-content" slot="empty">
       <div class="cascade-content-module">
-        <header class="module-header" v-if="showHeader">{{ placeholder }}</header>
+        <header class="module-header" v-if="showHeader">
+          {{ placeholder }}
+        </header>
         <div class="module-main">
           <ul>
-            <li class="module-item" :class="{ 'active': fActive === fIndex }" v-for="(first, fIndex) in firstList"
-              :key="first.name">
-              <el-checkbox v-model="first.checked" :indeterminate="first.indeterminate"
-                @change="onFirstChange($event, first, fIndex)">
+            <li
+              class="module-item"
+              :class="{ active: fActive === fIndex }"
+              v-for="(first, fIndex) in firstList"
+              :key="first.name"
+            >
+              <el-checkbox
+                v-model="first.checked"
+                :indeterminate="first.indeterminate"
+                @change="onFirstChange($event, first, fIndex)"
+              >
               </el-checkbox>
               <span class="item-name">{{ first.label }}</span>
             </li>
@@ -46,7 +60,7 @@ export default {
       default: () => []
     },
     value: {
-      type: [Array,Object],
+      type: [Array, Object],
       default: () => {
         return null
       }
@@ -71,15 +85,15 @@ export default {
   },
   computed: {
     // 源数据是否带有【全部】选项
-    hadAll () {
-      return this.options.find(item => item.label === '全部') || false
+    hadAll() {
+      return this.options.find((item) => item.label === '全部') || false
     },
     // 源数据带有选项【全部】选项的值
-    hadAllValue () {
+    hadAllValue() {
       let result = ''
-      if(this.hadAll) {
-        this.options.forEach(item => {
-          if( item.label === '全部') {
+      if (this.hadAll) {
+        this.options.forEach((item) => {
+          if (item.label === '全部') {
             result = item.value
           }
         })
@@ -88,11 +102,12 @@ export default {
     },
     computedVal() {
       let result = ''
-      if(Array.isArray(this.value) && this.value.length) {
-        if(this.hadAllValue && this.value.includes(this.hadAllValue)) {
+      const value = this.value.filter((r) => !!r)
+      if (Array.isArray(value) && value.length) {
+        if (this.hadAllValue && value.includes(this.hadAllValue)) {
           result = ''
         } else {
-          result = `${this.placeholder}${this.value.length}个`
+          result = `${this.placeholder}${value.length}个`
         }
       }
       return result
@@ -109,7 +124,7 @@ export default {
   methods: {
     getArray() {
       const options = this.options
-      const toArray = options.map(item => {
+      const toArray = options.map((item) => {
         const resultObj = {
           value: item.value,
           label: item.label,
@@ -117,17 +132,17 @@ export default {
           indeterminate: false,
           disabled: false
         }
-        if(this.hadAll && item.label === '全部') {
+        if (this.hadAll && item.label === '全部') {
           resultObj.all = true
         }
-        return  resultObj
+        return resultObj
       })
       return toArray
     },
     initData() {
       const sourceList = this.getArray()
       // 数据源无全部的时候,手动在数据头部插入一组全部数据
-      if(!this.hadAll) {
+      if (!this.hadAll) {
         sourceList.unshift({
           label: '全部',
           value: '全部',
@@ -138,7 +153,7 @@ export default {
         })
       }
       this.firstList = sourceList
-      if(!this.value || this.value?.length === 0) {
+      if (!this.value || this.value?.length === 0) {
         this.setState(null)
       } else {
         this.setState(this.value)
@@ -146,7 +161,7 @@ export default {
     },
     onFirstChange(checked, first, fIndex) {
       if (first.all) {
-        this.firstList.forEach(item => {
+        this.firstList.forEach((item) => {
           item.checked = checked
           item.indeterminate = false
         })
@@ -163,32 +178,37 @@ export default {
       }
     },
     restState() {
-      this.firstList.forEach(item => {
+      this.firstList.forEach((item) => {
         item.checked = false
         item.indeterminate = false
       })
     },
     checkFirstAllStatus() {
-      const allFistList = this.firstList.filter(item => !item.all)
-      const selectedFirstList = this.firstList.filter(item => !item.all && item.checked)
-      const allHalfSelected = this.firstList.filter(item => !item.all && item.indeterminate)
+      const allFistList = this.firstList.filter((item) => !item.all)
+      const selectedFirstList = this.firstList.filter(
+        (item) => !item.all && item.checked
+      )
+      const allHalfSelected = this.firstList.filter(
+        (item) => !item.all && item.indeterminate
+      )
       if (allFistList.length === selectedFirstList.length) {
         this.firstList[0].checked = true
         this.firstList[0].indeterminate = false
       } else {
         this.firstList[0].checked = false
-        this.firstList[0].indeterminate = selectedFirstList.length > 0 || allHalfSelected.length > 0
+        this.firstList[0].indeterminate =
+          selectedFirstList.length > 0 || allHalfSelected.length > 0
       }
     },
     getState() {
       const list = JSON.parse(JSON.stringify(this.firstList))
       let arr = []
-      list.forEach(item => {
+      list.forEach((item) => {
         if (item.checked) {
           arr.push(item.value)
         }
       })
-      if(this.hadAll && arr.includes(this.hadAllValue)){
+      if (this.hadAll && arr.includes(this.hadAllValue)) {
         return [this.hadAllValue]
       } else if (arr.includes('全部')) {
         return []
@@ -199,20 +219,23 @@ export default {
     setState(value) {
       this.restState()
       if (!value) {
-        this.firstList.forEach(item => {
+        this.firstList.forEach((item) => {
           item.checked = false
           item.indeterminate = false
         })
         return
       }
-      if(Array.isArray(value)) {
-        if(value.length === 0 || (value.length  === 1 && value[0] === this.hadAllValue)) {
-          this.firstList.forEach(item => {
+      if (Array.isArray(value)) {
+        if (
+          value.length === 0 ||
+          (value.length === 1 && value[0] === this.hadAllValue)
+        ) {
+          this.firstList.forEach((item) => {
             item.checked = true
             item.indeterminate = false
           })
         } else {
-          this.firstList.forEach(item => {
+          this.firstList.forEach((item) => {
             if (value.includes(item.value)) {
               item.checked = true
               item.indeterminate = false

+ 23 - 16
apps/bigmember_pc/src/components/filter-items/SelectSelector.vue

@@ -6,9 +6,10 @@
     :value="computedVal"
     :trigger="trigger"
   >
-    <div class="filter-list" :style="{'max-height': maxHeight}" slot="empty">
-      <div class="filter-item"
-        :class="{'active': value === item.value}"
+    <div class="filter-list" :style="{ 'max-height': maxHeight }" slot="empty">
+      <div
+        class="filter-item"
+        :class="{ active: value === item.value }"
         v-for="item in options"
         :key="item.label"
         :label="item.label"
@@ -68,17 +69,23 @@ export default {
     }
   },
   computed: {
-    computedVal () {
+    computedVal() {
       if (this.value) {
-        const item = this.options.find(v => v.value === this.value)
-        return item.label
+        const item = this.options.find((v) => v.value === this.value)
+        const label = item.label
+        const allOptions = ['全国', '全部']
+        if (allOptions.includes(label)) {
+          return ''
+        } else {
+          return item.label
+        }
       } else {
         return ''
       }
     }
   },
   methods: {
-    handleChange (item) {
+    handleChange(item) {
       const beforeChange = this.beforeChange
       if (beforeChange) {
         const pass = beforeChange(item)
@@ -89,17 +96,17 @@ export default {
         this.onChange(item)
       }
     },
-    onChange (item) {
+    onChange(item) {
       const { layoutRef } = this.$refs
       this.$emit('change', item.value)
       try {
         layoutRef.$refs.dropdownRef.hide()
       } catch (error) {}
     },
-    getState () {
+    getState() {
       return this.value
     },
-    setState (value) {
+    setState(value) {
       this.value = value
     }
   }
@@ -107,7 +114,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-list{
+.filter-list {
   min-width: 140px;
   padding: 8px 0;
   border: 1px solid $color_main;
@@ -116,7 +123,7 @@ export default {
   margin-top: 2px;
   flex: 1;
   overflow-y: auto;
-  .filter-item{
+  .filter-item {
     padding: 4px 16px;
     font-size: 14px;
     line-height: 22px;
@@ -124,13 +131,13 @@ export default {
     text-align: left;
     cursor: pointer;
     white-space: nowrap;
-    &:hover{
-      background: #ECECEC;
+    &:hover {
+      background: #ececec;
     }
-    &.active{
+    &.active {
       color: $color_main;
     }
-    span{
+    span {
       display: inline-block;
       width: 100%;
     }

+ 2 - 1
apps/bigmember_pc/src/components/filter-items/ZhiMaBidSelector.vue

@@ -184,6 +184,7 @@ export default {
     computedVal() {
       let count = this.tags.length
       const value = this.value
+      if (!value) return ''
       const emptyObj = Object.keys(value).length === 0
       if (count <= 0 || emptyObj) {
         return ''
@@ -1176,7 +1177,7 @@ export default {
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 8px;
+    padding: 4px 8px;
     min-height: 30px;
     font-size: 14px;
     line-height: 22px;