kd-aiot-frontend-wt/lib/vue-form-making-v1/src/demo/Home.vue

<template>
  <fm-making-form ref="makingForm" clearable upload preview generate-code generate-json
    :custom-fields="customFields"
    :global-config="globalConfig"
    :field-config="fieldConfig"
    name="sample"
    cache
    :json-templates="jsonTemplates"
    :field-models="fieldModels"
    :z-index="300"
    style="height: 700px;"
  >
    <template #widgetconfig="{type, data, customProps}">
      <el-form-item v-if="type === 'button'" label="Loading">
        <el-switch v-model="customProps.loading"></el-switch>
      </el-form-item>

      <el-form-item v-if="type === 'custom' && data.el=== 'custom-width-height'" label="Tip">
        <el-input v-model="customProps.tip"></el-input>
      </el-form-item>
    </template>
  </fm-making-form>
</template>

<script>
import json0 from './json0.js'
import json1 from './json1.js'
import json2 from './json2.js'
import json3 from './json3.js'
import json4 from './json4.js'
import json5 from './json5.js'
import json6 from './json6.js'
import json7 from './json7.js'
import json8 from './json8.js'
import json9 from './json9.js'
import json10 from './json10.js'
import json11 from './json11.js'

export default {
  data() {
    return {
      customFields: [
        {
          name: '自定义组件',
          el: 'custom-width-height',
          options: {
            defaultValue: {},
            labelWidth: 0,
            isLabelWidth: false,
            hidden: false,
            disabled: false,
            dataBind: true,
            required: false,
            pattern: '',
            validator: '',
            extendProps: {},
            customProps: {}
          },
          events: {
            onChange: '',
            'on-test': '',
          }
        },{
          name: '图表示例',
          el: 'custom-chart',
          options: {
            defaultValue: [
              { year: '1951 年', sales: 38 },
              { year: '1952 年', sales: 52 },
              { year: '1956 年', sales: 61 },
              { year: '1957 年', sales: 145 },
              { year: '1958 年', sales: 48 },
              { year: '1959 年', sales: 38 },
              { year: '1960 年', sales: 38 },
              { year: '1962 年', sales: 38 },
            ],
            customClass: '',
            labelWidth: 100,
            isLabelWidth: false,
            hidden: false,
            dataBind: true,
            required: false,
            pattern: '',
          }
        },
        {
          name: 'vant时间选择',
          el: 'custom-vant-field',
          options: {
            defaultValue: '',
            customClass: '',
            labelWidth: 100,
            isLabelWidth: false,
            hidden: false,
            dataBind: true,
            required: false,
            pattern: '',
          }
        }
      ],
      globalConfig: {
        // styleSheets: '.a .el-form-item__label{color: red;}',
        dataSource: [
          {
            key: 'upload',
            name: 'Get Upload Token',
            url: 'https://tools-server.making.link/api/uptoken',
            method: "GET",
            auto: true,
            responseFunc: 'return res.uptoken;',
          },
          {
            key: 'getoptions',
            name: 'Get Options',
            url: 'https://tools-server.making.link/api/new/options',
            method: 'GET',
            auto: true,
            responseFunc: 'return res.data;',
          }
        ]
      },
      fieldConfig: [
        {
          type: 'fileupload',
          options: {
            domain: 'https://tcdn.form.making.link/',
            action: 'https://tools-server.making.link/api/transfer',
          }
        },
        {
          type: 'imgupload',
          options: {
            domain: 'https://tcdn.form.making.link/',
            action: 'https://tools-server.making.link/api/transfer',
          }
        },
        {
          type: 'select',
          options: {
            options: [
              {value: '1111'},
              {value: '2222'},
              {value: '3333'}
            ]
          }
        }
      ],
      jsonTemplates: [
        {
          title: '空白表单',
          enTitle: 'Empty form',
          json: json0,
          url: 'images/json00.png'
        },
        {
          title: '典型表单',
          enTitle: 'Typical form',
          json: json1,
          url: 'images/json1.png'
        },
        {
          title: '快速注册表单',
          enTitle: 'Quick Sign-up Form',
          json: json2,
          url: 'images/json2.png'
        },
        {
          title: '复杂表格 - 人员履历表',
          enTitle: 'Complex forms',
          json: json3,
          url: 'images/json3.png'
        },
        {
          title: '步骤表单',
          enTitle: 'Step form',
          json: json4,
          url: 'images/json4.png'
        },
        {
          title: '数据源应用 - 主子表省市区联动',
          enTitle: 'Data source application',
          json: json5,
          url: 'images/json5.png'
        },
        {
          title: '动态值 - 数据统计',
          enTitle: 'Event application',
          json: json6,
          url: 'images/json6.png'
        },
        {
          title: '响应式表单',
          enTitle: 'Reactive form',
          json: json7,
          url: 'images/json7.png'
        },
        {
          title: '复杂表格 - 动态增减表单项',
          enTitle: 'Complex forms',
          json: json8,
          url: 'images/json8.png'
        },
        {
          title: '可查询的分页数据列表',
          enTitle: 'Searchable paging data list',
          json: json9,
          url: 'images/json9.png'
        },
        {
          title: '中后台数据增删改查',
          enTitle: 'CRUD',
          json: json10,
          url: 'images/json10.png'
        },
        {
          title: '用户弹框选择',
          enTitle: 'The user select from the box',
          json: json11,
          url: 'images/json11.png'
        }
      ],
      fieldModels: [{fieldId: 'ID'}]
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>