sinsoft-common-form v2.8.1

参数介绍model

表单 属性 | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------------------------------------------------------|--------|--------| | v-model | 表单数据,双向绑定(字段需与 prop 属性一样) | Object | | | fieldList | 表单项配置列表 | Object | | | options | 属性labelPosition配置表单标签位置，isDisabled配置是否全部不可编辑，btnConfig配置按钮配置 | Object | |

表单项 配置属性

formItemList 配置属性 | 参数 | 说明 | 类型 | 默认值 | 必填项 | |-----------|------------------------------------------------------------------------------------------|--------|--------|--------| | type | 表单项类型 | String | | 是 | | label | 表单项标签名 为空的时候不显示但是标签高度在 | String | | 否 | | required | 是否显示标签名右边的*星号 | Boolean | | 否 | | disabled | 是否可编辑 | Boolean | | 否 | | field | 表单项字段 | String | | 是 | | rules | 表单验证规则 | Object | | 否 | | style | 表单项样式，可以在已有布局的基础上自定义宽度等样式 | String | | 否 | | options | 下拉、多选、单选必配置项，配置选项数据data数组 单项和多选属性：isDisabled 单项是否禁用 | Object | | 是 | | ways | 单选和多选的选项是横向排列row还是竖向排列column | String | | 否 | | prepend | 输入框前置内容 | String | | 否 | | append | 输入框后置内容 | String | | 否 | | isHide | 表单项是否显示 | Boolean | | 否 | | tipsBlow | 下拉框下的灰色提示 | String | | 否 | | tipsBlowStyle | 下拉框下的灰色提示样式 | String | | 否 | | maxlength | 最大输入长度 | string/ number | | 否 | | maxlengthNameEnFamily | 英文姓最大输入长度 | string/ number | | 否 | | maxlengthNameEn | 英文名最大输入长度 | string/ number | | 否 | | maxlengthNameChFamily | 中文姓最大输入长度 | string/ number | | 否 | | maxlengthNameCh | 中文名最大输入长度 | string/ number | | 否 | | isReadonlyNameEnFamily | 英文姓是否只读样式 | Boolean | | 否 | | isReadonlyNameEn | 英文名是否只读样式 | Boolean | | 否 | | isReadonlyNameChFamily | 中文姓是否只读样式 | Boolean | | 否 | | isReadonlyNameCh | 中文名是否只读样式 | Boolean | | 否 | | rows | 输入框行数，仅 type 为 'textarea' 时有效 | String | | 否 | | autosize | textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 } | Object | | 否 | | disabledDate |一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | function(Date) | | 否 | | xs | 在小屏幕设备上的列宽，小于 576px的屏幕宽度 | Number | 24 | 否 | | sm | 在中等屏幕设备上的列宽，介于 576px 和 768px 之间的屏幕宽度 | Number | 24 | 否 | | md | 在大屏幕设备上的列宽，介于 768px 和 992px 之间的屏幕宽度 | Number | 8 | 否 | | lg | 在更大屏幕设备上的列宽，介于 992px 和 1200px 之间的屏幕宽度 | Number | 8 | 否 | | xl | 在最大屏幕设备上的列宽，大于等于 1200px 的屏幕宽度 | Number | 8 | 否 | | slotItemName | 表单项插槽名 | String | | 否 | | slotLabelName | 标签插槽名 | String | | 否 | | showWordLimit | 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 | Boolean | | 否 | | showTo | 是否显示中间字段,并且传国际化的值如'to', 只在 type 为 'date' 的时候生效 | String | | 否 | | widthNation | 国家下拉宽度, 只在 type 为 'phone' 的时候生效 如300px | String | | 否 | | widthArea | 地区下拉宽度, 只在 type 为 'phone' 的时候生效 如300px | String | | 否 | | isReadonlyNation | 国家号是否只读样式 | Boolean | | 否 | | isReadonlyArea | 地区号是否只读样式 | Boolean | | 否 | | isReadonlyPhoneNumber | 手机号是否只读样式 | Boolean | | 否 | | isReadonly | 表单项是否只读样式 | Boolean | | 否 | | openDisabled | 表单项是否在全部禁用的时候打开，true为打开 | Boolean | false | 否 |

Form 方法

Form 暴露的对象

Slots 插槽

btnConfig 配置

参考用例：

