207 lines
8.2 KiB
Vue
207 lines
8.2 KiB
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>
|