dm-manage-web/src/views/zs/clue/components/SearchForm.vue

<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" inline>
      <el-form-item label="筛选:" label-width="90px">
        <DMRadio v-model="searchForm.quickSearch" :list="quickList" all-text="全部" @change="$emit('search')" />
      </el-form-item>
      <el-form-item label="意向状态:" label-width="90px">
        <DMRadio v-model="searchForm.intentionState" :list="intentionOptions" all-text="全部" @change="$emit('search')" />
      </el-form-item>
      <el-row>
        <el-form-item label="姓名/联系方式">
          <el-input v-model="searchForm.name" placeholder="姓名/联系方式" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="线索来源">
          <el-select v-model="searchForm.source" placeholder="选择线索来源" clearable>
            <el-option v-for="dict in sourceOptions" :key="dict.dictValue" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进人员">
          <el-select v-model="searchForm.followUser2" placeholder="选择跟进人员" filterable clearable>
            <el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="pickDateChange" />
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search" @click="$emit('search')">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import DMRadio from '@/components/DMRadio';
export default {
  components: {
    DMRadio
  },
  props: {
    userOptions: {
      type: Array,
      default: []
    },
    sourceOptions: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      searchForm: {},
      quickList: [
        { value: 1, label: '我创建的' },
        { value: 2, label: '我的有效' },
        { value: 3, label: '有效线索' },
        { value: 4, label: '今日有效线索' },
        { value: 5, label: '今日跟踪' },
        { value: 6, label: '过期线索' },
        { value: 7, label: '相关线索' },
        { value: 8, label: '撞单线索' }
      ],
      intentionOptions: [],
      dateRange: []
    }

  },
  created() {
    // 意向状态
    this.getDicts('dm_intention_state').then((response) => {
      let list = response.data
      this.intentionOptions = []
      list.map(item => {
        this.intentionOptions.push({
          value: item.dictValue,
          label: item.dictLabel
        })
      })
    })
  },
  methods: {
    resetQuery() {
      this.searchForm = {
        createTime: [],
        name: undefined,
        intentionState: undefined,
        followUser2: undefined,
        source: undefined,
        quickSearch: undefined,
        total: 0
      };
      this.dateRange = []
    },
    pickDateChange() {
      this.addDateRange(this.searchForm, this.dateRange)
    }
  },
}
</script>