geg-gas-web/src/views/editProVar/procVarManage/components/Form.vue

<template>
    <SimpleForm ref="systemFormRef" :formProps="data.formDataProps" :formModel="{}" :isWorkFlow="props.fromPage != FromPageType.MENU" />
</template>
<script lang="ts" setup>
    import { reactive, ref, onMounted, createVNode } from 'vue';
    import { formProps, formEventConfigs } from './config';
    import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
    import { addActRuVariable, getActRuVariable, updateActRuVariable, deleteActRuVariable } from '/@/api/editProVar/procVarManage';
    import { cloneDeep } from 'lodash-es';
    import { FormDataProps } from '/@/components/Designer/src/types';
    import { usePermission } from '/@/hooks/web/usePermission';
    import { FromPageType } from '/@/enums/workflowEnum';
    import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
    import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
    import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
    import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
    import { Modal } from 'ant-design-vue';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { useRouter } from 'vue-router';

    const router = useRouter();
    const { filterFormSchemaAuth } = usePermission();
    const RowKey = 'id';
    const emits = defineEmits(['changeUploadComponentIds', 'loadingCompleted', 'form-mounted']);
    const props = defineProps({
        fromPage: {
            type: Number,
            default: FromPageType.MENU
        }
    });
    const systemFormRef = ref();
    const data: { formDataProps: FormDataProps } = reactive({
        formDataProps: cloneDeep(formProps)
    });
    const state = reactive({
        formModel: {}
    });
    const { notification } = useMessage();
    const { t } = useI18n();

    onMounted(async () => {
        try {
            if (props.fromPage == FromPageType.MENU) {
                setMenuPermission();
                await createFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：初始化表单
                await loadFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：加载表单
            } else if (props.fromPage == FromPageType.FLOW) {
                emits('loadingCompleted'); //告诉系统表单已经加载完毕
                // loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
            } else if (props.fromPage == FromPageType.PREVIEW) {
                // 预览 无需权限，表单事件也无需执行
            } else if (props.fromPage == FromPageType.DESKTOP) {
                // 桌面设计 表单事件需要执行
                emits('loadingCompleted'); //告诉系统表单已经加载完毕
                await createFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：初始化表单
                await loadFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：加载表单
            }
            emits('form-mounted', formProps);
        } catch (error) {}
    });

    // 根据菜单页面权限，设置表单属性（必填，禁用，显示）
    function setMenuPermission() {
        data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
    }

    // 校验form 通过返回表单数据
    async function validate() {
        let values = [];
        try {
            values = await systemFormRef.value?.validate();
            //添加隐藏组件
            if (data.formDataProps.hiddenComponent?.length) {
                data.formDataProps.hiddenComponent.forEach((component) => {
                    values[component.bindField] = component.value;
                });
            }
        } finally {
        }
        return values;
    }

    // 根据行唯一ID查询行数据，并设置表单数据   【编辑】
    async function setFormDataFromId(rowId, skipUpdate) {
        try {
            const currentRoute = router.currentRoute.value;
            const queryParams = currentRoute.query;
            let reqParam = {
                name: queryParams.name,
                type: queryParams.type,
                value: queryParams.value,
                processId: queryParams.processId
            };
            const record = await getActRuVariable(reqParam);
            if (skipUpdate) {
                return record;
            }
            reqParam.value = record;
            setFieldsValue(reqParam);
            state.formModel = reqParam;
            await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
            return reqParam;
        } catch (error) {}
    }

    // 辅助设置表单数据
    function setFieldsValue(record) {
        systemFormRef.value.setFieldsValue(record);
    }

    // 重置表单数据
    async function resetFields() {
        await systemFormRef.value.resetFields();
    }

    //  设置表单数据全部为Disabled  【查看】
    async function setDisabledForm(isDisabled) {
        data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas), isDisabled);
    }

    // 获取行键值
    function getRowKey() {
        return RowKey;
    }

    // 更新api表单数据
    async function update({ values, rowId }) {
        try {
            let res = systemFormRef.value.getFieldsValue();
            debugger;
            let saveVal = await updateActRuVariable(res);
            await submitFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：提交表单
            return saveVal;
        } catch (error) {}
    }

    // 新增api表单数据
    async function add(values) {
        try {
            state.formModel = values;
            let saveVal = await addActRuVariable(values);
            await submitFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：提交表单
            return saveVal;
        } catch (error) {}
    }

    // 根据工作流页面权限，设置表单属性（必填，禁用，显示）
    async function setWorkFlowForm(obj: WorkFlowFormParams) {
        try {
            let flowData = changeWorkFlowForm(cloneDeep(formProps), obj);
            let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
            data.formDataProps = buildOptionJson;
            emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
            if (isViewProcess) {
                setDisabledForm(); //查看
            }
            state.formModel = formModels;
            if (formModels[RowKey]) {
                setFormDataFromId(formModels[RowKey], false);
            } else {
                setFieldsValue(formModels);
            }
        } catch (error) {}
        await createFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：初始化表单
        await loadFormEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：加载表单
    }

    // 详情页删除功能
    function handleDelete(record: Recordable) {
        deleteList([record]);
    }

    function deleteList(ids) {
        Modal.confirm({
            title: '提示信息',
            icon: createVNode(ExclamationCircleOutlined),
            content: '是否确认删除？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
                deleteActRuVariable(ids).then((_) => {
                    notification.success({
                        message: '提示',
                        description: t('删除成功！')
                    });
                });
            },
            onCancel() {}
        });
    }

    defineExpose({
        setFieldsValue,
        resetFields,
        validate,
        add,
        update,
        setFormDataFromId,
        setDisabledForm,
        setMenuPermission,
        setWorkFlowForm,
        getRowKey,
        handleDelete
    });
</script>