ddmarketing-common-filter v1.0.4

common-filter 组件

安装依赖

npm i ddmarketing-common-filter

开始使用

main.js文件中引入并注册
import selfFilter from 'ddmarketing-common-filter'
Vue.use(selfFilter)

参数说明

dialogshow：控制filter弹出层的显示与隐藏，初始化置为false
items：filter可选参数列表，初始化置为空数组，该参数内容会在init事件中从接口获取并做相应处理，具体操作参考下面#如何使用#
filterdb：初始化置为空数组，该参数存储已选择filter的相应内容，在查询操作时取其content即为查询条件
init:初始化方法，在其内调用接口获取filter初始列表并需要对其做相应操作
Apply：提交操作，在执行查询时调用该方法在其内做相应的调用接口和取值的操作

如何使用

<template>
  <div>
        <selfFilter
          :dialogshow.sync="showfiltertt"
          :filterdb.sync="filterdbtt"
          :items.sync="itemstt2"
          @Apply="applyf"
          @init="init"
        ></selfFilter>
  </div>
</template>

<script>
export default {
  data(){
    return{
      showfiltertt: false,
      filterdbtt: [],
      itemstt2: [],
    }
  },
  methods:{
    init () {
      //调用接口获取部分数据
      taskSupportfilter().then((res) => {
        //以下为固定操作，需要对数据进行处理才能正常使用
        res.content.forEach(item => {
          if (item.type == "number" || item.type == "date") {
            item.label = ""
            item.originlabel = ""
            item.value1 = ""
            item.value2 = ""
            item.originvalue1 = ""
            item.originvalue2 = ""
          } else if (item.type == "string" || item.type == "selection" || item.type == "setSelection") {
            item.label = ""
            item.originlabel = ""
            item.value1 = []
            item.originvalue1 = []
          } else if (item.type == "bool") {
            item.label = ""
            item.originlabel = ""
            item.value1 = ""
            item.originvalue1 = ""
          }
        })
        this.itemstt2 = res.content
      })
    },
    applyf () {
      //filtertask为调用查询接口需要的参数，如下操作所示从filterdbtt的content取
      this.filtertask = []
      for (let i = 0; i < this.filterdbtt.length; i++) {
        this.filtertask.push(this.filterdbtt[i].content)
      }
      //调用查询接口
      this.getTasks()
    },
  },
}
</script>

特别说明

该组件还需要依赖element UI和亚马逊字体图标库
字体图标库需要引入的依赖如下：
    "@fortawesome/fontawesome-free": "^6.0.0",
    "@fortawesome/fontawesome-pro": "^6.0.0",
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-brands-svg-icons": "^6.0.0",
    "@fortawesome/free-regular-svg-icons": "^6.0.0",
    "@fortawesome/free-solid-svg-icons": "^6.0.0",
    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
    "@fortawesome/pro-light-svg-icons": "^6.0.0",
    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
    "@fortawesome/pro-solid-svg-icons": "^6.0.0",
    "@fortawesome/vue-fontawesome": "^2.0.6",
main.js里面引入即可：
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'