serpcommon-components
组件库内容
上传组件
-支持定义上传url
-附加参数
-支持断点续传和分片上传
-支持批量上传
-可定义上传类型及数量
自定义表单组件
-通过配置获取表单内容
formJson: {
inline: false, // 是否inline展示
labelPosition: "right", // 标题位置(左,右,居中)
labelWidth: "", // 标题宽度 (可在单行上定义)
statusIcon: true,
formItemList: [ // 表单配置项
{
type: "slot",
slotName: "upload",
label: "上传", // 中文名或标题
prop: "upload", // 字段名
value: "baidu.com" // 值
}, {
type: "select",
label: "下拉框1", // 中文名或标题
prop: "select1", // 字段名
value: [], // 值
clearable: true, // 可清空 true / false
disabled: false, // 置灰 true / false
readonly: false, // 只读 true / false
search: true, // 搜索
multiple: true, // 多选
limit: 2, // 多选限制
colaTags: true, // 是否折叠
placeholder: "请选择下拉框1", // 暗文
rules: [{ required: true, message: "不能为空", trigger: "change" }],
requestBody: { // 发请求获取下拉数据(示例)
request: "post", // 触发请求 post / get
url: "/api/getSelectOptions",
param: {
a: 1,
b: 2
}
},
options: [], // 下拉数据
defaultKey: { // 通过这个统一数据格式
label: 'name',
value: 'code'
},
extraName: 'selectName' // 额外需要传给后台的字段
}, {
type: "input",
label: "输入框1", // 中文名或标题
prop: "test1", // 字段名
value: "", // 值
subType: "text", // 输入框类型
clearable: true, // 可清空 true / false
disabled: false, // 置灰 true / false
readonly: false, // 只读 true / false
placeholder: "请输入内容1", // 暗文
maxlength: 20, // 最大长度 number
size: "", // 尺寸 medium / small / mini / ''
prefix: "", // 内嵌式前文字
suffix: "", // 内嵌式后文字
prefixIcon: "el-icon-search", // 前图标
suffixIcon: "", // 后图标
prepend: "", // 前扩展
append: "", // 后扩展
rules: [ // 校验
{
validator: (rule, value, callback) => {
setTimeout(() => {
if (value && value.length) {
if (value.length > 10) {
callback(new Error("最多10个字符"));
} else {
callback();
}
} else {
callback(new Error("不能为空"));
}
}, 100);
},
trigger: "blur"
}
]
}, {
type: "date",
label: "日期", // 中文名或标题
prop: "date", // 字段名
value: "", // 值
subType: "", // 输入框类型
clearable: true, // 可清空 true / false
disabled: false, // 置灰 true / false
readonly: false, // 只读 true / false
placeholder: "", // 暗文
valueFormat: "yyyy-MM-DD", // 返回数据格式
pickerOptions: [], // 可选时间
rules: [{ required: true, message: "不能为空", trigger: "change" }]
}, {
type: "daterange",
label: "日期时间", // 中文名或标题
prop: "daterange", // 字段名
value: "", // 值
subType: "", // 输入框类型
clearable: true, // 可清空 true / false
disabled: false, // 置灰 true / false
readonly: false, // 只读 true / false
valueFormat: "yyyy-MM-DD", // 返回数据格式
pickerOptions: [], // 可选时间
placeholder: "", // 暗文
rules: [{ required: true, message: "不能为空", trigger: "change" }]
}, {
type: "timerange",
label: "时间段", // 中文名或标题
prop: "timerange", // 字段名
value: "", // 值
subType: "", // 输入框类型
clearable: true, // 可清空 true / false
disabled: false, // 置灰 true / false
readonly: false, // 只读 true / false
valueFormat: "HH:mm:ss", // 返回数据格式
pickerOptions: [], // 可选时间
placeholder: "", // 暗文
rules: [{ required: true, message: "不能为空", trigger: "change" }]
}, {
type: "checkbox",
label: "多选", // 中文名或标题
prop: "checkbox", // 字段名
value: [], // 值
// limit: 1, // 多选限制
disabled: false, // 置灰 true / false
requestBody: {
request: "post", // 触发请求 post / get ...
url: "/api/getCheckBoxOptions",
param: {
a: 1,
b: 2
}
},
options: [], // 数据
defaultKey: { // 通过这个统一数据格式
label: 'name',
value: 'code'
},
rules: [{ required: true, message: "不能为空", trigger: "change" }]
}, {
type: "radio",
label: "单选", // 中文名或标题
prop: "radio", // 字段名
value: "", // 值
disabled: false, // 置灰 true / false
requestBody: {
request: "post", // 触发请求 post / get ...
url: "/api/getRadioOptions",
param: {
a: 1,
b: 2
}
},
options: [], // 数据
defaultKey: { // 通过这个统一数据格式
label: 'name',
value: 'code'
},
rules: [{ required: true, message: "不能为空", trigger: "change" }]
}
]
}在项目中引用
"devDependencies": {
"com-serp-common-components": "git+https://code.mlamp.cn/serp/common-components.git"
}