crm/web/src/views/school/follow/modules/user-search.vue

<template>
  <ArtSearchBar
      ref="searchBarRef"
      v-model="formData"
      :items="formItems"
      :selectList="selectList"
      :rules="rules"
      :showExpand="false"
      :isExpand="true"
      @reset="handleReset"
      @search="handleSearch"
  >
  </ArtSearchBar>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, h } from 'vue'

interface Props {
  modelValue: Record<string, any>
  selectList: Api.Common.SelectRelationInfo[],
  userList: Api.Common.SelectInfo[]
}
interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'search', params: Record<string, any>): void
  (e: 'reset'): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 表单数据双向绑定
const searchBarRef = ref()
const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 校验规则
const rules = {
  // name: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}

const props1 = {
  checkStrictly: true
}

// 表单配置
const formItems = computed(() => [
  {
    label: '手机号',
    key: 'phone',
    type: 'input',
    placeholder: '请输入手机号',
    clearable: true
  },
  {
    label: '学校',
    key: 'school',
    type: 'cascader',
    props: {
      options: props.selectList.map(item => ({
        value: item.id,
        label: item.name,
        children: item.children?.map(item => ({
          value: item.id,
          label: item.name
        }))
      })),
      style: { width: '280px' },
      filterable: true,
      placeholder: '可搜索',
      clearable: true,
      props: props1
    }
  },
  {
    label: '跟进人',
    key: 'user_id',
    type: 'select',
    filterable: true,
    props: {
      emptyValues:[0],
      valueOnClear:0,
      options: props.userList.map((item) => ({
        label: item.name,
        value: item.id
      })),
    },
  },
  {
    label: '跟进时间',
    span: 8,
    key: 'range_date',
    type: 'datetimerange',
    filterable: true,
    props: {
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      rangeSeparator: '至',
      startPlaceholder: '开始日期时间',
      endPlaceholder: '结束日期时间'
    }
  },
])

// 事件
function handleReset() {
  emit('reset')
}

async function handleSearch() {
  await searchBarRef.value.validate()
  emit('search', formData.value)
}
</script>