自定义字段

当表单设计里面的组件无法满足业务需求时，可以自己添加字段组件。这里用评分组件为例，评分组件需要传入一个评分值，但是表单设计里面没有这个组件，所以需要自己添加一个评分组件。

<template>
    <div ref="formWrap">
        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
          <!-- 单行文本  -->

            <Col v-if="getIfShow2('9a8db2186edb49879f59162ae2660b21')" v-show="getIsShow2('9a8db2186edb49879f59162ae2660b21')" :span="getColWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'])">
                <template v-if="showComponent(schemaMap['9a8db2186edb49879f59162ae2660b21'])">
                    <SimpleFormItem v-model:value="formModel[schemaMap['9a8db2186edb49879f59162ae2660b21'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['9a8db2186edb49879f59162ae2660b21']" />
                </template>
            </Col>
            <!-- 评分组件添加  -->

            <Col 
                v-if="getIfShow2('d7dfec1ff5254cfe9ab7dfa45753bef7')"
                v-show="getIsShow2('d7dfec1ff5254cfe9ab7dfa45753bef7')"
                :span="getColWidth(schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7'])">
                <template v-if="showComponent(schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7'])">
                    <FormItem
                        label="系统评分"
                        name="rate"
                        :rules="[{ required: true, message: '请选择评分' }]"
                        :label-col="schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7']).labelCol"
                        :wrapperCol="itemLabelWidthProp.wrapperCol"
                    >
                        <a-rate v-model:value="formModel.rate" :count="5" />
                    </FormItem>
                </template>
            </Col>
        </Form>
    </div>
</template>

<script>
    // 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
    import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
    import { Col, Form, Row } from 'ant-design-vue';
    import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
    import { ref } from 'vue';
    import { CheckCircleOutlined } from '@ant-design/icons-vue';
    import CustomDevTableItem1 from './CustomDevTableItem1.vue';
import { TabPane, Tabs } from 'ant-design-vue';
    import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
//根据labelwidth 生成labelCol
    const formProps = inject('formProps');
    const itemLabelWidthProp = useItemLabelWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'], formProps!);
    const FormItem = Form.Item;

    export default {
        components: { 
            CheckCircleOutlined, 
            Form, 
            Col, 
            SimpleFormItem, 
            Row, 
            FormItem,
            CustomDevTableItem1
        },
        mixins: [SimpleFormSetup],
        setup(props, ctx) {
            const ret = SimpleFormSetup.setup(props, ctx);
            const expose = ctx.expose;
            const activeKey1 = ref(0);
            
            return {
                activeKey1,
                ...ret
            };
        },
        computed: {
            // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
            schemaMap() {
                const schemaMap = {};
                this.getSchemas.forEach((schema) => {
                    schemaMap[schema.key] = schema;
                    if(schema.children) {
                        schema.children.forEach(sChild=>{
                           if(sChild.list){
                               sChild.list.forEach(lChild=>{
                                   schemaMap[lChild.key] = lChild;
                               });
                           } 
                        });
                    }
                });
                return schemaMap;
            }
        },
        methods: {
            getIfShow2: function (key) {
                return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
            },

            getIsShow2: function (key) {
                return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
            }
        }
    };
</script>
需要注意例子中添加了几个引用，具体可以查看源码。