geg-gas-web/src/views/formChange/formChangeLog/components/CustomDevForm.vue

<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">
          <!-- 业务表单id  -->

    <Col v-if="getIfShow2('2b23009bb6be47d9bd60ffa7b928e3d3')" v-show="getIsShow2('2b23009bb6be47d9bd60ffa7b928e3d3')" :span="getColWidth(schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3'])">
        <template v-if="showComponent(schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3'])">
            <SimpleFormItem v-model:value="formModel[schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3']" />
        </template>
    </Col>
    <!-- 关联的业务数据id  -->

    <Col v-if="getIfShow2('ae02eb3114b24e0184df37f394394f2b')" v-show="getIsShow2('ae02eb3114b24e0184df37f394394f2b')" :span="getColWidth(schemaMap['ae02eb3114b24e0184df37f394394f2b'])">
        <template v-if="showComponent(schemaMap['ae02eb3114b24e0184df37f394394f2b'])">
            <SimpleFormItem v-model:value="formModel[schemaMap['ae02eb3114b24e0184df37f394394f2b'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['ae02eb3114b24e0184df37f394394f2b']" />
        </template>
    </Col>
    <!-- 变更人的ip地址  -->

    <Col v-if="getIfShow2('d6f4b7d9678a4e968a3107a5c610e48f')" v-show="getIsShow2('d6f4b7d9678a4e968a3107a5c610e48f')" :span="getColWidth(schemaMap['d6f4b7d9678a4e968a3107a5c610e48f'])">
        <template v-if="showComponent(schemaMap['d6f4b7d9678a4e968a3107a5c610e48f'])">
            <SimpleFormItem v-model:value="formModel[schemaMap['d6f4b7d9678a4e968a3107a5c610e48f'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['d6f4b7d9678a4e968a3107a5c610e48f']" />
        </template>
    </Col>
    <!-- 变更原因  -->

    <Col v-if="getIfShow2('6305f47c32214c14b60efac51758e47c')" v-show="getIsShow2('6305f47c32214c14b60efac51758e47c')" :span="getColWidth(schemaMap['6305f47c32214c14b60efac51758e47c'])">
        <template v-if="showComponent(schemaMap['6305f47c32214c14b60efac51758e47c'])">
            <SimpleFormItem v-model:value="formModel[schemaMap['6305f47c32214c14b60efac51758e47c'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['6305f47c32214c14b60efac51758e47c']" />
        </template>
    </Col>
    <!-- 变更版本号  -->

    <Col v-if="getIfShow2('6ea6d70beac740dfb44e5b4dae8a5f92')" v-show="getIsShow2('6ea6d70beac740dfb44e5b4dae8a5f92')" :span="getColWidth(schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92'])">
        <template v-if="showComponent(schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92'])">
            <SimpleFormItem v-model:value="formModel[schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92']" />
        </template>
    </Col>
    
           <div :style="{ textAlign: getProps.buttonLocation }">
                <slot name="buttonBefore"></slot>
                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
                    {{ t('提交') }}
                </a-button>
                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
                    {{ t('重置') }}
                </a-button>
                <slot name="buttonAfter"></slot>
            </div>
        </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';
    

    const FormItem = Form.Item;

    export default {
        components: { 
            CheckCircleOutlined, 
            Form, 
            Col, 
            SimpleFormItem, 
            Row, 
            FormItem
             
        },
        mixins: [SimpleFormSetup],
        setup(props, ctx) {
            const ret = SimpleFormSetup.setup(props, ctx);
            const expose = ctx.expose;
            
            
            return {
                
                ...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]);
            },

            getTabProps(key) {
                const schema = this.schemaMap[key];
                return {
                    size: schema.componentProps.tabSize,
                    tabPosition: schema.componentProps.tabPosition,
                    type: schema.componentProps.type
                }
            },
            
            getTdStyle(tdElement) {
                return {
                    height: tdElement.height ? tdElement.height + 'px' : '',
                    minHeight: (tdElement.height || '42') + 'px',
                    overflow: 'hidden',
                    padding: '10px'
                }
            }
        }
    };
</script>