<template>
  <SinosoftCommonForm
    ref="formf"
    :fieldList="fieldList"
    :model="model"
    :options="options"
    @create="handleBaseSubmit"
    @cancel="cancelClick"
    @next="handleBaseNext"
    @nextttt="handleBaseSubmit"
    @last="handleLastClick"
    @selectChange="selectChange"
    @radioChange="radioChange"
    @checkChange="checkChange"
    @dateChange="dateChange"
    @inputBlur="inputBlur"
  >
    <!-- 小项插槽示例 -->
    <template v-slot:slotItemName1>
      <div @click="slotClick">
                      <el-input
                  v-model="model.testSlotValue"
                >
                </el-input>
      </div>
    </template>
    <template v-slot:slotItemName2>
      <div>{{  }}</div>
    </template>
    <!-- label插槽示例 -->
    <template v-slot:slotLabelNameTest>
      <div>{{ 'hhhahah' }}</div>
    </template>
    <!-- 如果不使用默认的按钮可以使用插槽自定义内容， 插槽返回的model就是当前表单的数据 -->
    <!-- <template #buttons="{ onBtnClick, model }">
      <sinosoft-common-button
        :size="15"
        :width="'90px'"
        :btnCode="''"
        @handleClick="
          (code) => {
            onBtnClick(code, true, 'next'); //,参数一code:按钮组件编码，参数二true or false:是否校验表单，
            //参数三'methodName'方法名自己取名定义，对应表单方法。如本次’next'触发@next对应的方法
          }
        "
        :style="''"
      >
        {{ "下一步" }}
      </sinosoft-common-button>
    </template> -->
  </SinosoftCommonForm>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { default as SinosoftCommonForm } from "../package/Index.vue";
