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