查询方式的 select

先做一个查询方式的控件

  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      {{kindName}}<i
        class=" el-icon--right"
        :class="{'el-icon-arrow-up': isUp, 'el-icon-arrow-down': !isup}"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="kindId in findKind"
          :key="'s_kind_'+ kindId"
          :command="kindId"
          >
            {{findKindList[kindId].name}}
          </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

显示可以选择的查询方式。

import { defineComponent, ref } from 'vue'
import { findKindList } from '@/components/controlConfig/config-find.js'

// 查询方式的 select
export default defineComponent({
  name: 'el-find-kind',
  props: {
    // 返回选择的查询方式
    modelValue: [Number],
    // 需要显示的查询方式
    findKind: {
      type: Array,
      default: () => { return [411] }
    }
  },
  emits: ['update:modelValue', 'change'],
  setup (props, context) {
    const kindName = ref(findKindList[props.findKind[0]].name)

    const handleCommand = (command) => {
      kindName.value = findKindList[command].name
      context.emit('update:modelValue', command)
      context.emit('change', command)
    }

    return {
      isUp,
      kindName,
      findKindList,
      handleCommand
    }
  }
})

记录用户选择的查询方式，用v-model的方式返回给上级组件。

基本就是这个样子：

0002查询方式.png

文本的查询子控件

因为前面已经封装好了text控件，所以这里组合一下就好。

  <find-kind
    v-model="findChoiceKind"
    :findKind="findKind"
    @change="myChange"
  />
  <find-text
    v-model="findText"
    v-bind="$attrs"
    style="width:130px;"
    @input="myChange"
  />

应该还可以优化，只是需要明天再说了。

import { defineComponent } from 'vue'
// 引入查询子控件的管理类
import formItemManage from '../controlManage/findItemManage.js'
// 查询方式的控件
import selectFindKind from './s-findkind'
// 查询文本框
import text from '../nf-el-form-item/t-text'

export default defineComponent({
  name: 'el-find-text',
  inheritAttrs: false,
  props: {
    modelValue: [Array],
    findKind: {
      type: Array,
      default: () => { return [401, 402, 403, 404, 405, 406] }
    }
  },
  components: {
    'find-kind': selectFindKind,
    'find-text': text
  },
  emits: ['update:modelValue', 'myChange', 'input', 'change'],
  setup (props, context) {
    const {
      findChoiceKind, // 用户选择的查询方式
      findText, // 查询关键字
      mySubmit
    } = formItemManage(props, context)
    findChoiceKind.value = 401

    // 提交查询结果
    const myChange = () => {
      mySubmit(findText.value) // 查询关键字
    }

    return {
      findText,
      findChoiceKind,
      myChange
    }
  }
})

设置一下需要的查询方式，然后组合一下返给上级组件就行。

比较麻烦的是范围查询， 尤其是日期的，做个简单的是这个样子的：

0003日期查询.png

但是不完全嘛，还有好多要完善的，比如UI库提供的那个连在一起的那种。

还有返回的格式问题，可以是标准日期，也可以是字符串的，或者是int的。总之我感觉应该可以提供各种格式的，这样 就省着做各种转换了。

最后还要做一个查询控件，把这些合在一起，然后总感觉还能再优化一下代码。

明天试试动态组件。还要日期组件的那个连在一起的，看看要怎么封装一下。