import type { FormInstance } from "element-plus";
const formf = ref<FormInstance>();
const slotClick = () => {
  console.log(formf.value, formf.value.formRef);
  // formf.value.formRef.resetFields('others');
  formf.value.resetFieldsTest();
};
const fieldList = reactive<Form.FormItem[]>([
  { type: "title", title: "Client Information", xl: 24 },
  {
    type: "select",
    // labelStyle: '',
    required: false,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "jobbbbb",
    // labelStyle: 'height: 22px',
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "吃饭", code: "1" },
        { name: "睡觉", code: "2" },
        { name: "写代码", code: "3" },
      ],
    },
    xs:24,// 每行的表单项该属性值之和等于24
    sm:24,// 每行的表单项该属性值之和等于24
    md:8,// 每行的表单项该属性值之和等于24
    lg:8,// 每行的表单项该属性值之和等于24
    xl:24,// 每行的表单项该属性值之和等于24
  },
  {
    type: "slotItem",
    label: "插槽例1",
    isHide: false,
    field: "testSlotValue",
    slotItemName: "slotItemName1",
    required: true,
    rules: [{ required: false, message: "slotItemName is required" }],
    xl: 6,
  },
  {
    type: "select",
    label: "Non-Sales Meeting Type",
    isHide: false,
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "jobe",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "吃饭", code: "1" },
        { name: "睡觉", code: "2" },
        { name: "写代码", code: "3" },
      ],
    },
    xl: 6,
  },
  {
    type: "input",
    // label: "Othders",
    field: "others",
    required: false,
    disabled: false,
    isHide: false,
    prepend: 'prepend',
    // slotLabelName: 'slotLabelNameTest',
    append: 'append',
    rules: [{ required: true, message: "只读 is required" }],
    placeholder: "Others",
    xl: 6,
  },
  {
    type: "name",
    label: "姓名",
    required: true,
    span: 24,
    maxlength: 9,
    disabled: false,
    isHide: false,
    field: {
      nameEnFamily: "nameEnFamily",
      nameEn: "nameEn",
      nameChFamily: "nameChFamily",
      nameCh: "nameCh",
    },
    rules: {
      nameEnFamily: [{ required: true, message: "11 is required" }],
      nameEn: [{ required: true, message: "22 is required" }],
      nameChFamily: [{ required: true, message: "33 is required" }],
      nameCh: [{ required: true, message: "44 is required" }],
    },
    placeholderNameChFamily: "請輸入中文姓",
    placeholderNameEnFamily: "請輸入英文姓",
    placeholderNameEn: "請輸入英文名",
    placeholderNameCh: "請輸入中文名",
    xl: 24,
  },
  {
    type: "input",
    maxlength: 9,
    label: "inputinputinputinputinputinputf",
    labelStyle: "height:66px",
    required: false,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    style: "",
    placeholder: "Please select gender",
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label:
      "inputinputinputinpinputinputinpu tinputinpuinputinputputinpuinputinputtinputin pututinput",
    required: true,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    style: "",
    placeholder: "Please enter HKID",
    xl: 12,
  },
  {
    type: "date",
    label: "Date of Birth",
    required: true,
    field: "datedd",
    rules: [{ required: false, message: "日期 is required" }],
    placeholder: "DD/MM/YYYY",
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "HKID",
    required: true,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter HKID",
    xl: 12,
  },
  {
    type: "date",
    label: "Date of Birth",
    required: true,
    field: "datedd",
    rules: [{ required: false, message: "日期 is required" }],
    placeholder: "DD/MM/YYYY",
    xs:12,
    sm:12,
    md:12,
    lg:12,
    xl: 12,
    showTo: 'to'
  },
  {
    type: "date",
    label: "Date of Birth",
    required: true,
    field: "datedd",
    rules: [{ required: false, message: "日期 is required" }],
    placeholder: "DD/MM/YYYY",
    xs:12,
    sm:12,
    md:12,
    lg:12,
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "HKID",
    required: true,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter HKID",
    xl: 12,
  },
  {
    type: "select",
    label: "Country of birth",
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Country",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "吃饭", code: "1" },
        { name: "睡觉", code: "2" },
        { name: "写代码", code: "3" },
      ],
    },
    xl: 12,
  },
  {
    type: "select",
    label: "City of birth",
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "birth",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "吃饭", code: "1" },
        { name: "睡觉", code: "2" },
        { name: "写代码", code: "3" },
      ],
    },
    xl: 12,
  },
  {
    type: "select",
    label: "Nationality",
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Nationality",
    placeholder: "Please select country of birth",
    style: "width:33%;padding-right: 0px",
    tipsBlow: "tipsBlow tipsBlo ddaf ",
    tipsBlowStyle: "width:500px",
    options: {
      data: [
        { name: "吃饭", code: "1" },
        { name: "睡觉", code: "2" },
        { name: "写代码", code: "3" },
      ],
    },
    xl: 24,
  },
  { type: "line", xl: 24 },
  { type: "title", title: "Client Information", xl: 24 },
  {
    type: "phone",
    label: "Phone No. (Mobile)",
    maxlength: 9,
    required: true,
    rules: {
      phoneNumber: [{ required: true, message: 'phoneNumber1 is required' }],
    },
    field: { nationCode: "nationCode",areaCode: "areaCode", phoneNumber: "phoneNumber" },
    disabled: false,
    placeholder: "请输入手机号码",
    nationOptions: {
      placeholder: "",
      data: [
        { name: "852", code: "1" },
        { name: "654", code: "2" },
        { name: "765", code: "3" },
      ],
    },
    areaOptions: {
      placeholder: "",
      data: [
        { name: "+852", code: "1" },
        { name: "+654", code: "2" },
        { name: "+765", code: "3" },
      ],
    },
    xs: 24, // 小于 576px的屏幕宽度
    sm: 24, // 介于 576px 和 768px 之间的屏幕宽度
    md: 12, // 介于 768px 和 992px 之间的屏幕宽度
    lg: 12, // 介于 992px 和 12px 之间的屏幕宽度
    xl: 12, // 大于等于 1200px 的屏幕宽度
  },
  {
    type: "phone",
    label: " Phone No. (Residence)",
    required: true,
    rules: [{ required: true, message: "phoneNumber1 is required" }],
    field: { nationCode: "nationCode",areaCode: "areaCode", phoneNumber: "phoneNumber" },
    disabled: false,
    placeholder: "请输入手机号码",
    nationOptions: {
      placeholder: "",
      data: [
        { name: "852", code: "1" },
        { name: "654", code: "2" },
        { name: "765", code: "3" },
      ],
    },
    areaOptions: {
      placeholder: "",
      data: [
        { name: "+852", code: "1" },
        { name: "+654", code: "2" },
        { name: "+765", code: "3" },
      ],
    },
    xs: 24, // 小于 576px的屏幕宽度
    sm: 24, // 介于 576px 和 768px 之间的屏幕宽度
    md: 12, // 介于 768px 和 992px 之间的屏幕宽度
    lg: 12, // 介于 992px 和 12px 之间的屏幕宽度
    xl: 12, // 大于等于 1200px 的屏幕宽度
  },
  {
    type: "input",
    maxlength: 9,
    label: "Email Address",
    required: true,
    field: "readonly",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "这是一个只读输入框",
    xl: 8,
  },
  {
    type: "checkboxRadio",
    label: "Preferred Language - Written and Communication Preference ",
    required: true,
    field: "Preferred",
    rules: [{ required: false, message: "多选 is required" }],
    ways: "column",
    options: {
      data: [
        { name: "Cantonese", code: "0" },
        { name: "Mandarin", code: "2" },
        { name: "English", code: "3" },
        { name: "English", code: "3" },
        { name: "English", code: "3" },
        { name: "English", code: "3" },
      ],
    },
    xl: 12,
  },
  {
    type: "checkbox",
    label: "Preferred Language - Written and Communication Preference ",
    required: true,
    field: "Language",
    rules: [{ required: false, message: "多选 is required" }],
    ways: "row",
    options: {
      data: [
        { name: "Cantonese", code: "0", isDisabled: true },
        { name: "Mandarin", code: "2" },
        { name: "English", code: "3" },
      ],
    },
    xl: 12,
  },
  {
    type: "radioNote",
    label: "",
    required: true,
    field: "radioValue",
    labelBefore: "Preferred Appointment Notification Channel",
    rules: [{ required: false, message: "单选 is required" }],
    options: {
      data: [
        { name: "SMS", code: "1" },
        { name: "Email", code: "0" },
      ],
    },
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Email Address",
    required: true,
    field: "readonly",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "这是一个只读输入框",
    xl: 12,
  },
  { type: "line", required: true, xl: 24 },
  { type: "title", title: "Current Residential Address", xl: 24 },
  {
    type: "radio",
    label: "",
    required: false,
    field: "radioValue",
    rules: [{ required: false, message: "单选 is required" }],
    options: {
      data: [
        { name: "Chinese address", code: "1" },
        { name: "English address ", code: "0" },
      ],
    },
    xl: 24,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Flat",
    required: true,
    field: "addressFlat",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter flat",
    xl: 24,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Floor",
    required: true,
    field: "addressFloor",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter floor",
    xl: 24,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Block",
    required: true,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    style: "width:33%;padding-right: 0px;",
    placeholder: "Please enter Block",
    xl: 24,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Building",
    required: true,
    field: "addressBuild",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter floor",
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Estate",
    required: true,
    field: "addressBlock",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter Block",
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Street Number and Street Name",
    required: true,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter floor",
    xl: 12,
  },
  {
    type: "select",
    label: "District/ Region",
    required: true,
    disabled: false,
    field: "Region",
    placeholder: "Please select country of birth",
    rules: [{ required: false, message: "下拉 is required" }],
    options: {
      data: [
        { name: "1", code: "1" },
        { name: "2", code: "2" },
        { name: "3", code: "3" },
      ],
    },
    xl: 12,
  },
  {
    type: "select",
    label: "Area",
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Region",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "1", code: "1" },
        { name: "2", code: "2" },
        { name: "3", code: "3" },
      ],
    },
    xl: 8,
  },
  {
    type: "select",
    label: "City",
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Region",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "1", code: "1" },
        { name: "2", code: "2" },
        { name: "3", code: "3" },
      ],
    },
    xl: 8,
  },
  {
    type: "select",
    label: "Country or Territory",
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Region",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "1", code: "1" },
        { name: "2", code: "2" },
        { name: "3", code: "3" },
      ],
    },
    xl: 8,
  },
  {
    type: "select",
    label: "Country or Territory",
    required: true,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Region",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "1", code: "1" },
        { name: "2", code: "2" },
        { name: "3", code: "3" },
      ],
    },
    xl: 24,
  },
  { type: "line", style: "width: 100%;", xl: 24 },
  // {
  //   type: "slotItem",
  //   label: "插槽例2",
  //   field: "value2",
  //   slotItemName: "slotItemName2",
  //   required: true,
  //   rules: [{ required: false, message: "slotItemName is required" }],
  //   xl: 8,
  // },
  {
    type: "select",
    label: "Occupation Status",
    required: false,
    disabled: false,
    rules: [{ required: false, message: "下拉 is required" }],
    field: "Region",
    placeholder: "Please select country of birth",
    options: {
      data: [
        { name: "1", code: "1" },
        { name: "2", code: "2" },
        { name: "3", code: "3" },
      ],
    },
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Nature of Business",
    required: false,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter floor",
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Nature of Business",
    required: false,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter floor",
    xl: 12,
  },
  {
    type: "input",
    maxlength: 9,
    label: "Nature of Business",
    required: false,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    placeholder: "Please enter floor",
    xl: 12,
  },
  {
    type: "textarea",
    label: "Other occupation/title",
    required: false,
    maxlength: 200,
    showWordLimit: true,
    field: "Gender",
    rules: [{ required: false, message: "只读 is required" }],
    rows: 2,
    autosize: { minRows: 5, maxRows: 6 },
    placeholder: "Please enter floor",
    xl: 24,
  },
  { type: "line", style: "width: 100%;", xl: 24 },
]);
// 配置项
const options = reactive<Form.Options>({
  labelPosition: "top", //表单标签位置
  isDisabled: false,
  btnConfig: [
    //表单按钮配置
    {
      isShow: true,
      name: "Create",
      emitName: "create",
      btnCode: "11111",
      size: "90px",
      isRule: false,
      style: "margin-right: 30px",
      debounced: true,
    },
    {
      isShow: true,
      name: "上一步",
      emitName: "last",
      size: "90px",
      btnCode: "11111",
      isRule: true,
      // style: 'margin-right: 30px'
    },
    {
      isShow: true,
      name: "重置",
      emitName: "reset",
      size: "90px",
      btnCode: "11111",
      isRule: false,
      style: "margin-right: 30px",
    },
    {
      isShow: true,
      plain: "",
      name: "确认",
      emitName: "nextttt",
      btnCode: "001",
      size: 15,
      primary: "primary",
      info: "",
      text: "",
      link: "",
      loading: true,
      width: "100px",
      height: "50px",
      circle: "circle",
      color: "#3333",
      bgColor: "#6666",
      borderColor: "#336699",
      borderStyle: "solid",
      borderWidth: "1px",
      fontSize: "16px",
      fontWeight: 500,
      class: "custom-class",
      loadingColor: "#FFFFFF",
      icon: "",
      isRule: true,
      style: "width: 700px;",
    },
    // {
    //   isShow: true,
    //   name: '下一步',
    //   emitName: 'next',
    //   btnCode: '11111',
    //   size: '90px',
    //   isRule: false,
    //   style: 'margin-right: 30px'
    // },
  ],
});
const model = ref<Record<string, any>>({
  // 地址项字段
  testSlotValue: '',
  addressBlock: "1",
  addressBuild: "ww",
  addressCity: "wd",
  addressFlat: "d",
  addressFloor: "d",
  addressHouse: "d",
  addressLaguage: "d",
  addressNation: "d",
  addressNo: "d",
  addressRegion: "d",
  addressStreet: "dqqqq",
  addressSubregion: "d",
  addressType: "",
  //
  systemLaguage: "",
  value1: "",
  addressMansion: "",
  block: "",
  floor: "",
  flat: "",
  addressLang: "1",
  addressArea: "",
  addressAreaC: "",
  datedd: "",
  // 姓名项字段
  nameEnFamily: "",
  // nameEn: '',
  // nameChFamily: '',
  // nameCh: '',
  // 单选字段
  radioValue: "",
  // 性别字段
  gender: 1,
  // 多选字段
  hobbies: [1],
  // 下拉字段
  Nationality: "",
  jobe: "",
  // 密码字段
  password: "",
  // 只读字段
  readonly: "只读输入框",
  // 日期字段
  // date: new Date(2000, 1, 1, 12, 0, 0),
  date: "",
  // 留言板字段
  summary: "",
  // 地址插槽字段
  addressRadioV: "2q",
  // 手机输入字段
  areaCode: "+998",
  phoneNumber: "",
  // value2
  value2: "",
});
/**
 * 注意： model数据模型非必填项，如果仅仅是用于数据收集，model参数可以不用填，表单的submit事件会返回所有搜集的数据对象
 *       如果是编辑的情况下，页面需要回显数据，则model数据模型必须要填写
 */
