yx lin
3 years ago
committed by
GitHub
GitHub
19 changed files with 2420 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||
|
import ProcessDesign from './src/components/ProcessDesign.vue'; |
||||
|
|
||||
|
export { ProcessDesign }; |
||||
@ -0,0 +1,45 @@ |
|||||
|
<template> |
||||
|
<div |
||||
|
:class="{'line': row === 1, 'lines': row > 1}" |
||||
|
:title="hoverTip ? content: ''" |
||||
|
:style="{'--row':row}" |
||||
|
> |
||||
|
<slot name="pre"></slot> |
||||
|
{{ content }} |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
|
||||
|
defineProps({ |
||||
|
row: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
hoverTip:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
content:{ |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.line{ |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.lines{ |
||||
|
display: -webkit-box; |
||||
|
word-break: break-all; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-webkit-line-clamp: var(--row); |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,115 @@ |
|||||
|
<template> |
||||
|
<Popover placement="bottomLeft" title="添加流程节点" width="350" trigger="click"> |
||||
|
<template #content> |
||||
|
<div class="node-select"> |
||||
|
<div @click="addApprovalNode"> |
||||
|
<CheckOutlined class="icon" style="color:rgb(255, 148, 62);" /> |
||||
|
<span>审批人</span> |
||||
|
</div> |
||||
|
<div @click="addCcNode"> |
||||
|
<SendOutlined class="icon" style="color:rgb(50, 150, 250);" /> |
||||
|
<span>抄送人</span> |
||||
|
</div> |
||||
|
<div @click="addConditionsNode"> |
||||
|
<ShareAltOutlined class="icon" style="color:rgb(21, 188, 131);" /> |
||||
|
<span>条件分支</span> |
||||
|
</div> |
||||
|
<div @click="addConcurrentsNode"> |
||||
|
<ThunderboltOutlined class="icon" style="color:#718dff;" /> |
||||
|
<span>并行分支</span> |
||||
|
</div> |
||||
|
<div @click="addDelayNode"> |
||||
|
<ClockCircleOutlined class="icon" style="color:#f25643;" /> |
||||
|
<span>延迟等待</span> |
||||
|
</div> |
||||
|
<div @click="addTriggerNode"> |
||||
|
<SettingOutlined class="icon" style="color:#15BC83;" /> |
||||
|
<span>触发器</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<Button type="primary" size="small" shape="circle"> |
||||
|
<template #icon> |
||||
|
<PlusOutlined /> |
||||
|
</template> |
||||
|
</Button> |
||||
|
</Popover> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
//import { computed } from 'vue'; |
||||
|
import { Button, Popover } from 'ant-design-vue'; |
||||
|
import { |
||||
|
CheckOutlined, |
||||
|
SendOutlined, |
||||
|
ShareAltOutlined, |
||||
|
ThunderboltOutlined, |
||||
|
ClockCircleOutlined, |
||||
|
SettingOutlined, |
||||
|
PlusOutlined, |
||||
|
} from '@ant-design/icons-vue'; |
||||
|
//import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
||||
|
|
||||
|
const emits = defineEmits(['insertNode']); |
||||
|
|
||||
|
//const flowStore = useFlowStoreWithOut(); |
||||
|
|
||||
|
// const selectedNode = computed(() => { |
||||
|
// return flowStore.selectedNode; |
||||
|
// }); |
||||
|
|
||||
|
function addApprovalNode() { |
||||
|
emits('insertNode', "APPROVAL"); |
||||
|
} |
||||
|
|
||||
|
function addCcNode() { |
||||
|
emits('insertNode', "CC"); |
||||
|
} |
||||
|
|
||||
|
function addDelayNode() { |
||||
|
emits('insertNode', "DELAY"); |
||||
|
} |
||||
|
|
||||
|
function addConditionsNode() { |
||||
|
emits('insertNode', "CONDITIONS"); |
||||
|
} |
||||
|
|
||||
|
function addConcurrentsNode() { |
||||
|
emits('insertNode', "CONCURRENTS"); |
||||
|
} |
||||
|
|
||||
|
function addTriggerNode() { |
||||
|
emits('insertNode', "TRIGGER"); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.node-select{ |
||||
|
div{ |
||||
|
display: inline-block; |
||||
|
margin: 5px 5px; |
||||
|
cursor: pointer; |
||||
|
padding: 10px 15px; |
||||
|
border: 1px solid #F8F9F9; |
||||
|
background-color: #F8F9F9; |
||||
|
border-radius: 10px; |
||||
|
width: 130px; |
||||
|
position: relative; |
||||
|
span{ |
||||
|
position: absolute; |
||||
|
left: 65px; |
||||
|
top: 18px; |
||||
|
} |
||||
|
&:hover{ |
||||
|
background-color: #fff; |
||||
|
box-shadow: 0 0 8px 2px #d6d6d6; |
||||
|
} |
||||
|
icon{ |
||||
|
font-size: 25px; |
||||
|
padding: 5px; |
||||
|
border: 1px solid #dedfdf; |
||||
|
border-radius: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,45 @@ |
|||||
|
<template> |
||||
|
<div style="margin-top: 10px"> |
||||
|
<template v-for="(org, index) in _value" > |
||||
|
<Tag class="org-item" closable @close="removeOrgItem(index)"> |
||||
|
<template #icon> |
||||
|
<InfoOutlined v-if="org.type !== 'dept'" /> |
||||
|
</template> |
||||
|
{{ org.name }} |
||||
|
</Tag> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed } from 'vue'; |
||||
|
import { Tag } from 'ant-design-vue'; |
||||
|
import { InfoOutlined } from '@ant-design/icons-vue'; |
||||
|
|
||||
|
const emits = defineEmits(['input']); |
||||
|
const props = defineProps({ |
||||
|
value: { |
||||
|
type: Array as PropType<any[]>, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const _value = computed({ |
||||
|
get: () => props.value, |
||||
|
set: (val) => { |
||||
|
emits('input', val); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
function removeOrgItem(index) { |
||||
|
_value.value.splice(index, 1) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.org-item{ |
||||
|
margin: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<Layout class="main"> |
||||
|
<div class="scale"> |
||||
|
<Button class="button" size="small" @click="state.scale += 10" :disabled="state.scale >= 150" shape="circle"> |
||||
|
<template #icon> |
||||
|
<PlusOutlined /> |
||||
|
</template> |
||||
|
</Button> |
||||
|
<span>{{ state.scale }}%</span> |
||||
|
<Button class="button" size="small" @click="state.scale -= 10" :disabled="state.scale <= 40" shape="circle"> |
||||
|
<template #icon> |
||||
|
<MinusOutlined /> |
||||
|
</template> |
||||
|
</Button> |
||||
|
<!-- <Button @click="validate">校验流程</Button> --> |
||||
|
</div> |
||||
|
<div class="design" :style="'transform: scale('+ state.scale / 100 +');'"> |
||||
|
<ProcessTree ref="processTreeRef" @selectedNode="nodeSelected"/> |
||||
|
</div> |
||||
|
<Drawer |
||||
|
:title="selectedNode.name" |
||||
|
:visible="state.showConfig" |
||||
|
destroy-on-close |
||||
|
@close="() => state.showConfig = false" |
||||
|
> |
||||
|
<div slot="title"> |
||||
|
<Input |
||||
|
v-model="selectedNode.name" |
||||
|
size="small" |
||||
|
v-show="state.showInput" |
||||
|
style="width: 300px" |
||||
|
@blur="state.showInput = false" |
||||
|
> |
||||
|
</Input> |
||||
|
</div> |
||||
|
<div class="node-config-content"> |
||||
|
</div> |
||||
|
</Drawer> |
||||
|
</Layout> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive, ref, unref, onMounted } from 'vue'; |
||||
|
import { Button, Drawer, Input, Layout } from 'ant-design-vue'; |
||||
|
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'; |
||||
|
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
||||
|
import ProcessTree from './process/ProcessTree.vue'; |
||||
|
|
||||
|
const flowStore = useFlowStoreWithOut(); |
||||
|
const state = reactive({ |
||||
|
scale: 100, |
||||
|
selected: {} as any, |
||||
|
showInput: false, |
||||
|
showConfig: false, |
||||
|
}); |
||||
|
const processTreeRef = ref<any>(); |
||||
|
const selectedNode = computed(() => flowStore.selectedNode); |
||||
|
|
||||
|
onMounted(loadInitFrom); |
||||
|
|
||||
|
function loadInitFrom() { |
||||
|
flowStore.loadForm({ |
||||
|
formId: null, |
||||
|
formName: "未命名表单", |
||||
|
logo: { |
||||
|
icon: "home", |
||||
|
background: "#1e90ff" |
||||
|
}, |
||||
|
settings: { |
||||
|
commiter: [], |
||||
|
admin: [], |
||||
|
sign: false, |
||||
|
notify: { |
||||
|
types: ["APP"], |
||||
|
title: "消息通知标题" |
||||
|
} |
||||
|
}, |
||||
|
groupId: undefined, |
||||
|
formItems:[], |
||||
|
process: { |
||||
|
id: "root", |
||||
|
parentId: null, |
||||
|
type: "ROOT", |
||||
|
name: "发起人", |
||||
|
desc: "任何人", |
||||
|
props: { |
||||
|
assignedUser: [], |
||||
|
formPerms: [] |
||||
|
}, |
||||
|
children: {} |
||||
|
}, |
||||
|
remark: "备注说明" |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function validate(){ |
||||
|
const processTree = unref(processTreeRef); |
||||
|
return processTree?.validateProcess() |
||||
|
} |
||||
|
|
||||
|
function nodeSelected(node){ |
||||
|
console.log('配置节点', node) |
||||
|
state.showConfig = true |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.main { |
||||
|
background: white; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.design { |
||||
|
margin-top: 100px; |
||||
|
display: flex; |
||||
|
transform-origin: 50% 0px 0px; |
||||
|
} |
||||
|
|
||||
|
.scale { |
||||
|
z-index: 999; |
||||
|
position: fixed; |
||||
|
top: 80px; |
||||
|
right: 40px; |
||||
|
|
||||
|
.button { |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 15px; |
||||
|
color: #7a7a7a; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-config-content{ |
||||
|
padding: 0 20px 20px; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-drawer__body){ |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,45 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<p class="desc">选择能发起该审批的人员/部门，不选则默认开放给所有人</p> |
||||
|
<Button size="small" @click="selectOrg" type="primary" round>请选择</Button> |
||||
|
<OrgItems v-model="select"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive } from 'vue'; |
||||
|
import { Button } from 'ant-design-vue'; |
||||
|
import OrgItems from "../OrgItems.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: ()=>{ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const select = computed(() => { |
||||
|
return props.config.assignedUser; |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
showOrgSelect: false, |
||||
|
}); |
||||
|
|
||||
|
function selectOrg() { |
||||
|
console.log(selectOrg); |
||||
|
} |
||||
|
|
||||
|
function selected(sel: any) { |
||||
|
select.value.length = 0; |
||||
|
select.value.forEach(val => sel.push(val)); |
||||
|
} |
||||
|
|
||||
|
function removeOrgItem(index: number){ |
||||
|
select.value.splice(index, 1); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<Form label-position="top" label-width="90px"> |
||||
|
<FormItem label="选择触发的动作" prop="text" class="user-type"> |
||||
|
<RadioGroup v-model="config.type"> |
||||
|
<Radio label="WEBHOOK">发送网络请求</Radio> |
||||
|
<Radio label="EMAIL">发送邮件</Radio> |
||||
|
</RadioGroup> |
||||
|
</FormItem> |
||||
|
<div v-if="config.type === 'WEBHOOK'"> |
||||
|
<FormItem label="请求地址" prop="text"> |
||||
|
<Input placeholder="请输入URL地址" size="middle" v-model="config.http.url" > |
||||
|
<Select v-model="config.http.method" style="width: 85px;" slot="prepend" placeholder="URL"> |
||||
|
<Option label="GET" value="GET"></Option> |
||||
|
<Option label="POST" value="POST"></Option> |
||||
|
<Option label="PUT" value="PUT"></Option> |
||||
|
<Option label="DELETE" value="DELETE"></Option> |
||||
|
</Select> |
||||
|
</Input> |
||||
|
</FormItem> |
||||
|
<FormItem label="Header请求头" prop="text"> |
||||
|
<div slot="label"> |
||||
|
<span style="margin-right: 10px">Header请求头</span> |
||||
|
<Button type="text" @click="addItem(config.http.headers)"> + 添加</Button> |
||||
|
</div> |
||||
|
<div v-for="(header, index) in config.http.headers" :key="header.name"> |
||||
|
- <Input placeholder="参数名" size="small" style="width: 100px;" v-model="header.name" /> |
||||
|
<RadioGroup size="small" style="margin: 0 5px;" v-model="header.isField"> |
||||
|
<RadioButton :label="true">表单</RadioButton> |
||||
|
<RadioButton :label="false">固定</RadioButton> |
||||
|
</RadioGroup> |
||||
|
<Select v-if="header.isField" style="width: 180px;" v-model="header.value" size="small" placeholder="请选择表单字段"> |
||||
|
<Option v-for="form in forms" :key="form.id" :label="form.title" :value="form.title"></Option> |
||||
|
</Select> |
||||
|
<Input v-else placeholder="请设置字段值" size="small" v-model="header.value" style="width: 180px;"/> |
||||
|
<DeleteOutlined @click="delItem(config.http.headers, index)" style="margin-left: 5px; color: #c75450; cursor: pointer"/> |
||||
|
</div> |
||||
|
</FormItem> |
||||
|
<FormItem label="Header请求参数" prop="text"> |
||||
|
<div slot="label"> |
||||
|
<span style="margin-right: 10px">Header请求参数 </span> |
||||
|
<Button style="margin-right: 20px" type="text" @click="addItem(config.http.params)"> + 添加</Button> |
||||
|
<span>参数类型 - </span> |
||||
|
<RadioGroup size="small" style="margin: 0 5px;" v-model="config.http.contentType"> |
||||
|
<RadioButton label="JSON">json</RadioButton> |
||||
|
<RadioButton label="FORM">form</RadioButton> |
||||
|
</RadioGroup> |
||||
|
</div> |
||||
|
<div v-for="(param, index) in config.http.params" :key="param.name"> |
||||
|
- <Input placeholder="参数名" size="small" style="width: 100px;" v-model="param.name" /> |
||||
|
<RadioGroup size="small" style="margin: 0 5px;" v-model="param.isField"> |
||||
|
<RadioButton :label="true">表单</RadioButton> |
||||
|
<RadioButton :label="false">固定</RadioButton> |
||||
|
</RadioGroup> |
||||
|
<Select v-if="param.isField" style="width: 180px;" v-model="param.value" size="small" placeholder="请选择表单字段"> |
||||
|
<Option v-for="form in forms" :key="form.id" :label="form.title" :value="form.title"></Option> |
||||
|
</Select> |
||||
|
<Input v-else placeholder="请设置字段值" size="small" v-model="param.value" style="width: 180px;"/> |
||||
|
<DeleteOutlined @click="delItem(config.http.params, index)" style="margin-left: 5px; color: #c75450; cursor: pointer"/> |
||||
|
</div> |
||||
|
<div> |
||||
|
|
||||
|
</div> |
||||
|
</FormItem> |
||||
|
<FormItem label="请求结果处理" prop="text"> |
||||
|
<div slot="label"> |
||||
|
<span>请求结果处理</span> |
||||
|
<span style="margin-left: 20px">自定义脚本: </span> |
||||
|
<Switch v-model="config.http.handlerByScript"></Switch> |
||||
|
</div> |
||||
|
<span class="item-desc" v-if="config.http.handlerByScript"> |
||||
|
👉 返回值为 ture 则流程通过，为 false 则流程将被驳回 |
||||
|
<div>支持函数 |
||||
|
<span style="color: dodgerblue">setFormByName( |
||||
|
<span style="color: #939494">'表单字段名', '表单字段值'</span> |
||||
|
)</span> |
||||
|
可改表单数据 |
||||
|
</div> |
||||
|
</span> |
||||
|
<span class="item-desc" v-else>👉 无论请求结果如何，均通过</span> |
||||
|
<div v-if="config.http.handlerByScript"> |
||||
|
<div> |
||||
|
<span>请求成功😀：</span> |
||||
|
<Textarea v-model="config.http.success" :rows="3"></Textarea> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span>请求失败😥：</span> |
||||
|
<Textarea v-model="config.http.fail" :rows="3"></Textarea> |
||||
|
</div> |
||||
|
</div> |
||||
|
</FormItem> |
||||
|
</div> |
||||
|
<div v-else-if="config.type === 'EMAIL'"> |
||||
|
<FormItem label="邮件主题" prop="text"> |
||||
|
<Input placeholder="请输入邮件主题" size="middle" v-model="config.email.subject" /> |
||||
|
</FormItem> |
||||
|
<FormItem label="收件方" prop="text"> |
||||
|
<Select size="small" style="width: 100%;" v-model="config.email.to" filterable multiple allow-create default-first-option placeholder="请输入收件人"> |
||||
|
<Option v-for="item in config.email.to" :key="item" :label="item" :value="item"></Option> |
||||
|
</Select> |
||||
|
</FormItem> |
||||
|
<FormItem label="邮件正文" prop="text"> |
||||
|
<Textarea v-model="config.email.content" :rows="4" placeholder="邮件内容，支持变量提取表单数据 ${表单字段名} "></Textarea> |
||||
|
</FormItem> |
||||
|
</div> |
||||
|
</Form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive, toRefs } from 'vue'; |
||||
|
import { Button, Form, Input, Select, Switch, Textarea, Radio } from 'ant-design-vue'; |
||||
|
import { DeleteOutlined } from '@ant-design/icons-vue'; |
||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
||||
|
|
||||
|
const FormItem = Form.Item; |
||||
|
const Option = Select.Option; |
||||
|
const RadioGroup = Radio.Group; |
||||
|
const RadioButton = Radio.Button; |
||||
|
|
||||
|
const flowStore = useFlowStoreWithOut(); |
||||
|
|
||||
|
defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: ()=>{ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const forms = computed(() => { |
||||
|
return flowStore.design.formItems || []; |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
cmOptions:{ |
||||
|
tabSize: 4, // tab |
||||
|
indentUnit: 4, |
||||
|
styleActiveLine: true, // 高亮选中行 |
||||
|
lineNumbers: true, // 显示行号 |
||||
|
styleSelectedText: true, |
||||
|
line: true, |
||||
|
foldGutter: true, // 块槽 |
||||
|
gutters: ['CodeMirror-linenumbers', "lock", "warn"], |
||||
|
highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例 |
||||
|
mode:'javascript', |
||||
|
// hint.js options |
||||
|
hintOptions: { |
||||
|
// 当匹配只有一项的时候是否自动补全 |
||||
|
completeSingle: false |
||||
|
}, |
||||
|
// 快捷键 可提供三种模式 sublime、emacs、vim |
||||
|
keyMap: 'sublime', |
||||
|
matchBrackets: true, |
||||
|
showCursorWhenSelecting: false, |
||||
|
// scrollbarStyle:null, |
||||
|
// readOnly:true, //是否只读 |
||||
|
theme: 'material', // 主题 material |
||||
|
extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定 |
||||
|
lastLineBefore:0 |
||||
|
} |
||||
|
}); |
||||
|
const { createMessage } = useMessage(); |
||||
|
|
||||
|
function addItem(items: any){ |
||||
|
if (items.length > 0 && (items[items.length - 1].name.trim() === '' |
||||
|
|| items[items.length - 1].value.trim() === '')) { |
||||
|
createMessage.warning("请完善之前项后在添加"); |
||||
|
return; |
||||
|
} |
||||
|
items.push({name: '', value: '', isField: true}); |
||||
|
} |
||||
|
|
||||
|
function delItem(items: any, index: number){ |
||||
|
items.splice(index, 1); |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
...toRefs(state), |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.item-desc{ |
||||
|
color: #939494; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<Node |
||||
|
:title="config.name" |
||||
|
:show-error="state.showError" |
||||
|
:content="content" |
||||
|
:error-info="state.errorInfo" |
||||
|
@selected="$emit('selected')" |
||||
|
@delNode="$emit('delNode')" |
||||
|
@insertNode="type => $emit('insertNode', type)" |
||||
|
placeholder="请设置审批人" |
||||
|
header-bgc="#ff943e" |
||||
|
> |
||||
|
<template #headerIcon> |
||||
|
<UserOutlined /> |
||||
|
</template> |
||||
|
</Node> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive } from 'vue'; |
||||
|
import { UserOutlined } from '@ant-design/icons-vue'; |
||||
|
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
||||
|
import Node from './Node.vue'; |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'selected']); |
||||
|
const props = defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const content = computed(() => { |
||||
|
console.log('props', props); |
||||
|
const config = props.config.props; |
||||
|
switch (config.assignedType) { |
||||
|
case "ASSIGN_USER": |
||||
|
if (config.assignedUser.length > 0) { |
||||
|
let texts: string[] = []; |
||||
|
config.assignedUser.forEach(org => texts.push(org.name)); |
||||
|
return String(texts).replaceAll(',', '、'); |
||||
|
} else { |
||||
|
return '请指定审批人'; |
||||
|
} |
||||
|
case "SELF": |
||||
|
return '发起人自己'; |
||||
|
case "SELF_SELECT": |
||||
|
return config.selfSelect.multiple ? '发起人自选多人':'发起人自选一人'; |
||||
|
case "LEADER_TOP": |
||||
|
return '多级主管依次审批'; |
||||
|
case "LEADER": |
||||
|
return config.leader.level > 1 ? '发起人的第 ' + config.leader.level + ' 级主管' : '发起人的直接主管'; |
||||
|
case "FORM_USER": |
||||
|
if (!config.formUser || config.formUser === '') { |
||||
|
return '表单内联系人（未选择）'; |
||||
|
} else { |
||||
|
let text = getFormItemById(config.formUser); |
||||
|
if (text && text.title) { |
||||
|
return `表单（${text.title}）内的人员`; |
||||
|
}else { |
||||
|
return '该表单已被移除😥'; |
||||
|
} |
||||
|
} |
||||
|
case "ROLE": |
||||
|
if (config.role.length > 0) { |
||||
|
return String(config.role).replaceAll(',', '、'); |
||||
|
} else { |
||||
|
return '指定角色（未设置）'; |
||||
|
} |
||||
|
default: return '未知设置项😥'; |
||||
|
} |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
showError: false, |
||||
|
errorInfo: '', |
||||
|
validate: {} as any, |
||||
|
}); |
||||
|
const flowStore = useFlowStoreWithOut(); |
||||
|
|
||||
|
function getFormItemById(id: any) { |
||||
|
return flowStore.design.formItems.find(item => item.id === id); |
||||
|
} |
||||
|
|
||||
|
function validate(err: string[]) { |
||||
|
try { |
||||
|
return state.showError = !state.validate[`validate_${props.config.props.assignedType}`](err); |
||||
|
} catch (e) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function validate_ASSIGN_USER(err: string[]) { |
||||
|
if (props.config.props.assignedUser.length > 0) { |
||||
|
return true; |
||||
|
} else { |
||||
|
state.errorInfo = '请指定审批人员'; |
||||
|
err.push(`${props.config.name} 未指定审批人员`); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function validate_SELF_SELECT(err: string[]) { |
||||
|
console.log(err); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function validate_LEADER_TOP(err: string[]) { |
||||
|
console.log(err); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function validate_LEADER(err: string[]) { |
||||
|
console.log(err); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function validate_ROLE(err: string[]) { |
||||
|
if (props.config.props.role.length <= 0) { |
||||
|
state.errorInfo = '请指定负责审批的系统角色'; |
||||
|
err.push(`${props.config.name} 未指定审批角色`); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function validate_SELF(err: string[]) { |
||||
|
console.log(err); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function validate_FORM_USER(err: string[]) { |
||||
|
if (props.config.props.formUser === '') { |
||||
|
state.errorInfo = '请指定表单中的人员组件'; |
||||
|
err.push(`${props.config.name} 审批人为表单中人员，但未指定`); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
function validate_REFUSE(err: string[]){ |
||||
|
console.log(err); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
validate, |
||||
|
validate_ASSIGN_USER, |
||||
|
validate_SELF_SELECT, |
||||
|
validate_LEADER_TOP, |
||||
|
validate_LEADER, |
||||
|
validate_ROLE, |
||||
|
validate_SELF, |
||||
|
validate_FORM_USER, |
||||
|
validate_REFUSE, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<Node |
||||
|
:title="config.name" |
||||
|
:show-error="state.showError" |
||||
|
:content="content" |
||||
|
:error-info="state.errorInfo" |
||||
|
@selected="$emit('selected')" |
||||
|
@delNode="$emit('delNode')" |
||||
|
@insertNode="type => $emit('insertNode', type)" |
||||
|
placeholder="请设置抄送人" |
||||
|
header-bgc="#3296fa" |
||||
|
> |
||||
|
<template #headerIcon> |
||||
|
<SettingOutlined /> |
||||
|
</template> |
||||
|
</Node> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'CC', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive } from 'vue'; |
||||
|
import { SettingOutlined } from '@ant-design/icons-vue'; |
||||
|
import Node from './Node.vue'; |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'selected']); |
||||
|
const props = defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const content = computed(() => { |
||||
|
if (props.config.props.shouldAdd){ |
||||
|
return '由发起人指定'; |
||||
|
}else if (props.config.props.assignedUser.length > 0) { |
||||
|
let texts: string[] = []; |
||||
|
props.config.props.assignedUser.forEach(org => texts.push(org.name)); |
||||
|
return String(texts).replaceAll(',', '、'); |
||||
|
} else { |
||||
|
return undefined; |
||||
|
} |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
showError: false, |
||||
|
errorInfo: '', |
||||
|
}); |
||||
|
//校验数据配置的合法性 |
||||
|
function validate(err: string[]){ |
||||
|
state.showError = false; |
||||
|
if (props.config.props.shouldAdd) { |
||||
|
state.showError = false; |
||||
|
} else if(props.config.props.assignedUser.length === 0) { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = '请选择需要抄送的人员'; |
||||
|
} |
||||
|
if (state.showError) { |
||||
|
err.push(`抄送节点 ${props.config.name} 未设置抄送人`); |
||||
|
} |
||||
|
return !state.showError; |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
validate, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<div class="node"> |
||||
|
<div class="node-body" @click="$emit('selected')"> |
||||
|
<div class="node-body-left" @click.stop="$emit('leftMove')" v-if="level > 1"> |
||||
|
<LeftOutlined /> |
||||
|
</div> |
||||
|
<div class="node-body-main"> |
||||
|
<div class="node-body-main-header"> |
||||
|
<span class="title"> |
||||
|
<SettingOutlined /> |
||||
|
<Ellipsis class="name" hover-tip :content="config.name ? config.name:('并行任务' + level)"/> |
||||
|
</span> |
||||
|
<span class="option"> |
||||
|
<Tooltip effect="dark" content="复制分支" placement="top"> |
||||
|
<CopyOutlined @click="$emit('copy')" /> |
||||
|
</Tooltip> |
||||
|
<CloseOutlined @click.stop="$emit('delNode')" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="node-body-main-content"> |
||||
|
<span>并行任务（同时进行）</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="node-body-right" @click.stop="$emit('rightMove')" v-if="level < size"> |
||||
|
<RightOutlined /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="node-footer"> |
||||
|
<div class="btn"> |
||||
|
<InsertButton @insertNode="type => $emit('insertNode', type)"></InsertButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'Concurrent', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { Tooltip } from 'ant-design-vue'; |
||||
|
import { LeftOutlined, RightOutlined, CloseOutlined, CopyOutlined, SettingOutlined } from '@ant-design/icons-vue'; |
||||
|
import Ellipsis from '../Ellipsis.vue'; |
||||
|
import InsertButton from '../InsertButton.vue' |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'leftMove', 'rightMove', 'selected']); |
||||
|
defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
level:{ |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
//条件数 |
||||
|
size:{ |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.node{ |
||||
|
padding: 30px 55px 0; |
||||
|
width: 330px; |
||||
|
.node-body{ |
||||
|
overflow: hidden; |
||||
|
cursor: pointer; |
||||
|
min-height: 80px; |
||||
|
max-height: 120px; |
||||
|
position: relative; |
||||
|
border-radius: 5px; |
||||
|
background-color: white; |
||||
|
box-shadow: 0px 0px 5px 0px #d8d8d8; |
||||
|
&:hover{ |
||||
|
.node-body-left, .node-body-right{ |
||||
|
i{ |
||||
|
display: block !important; |
||||
|
} |
||||
|
} |
||||
|
.node-body-main { |
||||
|
.option{ |
||||
|
display: inline-block !important; |
||||
|
} |
||||
|
} |
||||
|
box-shadow: 0px 0px 3px 0px @primary-color; |
||||
|
} |
||||
|
.node-body-left, .node-body-right{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
height: 100%; |
||||
|
i{ |
||||
|
display: none; |
||||
|
} |
||||
|
&:hover{ |
||||
|
background-color: #ececec; |
||||
|
} |
||||
|
} |
||||
|
.node-body-left{ |
||||
|
left: 0; |
||||
|
} |
||||
|
.node-body-right{ |
||||
|
right: 0; |
||||
|
} |
||||
|
.node-body-main { |
||||
|
position: absolute; |
||||
|
width: 188px; |
||||
|
left: 17px; |
||||
|
display: inline-block; |
||||
|
|
||||
|
.node-body-main-header{ |
||||
|
padding: 10px 0px 5px; |
||||
|
font-size: xx-small; |
||||
|
position: relative; |
||||
|
.title{ |
||||
|
color: #718dff; |
||||
|
.name{ |
||||
|
display: inline-block; |
||||
|
height: 14px; |
||||
|
width: 130px; |
||||
|
margin-left: 2px; |
||||
|
} |
||||
|
} |
||||
|
.option{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
display: none; |
||||
|
font-size: medium; |
||||
|
i{ |
||||
|
color: #888888; |
||||
|
padding: 0 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.node-body-main-content { |
||||
|
padding: 6px; |
||||
|
color: #656363; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
i { |
||||
|
position: absolute; |
||||
|
top: 55%; |
||||
|
right: 10px; |
||||
|
font-size: medium; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-footer{ |
||||
|
position: relative; |
||||
|
.btn{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 70px; |
||||
|
padding: 20px 0 32px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
:deep(.a-button) { |
||||
|
height: 32px; |
||||
|
} |
||||
|
&::before{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: -1; |
||||
|
margin: auto; |
||||
|
width: 2px; |
||||
|
height: 100%; |
||||
|
background-color: #CACACA; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,330 @@ |
|||||
|
<template> |
||||
|
<div :class="{'node': true, 'node-error-state': state.showError}"> |
||||
|
<div :class="{'node-body': true, 'error': state.showError}"> |
||||
|
<div class="node-body-left" @click="$emit('leftMove')" v-if="level > 1"> |
||||
|
<LeftOutlined /> |
||||
|
</div> |
||||
|
<div class="node-body-main" @click="$emit('selected')"> |
||||
|
<div class="node-body-main-header"> |
||||
|
<Ellipsis class="title" hover-tip :content="config.name ? config.name : ('条件' + level)"/> |
||||
|
<span class="level">优先级{{ level }}</span> |
||||
|
<span class="option"> |
||||
|
<Tooltip effect="dark" content="复制条件" placement="top"> |
||||
|
<CopyOutlined @click.stop="$emit('copy')" /> |
||||
|
</Tooltip> |
||||
|
<CloseOutlined class="icon-close" @click.stop="$emit('delNode')" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="node-body-main-content"> |
||||
|
<span class="placeholder" v-if="(content || '').trim() === ''">{{ state.placeholder }}</span> |
||||
|
<Ellipsis hoverTip :row="4" :content="content" v-else/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="node-body-right" @click="$emit('rightMove')" v-if="level < size"> |
||||
|
<RightOutlined /> |
||||
|
</div> |
||||
|
<div class="node-error" v-if="state.showError"> |
||||
|
<Tooltip effect="dark" :content="state.errorInfo" placement="top"> |
||||
|
<WarningOutlined /> |
||||
|
</Tooltip> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="node-footer"> |
||||
|
<div class="btn"> |
||||
|
<InsertButton @insertNode="type => $emit('insertNode', type)"></InsertButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'Condition', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive } from 'vue'; |
||||
|
import { Tooltip } from 'ant-design-vue'; |
||||
|
import { RightOutlined, CloseOutlined, CopyOutlined, LeftOutlined, WarningOutlined } from '@ant-design/icons-vue'; |
||||
|
import Ellipsis from '../Ellipsis.vue'; |
||||
|
import InsertButton from '../InsertButton.vue' |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'leftMove', 'rightMove', 'selected']); |
||||
|
const props = defineProps({ |
||||
|
config: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//索引位置 |
||||
|
level: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
//条件数 |
||||
|
size: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
}); |
||||
|
const content = computed(() => { |
||||
|
console.log('props', props); |
||||
|
const groups = props.config.props.groups; |
||||
|
let confitions: string[] = []; |
||||
|
groups.forEach(group => { |
||||
|
let subConditions: string[] = []; |
||||
|
group.conditions.forEach(subCondition => { |
||||
|
let subConditionStr = ''; |
||||
|
switch (subCondition.valueType) { |
||||
|
case 'dept': |
||||
|
case 'user': |
||||
|
subConditionStr = `${subCondition.title}属于[${String(subCondition.value.map(u => u.name)).replaceAll(',', '. ')}]之一`; |
||||
|
break; |
||||
|
case 'number': |
||||
|
case 'string': |
||||
|
subConditionStr = getOrdinaryConditionContent(subCondition); |
||||
|
break; |
||||
|
} |
||||
|
subConditions.push(subConditionStr); |
||||
|
}) |
||||
|
//根据子条件关系构建描述 |
||||
|
let subConditionsStr = String(subConditions) |
||||
|
.replaceAll(',', subConditions.length > 1 ? |
||||
|
(group.groupType === 'AND' ? ') 且 (' : ') 或 (') : |
||||
|
(group.groupType === 'AND' ? ' 且 ' : ' 或 ')) |
||||
|
confitions.push(subConditions.length > 1 ? `(${subConditionsStr})` : subConditionsStr); |
||||
|
}) |
||||
|
//构建最终描述 |
||||
|
return String(confitions).replaceAll(',', (props.config.props.groupsType === 'AND' ? ' 且 ' : ' 或 ')); |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
groupNames: [] as string[], |
||||
|
placeholder: '请设置条件', |
||||
|
errorInfo: '', |
||||
|
showError: false |
||||
|
}); |
||||
|
|
||||
|
function getDefault(val, df) { |
||||
|
return val && val !== '' ? val : df; |
||||
|
} |
||||
|
|
||||
|
function getOrdinaryConditionContent(subCondition: any) { |
||||
|
switch (subCondition.compare) { |
||||
|
case 'IN': |
||||
|
return `${subCondition.title}为[${String(subCondition.value).replaceAll(',', '、')}]中之一`; |
||||
|
case 'B': |
||||
|
return `${subCondition.value[0]} < ${subCondition.title} < ${subCondition.value[1]}`; |
||||
|
case 'AB': |
||||
|
return `${subCondition.value[0]} ≤ ${subCondition.title} < ${subCondition.value[1]}`; |
||||
|
case 'BA': |
||||
|
return `${subCondition.value[0]} < ${subCondition.title} ≤ ${subCondition.value[1]}`; |
||||
|
case 'ABA': |
||||
|
return `${subCondition.value[0]} ≤ ${subCondition.title} ≤ ${subCondition.value[1]}`; |
||||
|
case '<=': |
||||
|
return `${subCondition.title} ≤ ${getDefault(subCondition.value[0], ' ?')}`; |
||||
|
case '>=': |
||||
|
return `${subCondition.title} ≥ ${getDefault(subCondition.value[0], ' ?')}`; |
||||
|
default: |
||||
|
return `${subCondition.title}${subCondition.compare}${getDefault(subCondition.value[0], ' ?')}`; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function validate(err: string[]) { |
||||
|
const thatProps = props.config.props; |
||||
|
if (thatProps.groups.length <= 0) { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = '请设置分支条件'; |
||||
|
err.push(`${props.config.name} 未设置条件`); |
||||
|
}else { |
||||
|
for (let i = 0; i < thatProps.groups.length; i++) { |
||||
|
if (thatProps.groups[i].cids.length === 0) { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = `请设置条件组${thatProps.groupNames[i]}内的条件`; |
||||
|
err.push(`条件 ${props.config.name} 条件组${thatProps.groupNames[i]}内未设置条件`); |
||||
|
break; |
||||
|
}else { |
||||
|
let conditions = thatProps.groups[i].conditions; |
||||
|
for (let ci = 0; ci < conditions.length; ci++) { |
||||
|
let subc = conditions[ci]; |
||||
|
if (subc.value.length === 0) { |
||||
|
state.showError = true; |
||||
|
} else { |
||||
|
state.showError = false; |
||||
|
} |
||||
|
if (state.showError) { |
||||
|
state.errorInfo = `请完善条件组${thatProps.groupNames[i]}内的${subc.title}条件`; |
||||
|
err.push(`条件 ${props.config.name} 条件组${thatProps.groupNames[i]}内${subc.title}条件未完善`); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return !state.showError; |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
validate, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.node-error-state { |
||||
|
.node-body { |
||||
|
box-shadow: 0px 0px 5px 0px #F56C6C !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node { |
||||
|
padding: 30px 55px 0; |
||||
|
width: 330px; |
||||
|
.node-body { |
||||
|
cursor: pointer; |
||||
|
min-height: 80px; |
||||
|
max-height: 120px; |
||||
|
position: relative; |
||||
|
border-radius: 5px; |
||||
|
background-color: white; |
||||
|
box-shadow: 0px 0px 5px 0px #d8d8d8; |
||||
|
|
||||
|
&:hover { |
||||
|
.node-body-left, .node-body-right { |
||||
|
i { |
||||
|
display: block !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-body-main { |
||||
|
.level { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
.option { |
||||
|
display: inline-block !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
box-shadow: 0px 0px 3px 0px @primary-color; |
||||
|
} |
||||
|
|
||||
|
.node-body-left, .node-body-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
height: 100%; |
||||
|
|
||||
|
i { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #ececec; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-body-left { |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.node-body-right { |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
|
||||
|
.node-body-main { |
||||
|
position: absolute; |
||||
|
width: 188px; |
||||
|
margin-left: 17px; |
||||
|
display: inline-block; |
||||
|
|
||||
|
.node-body-main-header { |
||||
|
padding: 10px 0px 5px; |
||||
|
font-size: xx-small; |
||||
|
position: relative; |
||||
|
|
||||
|
.title { |
||||
|
color: #15bca3; |
||||
|
display: inline-block; |
||||
|
height: 14px; |
||||
|
width: 125px; |
||||
|
} |
||||
|
|
||||
|
.level { |
||||
|
position: absolute; |
||||
|
right: 15px; |
||||
|
color: #888888; |
||||
|
} |
||||
|
|
||||
|
.option { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
display: none; |
||||
|
font-size: medium; |
||||
|
|
||||
|
i { |
||||
|
color: #888888; |
||||
|
padding: 0 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-body-main-content { |
||||
|
padding: 6px; |
||||
|
color: #656363; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
i { |
||||
|
position: absolute; |
||||
|
top: 55%; |
||||
|
right: 10px; |
||||
|
font-size: medium; |
||||
|
} |
||||
|
|
||||
|
.placeholder { |
||||
|
color: #8c8c8c; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-error { |
||||
|
position: absolute; |
||||
|
right: -40px; |
||||
|
top: 20px; |
||||
|
font-size: 25px; |
||||
|
color: #F56C6C; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-footer { |
||||
|
position: relative; |
||||
|
|
||||
|
.btn { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 70px; |
||||
|
padding: 20px 0 32px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
:deep(.a-button) { |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: -1; |
||||
|
margin: auto; |
||||
|
width: 2px; |
||||
|
height: 100%; |
||||
|
background-color: #CACACA; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<Node |
||||
|
:title="config.name" |
||||
|
:show-error="state.showError" |
||||
|
:content="content" |
||||
|
:error-info="state.errorInfo" |
||||
|
@selected="$emit('selected')" |
||||
|
@delNode="$emit('delNode')" |
||||
|
@insertNode="type => $emit('insertNode', type)" |
||||
|
placeholder="请设置延时时间" |
||||
|
header-bgc="#f25643" |
||||
|
> |
||||
|
<template #headerIcon> |
||||
|
<ClockCircleOutlined /> |
||||
|
</template> |
||||
|
</Node> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'Delay', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive} from 'vue'; |
||||
|
import { ClockCircleOutlined } from '@ant-design/icons-vue'; |
||||
|
import Node from './Node.vue'; |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'selected']); |
||||
|
const props = defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
showError: false, |
||||
|
errorInfo: '', |
||||
|
}); |
||||
|
|
||||
|
const content = computed(() => { |
||||
|
if (props.config.props.type === 'FIXED') { |
||||
|
return `等待 ${props.config.props.time} ${getName(props.config.props.unit)}` |
||||
|
} else if (props.config.props.type === 'AUTO') { |
||||
|
return `至当天 ${props.config.props.dateTime}` |
||||
|
} else { |
||||
|
return undefined; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function getName(unit: string){ |
||||
|
switch (unit){ |
||||
|
case 'D': return '天'; |
||||
|
case 'H': return '小时'; |
||||
|
case 'M': return '分钟'; |
||||
|
default: return '未知'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function validate(err: string[]){ |
||||
|
state.showError = false; |
||||
|
try { |
||||
|
if (props.config.props.type === "AUTO") { |
||||
|
if ((props.config.props.dateTime || "") === "") { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = "请选择时间点"; |
||||
|
} |
||||
|
} else { |
||||
|
if (props.config.props.time <= 0) { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = "请设置延时时长"; |
||||
|
} |
||||
|
} |
||||
|
} catch (e) { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = "配置出现问题"; |
||||
|
} |
||||
|
if (state.showError) { |
||||
|
err.push(`${props.config.name} 未设置延时规则`); |
||||
|
} |
||||
|
return !state.showError; |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
validate, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,19 @@ |
|||||
|
<template> |
||||
|
<Node :show="false" @insertNode="type => $emit('insertNode', type)"/> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'Empty', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import Node from './Node.vue'; |
||||
|
|
||||
|
defineEmits(['insertNode']); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}"> |
||||
|
<div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}" > |
||||
|
<div> |
||||
|
<div class="node-body-header" :style="{'background-color': headerBgc}"> |
||||
|
<div style="margin-right: 5px"> |
||||
|
<slot name="headerIcon"></slot> |
||||
|
</div> |
||||
|
<Ellipsis class="name" hover-tip :content="title"/> |
||||
|
<CloseOutlined v-if="!isRoot" class="icon-close" style="float:right;" @click="$emit('delNode')" /> |
||||
|
</div> |
||||
|
<div class="node-body-content"> |
||||
|
<slot name="leftIcon"></slot> |
||||
|
<span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span> |
||||
|
<Ellipsis :row="3" :content="content" v-else/> |
||||
|
<RightOutlined class="i" /> |
||||
|
</div> |
||||
|
<div class="node-error" v-if="showError"> |
||||
|
<Tooltip effect="dark" :content="errorInfo" placement="top"> |
||||
|
<WarningOutlined /> |
||||
|
</Tooltip> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="node-footer"> |
||||
|
<div class="btn"> |
||||
|
<InsertButton @insertNode="type => $emit('insertNode', type)"></InsertButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { Tooltip } from 'ant-design-vue'; |
||||
|
import { RightOutlined, CloseOutlined, WarningOutlined } from '@ant-design/icons-vue'; |
||||
|
import Ellipsis from '../Ellipsis.vue'; |
||||
|
import InsertButton from '../InsertButton.vue'; |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'selected']); |
||||
|
defineProps({ |
||||
|
//是否为根节点 |
||||
|
isRoot: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
//是否显示节点体 |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
//节点内容区域文字 |
||||
|
content: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
title:{ |
||||
|
type: String, |
||||
|
default: '标题' |
||||
|
}, |
||||
|
placeholder:{ |
||||
|
type: String, |
||||
|
default: '请设置' |
||||
|
}, |
||||
|
//头部背景色 |
||||
|
headerBgc:{ |
||||
|
type: String, |
||||
|
default: '#576a95' |
||||
|
}, |
||||
|
//是否显示错误状态 |
||||
|
showError:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
errorInfo:{ |
||||
|
type: String, |
||||
|
default: '无信息' |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.root{ |
||||
|
&:before{ |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
.node-error-state{ |
||||
|
.node-body{ |
||||
|
box-shadow: 0px 0px 5px 0px #F56C6C !important; |
||||
|
} |
||||
|
} |
||||
|
.node{ |
||||
|
padding: 0 10px; |
||||
|
//width: 220px; |
||||
|
position: relative; |
||||
|
&:before{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: -12px; |
||||
|
left: 50%; |
||||
|
-webkit-transform: translateX(-50%); |
||||
|
transform: translateX(-50%); |
||||
|
width: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 8px 6px 4px; |
||||
|
border-color: #CACACA transparent transparent; |
||||
|
background: #F5F5F7; |
||||
|
} |
||||
|
.node-body{ |
||||
|
cursor: pointer; |
||||
|
max-height: 120px; |
||||
|
position: relative; |
||||
|
border-radius: 5px; |
||||
|
background-color: white; |
||||
|
box-shadow: 0px 0px 5px 0px #d8d8d8; |
||||
|
&:hover{ |
||||
|
box-shadow: 0px 0px 3px 0px @primary-color; |
||||
|
.node-body-header { |
||||
|
.icon-close { |
||||
|
display: inline; |
||||
|
font-size: medium; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.node-body-header{ |
||||
|
display: flex; |
||||
|
border-top-left-radius: 5px; |
||||
|
border-top-right-radius: 5px; |
||||
|
padding: 5px 15px; |
||||
|
color: white; |
||||
|
font-size: xx-small; |
||||
|
.icon-close{ |
||||
|
display: none; |
||||
|
} |
||||
|
.name{ |
||||
|
height: 14px; |
||||
|
width: 150px; |
||||
|
display: inline-block |
||||
|
} |
||||
|
} |
||||
|
.node-body-content{ |
||||
|
padding: 18px; |
||||
|
color: #656363; |
||||
|
font-size: 14px; |
||||
|
.i{ |
||||
|
position: absolute; |
||||
|
top: 55%; |
||||
|
right: 5px; |
||||
|
font-size: medium; |
||||
|
} |
||||
|
.placeholder{ |
||||
|
color: #8c8c8c; |
||||
|
} |
||||
|
} |
||||
|
.node-error{ |
||||
|
position: absolute; |
||||
|
right: -40px; |
||||
|
top: 20px; |
||||
|
font-size: 25px; |
||||
|
color: #F56C6C; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-footer{ |
||||
|
position: relative; |
||||
|
.btn{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
padding: 20px 0 32px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
:deep(.a-button) { |
||||
|
height: 32px; |
||||
|
} |
||||
|
&::before{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: -1; |
||||
|
margin: auto; |
||||
|
width: 2px; |
||||
|
height: 100%; |
||||
|
background-color: #CACACA; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<Node |
||||
|
title="发起人" |
||||
|
:is-root="true" |
||||
|
:content="content" |
||||
|
@selected="$emit('selected')" |
||||
|
@insertNode="type => $emit('insertNode', type)" |
||||
|
placeholder="所有人" |
||||
|
header-bgc="#576a95" |
||||
|
header-icon="el-icon-user-solid" |
||||
|
> |
||||
|
<template #headerIcon> |
||||
|
<HomeOutlined /> |
||||
|
</template> |
||||
|
</Node> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'root', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed } from 'vue'; |
||||
|
import { HomeOutlined } from '@ant-design/icons-vue'; |
||||
|
import Node from './Node.vue'; |
||||
|
|
||||
|
defineEmits(['insertNode', 'selected']); |
||||
|
const props = defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const content = computed(() => { |
||||
|
if (props.config.props?.assignedUser?.length > 0) { |
||||
|
let texts: any[] = []; |
||||
|
props.config.props.assignedUser.forEach(org => texts.push(org.name)); |
||||
|
return String(texts).replaceAll(',', '、'); |
||||
|
} else { |
||||
|
return '所有人'; |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
<template> |
||||
|
<Node |
||||
|
:title="config.name" |
||||
|
:show-error="state.showError" |
||||
|
:error-info="state.errorInfo" |
||||
|
@selected="$emit('selected')" |
||||
|
@delNode="$emit('delNode')" |
||||
|
@insertNode="type => $emit('insertNode', type)" |
||||
|
placeholder="请设置触发器" |
||||
|
header-bgc="#47bc82" |
||||
|
> |
||||
|
<template #headerIcon> |
||||
|
<SettingOutlined /> |
||||
|
</template> |
||||
|
</Node> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'Trigger', |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, reactive } from 'vue'; |
||||
|
import { SettingOutlined } from '@ant-design/icons-vue'; |
||||
|
import { isNullOrWhiteSpace } from '/@/utils/strings'; |
||||
|
import Node from './Node.vue'; |
||||
|
|
||||
|
defineEmits(['delNode', 'insertNode', 'selected']); |
||||
|
const props = defineProps({ |
||||
|
config:{ |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
computed(() => props.config); |
||||
|
|
||||
|
const state = reactive({ |
||||
|
showError: false, |
||||
|
errorInfo: '', |
||||
|
}); |
||||
|
|
||||
|
function validate(err: string[]) { |
||||
|
state.showError = false; |
||||
|
if (props.config.props.type === 'WEBHOOK') { |
||||
|
if(!isNullOrWhiteSpace(props.config.props.http.url)) { |
||||
|
state.showError = false; |
||||
|
} else { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = '请设置WEBHOOK的URL地址'; |
||||
|
} |
||||
|
} else if(props.config.props.type === 'EMAIL') { |
||||
|
if (isNullOrWhiteSpace(props.config.props.email.subject) |
||||
|
|| props.config.props.email.to.length === 0 |
||||
|
|| isNullOrWhiteSpace(props.config.props.email.content)) { |
||||
|
state.showError = true; |
||||
|
state.errorInfo = '请设置邮件发送配置'; |
||||
|
} else { |
||||
|
state.showError = false; |
||||
|
} |
||||
|
} |
||||
|
if (state.showError){ |
||||
|
err.push(`${props.config.name} 触发动作未设置完善`); |
||||
|
} |
||||
|
return !state.showError; |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
validate, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,112 @@ |
|||||
|
//审批节点默认属性
|
||||
|
export const APPROVAL_PROPS = { |
||||
|
assignedType: "ASSIGN_USER", |
||||
|
mode: "AND", |
||||
|
sign: false, |
||||
|
nobody: { |
||||
|
handler: "TO_PASS", |
||||
|
assignedUser:[] |
||||
|
}, |
||||
|
timeLimit:{ |
||||
|
timeout:{ |
||||
|
unit: "H", |
||||
|
value: 0 |
||||
|
}, |
||||
|
handler:{ |
||||
|
type: "REFUSE", |
||||
|
notify:{ |
||||
|
once: true, |
||||
|
hour: 1 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
assignedUser:[], |
||||
|
formPerms:[], |
||||
|
selfSelect: { |
||||
|
multiple: false |
||||
|
}, |
||||
|
leaderTop: { |
||||
|
endCondition: "TOP", |
||||
|
endLevel: 1, |
||||
|
}, |
||||
|
leader:{ |
||||
|
level: 1 |
||||
|
}, |
||||
|
role:[], |
||||
|
refuse: { |
||||
|
type: 'TO_END', //驳回规则 TO_END TO_NODE TO_BEFORE
|
||||
|
target: '' //驳回到指定ID的节点
|
||||
|
}, |
||||
|
formUser: '' |
||||
|
} |
||||
|
|
||||
|
//根节点默认属性
|
||||
|
export const ROOT_PROPS = { |
||||
|
assignedUser: [], |
||||
|
formPerms:[] |
||||
|
} |
||||
|
|
||||
|
//条件节点默认属性
|
||||
|
export const CONDITION_PROPS = { |
||||
|
groupsType:"OR", //条件组逻辑关系 OR、AND
|
||||
|
groups:[ |
||||
|
{ |
||||
|
groupType:"AND", //条件组内条件关系 OR、AND
|
||||
|
cids:[], //条件ID集合
|
||||
|
conditions:[] //组内子条件
|
||||
|
} |
||||
|
], |
||||
|
expression: "" //自定义表达式，灵活构建逻辑关系
|
||||
|
} |
||||
|
|
||||
|
//抄送节点默认属性
|
||||
|
export const CC_PROPS = { |
||||
|
shouldAdd: false, |
||||
|
assignedUser: [], |
||||
|
formPerms:[] |
||||
|
} |
||||
|
|
||||
|
//触发器节点默认属性
|
||||
|
export const TRIGGER_PROPS = { |
||||
|
type: 'WEBHOOK', |
||||
|
http:{ |
||||
|
method: 'GET', //请求方法 支持GET/POST
|
||||
|
url: '', //URL地址，可以直接带参数
|
||||
|
headers: [ //http header
|
||||
|
{ |
||||
|
name: '', |
||||
|
isField: true, |
||||
|
value: '' //支持表达式 ${xxx} xxx为表单字段名称
|
||||
|
} |
||||
|
], |
||||
|
contentType: 'FORM', //请求参数类型
|
||||
|
params:[ //请求参数
|
||||
|
{ |
||||
|
name: '', |
||||
|
isField: true, //是表单字段还是自定义
|
||||
|
value: '' //支持表达式 ${xxx} xxx为表单字段名称
|
||||
|
} |
||||
|
], |
||||
|
retry: 1, |
||||
|
handlerByScript: false, |
||||
|
success: 'function handlerOk(res) {\n return true;\n}', |
||||
|
fail: 'function handlerFail(res) {\n return true;\n}' |
||||
|
}, |
||||
|
email:{ |
||||
|
subject: '', |
||||
|
to: [], |
||||
|
content: '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//延时节点默认属性
|
||||
|
export const DELAY_PROPS = { |
||||
|
type: "FIXED", //延时类型 FIXED:到达当前节点后延时固定时长 、AUTO:延时到 dateTime设置的时间
|
||||
|
time: 0, //延时时间
|
||||
|
unit: "M", //时间单位 D天 H小时 M分钟
|
||||
|
dateTime: "" //如果当天没有超过设置的此时间点，就延时到这个指定的时间，到了就直接跳过不延时
|
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
APPROVAL_PROPS, CC_PROPS, DELAY_PROPS, CONDITION_PROPS, ROOT_PROPS, TRIGGER_PROPS |
||||
|
} |
||||
@ -0,0 +1,541 @@ |
|||||
|
<script lang="ts"> |
||||
|
import { computed, defineComponent, reactive, ref, unref, h, resolveComponent, getCurrentInstance } from 'vue'; |
||||
|
import { Button } from 'ant-design-vue'; |
||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
||||
|
//导入所有节点组件 |
||||
|
import Approval from '../nodes/ApprovalNode.vue'; |
||||
|
import Cc from '../nodes/CcNode.vue'; |
||||
|
import Concurrent from '../nodes/ConcurrentNode.vue'; |
||||
|
import Condition from '../nodes/ConditionNode.vue'; |
||||
|
import Trigger from '../nodes/TriggerNode.vue'; |
||||
|
import Delay from '../nodes/DelayNode.vue'; |
||||
|
import Empty from '../nodes/EmptyNode.vue'; |
||||
|
import Root from '../nodes/RootNode.vue'; |
||||
|
import Node from '../nodes/Node.vue'; |
||||
|
|
||||
|
import DefaultProps from "./DefaultNodeProps"; |
||||
|
import { cloneDeep } from 'lodash-es'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'ProcessTree', |
||||
|
components: { |
||||
|
Approval, |
||||
|
Cc, |
||||
|
Concurrent, |
||||
|
Condition, |
||||
|
Trigger, |
||||
|
Delay, |
||||
|
Empty, |
||||
|
Root, |
||||
|
Node, |
||||
|
}, |
||||
|
emits: ['selectedNode'], |
||||
|
setup: (_, { emit, expose }) => { |
||||
|
const instance = getCurrentInstance(); |
||||
|
|
||||
|
const { createMessage } = useMessage(); |
||||
|
const flowStore = useFlowStoreWithOut(); |
||||
|
const nodeMap = computed(() => { |
||||
|
return flowStore.nodeMap; |
||||
|
}); |
||||
|
const dom = computed(() => { |
||||
|
return flowStore.design.process; |
||||
|
}); |
||||
|
const state = reactive({ |
||||
|
valid: true, |
||||
|
}); |
||||
|
const rootRef = ref<any>(); |
||||
|
|
||||
|
function getDomTree(node) { |
||||
|
toMapping(node); |
||||
|
if (isPrimaryNode(node)){ |
||||
|
//普通业务节点 |
||||
|
let childDoms = getDomTree(node.children) |
||||
|
decodeAppendDom(node, childDoms) |
||||
|
return [h('div', {'class':{'primary-node': true}}, { default: () => childDoms })]; |
||||
|
} else if (isBranchNode(node)){ |
||||
|
let index = 0; |
||||
|
//遍历分支节点，包含并行及条件节点 |
||||
|
let branchItems = node.branchs.map(branchNode => { |
||||
|
//处理每个分支内子节点 |
||||
|
toMapping(branchNode); |
||||
|
let childDoms = getDomTree(branchNode.children) |
||||
|
decodeAppendDom(branchNode, childDoms, {level: index + 1, size: node.branchs.length}) |
||||
|
//插入4条横线，遮挡掉条件节点左右半边线条 |
||||
|
insertCoverLine(index, childDoms, node.branchs) |
||||
|
//遍历子分支尾部分支 |
||||
|
index++; |
||||
|
return h('div', {'class':{'branch-node-item': true}}, { default: () => childDoms }); |
||||
|
}) |
||||
|
//插入添加分支/条件的按钮 |
||||
|
branchItems.unshift( |
||||
|
h( |
||||
|
'div', |
||||
|
{'class':{'add-branch-btn': true}}, |
||||
|
{ default: () => [ |
||||
|
h( |
||||
|
Button, |
||||
|
{ |
||||
|
'class':{'add-branch-btn-el': true}, |
||||
|
size: 'small', |
||||
|
shape : 'round', |
||||
|
onClick: () => addBranchNode(node), |
||||
|
innerHTML: `添加${isConditionNode(node)?'条件':'分支'}`, |
||||
|
}, |
||||
|
{ default: () => [] }) |
||||
|
]})); |
||||
|
let bchDom = [h('div', {'class':{'branch-node': true}}, { default: () => branchItems })] |
||||
|
//继续遍历分支后的节点 |
||||
|
let afterChildDoms = getDomTree(node.children) |
||||
|
return [h('div', {}, { default: () => [bchDom, afterChildDoms] })] |
||||
|
}else if (isEmptyNode(node)){ |
||||
|
//空节点，存在于分支尾部 |
||||
|
let childDoms = getDomTree(node.children) |
||||
|
decodeAppendDom(node, childDoms) |
||||
|
return [h('div', {'class':{'empty-node': true}}, { default: () => childDoms })]; |
||||
|
}else { |
||||
|
//遍历到了末端，无子节点 |
||||
|
return []; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//解码渲染的时候插入dom到同级 |
||||
|
function decodeAppendDom(node, dom, props = {} as any){ |
||||
|
console.log('decodeAppendDom', node); |
||||
|
props.config = node |
||||
|
const component = resolveComponent(node.type.toLowerCase()); |
||||
|
dom?.unshift(h(component, { |
||||
|
...props, |
||||
|
ref: node.id, |
||||
|
key: node.id, |
||||
|
//定义事件，插入节点，删除节点，选中节点，复制/移动 |
||||
|
onInsertNode: (type) => insertNode(type, node), |
||||
|
onDelNode: () => delNode(node), |
||||
|
onSelected: () => selectNode(node), |
||||
|
onCopy: () => copyBranch(node), |
||||
|
onLeftMove: () => branchMove(node, -1), |
||||
|
onRightMove: () => branchMove(node, 1), |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
//id映射到map，用来向上遍历 |
||||
|
function toMapping(node){ |
||||
|
if (node && node.id){ |
||||
|
//console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type) |
||||
|
nodeMap.value.set(node.id, node) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function insertCoverLine(index, doms, branchs){ |
||||
|
if (index === 0){ |
||||
|
//最左侧分支 |
||||
|
doms.unshift(h('div', {'class':{'line-top-left': true}}, { default: () => [] })) |
||||
|
doms.unshift(h('div', {'class':{'line-bot-left': true}}, { default: () => [] })) |
||||
|
} else if (index === branchs.length - 1){ |
||||
|
//最右侧分支 |
||||
|
doms.unshift(h('div', {'class':{'line-top-right': true}}, { default: () => [] })) |
||||
|
doms.unshift(h('div', {'class':{'line-bot-right': true}}, { default: () => [] })) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function copyBranch(node) { |
||||
|
let parentNode = nodeMap.value.get(node.parentId); |
||||
|
let branchNode = cloneDeep(node); |
||||
|
branchNode.name = branchNode.name + '-copy'; |
||||
|
forEachNode(parentNode, branchNode, (parent, node) => { |
||||
|
let id = getRandomId() |
||||
|
console.log(node, '新id =>'+ id, '老nodeId:' + node.id ) |
||||
|
node.id = id |
||||
|
node.parentId = parent.id |
||||
|
}) |
||||
|
parentNode.branchs.splice(parentNode.branchs.indexOf(node), 0, branchNode) |
||||
|
instance?.proxy?.$forceUpdate(); |
||||
|
} |
||||
|
|
||||
|
function branchMove(node, offset){ |
||||
|
let parentNode = nodeMap.value.get(node.parentId) |
||||
|
let index = parentNode.branchs.indexOf(node) |
||||
|
let branch = parentNode.branchs[index + offset] |
||||
|
parentNode.branchs[index + offset] = parentNode.branchs[index] |
||||
|
parentNode.branchs[index] = branch |
||||
|
instance?.proxy?.$forceUpdate(); |
||||
|
} |
||||
|
|
||||
|
//判断是否为主要业务节点 |
||||
|
function isPrimaryNode(node){ |
||||
|
return node && |
||||
|
(node.type === 'ROOT' || node.type === 'APPROVAL' |
||||
|
|| node.type === 'CC' || node.type === 'DELAY' |
||||
|
|| node.type === 'TRIGGER'); |
||||
|
} |
||||
|
|
||||
|
function isBranchNode(node){ |
||||
|
return node && (node.type === 'CONDITIONS' || node.type === 'CONCURRENTS'); |
||||
|
} |
||||
|
|
||||
|
function isEmptyNode(node){ |
||||
|
return node && (node.type === 'EMPTY') |
||||
|
} |
||||
|
|
||||
|
//是分支节点 |
||||
|
function isConditionNode(node){ |
||||
|
return node.type === 'CONDITIONS'; |
||||
|
} |
||||
|
|
||||
|
//是分支节点 |
||||
|
function isBranchSubNode(node){ |
||||
|
return node && (node.type === 'CONDITION' || node.type === 'CONCURRENT'); |
||||
|
} |
||||
|
|
||||
|
function isConcurrentNode(node){ |
||||
|
return node.type === 'CONCURRENTS' |
||||
|
} |
||||
|
|
||||
|
function getRandomId(){ |
||||
|
return `node_${new Date().getTime().toString().substring(5)}${Math.round(Math.random()*9000+1000)}` |
||||
|
} |
||||
|
|
||||
|
//选中一个节点 |
||||
|
function selectNode(node){ |
||||
|
flowStore.selectNode(node); |
||||
|
emit('selectedNode', node) |
||||
|
} |
||||
|
|
||||
|
//处理节点插入逻辑 |
||||
|
function insertNode(type, parentNode){ |
||||
|
console.log('insertNode', type, parentNode); |
||||
|
const rootEl = unref(rootRef); |
||||
|
rootEl?.click() |
||||
|
//缓存一下后面的节点 |
||||
|
let afterNode = parentNode.children |
||||
|
//插入新节点 |
||||
|
parentNode.children = { |
||||
|
id: getRandomId(), |
||||
|
parentId: parentNode.id, |
||||
|
props: {}, |
||||
|
type: type, |
||||
|
} |
||||
|
switch (type){ |
||||
|
case 'APPROVAL': insertApprovalNode(parentNode); break; |
||||
|
case 'CC': insertCcNode(parentNode); break; |
||||
|
case 'DELAY': insertDelayNode(parentNode); break; |
||||
|
case 'TRIGGER': insertTriggerNode(parentNode); break; |
||||
|
case 'CONDITIONS': insertConditionsNode(parentNode); break; |
||||
|
case 'CONCURRENTS': insertConcurrentsNode(parentNode); break; |
||||
|
default: break; |
||||
|
} |
||||
|
//拼接后续节点 |
||||
|
if (isBranchNode({type: type})){ |
||||
|
if (afterNode && afterNode.id){ |
||||
|
afterNode.parentId = parentNode.children.children.id |
||||
|
} |
||||
|
parentNode.children.children.children = afterNode; |
||||
|
} else { |
||||
|
if (afterNode && afterNode.id){ |
||||
|
afterNode.parentId = parentNode.children.id |
||||
|
} |
||||
|
parentNode.children.children = afterNode; |
||||
|
} |
||||
|
instance?.proxy?.$forceUpdate(); |
||||
|
} |
||||
|
|
||||
|
function insertApprovalNode(parentNode){ |
||||
|
parentNode.children.name = '审批人'; |
||||
|
parentNode.children.props = cloneDeep(DefaultProps.APPROVAL_PROPS); |
||||
|
console.log('parentNode', parentNode); |
||||
|
} |
||||
|
|
||||
|
function insertCcNode(parentNode){ |
||||
|
parentNode.children.name = '抄送人'; |
||||
|
parentNode.children.props = cloneDeep(DefaultProps.CC_PROPS); |
||||
|
} |
||||
|
|
||||
|
function insertDelayNode(parentNode){ |
||||
|
parentNode.children.name = '延时处理'; |
||||
|
parentNode.children.props = cloneDeep(DefaultProps.DELAY_PROPS); |
||||
|
} |
||||
|
|
||||
|
function insertTriggerNode(parentNode){ |
||||
|
parentNode.children.name = '触发器'; |
||||
|
parentNode.children.props = cloneDeep(DefaultProps.TRIGGER_PROPS); |
||||
|
} |
||||
|
|
||||
|
function insertConditionsNode(parentNode){ |
||||
|
parentNode.children.name = '条件分支'; |
||||
|
parentNode.children.children = { |
||||
|
id: getRandomId(), |
||||
|
parentId: parentNode.children.id, |
||||
|
type: "EMPTY" |
||||
|
}; |
||||
|
parentNode.children.branchs = [ |
||||
|
{ |
||||
|
id: getRandomId(), |
||||
|
parentId: parentNode.children.id, |
||||
|
type: "CONDITION", |
||||
|
props: cloneDeep(DefaultProps.CONDITION_PROPS), |
||||
|
name: "条件1", |
||||
|
children:{} |
||||
|
},{ |
||||
|
id: getRandomId(), |
||||
|
parentId: parentNode.children.id, |
||||
|
type: "CONDITION", |
||||
|
props: cloneDeep(DefaultProps.CONDITION_PROPS), |
||||
|
name: "条件2", |
||||
|
children:{} |
||||
|
} |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
function insertConcurrentsNode(parentNode){ |
||||
|
parentNode.children.name = '并行分支'; |
||||
|
parentNode.children.children = { |
||||
|
id: getRandomId(), |
||||
|
parentId: parentNode.children.id, |
||||
|
type: "EMPTY" |
||||
|
}; |
||||
|
parentNode.children.branchs = [ |
||||
|
{ |
||||
|
id: getRandomId(), |
||||
|
name: "分支1", |
||||
|
parentId: parentNode.children.id, |
||||
|
type: "CONCURRENT", |
||||
|
props: {}, |
||||
|
children:{} |
||||
|
},{ |
||||
|
id: getRandomId(), |
||||
|
name: "分支2", |
||||
|
parentId: parentNode.children.id, |
||||
|
type: "CONCURRENT", |
||||
|
props: {}, |
||||
|
children:{} |
||||
|
} |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
function getBranchEndNode(conditionNode){ |
||||
|
if (!conditionNode.children || !conditionNode.children.id){ |
||||
|
return conditionNode; |
||||
|
} |
||||
|
return getBranchEndNode(conditionNode.children); |
||||
|
} |
||||
|
|
||||
|
function addBranchNode(node){ |
||||
|
if (node.branchs.length < 8){ |
||||
|
node.branchs.push({ |
||||
|
id: getRandomId(), |
||||
|
parentId: node.id, |
||||
|
name: (isConditionNode(node) ? '条件':'分支') + (node.branchs.length + 1), |
||||
|
props: isConditionNode(node) ? cloneDeep(DefaultProps.CONDITION_PROPS):{}, |
||||
|
type: isConditionNode(node) ? "CONDITION":"CONCURRENT", |
||||
|
children:{} |
||||
|
}) |
||||
|
} else { |
||||
|
createMessage.warning("最多只能添加 8 项😥"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//删除当前节点 |
||||
|
function delNode(node){ |
||||
|
console.log("删除节点", node); |
||||
|
//获取该节点的父节点 |
||||
|
let parentNode = nodeMap.value.get(node.parentId) |
||||
|
if (parentNode){ |
||||
|
//判断该节点的父节点是不是分支节点 |
||||
|
if (isBranchNode(parentNode)){ |
||||
|
//移除该分支 |
||||
|
parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1) |
||||
|
//处理只剩1个分支的情况 |
||||
|
if (parentNode.branchs.length < 2){ |
||||
|
//获取条件组的父节点 |
||||
|
let ppNode = nodeMap.value.get(parentNode.parentId) |
||||
|
//判断唯一分支是否存在业务节点 |
||||
|
if (parentNode.branchs[0].children && parentNode.branchs[0].children.id){ |
||||
|
//将剩下的唯一分支头部合并到主干 |
||||
|
ppNode.children = parentNode.branchs[0].children |
||||
|
ppNode.children.parentId = ppNode.id |
||||
|
//搜索唯一分支末端最后一个节点 |
||||
|
let endNode = getBranchEndNode(parentNode.branchs[0]) |
||||
|
//后续节点进行拼接, 这里要取EMPTY后的节点 |
||||
|
endNode.children = parentNode.children.children |
||||
|
if (endNode.children && endNode.children.id){ |
||||
|
endNode.children.parentId = endNode.id |
||||
|
} |
||||
|
}else { |
||||
|
//直接合并分支后面的节点，这里要取EMPTY后的节点 |
||||
|
ppNode.children = parentNode.children.children |
||||
|
if (ppNode.children && ppNode.children.id){ |
||||
|
ppNode.children.parentId = ppNode.id |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}else { |
||||
|
//不是的话就直接删除 |
||||
|
if (node.children && node.children.id) { |
||||
|
node.children.parentId = parentNode.id |
||||
|
} |
||||
|
parentNode.children = node.children |
||||
|
} |
||||
|
instance?.proxy?.$forceUpdate(); |
||||
|
} else { |
||||
|
createMessage.warning("出现错误，找不到上级节点😥") |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function validateProcess(){ |
||||
|
state.valid = true |
||||
|
let err = [] |
||||
|
validate(err, dom.value) |
||||
|
return err |
||||
|
} |
||||
|
|
||||
|
function validateNode(err, node){ |
||||
|
const nodeRef = instance?.refs[node.id] as unknown as any; |
||||
|
if (nodeRef?.validate){ |
||||
|
state.valid = nodeRef.validate(err) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//更新指定节点的dom |
||||
|
function nodeDomUpdate(node){ |
||||
|
const nodeRef = instance?.refs[node.id] as unknown as any; |
||||
|
nodeRef?.$forceUpdate() |
||||
|
} |
||||
|
|
||||
|
//给定一个起始节点，遍历内部所有节点 |
||||
|
function forEachNode(parent, node, callback){ |
||||
|
if (isBranchNode(node)){ |
||||
|
callback(parent, node) |
||||
|
forEachNode(node, node.children, callback) |
||||
|
node.branchs.map(branchNode => { |
||||
|
callback(node, branchNode) |
||||
|
forEachNode(branchNode, branchNode.children, callback) |
||||
|
}) |
||||
|
} else if (isPrimaryNode(node) || isEmptyNode(node) || isBranchSubNode(node)){ |
||||
|
callback(parent, node) |
||||
|
forEachNode(node, node.children, callback) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//校验所有节点设置 |
||||
|
function validate(err, node){ |
||||
|
if (isPrimaryNode(node)){ |
||||
|
validateNode(err, node) |
||||
|
validate(err, node.children) |
||||
|
} else if (isBranchNode(node)){ |
||||
|
//校验每个分支 |
||||
|
node.branchs.map(branchNode => { |
||||
|
//校验条件节点 |
||||
|
validateNode(err, branchNode) |
||||
|
//校验条件节点后面的节点 |
||||
|
validate(err, branchNode.children) |
||||
|
}) |
||||
|
validate(err, node.children) |
||||
|
} else if (isEmptyNode(node)){ |
||||
|
validate(err, node.children) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
expose({ |
||||
|
validateProcess, |
||||
|
}); |
||||
|
|
||||
|
return () => { |
||||
|
nodeMap.value.clear(); |
||||
|
let processTrees = getDomTree(dom.value); |
||||
|
//插入末端节点 |
||||
|
processTrees.push( |
||||
|
h('div', |
||||
|
{style:{'text-align': 'center'}}, |
||||
|
{ default: () => [h('div', {class:{'process-end': true}, innerHTML:'流程结束'})]} |
||||
|
)); |
||||
|
return h('div', {class:{'_root': true}, ref: rootRef}, { default: () => processTrees }); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
._root{ |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.process-end{ |
||||
|
width: 100px; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 20px; |
||||
|
border-radius: 15px; |
||||
|
padding: 5px 10px; |
||||
|
font-size: small; |
||||
|
color: #747474; |
||||
|
background-color: #f2f2f2; |
||||
|
box-shadow: 0 0 10px 0 #bcbcbc; |
||||
|
} |
||||
|
.primary-node{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.branch-node{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
/*border-top: 2px solid #cccccc; |
||||
|
border-bottom: 2px solid #cccccc;*/ |
||||
|
} |
||||
|
.branch-node-item{ |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
background: white; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
border-top: 2px solid #cccccc; |
||||
|
border-bottom: 2px solid #cccccc; |
||||
|
&:before{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: calc(50% - 1px); |
||||
|
margin: auto; |
||||
|
width: 2px; |
||||
|
height: 100%; |
||||
|
background-color: #CACACA; |
||||
|
} |
||||
|
.line-top-left, .line-top-right, .line-bot-left, .line-bot-right{ |
||||
|
position: absolute; |
||||
|
width: 50%; |
||||
|
height: 4px; |
||||
|
background-color: white; |
||||
|
} |
||||
|
.line-top-left{ |
||||
|
top: -2px; |
||||
|
left: -1px; |
||||
|
} |
||||
|
.line-top-right{ |
||||
|
top: -2px; |
||||
|
right: -1px; |
||||
|
} |
||||
|
.line-bot-left{ |
||||
|
bottom: -2px; |
||||
|
left: -1px; |
||||
|
} |
||||
|
.line-bot-right{ |
||||
|
bottom: -2px; |
||||
|
right: -1px; |
||||
|
} |
||||
|
} |
||||
|
.add-branch-btn{ |
||||
|
position: absolute; |
||||
|
width: 80px; |
||||
|
.add-branch-btn-el{ |
||||
|
z-index: 999; |
||||
|
position: absolute; |
||||
|
top: -15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-node{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue