PC端设计

默认情况下的显示/隐藏设计

以默认的组件封装为例，我们可以看到3个控制显隐的部分

<template>
    <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
        <template v-if="showComponent(schema) && schema.type !== 'slot'">
            <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
        </template>
    </Col>
</template>

showComponent是某些特殊组件的显隐控制，和组件类型有关，目前只有2个用到该值，一个是隐藏字段，一个是在非流程中隐藏审批意见字段。

而getIfShow和getIsShow的逻辑完全相同，都是判断ifShow和isShow（读的是show）的值，这两个值可以是bool也可以是函数，区别是：

isShow是直接控制表单字段显隐的属性，无需流程绑定，可以在表单编辑器配置，也可以在config.ts里修改
ifShow是用于框架内部逻辑，是的，全开的内置页面（包括系统设置、权限管理等）也使用同样的封装逻辑，假如内置页面需要某些字段在特定时候才能修改，就会使用ifShow字段

对于流程绑定的显隐是show字段，这个字段由useWorkflowForm将流程节点配置的view参数转化得到，这里你也可以看到，流程通过dynamicDisabled字段控制只读编辑：

function getSchemePermissionItem() {
    if (permissionConfig) {
        //查看
        schema.show = permissionConfig.view;
        // 无用代码省略
        if (isViewProcess) {
            schema.dynamicDisabled = true;
        }
    } else {
        schema.show = false;
        schema.dynamicDisabled = true;
    }
}

在SimpleFormItem里会读取这个show参数：

function getShow(schema: FormSchema): boolean {
    const { show } = schema;
    let isIfShow = true;

    if (isBoolean(show)) {
        isIfShow = show;
    }
    return isIfShow;
}

注意show的优先级大于isShow，这点从代码可以看出来，getIsShow函数中，如果show有值会覆盖掉isShow的值。

二开控制显隐

对于拆分后的代码，所有字段都是Col和SimpleFormItem，因此直接使用v-show控制显隐即可。对于非拆分的字段，可以复写配置的ifShow，注意以配置文件复写的ifShow在外层，和key同级：

// 无关属性省略
const field = {
    key: '044e8bc1f9c345e0afa024ed7f21fe50',
    field: 'duoXingWenBen3343',
    label: '多行文本',
    type: 'textarea',
    // 四个参数分别为当前字段值、整个页面的model、当前字段配置、当前字段名
    ifShow: function ({values, model, schema, field}) {
        return model.danXingWenBen23227?.length > 10;
    }
}

如果被控制的组件位于tab、grid等嵌套组件内，我们建议直接拆分后二开，对于非拆分二开，这里提供个思路：

function getIsShow(schema: FormSchema): boolean {
    const { componentProps, show } = schema as any;
    let isShow = true;
    if (isBoolean(componentProps?.isShow)) {
        isShow = componentProps.isShow;
    } else if (typeof componentProps?.isShow === 'function') {
        // 支持isShow的函数格式，这里的formModel为响应式，可以拿到表单的动态值
        isShow = componentProps.isShow(formModel);
    }
    if (isBoolean(show)) {
        // 要求show和isShow同时为真才显示
        isShow = show && isShow;
    }
    return isShow;
}

这样就可以将isShow改为函数，动态计算显隐状态。

移动端设计

移动端组件显隐逻辑基本与PC端一致，不再赘述。