crm/web/src/views/canteen/list/user-search.vue

<template>
  <ArtSearchBar
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    :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>
    schoolList: Api.Common.SelectRelationInfo[]
    companyList: Api.Common.SelectInfo[],
    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: 'name',
      type: 'input',
      placeholder: '请输入食堂名称',
      clearable: true
    },
    {
      label: '餐饮公司',
      key: 'company_id',
      type: 'select',
      filterable: true,
      props: {
        options: props.companyList.map((item) => ({
          label: item.name,
          value: item.id
        }))
      }
    },
    {
      label: '学校',
      key: 'school_id',
      type: 'select',
      props: {
        filterable: true,
        placeholder: '可搜索',
        clearable: true,
        options: props.schoolList.map((item) => ({
          label: item.name,
          value: item.id
        }))
      }
    },
    {
      label: '是否直营',
      key: 'is_direct',
      type: 'select',
      filterable: true,
      props: {
        options: [
          { label: '全部', value: -1 },
          { label: '直营', value: 1 },
          { label: '非直营', value: 0 }
        ]
      }
    },
    {
      label: '手机号',
      key: 'phone',
      type: 'input',
      placeholder: '请输入手机号',
      clearable: true
    },
    {
      label: '最后跟进人',
      key: 'last_user_id',
      type: 'select',
      labelWidth: '90px',
      span:6,
      filterable: true,
      props: {
        emptyValues:[0],
        valueOnClear:0,
        options: props.userList.map((item) => ({
          label: item.name,
          value: item.id
        })),
      },
    },
    {
      label: '最后跟进时间',
      key: 'last_date',
      span:8,
      labelWidth: '100px',
      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>