BoundLink-Plate-UI/src/views/system/login2/login copy 3.vue

<template>
  <div>
    <div v-if="sfb">{{ sfb.formData }}</div>

    <div class="form" v-if="true">
      <StFormBuild :value="jsonData" :defaultValue="defaultValue" @change="handleChange" ref="sfb" />

      <a-button type="primary" @click="submitHandler">提交</a-button>
      <a-button type="primary" @click="resetHandler">重置</a-button>
    </div>
  </div>
</template>
<script setup>
  import { nextTick, onMounted, reactive, ref } from 'vue';
  import { message } from 'ant-design-vue';

  const mformData = reactive({
    a: 123,
  });

  const mFormDataRef = ref(null);

  const jsonData = reactive({
    list: [
      {
        type: 'text',
        label: '测试文字',
        options: {
          textAlign: 'center',
          hidden: false,
          showRequiredMark: false,
          color: 'rgb(0, 0, 0)',
          fontFamily: 'SimHei',
          fontSize: '16pt',
        },
        key: 'text_1725676492575',
        id: '8286e076-6cc1-11ef-bf24-f37feb2dd0ee',
        model: 'text_1725676492575',
        event: {
          change: 'c2e06af0-6cc1-11ef-bf24-f37feb2dd0ee',
          click: 'c2e06af1-6cc1-11ef-bf24-f37feb2dd0ee',
          focus: 'c2e06af2-6cc1-11ef-bf24-f37feb2dd0ee',
          blur: 'c2e06af3-6cc1-11ef-bf24-f37feb2dd0ee',
        },
      },
      {
        type: 'editor',
        label: '富文本',
        list: [],
        options: {
          height: 300,
          placeholder: '请输入',
          defaultValue: '',
          chinesization: true,
          hidden: false,
          disabled: false,
          showLabel: false,
          width: '100%',
        },
        model: 'editor_test',
        key: 'editor_1725691707335',
        help: '',
        rules: [
          {
            required: true,
            message: '必填项',
          },
        ],
        id: 'ade2cd12-6ce4-11ef-8324-d111cd53d89b',
        event: {
          change: '2f948d70-6ce5-11ef-8324-d111cd53d89b',
          click: '2f948d71-6ce5-11ef-8324-d111cd53d89b',
          focus: '2f948d72-6ce5-11ef-8324-d111cd53d89b',
          blur: '2f948d73-6ce5-11ef-8324-d111cd53d89b',
        },
      },
      {
        type: 'grid',
        label: '栅格布局',
        columns: [
          {
            span: 8,
            list: [
              {
                type: 'input',
                label: '短文本',
                icon: 'icon-write',
                options: {
                  type: 'text',
                  width: '100%',
                  defaultValue: '',
                  placeholder: '请输入',
                  clearable: false,
                  maxLength: null,
                  addonBefore: '',
                  addonAfter: '',
                  hidden: false,
                  disabled: false,
                },
                model: 'inputTest',
                key: 'input_1725676419721',
                help: '',
                rules: [
                  {
                    required: true,
                    message: '必填项',
                  },
                ],
                id: '8286e060-6cc1-11ef-bf24-f37feb2dd0ee',
                event: {
                  change: '9773c790-6cc1-11ef-bf24-f37feb2dd0ee',
                  click: '9773c791-6cc1-11ef-bf24-f37feb2dd0ee',
                  focus: '9773c792-6cc1-11ef-bf24-f37feb2dd0ee',
                  blur: '9773c793-6cc1-11ef-bf24-f37feb2dd0ee',
                },
              },
            ],
          },
          {
            span: 8,
            list: [],
          },
          {
            span: 8,
            list: [],
          },
        ],
        options: {
          gutter: 0,
        },
        key: 'grid_1725676416616',
        model: 'grid_1725676416616',
        id: '8286e07b-6cc1-11ef-bf24-f37feb2dd0ee',
        event: {
          change: '9599fe80-6cc1-11ef-bf24-f37feb2dd0ee',
          click: '9599fe81-6cc1-11ef-bf24-f37feb2dd0ee',
          focus: '9599fe82-6cc1-11ef-bf24-f37feb2dd0ee',
          blur: '9599fe83-6cc1-11ef-bf24-f37feb2dd0ee',
        },
      },
      {
        type: 'divider',
        label: '分割线',
        options: {
          orientation: 'left',
        },
        key: 'divider_1725676423946',
        model: 'divider_1725676423946',
        id: '8286e078-6cc1-11ef-bf24-f37feb2dd0ee',
        event: {
          change: '99f876a0-6cc1-11ef-bf24-f37feb2dd0ee',
          click: '99f876a1-6cc1-11ef-bf24-f37feb2dd0ee',
          focus: '99f876a2-6cc1-11ef-bf24-f37feb2dd0ee',
          blur: '99f876a3-6cc1-11ef-bf24-f37feb2dd0ee',
        },
      },
      {
        type: 'tabs',
        label: '标签页布局',
        options: {
          tabBarGutter: null,
          type: 'line',
          tabPosition: 'top',
          size: 'default',
          animated: true,
        },
        columns: [
          {
            value: '1',
            label: '选项1',
            list: [
              {
                type: 'batch',
                label: '子表',
                icon: 'icon-biaoge',
                list: [
                  {
                    type: 'input',
                    label: '短文本',
                    icon: 'icon-write',
                    options: {
                      type: 'text',
                      width: '100%',
                      defaultValue: '',
                      placeholder: '请输入',
                      clearable: false,
                      maxLength: null,
                      addonBefore: '',
                      addonAfter: '',
                      hidden: false,
                      disabled: false,
                    },
                    model: 'test1',
                    key: 'input_1725676475644',
                    help: '',
                    rules: [
                      {
                        required: false,
                        message: '必填项',
                      },
                    ],
                    id: '8286e060-6cc1-11ef-bf24-f37feb2dd0ee',
                    event: {
                      change: 'b8c8f3c0-6cc1-11ef-bf24-f37feb2dd0ee',
                      click: 'b8c8f3c1-6cc1-11ef-bf24-f37feb2dd0ee',
                      focus: 'b8c8f3c2-6cc1-11ef-bf24-f37feb2dd0ee',
                      blur: 'b8c8f3c3-6cc1-11ef-bf24-f37feb2dd0ee',
                    },
                  },
                  {
                    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: 'date1',
                    key: 'date_1725676480321',
                    help: '',
                    rules: [
                      {
                        required: true,
                        message: '必填项',
                      },
                    ],
                    id: '8286e066-6cc1-11ef-bf24-f37feb2dd0ee',
                    event: {
                      change: 'bb929b10-6cc1-11ef-bf24-f37feb2dd0ee',
                      click: 'bb929b11-6cc1-11ef-bf24-f37feb2dd0ee',
                      focus: 'bb929b12-6cc1-11ef-bf24-f37feb2dd0ee',
                      blur: 'bb929b13-6cc1-11ef-bf24-f37feb2dd0ee',
                    },
                  },
                ],
                options: {
                  scrollY: 0,
                  disabled: false,
                  hidden: false,
                  showLabel: true,
                  hideSequence: false,
                  width: '100%',
                },
                model: 'batchTest',
                key: 'batch_1725676438533',
                help: '',
                id: '8286e070-6cc1-11ef-bf24-f37feb2dd0ee',
                event: {
                  change: 'a2aa4350-6cc1-11ef-bf24-f37feb2dd0ee',
                  click: 'a2aa4351-6cc1-11ef-bf24-f37feb2dd0ee',
                  focus: 'a2aa4352-6cc1-11ef-bf24-f37feb2dd0ee',
                  blur: 'a2aa4353-6cc1-11ef-bf24-f37feb2dd0ee',
                },
              },
            ],
          },
          {
            value: '2',
            label: '选项2',
            list: [],
          },
        ],
        key: 'tabs_1725676433747',
        model: 'tabs_1725676433747',
        id: '8286e07a-6cc1-11ef-bf24-f37feb2dd0ee',
        event: {
          change: '9fcffa30-6cc1-11ef-bf24-f37feb2dd0ee',
          click: '9fcffa31-6cc1-11ef-bf24-f37feb2dd0ee',
          focus: '9fcffa32-6cc1-11ef-bf24-f37feb2dd0ee',
          blur: '9fcffa33-6cc1-11ef-bf24-f37feb2dd0ee',
        },
      },
    ],
    config: {
      layout: 'horizontal',
      labelCol: {
        xs: 4,
        sm: 4,
        md: 4,
        lg: 4,
        xl: 4,
        xxl: 4,
      },
      labelWidth: 100,
      labelLayout: 'flex',
      wrapperCol: {
        xs: 18,
        sm: 18,
        md: 18,
        lg: 18,
        xl: 18,
        xxl: 18,
      },
      hideRequiredMark: false,
      customStyle: '',
    },
  });

  const defaultValue = reactive({});

  const sfb = ref({});

  const handleChange = (value, key, record, tableInfo) => {
    console.log('login---------------------->', value, key, record, tableInfo);
  };

  const msubmit = () => {
    mFormDataRef.value
      .validateFields()
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const countChange = (value) => {
    console.log(value);
  };

  onMounted(() => {
    nextTick(() => {
      sfb.value.setData({ batchTest: [{ test1: '111' }, { date1: '2021-01-09' }], inputTest: '222', editor_test: `<p style="color:red">3p3p3p</p>` });
    });
  });

  const submitHandler = () => {
    sfb.value.getData().then(
      (res) => {
        console.log(res);
        message.success('提交成功！');
      },
      (err) => {
        console.log(err);
        message.error('提交失败！');
      }
    );
  };

  const resetHandler = () => {
    sfb.value.reset();
  };
</script>

<style lang="less" scoped>
  .form {
    padding: 30px 200px;
  }
</style>