初始版本提交
This commit is contained in:
yaoyn
7
src/components/SystemForm/index.ts
Normal file
7
src/components/SystemForm/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { withInstall } from '/@/utils';
|
||||
import FormVue from './src/Form.vue';
|
||||
import DesktopFormVue from './src/DesktopForm.vue';
|
||||
import PreviewSystemFormVue from './src/Preview.vue';
|
||||
export const SystemForm = withInstall(FormVue);
|
||||
export const DesktopForm = withInstall(DesktopFormVue);
|
||||
export const PreviewSystemForm = withInstall(PreviewSystemFormVue);
|
||||
87
src/components/SystemForm/src/DesktopForm.vue
Normal file
87
src/components/SystemForm/src/DesktopForm.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<component
|
||||
:is="componentName"
|
||||
ref="SystemFormRef"
|
||||
:fromPage="FromPageType.DESKTOP"
|
||||
@loadingCompleted="loadingCompleted"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, defineAsyncComponent, reactive } from 'vue';
|
||||
import { FromPageType } from '/@/enums/workflowEnum';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
systemComponent: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
functionalModule: '',
|
||||
functionName: '',
|
||||
functionFormName: '',
|
||||
};
|
||||
},
|
||||
},
|
||||
formModel: {
|
||||
type: Object,
|
||||
},
|
||||
});
|
||||
const SystemFormRef = ref();
|
||||
const dataConfig = reactive({
|
||||
PkKey: '',
|
||||
PKValue: '',
|
||||
formModel: {},
|
||||
});
|
||||
const componentName = computed(() => {
|
||||
if (!props.systemComponent.functionName) {
|
||||
return defineAsyncComponent({
|
||||
loader: () => import('./Empty.vue'),
|
||||
});
|
||||
}
|
||||
return defineAsyncComponent({
|
||||
loader: () =>
|
||||
import(
|
||||
`./../../../views/${props.systemComponent.functionalModule}/${props.systemComponent.functionName}/components/Form.vue`
|
||||
),
|
||||
});
|
||||
});
|
||||
function loadingCompleted() {
|
||||
dataConfig.PkKey = SystemFormRef.value.getRowKey();
|
||||
if (props.formModel) dataConfig.PKValue = props.formModel[dataConfig.PkKey];
|
||||
if (dataConfig.PKValue) {
|
||||
SystemFormRef.value.setFormDataFromId(dataConfig.PKValue);
|
||||
}
|
||||
}
|
||||
async function submit() {
|
||||
let saveValId = '';
|
||||
let values = await SystemFormRef.value.validate();
|
||||
let rowKey = SystemFormRef.value.getRowKey();
|
||||
if (dataConfig.PKValue) {
|
||||
let rowId = dataConfig.PKValue;
|
||||
// 编辑
|
||||
await SystemFormRef.value.update({ values, rowId });
|
||||
saveValId = values[rowKey];
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('编辑成功！'),
|
||||
}); //提示消息
|
||||
} else {
|
||||
// 新增
|
||||
saveValId = await SystemFormRef.value.add(values);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('新增成功！'),
|
||||
}); //提示消息
|
||||
}
|
||||
return saveValId;
|
||||
}
|
||||
defineExpose({
|
||||
submit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
7
src/components/SystemForm/src/Empty.vue
Normal file
7
src/components/SystemForm/src/Empty.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div> 数据缺失 </div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
213
src/components/SystemForm/src/Form.vue
Normal file
213
src/components/SystemForm/src/Form.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div v-if="visible">
|
||||
<component
|
||||
:is="componentName"
|
||||
v-if="visible"
|
||||
ref="SystemFormRef"
|
||||
:fromPage="FromPageType.FLOW"
|
||||
@loadingCompleted="loadingCompleted"
|
||||
@changeUploadComponentIds="changeUploadComponentIds"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<SimpleForm
|
||||
class="form-box"
|
||||
ref="SystemFormRef"
|
||||
:formProps="formProps"
|
||||
:formModel="workflowConfig.formModel"
|
||||
:isWorkFlow="true"
|
||||
:isCamelCase="true"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, defineAsyncComponent, reactive } from 'vue';
|
||||
import { FromPageType } from '/@/enums/workflowEnum';
|
||||
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
||||
import { GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { createFormEvent, loadFormEvent } from '/@/hooks/web/useFormEvent';
|
||||
import { changeFormJson } from '/@/hooks/web/useWorkFlowForm';
|
||||
|
||||
const props = defineProps({
|
||||
systemComponent: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
functionalModule: '',
|
||||
functionName: '',
|
||||
functionFormName: '',
|
||||
};
|
||||
},
|
||||
},
|
||||
workflowConfig: {
|
||||
//工作流表单配置
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
formName: '',
|
||||
formProps: {},
|
||||
formModel: {},
|
||||
formKey: '',
|
||||
validate: true,
|
||||
workflowPermissions: [],
|
||||
opinions: [],
|
||||
opinionsComponents: [],
|
||||
formJson: [],
|
||||
};
|
||||
},
|
||||
},
|
||||
isViewProcess: {
|
||||
//是否查看表单
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const SystemFormRef = ref();
|
||||
const visible = ref(false);
|
||||
const formProps = ref({});
|
||||
const flowConfig = reactive({
|
||||
draftsFormData: {},
|
||||
uploadComponentIds: [], // 所有上传文件的文件夹id 【因为流程需要统计每个节点的附件汇总】
|
||||
isOldSystem: false,
|
||||
});
|
||||
const componentName = computed(() => {
|
||||
if (!props.systemComponent.functionName) {
|
||||
return defineAsyncComponent({
|
||||
loader: () => import('./Empty.vue'),
|
||||
});
|
||||
}
|
||||
return defineAsyncComponent({
|
||||
loader: () =>
|
||||
import(
|
||||
`./../../../views/${props.systemComponent.functionalModule}/${props.systemComponent.functionName}/components/Form.vue`
|
||||
),
|
||||
onError: async function () {
|
||||
flowConfig.isOldSystem = true;
|
||||
const {
|
||||
formJson: newJson,
|
||||
formModel,
|
||||
formKey,
|
||||
workflowPermissions,
|
||||
opinions,
|
||||
opinionsComponents,
|
||||
} = props.workflowConfig;
|
||||
const model = JSON.parse(newJson) as GeneratorConfig;
|
||||
const { formJson, formEventConfig } = model;
|
||||
if (formEventConfig) {
|
||||
// forms.formEventConfigs.push(formEventConfig);
|
||||
|
||||
//初始化表单
|
||||
await createFormEvent(formEventConfig, formModel, true);
|
||||
//加载表单
|
||||
await loadFormEvent(formEventConfig, formModel, true);
|
||||
|
||||
//TODO 暂不放开 工作流没有获取表单数据这个步骤 获取表单数据
|
||||
// getFormDataEvent(formEventConfig, formModels,true);
|
||||
}
|
||||
|
||||
let isViewProcess = props.isViewProcess;
|
||||
let { buildOptionJson, uploadComponentIds } = changeFormJson(
|
||||
{
|
||||
formJson,
|
||||
formConfigChildren: workflowPermissions,
|
||||
formConfigKey: formKey,
|
||||
opinions: opinions,
|
||||
opinionsComponents: opinionsComponents,
|
||||
},
|
||||
isViewProcess,
|
||||
flowConfig.uploadComponentIds,
|
||||
);
|
||||
flowConfig.uploadComponentIds = uploadComponentIds;
|
||||
if (buildOptionJson.schemas) {
|
||||
formProps.value = buildOptionJson;
|
||||
}
|
||||
visible.value = false;
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
visible.value = true;
|
||||
});
|
||||
|
||||
//
|
||||
function loadingCompleted() {
|
||||
SystemFormRef.value.setWorkFlowForm({
|
||||
formConfigChildren: props.workflowConfig.workflowPermissions,
|
||||
formConfigKey: props.workflowConfig.formKey,
|
||||
opinions: props.workflowConfig.opinions,
|
||||
opinionsComponents: props.workflowConfig.opinionsComponents,
|
||||
isViewProcess: props.isViewProcess,
|
||||
uploadIds: flowConfig.uploadComponentIds,
|
||||
formModels: props.workflowConfig.formModel,
|
||||
});
|
||||
|
||||
// 草稿箱处理
|
||||
if (
|
||||
'{}' == JSON.stringify(props.workflowConfig.formModel) &&
|
||||
'{}' != JSON.stringify(flowConfig.draftsFormData)
|
||||
) {
|
||||
SystemFormRef.value.setFieldsValue(flowConfig.draftsFormData);
|
||||
}
|
||||
}
|
||||
function changeUploadComponentIds(ids) {
|
||||
flowConfig.uploadComponentIds = ids;
|
||||
}
|
||||
function validate() {
|
||||
return SystemFormRef.value.validate();
|
||||
}
|
||||
function getRowKey() {
|
||||
return SystemFormRef.value.getRowKey();
|
||||
}
|
||||
function getUploadComponentIds() {
|
||||
return flowConfig.uploadComponentIds;
|
||||
}
|
||||
function getIsOldSystem() {
|
||||
return flowConfig.isOldSystem;
|
||||
}
|
||||
async function setFieldsValue(record) {
|
||||
flowConfig.draftsFormData = record;
|
||||
}
|
||||
async function workflowSubmit() {
|
||||
let values = {};
|
||||
try {
|
||||
values = await SystemFormRef.value.validate();
|
||||
// 提交表单
|
||||
if (visible.value) {
|
||||
let id = await submit();
|
||||
let rowKey = getRowKey();
|
||||
values[rowKey] = id;
|
||||
}
|
||||
|
||||
return values;
|
||||
} catch (error) {}
|
||||
}
|
||||
async function submit() {
|
||||
let saveValId = '';
|
||||
let values = await SystemFormRef.value.validate();
|
||||
let rowKey = getRowKey();
|
||||
if (props.workflowConfig.formModel[rowKey]) {
|
||||
values[rowKey] = props.workflowConfig.formModel[rowKey];
|
||||
}
|
||||
if (values[rowKey]) {
|
||||
// 编辑
|
||||
await SystemFormRef.value.update({ values, rowId: values[rowKey] });
|
||||
saveValId = values[rowKey];
|
||||
} else {
|
||||
// 新增
|
||||
saveValId = await SystemFormRef.value.add(values);
|
||||
}
|
||||
return saveValId;
|
||||
}
|
||||
defineExpose({
|
||||
workflowSubmit,
|
||||
getRowKey,
|
||||
validate,
|
||||
getUploadComponentIds,
|
||||
setFieldsValue,
|
||||
getIsOldSystem,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
51
src/components/SystemForm/src/Preview.vue
Normal file
51
src/components/SystemForm/src/Preview.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div v-if="visible" class="preview-box">
|
||||
<component
|
||||
:is="componentName"
|
||||
v-if="visible"
|
||||
ref="SystemForm"
|
||||
:fromPage="FromPageType.PREVIEW"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, defineAsyncComponent } from 'vue';
|
||||
import { FromPageType } from '/@/enums/workflowEnum';
|
||||
const props = defineProps({
|
||||
systemComponent: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
functionalModule: '',
|
||||
functionName: '',
|
||||
functionFormName: '',
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
const visible = ref(false);
|
||||
const componentName = computed(() => {
|
||||
if (!props.systemComponent.functionName) {
|
||||
return defineAsyncComponent({
|
||||
loader: () => import('./Empty.vue'),
|
||||
});
|
||||
}
|
||||
return defineAsyncComponent({
|
||||
loader: () =>
|
||||
import(
|
||||
`./../../../views/${props.systemComponent.functionalModule}/${props.systemComponent.functionName}/components/Form.vue`
|
||||
),
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
visible.value = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview-box {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user