18226920803
1 month ago
4 changed files with 362 additions and 245 deletions
@ -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(); |
||||
} |
} |
||||
|
}); |
||||
|
|
||||
|
const rules = { |
||||
|
modelValue: [ |
||||
|
{ 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'] } |
||||
|
] |
||||
|
}; |
||||
|
|
||||
function onClose() { |
const formRef = ref(); |
||||
Object.assign(form, formDefault); |
|
||||
visibleFlag.value = false; |
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"); |
||||
|
} |
||||
|
|
||||
// ------------------------ 表单 ------------------------ |
function handleDeleteRow(index) { |
||||
|
form.value.listenerRows.splice(index, 1); |
||||
|
} |
||||
|
|
||||
// 组件ref |
function validate() { |
||||
const formRef = ref(); |
return new Promise((resolve) => { |
||||
|
proxy.$nextTick(() => { |
||||
|
proxy.$refs.formRef.validate(valid => { |
||||
|
resolve(valid); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
const formDefault = { |
function nameChange(flowName) { |
||||
id: undefined, |
proxy.$emit('update:flow-name', flowName); |
||||
flowCode: undefined, |
} |
||||
flowName: undefined, |
|
||||
category: undefined, |
|
||||
formCustom: 'N', |
|
||||
formPath: undefined, |
|
||||
listenerRows: [], // 新增初始化监听器数组 |
|
||||
}; |
|
||||
|
|
||||
let form = reactive({ ...formDefault }); |
function modelValueChange() { |
||||
|
proxy.$emit('update:model-value'); |
||||
|
} |
||||
|
|
||||
const rules = { |
function getFormData() { |
||||
flowCode: [{ required: true, message: '请输入流程编码' }], |
form.value.listenerType = form.value.listenerRows.map(row => row.listenerType).join(","); |
||||
flowName: [{ required: true, message: '请输入流程名称' }], |
form.value.listenerPath = form.value.listenerRows.map(row => row.listenerPath).join("@@"); |
||||
formCustom: [{ required: true, message: '请选择审批表单' }], |
return form.value; |
||||
listenerType: [{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }], |
} |
||||
listenerPath: [{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }] |
|
||||
}; |
|
||||
|
|
||||
// 点击确定，验证表单 |
function show(data) { |
||||
async function onSubmit() { |
if (data && data.id) { |
||||
try { |
title.value = '编辑流程定义'; |
||||
await formRef.value.validateFields(); |
Object.assign(form.value, data); |
||||
form.listenerType = form.listenerRows.map(row => row.listenerType).join(",") |
setListenerData(); |
||||
form.listenerPath = form.listenerRows.map(row => row.listenerPath).join("@@") |
visible.value = true; |
||||
console.log(form) |
} else { |
||||
save(); |
router.push({ path: "/flow/flow-design/index/new" }); |
||||
} catch (err) { |
|
||||
message.error('参数验证错误，请仔细填写表单数据!'); |
|
||||
} |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
|
function resetForm() { |
||||
|
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; |
||||
|
|
||||
// 新建、编辑API |
submitLoading.value = true; |
||||
async function save() { |
|
||||
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> |
||||
Loading…
Reference in new issue