192 lines
8.5 KiB
HTML
192 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<title>流程设计器</title>
|
|
<script src="/assets/platform/plugins/vue/vue.js"></script>
|
|
<script src="/assets/platform/plugins/jquery/jquery.js"></script>
|
|
<script src="/assets/platform/plugins/element-ui/lib/index.js"></script>
|
|
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css" />
|
|
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index_custom.css" />
|
|
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/override.css" />
|
|
<link rel="stylesheet" href="${base!}/assets/platform/css/root.css" />
|
|
<!-- 引入 core 包和对应 css-->
|
|
<script src="/assets/platform/plugins/logicflow/logic-flow.js"></script>
|
|
<link rel="stylesheet" href="/assets/platform/plugins/logicflow/index.css" />
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/@logicflow/core@1.2.12/dist/logic-flow.js"></script>-->
|
|
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/core@1.2.12/dist/style/index.css" />-->
|
|
<script src="/assets/platform/plugins/snaker/SnakerflowDesigner.umd.js"></script>
|
|
<style>
|
|
#app {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<snaker-flow-designer
|
|
ref="designer"
|
|
v-model="flowData"
|
|
@on-save="handleSave"
|
|
:show-doc="false"
|
|
node-render-type="html"
|
|
:extend-property-keys="[
|
|
'candidateUsers',
|
|
'candidateGroups',
|
|
'candidateHandler',
|
|
'assigneeText',
|
|
'assigneeMode',
|
|
'buttonConfig',
|
|
'enableNextOperator',
|
|
'h5form'
|
|
]"
|
|
>
|
|
<template v-slot:form-item-task-form="{model,field}">
|
|
<el-form-item label="pc跳转地址">
|
|
<el-input placeholder="请输入pc跳转地址" clearable v-model="model[field]"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="h5跳转地址">
|
|
<el-input placeholder="请输入h5跳转地址" clearable v-model="model['h5form']"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<template v-slot:form-item-task-assignee="{model,field}">
|
|
<assignee-form :model="model" :field="field" :start_node_next_node_ids="startNodeNextNodeIds"></assignee-form>
|
|
</template>
|
|
|
|
<template v-slot:form-item-task-assignment-handler="{model,field}">
|
|
<el-form-item label="参与者处理类">
|
|
<el-select v-model="model[field]" style="width: 100%" clearable :disabled="startNodeNextNodeIds.includes(model.name)">
|
|
<el-option
|
|
v-for="item in assignmentHandlerClassOptions"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
:label="item.name"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<template v-slot:form-item-task-candidate-handler="{model,field}">
|
|
<el-form-item label="候选者处理类">
|
|
<el-select v-model="model[field]" style="width: 100%" clearable :disabled="startNodeNextNodeIds.includes(model.name)">
|
|
<el-option
|
|
v-for="item in candidateHandlerClassOptions"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
:label="item.name"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<template v-slot="{model,field}">
|
|
<el-form-item label="指定下一步处理人">
|
|
<el-checkbox v-model="model['enableNextOperator']">指定下一步处理人</el-checkbox>
|
|
</el-form-item>
|
|
|
|
<button-config :model="model" :field="field"></button-config>
|
|
</template>
|
|
|
|
<!-- <template v-slot="{model,field}">-->
|
|
<!-- <el-form-item label="表单查看URL">-->
|
|
<!-- <el-input v-model="model[instanceViewUrl]"></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </template>-->
|
|
</snaker-flow-designer>
|
|
</div>
|
|
</body>
|
|
<script nonce="${cspNonce!}">
|
|
<!--#include('assigneeForm.js'){}#-->
|
|
<!--#include('buttonConfig.js'){}#-->
|
|
|
|
Vue.use(SnakerflowDesigner.default)
|
|
const vue = new Vue({
|
|
el: "#app",
|
|
components: {
|
|
"assignee-form": assigneeForm,
|
|
"button-config": buttonConfig
|
|
},
|
|
data() {
|
|
return {
|
|
id: "${id!}",
|
|
designerData: {},
|
|
flowData: {},
|
|
assignmentHandlerClassOptions: [],
|
|
candidateHandlerClassOptions: []
|
|
}
|
|
},
|
|
computed: {
|
|
startNodeNextNodeIds() {
|
|
if (this.$refs.designer && this.$refs.designer.lf) {
|
|
const graphData = this.$refs.designer.lf.getGraphData()
|
|
if (graphData) {
|
|
const { nodes, edges } = graphData
|
|
const startNode = nodes.find((v) => v.type === "snaker:start")
|
|
if (startNode) {
|
|
const targetNodeIds = edges.filter((v) => v.sourceNodeId === startNode.id).map((v) => v.targetNodeId)
|
|
return targetNodeIds
|
|
}
|
|
}
|
|
}
|
|
return []
|
|
}
|
|
},
|
|
methods: {
|
|
handleSave(val) {
|
|
const design = {
|
|
...this.designerData,
|
|
content: val.json
|
|
}
|
|
$.post("/flow/design/updateContent", { design: JSON.stringify(design) }).then((res) => {
|
|
if (res.code === 0) {
|
|
window.parent.postMessage("success")
|
|
} else {
|
|
window.parent.postMessage("error")
|
|
}
|
|
})
|
|
},
|
|
getDetail() {
|
|
$.get("/flow/design/detail", { id: this.id }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.designerData = res.data
|
|
if (res.data.content) {
|
|
this.flowData = res.data.content
|
|
} else {
|
|
this.flowData = {}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
init() {
|
|
$.get("/flow/design/assigmentHandlerClass").then((res) => {
|
|
if (res.code === 0) {
|
|
this.assignmentHandlerClassOptions = res.data
|
|
}
|
|
})
|
|
$.get("/flow/design/candidateHandlerClass").then((res) => {
|
|
if (res.code === 0) {
|
|
this.candidateHandlerClassOptions = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
getData() {
|
|
console.log(this.$refs.designer)
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
mounted() {
|
|
if (this.id) {
|
|
this.getDetail()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|