审批流模块
This commit is contained in:
203
src/views/home/index.vue
Normal file
203
src/views/home/index.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<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" :hidePreviewConfirm="true" @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">
|
||||
//pluginManager
|
||||
import { EDesigner } from "epic-designer";
|
||||
import FlowDesign from "@/views/flowDesign/index.vue";
|
||||
import type { EndNode, FlowNode, StartNode } from "@/views/flowDesign/nodes/type";
|
||||
import { transformFormConfig } from "@/utils/transformFormConfig";
|
||||
const activeName = ref("form");
|
||||
// pluginManager.hideActivitybar();
|
||||
//表单设计器数据
|
||||
const pageSchema = ref({
|
||||
schemas: [
|
||||
{
|
||||
type: "page",
|
||||
id: "root",
|
||||
children: [
|
||||
{
|
||||
componentProps: {
|
||||
placeholder: "请输入"
|
||||
},
|
||||
field: "input_4wujh0i3",
|
||||
input: true,
|
||||
label: "输入框",
|
||||
type: "input",
|
||||
id: "input_4wujh0i3"
|
||||
},
|
||||
{
|
||||
type: "epic-user-select",
|
||||
label: "用户选择",
|
||||
input: true,
|
||||
field: "epic-user-select_k31aggds",
|
||||
componentProps: {
|
||||
placeholder: "请选择用户",
|
||||
defaultValue: "錢二,姚彤,張三,王五,李五四,李五四",
|
||||
defaultValueClone: [
|
||||
{
|
||||
id: 11,
|
||||
label: "錢二",
|
||||
type: "user"
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
label: "姚彤",
|
||||
type: "user"
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: "張三",
|
||||
type: "user"
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
label: "王五",
|
||||
type: "user"
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
label: "李五四",
|
||||
type: "user"
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
label: "李五四",
|
||||
type: "user"
|
||||
}
|
||||
],
|
||||
label: "121212"
|
||||
},
|
||||
name: "UserSelector",
|
||||
id: "epic-user-select_k31aggds"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
// 是否只读
|
||||
const readOnly = ref(false);
|
||||
//流程设计器表单权限
|
||||
const fields = ref<any[]>([]);
|
||||
//标签页点击事件
|
||||
const handleTabsClick = (value: any) => {
|
||||
console.log(value);
|
||||
};
|
||||
const processData = (data: any): any => {
|
||||
// 检查是否为对象（非null且非数组）
|
||||
if (data !== null && typeof data === "object" && !Array.isArray(data)) {
|
||||
// 创建新对象避免直接修改原对象
|
||||
const newObj = { ...data };
|
||||
|
||||
// 检查id是否包含"epic-user-select"
|
||||
if (newObj.id && newObj.id.includes("epic-user-select")) {
|
||||
newObj.name = "UserSelector";
|
||||
}
|
||||
if (newObj.id && newObj.id.includes("epic-dept-select")) {
|
||||
newObj.name = "OrgSelector";
|
||||
}
|
||||
// 如果有children属性，递归处理每个子元素
|
||||
if (newObj.children && Array.isArray(newObj.children)) {
|
||||
newObj.children = newObj.children.map((child: any) => processData(child));
|
||||
}
|
||||
|
||||
return newObj;
|
||||
}
|
||||
// 如果是数组，递归处理每个元素
|
||||
else if (Array.isArray(data)) {
|
||||
return data.map(item => processData(item));
|
||||
}
|
||||
|
||||
// 非对象和非数组类型直接返回
|
||||
return data;
|
||||
};
|
||||
//表单设计器保存事件(将表单设计器的数据转成流程设计器可识别的表单权限)
|
||||
const handleEDesignerSave = (json: any) => {
|
||||
console.log(json, "=========表单设计器数据==========");
|
||||
//将表单设计器中的表单转换成流程设计器表单权限
|
||||
fields.value = transformFormConfig(json.schemas);
|
||||
fields.value = processData(fields.value);
|
||||
console.log(fields.value, "==========过滤后的数据===========");
|
||||
};
|
||||
|
||||
// 流程节点(默认值)
|
||||
const process = ref<FlowNode>({
|
||||
id: "root",
|
||||
pid: undefined,
|
||||
type: "start",
|
||||
name: "发起人",
|
||||
executionListeners: [],
|
||||
formProperties: [],
|
||||
next: {
|
||||
id: "end",
|
||||
pid: "root",
|
||||
type: "end",
|
||||
name: "流程结束",
|
||||
executionListeners: [],
|
||||
next: undefined
|
||||
} as EndNode
|
||||
} as StartNode);
|
||||
</script>
|
||||
<style scope lang="scss">
|
||||
.h-full {
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
:deep(.el-tabs__nav-scroll) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.epic-designer-main {
|
||||
height: calc(100% - 150px);
|
||||
}
|
||||
.px-10px > .epic-componet-item:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
.px-10px > .epic-componet-item:nth-child(13) {
|
||||
display: none;
|
||||
}
|
||||
.px-10px > .epic-componet-item:nth-child(14) {
|
||||
display: none;
|
||||
}
|
||||
.px-10px > .epic-componet-item:nth-child(15) {
|
||||
display: none;
|
||||
}
|
||||
.px-10px > .epic-componet-item:nth-child(16) {
|
||||
display: none;
|
||||
}
|
||||
.px-10px > .epic-componet-item:nth-child(17) {
|
||||
display: none;
|
||||
}
|
||||
.epic-tabs-box > .truncate:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
.epic-header-container {
|
||||
border: none;
|
||||
}
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.epic-edit-canvas .epic-edit-range .epic-draggable-range {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 60px;
|
||||
padding: 16px;
|
||||
border: 1px var(--epic-border-color) dashed;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user