feat: 新增搜索范围下拉框

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

@@ -0,0 +1,148 @@
+<template>
+  <Layout
+    :type="type"
+    :placeholder="placeholder"
+    :trigger="trigger"
+    :value="computedVal"
+  >
+    <div slot="empty" class="search-range-container">
+      <el-checkbox-group
+        v-model="selectVal"
+        @change="checkboxChange">
+        <el-checkbox
+          v-for="oItem in options"
+          :label="oItem.key"
+          :key="oItem.key">
+          {{oItem.label ? oItem.label.replace('搜索', '') : ''}}
+          <template v-for="tip in needTipList">
+             <el-tooltip  effect="dark"  placement="right" v-if="tip.name === oItem.label">
+              <div slot="content" style="width:300px; font-size: 14px;line-height: 24px;">
+                <span>{{tip.tip}}</span>
+              </div>
+              <i class="icon-help-img" ></i>
+            </el-tooltip>
+          </template>
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+  </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 { biddingSearchScope } from '@/assets/js/selector.js'
+export default {
+  name: 'InfoTypeDropdown',
+  components: {
+    [Tooltip.name]: Tooltip,
+    Layout,
+    CascadeContent
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'dropdown'
+    },
+    trigger: {
+      type: String,
+      default: 'hover'
+    },
+    placeholder: {
+      type: String,
+      default: '搜索范围'
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  data () {
+    return {
+      needTipList: [
+        {
+          name: '采购单位',
+          tip: '“采购单位”采购单位名称中包含输入关键词的会展示出来'
+        },
+        {
+          name: '中标企业',
+          tip: '“中标企业”中标企业名称中包含输入关键词的会展示出来'
+        },
+        {
+          name: '招标代理机构',
+          tip: '“招标代理机构”招标代理机构中包含输入关键词的会展示出来'
+        }
+      ],
+      options: biddingSearchScope,
+      selectVal: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.selectedVal = val
+      },
+      deep: true
+    }
+  },
+  computed: {
+    computedVal () {
+      return this.selectVal.length ? `${this.placeholder}${this.selectVal.length}个` : ''
+    }
+  },
+  created() {
+    this.selectVal = this.value
+  },
+  methods: {
+    checkboxChange () {
+      this.$emit('change', this.selectVal)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.search-range-container {
+  min-width: 140px;
+  padding: 8px;
+  border: 1px solid #2cb7ca;
+  background: #fff;
+  border-radius: 5px;
+  margin-top: 2px;
+
+  .el-checkbox{
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    color: #606266;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    user-select: none;
+    height: 30px;
+    line-height: 30px;
+  }
+
+}
+::v-deep {
+  .el-checkbox__label{
+    display: flex;
+    align-items: center;
+  }
+}
+.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>