98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<template>
|
|
<div class="table-box">
|
|
<el-tabs v-model="activeName" class="demo-tabs card" @tab-click="handleTabsClick" type="card">
|
|
<el-tab-pane label="基础设置" name="info"> 基础设置 </el-tab-pane>
|
|
<el-tab-pane label="表单设计器" name="form" style="height: calc(100vh - 80px)">
|
|
<EDesigner :defaultSchema="pageSchema" title="测试0001" @save="handleEDesignerSave">
|
|
<!-- <template #header-prefix>
|
|
<img src="../../assets/images/logo.png" style="width: 28px; height: 28px" />
|
|
<h3 style="margin-left: 6px">ORICO</h3>
|
|
</template> -->
|
|
</EDesigner>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="流程设计" name="process" style="height: calc(100vh - 80px)">
|
|
<FlowDesign :process="process" :fields="fields" :readOnly="readOnly"> </FlowDesign>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="审批流" name="approval" style="height: calc(100vh - 80px)"> 审批流 </el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { EDesigner } from "@/components/EpicDesigner";
|
|
import FlowDesign from "@/components/FlowDesign/index.vue";
|
|
import { transformFormConfig } from "./utils/transformFormConfig";
|
|
import { processData } from "./utils/processData";
|
|
const activeName = ref("form");
|
|
const pageSchema = ref({
|
|
schemas: [
|
|
{
|
|
type: "page",
|
|
id: "root",
|
|
children: [
|
|
{
|
|
componentProps: {
|
|
placeholder: "请输入"
|
|
},
|
|
field: "input_4wujh0i3",
|
|
input: true,
|
|
label: "输入框",
|
|
type: "input",
|
|
id: "input_4wujh0i3"
|
|
},
|
|
{
|
|
id: "epic-dept-select_qwefi7l4",
|
|
type: "input",
|
|
label: "人员选择11",
|
|
componentProps: {
|
|
placeholder: "请输入"
|
|
},
|
|
field: "epic-dept-select_qwefi7l4"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
// 是否只读
|
|
const readOnly = ref(false);
|
|
//流程设计器表单权限
|
|
const fields = ref<any[]>([]);
|
|
//标签页点击事件
|
|
const handleTabsClick = (value: any) => {
|
|
console.log(value);
|
|
};
|
|
//表单设计器保存事件(将表单设计器的数据转成流程设计器可识别的表单权限)
|
|
const handleEDesignerSave = (json: any) => {
|
|
console.log(json, "=========表单设计器数据==========");
|
|
//将表单设计器中的表单转换成流程设计器表单权限
|
|
fields.value = transformFormConfig(json.schemas);
|
|
fields.value = processData(fields.value);
|
|
console.log(fields.value, "==========过滤后的数据===========");
|
|
};
|
|
|
|
// 流程节点(默认值)
|
|
const process = ref<any>({
|
|
id: "root",
|
|
pid: undefined,
|
|
type: "start",
|
|
name: "发起人",
|
|
executionListeners: [],
|
|
formProperties: [],
|
|
next: {
|
|
id: "end",
|
|
pid: "root",
|
|
type: "end",
|
|
name: "流程结束",
|
|
executionListeners: [],
|
|
next: undefined
|
|
} as any
|
|
} as any);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.designer-page {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|