说明

自定义表单组件要接入现有的表单要遵循以下的协议

1. 有value,formType(不强制)属性
2. 当组件内部的value改变时，需要emit changed事件

表单通过设置item的node属性接入

<item node="c-ware-select" label="自定义组件" />

示例

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form x='searchForm' type='search'>
        <item
            label='input'
            name='input'
            node='input'
            required
        >
        </item>
        <item
            label='custom node'
            name='customNode'
            choice-trigger='{{false}}'
            node='c-ware-select'
            required
        >
        </item>
    </form>
</page>

import CWareSelect from "../c-ware-select.vue";


const customItemNodeMethods = {
  customItemNodeValidators: [
    (value) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (value && value.length > 1) {
            return resolve('');
          }

          return reject('selected length muse greater thant 1');
        }, 1000);
      });
    },
  ],
}

export default XPage({
  components: {
    'c-ware-select': CWareSelect,
  },

  data: {
    ...customItemNodeMethods,
      selectRange: [new Date(), new Date('2022-12-1')],

  },

  restore() {
    const form = this.getComponent('searchForm');

    form.setData({
      name: 'chenhj',
      birthday: '2005-10-01',
      edu: '02',
      form2: {
        name: 'cec',
        enrollmentDate: '2008-01-01'
      },
    });
  },

  save() {
  },

  reset() {

  },
});

引入的自定义组件代码如下：

c-ware-select.vue

<template>
    <ware-select class="c-ware-select" @changed="handleChange"></ware-select>
</template>
<script>
import CustomItemComponent from "cabinx/components/item/0.6.0/custom-item-component";
import WareSelect from "cabinxbuscomps/components/ware-select/ware-select";

export default CustomItemComponent({
    name: "c-ware-select",

    components: {
        WareSelect
    },

    props: {
        codeType: {
            type: String
        }
    },

    methods: {
        handleChange(value) {
            this.$emit("changed", value);
        },

        endInput() {
            this.$emit("input-end");
        }
    }
});
</script>

Attributes

属性	说明	类型	可选值	默认值	端	版本
name	名称	string	--	--	PC/Mobile	--
value	绑定值	array<{查看返回的值}>	--	--	PC/Mobile	--
formType	表单类型	string	base/search/info	--	PC/Mobile	--

Events

名称	说明	回调参数	端	版本
changed	值改变后触发	--	PC/Mobile	--