epic-designer/dist/ui/naiveUi/date-picker/index.js

基于vue3的设计器,可视化开发页面表单

const t = {
  bindModel: "formatted-value",
  component: async () => (await import("naive-ui")).NDatePicker,
  config: {
    attribute: [
      {
        field: "field",
        label: "字段名",
        type: "input"
      },
      {
        field: "label",
        label: "标题",
        type: "input"
      },
      {
        field: "componentProps.defaultValue",
        label: "默认值",
        type: "date"
      },
      {
        componentProps: {
          clearable: !0,
          options: [
            {
              label: "大号",
              value: "large"
            },
            {
              label: "中等",
              value: "medium"
            },
            {
              label: "小型",
              value: "small"
            }
          ],
          placeholder: "请选择"
        },
        field: "componentProps.size",
        label: "尺寸",
        type: "select"
      },
      {
        field: "componentProps.placeholder",
        label: "占位内容",
        type: "input"
      },
      {
        componentProps: {
          options: [
            {
              label: "日期",
              value: "date"
            },
            {
              label: "日期时间",
              value: "datetime"
            },
            {
              label: "日期范围",
              value: "daterange"
            },
            {
              label: "时间范围",
              value: "datetimerange"
            },
            {
              label: "月份",
              value: "month"
            },
            {
              label: "月份范围",
              value: "monthrange"
            },
            {
              label: "年份",
              value: "year"
            },
            {
              label: "季度",
              value: "quarter"
            },
            {
              label: "周",
              value: "week"
            }
          ]
        },
        field: "componentProps.type",
        label: "日期类型",
        onChange({ value: o, values: e }) {
          e.componentProps.defaultValue = null, ["date", "daterange", "dates"].includes(o) ? (e.componentProps.format = "yyyy-MM-dd", e.componentProps.valueFormat = "yyyy-MM-dd") : ["week"].includes(o) || ["quarter"].includes(o) ? (e.componentProps.format = null, e.componentProps.valueFormat = "yyyy-MM-dd") : ["month", "monthrange"].includes(o) ? (e.componentProps.format = "yyyy-MM", e.componentProps.valueFormat = "yyyy-MM") : ["datetime", "datetimerange"].includes(o) ? (e.componentProps.format = "yyyy-MM-dd HH:mm:ss", e.componentProps.valueFormat = "yyyy-MM-dd HH:mm:ss") : ["year"].includes(o) && (e.componentProps.format = "yyyy", e.componentProps.valueFormat = "yyyy");
        },
        type: "select"
      },
      {
        field: "componentProps.format",
        label: "显示格式",
        type: "input"
      },
      {
        field: "componentProps.valueFormat",
        label: "数据格式",
        type: "input"
      },
      {
        componentProps: {
          clearable: !0,
          placeholder: "请输入"
        },
        field: "componentProps.separator",
        label: "分割符",
        show: ({ values: o }) => ["daterange", "datetimerange", "monthrange"].includes(
          o.componentProps.type
        ),
        type: "input"
      },
      {
        componentProps: {
          clearable: !0,
          placeholder: "请输入"
        },
        field: "componentProps.startPlaceholder",
        label: "start框占位符",
        show: ({ values: o }) => ["daterange", "datetimerange", "monthrange"].includes(
          o.componentProps.type
        ),
        type: "input"
      },
      {
        componentProps: {
          clearable: !0,
          placeholder: "请输入"
        },
        field: "componentProps.endPlaceholder",
        label: "end框占位符",
        show: ({ values: o }) => ["daterange", "datetimerange", "monthrange"].includes(
          o.componentProps.type
        ),
        type: "input"
      },
      {
        field: "componentProps.clearable",
        label: "可清空",
        type: "switch"
      },
      {
        field: "componentProps.disabled",
        label: "禁用",
        type: "switch"
      },
      {
        field: "componentProps.hidden",
        label: "隐藏",
        type: "switch"
      },
      {
        description: "校验规则需要配合表单使用",
        field: "rules",
        label: "表单校验",
        layout: "vertical",
        type: "ERuleEditor"
      }
    ],
    event: [
      {
        description: "值变化时",
        type: "change"
      }
    ]
  },
  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 {
  t as default
};