【新增场景】示例

举个例子：新增司机页面

在这个页面中有一个表单，表单有创建司机的多个字段，点击【返回列表】按钮返回到列表查询页面，点击【取消】按钮返回到上一级，点击【提交】按钮验证表单各字段的合规性，然后把数据提交到服务端保存。

实战开发

搜索页面开发示例

<template>
<div style='height:1000px;'>
  <bst-page padding backgroundColor="#edeff4">
    <bst-form-create ref="form" :formConfig="formConfig"></bst-form-create>
  </bst-page>
</div>
</template>

<script>
  export default {
    name: "create",
    data() {
      return {
        formConfig: [
                  {
                    name: '个人信息',
                    span: 24,
                    formItems: [
                      {
                        key: 'name',
                        label: '姓名',
                        type: 'input',
                        span: 24,
                        props: {
                          disabled: false,
                        },
                        events: {
                          input: (value) => {
                            console.log(this.$refs.form.getData())
                          },
                          change(value) {
                            console.log('name change ', value)
                          },
                        },
                        rules: [
                          {required: true, message: '请输入姓名', trigger: 'blur'},
                        ]
                      },
                      {
                        label: '性别',
                        type: 'radio',
                        key: 'sex',
                        defaultValue: '',
                        span: 24,
                        props: {
                          disabled: false,
                        },
                        rules: [
                          {required: true, message: '请输入经纬度', trigger: 'blur'},
                        ],
                        options: [
                          {label: '男', value: 'male'},
                          {label: '女', value: 'female'},
                        ],
                      },
                      {
                        label: '头发长度',
                        type: 'input',
                        key: 'hair_length',
                        defaultValue: 30,
                        span: 12,
                        props: {
                          append: '厘米'
                        },
                        show: ({sex}) => {
                          return sex === 'female';
                        },
                      },
                      {
                        label: '出生日期',
                        type: 'date-picker',
                        key: 'birthday',
                        span: 24,
                        rules: [
                          {required: true, message: '请选择出生日期', trigger: 'blur'},
                        ]
                      },
                      {
                        label: '爱好',
                        type: 'checkbox',
                        key: 'hobby',
                        defaultValue: [],
                        span: 24,
                        options: [
                          {label: '游戏', value: 'v1'},
                          {label: '跑步', value: 'v2'},
                          {label: '游泳', value: 'v3'},
                          {label: '篮球', value: 'v4'},
                        ],
                        props: {
                          disabled: false,
                          showAll: true,
                        },
                        rules: [
                          {required: true, message: '请选择爱好', trigger: 'blur'},
                        ]
                      },
                      {
                        label: '技能',
                        type: 'select',
                        key: 'city',
                        defaultValue: [],
                        span: 24,
                        class: 'effective-scope',
                        style: {'color': 'red'},
                        options: [
                          {label: '北京', value: 'bj'},
                          {label: '上海', value: 'sh'},
                          {label: '广州', value: 'gz'},
                          {label: '成都', value: 'cd'},
                        ],
                        props: {
                          disabled: false,
                          multiple: true,
                        },
                        rules: [
                          {required: true, message: '请选择生效范围', trigger: 'blur'},
                        ]
                      },
                      {
                        label: '自我介绍',
                        type: 'textarea',
                        key: 'selfIntroduce',
                        defaultValue: '',
                        span: 24,
                      },
                    ]
                  },
                  {
                    name: '员工信息',
                    span: 24,
                    formItems: [
                      {
                        key: 'poiName',
                        label: 'POI 名称',
                        type: 'input',
                        span: 24,
                        props: {
                          disabled: false,
                        },
                        events: {
                          input: (value) => {
                            console.log("poiName input ", value)
                            console.log(this.$refs.form.getData())
                          },
                          change(value) {
                            console.log('poiName change ', value)
                          },
                        },
                        rules: [
                          {required: true, message: '请输入POI 名称', trigger: 'blur'},
                        ]
                      },
                    ],
                  },
                  {
                    name: "车辆信息",
                    span: 12,
                    formItems: [
                      {
                        label: '车座数',
                        type: 'input',
                        key: 'vehicle_seat_num',
                        defaultValue: '',
                        span: 12,
                        labelWidth: '100px',
                        props: {
                          disabled: false,
                        },
                        rules: [
                          {required: true, message: '请输入车座数', trigger: 'blur'},
                        ],
                      },
                      {
                        label: '车辆颜色',
                        type: 'input',
                        key: 'vehicle_color',
                        defaultValue: '',
                        span: 12,
                        props: {
                          disabled: false,
                        },
                        rules: [
                          {required: true, message: '请选择车辆颜色', trigger: 'blur'},
                        ],
                      },
                    ],
                  },
                  {
                    name: '驾驶证信息',
                    span: 12,
                    formItems: [
                      {
                        label: '准驾车型',
                        type: 'input',
                        key: 'poiId',
                        defaultValue: 1,
                        span: 24,
                      },
                      {
                        key: 'drivingAge',
                        slotName: 'drivingAge',
                        span: 24,
                      },
                    ],
                  },
                ],
      }
    },
  }
</script>

显示代码