阅读 17 SEO

Vue组件(29)做一个更好用的查询控件(五)组装查询控件

设计一下

做表单控件需要的基础元素,基本上准备好了,然后就可以进行组装了。在组装之前先看一下整体设计:

0020查询控件设计.png

基本上就是由这些内容组成,其中查询子控件由表单子控件组成,那么meta也就可以直接用表单子控件的,只是需要做一些调整,比如把开关的控件改成单选组的,单选组要加上“全选”的选项,或者清空的按钮。

当然还需要进行一些调整,现在脑力有限,无法一下子想太多,需要一步一步来实现。

查询控件的结构

由部分组成:快捷查询、全部查询、个性化查询等。


0021查询控件结构.png
  • 快捷查询
    存放常用的查询字段,这样方便用户快速选择。

  • 全部查询
    这个会放在“抽屉”里面,点击“更多”的时候才会显示,这样可以让客户去使用快捷之外的查询字段。当选择之后会自动进入快捷查询区域,这样可以方便用户连续使用。

  • 个性化查询
    同一个模块,不同的用户会有不同的查询需求,比如用户甲需要查询字段一、字段二,客户乙需要查询字段三、字段四,那么用户可以把各自常用的查询字段设置为个性化查询里面,避免“众口难调”、每次都需要点“更多”的麻烦。

  • 列数
    为了更好的利用屏幕宽度,所以这里设定好每个字段的宽度,然后自定排列,只要屏幕够宽,就可以拍更多列。

  • 宽展宽度
    对于文本框这类的,这样的宽度是够用了,但是对于范围查询、单选组等的查询,这样的宽度显然不够,那么应该可以设置拓宽宽度的功能。

话说,css要怎么弄,不太好看的样子。

能想到的都包含进来了。当然这个只是针对管理后台类项目的查询需求,不包含网站的查询,对于网站的查询需求,可以再做一个查询控件。

还有好多细节功能需要实现,现在效率也太低了。

代码

<template>
  <!--快捷查询-->
  <el-card class="box-card">
    <el-form
      inline
      label-position="right"
      :model="findItemModel"
      ref="formControl"
      class="demo-form-expand"
      label-width="1px"
      size="mini"
    >
      <el-form-item style="width:100px">
        <el-dropdown size="small">
          <el-button type="primary">
            快捷查询<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>方案一</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>
      <el-form-item
        v-for="(ctrId, index) in meta.baseMeta.quickFind"
        :key="'form_'+index"
        style="width:180px"
      >
        <!--判断要不要加载插槽-->
        <template v-if="getCtrMeta(ctrId).controlType === 1">
          <slot :name="ctrId">父组件没有设置插槽</slot>
        </template>
        <!--查询的子控件,采用动态组件的方式-->
        <template v-else>
          <component
            :is="ctlList[getCtrMeta(ctrId).controlType]"
            v-model="findItemModel[ctrId]"
            v-bind="getCtrMeta(ctrId)"
            @myChange="mySubmit">
          </component>
        </template>
      </el-form-item>
      <el-form-item style="width:60px">
        <el-button type="primary" round>更多</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--更多查询,放在抽屉里面-->
  <el-card class="box-card">
    <el-form
      inline
      label-position="right"
      :model="formModel"
      ref="formControl"
      class="demo-form-expand"
      label-suffix=":"
      label-width="100px"
      size="mini"
    >
      <el-form-item
        v-for="(ctrId, index) in meta.baseMeta.allFind"
        :key="'form_'+index"
        :label="getCtrMeta(ctrId).label"
        style="width:300px"
      >
        <!--判断要不要加载插槽-->
        <template v-if="getCtrMeta(ctrId).controlType === 1">
          <slot :name="ctrId">父组件没有设置插槽</slot>
        </template>
        <!--查询的子控件,采用动态组件的方式-->
        <template v-else>
          <component
            :is="ctlList[getCtrMeta(ctrId).controlType]"
            v-model="findItemModel[ctrId]"
            v-bind="getCtrMeta(ctrId)"
            @myChange="mySubmit">
          </component>
        </template>
      </el-form-item>
      <el-form-item style="width:60px">
        <el-button type="primary" round>查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
/**
 * @function div格式的表单控件
 * @description 可以依据json动态生成表单,可以多行多列、排序、插槽、验证等
 * @returns {*} Vue组件,表单控件
 */
export default {
  name: 'el-find-class',
  props: {
    modelValue: Object, // 查询条件集合
    meta: Object
  },
  setup (props, context) {
    // 控件字典
    const ctlList = findItemListKey
  
    // 依据ID获取组件的meta,因为model不支持【】嵌套
    const getCtrMeta = (id) => {
      return props.meta.itemMeta[id] || {}
    }

    // 获取 $ref
    const formControl = ref(null)
    onMounted(() => {
      // console.log('表单dom', formControl)
    })

    const resetForm = () => {
      // 清空表单
      formControl.value.resetFields()
    }

    const {
      findItemModel, // 查询子控件的model
      mySubmit // 查询子控件的事件
    } = findManage(props, context)

    return {
      ctlList, // 子控件字典
      resetForm, // 重置表单
      formControl, // 获取表单的dom
      getCtrMeta, // 返回子控件的meta
      findItemModel, // 查询子控件的model
      mySubmit
    }
  }
}

基于 element-plus的el-form实现的,因为UI库实现了很多功能,这里只是做了一个组装和完善的代码。
代码复杂了,也不知道要怎么说了。

源码

GitHub总是连接不上,所以搬到了gitee里面。
https://gitee.com/naturefw/nf-vue-element

作者:自然框架

原文链接:https://www.jianshu.com/p/273c62a366de

文章分类
后端
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