quick-query-form v1.0.1

curisegong

快速构建查询表单

dateType: text:文本类型 用于后台SQL参数变量类型，如USERID='U101111' 注意有单引号 number:数字类型 同理 如 USERID=12312 注意无单引号 date:日期类型 CREATE_DATE>=TO_DATE('2021-07-31','YYYY-MM-DD')

operator： gte:大于等于 gt:大于 lte:小于等于 lt:小于 in：包括 eq:等于 isnu:为空 isnnu:不为空 like:模糊匹配

表单支持类型 type: m-select 多选下拉框 select 单选下拉框 checkbox 复选框 date 日历框，只能选择年月日 month 月份选择框 number 数字框 textarea 多行输入框 text 单行输入框

注意，后台根据前台传入的参数进行SQL组装还在整理中，后续将会增加NetCore和Java后台的SQL操作工具

该组件是基于element-UI设计的，所以在使用改组件时，请确认你的系统框架是基于element-ui的，否则请单独安装element-ui依赖

Build Setup

# install dependencies
npm install quick-query-form

# main.js配置 将组件注册挂在到Vue
import  quickQueryForm from 'quick-query-form';
Vue.use(quickQueryForm);

# 页面引用

#定义表单查询条件
 Conditions = [
  {    id: "logtime[gte]",    name: "大于等于",    type: "date",    dateType: "date",  },
  {    id: "logtime[lt]",    name: "小于",    type: "date",    dateType: "date",  },

  {    id: "condition1",    name: "缺失等于",    type: "text",  },
  
  { id: "condition2[like]", name: "条件2", type: "text" },

  {id: "condition3", name: "单选择下拉框", type: "select", allowEmpty: true, options: [ { id: "1", name: "有" }, { id: "0", name: "无" }, ],},
  { id: "condition12",  name: "多选择下拉框",  type: "m-select",  allowEmpty: true,  options: [
      { id: "1", name: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试" },
      { id: "0", name: "无" },
    ],
  },

  { id: "condition5[like]", name: "模糊条件", type: "text" },

  { id: "condition6[eq]", name: "等于", type: "text" },
  { id: "condition7[gt]",  name: "大于",  type: "number", dateType: "number",  },
  { id: "condition8[lt]",  name: "小于", type: "number",  dateType: "number", },
  {  id: "condition14[like]", name: "多输入框模糊",  type: "textarea",  dateType: "textarea", },
];
#插入到页面指定位置
   <quick-query-form
      ref="quickqueryform"
      :inputCondition="formConditions"
      @queryConditionCallback="queryConditionCallback"
    ></quick-query-form>
    #查询条件回调
     queryConditionCallback(data) {
      alert(JSON.stringify(data));
    },

For detailed explanation on how things work, consult the docs for vue-loader.