const handleBaseSubmit = (model: Record<string, any>, code: any) => {
  console.log("handleBaseSubmit", model, code);
};
const handleLastClick = (model: Record<string, any>, code: any) => {
  console.log("handleLastClick", model, code);
};
const cancelClick = (model: Record<string, any>, code: any) => {
  console.log("cancleClick", model, code);
};
const handleBaseNext = (model: Record<string, any>, code: any) => {
  console.log("handleBaseNextClick", model, "fff", code, "ff");
};
const selectChange = (code: any, field: any) => {
  console.log("ssssssss", code, field);
};
const radioChange = (code: any, field: any) => {
  console.log("radioChange", code, field);
};
const checkChange = (code: any, field: any) => {
  console.log("checkChange", code, field);
};
const dateChange = (date: string, field: string) => {
  console.log("dateChange", date, field);
};
const inputBlur = (val: string, field: string) => {
  console.log("inputBlur", val, field);
};
</script>
<style lang="scss" scoped></style>

<!-- 表单域名配置列表示例 -->
<script>
// 自定义验证邮箱方法
const checkEmail = (rule: any, value: any, callback: any) => {
  if (!value) callback(new Error('Please input the email'))
  const regExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(com|cn|net)$/
  regExp.test(value) ? callback() : callback(new Error('Please input the correct email address'))
}
// 表单配置示例
export const exampleForm = {
// 基本全部表单项配置示例
  baseForExample: [
    // 标题项
    { title: '标题内容', type: 'title',  },
    // 姓名项
    {
      label: '姓名项',
      type: 'name',
      required: true,
      disabled: false,
      field: {
        nameEnFamily: 'nameEnFamily',
        nameEn: 'nameEn',
        nameChFamily: 'nameChFamily',
        nameCh: 'nameCh'
      },
      rules: {
        nameEnFamily: [{ required: true, message: '11 is required' }],
        nameEn: [{ required: true, message: '22 is required' }],
        nameChFamily: [{ required: true, message: '33 is required' }],
        nameCh: [{ required: true, message: '44 is required' }],
      },
      placeholderNameChFamily: '請輸入中文姓',
      placeholderNameEnFamily: '請輸入英文姓',
      placeholderNameEn: '請輸入英文名',
      placeholderNameCh: '請輸入中文名',
    },
    // 单选项
    {
      type: 'radio',
      label: '单选项',
      required: true,
      disabled: false,
      field: 'radioValue',
      rules: [{ required: true, message: '单选 is required' }],
      style: 'width: 100%',
      options: { data: [{ name: 'Chinese address', code: 1 }, { name: 'English address ', code: 0 }] }
    },
    // 单选项(带后缀说明)
    {
      type: 'radioNote',
      label: '单选(带后缀说明)',
      required: true,
      disabled: false,
      field: 'radioValue',
      labelBefore: 'Preferred Appointment Notification Channel',
      labelNode: ' (Note: The notifications will be sent to the first contact number you entered.)',
      style: 'width: 100%',
      rules: [{ required: true, message: '单选 is required' }],
      options: { data: [{ name: 'SMS', code: 1 }, { name: 'Email', code: 0 }] }
    },
    // 性别项
    {
      type: 'gender',
      label: '性别',
      required: true,
      disabled: false,
      field: 'gender',
      style: 'width: 100%',
      rules: [{ required: true, message: '性别 is required' }],
      options: { data: [{ name: '男', code: "F" }, { name: '女', code: "M" }] }
    },
    // 多选项
    {
      type: 'checkbox',
      label: '多选项',
      required: true,
      disabled: false,
      field: 'hobbies',
      style: 'width: 100%',
      rules: [{ required: true, message: '多选 is required' }],
      ways: 'column', //column or row
      options: { data: [{ name: 'Cantonese', code: 1 }, { name: 'Mandarin', code: 2 }, { name: 'English', code: 3 }] }
    },
    // 多选样式单选
    {
      type: "checkboxRadio",
      label: "多选样式单选 ",
      required: true,
      field: "Preferred",
      rules: [{ required: true, message: "多选 is required" }],
      ways: "row", //column or row
      options: {
        data: [
          { name: "Cantonese", code: '0' },
          { name: "Mandarin", code: '2' },
          { name: "English", code: '3' },
        ],
      },
    },
    // 下拉项
    {
      type: 'select',
      label: '下拉项',
      required: true,
      disabled: false,
      field: 'Region',
      placeholder: 'Please select country of birth',
      style: 'width:49%;padding-right: 0px;',//一行两个右边项的样式
      rules: [{ required: true, message: '下拉 is required' }],
      options: { data: [{ name: '1', code: 1 }, { name: '2', code: 2 }, { name: '3', code: 3 }] }
    },
    // 密码项
    {
      type: 'input',
      label: '密码',
      required: true,
      disabled: false,
      field: 'password',
      prepend: 'prepend',
      append: 'hdk',
      style: 'width:49%;padding-right: 0px;',//一行两个右边项的样式
      placeholder: '这是一个密码输入框',
      showPassword: true,
      rules: [{ required: true, message: '密码 is required' }],
    },
    // 只读项
    {
      type: 'input',
      label: '只读',
      required: true,
      disabled: false,
      field: 'readonly',
      rules: [{ required: true, message: '只读 is required' }],
      readonly: true,
      placeholder: '这是一个只读输入框'
    },
    // 日期项
    {
      type: 'date',
      label: '日期',
      required: true,
      disabled: false,
      field: 'date',
      rules: [{ required: true, message: '日期 is required' }],
      style: 'width:51%;padding-right: 20px;',//一行两个左边项的样式
      placeholder: 'DD/MM/YYYY',
      disabledDate:  (val: Date) => {
          return val.getTime() > new Date().getTime()
      },
    },
    // 日期选择项
  {
    type: "date",
    label: "Date of Birth",
    required: true,
    field: "datedd",
    rules: [{ required: false, message: "日期 is required" }],
    placeholder: "DD/MM/YYYY",
    xs:12,
    sm:12,
    md:12,
    lg:12,
    xl: 12,
    showTo: 'to'
  },
  {
    type: "date",
    label: "Date of Birth",
    required: true,
    field: "datedd",
    rules: [{ required: false, message: "日期 is required" }],
    placeholder: "DD/MM/YYYY",
    xs:12,
    sm:12,
    md:12,
    lg:12,
    xl: 12,
  },
    {
      type: 'daterange',
      label: '日期选择',
      required: true,
      disabled: false,
      field: 'dateRange',
      rules: [{ required: true, message: '日期 is required' }],
      startPlaceholder: '请选择开始日期',
      endPlaceholder: '请选择结束日期'
    },
    // 文本框项
    {
      type: 'textarea',
      label: '文本框',
      required: true,
      disabled: false,
      // rows: 5,
      autosize:{
        minRows: 2, maxRows: 6 
      }
      rules: [{ required: true, message: '文本框 is required' }],
      field: 'summary',
      placeholder: '文本框'
    },
    // 手机号码项
    {
      type: 'phone',
      label: '手机号码',
      required: true,
      disabled: false,
      field: {
        areaCode: 'areaCode',
        phoneNumber: 'phoneNumber'
      },
      style: 'width:33.5%;padding-right: 20px;',
      placeholder: '请输入手机号码',
      rules: {
        phoneNumber: [{ required: true, message: 'phoneNumber1 is required' }],
      },
      options: { placeholder: '', data: [{ name: '+852', code: 1 }, { name: '+654', code: 2 }, { name: '+765', code: 3 }] }
    },
    // LINE 横向线
    {
      type: 'line',
      style: 'width: 100%;',
    },
    // 插槽项
    {
      type: "slotItem",
      label: "插槽例1",
      field: "value1",
      slotItemName: 'slotItemName1',
      required: true,
      rules: [{ required: true, message: "slotItemName is required" }],
    },
  ],
  // 其他示例
  customkeyForm: [
    { label: '标题', field: 'name' },
    { label: '性别', field: 'gender', type: 'radio', options: { labelkey: 'title', valueKey: 'val', data: [{ title: '男', val: 1 }, { title: '女', val: 0 }] } }
  ],
  // 带自定义校验
  ruleForm: [
    { label: '姓名', field: 'name', rules: [{ required: true, message: 'name is required' }] },
    { label: '邮箱', field: 'email', rules: [{ required: true, validator: checkEmail }] }
  ]
} as Record<string, Form.FieldItem[]>
</script>