feat: 新增信息类型筛选条件

apps/bigmember_pc/src/components/filter-items/ChangeHandsDropdown.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="change-hands-dropdown">
+    <Layout
+      ref="layoutRef"
+      :type="type"
+      :placeholder="placeholder"
+      :trigger="trigger"
+      :value="computedVal"
+    >
+      <div slot="empty" class="filter-list">
+        <div class="filter-item"
+             :class="{'active': selected.value === item.value}"
+             v-for="item in options"
+             :key="item.label"
+             :label="item.label"
+             :value="item.value"
+             @click="handleChange(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </Layout>
+    <el-tooltip  effect="dark"  placement="top">
+      <div slot="content" style="width:300px; font-size: 14px;line-height: 24px;">
+        <span>"换手率说明：采购单位的历史物业项目中标单位更换频次统计。</span>
+      </div>
+      <i class="icon-help-img" ></i>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import Layout from '@/components/filter-items/Layout.vue'
+export default {
+    name: 'ChangeHands',
+  props: {
+    type: {
+      type: String,
+      default: 'dropdown'
+    },
+    trigger: {
+      type: String,
+      default: 'hover'
+    },
+    placeholder: {
+      type: String,
+      default: '换手率'
+    },
+    value: {
+      type: [String, Number],
+      default: null
+    },
+    beforeChange: Function
+  },
+  components: {
+    Layout
+  },
+  data () {
+    return {
+      options: [
+        {
+          label: "不限",
+          value: "1"
+        },
+        {
+          label: "到期换手率高",
+          value: "2"
+        }
+      ],
+      selected: {
+        label: '',
+        value: this.value
+      }
+    }
+  },
+  computed: {
+    computedVal () {
+      if (this.selected.value) {
+        return this.selected.label
+      } else {
+        return ''
+      }
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        this.setState(n)
+      }
+    }
+  },
+  methods: {
+    handleChange (item) {
+      const beforeChange = this.beforeChange
+      if (beforeChange) {
+        const pass = beforeChange(item)
+        if (pass) {
+          this.onChange(item)
+        }
+      } else {
+        this.onChange(item)
+      }
+    },
+    onChange (item) {
+      const { layoutRef } = this.$refs
+      try {
+        layoutRef.$refs.dropdownRef.hide()
+      } catch (error) {}
+      this.$emit('change', item.value)
+      this.selected.value = item.value
+      this.selected.label = item.label
+    },
+    getState () {
+      return this.selected.value
+    },
+    setState (value = this.selected.value) {
+      this.selected.value = value
+      this.options.forEach(option => {
+        if (option.value === value) {
+          this.selected.label = option.label
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.change-hands-dropdown{
+  min-width:96px;
+  display: flex;
+  height: 24px;
+}
+.filter-list{
+  min-width: 140px;
+  padding: 8px 0;
+  border: 1px solid $color_main;
+  background: #fff;
+  border-radius: 5px;
+  margin-top: 2px;
+  .filter-item{
+    padding: 4px 16px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #1d1d1d;
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+    &:hover{
+      background: #ECECEC;
+    }
+    &.active{
+      // color: $color_main;
+      background: #ECECEC;
+    }
+    span{
+      display: inline-block;
+      width: 100%;
+    }
+  }
+}
+.icon-help-img {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-top:6px;
+  margin-left: 6px;
+  background: url("~@/assets/images/icon/help.png") no-repeat center;
+  background-size: contain;
+  cursor: pointer;
+}
+</style>

apps/bigmember_pc/src/components/filter-items/InfoTypeDropdown.vue

@@ -0,0 +1,103 @@
+<template>
+  <Layout
+    :type="type"
+    :placeholder="placeholder"
+    :trigger="trigger"
+    :value="computedVal"
+  >
+    <CascadeContent
+      ref="infoTypeDropdown"
+      slot="empty"
+      :options="dataMap"
+      :value="value"
+      @change="onChange"
+    >
+      <template #expend-first="{ first }" >
+        <el-tooltip  effect="dark"  placement="right" v-if="first.name === '采购意向'">
+          <div slot="content" style="width:300px; font-size: 14px;line-height: 24px;">
+            <span>"采购意向"是指提供未发布招标公告前1-3个月，政府单位的采购意向信息，包含采购内容、预算金额、预计采购时间、采购联系人及联系方式等相关信息。</span>
+          </div>
+          <i class="icon-help-img" ></i>
+        </el-tooltip>
+      </template>
+    </CascadeContent>
+  </Layout>
+</template>
+
+<script>
+import { Tooltip } from 'element-ui'
+import Layout from '@/components/filter-items/Layout.vue'
+import CascadeContent from '@/components/filter-items/CascadeContent.vue'
+import { infoTypeListMapExp } from '@/assets/js/selector.js'
+export default {
+  name: 'InfoTypeDropdown',
+  props: {
+    type: {
+      type: String,
+      default: 'dropdown'
+    },
+    trigger: {
+      type: String,
+      default: 'hover'
+    },
+    placeholder: {
+      type: String,
+      default: '信息类型'
+    },
+    value: {
+      type: Object,
+      default: () => {}
+    },
+    // 不需要拟建筛选条件
+    notNJ:  {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    [Tooltip.name]: Tooltip,
+    Layout,
+    CascadeContent
+  },
+  watch: {
+    value (val) {
+      this.selectedVal = this.$refs.infoTypeDropdown.levelMapToArray(val)
+      this.$refs.infoTypeDropdown.setState(val)
+    }
+  },
+  data () {
+    return {
+      options: infoTypeListMapExp,
+      selectedVal: []
+    }
+  },
+  computed: {
+    computedVal () {
+      return this.selectedVal.length ? `${this.placeholder}${this.selectedVal.length}个` : ''
+    },
+    dataMap () {
+      const map = infoTypeListMapExp
+      if(this.notNJ) {
+        delete map['拟建项目']
+      }
+      return map
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.icon-help-img {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-left: 6px;
+  background: url("~@/assets/images/icon/help.png") no-repeat center;
+  background-size: contain;
+  cursor: pointer;
+}
+</style>