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

<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" inline size="mini">
      <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="createDateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="pickDateChange" />
        </el-form-item>
        <el-form-item label="下次跟进日期">
          <el-date-picker v-model="nextDateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="nextDateChange" />
        </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: () => ([])
    },
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      searchForm: { ...this.form },
      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: '撞单线索' },
        { value: 9, label: '待分配' }
      ],
      intentionOptions: [],
      createDateRange: [],
      nextDateRange: []
    };
  },
  watch: {
    searchForm: {
      handler(val) {
        this.$emit('update:form', val);
      },
      deep: true
    }
  },
  created() {
    // 意向状态
    this.getDicts('dm_intention_state').then((response) => {
      const list = response.data;
      this.intentionOptions = [];
      list.map(item => {
        this.intentionOptions.push({
          value: item.dictValue,
          label: item.dictLabel
        });
      });
    });
  },
  methods: {
    resetQuery() {
      this.searchForm = {
        name: undefined,
        intentionState: undefined,
        followUser2: undefined,
        source: undefined,
        quickSearch: undefined,
        total: 0
      };
      this.createDateRange = [];
      this.nextDateRange = [];
    },
    pickDateChange() {
      if (this.createDateRange && this.createDateRange.length > 0) {
        this.searchForm.createDateStart = this.createDateRange[0];
        this.searchForm.createDateEnd = this.createDateRange[1];
      } else {
        this.searchForm.createDateStart = undefined;
        this.searchForm.createDateEnd = undefined;
      }
    },
    nextDateChange() {
      if (this.nextDateRange && this.nextDateRange.length > 0) {
        this.searchForm.nextDateStart = this.nextDateRange[0];
        this.searchForm.nextDateEnd = this.nextDateRange[1];
      } else {
        this.searchForm.nextDateStart = undefined;
        this.searchForm.nextDateEnd = undefined;
      }
    }
  }
};
</script>