基于 element-plus 封装一个依赖 json 动态渲染的查询控件

<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      {{kindName}}<i
        class=" el-icon--right"
        :class="{'el-icon-arrow-down': isUp, 'el-icon-arrow-up': !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>
</template>
复制代码

import { defineComponent, ref } from 'vue'
import { findKindList } from '/nf-control-web'
// 查询方式的 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.modelValue].name)
    const handleCommand = (command) => {
      kindName.value = findKindList[command].name
      context.emit('update:modelValue', command)
      context.emit('change', command)
    }
    return {
      isUp,
      kindName,
      findKindList,
      handleCommand
    }
  }
})
复制代码

<template>
  <!--查询方式-->
  <div style="float:left;width:65px;text-align:center;">
    <find-kind
      v-model="findChoiceKind"
      :findKind="findKind"
      @change="myChange"
    />
  </div>
  <!--查询内容-->
  <div :style="{width: (150 * colCount - 10 ) + 'px'}" style="float:left;">
    <div style="float:left;" :style="{width: (150 * colCount - 40 ) + 'px'}">
      <component
        :is="ctlList[controlType]"
        v-model="findText"
        v-bind="$attrs"
        :delay="delay"
        :colName="colName"
        @myChange="myChange">
      </component>
    </div>
  </div>
</template>
复制代码

import { defineComponent } from 'vue'
// 引入查询子控件的管理类
import { findItemManage } from '/nf-control-web'
// 查询方式的控件
import selectFindKind from './s-findkind.vue'
// 异步组件，引入表单子控件
import { formItemToFindItem } from '../nf-el-find-item/map-el-find-item.js'
/*
* 查询子控件，文本类
* * 单行文本
* * 多行文本
* * ulr、电话、邮箱等
*/
export default defineComponent({
  name: 'el-find-item-text',
  inheritAttrs: false,
  props: {
    controlId: Number, // 控件ID
    controlType: Number, // 控件类型
    colName: String, // 字段名称
    modelValue: [Array, String], // 查询结果，数组形式
    colCount: { // 占用空间
      type: Number,
      default: 1
    },
    findKind: { // 查询方式
      type: Array, // , 407, 408
      default: () => { return [403, 401, 402, 404, 405, 406] }
    },
    delay: { // 防抖
      type: Number,
      default: 600
    }
  },
  components: {
    'find-kind': selectFindKind
  },
  emits: ['update:modelValue', 'my-change'],
  setup (props, context) {
    // 表单子控件 to 查询子控件 的 字典
    const ctlList = formItemToFindItem
    const {
      findChoiceKind, // 选择的查询方式
      findText, // 一个关键字查询
      mySubmit
    } = findItemManage(props, context)
    // 设置默认查询方式
    findChoiceKind.value = props.findKind[0]
    // 提交查询结果
    const myChange = () => {
      // 一个关键字查询
      mySubmit(findText.value)
    }
    return {
      ctlList, // 控件字典，用于加载具体的控件
      findChoiceKind, // 查询方式
      findText, // 一个查询关键字
      myChange // 触发提交事件
    }
  }
})
复制代码

<template>
  <!--快捷查询-->
  <el-card class="box-card">
    <el-scrollbar>
      <div class="flex-content" style="min-width:400px;">
        <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
                    @click="quickClick(0)"
                  >
                    快捷查询
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-for="(item, key, index) in customer"
                    :key="'quick_' + index"
                    @click="quickClick(key)"
                  >
                    {{item.title}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
          <el-form-item
            v-for="(ctrId, index) in arrQuickFind"
            :key="'find_quick_'+index"
            style="border:1px solid #cfe1f3;min-height:33px;"
            :style="{width: ( 160 * getCtrMeta(ctrId).colCount + 80) + 'px'}"
          >
            <!--判断要不要加载插槽-->
            <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 @click="moreOpen">更多</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </el-card>
  <!--更多查询，放在抽屉里面-->
  <findmore
    :allFind="allFind"
    :reload="reload"
    :itemMeta="itemMeta"
    :findKind="findKind"
    :moreFind="moreFind"
    v-model:isShow="isShow"
  />
</template>
复制代码

/**
 * @function div 格式的查询控件
 * @description 可以依据 json 动态生成查询控件
 * @returns {*} Vue 组件，查询控件
 */
export default {
  name: 'el-find-div',
  components: {
    findmore
  },
  props: {
    ...findProps
  },
  setup (props, context) {
    // 控件字典
    const ctlList = findItemListKey
    // 依据ID获取组件的meta，因为 model 不支持[]嵌套
    const getCtrMeta = (id) => {
      return props.itemMeta[id] || {}
    }
    const {
      moreFind, // 接收更多查询 更多查询里面子控件的事件
      isShow, // 抽屉是否打开
      arrQuickFind, // 快捷栏的数组
      findItemModel, // 查询子控件的model
      moreOpen, // 点击更多，清空快捷
      quickClick, // 个性化方案的单击事件
      mySubmit // 查询子控件的事件
    } = findManage(props, context)
    return {
      isShow, // 抽屉是否打开
      moreFind, // 接收更多查询
      arrQuickFind, // 快捷栏的数组
      ctlList, // 子控件字典
      resetForm, // 重置表单
      formControl, // 获取表单的dom
      getCtrMeta, // 返回子控件的meta
      findItemModel, // 查询子控件的model
      moreOpen, // 点击更多，清空快捷
      quickClick, // 个性化方案的单击事件
      mySubmit
    }
  }
}
复制代码

<template>
  <!--演示查询控件-->
  <nf-find
    v-model="query"
    v-bind="formProps"
  />
  查询条件：{{query}}
  <!--数据列表 演示查询结果-->
  <findGrid :dataList="dataList"/>
  <!--可以分页-->
  <findPager/>
</template>
复制代码

import { reactive, watch } from 'vue'
// 组件
import findCom from '../control-web/nf-el-find/el-find-div.vue'
import findGrid from './find-grid.vue'
import findPager from './find-pager.vue'
// 加载json文件
import json from '/json/find-test.json'
// 数据列表的状态
import dataListControl from '../control/data-list'
export default {
  name: 'eleFindComponent',
  components: {
    findGrid,
    findPager,
    'nf-find': findCom
  },
  setup () {
    const query = reactive({})
    const findTest = json.findTest
    // 设置查询控件的属性
    const findProps = reactive({})
    // 添加重新绑定的开关
    findProps.reload = false
    // 模拟异步加载meta
    Object.assign(findProps, findTest.baseProps)
    findProps.itemMeta = findTest.itemMeta // 表单子控件的属性
    findProps.findKind = findTest.findKind // 查询方式
    return {
      query,
      dataList,
      // 渲染表单的meta
      findProps 
    }
  }
}
复制代码