236 lines
8.5 KiB
Vue
236 lines
8.5 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,
|
|||
|
|
processInstId: 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: 'Tip',
|
|||
|
|
description: t('删除成功！'),
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onCancel() {
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
setFieldsValue,
|
|||
|
|
resetFields,
|
|||
|
|
validate,
|
|||
|
|
add,
|
|||
|
|
update,
|
|||
|
|
setFormDataFromId,
|
|||
|
|
setDisabledForm,
|
|||
|
|
setMenuPermission,
|
|||
|
|
setWorkFlowForm,
|
|||
|
|
getRowKey,
|
|||
|
|
handleDelete
|
|||
|
|
});
|
|||
|
|
</script>
|