wsd-query-section v1.0.1

wsd-query

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

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

查询方案控件配置说明

input

JSON配置：

{
  "ctype": "wsd-input", // component type
  "type": "text",       // 输入框的类型text、password/number……
  "label": "文本",      // 表单项的标签文本
  "name": "inputName",  
  "placeholder": "5555", 
  "value":"默认值",     // 默认值
  "validations": {     // 校验规则
    required: true,
    message: "请输入",
    trigger: "blur",
    },
}

select

JSON配置：

        {
          ctype: "wsd-select",
          type: "select",
          label: "文本",
          name: "selectName",
          placeholder: "请选择!",
          value: "",
          validations: 
            {
              required: true,
              message: "选择",
              trigger: "blur",
            },

          options: [            // 下拉框的选项
            {
              label: "asdf",
              value: "sdfs",
            },
            {
              label: "aa",
              value: "aa",
            },
            {
              label: "cc",
              value: "cc",
            },
          ],
          multiple: false,            // 是否可以多选
          source: "http://asdfadsf", // 要请求下拉框内容的接口（暂未实现）
          selectFirst: false,       // 是否默认选中第一个
        },

datepicker

JSON配置：

         {
            ctype: "wsd-datepicker",// component type
            type: "date",           // datepicker类型 date/month/day/daterange....
            label: "",              // 表单项的标签文本
            name: "date",           // 和上面的prop一致
            placeholder: "请选择日期!",
            validations: [          // 校验规则
              {
                required: true,
                message: "请选择日期",
                trigger: "change",
              },
            ],
          },

弹框

JSON配置：

       {
            ctype: "wsd-common-table-select",// component type
            label: "",                      // 表单项的标签文本
            name: "zip2",                   // 和上面的prop一致
            placeholder: "请输入文本",
            validations: [                 // 校验规则
              {
                required: true,
                message: "请选择",
                trigger: "blur",
              },
            ],
            // -- 以下是弹框配置--
            configData: {
              title: "调用方法",                     // 弹框的标题
              request: {
                url: "/api/system/pc/callback/v1/loadAllMethod",
                method: "post",
                data: {
                  packageName: "com.wisdom.business.system.service.callback",
                  serviceName: "CallBackServiceImpl",
                  queryList: {},                   // 查询条件字段
                },
              },                                  // 获取弹框表格的接口
              cols: [{ title: "方法", field: "methodName", width: "600px" }], // 弹框的表格
              textFrom: "methodName", // 取出的字段名
              showPager: true, // 弹框表格是否显示分页
              pageSize: 10, // 弹框表格每页多少条
              currentPage: 1, // 弹框表格当前页
              showSearch: true, // 弹框是否显示搜索
              // 搜索框内容
              searchList: [
                {
                  ctype: "wsd-input", // component type
                  type: "text",
                  label: "方法",
                  name: "search",
                  placeholder: "请输入文本",
                  value: "",
                  validations: [],
                },
                {
                  ctype: "wsd-input", // component type
                  type: "text",
                  label: "条件",
                  name: "search2",
                  placeholder: "请输入文本",
                  value: "",
                  validations: [],
                },
              ],
            },
          },

参考项目

https://gitee.com/baidu/amis/tree/master/ http://form.making.link/#/zh-CN/