snowy-designer
Version:
基于Epic-Designer-Pro版本的设计器,可视化开发页面表单
273 lines (272 loc) • 7.16 kB
JavaScript
const l = {
bindModel: "modelValue",
component: () => import("./datePicker.js"),
config: {
attribute: [
{
field: "field",
label: "字段名",
type: "EpField"
},
{
componentProps: {
placeholder: "请输入"
},
field: "label",
label: "标题",
type: "input"
},
{
field: "componentProps.defaultValue",
label: "默认值",
type: "date"
},
{
changeSync: !0,
componentProps: {
options: [
{
label: "日期",
value: "date"
},
{
label: "周",
value: "week"
},
{
label: "月份",
value: "month"
},
{
label: "季度",
value: "quarter"
},
{
label: "年份",
value: "year"
},
{
label: "日期范围",
value: "daterange"
},
{
label: "周范围",
value: "weekrange"
},
{
label: "月份范围",
value: "monthrange"
},
{
label: "季度范围",
value: "quarterrange"
},
{
label: "年份范围",
value: "yearrange"
}
]
},
field: "componentProps.type",
label: "日期类型",
onChange({ value: o, values: e }) {
e.componentProps.defaultValue = null, e.componentProps.placeholder = [
"daterange",
"monthrange",
"quarterrange",
"weekrange",
"yearrange"
].includes(o) ? ["请输入", "请输入"] : "请输入", ["date", "daterange"].includes(o) ? (e.componentProps.format = "YYYY-MM-DD", e.componentProps.valueFormat = "YYYY-MM-DD") : ["week", "weekrange"].includes(o) ? (e.componentProps.format = "ww [周]", e.componentProps.valueFormat = "YYYY-MM-DD") : ["month", "monthrange"].includes(o) ? (e.componentProps.format = "YYYY-MM", e.componentProps.valueFormat = "YYYY-MM") : ["quarter", "quarterrange"].includes(o) ? (e.componentProps.format = "YYYY-Q季度", e.componentProps.valueFormat = "YYYY-Q季度") : ['"yearrange"', "year"].includes(o) && (e.componentProps.format = "YYYY", e.componentProps.valueFormat = "YYYY");
},
type: "select"
},
{
field: "componentProps.showTime",
label: "时间选择",
onChange: ({ value: o, values: e }) => {
o ? (e.componentProps.valueFormat = "YYYY-MM-DD HH:mm:ss", e.componentProps.format = "YYYY-MM-DD HH:mm:ss") : (e.componentProps.valueFormat = "YYYY-MM-DD", e.componentProps.format = "YYYY-MM-DD");
},
show({ values: o }) {
return ["date", "daterange"].includes(o.componentProps.type);
},
type: "switch"
},
{
componentProps: {
placeholder: "请输入"
},
field: "componentProps.placeholder",
label: "占位内容",
show: ({ values: o }) => ![
"daterange",
"monthrange",
"quarterrange",
"weekrange",
"yearrange"
].includes(o.componentProps.type),
type: "input"
},
{
componentProps: {
placeholder: "请输入"
},
field: "componentProps.placeholder.0",
label: "开始占位符",
show: ({ values: o }) => [
"daterange",
"monthrange",
"quarterrange",
"weekrange",
"yearrange"
].includes(o.componentProps.type),
type: "input"
},
{
componentProps: {
placeholder: "请输入"
},
field: "componentProps.placeholder.1",
label: "结束占位符",
show: ({ values: o }) => [
"daterange",
"monthrange",
"quarterrange",
"weekrange",
"yearrange"
].includes(o.componentProps.type),
type: "input"
},
{
componentProps: {
placeholder: "请输入"
},
field: "componentProps.format",
label: "显示格式",
type: "input"
},
{
componentProps: {
placeholder: "请输入"
},
field: "componentProps.valueFormat",
label: "数据格式",
type: "input"
},
{
componentProps: {
allowClear: !0,
options: [
{
label: "大号",
value: "large"
},
{
label: "中等",
value: "middle"
},
{
label: "小型",
value: "small"
}
],
placeholder: "请选择"
},
field: "componentProps.size",
label: "尺寸",
type: "select"
},
{
componentProps: {
allowClear: !0,
options: [
{
label: "左下角",
value: "bottomLeft"
},
{
label: "右下角",
value: "bottomRight"
},
{
label: "左上角",
value: "topLeft"
},
{
label: "右上角",
value: "topRight"
}
],
placeholder: "请选择"
},
field: "componentProps.placement",
label: "弹出框位置",
type: "select"
},
{
componentProps: {
options: [
{
label: "禁用",
value: "disabled"
},
{
label: "可清空",
value: "allowClear"
},
{
label: "禁止键盘输入",
value: "inputReadOnly"
},
{
label: "隐藏",
value: "hidden"
},
{
label: "无边框",
reverse: !0,
value: "bordered"
}
]
},
label: "操作属性",
layout: "vertical",
type: "EOperationConfigurator"
},
{
description: "校验规则需要配合表单使用",
field: "rules",
label: "表单校验",
layout: "vertical",
type: "ERuleEditor"
}
],
event: [
{
description: "值变化时",
type: "change"
},
{
description: "点击确定按钮时",
type: "ok"
}
]
},
defaultSchema: {
componentProps: {
format: "YYYY-MM-DD",
placeholder: "请选择",
type: "date",
valueFormat: "YYYY-MM-DD"
},
field: "date",
input: !0,
label: "日期选择器",
type: "date"
},
groupName: "表单",
icon: "icon--epic--calendar-month-outline-rounded",
sort: 910
};
export {
l as default
};