koreyoshi
/
smart
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

解决无法保存流程的问题

master
18226920803 1 month ago
parent
c970156568
commit
869f939f01
4 changed files with 362 additions and 245 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      smart-flow-web/src/router/flow/flow.js
  2. 578
      smart-flow-web/src/views/flow/definition/definition-form.vue
  3. 18
      smart-flow-web/src/views/flow/definition/definition-list.vue
  4. 9
      smart-flow-web/src/views/flow/definition/warm-flow.vue

2
smart-flow-web/src/router/flow/flow.js
View File

@ -7,7 +7,7 @@ export const flowRouters = [
permissions: ['flow:definition:design'], permissions: ['flow:definition:design'],
children: [ children: [
{ {
path: 'index/:id(\\d+)', path: 'index/:id',
component: () => import('/@/views/flow/definition/warm-flow.vue'), component: () => import('/@/views/flow/definition/warm-flow.vue'),
name: 'Design', name: 'Design',
meta: { title: '流程设计', activeMenu: '/flow/definition' } meta: { title: '流程设计', activeMenu: '/flow/definition' }

578
smart-flow-web/src/views/flow/definition/definition-form.vue
View File

@ -1,262 +1,374 @@
<template> <template>
<a-modal <a-modal
:title="form.positionId ? '编辑' : '添加'" :title="title"
width="600px" :open="visible"
:open="visibleFlag" :width="1000"
@cancel="onClose" @ok="handleSubmit"
:maskClosable="false" @cancel="handleCancel"
:destroyOnClose="true" :confirmLoading="submitLoading"
forceRender
> >
<a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }"> <el-form ref="formRef" :model="form" class="dialogForm" :rules="rules" label-width="150px" :disabled="disabled">
<a-tabs v-model:activeKey="tabsValue"> <el-form-item label="流程编码" prop="flowCode">
<a-tab-pane key="1" tab="基础设置"/> <el-input v-model="form.flowCode" placeholder="请输入流程编码" maxlength="40" show-word-limit />
<a-tab-pane key="2" tab="监听器" force-render/> </el-form-item>
</a-tabs>
<div v-show="tabsValue === '1'"> <el-form-item label="流程名称" prop="flowName">
<a-form-item label="流程编码" name="flowCode"> <el-input v-model="form.flowName" placeholder="请输入流程名称" maxlength="100" show-word-limit @input="nameChange" />
<a-input style="width: 100%" v-model:value="form.flowCode" placeholder="流程编码" /> </el-form-item>
</a-form-item>
<a-form-item label="流程名称" name="flowName"> <el-form-item label="设计器模型" prop="modelValue">
<a-input style="width: 100%" v-model:value="form.flowName" placeholder="流程名称" /> <el-radio-group v-model="form.modelValue" :disabled="!!definitionId" @change="modelValueChange">
</a-form-item> <el-radio label="CLASSICS">经典模型</el-radio>
<a-form-item label="流程类别" name="category"> <el-radio label="MIMIC">仿钉钉模型
<a-input style="width: 100%" v-model:value="form.category" placeholder="流程类别" /> <span style="color: #ff4949; margin-left: 50px;">切换后重置节点，保存后不支持修改！</span>
</a-form-item> </el-radio>
<a-form-item label="审批表单" name="formCustom"> </el-radio-group>
<a-select v-model:value="form.formCustom" style="width: 100%" :allowClear="true"> </el-form-item>
<a-select-option value="N">表单路径</a-select-option>
</a-select> <el-form-item label="流程类别" prop="category">
</a-form-item> <el-tree-select
<a-form-item label="审批表单路径" name="formPath" v-if="form.formCustom === 'N'"> v-model="form.category"
<a-input style="width: 100%" v-model:value="form.formPath" placeholder="请输入审批表单路径" /> :data="categoryList"
</a-form-item> :props="{ value: 'id', label: 'name', children: 'children' }"
</div> value-key="id"
<div v-show="tabsValue === '2'"> placeholder="请选择流程类别"
<a-form-item name="listenerRows" class="listenerItem"> check-strictly/>
<a-table </el-form-item>
:dataSource="form.listenerRows"
:columns="columns" <el-form-item label="自定义表单" prop="formCustom">
:pagination="false" <el-radio-group v-model="form.formCustom">
size="small" <el-radio label="N">
> <span class="flex-hc">
<template #bodyCell="{ column, record, index }"> 否
<template v-if="column.dataIndex === 'listenerType'"> <el-tooltip class="box-item" effect="dark" placement="top"
<a-form-item content="填写页面地址：如system/process/approve">
:name="['listenerRows', index, 'listenerType']" <el-icon :size="14" class="ml5">
:rules="rules.listenerType" <WarningFilled />
> </el-icon>
<a-select </el-tooltip>
v-model:value="record.listenerType" </span>
placeholder="请选择类型" </el-radio>
> <el-radio label="Y">
<a-select-option value="start">开始</a-select-option> <span class="flex-hc">
<a-select-option value="assignment">分派</a-select-option> 是
<a-select-option value="finish">完成</a-select-option> <el-tooltip class="box-item" effect="dark" placement="top"
<a-select-option value="create">创建</a-select-option> content="填写自定义表单的唯一标识：如formCode+version">
</a-select> <el-icon :size="14" class="ml5">
</a-form-item> <WarningFilled />
</template> </el-icon>
</el-tooltip>
<template v-if="column.dataIndex === 'listenerPath'"> </span>
<a-form-item </el-radio>
:name="['listenerRows', index, 'listenerPath']" </el-radio-group>
:rules="rules.listenerPath" </el-form-item>
>
<a-input <el-form-item label="表单路径" prop="formPath" v-if="form.formCustom === 'N'">
v-model:value="record.listenerPath" <el-input v-model="form.formPath" placeholder="请输入审批表单路径" maxlength="100" show-word-limit/>
placeholder="请输入路径" </el-form-item>
/>
</a-form-item> <el-form-item label="自定义表单唯一标识" prop="formPath" v-else-if="form.formCustom === 'Y'">
</template> <el-tree-select
v-model="form.formPath"
<template v-if="column.dataIndex === 'action'"> :data="formPathList"
<a-button :props="{ value: 'id', label: 'name', children: 'children' }"
type="link" value-key="id"
danger placeholder="请选择流程类别"
size="small" check-strictly/>
@click="handleDeleteRow(index)" </el-form-item>
>
<template #icon><delete-outlined /></template> <el-form-item prop="listenerRows" class="listenerItem">
</a-button> <el-table v-if="form.listenerRows && form.listenerRows.length > 0" :key="form.listenerRows.length" :data="form.listenerRows" style="width: 100%">
</template> <el-table-column prop="listenerType" width="150" label="类型">
<template #default="scope">
<el-form-item :prop="`listenerRows.${scope?.$index}.listenerType`" :rules="rules.listenerType">
<el-select v-model="scope.row.listenerType" placeholder="请选择类型">
<el-option label="开始" value="start"></el-option>
<el-option label="分派" value="assignment"></el-option>
<el-option label="完成" value="finish"></el-option>
<el-option label="创建" value="create"></el-option>
</el-select>
</el-form-item>
</template> </template>
</a-table> </el-table-column>
<a-button <el-table-column prop="listenerPath" label="路径">
type="primary" <template #default="scope">
style="margin-top: 10px" <el-form-item :prop="`listenerRows.${scope?.$index}.listenerPath`" :rules="rules.listenerPath">
@click="handleAddRow" <el-input v-model="scope.row.listenerPath" placeholder="请输入路径" />
> </el-form-item>
增加行 </template>
</a-button> </el-table-column>
</a-form-item>
</div> <el-table-column label="操作" width="65" v-if="!disabled">
</a-form> <template #default="scope">
<el-button size="small" type="danger" icon="Delete" @click="handleDeleteRow(scope?.$index)" />
<template #footer> </template>
<a-space> </el-table-column>
<a-button @click="onClose">取消</a-button> </el-table>
<a-button type="primary" @click="onSubmit">保存</a-button> <el-button v-if="!disabled" style="margin-top: 10px;" type="primary" @click="handleAddRow">增加行</el-button>
</a-space> </el-form-item>
</template> </el-form>
</a-modal>
<a-modal title="流程设计"
:open="designVisible"
width="90%"
:footer="null"
@cancel="closeDesign">
<div style="height: 80vh" class="iframe-wrapper">
<iframe :src="designIframeUrl" style="width: 100%; height: 100%" frameborder="0" scrolling="no" class="custom-iframe" />
</div>
</a-modal> </a-modal>
</template> </template>
<script setup>
import { reactive, ref, nextTick } from 'vue';
import _ from 'lodash';
import { message } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { definitionApi } from '/@/api/flow/definition-api';
import { smartSentry } from '/@/lib/smart-sentry';
// ------------------------ 事件 ------------------------
const emits = defineEmits(['reloadList']);
// ------------------------ 显示与隐藏 ------------------------
// 是否显示
const visibleFlag = ref(false);
// 显示标签页
const tabsValue = ref('1');
const columns = [
{
title: '类型',
dataIndex: 'listenerType',
width: 150,
},
{
title: '路径',
dataIndex: 'listenerPath',
},
{
title: '操作',
dataIndex: 'action',
width: 65,
},
];
function handleAddRow() {
form.listenerRows.push({
listenerType: undefined, // 初始未选择类型
listenerPath: '' // 初始空路径
});
}
function handleDeleteRow(index) {
form.listenerRows.splice(index, 1);
}
function show(rowData) { <script setup name="BaseInfo">
Object.assign(form, formDefault); import { ref, getCurrentInstance, watch } from "vue";
if (rowData && !_.isEmpty(rowData)) { import { useRouter } from "vue-router";
Object.assign(form, rowData); import { WarningFilled } from "@element-plus/icons-vue";
import { message } from 'ant-design-vue';
import { definitionApi } from '/@/api/flow/definition-api';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
import { useUserStore } from "/@/store/modules/system/user.js";
const router = useRouter();
const { proxy } = getCurrentInstance();
const emit = defineEmits(['reloadList']);
const props = defineProps({
disabled: {
type: Boolean,
default: false
},
logicJson: {
type: Object,
default () {
return {}
} }
if (rowData.listenerType) { },
const listenerTypes = rowData.listenerType.split(","); categoryList: {
const listenerPaths = rowData.listenerPath.split("@@"); type: Array,
form.listenerRows = listenerTypes.map((type, index) => ({ default () {
listenerType: type, return []
listenerPath: listenerPaths[index]
}));
} else {
form.listenerRows = [];
} }
visibleFlag.value = true; },
nextTick(() => { formPathList: {
formRef.value.clearValidate(); type: Array,
default () {
// 解决弹窗错误信息显示,没有可忽略 return []
const domArr = document.getElementsByClassName('ant-modal'); }
if (domArr && domArr.length > 0) { },
Array.from(domArr).forEach((item) => { definitionId: {
if (item.childNodes && item.childNodes.length > 0) { type: String,
Array.from(item.childNodes).forEach((child) => { default () {
if (child.setAttribute) { return null
child.setAttribute('aria-hidden', 'false'); }
} },
}); });
}
}); const visible = ref(false);
} const title = ref('新增流程定义');
}); const submitLoading = ref(false);
const designVisible = ref(false);
const designIframeUrl = ref("");
const form = ref({
id: null,
flowCode: "",
flowName: "",
modelValue: "",
category: "",
formCustom: "N",
formPath: "",
listenerType: "",
listenerPath: "",
listenerRows: []
});
watch(() => props.logicJson, newValue => {
if (newValue && Object.keys(newValue).length > 0) {
Object.assign(form.value, newValue);
setListenerData();
} }
});
function onClose() { const rules = {
Object.assign(form, formDefault); modelValue: [
visibleFlag.value = false; { required: true, message: "设计器模型不能为空", trigger: "blur" }
],
flowCode: [
{ required: true, message: "流程编码不能为空", trigger: "blur" }
],
flowName: [
{ required: true, message: "流程名称不能为空", trigger: "blur" }
],
formCustom: [
{ required: true, message: "请选择审批表单是否自定义", trigger: "change" }
],
listenerType: [
{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }
],
listenerPath: [
{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }
]
};
const formRef = ref();
function setListenerData() {
if (form.value.listenerType) {
const listenerTypes = form.value.listenerType.split(",");
const listenerPaths = form.value.listenerPath.split("@@");
form.value.listenerRows = listenerTypes.map((type, index) => ({
listenerType: type,
listenerPath: listenerPaths[index]
}));
} else {
form.value.listenerRows = [];
} }
}
// ------------------------ 表单 ------------------------ function handleAddRow() {
form.value.listenerRows.push({ listenerType: "", listenerPath: "" });
formRef.value?.clearValidate("listenerRows");
}
// 组件ref function handleDeleteRow(index) {
const formRef = ref(); form.value.listenerRows.splice(index, 1);
}
const formDefault = { function validate() {
id: undefined, return new Promise((resolve) => {
flowCode: undefined, proxy.$nextTick(() => {
flowName: undefined, proxy.$refs.formRef.validate(valid => {
category: undefined, resolve(valid);
formCustom: 'N', });
formPath: undefined, });
listenerRows: [], // 新增初始化监听器数组 });
}; }
let form = reactive({ ...formDefault }); function nameChange(flowName) {
proxy.$emit('update:flow-name', flowName);
}
const rules = { function modelValueChange() {
flowCode: [{ required: true, message: '请输入流程编码' }], proxy.$emit('update:model-value');
flowName: [{ required: true, message: '请输入流程名称' }], }
formCustom: [{ required: true, message: '请选择审批表单' }],
listenerType: [{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }],
listenerPath: [{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }]
};
// 点击确定，验证表单 function getFormData() {
async function onSubmit() { form.value.listenerType = form.value.listenerRows.map(row => row.listenerType).join(",");
try { form.value.listenerPath = form.value.listenerRows.map(row => row.listenerPath).join("@@");
await formRef.value.validateFields(); return form.value;
form.listenerType = form.listenerRows.map(row => row.listenerType).join(",") }
form.listenerPath = form.listenerRows.map(row => row.listenerPath).join("@@")
console.log(form) function show(data) {
save(); if (data && data.id) {
} catch (err) { title.value = '编辑流程定义';
message.error('参数验证错误，请仔细填写表单数据!'); Object.assign(form.value, data);
} setListenerData();
visible.value = true;
} else {
router.push({ path: "/flow/flow-design/index/new" });
} }
}
// 新建、编辑API function resetForm() {
async function save() { form.value = {
id: null,
flowCode: "",
flowName: "",
modelValue: "",
category: "",
formCustom: "N",
formPath: "",
listenerType: "",
listenerPath: "",
listenerRows: []
};
}
function handleCancel() {
visible.value = false;
resetForm();
}
async function handleSubmit() {
try {
const valid = await validate();
if (!valid) return;
submitLoading.value = true;
SmartLoading.show(); SmartLoading.show();
try {
if (form.id) { const formData = getFormData();
await definitionApi.update(form);
} else { if (formData.id) {
await definitionApi.add(form); await definitionApi.update(formData);
message.success('修改成功');
} else {
const result = await definitionApi.add(formData);
message.success('新增成功');
visible.value = false;
resetForm();
if (result.data && result.data.id) {
designIframeUrl.value = import.meta.env.VITE_APP_API_URL +
`/warm-flow-ui/index.html?id=${result.data.id}&disabled=false&Authorization=Bearer ` +
useUserStore().getToken +
'&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
designVisible.value = true;
} }
message.success('操作成功'); return;
emits('reloadList');
onClose();
} catch (err) {
smartSentry.captureError(err);
} finally {
SmartLoading.hide();
} }
visible.value = false;
resetForm();
emit('reloadList');
} catch (e) {
smartSentry.captureError(e);
} finally {
submitLoading.value = false;
SmartLoading.hide();
} }
}
function closeDesign() {
designVisible.value = false;
emit('reloadList');
}
defineExpose({ getFormData, validate, show });
defineExpose({
show,
});
</script> </script>
<style scoped> <style scoped>
/* 关键优化点：覆盖表单项和表格边距 */ :deep(.Tabs) {
.listenerItem :deep() .ant-form-item { margin-top: -20px;
margin-top: 5px !important; box-shadow: none;
margin-bottom: 5px !important; border-bottom: 0;
}
:deep(.Tabs .el-tabs__content) {
display: none;
}
:deep(.Tabs .el-tabs__item.is-active) {
margin-left: 0;
border-top: 1px solid var(--el-border-color);
margin-top: 0;
}
.dialogForm {
border-top: 0;
padding: 15px;
width: 1000px;
margin: 50px auto;
}
:deep(.listenerItem .el-form-item__label) {
float: none;
display: inline-block;
text-align: left;
} }
.listenerItem :deep() .ant-table { :deep(.listenerItem .el-form-item__content) {
margin-top: 5px !important; margin-left: 0 !important;
margin-bottom: 5px !important;
} }
</style> </style>

18
smart-flow-web/src/views/flow/definition/definition-list.vue
View File

@ -218,6 +218,13 @@
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {useUserStore} from "/@/store/modules/system/user.js"; import {useUserStore} from "/@/store/modules/system/user.js";
// ---------------------------- 添加/修改 ----------------------------
const formRef = ref();
function showForm(data) {
formRef.value.show(data);
}
// ---------------------------- 表格列 ---------------------------- // ---------------------------- 表格列 ----------------------------
const columns = ref([ const columns = ref([
@ -318,14 +325,7 @@
onMounted(queryData); onMounted(queryData);
// ---------------------------- 添加/修改 ---------------------------- // ---------------------------- 导入相关 ----------------------------
const formRef = ref();
function showForm(data) {
formRef.value.show(data);
}
// 响应式数据
const upload = reactive({ const upload = reactive({
open: false, open: false,
isUploading: false, isUploading: false,
@ -588,4 +588,4 @@
flowChart.value = false; flowChart.value = false;
}; };
</script> </script>

9
smart-flow-web/src/views/flow/definition/warm-flow.vue
View File

@ -10,7 +10,12 @@ import {useUserStore} from "/@/store/modules/system/user.js";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
import {getCurrentInstance, onMounted, onUnmounted, ref} from 'vue'; import {getCurrentInstance, onMounted, onUnmounted, ref} from 'vue';
const iframeUrl = ref(import.meta.env.VITE_APP_API_URL + `/warm-flow-ui/index.html?id=${proxy.$route.params.id}&disabled=${proxy.$route.query.disabled}&Authorization=Bearer ` + useUserStore().getToken); const routeId = proxy.$route.params.id;
const isNew = routeId === 'new';
const iframeUrl = ref(isNew
? import.meta.env.VITE_APP_API_URL + `/warm-flow-ui/index.html?disabled=false&Authorization=Bearer ` + useUserStore().getToken
: import.meta.env.VITE_APP_API_URL + `/warm-flow-ui/index.html?id=${routeId}&disabled=false&Authorization=Bearer ` + useUserStore().getToken
);
onMounted(() => { onMounted(() => {
window.addEventListener("message", handleMessage); window.addEventListener("message", handleMessage);
@ -40,4 +45,4 @@ function close() {
width: 100%; width: 100%;
height: calc(100vh - 84px); height: calc(100vh - 84px);
} }
</style> </style>
Write Preview
Loading…
Cancel
Save