cd_form_editor_web/examples/views/demo/index.vue

<template>
  <div>
    <k-form-build :value="jsonData" ref="KFB" @submit="handleSubmit" />

    <button @click="hide">隐藏</button>
    <button @click="show">显示</button>
    <button @click="disable">禁用</button>
    <button @click="enable">启用</button>

    <button @click="getData">提交</button>
  </div>
</template>
<script>
export default {
  name: "Demo",
  data() {
    return {
      jsonData: {
        list: [
          {
            type: "button",
            label: "按钮",
            options: {
              type: "primary",
              handle: "submit",
              dynamicFun: "",
              hidden: true,
              disabled: false
            },
            key: "button_1619948868332"
          },
          {
            type: "slider",
            label: "滑动输入条",
            icon: "icon-menu",
            options: {
              width: "100%",
              defaultValue: 0,
              disabled: false,
              hidden: false,
              min: 0,
              max: 100,
              step: 1,
              showInput: false
            },
            model: "slider_1619948887083",
            key: "slider_1619948887083",
            help: "",
            rules: [{ required: false, message: "必填项" }]
          },
          {
            type: "rate",
            label: "评分",
            icon: "icon-pingfen_moren",
            options: {
              defaultValue: 0,
              max: 5,
              disabled: false,
              hidden: false,
              allowHalf: false
            },
            model: "rate_1619948887483",
            key: "rate_1619948887483",
            help: "",
            rules: [{ required: false, message: "必填项" }]
          },
          {
            type: "uploadImg",
            label: "上传图片",
            icon: "icon-image",
            options: {
              defaultValue: "[]",
              multiple: false,
              hidden: false,
              disabled: false,
              width: "100%",
              data: "{}",
              limit: 3,
              placeholder: "上传",
              fileName: "image",
              headers: {},
              action: "http://cdn.kcz66.com/upload-img.txt",
              listType: "picture-card"
            },
            model: "uploadImg_1619948887819",
            key: "uploadImg_1619948887819",
            help: "",
            rules: [{ required: false, message: "必填项" }]
          },
          {
            type: "card",
            label: "卡片布局",
            list: [
              {
                type: "date",
                label: "日期选择框",
                icon: "icon-calendar",
                options: {
                  width: "100%",
                  defaultValue: "",
                  rangeDefaultValue: [],
                  range: false,
                  showTime: false,
                  disabled: false,
                  hidden: false,
                  clearable: false,
                  placeholder: "请选择",
                  rangePlaceholder: ["开始时间", "结束时间"],
                  format: "YYYY-MM-DD"
                },
                model: "date_1619948975172",
                key: "date_1619948975172",
                help: "",
                rules: [{ required: false, message: "必填项" }]
              },
              {
                type: "input",
                label: "输入框",
                icon: "icon-write",
                options: {
                  type: "text",
                  width: "100%",
                  defaultValue: "",
                  placeholder: "请输入",
                  clearable: false,
                  maxLength: null,
                  hidden: false,
                  disabled: false
                },
                model: "input_1619948973892",
                key: "input_1619948973892",
                help: "",
                prefix: "",
                suffix: "",
                rules: [{ required: false, message: "必填项" }]
              },
              {
                type: "textarea",
                label: "文本框",
                icon: "icon-edit",
                options: {
                  width: "100%",
                  minRows: 4,
                  maxRows: 6,
                  maxLength: null,
                  defaultValue: "",
                  clearable: false,
                  hidden: false,
                  disabled: false,
                  placeholder: "请输入"
                },
                model: "textarea_1619948974269",
                key: "textarea_1619948974269",
                help: "",
                rules: [{ required: false, message: "必填项" }]
              }
            ],
            key: "card_1619948983395"
          },
          {
            type: "table",
            label: "表格布局",
            trs: [
              {
                tds: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: "slider",
                        label: "滑动输入条",
                        icon: "icon-menu",
                        options: {
                          width: "100%",
                          defaultValue: 0,
                          disabled: false,
                          hidden: false,
                          min: 0,
                          max: 100,
                          step: 1,
                          showInput: false
                        },
                        model: "slider_1619948976300",
                        key: "slider_1619948976300",
                        help: "",
                        rules: [{ required: false, message: "必填项" }]
                      }
                    ]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: "uploadImg",
                        label: "上传图片",
                        icon: "icon-image",
                        options: {
                          defaultValue: "[]",
                          multiple: false,
                          hidden: false,
                          disabled: false,
                          width: "100%",
                          data: "{}",
                          limit: 3,
                          placeholder: "上传",
                          fileName: "image",
                          headers: {},
                          action: "http://cdn.kcz66.com/upload-img.txt",
                          listType: "picture-card"
                        },
                        model: "uploadImg_1619948977239",
                        key: "uploadImg_1619948977239",
                        help: "",
                        rules: [{ required: false, message: "必填项" }]
                      },
                      {
                        type: "time",
                        label: "时间选择框",
                        icon: "icon-time",
                        options: {
                          width: "100%",
                          defaultValue: "",
                          disabled: false,
                          hidden: false,
                          clearable: false,
                          placeholder: "请选择",
                          format: "HH:mm:ss"
                        },
                        model: "time_1619948975820",
                        key: "time_1619948975820",
                        help: "",
                        rules: [{ required: false, message: "必填项" }]
                      }
                    ]
                  }
                ]
              },
              {
                tds: [
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: "radio",
                        label: "单选框",
                        icon: "icon-danxuan-cuxiantiao",
                        options: {
                          disabled: false,
                          hidden: false,
                          defaultValue: "",
                          dynamicKey: "",
                          dynamic: false,
                          options: [
                            { value: "1", label: "选项1" },
                            { value: "2", label: "选项2" },
                            { value: "3", label: "选项3" }
                          ]
                        },
                        model: "radio_1619948974588",
                        key: "radio_1619948974588",
                        help: "",
                        rules: [{ required: false, message: "必填项" }]
                      }
                    ]
                  },
                  {
                    colspan: 1,
                    rowspan: 1,
                    list: [
                      {
                        type: "date",
                        label: "日期选择框",
                        icon: "icon-calendar",
                        options: {
                          width: "100%",
                          defaultValue: "",
                          rangeDefaultValue: [],
                          range: false,
                          showTime: false,
                          disabled: false,
                          hidden: false,
                          clearable: false,
                          placeholder: "请选择",
                          rangePlaceholder: ["开始时间", "结束时间"],
                          format: "YYYY-MM-DD"
                        },
                        model: "date_1619948975548",
                        key: "date_1619948975548",
                        help: "",
                        rules: [{ required: false, message: "必填项" }]
                      }
                    ]
                  }
                ]
              }
            ],
            options: {
              width: "100%",
              bordered: true,
              bright: false,
              small: true,
              customStyle: ""
            },
            key: "table_1619948992003"
          },
          {
            type: "uploadFile",
            label: "上传文件",
            icon: "icon-upload",
            options: {
              defaultValue: "[]",
              multiple: false,
              disabled: false,
              hidden: false,
              drag: false,
              downloadWay: "a",
              dynamicFun: "",
              width: "100%",
              limit: 3,
              data: "{}",
              fileName: "file",
              headers: {},
              action: "http://cdn.kcz66.com/uploadFile.txt",
              placeholder: "上传"
            },
            model: "uploadFile_1619948976948",
            key: "uploadFile_1619948976948",
            help: "",
            rules: [{ required: false, message: "必填项" }]
          },
          {
            type: "cascader",
            label: "级联选择器",
            icon: "icon-guanlian",
            options: {
              disabled: false,
              hidden: false,
              showSearch: false,
              placeholder: "请选择",
              clearable: false,
              dynamicKey: "",
              dynamic: true,
              options: [
                {
                  value: "1",
                  label: "选项1",
                  children: [{ value: "11", label: "选项11" }]
                },
                {
                  value: "2",
                  label: "选项2",
                  children: [{ value: "22", label: "选项22" }]
                }
              ]
            },
            model: "cascader_1619948977724",
            key: "cascader_1619948977724",
            help: "",
            rules: [{ required: false, message: "必填项" }]
          },
          {
            type: "treeSelect",
            label: "树选择器",
            icon: "icon-tree",
            options: {
              disabled: false,
              multiple: false,
              hidden: false,
              clearable: false,
              showSearch: false,
              treeCheckable: false,
              placeholder: "请选择",
              dynamicKey: "",
              dynamic: true,
              options: [
                {
                  value: "1",
                  label: "选项1",
                  children: [{ value: "11", label: "选项11" }]
                },
                {
                  value: "2",
                  label: "选项2",
                  children: [{ value: "22", label: "选项22" }]
                }
              ]
            },
            model: "treeSelect_1619948978156",
            key: "treeSelect_1619948978156",
            help: "",
            prefix: "",
            suffix: "",
            rules: [{ required: false, message: "必填项" }]
          }
        ],
        config: {
          layout: "horizontal",
          labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
          wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
          hideRequiredMark: false,
          customStyle: ""
        }
      }
    };
  },
  methods: {
    handleSubmit(p) {
      // 通过表单提交按钮触发，获取promise对象
      p()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res));
        })
        .catch(err => {
          console.log(err, "校验失败");
        });
    },
    show() {
      this.$refs.KFB.show(["date_1619948975172"]);
    },
    hide() {
      this.$refs.KFB.hide(["date_1619948975172"]);
    },
    disable() {
      this.$refs.KFB.disable(["date_1619948975172"]);
    },
    enable() {
      this.$refs.KFB.enable(["date_1619948975172"]);
    },
    getData() {
      // 通过函数获取数据
      this.$refs.KFB.getData()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res));
        })
        .catch(err => {
          console.log(err, "校验失败");
        });
    }
  }
};
</script>