Merge branch 'ly' into dev
commit
b2c621ffbb
|
|
@ -60,11 +60,14 @@ export interface RoleListItem {
|
|||
orderNo: string;
|
||||
createTime: string;
|
||||
}
|
||||
export interface addDept{
|
||||
name:string,
|
||||
parentId:string,
|
||||
parentName:string,
|
||||
status:number
|
||||
export interface addDept {
|
||||
name: string,
|
||||
parentId: string,
|
||||
parentName: string,
|
||||
status: number
|
||||
}
|
||||
export interface PositionByOrgParams {
|
||||
orgid: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
RoleParams,
|
||||
RolePageParams,
|
||||
MenuListGetResultModel,
|
||||
MenuDetailGetResultModel,
|
||||
PositionByOrgParams,
|
||||
DeptListGetResultModel,
|
||||
AccountListGetResultModel,
|
||||
RolePageListGetResultModel,
|
||||
|
|
@ -44,13 +44,15 @@ enum Api {
|
|||
OrgPosGroup = '/api/Orgs/OrgPosGroup',
|
||||
UserRoles = '/api/Users/UserRoles',
|
||||
OrgPositonTree = '/api/Orgs/OrgPositonTree',
|
||||
UserOrgs ='/api/Users/UserOrgs',
|
||||
AssignModule='/api/Roles/AssignModule',
|
||||
LoadForRole='/api/Modules/LoadForRole',
|
||||
LoadByRole='/api/Users/LoadByRole',
|
||||
UserOrgs = '/api/Users/UserOrgs',
|
||||
AssignModule = '/api/Roles/AssignModule',
|
||||
LoadForRole = '/api/Modules/LoadForRole',
|
||||
LoadByRole = '/api/Users/LoadByRole',
|
||||
IsAccountExist = '/system/accountExist',
|
||||
setRoleStatus = '/system/setRoleStatus',
|
||||
GetAllRoleList = '/system/getAllRoleList',
|
||||
LoadPositionByOrg = '/api/SysPosition/LoadPositionByOrg',
|
||||
LoadDataBaseLinkTree = '/api/SysDatabaseLink/LoadDataBaseLinkTree',
|
||||
}
|
||||
|
||||
export const getPositionsTree = (params: AccountParams) =>
|
||||
|
|
@ -74,10 +76,10 @@ export const getOrgList = (params?: DeptListItem) =>
|
|||
export const getOrgPositonTree = (params?: DeptListItem) =>
|
||||
defHttp.get<DeptListGetResultModel>({ url: Api.OrgPositonTree, params });
|
||||
|
||||
export const loadForRole = (params?: DeptListItem) =>
|
||||
export const loadForRole = (params?: DeptListItem) =>
|
||||
defHttp.get<DeptListGetResultModel>({ url: Api.LoadForRole, params });
|
||||
|
||||
export const loadByRole = (params?: DeptListItem) =>
|
||||
|
||||
export const loadByRole = (params?: DeptListItem) =>
|
||||
defHttp.get<DeptListGetResultModel>({ url: Api.LoadByRole, params });
|
||||
|
||||
export function addAccount(params) {
|
||||
|
|
@ -269,3 +271,11 @@ export const setRoleStatus = (id: number, status: string) =>
|
|||
|
||||
export const isAccountExist = (account: string) =>
|
||||
defHttp.post({ url: Api.IsAccountExist, params: { account } }, { errorMessageMode: 'none' });
|
||||
|
||||
export const getLoadPositionByOrg = (params?: PositionByOrgParams) =>
|
||||
defHttp.get<RolePageListGetResultModel>({ url: Api.LoadPositionByOrg, params });
|
||||
|
||||
export const getLoadDataBaseLinkTree = (params) =>
|
||||
defHttp.get({ url: Api.LoadDataBaseLinkTree, params });
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div class="process-design" :style="'display: flex; height:' + height">
|
||||
<bpmn-process-designer
|
||||
v-model="xmlString"
|
||||
v-bind="controlForm"
|
||||
keyboard
|
||||
ref="processDesigner"
|
||||
:events="[
|
||||
'element.click',
|
||||
'connection.added',
|
||||
'connection.removed',
|
||||
'connection.changed'
|
||||
]"
|
||||
@element-click="elementClick"
|
||||
@init-finished="initModeler"
|
||||
@event="handlerEvent"
|
||||
@save="onSaveProcess"
|
||||
/>
|
||||
<!-- <bmpn-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './plugins/package/theme/index.scss';
|
||||
import { BpmnProcessDesigner, BmpnProcessPenal } from './plugins/package/index';
|
||||
|
||||
export default {
|
||||
name: 'ProcessDesigner',
|
||||
props: {
|
||||
bpmnXml: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
designerForm: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BpmnProcessDesigner,
|
||||
BmpnProcessPenal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 94.5 + "px;",
|
||||
xmlString: props.bpmnXml,
|
||||
modeler: null,
|
||||
controlForm: {
|
||||
processId: props.designerForm.processKey || '',
|
||||
processName: props.designerForm.processName || '',
|
||||
simulation: false,
|
||||
labelEditing: false,
|
||||
labelVisible: false,
|
||||
prefix: 'flowable',
|
||||
headerButtonSize: 'small',
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
elementClick (element) {
|
||||
this.element = element;
|
||||
},
|
||||
initModeler (modeler) {
|
||||
setTimeout(() => {
|
||||
this.modeler = modeler;
|
||||
}, 10);
|
||||
},
|
||||
handlerEvent (eventName, element) {
|
||||
},
|
||||
onSaveProcess (saveData) {
|
||||
this.$emit('save', saveData);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
overflow: auto !important;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,
|
||||
body * {
|
||||
/* 滚动条 */
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #fff; /*滚动条的背景颜色*/
|
||||
-webkit-border-radius: 0; /*滚动条的圆角宽度*/
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px; /*滚动条的宽度*/
|
||||
height: 8px; /*滚动条的高度*/
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:vertical {
|
||||
/*垂直滚动条的样式*/
|
||||
height: 50px;
|
||||
background-color: rgba(153, 153, 153, 0.5);
|
||||
-webkit-border-radius: 4px;
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条的hover样式*/
|
||||
background-color: rgba(159, 159, 159, 0.3);
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
/*滚动条的hover样式*/
|
||||
background-color: rgba(159, 159, 159, 0.5);
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import store from '@/store'
|
||||
|
||||
function authPermission(permission) {
|
||||
const all_permission = "*:*:*";
|
||||
const permissions = store.getters && store.getters.permissions
|
||||
if (permission && permission.length > 0) {
|
||||
return permissions.some(v => {
|
||||
return all_permission === v || v === permission
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function authRole(role) {
|
||||
const super_admin = "admin";
|
||||
const roles = store.getters && store.getters.roles
|
||||
if (role && role.length > 0) {
|
||||
return roles.some(v => {
|
||||
return super_admin === v || v === role
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
// 验证用户是否具备某权限
|
||||
hasPermi(permission) {
|
||||
return authPermission(permission);
|
||||
},
|
||||
// 验证用户是否含有指定权限，只需包含其中一个
|
||||
hasPermiOr(permissions) {
|
||||
return permissions.some(item => {
|
||||
return authPermission(item)
|
||||
})
|
||||
},
|
||||
// 验证用户是否含有指定权限，必须全部拥有
|
||||
hasPermiAnd(permissions) {
|
||||
return permissions.every(item => {
|
||||
return authPermission(item)
|
||||
})
|
||||
},
|
||||
// 验证用户是否具备某角色
|
||||
hasRole(role) {
|
||||
return authRole(role);
|
||||
},
|
||||
// 验证用户是否含有指定角色，只需包含其中一个
|
||||
hasRoleOr(roles) {
|
||||
return roles.some(item => {
|
||||
return authRole(item)
|
||||
})
|
||||
},
|
||||
// 验证用户是否含有指定角色，必须全部拥有
|
||||
hasRoleAnd(roles) {
|
||||
return roles.every(item => {
|
||||
return authRole(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
const sessionCache = {
|
||||
set (key, value) {
|
||||
if (!sessionStorage) {
|
||||
return
|
||||
}
|
||||
if (key != null && value != null) {
|
||||
sessionStorage.setItem(key, value)
|
||||
}
|
||||
},
|
||||
get (key) {
|
||||
if (!sessionStorage) {
|
||||
return null
|
||||
}
|
||||
if (key == null) {
|
||||
return null
|
||||
}
|
||||
return sessionStorage.getItem(key)
|
||||
},
|
||||
setJSON (key, jsonValue) {
|
||||
if (jsonValue != null) {
|
||||
this.set(key, JSON.stringify(jsonValue))
|
||||
}
|
||||
},
|
||||
getJSON (key) {
|
||||
const value = this.get(key)
|
||||
if (value != null) {
|
||||
return JSON.parse(value)
|
||||
}
|
||||
},
|
||||
remove (key) {
|
||||
sessionStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
const localCache = {
|
||||
set (key, value) {
|
||||
if (!localStorage) {
|
||||
return
|
||||
}
|
||||
if (key != null && value != null) {
|
||||
localStorage.setItem(key, value)
|
||||
}
|
||||
},
|
||||
get (key) {
|
||||
if (!localStorage) {
|
||||
return null
|
||||
}
|
||||
if (key == null) {
|
||||
return null
|
||||
}
|
||||
return localStorage.getItem(key)
|
||||
},
|
||||
setJSON (key, jsonValue) {
|
||||
if (jsonValue != null) {
|
||||
this.set(key, JSON.stringify(jsonValue))
|
||||
}
|
||||
},
|
||||
getJSON (key) {
|
||||
const value = this.get(key)
|
||||
if (value != null) {
|
||||
return JSON.parse(value)
|
||||
}
|
||||
},
|
||||
remove (key) {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
/**
|
||||
* 会话级缓存
|
||||
*/
|
||||
session: sessionCache,
|
||||
/**
|
||||
* 本地缓存
|
||||
*/
|
||||
local: localCache
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import axios from 'axios'
|
||||
import {Loading, Message} from 'element-ui'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import errorCode from '@/utils/errorCode'
|
||||
import { blobValidate } from "@/utils/ruoyi";
|
||||
|
||||
const baseURL = process.env.VUE_APP_BASE_API
|
||||
let downloadLoadingInstance;
|
||||
|
||||
export default {
|
||||
oss(ossId) {
|
||||
var url = baseURL + '/system/oss/download/' + ossId
|
||||
downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
responseType: 'blob',
|
||||
headers: { 'Authorization': 'Bearer ' + getToken() }
|
||||
}).then((res) => {
|
||||
const isBlob = blobValidate(res.data);
|
||||
if (isBlob) {
|
||||
const blob = new Blob([res.data], { type: 'application/octet-stream' })
|
||||
this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
|
||||
} else {
|
||||
this.printErrMsg(res.data);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
}).catch((r) => {
|
||||
console.error(r)
|
||||
Message.error('下载文件出现错误，请联系管理员！')
|
||||
downloadLoadingInstance.close();
|
||||
})
|
||||
},
|
||||
zip(url, name) {
|
||||
var url = baseURL + url
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
responseType: 'blob',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
'datasource': localStorage.getItem("dataName")
|
||||
}
|
||||
}).then((res) => {
|
||||
const isBlob = blobValidate(res.data);
|
||||
if (isBlob) {
|
||||
const blob = new Blob([res.data], { type: 'application/zip' })
|
||||
this.saveAs(blob, name)
|
||||
} else {
|
||||
this.printErrMsg(res.data);
|
||||
}
|
||||
})
|
||||
},
|
||||
saveAs(text, name, opts) {
|
||||
saveAs(text, name, opts);
|
||||
},
|
||||
async printErrMsg(data) {
|
||||
const resText = await data.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
|
||||
Message.error(errMsg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import tab from './tab'
|
||||
import auth from './auth'
|
||||
import cache from './cache'
|
||||
import modal from './modal'
|
||||
import download from './download'
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
// 页签操作
|
||||
Vue.prototype.$tab = tab
|
||||
// 认证对象
|
||||
Vue.prototype.$auth = auth
|
||||
// 缓存对象
|
||||
Vue.prototype.$cache = cache
|
||||
// 模态框对象
|
||||
Vue.prototype.$modal = modal
|
||||
// 下载文件
|
||||
Vue.prototype.$download = download
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import { Message, MessageBox, Notification, Loading } from 'element-ui'
|
||||
|
||||
let loadingInstance;
|
||||
|
||||
export default {
|
||||
// 消息提示
|
||||
msg(content) {
|
||||
Message.info(content)
|
||||
},
|
||||
// 错误消息
|
||||
msgError(content) {
|
||||
Message.error(content)
|
||||
},
|
||||
// 成功消息
|
||||
msgSuccess(content) {
|
||||
Message.success(content)
|
||||
},
|
||||
// 警告消息
|
||||
msgWarning(content) {
|
||||
Message.warning(content)
|
||||
},
|
||||
// 弹出提示
|
||||
alert(content) {
|
||||
MessageBox.alert(content, "系统提示")
|
||||
},
|
||||
// 错误提示
|
||||
alertError(content) {
|
||||
MessageBox.alert(content, "系统提示", { type: 'error' })
|
||||
},
|
||||
// 成功提示
|
||||
alertSuccess(content) {
|
||||
MessageBox.alert(content, "系统提示", { type: 'success' })
|
||||
},
|
||||
// 警告提示
|
||||
alertWarning(content) {
|
||||
MessageBox.alert(content, "系统提示", { type: 'warning' })
|
||||
},
|
||||
// 通知提示
|
||||
notify(content) {
|
||||
Notification.info(content)
|
||||
},
|
||||
// 错误通知
|
||||
notifyError(content) {
|
||||
Notification.error(content);
|
||||
},
|
||||
// 成功通知
|
||||
notifySuccess(content) {
|
||||
Notification.success(content)
|
||||
},
|
||||
// 警告通知
|
||||
notifyWarning(content) {
|
||||
Notification.warning(content)
|
||||
},
|
||||
// 确认窗体
|
||||
confirm(content) {
|
||||
return MessageBox.confirm(content, "系统提示", {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: "warning",
|
||||
})
|
||||
},
|
||||
// 提交内容
|
||||
prompt(content) {
|
||||
return MessageBox.prompt(content, "系统提示", {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: "warning",
|
||||
})
|
||||
},
|
||||
// 打开遮罩层
|
||||
loading(content) {
|
||||
loadingInstance = Loading.service({
|
||||
lock: true,
|
||||
text: content,
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
})
|
||||
},
|
||||
// 关闭遮罩层
|
||||
closeLoading() {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<div class="my-process-designer">
|
||||
<div class="my-process-designer__header">
|
||||
<slot name="control-header"></slot>
|
||||
<template >
|
||||
<el-button-group key="file-control">
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</div>
|
||||
<div class="my-process-designer__container">
|
||||
<div class="my-process-designer__canvas" ref="bpmn-canvas" id="bpmn-canvas"></div>
|
||||
</div>
|
||||
<el-dialog title="预览" width="60%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
|
||||
<highlightjs :language="previewType" :code="previewResult" style="height: 60vh" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive,onMounted,defineEmits ,defineProps} from 'vue'
|
||||
// 生产环境时优化
|
||||
// const BpmnModeler = window.BpmnJS;
|
||||
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||
import DefaultEmptyXML from "./plugins/defaultEmpty";
|
||||
// 翻译方法
|
||||
import customTranslate from "./plugins/translate/customTranslate.ts";
|
||||
|
||||
import MoveModule from 'diagram-js/lib/features/move'
|
||||
import ModelingModule from 'bpmn-js/lib/features/modeling'
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
|
||||
// 引入json转换与高亮
|
||||
import convert from "xml-js";
|
||||
const emit = defineEmits(['init-finished', 'event', 'commandStack-changed', 'input', 'change', 'canvas-viewbox-changed', 'destroy', 'save', 'element-click', 'connection-added', 'connection-removed', 'connection-changed']);
|
||||
const props = defineProps({
|
||||
value: String, // xml 字符串
|
||||
processId: String,
|
||||
processName: String,
|
||||
translations: Object, // 自定义的翻译文件
|
||||
additionalModel: [Object, Array], // 自定义model
|
||||
moddleExtension: Object, // 自定义moddle
|
||||
onlyCustomizeAddi: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onlyCustomizeModdle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
simulation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "flowable"
|
||||
},
|
||||
events: {
|
||||
type: Array,
|
||||
default: () => ["element.click"]
|
||||
},
|
||||
headerButtonSize: {
|
||||
type: String,
|
||||
default: "small",
|
||||
validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
|
||||
},
|
||||
headerButtonType: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
|
||||
}
|
||||
})
|
||||
const data = reactive({
|
||||
defaultZoom: 1,
|
||||
previewModelVisible: false,
|
||||
simulationStatus: false,
|
||||
previewResult: "",
|
||||
previewType: "xml",
|
||||
recoverable: false,
|
||||
revocable: false,
|
||||
bpmnModeler:'',
|
||||
})
|
||||
onMounted(() => {
|
||||
initBpmnModeler();
|
||||
createNewDiagram(props.value);
|
||||
})
|
||||
function onSave() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (data.bpmnModeler == null) {
|
||||
reject();
|
||||
}
|
||||
data.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
emit('save', xml);
|
||||
resolve(xml);
|
||||
});
|
||||
})
|
||||
}
|
||||
function initBpmnModeler() {
|
||||
if (data.bpmnModeler) return;
|
||||
const containerEl = document.querySelector('#bpmn-canvas');
|
||||
data.bpmnModeler = new BpmnModeler({
|
||||
container: '#bpmn-canvas',
|
||||
keyboard: props.keyboard ? { bindTo: document } : null,
|
||||
additionalModules: this.additionalModules,
|
||||
moddleExtensions: this.moddleExtensions
|
||||
});
|
||||
$emit("init-finished", data.bpmnModeler);
|
||||
initModelListeners();
|
||||
}
|
||||
function initModelListeners() {
|
||||
const EventBus = data.bpmnModeler.get("eventBus");
|
||||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||
this.events.forEach(event => {
|
||||
EventBus.on(event, function (eventObj) {
|
||||
let eventName = event.replace(/\./g, "-");
|
||||
let element = eventObj ? eventObj.element : null;
|
||||
emit(eventName, element, eventObj);
|
||||
emit('event', eventName, element, eventObj);
|
||||
});
|
||||
});
|
||||
// 监听图形改变返回xml
|
||||
EventBus.on("commandStack.changed", async event => {
|
||||
try {
|
||||
this.recoverable = data.bpmnModeler.get("commandStack").canRedo();
|
||||
this.revocable = data.bpmnModeler.get("commandStack").canUndo();
|
||||
let { xml } = await data.bpmnModeler.saveXML({ format: true });
|
||||
emit("commandStack-changed", event);
|
||||
emit("input", xml);
|
||||
emit("change", xml);
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
}
|
||||
});
|
||||
// 监听视图缩放变化
|
||||
data.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
|
||||
this.$emit("canvas-viewbox-changed", { viewbox });
|
||||
const { scale } = viewbox;
|
||||
data.defaultZoom = Math.floor(scale * 100) / 100;
|
||||
});
|
||||
}
|
||||
/* 创建新的流程图 */
|
||||
async function createNewDiagram(xml) {
|
||||
// 将字符串转换成图显示出来
|
||||
let newId = props.processId || `Process_${new Date().getTime()}`;
|
||||
let newName = props.processName || `业务流程_${new Date().getTime()}`;
|
||||
let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix);
|
||||
try {
|
||||
let { warnings } = await data.bpmnModeler.importXML(xmlString);
|
||||
if (warnings && warnings.length) {
|
||||
warnings.forEach(warn => console.warn(warn));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 下载流程图到本地
|
||||
async function downloadProcess(type, name) {
|
||||
try {
|
||||
const _this = this;
|
||||
// 按需要类型创建文件并下载
|
||||
if (type === "xml" || type === "bpmn") {
|
||||
const { err, xml } = await data.bpmnModeler.saveXML();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
console.error(`[Process Designer Warn ]: ${err.message || err}`);
|
||||
}
|
||||
let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
|
||||
downloadFunc(href, filename);
|
||||
} else {
|
||||
const { err, svg } = await data.bpmnModeler.saveSVG();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
return console.error(err);
|
||||
}
|
||||
let { href, filename } = setEncoded("SVG", name, svg);
|
||||
downloadFunc(href, filename);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn ]: ${e.message || e}`);
|
||||
}
|
||||
// 文件下载方法
|
||||
function downloadFunc(href, filename) {
|
||||
if (href && filename) {
|
||||
let a = document.createElement("a");
|
||||
a.download = filename; //指定下载的文件名
|
||||
a.href = href; // URL对象
|
||||
a.click(); // 模拟点击
|
||||
URL.revokeObjectURL(a.href); // 释放URL 对象
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据所需类型进行转码并返回下载地址
|
||||
function setEncoded(type, filename = "diagram", data) {
|
||||
const encodedData = encodeURIComponent(data);
|
||||
return {
|
||||
filename: `${filename}.${type}`,
|
||||
href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
|
||||
data: data
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import BpmnProcessDesigner from "./ProcessDesigner.vue";
|
||||
|
||||
BpmnProcessDesigner.install = function(Vue) {
|
||||
Vue.component(BpmnProcessDesigner.name, BpmnProcessDesigner);
|
||||
};
|
||||
|
||||
export default BpmnProcessDesigner;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
export default (key, name, type) => {
|
||||
if (!type) type = "camunda";
|
||||
const TYPE_TARGET = {
|
||||
activiti: "http://activiti.org/bpmn",
|
||||
camunda: "http://bpmn.io/schema/bpmn",
|
||||
flowable: "http://flowable.org/bpmn"
|
||||
};
|
||||
return `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn2:definitions
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
||||
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
|
||||
xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
|
||||
id="diagram_${key}"
|
||||
targetNamespace="${TYPE_TARGET[type]}">
|
||||
<bpmn2:process id="${key}" name="${name}" isExecutable="true">
|
||||
</bpmn2:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn2:definitions>
|
||||
`;
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import translations from './zh.ts'
|
||||
|
||||
export default function customTranslate(template, replacements) {
|
||||
replacements = replacements || {}
|
||||
template = translations[template] || template
|
||||
return template.replace(/{([^}]+)}/g, function (_, key) {
|
||||
return replacements[key] || '{' + key + '}'
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
export default {
|
||||
"Activate hand tool": "激活抓手工具",
|
||||
"Activate lasso tool": "激活套索工具",
|
||||
"Activate create/remove space tool": "激活创建/删除空间工具",
|
||||
"Activate global connect tool": "激活全局连接工具",
|
||||
"Create start event": "创建开始事件",
|
||||
"Create end event": "创建结束事件",
|
||||
"Create task": "创建任务",
|
||||
"Create user task": "创建用户任务",
|
||||
"Create gateway": "创建网关",
|
||||
"Create data object reference": "创建数据对象",
|
||||
"Create data store reference": "创建数据存储",
|
||||
"Create group": "创建分组",
|
||||
"Create intermediate/boundary event": "创建中间/边界事件",
|
||||
"Create expanded sub-process": "创建扩展子过程",
|
||||
"Create pool/participant": "创建池/参与者",
|
||||
"Change element": "修改类型",
|
||||
"Delete": "移除",
|
||||
"Append end event": "追加结束事件",
|
||||
"Append gateway": "追加网关",
|
||||
"Append task": "追加任务",
|
||||
"Append intermediate/boundary event": "追加中间抛出事件/边界事件",
|
||||
"Add text annotation": "添加 text annotation",
|
||||
"Connect using association": "使用关联连接",
|
||||
"Connect to other element": "消息关联",
|
||||
"Start event": "开始事件",
|
||||
"End event": "结束事件",
|
||||
"Message intermediate catch event": "消息中间捕获事件",
|
||||
"Message intermediate throw event": "消息中间抛出事件",
|
||||
"Timer intermediate catch event": "定时中间捕获事件",
|
||||
"Escalation intermediate throw event": "升级中间抛出事件",
|
||||
"Conditional intermediate catch event": "条件中间捕获事件",
|
||||
"Link intermediate catch event": "链接中间捕获事件",
|
||||
"Link intermediate throw event": "链接中间抛出事件",
|
||||
"Compensation intermediate throw event": "补偿中间抛出事件",
|
||||
"Signal intermediate catch event": "信号中间捕获事件",
|
||||
"Signal intermediate throw event": "信号中间抛出事件",
|
||||
"User task": "用户任务",
|
||||
"Service task": "服务任务",
|
||||
"Send task": "发送任务",
|
||||
"Receive task": "、接收任务",
|
||||
"Manual task": "手动任务",
|
||||
"Business rule task": "业务规则任务",
|
||||
"Script task": "脚本任务",
|
||||
"Call activity": "调用活动",
|
||||
"Sub-process (collapsed)": "子流程(已折叠)",
|
||||
"Sub-process (expanded)": "子流程(扩大)",
|
||||
"Intermediate throw event": "中间抛出事件",
|
||||
"Message start event": "消息开始事件",
|
||||
"Timer start event": "定时开始事件",
|
||||
"Conditional start event": "条件开始事件",
|
||||
"Signal start event": "信号开始事件",
|
||||
"Exclusive gateway":"排他网关",
|
||||
"Parallel gateway":"并行网关",
|
||||
"Inclusive gateway":"包容网关",
|
||||
"Complex gateway":"复杂网关",
|
||||
"Event-based gateway":"事件网关",
|
||||
"Message end event":"消息结束事件",
|
||||
"Escalation end event":"升级结束事件",
|
||||
"Error end event":"错误结束事件",
|
||||
"Compensation end event":"补偿结束事件",
|
||||
"Signal end event":"信号结束事件",
|
||||
"Terminate end event":"终止结束事件",
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
"Process": "业务流程",
|
||||
"Append EndEvent": "追加结束事件",
|
||||
"Append Gateway": "追加网关",
|
||||
"Append Task": "追加任务",
|
||||
"Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
|
||||
"Activate the global connect tool": "激活全局连接工具",
|
||||
"Append {type}": "添加 {type}",
|
||||
"Add Lane above": "在上面添加道",
|
||||
"Divide into two Lanes": "分割成两个道",
|
||||
"Divide into three Lanes": "分割成三个道",
|
||||
"Add Lane below": "在下面添加道",
|
||||
"Append compensation activity": "追加补偿活动",
|
||||
"Change type": "修改类型",
|
||||
"Connect using Association": "使用关联连接",
|
||||
"Connect using Sequence/MessageFlow or Association": "使用顺序/消息流或者关联连接",
|
||||
"Connect using DataInputAssociation": "使用数据输入关联连接",
|
||||
"Remove": "移除",
|
||||
"Activate the hand tool": "激活抓手工具",
|
||||
"Activate the lasso tool": "激活套索工具",
|
||||
"Activate the create/remove space tool": "激活创建/删除空间工具",
|
||||
"Create expanded SubProcess": "创建扩展子过程",
|
||||
"Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出事件/边界事件",
|
||||
"Create Pool/Participant": "创建池/参与者",
|
||||
"Parallel Multi Instance": "并行多重事件",
|
||||
"Sequential Multi Instance": "时序多重事件",
|
||||
"DataObjectReference": "数据对象参考",
|
||||
"DataStoreReference": "数据存储参考",
|
||||
"Loop": "循环",
|
||||
"Ad-hoc": "即席",
|
||||
"Create {type}": "创建 {type}",
|
||||
"Create StartEvent": "创建开始事件",
|
||||
"Create EndEvent": "创建结束事件",
|
||||
"Create Task": "创建任务",
|
||||
"Create User Task": "创建用户任务",
|
||||
"Create Gateway": "创建网关",
|
||||
"Create DataObjectReference": "创建数据对象",
|
||||
"Create DataStoreReference": "创建数据存储",
|
||||
"Create Group": "创建分组",
|
||||
"Create Intermediate/Boundary Event": "创建中间/边界事件",
|
||||
"Message Start Event": "消息开始事件",
|
||||
"Timer Start Event": "定时开始事件",
|
||||
"Conditional Start Event": "条件开始事件",
|
||||
"Signal Start Event": "信号开始事件",
|
||||
"Error Start Event": "错误开始事件",
|
||||
"Escalation Start Event": "升级开始事件",
|
||||
"Compensation Start Event": "补偿开始事件",
|
||||
"Message Start Event (non-interrupting)": "消息开始事件（非中断）",
|
||||
"Timer Start Event (non-interrupting)": "定时开始事件（非中断）",
|
||||
"Conditional Start Event (non-interrupting)": "条件开始事件（非中断）",
|
||||
"Signal Start Event (non-interrupting)": "信号开始事件（非中断）",
|
||||
"Escalation Start Event (non-interrupting)": "升级开始事件（非中断）",
|
||||
"Message Intermediate Catch Event": "消息中间捕获事件",
|
||||
"Message Intermediate Throw Event": "消息中间抛出事件",
|
||||
"Timer Intermediate Catch Event": "定时中间捕获事件",
|
||||
"Escalation Intermediate Throw Event": "升级中间抛出事件",
|
||||
"Conditional Intermediate Catch Event": "条件中间捕获事件",
|
||||
"Link Intermediate Catch Event": "链接中间捕获事件",
|
||||
"Link Intermediate Throw Event": "链接中间抛出事件",
|
||||
"Compensation Intermediate Throw Event": "补偿中间抛出事件",
|
||||
"Signal Intermediate Catch Event": "信号中间捕获事件",
|
||||
"Signal Intermediate Throw Event": "信号中间抛出事件",
|
||||
"Collapsed Pool": "折叠池",
|
||||
"Expanded Pool": "展开池",
|
||||
"no parent for {element} in {parent}": "在{parent}里，{element}没有父类",
|
||||
"no shape type specified": "没有指定的形状类型",
|
||||
"flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
|
||||
"out of bounds release": "out of bounds release",
|
||||
"more than {count} child lanes": "子道大于{count} ",
|
||||
"element required": "元素不能为空",
|
||||
"diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
|
||||
"no diagram to display": "没有可展示的流程图",
|
||||
"no process or collaboration to display": "没有可展示的流程/协作",
|
||||
"element {element} referenced by {referenced}#{property} not yet drawn":
|
||||
"由{referenced}#{property}引用的{element}元素仍未绘制",
|
||||
"already rendered {element}": "{element} 已被渲染",
|
||||
"failed to import {element}": "导入{element}失败",
|
||||
"Id": "编号",
|
||||
"Name": "名称",
|
||||
"General": "常规",
|
||||
"Details": "详情",
|
||||
"Message Name": "消息名称",
|
||||
"Message": "消息",
|
||||
"Initiator": "创建者",
|
||||
"Asynchronous Continuations": "持续异步",
|
||||
"Asynchronous Before": "异步前",
|
||||
"Asynchronous After": "异步后",
|
||||
"Job Configuration": "工作配置",
|
||||
"Exclusive": "排除",
|
||||
"Job Priority": "工作优先级",
|
||||
"Retry Time Cycle": "重试时间周期",
|
||||
"Documentation": "文档",
|
||||
"Element Documentation": "元素文档",
|
||||
"History Configuration": "历史配置",
|
||||
"History Time To Live": "历史的生存时间",
|
||||
"Forms": "表单",
|
||||
"Form Key": "表单key",
|
||||
"Form Fields": "表单字段",
|
||||
"Business Key": "业务key",
|
||||
"Form Field": "表单字段",
|
||||
"ID": "编号",
|
||||
"Type": "类型",
|
||||
"Label": "名称",
|
||||
"Default Value": "默认值",
|
||||
"Default Flow": "默认流转路径",
|
||||
"Conditional Flow": "条件流转路径",
|
||||
"Sequence Flow": "普通流转路径",
|
||||
"Validation": "校验",
|
||||
"Add Constraint": "添加约束",
|
||||
"Config": "配置",
|
||||
"Properties": "属性",
|
||||
"Add Property": "添加属性",
|
||||
"Value": "值",
|
||||
"Listeners": "监听器",
|
||||
"Execution Listener": "执行监听",
|
||||
"Event Type": "事件类型",
|
||||
"Listener Type": "监听器类型",
|
||||
"Java Class": "Java类",
|
||||
"Expression": "表达式",
|
||||
"Must provide a value": "必须提供一个值",
|
||||
"Delegate Expression": "代理表达式",
|
||||
"Script": "脚本",
|
||||
"Script Format": "脚本格式",
|
||||
"Script Type": "脚本类型",
|
||||
"Inline Script": "内联脚本",
|
||||
"External Script": "外部脚本",
|
||||
"Resource": "资源",
|
||||
"Field Injection": "字段注入",
|
||||
"Extensions": "扩展",
|
||||
"Input/Output": "输入/输出",
|
||||
"Input Parameters": "输入参数",
|
||||
"Output Parameters": "输出参数",
|
||||
"Parameters": "参数",
|
||||
"Output Parameter": "输出参数",
|
||||
"Timer Definition Type": "定时器定义类型",
|
||||
"Timer Definition": "定时器定义",
|
||||
"Date": "日期",
|
||||
"Duration": "持续",
|
||||
"Cycle": "循环",
|
||||
"Signal": "信号",
|
||||
"Signal Name": "信号名称",
|
||||
"Escalation": "升级",
|
||||
"Error": "错误",
|
||||
"Link Name": "链接名称",
|
||||
"Condition": "条件名称",
|
||||
"Variable Name": "变量名称",
|
||||
"Variable Event": "变量事件",
|
||||
"Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
|
||||
"Wait for Completion": "等待完成",
|
||||
"Activity Ref": "活动参考",
|
||||
"Version Tag": "版本标签",
|
||||
"Executable": "可执行文件",
|
||||
"External Task Configuration": "扩展任务配置",
|
||||
"Task Priority": "任务优先级",
|
||||
"External": "外部",
|
||||
"Connector": "连接器",
|
||||
"Must configure Connector": "必须配置连接器",
|
||||
"Connector Id": "连接器编号",
|
||||
"Implementation": "实现方式",
|
||||
"Field Injections": "字段注入",
|
||||
"Fields": "字段",
|
||||
"Result Variable": "结果变量",
|
||||
"Topic": "主题",
|
||||
"Configure Connector": "配置连接器",
|
||||
"Input Parameter": "输入参数",
|
||||
"Assignee": "代理人",
|
||||
"Candidate Users": "候选用户",
|
||||
"Candidate Groups": "候选组",
|
||||
"Due Date": "到期时间",
|
||||
"Follow Up Date": "跟踪日期",
|
||||
"Priority": "优先级",
|
||||
"The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
|
||||
"跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
|
||||
"The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
|
||||
"跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
|
||||
"Variables": "变量",
|
||||
"Candidate Starter Configuration": "候选人起动器配置",
|
||||
"Candidate Starter Groups": "候选人起动器组",
|
||||
"This maps to the process definition key.": "这映射到流程定义键。",
|
||||
"Candidate Starter Users": "候选人起动器的用户",
|
||||
"Specify more than one user as a comma separated list.": "指定多个用户作为逗号分隔的列表。",
|
||||
"Tasklist Configuration": "Tasklist配置",
|
||||
"Startable": "启动",
|
||||
"Specify more than one group as a comma separated list.": "指定多个组作为逗号分隔的列表。",
|
||||
"Execution listeners": "执行监听器"
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const hljs = require("highlight.js/lib/core");
|
||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
|
||||
|
||||
module.exports = hljs;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import BpmnProcessDesigner from "./designer";
|
||||
import BmpnProcessPenal from "./penal";
|
||||
|
||||
export {
|
||||
BpmnProcessDesigner,
|
||||
BmpnProcessPenal
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div class="process-panel__container" :style="{ width: `${this.width}px` }">
|
||||
<el-collapse v-model="activeTab">
|
||||
<el-collapse-item name="base">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
|
||||
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject"
|
||||
:type="elementType" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import ElementBaseInfo from "./base/ElementBaseInfo.vue";
|
||||
import {reactive,onMounted,defineEmits ,defineProps,provide} from 'vue'
|
||||
|
||||
/**
|
||||
* 侧边栏
|
||||
* @Author MiyueFE
|
||||
* @Home https://github.com/miyuesc
|
||||
* @Date 2021年3月31日18:57:51
|
||||
*/
|
||||
const props = defineProps({
|
||||
bpmnModeler: Object,
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "camunda"
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 480
|
||||
},
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
provide('prefix', props.prefix)
|
||||
provide('width', props.width)
|
||||
const data = reactive({
|
||||
bpmnElement:'',
|
||||
activeTab: "base",
|
||||
elementId: "",
|
||||
elementType: "",
|
||||
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
conditionFormVisible: false, // 流转条件设置
|
||||
formVisible: false // 表单配置
|
||||
})
|
||||
onMounted(() => {
|
||||
initModels()
|
||||
})
|
||||
function initModels() {
|
||||
window.bpmnInstances = {
|
||||
modeler: props.bpmnModeler,
|
||||
modeling: props.bpmnModeler.get("modeling"),
|
||||
moddle: props.bpmnModeler.get("moddle"),
|
||||
eventBus: props.bpmnModeler.get("eventBus"),
|
||||
bpmnFactory: props.bpmnModeler.get("bpmnFactory"),
|
||||
elementFactory: props.bpmnModeler.get("elementFactory"),
|
||||
elementRegistry: props.bpmnModeler.get("elementRegistry"),
|
||||
replace: props.bpmnModeler.get("replace"),
|
||||
selection: props.bpmnModeler.get("selection")
|
||||
};
|
||||
getActiveElement();
|
||||
}
|
||||
function getActiveElement() {
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
initFormOnChanged(null);
|
||||
props.bpmnModeler.on("import.done", e => {
|
||||
initFormOnChanged(null);
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
props.bpmnModeler.on("selection.changed", ({ newSelection }) => {
|
||||
initFormOnChanged(newSelection[0] || null);
|
||||
});
|
||||
props.bpmnModeler.on("element.changed", ({ element }) => {
|
||||
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
|
||||
if (element && element.id === data.elementId) {
|
||||
initFormOnChanged(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 初始化数据
|
||||
function initFormOnChanged(element) {
|
||||
let activatedElement = element;
|
||||
if (!activatedElement) {
|
||||
activatedElement =
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
|
||||
}
|
||||
if (!activatedElement) return;
|
||||
console.log(`
|
||||
----------
|
||||
select element changed:
|
||||
id: ${activatedElement.id}
|
||||
type: ${activatedElement.businessObject.$type}
|
||||
----------
|
||||
`);
|
||||
console.log("businessObject: ", activatedElement.businessObject);
|
||||
window.bpmnInstances.bpmnElement = activatedElement;
|
||||
data.bpmnElement = activatedElement;
|
||||
data.elementId = activatedElement.id;
|
||||
data.elementType = activatedElement.type.split(":")[1] || "";
|
||||
data.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
|
||||
data.conditionFormVisible = !!(
|
||||
this.elementType === "SequenceFlow" &&
|
||||
activatedElement.source &&
|
||||
activatedElement.source.type.indexOf("StartEvent") === -1
|
||||
);
|
||||
data.formVisible = data.elementType === "UserTask" || data.elementType === "StartEvent";
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="ID">
|
||||
<el-input
|
||||
v-model="elementBaseInfo.id"
|
||||
:disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
|
||||
clearable
|
||||
@change="updateBaseInfo('id')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
|
||||
</el-form-item>
|
||||
<!--流程的基础属性-->
|
||||
<template v-if="elementBaseInfo.$type === 'bpmn:Process'">
|
||||
<el-form-item label="版本标签">
|
||||
<el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="可执行">
|
||||
<el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ElementBaseInfo",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String,
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementBaseInfo: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: false,
|
||||
handler: function(val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => this.resetBaseInfo());
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetBaseInfo() {
|
||||
this.bpmnElement = window?.bpmnInstances?.bpmnElement;
|
||||
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
|
||||
},
|
||||
updateBaseInfo(key) {
|
||||
const attrObj = Object.create(null);
|
||||
attrObj[key] = this.elementBaseInfo[key];
|
||||
if (key === "id") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
id: this.elementBaseInfo[key],
|
||||
di: { id: `${this.elementBaseInfo[key]}_di` }
|
||||
});
|
||||
} else {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
|
||||
<el-form-item label="流转类型">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
||||
<el-option label="普通流转路径" value="normal" />
|
||||
<el-option label="默认流转路径" value="default" />
|
||||
<el-option label="条件流转路径" value="condition" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
|
||||
<el-select v-model="flowConditionForm.conditionType">
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="脚本" value="script" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
|
||||
<el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
|
||||
<el-form-item label="脚本语言" key="language">
|
||||
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型" key="scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
|
||||
<el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
|
||||
<el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FlowCondition",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flowConditionForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$nextTick(() => this.resetFlowCondition());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetFlowCondition() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.bpmnElementSource = this.bpmnElement.source;
|
||||
this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
|
||||
if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
|
||||
// 默认
|
||||
this.flowConditionForm = { type: "default" };
|
||||
} else if (!this.bpmnElement.businessObject.conditionExpression) {
|
||||
// 普通
|
||||
this.flowConditionForm = { type: "normal" };
|
||||
} else {
|
||||
// 带条件
|
||||
const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
|
||||
this.flowConditionForm = { ...conditionExpression, type: "condition" };
|
||||
// resource 可直接标识 是否是外部资源脚本
|
||||
if (this.flowConditionForm.resource) {
|
||||
this.$set(this.flowConditionForm, "conditionType", "script");
|
||||
this.$set(this.flowConditionForm, "scriptType", "externalScript");
|
||||
return;
|
||||
}
|
||||
if (conditionExpression.language) {
|
||||
this.$set(this.flowConditionForm, "conditionType", "script");
|
||||
this.$set(this.flowConditionForm, "scriptType", "inlineScript");
|
||||
return;
|
||||
}
|
||||
this.$set(this.flowConditionForm, "conditionType", "expression");
|
||||
}
|
||||
},
|
||||
updateFlowType(flowType) {
|
||||
// 正常条件类
|
||||
if (flowType === "condition") {
|
||||
this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: this.flowConditionRef
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 默认路径
|
||||
if (flowType === "default") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: null
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
|
||||
default: this.bpmnElement
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
|
||||
if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
|
||||
default: null
|
||||
});
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
conditionExpression: null
|
||||
});
|
||||
},
|
||||
updateFlowCondition() {
|
||||
let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
|
||||
let condition;
|
||||
if (conditionType === "expression") {
|
||||
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
|
||||
} else {
|
||||
if (scriptType === "inlineScript") {
|
||||
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
|
||||
this.$set(this.flowConditionForm, "resource", "");
|
||||
} else {
|
||||
this.$set(this.flowConditionForm, "body", "");
|
||||
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
|
||||
}
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
this.bpmnElementSource = null;
|
||||
this.bpmnElementSourceRef = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,390 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="表单" prop="formKey">
|
||||
<el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
|
||||
<el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="localScope">
|
||||
<span slot="label">
|
||||
<el-tooltip content="若为节点表单，则表单信息仅在此节点可用，默认为全局表单，表单信息在整个流程实例中可用" placement="top-start">
|
||||
<i class="header-icon el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
<span>节点表单</span>
|
||||
</span>
|
||||
<el-switch :disabled="type === 'StartEvent'" v-model="localScope" active-text="是" inactive-text="否" @change="updateElementFormScope()" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="表单标识">-->
|
||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="业务标识">-->
|
||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
||||
<!-- <el-option label="无" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型">-->
|
||||
<!-- <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">-->
|
||||
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
|
||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
|
||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="默认值">-->
|
||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <!– 枚举值设置 –>-->
|
||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
||||
<!-- <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <!– 校验规则 –>-->
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
||||
<!-- <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 表单属性 –>-->
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
||||
<!-- <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 底部按钮 –>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button size="mini">取 消</el-button>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<el-dialog :visible.sync="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="fieldOptionForm" size="mini" label-width="96px" @submit.native.prevent>
|
||||
<el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">
|
||||
<el-input v-model="fieldOptionForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">
|
||||
<el-input v-model="fieldOptionForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">
|
||||
<el-input v-model="fieldOptionForm.config" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">
|
||||
<el-input v-model="fieldOptionForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="fieldOptionModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveFieldOption">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listForm } from "@/api/workflow/form";
|
||||
|
||||
export default {
|
||||
name: "ElementForm",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formOptions: [],
|
||||
formKey: "",
|
||||
localScope: false,
|
||||
businessKey: "",
|
||||
optionModelTitle: "",
|
||||
fieldList: [],
|
||||
formFieldForm: {},
|
||||
fieldType: {
|
||||
long: "长整型",
|
||||
string: "字符串",
|
||||
boolean: "布尔类",
|
||||
date: "日期类",
|
||||
enum: "枚举类",
|
||||
custom: "自定义类型"
|
||||
},
|
||||
formFieldIndex: -1, // 编辑中的字段， -1 为新增
|
||||
formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
|
||||
fieldModelVisible: false,
|
||||
fieldOptionModelVisible: false,
|
||||
fieldOptionForm: {}, // 当前激活的字段配置项数据
|
||||
fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
|
||||
fieldEnumList: [], // 枚举值列表
|
||||
fieldConstraintsList: [], // 约束条件列表
|
||||
fieldPropertiesList: [] // 绑定属性列表
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetFormList());
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/** 查询流程分类列表 */
|
||||
this.getFormList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询表单列表 */
|
||||
getFormList() {
|
||||
listForm().then(response => this.formOptions = response.rows)
|
||||
},
|
||||
resetFormList() {
|
||||
this.bpmnELement = window.bpmnInstances.bpmnElement;
|
||||
this.formKey = this.bpmnELement.businessObject.formKey;
|
||||
this.localScope = this.bpmnELement.businessObject.localScope;
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
this.elExtensionElements =
|
||||
this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
// this.formData =
|
||||
// this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
|
||||
// window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
|
||||
// 业务标识 businessKey， 绑定在 formData 中
|
||||
// this.businessKey = this.formData.businessKey;
|
||||
|
||||
// 保留剩余扩展元素，便于后面更新该元素对应属性
|
||||
this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
|
||||
|
||||
// 复制原始值，填充表格
|
||||
// this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
|
||||
|
||||
// 更新元素扩展属性，避免后续报错
|
||||
// this.updateElementExtensions();
|
||||
},
|
||||
updateElementFormKey() {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
|
||||
},
|
||||
updateElementFormScope() {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { localScope: this.localScope });
|
||||
},
|
||||
updateElementBusinessKey() {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
|
||||
},
|
||||
// 根据类型调整字段type
|
||||
changeFieldTypeType(type) {
|
||||
this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
||||
},
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
openFieldForm(field, index) {
|
||||
this.formFieldIndex = index;
|
||||
if (index !== -1) {
|
||||
const FieldObject = this.formData.fields[index];
|
||||
this.formFieldForm = JSON.parse(JSON.stringify(field));
|
||||
// 设置自定义类型
|
||||
this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
||||
// 初始化枚举值列表
|
||||
field.type === "enum" && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
|
||||
// 初始化约束条件列表
|
||||
this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
|
||||
// 初始化自定义属性列表
|
||||
this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
|
||||
} else {
|
||||
this.formFieldForm = {};
|
||||
// 初始化枚举值列表
|
||||
this.fieldEnumList = [];
|
||||
// 初始化约束条件列表
|
||||
this.fieldConstraintsList = [];
|
||||
// 初始化自定义属性列表
|
||||
this.fieldPropertiesList = [];
|
||||
}
|
||||
this.fieldModelVisible = true;
|
||||
},
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
openFieldOptionForm(option, index, type) {
|
||||
this.fieldOptionModelVisible = true;
|
||||
this.fieldOptionType = type;
|
||||
this.formFieldOptionIndex = index;
|
||||
if (type === "property") {
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = "属性配置");
|
||||
}
|
||||
if (type === "enum") {
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = "枚举值配置");
|
||||
}
|
||||
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
|
||||
return (this.optionModelTitle = "约束条件配置");
|
||||
},
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
saveFieldOption() {
|
||||
if (this.formFieldOptionIndex === -1) {
|
||||
if (this.fieldOptionType === "property") {
|
||||
this.fieldPropertiesList.push(this.fieldOptionForm);
|
||||
}
|
||||
if (this.fieldOptionType === "constraint") {
|
||||
this.fieldConstraintsList.push(this.fieldOptionForm);
|
||||
}
|
||||
if (this.fieldOptionType === "enum") {
|
||||
this.fieldEnumList.push(this.fieldOptionForm);
|
||||
}
|
||||
} else {
|
||||
this.fieldOptionType === "property" && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
this.fieldOptionType === "constraint" && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
|
||||
}
|
||||
this.fieldOptionModelVisible = false;
|
||||
this.fieldOptionForm = {};
|
||||
},
|
||||
// 保存字段配置
|
||||
saveField() {
|
||||
const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
|
||||
const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
|
||||
defaultValue && (Field.defaultValue = defaultValue);
|
||||
datePattern && (Field.datePattern = datePattern);
|
||||
// 构建属性
|
||||
if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
|
||||
const fieldPropertyList = this.fieldPropertiesList.map(fp => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
|
||||
});
|
||||
Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
|
||||
}
|
||||
// 构建校验规则
|
||||
if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
|
||||
const fieldConstraintList = this.fieldConstraintsList.map(fc => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
|
||||
});
|
||||
Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
|
||||
}
|
||||
// 构建枚举值
|
||||
if (this.fieldEnumList && this.fieldEnumList.length) {
|
||||
Field.values = this.fieldEnumList.map(fe => {
|
||||
return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
|
||||
});
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (this.formFieldIndex === -1) {
|
||||
this.fieldList.push(this.formFieldForm);
|
||||
this.formData.fields.push(Field);
|
||||
} else {
|
||||
this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
|
||||
this.formData.fields.splice(this.formFieldIndex, 1, Field);
|
||||
}
|
||||
this.updateElementExtensions();
|
||||
this.fieldModelVisible = false;
|
||||
},
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
removeFieldOptionItem(option, index, type) {
|
||||
if (type === "property") {
|
||||
this.fieldPropertiesList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
if (type === "enum") {
|
||||
this.fieldEnumList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
this.fieldConstraintsList.splice(index, 1);
|
||||
},
|
||||
// 移除 字段
|
||||
removeField(field, index) {
|
||||
this.fieldList.splice(index, 1);
|
||||
this.formData.fields.splice(index, 1);
|
||||
this.updateElementExtensions();
|
||||
},
|
||||
|
||||
updateElementExtensions() {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: this.otherExtensions.concat(this.formData)
|
||||
});
|
||||
// 更新到元素上
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
|
||||
extensionElements: newElExtensionElements
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import BpmnPropertiesPanel from "./PropertiesPanel.vue";
|
||||
|
||||
BpmnPropertiesPanel.install = function(Vue) {
|
||||
Vue.component(BpmnPropertiesPanel.name, BpmnPropertiesPanel);
|
||||
};
|
||||
|
||||
export default BpmnPropertiesPanel;
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
|
||||
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
|
||||
|
||||
export default {
|
||||
name: "ElementListeners",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [], // 监听器列表
|
||||
listenerForm: {}, // 监听器详情表单
|
||||
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldForm: {}, // 监听器 注入字段 详情表单
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerTypeObject: listenerType,
|
||||
fieldTypeObject: fieldType
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetListenersList());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetListenersList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = [];
|
||||
this.bpmnElementListeners =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
// 打开 监听器详情 侧边栏
|
||||
openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.$set(this.listenerForm, "fields", []);
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器配置
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
|
||||
<!-- <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />-->
|
||||
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
|
||||
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">-->
|
||||
<!-- <el-input v-model="listenerForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-if="listenerForm.event === 'timeout'">
|
||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType">
|
||||
<el-option label="日期" value="date" />
|
||||
<el-option label="持续时长" value="duration" />
|
||||
<el-option label="循环" value="cycle" />
|
||||
<el-option label="无" value="null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
|
||||
label="定时器"
|
||||
prop="eventTimeDefinitions"
|
||||
key="eventTimeDefinitions"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
|
||||
|
||||
export default {
|
||||
name: "UserTaskListeners",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [],
|
||||
listenerEventTypeObject: eventType,
|
||||
listenerTypeObject: listenerType,
|
||||
listenerFormModelVisible: false,
|
||||
listenerForm: {},
|
||||
fieldTypeObject: fieldType,
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerFieldForm: {} // 监听器 注入字段 详情表单
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetListenersList());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetListenersList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = [];
|
||||
this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.$set(this.listenerForm, "fields", []);
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
export const template = isTaskListener => {
|
||||
return `
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
|
||||
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="listener-class"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.class" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="listener-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.expression" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="listener-delegate"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerForm.delegateExpression" clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
${
|
||||
isTaskListener
|
||||
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
|
||||
"<el-select v-model='listenerForm.eventDefinitionType'>" +
|
||||
"<el-option label='日期' value='date' />" +
|
||||
"<el-option label='持续时长' value='duration' />" +
|
||||
"<el-option label='循环' value='cycle' />" +
|
||||
"<el-option label='无' value='' />" +
|
||||
"</el-select>" +
|
||||
"</el-form-item>" +
|
||||
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
|
||||
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
|
||||
"</el-form-item>"
|
||||
: ""
|
||||
}
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label="字段值："
|
||||
prop="string"
|
||||
key="field-string"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.string" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label="表达式："
|
||||
prop="expression"
|
||||
key="field-expression"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.expression" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
// 初始化表单数据
|
||||
export function initListenerForm(listener) {
|
||||
let self = {
|
||||
...listener
|
||||
};
|
||||
if (listener.script) {
|
||||
self = {
|
||||
...listener,
|
||||
...listener.script,
|
||||
scriptType: listener.script.resource ? "externalScript" : "inlineScript"
|
||||
};
|
||||
}
|
||||
if (listener.event === "timeout" && listener.eventDefinitions) {
|
||||
if (listener.eventDefinitions.length) {
|
||||
let k = "";
|
||||
for (let key in listener.eventDefinitions[0]) {
|
||||
console.log(listener.eventDefinitions, key);
|
||||
if (key.indexOf("time") !== -1) {
|
||||
k = key;
|
||||
self.eventDefinitionType = key.replace("time", "").toLowerCase();
|
||||
}
|
||||
}
|
||||
console.log(k);
|
||||
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
|
||||
}
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
export function initListenerType(listener) {
|
||||
let listenerType;
|
||||
if (listener.class) listenerType = "classListener";
|
||||
if (listener.expression) listenerType = "expressionListener";
|
||||
if (listener.delegateExpression) listenerType = "delegateExpressionListener";
|
||||
if (listener.script) listenerType = "scriptListener";
|
||||
return {
|
||||
...JSON.parse(JSON.stringify(listener)),
|
||||
...(listener.script ?? {}),
|
||||
listenerType: listenerType
|
||||
};
|
||||
}
|
||||
|
||||
export const listenerType = {
|
||||
classListener: "Java 类",
|
||||
expressionListener: "表达式",
|
||||
delegateExpressionListener: "代理表达式",
|
||||
scriptListener: "脚本"
|
||||
};
|
||||
|
||||
export const eventType = {
|
||||
create: "创建",
|
||||
assignment: "指派",
|
||||
complete: "完成",
|
||||
delete: "删除",
|
||||
update: "更新",
|
||||
timeout: "超时"
|
||||
};
|
||||
|
||||
export const fieldType = {
|
||||
string: "字符串",
|
||||
expression: "表达式"
|
||||
};
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="回路特性">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
|
||||
<!--bpmn:MultiInstanceLoopCharacteristics-->
|
||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
||||
<!--bpmn:StandardLoopCharacteristics-->
|
||||
<el-option label="循环事件" value="StandardLoop" />
|
||||
<el-option label="无" value="Null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
|
||||
<el-form-item label="循环基数" key="loopCardinality">
|
||||
<el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
|
||||
</el-form-item>
|
||||
<el-form-item label="集合" key="collection">
|
||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="元素变量" key="elementVariable">
|
||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="完成条件" key="completionCondition">
|
||||
<el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="异步状态" key="async">
|
||||
<el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
|
||||
<el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.exclusive"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
label="排除"
|
||||
@change="updateLoopAsync('exclusive')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
|
||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementMultiInstance",
|
||||
props: {
|
||||
businessObject: Object,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loopCharacteristics: "",
|
||||
//默认配置，用来覆盖原始不存在的选项，避免报错
|
||||
defaultLoopInstanceForm: {
|
||||
completionCondition: "",
|
||||
loopCardinality: "",
|
||||
extensionElements: [],
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
},
|
||||
loopInstanceForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.getElementLoop(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getElementLoop(businessObject) {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
this.loopCharacteristics = "Null";
|
||||
this.loopInstanceForm = {};
|
||||
return;
|
||||
}
|
||||
if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
|
||||
this.loopCharacteristics = "StandardLoop";
|
||||
this.loopInstanceForm = {};
|
||||
return;
|
||||
}
|
||||
if (businessObject.loopCharacteristics.isSequential) {
|
||||
this.loopCharacteristics = "SequentialMultiInstance";
|
||||
} else {
|
||||
this.loopCharacteristics = "ParallelMultiInstance";
|
||||
}
|
||||
// 合并配置
|
||||
this.loopInstanceForm = {
|
||||
...this.defaultLoopInstanceForm,
|
||||
...businessObject.loopCharacteristics,
|
||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
|
||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
|
||||
};
|
||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
||||
this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
|
||||
// 更新表单
|
||||
if (
|
||||
businessObject.loopCharacteristics.extensionElements &&
|
||||
businessObject.loopCharacteristics.extensionElements.values &&
|
||||
businessObject.loopCharacteristics.extensionElements.values.length
|
||||
) {
|
||||
this.$set(this.loopInstanceForm, "timeCycle", businessObject.loopCharacteristics.extensionElements.values[0].body);
|
||||
}
|
||||
},
|
||||
changeLoopCharacteristicsType(type) {
|
||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
||||
// 取消多实例配置
|
||||
if (type === "Null") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
|
||||
return;
|
||||
}
|
||||
// 配置循环
|
||||
if (type === "StandardLoop") {
|
||||
const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
loopCharacteristics: loopCharacteristicsObject
|
||||
});
|
||||
this.multiLoopInstance = null;
|
||||
return;
|
||||
}
|
||||
// 时序
|
||||
if (type === "SequentialMultiInstance") {
|
||||
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
|
||||
} else {
|
||||
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
loopCharacteristics: this.multiLoopInstance
|
||||
});
|
||||
},
|
||||
// 循环基数
|
||||
updateLoopCardinality(cardinality) {
|
||||
let loopCardinality = null;
|
||||
if (cardinality && cardinality.length) {
|
||||
loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
|
||||
}
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { loopCardinality });
|
||||
},
|
||||
// 完成条件
|
||||
updateLoopCondition(condition) {
|
||||
let completionCondition = null;
|
||||
if (condition && condition.length) {
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
|
||||
}
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { completionCondition });
|
||||
},
|
||||
// 重试周期
|
||||
updateLoopTimeCycle(timeCycle) {
|
||||
const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: [
|
||||
window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
|
||||
body: timeCycle
|
||||
})
|
||||
]
|
||||
});
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { extensionElements });
|
||||
},
|
||||
// 直接更新的基础信息
|
||||
updateLoopBase() {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
|
||||
collection: this.loopInstanceForm.collection || null,
|
||||
elementVariable: this.loopInstanceForm.elementVariable || null
|
||||
});
|
||||
},
|
||||
// 各异步状态
|
||||
updateLoopAsync(key) {
|
||||
const { asyncBefore, asyncAfter } = this.loopInstanceForm;
|
||||
let asyncAttr = Object.create(null);
|
||||
if (!asyncBefore && !asyncAfter) {
|
||||
this.$set(this.loopInstanceForm, "exclusive", false);
|
||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
|
||||
} else {
|
||||
asyncAttr[key] = this.loopInstanceForm[key];
|
||||
}
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.multiLoopInstance = null;
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="element-property input-property">
|
||||
<div class="element-property__label">元素文档：</div>
|
||||
<div class="element-property__value">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="documentation"
|
||||
size="mini"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
@input="updateDocumentation"
|
||||
@blur="updateDocumentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementOtherConfig",
|
||||
props: {
|
||||
id: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
documentation: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler: function(id) {
|
||||
if (id && id.length) {
|
||||
this.$nextTick(() => {
|
||||
const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
|
||||
this.documentation = documentations && documentations.length ? documentations[0].text : "";
|
||||
});
|
||||
} else {
|
||||
this.documentation = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateDocumentation() {
|
||||
(this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
|
||||
const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
documentation: [documentation]
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>
|
||||
<el-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值：" prop="value">
|
||||
<el-input v-model="propertyForm.value" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ElementProperties",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementPropertyList: [],
|
||||
propertyForm: {},
|
||||
editingPropertyIndex: -1,
|
||||
propertyFormModelVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.resetAttributesList();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetAttributesList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = []; // 其他扩展配置
|
||||
this.bpmnElementProperties =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
|
||||
if (ex.$type !== `${this.prefix}:Properties`) {
|
||||
this.otherExtensionList.push(ex);
|
||||
}
|
||||
return ex.$type === `${this.prefix}:Properties`;
|
||||
}) ?? [];
|
||||
|
||||
// 保存所有的 扩展属性字段
|
||||
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
|
||||
// 复制 显示
|
||||
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
|
||||
},
|
||||
openAttributesForm(attr, index) {
|
||||
this.editingPropertyIndex = index;
|
||||
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||
this.propertyFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
removeAttributes(attr, index) {
|
||||
this.$confirm("确认移除该属性吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.elementPropertyList.splice(index, 1);
|
||||
this.bpmnElementPropertyList.splice(index, 1);
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
this.resetAttributesList();
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
saveAttribute() {
|
||||
const { name, value } = this.propertyForm;
|
||||
if (this.editingPropertyIndex !== -1) {
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
|
||||
name,
|
||||
value
|
||||
});
|
||||
} else {
|
||||
// 新建属性字段
|
||||
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
|
||||
// 新建一个属性字段的保存列表
|
||||
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||
values: this.bpmnElementPropertyList.concat([newPropertyObject])
|
||||
});
|
||||
this.updateElementExtensions(propertiesObject);
|
||||
}
|
||||
this.propertyFormModelVisible = false;
|
||||
this.resetAttributesList();
|
||||
},
|
||||
updateElementExtensions(properties) {
|
||||
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: this.otherExtensionList.concat([properties])
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="panel-tab__content--title">
|
||||
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
|
||||
</div>
|
||||
<el-table :data="messageList" size="mini" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
|
||||
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
|
||||
</div>
|
||||
<el-table :data="signalList" size="mini" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
</el-table>
|
||||
|
||||
<el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item :label="modelConfig.idLabel">
|
||||
<el-input v-model="modelObjectForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="modelConfig.nameLabel">
|
||||
<el-input v-model="modelObjectForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="modelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "SignalAndMassage",
|
||||
data() {
|
||||
return {
|
||||
signalList: [],
|
||||
messageList: [],
|
||||
modelVisible: false,
|
||||
modelType: "",
|
||||
modelObjectForm: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
modelConfig() {
|
||||
if (this.modelType === "message") {
|
||||
return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
|
||||
} else {
|
||||
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initDataList();
|
||||
},
|
||||
methods: {
|
||||
initDataList() {
|
||||
this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.messageIdMap = {};
|
||||
this.signalIdMap = {};
|
||||
this.messageList = [];
|
||||
this.signalList = [];
|
||||
this.rootElements.forEach(el => {
|
||||
if (el.$type === "bpmn:Message") {
|
||||
this.messageIdMap[el.id] = true;
|
||||
this.messageList.push({ ...el });
|
||||
}
|
||||
if (el.$type === "bpmn:Signal") {
|
||||
this.signalIdMap[el.id] = true;
|
||||
this.signalList.push({ ...el });
|
||||
}
|
||||
});
|
||||
},
|
||||
openModel(type) {
|
||||
this.modelType = type;
|
||||
this.modelObjectForm = {};
|
||||
this.modelVisible = true;
|
||||
},
|
||||
addNewObject() {
|
||||
if (this.modelType === "message") {
|
||||
if (this.messageIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error("该消息已存在，请修改id后重新保存");
|
||||
}
|
||||
const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
|
||||
this.rootElements.push(messageRef);
|
||||
} else {
|
||||
if (this.signalIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error("该信号已存在，请修改id后重新保存");
|
||||
}
|
||||
const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
|
||||
this.rootElements.push(signalRef);
|
||||
}
|
||||
this.modelVisible = false;
|
||||
this.initDataList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="96px" @submit.native.prevent>
|
||||
<!-- <el-form-item label="异步延续">-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<component :is="witchTaskComponent" v-bind="$props" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserTask from "./task-components/UserTask";
|
||||
import ServiceTask from "./task-components/ServiceTask";
|
||||
import ScriptTask from "./task-components/ScriptTask";
|
||||
import ReceiveTask from "./task-components/ReceiveTask";
|
||||
|
||||
export default {
|
||||
name: "ElementTaskConfig",
|
||||
components: { UserTask, ServiceTask, ScriptTask, ReceiveTask },
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskConfigForm: {
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
},
|
||||
witchTaskComponent: "",
|
||||
installedComponent: {
|
||||
// 手工任务与普通任务一致，不需要其他配置
|
||||
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
|
||||
// 发送任务、服务任务、业务规则任务共用一个相同配置
|
||||
UserTask: "UserTask", // 用户任务配置
|
||||
ServiceTask: "ServiceTask", // 服务任务配置
|
||||
ScriptTask: "ScriptTask", // 脚本任务配置
|
||||
ReceiveTask: "ReceiveTask" // 消息接收任务
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
|
||||
this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
|
||||
this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
|
||||
}
|
||||
},
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.witchTaskComponent = this.installedComponent[this.type];
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTaskAsync() {
|
||||
if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
|
||||
this.taskConfigForm.exclusive = false;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
|
||||
...this.taskConfigForm
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ReceiveTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bindMessageId: "",
|
||||
newMessageForm: {},
|
||||
messageMap: {},
|
||||
messageModelVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$nextTick(() => this.getBindMessage());
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.bpmnMessageRefsMap = Object.create(null);
|
||||
this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.bpmnRootElements
|
||||
.filter(el => el.$type === "bpmn:Message")
|
||||
.forEach(m => {
|
||||
this.bpmnMessageRefsMap[m.id] = m;
|
||||
this.$set(this.messageMap, m.id, m.name);
|
||||
});
|
||||
this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
|
||||
},
|
||||
methods: {
|
||||
getBindMessage() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
|
||||
},
|
||||
openMessageModel() {
|
||||
this.messageModelVisible = true;
|
||||
this.newMessageForm = {};
|
||||
},
|
||||
createNewMessage() {
|
||||
if (this.messageMap[this.newMessageForm.id]) {
|
||||
this.$message.error("该消息已存在，请修改id后重新保存");
|
||||
return;
|
||||
}
|
||||
const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
|
||||
this.bpmnRootElements.push(newMessage);
|
||||
this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
|
||||
this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
|
||||
this.messageModelVisible = false;
|
||||
},
|
||||
updateTaskMessage(messageId) {
|
||||
if (messageId === "-1") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
messageRef: null
|
||||
});
|
||||
} else {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
messageRef: this.bpmnMessageRefsMap[messageId]
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScriptTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultTaskForm: {
|
||||
scriptFormat: "",
|
||||
script: "",
|
||||
resource: "",
|
||||
resultVariable: ""
|
||||
},
|
||||
scriptTaskForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetTaskForm() {
|
||||
for (let key in this.defaultTaskForm) {
|
||||
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||
this.$set(this.scriptTaskForm, key, value);
|
||||
}
|
||||
this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
|
||||
},
|
||||
updateElementTask() {
|
||||
let taskAttr = Object.create(null);
|
||||
taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
|
||||
taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
|
||||
if (this.scriptTaskForm.scriptType === "inline") {
|
||||
taskAttr.script = this.scriptTaskForm.script || null;
|
||||
taskAttr.resource = null;
|
||||
} else {
|
||||
taskAttr.resource = this.scriptTaskForm.resource || null;
|
||||
taskAttr.script = null;
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form-item label="执行类型" key="executeType">
|
||||
<el-select v-model="serviceTaskForm.executeType">
|
||||
<el-option label="Java类" value="class" />
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="代理表达式" value="delegateExpression" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="serviceTaskForm.executeType === 'class'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="execute-class"
|
||||
>
|
||||
<el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="serviceTaskForm.executeType === 'expression'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="execute-expression"
|
||||
>
|
||||
<el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="serviceTaskForm.executeType === 'delegateExpression'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="execute-delegate"
|
||||
>
|
||||
<el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServiceTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultTaskForm: {
|
||||
executeType: "",
|
||||
class: "",
|
||||
expression: "",
|
||||
delegateExpression: ""
|
||||
},
|
||||
serviceTaskForm: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetTaskForm() {
|
||||
for (let key in this.defaultTaskForm) {
|
||||
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||
if (value) this.$set(this.serviceTaskForm, "executeType", key);
|
||||
this.$set(this.serviceTaskForm, key, value);
|
||||
}
|
||||
},
|
||||
updateElementTask() {
|
||||
let taskAttr = Object.create(null);
|
||||
const type = this.serviceTaskForm.executeType;
|
||||
for (let key in this.serviceTaskForm) {
|
||||
if (key !== 'executeType' && key !== type) taskAttr[key] = null;
|
||||
}
|
||||
taskAttr[type] = this.serviceTaskForm[type] || "";
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,525 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<h4><b>审批人设置</b></h4>
|
||||
<el-radio-group v-model="dataType" @change="changeDataType">
|
||||
<el-radio label="USERS">指定用户</el-radio>
|
||||
<el-radio label="ROLES">角色</el-radio>
|
||||
<el-radio label="DEPTS">部门</el-radio>
|
||||
<el-radio label="INITIATOR">发起人</el-radio>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div v-if="dataType === 'USERS'">
|
||||
<el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">
|
||||
{{userText}}
|
||||
</el-tag>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dataType === 'ROLES'">
|
||||
<el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色" @change="changeSelectRoles">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.roleId"
|
||||
:label="item.roleName"
|
||||
:value="`ROLE${item.roleId}`"
|
||||
:disabled="item.status === 1">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-if="dataType === 'DEPTS'">
|
||||
<tree-select
|
||||
:width="320"
|
||||
:height="400"
|
||||
size="mini"
|
||||
:data="deptTreeData"
|
||||
:defaultProps="deptProps"
|
||||
multiple
|
||||
clearable
|
||||
checkStrictly
|
||||
nodeKey="id"
|
||||
:checkedKeys="deptIds"
|
||||
@change="checkedDeptChange">
|
||||
</tree-select>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div v-show="showMultiFlog">
|
||||
<el-divider />
|
||||
<h4><b>多实例审批方式</b></h4>
|
||||
<el-row>
|
||||
<el-radio-group v-model="multiLoopType" @change="changeMultiLoopType()">
|
||||
<el-row><el-radio label="Null">无</el-radio></el-row>
|
||||
<el-row><el-radio label="SequentialMultiInstance">会签（需所有审批人同意）</el-radio></el-row>
|
||||
<el-row><el-radio label="ParallelMultiInstance">或签（一名审批人同意即可）</el-radio></el-row>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row v-if="multiLoopType !== 'Null'">
|
||||
<el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
|
||||
<i class="header-icon el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
<span class="custom-label">顺序审批：</span>
|
||||
<el-switch v-model="isSequential" @change="changeMultiLoopType()" />
|
||||
</el-row>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 候选用户弹窗 -->
|
||||
<el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
|
||||
<el-row type="flex" :gutter="20">
|
||||
<!--部门数据-->
|
||||
<el-col :span="7">
|
||||
<el-card shadow="never" style="height: 100%">
|
||||
<div slot="header">
|
||||
<span>部门列表</span>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
<el-tree
|
||||
:data="deptOptions"
|
||||
:props="deptProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="用户名" align="center" prop="nickName" />
|
||||
<el-table-column label="部门" align="center" prop="dept.deptName" />
|
||||
</el-table>
|
||||
<pagination
|
||||
:total="userTotal"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getUserList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleTaskUserComplete">确 定</el-button>
|
||||
<el-button @click="userOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listUser, deptTreeSelect } from "@/api/system/user";
|
||||
import { listRole } from "@/api/system/role";
|
||||
import TreeSelect from "@/components/TreeSelect";
|
||||
|
||||
const userTaskForm = {
|
||||
dataType: '',
|
||||
assignee: '',
|
||||
candidateUsers: '',
|
||||
candidateGroups: '',
|
||||
text: '',
|
||||
// dueDate: '',
|
||||
// followUpDate: '',
|
||||
// priority: ''
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "UserTask",
|
||||
props: {
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
components: { TreeSelect },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataType: 'USERS',
|
||||
selectedUser: {
|
||||
ids: [],
|
||||
text: []
|
||||
},
|
||||
userOpen: false,
|
||||
deptName: undefined,
|
||||
deptOptions: [],
|
||||
deptProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
deptTempOptions: [],
|
||||
userTableList: [],
|
||||
userTotal: 0,
|
||||
selectedUserDate: [],
|
||||
roleOptions: [],
|
||||
roleIds: [],
|
||||
deptTreeData: [],
|
||||
deptIds: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined
|
||||
},
|
||||
showMultiFlog: false,
|
||||
isSequential: false,
|
||||
multiLoopType: 'Null',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.$nextTick(() => this.resetTaskForm());
|
||||
}
|
||||
},
|
||||
// 根据名称筛选部门树
|
||||
deptName(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
},
|
||||
methods: {
|
||||
resetTaskForm() {
|
||||
const bpmnElementObj = this.bpmnElement?.businessObject;
|
||||
if (!bpmnElementObj) {
|
||||
return;
|
||||
}
|
||||
this.clearOptionsData()
|
||||
this.dataType = bpmnElementObj['dataType'];
|
||||
if (this.dataType === 'USERS') {
|
||||
let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
|
||||
let userText = bpmnElementObj['text'] || [];
|
||||
if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
|
||||
this.selectedUser.ids = userIdData?.toString().split(',');
|
||||
this.selectedUser.text = userText?.split(',');
|
||||
}
|
||||
if (this.selectedUser.ids.length > 1) {
|
||||
this.showMultiFlog = true;
|
||||
}
|
||||
} else if (this.dataType === 'ROLES') {
|
||||
this.getRoleOptions();
|
||||
let roleIdData = bpmnElementObj['candidateGroups'] || [];
|
||||
if (roleIdData && roleIdData.length > 0) {
|
||||
this.roleIds = roleIdData.split(',')
|
||||
}
|
||||
this.showMultiFlog = true;
|
||||
} else if (this.dataType === 'DEPTS') {
|
||||
this.getDeptTreeData();
|
||||
let deptIdData = bpmnElementObj['candidateGroups'] || [];
|
||||
if (deptIdData && deptIdData.length > 0) {
|
||||
this.deptIds = deptIdData.split(',');
|
||||
}
|
||||
this.showMultiFlog = true;
|
||||
}
|
||||
this.getElementLoop(bpmnElementObj);
|
||||
},
|
||||
/**
|
||||
* 清空选项数据
|
||||
*/
|
||||
clearOptionsData() {
|
||||
this.selectedUser.ids = [];
|
||||
this.selectedUser.text = [];
|
||||
this.roleIds = [];
|
||||
this.deptIds = [];
|
||||
},
|
||||
/**
|
||||
* 跟新节点数据
|
||||
*/
|
||||
updateElementTask() {
|
||||
const taskAttr = Object.create(null);
|
||||
for (let key in userTaskForm) {
|
||||
taskAttr[key] = userTaskForm[key];
|
||||
}
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||
},
|
||||
/**
|
||||
* 查询部门下拉树结构
|
||||
*/
|
||||
getDeptOptions() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.deptOptions || this.deptOptions.length <= 0) {
|
||||
deptTreeSelect().then(response => {
|
||||
this.deptTempOptions = response.data;
|
||||
this.deptOptions = response.data;
|
||||
resolve()
|
||||
})
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 查询部门下拉树结构（含部门前缀）
|
||||
*/
|
||||
getDeptTreeData() {
|
||||
function refactorTree(data) {
|
||||
return data.map(node => {
|
||||
let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
|
||||
if (node.children && node.children.length > 0) {
|
||||
treeData.children = refactorTree(node.children);
|
||||
}
|
||||
return treeData;
|
||||
});
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.deptTreeData || this.deptTreeData.length <= 0) {
|
||||
this.getDeptOptions().then(() => {
|
||||
this.deptTreeData = refactorTree(this.deptOptions);
|
||||
resolve()
|
||||
}).catch(() => {
|
||||
reject()
|
||||
})
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查询部门下拉树结构
|
||||
*/
|
||||
getRoleOptions() {
|
||||
if (!this.roleOptions || this.roleOptions.length <= 0) {
|
||||
listRole().then(response => this.roleOptions = response.rows);
|
||||
}
|
||||
},
|
||||
/** 查询用户列表 */
|
||||
getUserList() {
|
||||
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||
this.userTableList = response.rows;
|
||||
this.userTotal = response.total;
|
||||
});
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.deptId = data.id;
|
||||
this.getUserList();
|
||||
},
|
||||
// 关闭标签
|
||||
handleClose(tag) {
|
||||
this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
|
||||
this.$refs.multipleTable.toggleRowSelection(tag);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedUserDate = selection;
|
||||
},
|
||||
onSelectUsers() {
|
||||
this.selectedUserDate = []
|
||||
this.$refs.multipleTable?.clearSelection();
|
||||
this.getDeptOptions();
|
||||
this.userOpen = true;
|
||||
},
|
||||
handleTaskUserComplete() {
|
||||
if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
|
||||
this.$modal.msgError('请选择用户');
|
||||
return;
|
||||
}
|
||||
userTaskForm.dataType = 'USERS';
|
||||
this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];
|
||||
if (this.selectedUserDate.length === 1) {
|
||||
let data = this.selectedUserDate[0];
|
||||
userTaskForm.assignee = data.userId;
|
||||
userTaskForm.text = data.nickName;
|
||||
userTaskForm.candidateUsers = null;
|
||||
this.showMultiFlog = false;
|
||||
this.multiLoopType = 'Null';
|
||||
this.changeMultiLoopType();
|
||||
} else {
|
||||
userTaskForm.candidateUsers = this.selectedUserDate.map(k => k.userId).join() || null;
|
||||
userTaskForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;
|
||||
userTaskForm.assignee = null;
|
||||
this.showMultiFlog = true;
|
||||
}
|
||||
this.updateElementTask()
|
||||
this.userOpen = false;
|
||||
},
|
||||
changeSelectRoles(val) {
|
||||
let groups = null;
|
||||
let text = null;
|
||||
if (val && val.length > 0) {
|
||||
userTaskForm.dataType = 'ROLES';
|
||||
groups = val.join() || null;
|
||||
let textArr = this.roleOptions.filter(k => val.indexOf(`ROLE${k.roleId}`) >= 0);
|
||||
text = textArr?.map(k => k.roleName).join() || null;
|
||||
} else {
|
||||
userTaskForm.dataType = null;
|
||||
this.multiLoopType = 'Null';
|
||||
}
|
||||
userTaskForm.candidateGroups = groups;
|
||||
userTaskForm.text = text;
|
||||
this.updateElementTask();
|
||||
this.changeMultiLoopType();
|
||||
},
|
||||
checkedDeptChange(checkedIds) {
|
||||
let groups = null;
|
||||
let text = null;
|
||||
this.deptIds = checkedIds;
|
||||
if (checkedIds && checkedIds.length > 0) {
|
||||
userTaskForm.dataType = 'DEPTS';
|
||||
groups = checkedIds.join() || null;
|
||||
let textArr = []
|
||||
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
|
||||
checkedIds.forEach(id => {
|
||||
let stark = []
|
||||
stark = stark.concat(treeStarkData);
|
||||
while(stark.length) {
|
||||
let temp = stark.shift();
|
||||
if(temp.children) {
|
||||
stark = temp.children.concat(stark);
|
||||
}
|
||||
if(id === temp.id) {
|
||||
textArr.push(temp);
|
||||
}
|
||||
}
|
||||
})
|
||||
text = textArr?.map(k => k.label).join() || null;
|
||||
} else {
|
||||
userTaskForm.dataType = null;
|
||||
this.multiLoopType = 'Null';
|
||||
}
|
||||
userTaskForm.candidateGroups = groups;
|
||||
userTaskForm.text = text;
|
||||
this.updateElementTask();
|
||||
this.changeMultiLoopType();
|
||||
},
|
||||
changeDataType(val) {
|
||||
if (val === 'ROLES' || val === 'DEPTS' || (val === 'USERS' && this.selectedUser.ids.length > 1)) {
|
||||
this.showMultiFlog = true;
|
||||
} else {
|
||||
this.showMultiFlog = false;
|
||||
}
|
||||
this.multiLoopType = 'Null';
|
||||
this.changeMultiLoopType();
|
||||
// 清空 userTaskForm 所有属性值
|
||||
Object.keys(userTaskForm).forEach(key => userTaskForm[key] = null);
|
||||
userTaskForm.dataType = val;
|
||||
if (val === 'USERS') {
|
||||
if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
|
||||
if (this.selectedUser.ids.length === 1) {
|
||||
userTaskForm.assignee = this.selectedUser.ids[0];
|
||||
} else {
|
||||
userTaskForm.candidateUsers = this.selectedUser.ids.join()
|
||||
}
|
||||
userTaskForm.text = this.selectedUser.text?.join() || null
|
||||
}
|
||||
} else if (val === 'ROLES') {
|
||||
this.getRoleOptions();
|
||||
if (this.roleIds && this.roleIds.length > 0) {
|
||||
userTaskForm.candidateGroups = this.roleIds.join() || null;
|
||||
let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
|
||||
userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
|
||||
}
|
||||
} else if (val === 'DEPTS') {
|
||||
this.getDeptTreeData();
|
||||
if (this.deptIds && this.deptIds.length > 0) {
|
||||
userTaskForm.candidateGroups = this.deptIds.join() || null;
|
||||
let textArr = []
|
||||
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
|
||||
this.deptIds.forEach(id => {
|
||||
let stark = []
|
||||
stark = stark.concat(treeStarkData);
|
||||
while(stark.length) {
|
||||
let temp = stark.shift();
|
||||
if(temp.children) {
|
||||
stark = temp.children.concat(stark);
|
||||
}
|
||||
if(id === temp.id) {
|
||||
textArr.push(temp);
|
||||
}
|
||||
}
|
||||
})
|
||||
userTaskForm.text = textArr?.map(k => k.label).join() || null;
|
||||
}
|
||||
} else if (val === 'INITIATOR') {
|
||||
userTaskForm.assignee = "${initiator}";
|
||||
userTaskForm.text = "流程发起人";
|
||||
}
|
||||
this.updateElementTask();
|
||||
},
|
||||
getElementLoop(businessObject) {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
this.multiLoopType = "Null";
|
||||
return;
|
||||
}
|
||||
this.isSequential = businessObject.loopCharacteristics.isSequential;
|
||||
if (businessObject.loopCharacteristics.completionCondition) {
|
||||
if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
|
||||
this.multiLoopType = "SequentialMultiInstance";
|
||||
} else {
|
||||
this.multiLoopType = "ParallelMultiInstance";
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
changeMultiLoopType() {
|
||||
// 取消多实例配置
|
||||
if (this.multiLoopType === "Null") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null, assignee: null });
|
||||
return;
|
||||
}
|
||||
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
|
||||
// 更新多实例配置
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
loopCharacteristics: this.multiLoopInstance,
|
||||
assignee: '${assignee}'
|
||||
});
|
||||
// 完成条件
|
||||
let completionCondition = null;
|
||||
// 会签
|
||||
if (this.multiLoopType === "SequentialMultiInstance") {
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
|
||||
}
|
||||
// 或签
|
||||
if (this.multiLoopType === "ParallelMultiInstance") {
|
||||
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
|
||||
}
|
||||
// 更新模块属性信息
|
||||
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
|
||||
collection: '${multiInstanceHandler.getUserIds(execution)}',
|
||||
elementVariable: 'assignee',
|
||||
completionCondition
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-row .el-radio-group {
|
||||
margin-bottom: 15px;
|
||||
.el-radio {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.el-tag {
|
||||
margin-bottom: 10px;
|
||||
+ .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-label {
|
||||
padding-left: 5px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
/* 改变主题色变量 */
|
||||
// $--color-primary: #1890ff;
|
||||
// $--color-danger: #ff4d4f;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
|
||||
.process-drawer .el-drawer__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
div[class^="el-drawer"]:focus,
|
||||
span:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.process-drawer .el-drawer__body {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.process-design {
|
||||
.el-table td,
|
||||
.el-table th {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 16px;
|
||||
max-height: 80vh;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
.el-dialog__close {
|
||||
font-weight: 600;
|
||||
}
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-divider:not(.el-divider--horizontal) {
|
||||
margin: 0 8px ;
|
||||
}
|
||||
.el-divider.el-divider--horizontal {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
@import "./flow-element-variables.scss";
|
||||
@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
|
||||
// @import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
|
||||
// @import "bpmn-js-token-simulation/assets/css/normalize.css";
|
||||
@import "bpmn-js/dist/assets/diagram-js.css";
|
||||
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
|
||||
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
|
||||
@import "./process-designer.scss";
|
||||
@import "./process-panel.scss";
|
||||
|
||||
$success-color: #4eb819;
|
||||
$primary-color: #409EFF;
|
||||
$warning-color: #E6A23C;
|
||||
$danger-color: #F56C6C;
|
||||
$cancel-color: #909399;
|
||||
|
||||
.process-viewer {
|
||||
position: relative;
|
||||
border: 1px solid #EFEFEF;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
|
||||
|
||||
.success-arrow {
|
||||
fill: $success-color;
|
||||
stroke: $success-color;
|
||||
}
|
||||
|
||||
.success-conditional {
|
||||
fill: white;
|
||||
stroke: $success-color;
|
||||
}
|
||||
|
||||
.fail-arrow {
|
||||
fill: $warning-color;
|
||||
stroke: $warning-color;
|
||||
}
|
||||
|
||||
.fail-conditional {
|
||||
fill: white;
|
||||
stroke: $warning-color;
|
||||
}
|
||||
|
||||
.success.djs-connection {
|
||||
.djs-visual path {
|
||||
stroke: $success-color!important;
|
||||
marker-end: url(#sequenceflow-end-white-success)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.success.djs-connection.condition-expression {
|
||||
.djs-visual path {
|
||||
marker-start: url(#conditional-flow-marker-white-success)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.success.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $success-color!important;
|
||||
fill: $success-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $success-color!important;
|
||||
}
|
||||
|
||||
.djs-visual path:nth-child(2) {
|
||||
stroke: $success-color!important;
|
||||
fill: $success-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $success-color!important;
|
||||
fill: $success-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.primary.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $primary-color!important;
|
||||
fill: $primary-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $primary-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $primary-color!important;
|
||||
fill: $primary-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.warning.djs-connection {
|
||||
.djs-visual path {
|
||||
stroke: $warning-color!important;
|
||||
marker-end: url(#sequenceflow-end-white-fail)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.warning.djs-connection.condition-expression {
|
||||
.djs-visual path {
|
||||
marker-start: url(#conditional-flow-marker-white-fail)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.warning.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $warning-color!important;
|
||||
fill: $warning-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $warning-color!important;
|
||||
}
|
||||
|
||||
.djs-visual path:nth-child(2) {
|
||||
stroke: $warning-color!important;
|
||||
fill: $warning-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $warning-color!important;
|
||||
fill: $warning-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.danger.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $danger-color!important;
|
||||
fill: $danger-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $danger-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $danger-color!important;
|
||||
fill: $danger-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel.djs-shape {
|
||||
.djs-visual rect {
|
||||
stroke: $cancel-color!important;
|
||||
fill: $cancel-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
|
||||
.djs-visual polygon {
|
||||
stroke: $cancel-color!important;
|
||||
}
|
||||
|
||||
.djs-visual circle {
|
||||
stroke: $cancel-color!important;
|
||||
fill: $cancel-color!important;
|
||||
fill-opacity: 0.15!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
// 边框被 token-simulation 样式覆盖了
|
||||
.djs-palette {
|
||||
background: var(--palette-background-color);
|
||||
border: solid 1px var(--palette-border-color) !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.my-process-designer {
|
||||
padding: 5px 0 10px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
.my-process-designer__header {
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
.el-button {
|
||||
text-align: center;
|
||||
}
|
||||
.el-button-group {
|
||||
margin: 4px;
|
||||
}
|
||||
.el-tooltip__popper {
|
||||
.el-button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-button:hover {
|
||||
background: rgba(64, 158, 255, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.align {
|
||||
position: relative;
|
||||
i {
|
||||
&:after {
|
||||
content: "|";
|
||||
position: absolute;
|
||||
transform: rotate(90deg) translate(200%, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.align.align-left i {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.align.align-right i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.align.align-top i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.align.align-bottom i {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.align.align-center i {
|
||||
transform: rotate(90deg);
|
||||
&:after {
|
||||
transform: rotate(90deg) translate(0, 60%);
|
||||
}
|
||||
}
|
||||
.align.align-middle i {
|
||||
transform: rotate(0deg);
|
||||
&:after {
|
||||
transform: rotate(90deg) translate(0, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-process-designer__container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.my-process-designer__canvas {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
|
||||
repeat !important;
|
||||
div.toggle-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.my-process-designer__property-panel {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//侧边栏配置
|
||||
.djs-palette.open {
|
||||
.djs-palette-entries {
|
||||
div[class^="bpmn-icon-"]:before,
|
||||
div[class*="bpmn-icon-"]:before {
|
||||
line-height: unset;
|
||||
}
|
||||
div.entry {
|
||||
position: relative;
|
||||
}
|
||||
div.entry:hover {
|
||||
&::after {
|
||||
width: max-content;
|
||||
content: attr(title);
|
||||
vertical-align: text-bottom;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(100%);
|
||||
font-size: 0.5em;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
background: #fafafa;
|
||||
box-shadow: 0 0 6px #eeeeee;
|
||||
border: 1px solid #cccccc;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
max-height: calc(80vh - 32px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.hljs {
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.hljs * {
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
.process-design {
|
||||
.process-panel__container {
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
border-left: 1px solid #eeeeee;
|
||||
box-shadow: 0 0 8px #cccccc;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.panel-tab__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.panel-tab__content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #eeeeee;
|
||||
padding: 8px 16px;
|
||||
.panel-tab__content--title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-property {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 8px 0;
|
||||
.element-property__label {
|
||||
display: block;
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.element-property__value {
|
||||
flex: 1;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.list-property {
|
||||
flex-direction: column;
|
||||
.element-listener-item {
|
||||
width: 100%;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 16px auto 32px 32px;
|
||||
grid-column-gap: 8px;
|
||||
}
|
||||
.element-listener-item + .element-listener-item {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.listener-filed__title {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
span {
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.element-drawer__button {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.element-drawer__button > .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner {
|
||||
color: #999999;
|
||||
}
|
||||
.el-form-item.el-form-item--mini {
|
||||
margin-bottom: 0;
|
||||
& + .el-form-item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
// 创建监听器实例
|
||||
export function createListenerObject(options, isTask, prefix) {
|
||||
const listenerObj = Object.create(null);
|
||||
listenerObj.event = options.event;
|
||||
// isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
|
||||
switch (options.listenerType) {
|
||||
case "scriptListener":
|
||||
listenerObj.script = createScriptObject(options, prefix);
|
||||
break;
|
||||
case "expressionListener":
|
||||
listenerObj.expression = options.expression;
|
||||
break;
|
||||
case "delegateExpressionListener":
|
||||
listenerObj.delegateExpression = options.delegateExpression;
|
||||
break;
|
||||
default:
|
||||
listenerObj.class = options.class;
|
||||
}
|
||||
// 注入字段
|
||||
if (options.fields) {
|
||||
listenerObj.fields = options.fields.map(field => {
|
||||
return createFieldObject(field, prefix);
|
||||
});
|
||||
}
|
||||
// 任务监听器的 定时器 设置
|
||||
if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
|
||||
const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
|
||||
const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
|
||||
id: `TimerEventDefinition_${uuid(8)}`,
|
||||
[`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
|
||||
});
|
||||
listenerObj.eventDefinitions = [TimerEventDefinition];
|
||||
}
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
|
||||
}
|
||||
|
||||
// 创建 监听器的注入字段 实例
|
||||
export function createFieldObject(option, prefix) {
|
||||
const { name, fieldType, string, expression } = option;
|
||||
const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
|
||||
}
|
||||
|
||||
// 创建脚本实例
|
||||
export function createScriptObject(options, prefix) {
|
||||
const { scriptType, scriptFormat, value, resource } = options;
|
||||
const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
|
||||
}
|
||||
|
||||
// 更新元素扩展属性
|
||||
export function updateElementExtensions(element, extensionList) {
|
||||
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||
values: extensionList
|
||||
});
|
||||
window.bpmnInstances.modeling.updateProperties(element, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
|
||||
// 创建一个id
|
||||
export function uuid(length = 8, chars) {
|
||||
let result = "";
|
||||
let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
for (let i = length; i > 0; --i) {
|
||||
result += charsString[Math.floor(Math.random() * charsString.length)];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import store from '@/store'
|
||||
import router from '@/router';
|
||||
|
||||
export default {
|
||||
// 刷新当前tab页签
|
||||
refreshPage(obj) {
|
||||
const { path, query, matched } = router.currentRoute;
|
||||
if (obj === undefined) {
|
||||
matched.forEach((m) => {
|
||||
if (m.components && m.components.default && m.components.default.name) {
|
||||
if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
|
||||
obj = { name: m.components.default.name, path: path, query: query };
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return store.dispatch('tagsView/delCachedView', obj).then(() => {
|
||||
const { path, query } = obj
|
||||
router.replace({
|
||||
path: '/redirect' + path,
|
||||
query: query
|
||||
})
|
||||
})
|
||||
},
|
||||
// 关闭当前tab页签，打开新页签
|
||||
closeOpenPage(obj) {
|
||||
store.dispatch("tagsView/delView", router.currentRoute);
|
||||
if (obj !== undefined) {
|
||||
return router.push(obj);
|
||||
}
|
||||
},
|
||||
// 关闭指定tab页签
|
||||
closePage(obj) {
|
||||
if (obj === undefined) {
|
||||
return store.dispatch('tagsView/delView', router.currentRoute).then(({ visitedViews }) => {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
return router.push(latestView.fullPath)
|
||||
}
|
||||
return router.push('/');
|
||||
});
|
||||
}
|
||||
return store.dispatch('tagsView/delView', obj);
|
||||
},
|
||||
// 关闭所有tab页签
|
||||
closeAllPage() {
|
||||
return store.dispatch('tagsView/delAllViews');
|
||||
},
|
||||
// 关闭左侧tab页签
|
||||
closeLeftPage(obj) {
|
||||
return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute);
|
||||
},
|
||||
// 关闭右侧tab页签
|
||||
closeRightPage(obj) {
|
||||
return store.dispatch('tagsView/delRightTags', obj || router.currentRoute);
|
||||
},
|
||||
// 关闭其他tab页签
|
||||
closeOtherPage(obj) {
|
||||
return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute);
|
||||
},
|
||||
// 添加tab页签
|
||||
openPage(title, url, params) {
|
||||
var obj = { path: url, meta: { title: title } }
|
||||
store.dispatch('tagsView/addView', obj);
|
||||
return router.push({ path: url, query: params });
|
||||
},
|
||||
// 修改tab页签
|
||||
updatePage(obj) {
|
||||
return store.dispatch('tagsView/updateVisitedView', obj);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,35 +4,40 @@
|
|||
'element.click',
|
||||
'connection.added',
|
||||
'connection.removed',
|
||||
'connection.changed'
|
||||
]" @connection-added="connectionAdded" @connection-removed="connectionRemoved"
|
||||
'connection.changed',
|
||||
'shape.removed'
|
||||
]" @connection-added="connectionAdded" @connection-removed="connectionRemoved" @shape-removed="shapeRemoved"
|
||||
@connection-changed="connectionChanged" @element-click="elementClick" @init-finished="initModeler"
|
||||
@event="handlerEvent" @save="onSaveProcess" :schemeCode="props.schemeCode" :pageFlow="props.pageFlow" :pageType="props.pageType"/>
|
||||
@event="handlerEvent" @save="onSaveProcess" :schemeCode="data.schemeCode" :pageFlow="data.pageFlow"
|
||||
:pageType="data.pageType" />
|
||||
<!-- 属性面板 -->
|
||||
<bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix"
|
||||
class="process-panel" ref=processPanel :schemeCode="props.schemeCode" :pageView="props.pageView" :pageType="props.pageType"/>
|
||||
<bmpn-process-penal :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel"
|
||||
ref=processPanel :schemeCode="data.schemeCode" :pageView="data.pageView" :pageType="data.pageType" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, reactive, onMounted, defineProps, computed, defineEmits, inject,ref } from 'vue';
|
||||
import { h, reactive, onMounted, defineProps, computed, defineEmits, inject, ref ,watch} from 'vue';
|
||||
import './package/theme/index.scss';
|
||||
// 流程面板和属性面板
|
||||
import { BpmnProcessDesigner, BmpnProcessPenal } from './package/index';
|
||||
import 'highlight.js/styles/atom-one-dark-reasonable.css';
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
const emit = defineEmits(['save']);
|
||||
// Vue.use(vuePlugin);
|
||||
const props = defineProps({
|
||||
// 编辑模板，code供详情接口使用
|
||||
schemeCode:{
|
||||
type:String,
|
||||
schemeCode: {
|
||||
type: String,
|
||||
},
|
||||
// 预览历史版本wfData
|
||||
pageView:String,
|
||||
pageView: String,
|
||||
// 分辨是不是预览历史版本detial
|
||||
pageType:String,
|
||||
pageType: String,
|
||||
// 流程图
|
||||
pageFlow:String,
|
||||
pageFlow: String,
|
||||
})
|
||||
const data = reactive({
|
||||
height: document.documentElement.clientHeight - 144.5 + "px;",
|
||||
|
|
@ -42,19 +47,35 @@
|
|||
prefix: 'flowable',
|
||||
},
|
||||
element: null,
|
||||
schemeCode:props.schemeCode,
|
||||
pageView:props.pageView,
|
||||
pageType:props.pageType,
|
||||
pageFlow:props.pageFlow,
|
||||
})
|
||||
if(props.pageType == 'detail'){
|
||||
watch(
|
||||
() => props.pageView,
|
||||
(newVal, oldVal) => {
|
||||
data.pageView=newVal
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.pageFlow,
|
||||
(newVal, oldVal) => {
|
||||
data.pageFlow=newVal
|
||||
}
|
||||
)
|
||||
if (props.pageType == 'detail') {
|
||||
data.height = document.documentElement.clientHeight - 294.5 + "px;"
|
||||
}
|
||||
const processPanel = ref < any > ()
|
||||
const processDesigner = ref <any> ()
|
||||
const processDesigner = ref < any > ()
|
||||
async function getFlow() {
|
||||
let panel = await processPanel.value.getPanel()
|
||||
let flow = await processDesigner.value.getFlow()
|
||||
panel.scheme.flowContent = flow
|
||||
return panel
|
||||
}
|
||||
async function validateFlow(){
|
||||
async function validateFlow() {
|
||||
let res = await processPanel.value.validatePanel()
|
||||
return res
|
||||
}
|
||||
|
|
@ -68,7 +89,14 @@
|
|||
|
||||
}
|
||||
function connectionRemoved(node) {
|
||||
console.log(node)
|
||||
console.log('connectionRemoved')
|
||||
flowWfDataStore.deleteWfData(node)
|
||||
}
|
||||
function shapeRemoved(node){
|
||||
console.log('shapeRemoved')
|
||||
flowWfDataStore.deleteWfData(node)
|
||||
|
||||
}
|
||||
function connectionChanged(node) {
|
||||
data.element = node;
|
||||
|
|
@ -81,6 +109,7 @@
|
|||
data.element = element;
|
||||
}
|
||||
function initModeler(modeler) {
|
||||
console.log(modeler)
|
||||
setTimeout(() => {
|
||||
data.modeler = modeler;
|
||||
}, 10);
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
|
||||
import { h, provide, reactive, onMounted, defineProps, computed, defineEmits ,watch} from 'vue';
|
||||
import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
|
||||
// 生产环境时优化
|
||||
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||
|
|
@ -55,7 +55,8 @@
|
|||
|
||||
const emit = defineEmits(['init-finished', 'event', 'commandStack-changed', 'input', 'change', 'canvas-viewbox-changed', 'destroy', 'save', 'element-click', 'connection-added', 'connection-removed', 'connection-changed']);
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
// 引入json转换与高亮
|
||||
import convert from "xml-js";
|
||||
const process = reactive({
|
||||
|
|
@ -70,27 +71,6 @@
|
|||
})
|
||||
const props = defineProps({
|
||||
value: String, // xml 字符串
|
||||
processId: String,
|
||||
processName: String,
|
||||
translations: Object, // 自定义的翻译文件
|
||||
additionalModel: [Object, Array], // 自定义model
|
||||
moddleExtension: Object, // 自定义moddle
|
||||
onlyCustomizeAddi: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onlyCustomizeModdle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
simulation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "flowable"
|
||||
|
|
@ -110,16 +90,22 @@
|
|||
validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
|
||||
},
|
||||
schemeCode: String,
|
||||
pageFlow:String,
|
||||
pageType:String,
|
||||
pageFlow: String,
|
||||
pageType: String,
|
||||
})
|
||||
watch(
|
||||
() => props.pageFlow,
|
||||
(newVal, oldVal) => {
|
||||
createNewDiagram(newVal)
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
initBpmnModeler();
|
||||
createNewDiagram(props.value);
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo(1)
|
||||
}
|
||||
if(props.pageType=='detail'){
|
||||
if (props.pageType == 'detail') {
|
||||
createNewDiagram(props.pageFlow)
|
||||
}
|
||||
})
|
||||
|
|
@ -188,6 +174,12 @@
|
|||
const { scale } = viewbox;
|
||||
process.defaultZoom = Math.floor(scale * 100) / 100;
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
process.bpmnModeler.on("selection.changed", ({ newSelection }) => {
|
||||
});
|
||||
process.bpmnModeler.on("element.changed", ({ element }) => {
|
||||
|
||||
});
|
||||
}
|
||||
/* 创建新的流程图 */
|
||||
async function createNewDiagram(xml) {
|
||||
|
|
@ -205,78 +197,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 下载流程图到本地
|
||||
async function downloadProcess(type, name) {
|
||||
try {
|
||||
const _this = this;
|
||||
// 按需要类型创建文件并下载
|
||||
if (type === "xml" || type === "bpmn") {
|
||||
const { err, xml } = await process.bpmnModeler.saveXML();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
console.error(`[Process Designer Warn ]: ${err.message || err}`);
|
||||
}
|
||||
let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
|
||||
downloadFunc(href, filename);
|
||||
} else {
|
||||
const { err, svg } = await process.bpmnModeler.saveSVG();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
return console.error(err);
|
||||
}
|
||||
let { href, filename } = setEncoded("SVG", name, svg);
|
||||
downloadFunc(href, filename);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn ]: ${e.message || e}`);
|
||||
}
|
||||
// 文件下载方法
|
||||
function downloadFunc(href, filename) {
|
||||
if (href && filename) {
|
||||
let a = document.createElement("a");
|
||||
a.download = filename; //指定下载的文件名
|
||||
a.href = href; // URL对象
|
||||
a.click(); // 模拟点击
|
||||
URL.revokeObjectURL(a.href); // 释放URL 对象
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据所需类型进行转码并返回下载地址
|
||||
function setEncoded(type, filename = "diagram", data) {
|
||||
const encodedData = encodeURIComponent(data);
|
||||
return {
|
||||
filename: `${filename}.${type}`,
|
||||
href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
|
||||
data: data
|
||||
};
|
||||
}
|
||||
|
||||
// 加载本地文件
|
||||
function importLocalFile() {
|
||||
const that = this;
|
||||
const file = this.$refs.refFile.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file);
|
||||
reader.onload = function () {
|
||||
let xmlStr = this.result;
|
||||
createNewDiagram(xmlStr);
|
||||
};
|
||||
}
|
||||
/* ------------------------------------------------ refs methods ------------------------------------------------------ */
|
||||
function downloadProcessAsXml() {
|
||||
downloadProcess("xml");
|
||||
}
|
||||
function downloadProcessAsBpmn() {
|
||||
downloadProcess("bpmn");
|
||||
}
|
||||
function downloadProcessAsSvg() {
|
||||
downloadProcess("svg");
|
||||
}
|
||||
function processSimulation() {
|
||||
process.simulationStatus = !process.simulationStatus;
|
||||
props.simulation && process.bpmnModeler.get("toggleMode").toggleMode();
|
||||
}
|
||||
function processRedo() {
|
||||
process.bpmnModeler.get("commandStack").redo();
|
||||
}
|
||||
|
|
@ -299,16 +220,6 @@
|
|||
process.defaultZoom = newZoom;
|
||||
process.bpmnModeler.get("canvas").zoom(process.defaultZoom);
|
||||
}
|
||||
function processZoomTo(newZoom = 1) {
|
||||
if (newZoom < 0.2) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
||||
}
|
||||
if (newZoom > 4) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
|
||||
}
|
||||
process.defaultZoom = newZoom;
|
||||
process.bpmnModeler.get("canvas").zoom(newZoom);
|
||||
}
|
||||
function processReZoom() {
|
||||
process.defaultZoom = 1;
|
||||
process.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
|
||||
|
|
@ -317,20 +228,7 @@
|
|||
process.recoverable = false;
|
||||
process.revocable = false;
|
||||
createNewDiagram(null).then(() => process.bpmnModeler.get("canvas").zoom(1, "auto"));
|
||||
}
|
||||
function elementsAlign(align) {
|
||||
const Align = process.bpmnModeler.get("alignElements");
|
||||
const Selection = process.bpmnModeler.get("selection");
|
||||
const SelectedElements = Selection.get();
|
||||
if (!SelectedElements || SelectedElements.length <= 1) {
|
||||
this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
|
||||
return;
|
||||
}
|
||||
this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => Align.trigger(SelectedElements, align));
|
||||
flowWfDataStore.setWfDataAll([])
|
||||
}
|
||||
/*----------------------------- 方法结束 ---------------------------------*/
|
||||
function previewProcessXML() {
|
||||
|
|
|
|||
|
|
@ -3,42 +3,34 @@
|
|||
<a-tabs v-model:activeKey="configActiveName">
|
||||
<a-tab-pane :tab="data.wfNodeName" key="1">
|
||||
<!-- 开始节点 -->
|
||||
<start-event-option ref="startRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType"
|
||||
<start-event-option ref="startRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:StartEvent' ? '' : 'hidden'"></start-event-option>
|
||||
<!-- 审核节点 -->
|
||||
<user-task-option ref="taskRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType"
|
||||
<user-task-option ref="taskRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:Task' ? '' : 'hidden'">
|
||||
</user-task-option>
|
||||
<!-- 结束节点 -->
|
||||
<end-event-option ref="endRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
<end-event-option ref="endRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:EndEvent' ? '' : 'hidden'"></end-event-option>
|
||||
<!-- 子流程 -->
|
||||
<subprocess-option ref="subprocessRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType"
|
||||
<subprocess-option ref="subprocessRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:SubProcess' ? '' : 'hidden'"></subprocess-option>
|
||||
<!-- 排他网关 -->
|
||||
<exclusive-gateway-option ref="exclusiveGatewayRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType"
|
||||
<exclusive-gateway-option ref="exclusiveGatewayRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:ExclusiveGateway' ? '' : 'hidden'">
|
||||
</exclusive-gateway-option>
|
||||
<!-- 并行网关 -->
|
||||
<parallel-gateway-option ref="parallelGatewayRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType"
|
||||
<parallel-gateway-option ref="parallelGatewayRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:ParallelGateway' ? '' : 'hidden'">
|
||||
</parallel-gateway-option>
|
||||
<!-- 包容网关 -->
|
||||
<!-- "bpmn:InclusiveGateway" -->
|
||||
<inclusive-gateway-option ref="inclusiveGatewayRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType"
|
||||
<inclusive-gateway-option ref="inclusiveGatewayRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:InclusiveGateway' ? '' : 'hidden'">
|
||||
</inclusive-gateway-option>
|
||||
<!-- 线条 -->
|
||||
<myline-option ref="mylineRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
|
||||
:pageView="props.pageView" :pageType="props.pageType" :wfData="data.wfData" :flowRef="data.flowRef"
|
||||
:class="data.currentWfNode.type=='bpmn:SequenceFlow' ? '' : 'hidden'">
|
||||
</myline-option>
|
||||
<myline-option ref="mylineRef" :element="data.currentWfNode" :pageType="props.pageType"
|
||||
:class="data.currentWfNode.type=='bpmn:SequenceFlow' ? '' : 'hidden'"> </myline-option>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="流程属性" key="2">
|
||||
<shcemeinfo-config ref="shcemeinfoRef" :disabled="true" :pageType="props.pageType"></shcemeinfo-config>
|
||||
|
|
@ -86,12 +78,9 @@
|
|||
import subprocessOption from './subprocess/index.vue'
|
||||
// 线
|
||||
import mylineOption from './myline/index.vue'
|
||||
/**
|
||||
* 侧边栏
|
||||
* @Author MiyueFE
|
||||
* @Home https://github.com/miyuesc
|
||||
* @Date 2021年3月31日18:57:51
|
||||
*/
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
|
||||
const props = defineProps({
|
||||
bpmnModeler: Object,
|
||||
prefix: {
|
||||
|
|
@ -108,7 +97,14 @@
|
|||
pageView: String,
|
||||
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.pageView,
|
||||
(newVal, oldVal) => {
|
||||
var content = JSON.parse(newVal)
|
||||
shcemeinfoRef.value.setForm(content)
|
||||
flowWfDataStore.setWfDataAll(content.wfData)
|
||||
}
|
||||
)
|
||||
const startRef = ref < any > ()
|
||||
const shcemeinfoRef = ref < any > ()
|
||||
const authRef = ref < any > ()
|
||||
|
|
@ -123,92 +119,13 @@
|
|||
currentWfNode: undefined,
|
||||
wfNodeName: "",
|
||||
wfData: [],
|
||||
flowRef: {}
|
||||
activeTab: "base",
|
||||
elementId: "",
|
||||
elementType: "",
|
||||
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
conditionFormVisible: false, // 流转条件设置
|
||||
formVisible: false, // 表单配置
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal)
|
||||
var typeName = newVal.type.replace('bpmn:', '')
|
||||
if (newVal.type == "bpmn:Process") {
|
||||
data.currentWfNode = {
|
||||
type: newVal.type
|
||||
}
|
||||
configActiveName.value = '2'
|
||||
} else {
|
||||
data.currentWfNode = newVal
|
||||
configActiveName.value = '1'
|
||||
switch (typeName) {
|
||||
case 'StartEvent':
|
||||
data.wfNodeName = "开始节点"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'EndEvent':
|
||||
data.wfNodeName = "结束节点"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'Task':
|
||||
data.wfNodeName = "审核节点"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'SubProcess':
|
||||
data.wfNodeName = "子流程"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'ExclusiveGateway':
|
||||
data.wfNodeName = "排他网关"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'ParallelGateway':
|
||||
data.wfNodeName = "并行网关"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'InclusiveGateway':
|
||||
data.wfNodeName = "包含网关"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
break;
|
||||
case 'SequenceFlow':
|
||||
data.wfNodeName = "线条"
|
||||
data.currentWfNode = {
|
||||
id: newVal.id,
|
||||
type: newVal.type
|
||||
}
|
||||
// 获取线条两头的节点id
|
||||
data.flowRef = {
|
||||
from: newVal.businessObject.sourceRef.id,
|
||||
to: newVal.businessObject.targetRef.id,
|
||||
}
|
||||
// 获取排他网关和审核节点的数据，为选择流转条件使用
|
||||
getWfData()
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const detailInfo = reactive({
|
||||
schemeInfo: {},
|
||||
startInfor: {},
|
||||
|
|
@ -217,6 +134,187 @@
|
|||
subprocessInfo: {},
|
||||
taskInfo: {},
|
||||
})
|
||||
|
||||
function initModels() {
|
||||
setTimeout(() => {
|
||||
getActiveElement();
|
||||
}, 10);
|
||||
}
|
||||
function getActiveElement() {
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
initFormOnChanged(null);
|
||||
props.bpmnModeler.on("import.done", e => {
|
||||
initFormOnChanged(null);
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
props.bpmnModeler.on("selection.changed", ({ newSelection }) => {
|
||||
initFormOnChanged(newSelection[0] || null);
|
||||
});
|
||||
props.bpmnModeler.on("element.changed", ({ element }) => {
|
||||
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
|
||||
if (element && element.id === data.elementId) {
|
||||
initFormOnChanged(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 初始化数据
|
||||
function initFormOnChanged(element) {
|
||||
console.log(flowWfDataStore.getWfData)
|
||||
console.log(element)
|
||||
if (element == null) {
|
||||
return
|
||||
}
|
||||
if (element.type == "bpmn:Process") {
|
||||
data.currentWfNode = {
|
||||
type: element.type
|
||||
}
|
||||
configActiveName.value = '2'
|
||||
} else {
|
||||
data.currentWfNode = element
|
||||
configActiveName.value = '1'
|
||||
setNodeData(element.type, element)
|
||||
}
|
||||
}
|
||||
// 设置节点初始数据
|
||||
function setNodeData(name, element) {
|
||||
switch (name) {
|
||||
case 'bpmn:StartEvent':
|
||||
data.wfNodeName = "开始节点"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
isNextAuditor: false,
|
||||
isCustmerTitle: false,
|
||||
formRelations: [],
|
||||
formType: "1",
|
||||
formCode: "",
|
||||
formVerison: "",
|
||||
formRelationId: "",
|
||||
formUrl: "",
|
||||
formAppUrl: "",
|
||||
authFields: [],
|
||||
messageType: "",
|
||||
isInit: true
|
||||
}
|
||||
break;
|
||||
case 'bpmn:EndEvent':
|
||||
data.wfNodeName = "结束节点"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type
|
||||
}
|
||||
break;
|
||||
case 'bpmn:Task':
|
||||
data.wfNodeName = "审核节点"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
isAddSign: false,
|
||||
isTransfer: false,
|
||||
isBatchAudit: false,
|
||||
autoAgree: "",
|
||||
noAuditor: "1",
|
||||
rejectType: "1",
|
||||
messageType: "",
|
||||
auditUsers: [],
|
||||
lookUsers: [],
|
||||
formRelations: [],
|
||||
formType: "1",
|
||||
formCode: "",
|
||||
formVerison: "",
|
||||
formRelationId: "",
|
||||
formUrl: "",
|
||||
formAppUrl: "",
|
||||
authFields: [],
|
||||
name: "审核节点",
|
||||
btnlist: [
|
||||
{
|
||||
code: "agree",
|
||||
name: "同意",
|
||||
hidden: false,
|
||||
isNextAuditor: false,
|
||||
isSign: false,
|
||||
isSys: true
|
||||
},
|
||||
{
|
||||
code: "disagree",
|
||||
name: "驳回",
|
||||
hidden: false,
|
||||
isNextAuditor: false,
|
||||
isSign: false,
|
||||
isSys: true
|
||||
}
|
||||
],
|
||||
isCountersign: false,
|
||||
isCountersignAll: false,
|
||||
countersignAgian: "1",
|
||||
countersignType: "1",
|
||||
countersignAllType: 100,
|
||||
isOvertimeMessage: false,
|
||||
overtimeMessageType: "",
|
||||
overtimeMessageStart: 1,
|
||||
overtimeMessageInterval: 1,
|
||||
overtimeGo: 12,
|
||||
isInherit: true,
|
||||
isInit: true,
|
||||
}
|
||||
break;
|
||||
case 'bpmn:SubProcess':
|
||||
data.wfNodeName = "子流程"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
isAsync: false,
|
||||
wfschemeId: '',
|
||||
wfVersionId: '',
|
||||
isInit: true,
|
||||
}
|
||||
break;
|
||||
case 'bpmn:ExclusiveGateway':
|
||||
data.wfNodeName = "排他网关"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
conditions: [],
|
||||
isInit: true,
|
||||
}
|
||||
break;
|
||||
case 'bpmn:ParallelGateway':
|
||||
data.wfNodeName = "并行网关"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
isInit: true,
|
||||
}
|
||||
break;
|
||||
case 'bpmn:InclusiveGateway':
|
||||
data.wfNodeName = "包含网关"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
conditions: [],
|
||||
isInit: true,
|
||||
}
|
||||
break;
|
||||
case 'bpmn:SequenceFlow':
|
||||
data.wfNodeName = "线条"
|
||||
data.currentWfNode = {
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
lineConditions: '',
|
||||
from: element.businessObject.sourceRef.id,
|
||||
isInit: true,
|
||||
to: element.businessObject.targetRef.id,
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// 更改flowStore的数据
|
||||
flowWfDataStore.setWfDataNode(data.currentWfNode)
|
||||
}
|
||||
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
|
|
@ -254,6 +352,7 @@
|
|||
};
|
||||
|
||||
let wfData = scheme.wfData
|
||||
flowWfDataStore.setWfDataAll(wfData)
|
||||
let auth = {
|
||||
authType: data.schemeinfo.authType,
|
||||
authData: data.schemeAuthList.map(t => {
|
||||
|
|
@ -268,57 +367,20 @@
|
|||
authRef.value.setForm(auth)
|
||||
}
|
||||
|
||||
function scriptTaskNodeInit(node) {
|
||||
node.executeType = '1'
|
||||
node.sqlDb = ''
|
||||
node.sqlStr = ''
|
||||
node.sqlStrRevoke = ''
|
||||
node.apiUrl = ''
|
||||
node.apiUrlRevoke = ''
|
||||
node.ioc = ''
|
||||
node.iocRevoke = ''
|
||||
// 数组去重
|
||||
function unique(arr) {
|
||||
let map = new Map()
|
||||
for (let item of arr) {
|
||||
map.set(item.id, item)
|
||||
}
|
||||
return [...map.values()]
|
||||
}
|
||||
|
||||
}
|
||||
function mylineNodeInit(node) {
|
||||
const wfdata = this.handleGetWFData();
|
||||
const fromNode = wfdata.find(t => t.id == node.from)
|
||||
node.lineConditions = ''
|
||||
if (fromNode.type == 'userTask') {
|
||||
if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
|
||||
node.lineConditions = 'agree' // 流转条件
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getWfData() {
|
||||
let wfData = []
|
||||
// 排他网关exclusiveGatewayRef
|
||||
// 审核节点taskRef
|
||||
let taskFrom = await !(taskRef.value) ? {} : taskRef.value.getForm();
|
||||
let gatewayInclusiveFrom = await !(exclusiveGatewayRef.value) ? {} : exclusiveGatewayRef.value.getForm();
|
||||
if (gatewayInclusiveFrom != undefined) {
|
||||
wfData.push(gatewayInclusiveFrom)
|
||||
}
|
||||
if (taskFrom != undefined) {
|
||||
wfData.push(taskFrom)
|
||||
}
|
||||
// 3.流程节点信息
|
||||
wfData.forEach(node => {
|
||||
if (node.type == 'myline' && !node.isInit) {
|
||||
node.isInit = true
|
||||
node.lineConditions = ''
|
||||
const fromNode = this.wfData.find(t => t.id == node.from)
|
||||
if (fromNode.type == 'userTask') {
|
||||
if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
|
||||
node.lineConditions = 'agree' // 流转条件
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
data.wfData = wfData
|
||||
|
||||
}
|
||||
async function validatePanel() {
|
||||
let res = await shcemeinfoRef.value.validateForm();
|
||||
if(!res){
|
||||
configActiveName.value = '2'
|
||||
}
|
||||
return res
|
||||
}
|
||||
async function getPanel() {
|
||||
|
|
@ -326,68 +388,51 @@
|
|||
let baseinfo = await shcemeinfoRef.value.getForm();
|
||||
// 2.获取流程权限信息
|
||||
let auth = await authRef.value.getForm();
|
||||
if (startRef.value == undefined) {
|
||||
let wfData = flowWfDataStore.getWfData
|
||||
var startIndex = (wfData || []).findIndex((element) => element.type == 'bpmn:StartEvent');
|
||||
if (startIndex == -1) {
|
||||
return createMessage.warn('请设置开始节点');
|
||||
}
|
||||
if (endRef.value == undefined) {
|
||||
var endIndex = (wfData || []).findIndex((element) => element.type == 'bpmn:EndEvent');
|
||||
if (endIndex == -1) {
|
||||
return createMessage.warn('请设置结束节点');
|
||||
}
|
||||
let startFrom = await startRef.value.getForm();
|
||||
let endFrom = await endRef.value.getForm();
|
||||
if (endFrom.id == '') {
|
||||
return createMessage.warn('请设置结束节点');
|
||||
}
|
||||
let wfData = []
|
||||
wfData.push(startFrom)
|
||||
wfData.push(endFrom)
|
||||
// 审核节点
|
||||
let taskFrom = await !(taskRef.value) ? {} : taskRef.value.getForm();
|
||||
if (taskFrom != undefined) {
|
||||
if (taskFrom.id != '') {
|
||||
wfData.push(taskFrom)
|
||||
}
|
||||
}
|
||||
// 子流程
|
||||
let subprocessFrom = await !(subprocessRef.value) ? {} : subprocessRef.value.getForm();
|
||||
if (subprocessFrom != undefined) {
|
||||
if (subprocessFrom.id != '') {
|
||||
wfData.push(subprocessFrom)
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
let gatewayInclusiveFrom = await !(exclusiveGatewayRef.value) ? {} : exclusiveGatewayRef.value.getForm();
|
||||
if (gatewayInclusiveFrom != undefined) {
|
||||
if (gatewayInclusiveFrom.id != '') {
|
||||
wfData.push(gatewayInclusiveFrom)
|
||||
}
|
||||
}
|
||||
// 并排网关
|
||||
let parallelGatewayFrom = await !(parallelGatewayRef.value) ? {} : parallelGatewayRef.value.getForm();
|
||||
if (parallelGatewayFrom != undefined) {
|
||||
if (parallelGatewayFrom.id != '') {
|
||||
wfData.push(parallelGatewayFrom)
|
||||
}
|
||||
}
|
||||
// 包含网关
|
||||
let inclusiveGatewayFrom = await !(inclusiveGatewayRef.value) ? {} : inclusiveGatewayRef.value.getForm();
|
||||
if (inclusiveGatewayFrom != undefined) {
|
||||
if(inclusiveGatewayFrom.id != ''){
|
||||
wfData.push(inclusiveGatewayFrom)
|
||||
}
|
||||
}
|
||||
console.log(wfData)
|
||||
// 3.流程节点信息
|
||||
wfData.forEach(node => {
|
||||
if (node.type == 'myline' && !node.isInit) {
|
||||
if (node.type == "bpmn:SequenceFlow" && !node.isInit) {
|
||||
node.isInit = true
|
||||
node.lineConditions = ''
|
||||
const fromNode = wfData.find(t => t.id == node.from)
|
||||
if (fromNode.type == 'userTask') {
|
||||
const fromNode = wfData.find(t => t.id === node.from)
|
||||
if (fromNode.type == 'bpmn:Task') {
|
||||
if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
|
||||
node.lineConditions = 'agree' // 流转条件
|
||||
}
|
||||
}
|
||||
}
|
||||
if(node.type == 'bpmn:StartEvent'){
|
||||
if(node.messageType instanceof Array){
|
||||
if(node.messageType.length == 1){
|
||||
node.messageType = node.messageType[0]
|
||||
}else{
|
||||
node.messageType=node.messageType.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
if(node.type == 'bpmn:Task'){
|
||||
if(node.overtimeMessageType instanceof Array){
|
||||
if(node.overtimeMessageType.length == 1){
|
||||
node.overtimeMessageType = node.overtimeMessageType[0]
|
||||
}else{
|
||||
node.overtimeMessageType=node.overtimeMessageType.join(',')
|
||||
}
|
||||
}
|
||||
if(node.messageType instanceof Array){
|
||||
if(node.messageType.length == 1){
|
||||
node.messageType = node.messageType[0]
|
||||
}else{
|
||||
node.messageType=node.messageType.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let scheme = {
|
||||
|
|
@ -447,12 +492,15 @@
|
|||
validatePanel
|
||||
})
|
||||
onMounted(() => {
|
||||
initModels()
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
console.log(props)
|
||||
if (props.pageType == 'detail') {
|
||||
var content = JSON.parse(props.pageView)
|
||||
shcemeinfoRef.value.setForm(content)
|
||||
flowWfDataStore.setWfDataAll(content.wfData)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -15,15 +15,20 @@
|
|||
</a-space>
|
||||
<a-table size="small" :columns="columns" :data-source="dataSource" bordered :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<template v-if="['name'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="[ 'type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ typeFormat(text) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<a-popconfirm v-if="dataSource.length" title="Sure to delete?"
|
||||
@confirm="onDelete(record.key)">
|
||||
<a>Delete</a>
|
||||
<a-popconfirm v-if="dataSource.length" title="确定要删除吗？"
|
||||
@confirm="onDelete(record.name)">
|
||||
<delete-outlined two-tone-color='#eb2f96' />
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -47,6 +52,7 @@
|
|||
let authType = ref("1")
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import type { UnwrapRef } from 'vue';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import SelectPos from '@/components/SelectPos/index.vue';
|
||||
import SelectRole from '@/components/SelectRole/index.vue';
|
||||
import SelectAccount from '@/components/SelectAccount/index.vue';
|
||||
|
|
@ -65,23 +71,33 @@
|
|||
},
|
||||
|
||||
];
|
||||
let dataSource = ref([
|
||||
{
|
||||
id: 0,
|
||||
name: "王五",
|
||||
type: "管理员",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "王五",
|
||||
type: "管理员",
|
||||
},
|
||||
])
|
||||
let dataSource = ref([])
|
||||
const data = reactive({
|
||||
postOpen: false,
|
||||
roleOpen: false,
|
||||
accountOpen: false,
|
||||
})
|
||||
function typeFormat(type) {
|
||||
type=type.toString()
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '岗位'
|
||||
case '2':
|
||||
return '角色'
|
||||
case '3':
|
||||
return '用户'
|
||||
case '4':
|
||||
return '上下级'
|
||||
case '5':
|
||||
return '节点'
|
||||
case '6':
|
||||
return '表字段'
|
||||
}
|
||||
}
|
||||
function addTableData(selectData) {
|
||||
let addData = selectData.filter(t => dataSource.value.findIndex(t2 => t2.id == t.id) == -1);
|
||||
dataSource.value = dataSource.value.concat(addData);
|
||||
}
|
||||
// 岗位
|
||||
const posRef = ref < any > ()
|
||||
|
||||
|
|
@ -89,7 +105,11 @@
|
|||
data.postOpen = true;
|
||||
}
|
||||
function postHandleOk() {
|
||||
console.log(roleRef.value.getRow())
|
||||
let selectData = posRef.value.getRow().map(t => {
|
||||
return { type: '1', id: t.id, name: t.name }
|
||||
});
|
||||
addTableData(selectData);
|
||||
data.postOpen = false;
|
||||
}
|
||||
// 角色
|
||||
const roleRef = ref < any > ()
|
||||
|
|
@ -98,7 +118,9 @@
|
|||
data.roleOpen = true;
|
||||
}
|
||||
function roleHandleOk() {
|
||||
console.log(roleRef.value.getRow())
|
||||
let selectData = roleRef.value.getRow().map(t => { return { type: '2', id: t.id, name: t.name, condition: '' } });
|
||||
addTableData(selectData);
|
||||
data.roleOpen = false;
|
||||
}
|
||||
// 用户
|
||||
const accountRef = ref < any > ()
|
||||
|
|
@ -107,11 +129,17 @@
|
|||
data.accountOpen = true;
|
||||
}
|
||||
function accountHandleOk() {
|
||||
console.log(accountRef.value.getRow())
|
||||
let selectData = accountRef.value.getRow().map(t => { return { type: '3', id: t.id, name: t.name } });
|
||||
addTableData(selectData);
|
||||
data.accountOpen = false;
|
||||
}
|
||||
function setForm(data){
|
||||
authType.value = data.authType
|
||||
dataSource.value =data.authData
|
||||
function onDelete(key) {
|
||||
dataSource.value = dataSource.value.filter(item => item.name !== key);
|
||||
}
|
||||
function setForm(data) {
|
||||
console.log(data)
|
||||
authType.value = data.authType.toString()
|
||||
dataSource.value = data.authData
|
||||
}
|
||||
function getForm() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="end-event">
|
||||
<a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form ref="formRef" :model="node" labelAlign="left" :disabled="data.componentDisabled" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
|
|
@ -11,24 +11,31 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||||
|
||||
const node = reactive({
|
||||
id: ""
|
||||
})
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const node = ref({})
|
||||
const props = defineProps({
|
||||
element: Object
|
||||
element: Object,
|
||||
pageType:String
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if(newVal.type == "bpmn:EndEvent"){
|
||||
node.id = newVal.id
|
||||
node.type = newVal.type
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const data=reactive({
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
})
|
||||
function getForm() {
|
||||
return node
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,19 @@
|
|||
</a-space>
|
||||
<a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<template v-if="['name'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ typeFormat(text) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<a-button>编辑</a-button>
|
||||
<a-button danger @click='onDelete(record.name,false)'>删除</a-button>
|
||||
<a-button @click="onEdit(record)" size="small">编辑</a-button>
|
||||
<a-button danger @click='onDelete(record.id)' size="small" class="ml-2">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
|
@ -43,81 +48,53 @@
|
|||
import conditionSql from './src/conditionSql.vue'
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||||
import { buildGUID } from '@/utils/uuid';
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const conditionFormulaRef = ref < any > ()
|
||||
const conditionSqlRef = ref < any > ()
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
})
|
||||
const node = ref({
|
||||
conditions: [],
|
||||
id: ''
|
||||
})
|
||||
const node = ref({})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:ExclusiveGateway") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const data = reactive({
|
||||
tableBtns: [
|
||||
{ prop: 'Edit', label: '编辑' },
|
||||
{ prop: 'Delete', label: '删除' }
|
||||
],
|
||||
columns: [
|
||||
{ title: '类型', dataIndex: 'type' },
|
||||
{ title: '名称', dataIndex: 'name' },
|
||||
{ title: '名称', dataIndex: 'name', width: '40%' },
|
||||
{ title: '操作', dataIndex: 'operation' }
|
||||
],
|
||||
tableData: [],
|
||||
|
||||
formulaVisible: false,
|
||||
sqlVisible: false,
|
||||
|
||||
editRow: null,
|
||||
isEdit: false,
|
||||
rowIndex: 0,
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
|
||||
})
|
||||
function getNode() {
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
|
||||
function updateWfData(key) {
|
||||
flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
|
||||
})
|
||||
function typeFormat(type) {
|
||||
switch (type) {
|
||||
|
|
@ -130,39 +107,80 @@
|
|||
|
||||
function handleFormulaClick() {
|
||||
data.formulaVisible = true;
|
||||
data.isEdit = false
|
||||
conditionFormulaRef.value.setForm({
|
||||
dbCode: '',
|
||||
table: '',
|
||||
columns: [],
|
||||
rfield: '',
|
||||
cfield: '',
|
||||
compareType: '',
|
||||
value: '',
|
||||
name: ''
|
||||
})
|
||||
}
|
||||
function handleSQlClick() {
|
||||
data.sqlVisible = true;
|
||||
data.isEdit = false
|
||||
conditionSqlRef.value.setForm({
|
||||
name: '',
|
||||
dbCode: '',
|
||||
sql: '',
|
||||
})
|
||||
}
|
||||
function handleClearClick() {
|
||||
node.conditions = [];
|
||||
node.value.conditions = [];
|
||||
}
|
||||
async function handleFormulaOk() {
|
||||
conditionFormulaRef.value.validateForm()
|
||||
let obj = conditionFormulaRef.value.getForm()
|
||||
if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
|
||||
obj.type = '1';
|
||||
if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
|
||||
data.formulaVisible = true;
|
||||
}else{
|
||||
} else {
|
||||
if (data.isEdit) {
|
||||
node.value.conditions[data.rowIndex] = obj;
|
||||
} else {
|
||||
obj.code = buildGUID();
|
||||
node.value.conditions.push(obj);
|
||||
}
|
||||
data.formulaVisible = false;
|
||||
}
|
||||
|
||||
}
|
||||
function handleSqlOk() {
|
||||
console.log(conditionSqlRef.value.getForm())
|
||||
// this.sqlVisible = false;
|
||||
conditionSqlRef.value.validateForm()
|
||||
let obj = conditionSqlRef.value.getForm()
|
||||
if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
|
||||
data.formulaVisible = true;
|
||||
}else{
|
||||
data.formulaVisible = false;
|
||||
obj.type = '2';
|
||||
if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
|
||||
data.sqlVisible = true;
|
||||
} else {
|
||||
if (data.isEdit) {
|
||||
node.value.conditions[data.rowIndex] = obj;
|
||||
} else {
|
||||
obj.code = buildGUID();
|
||||
node.value.conditions.push(obj);
|
||||
}
|
||||
data.sqlVisible = false;
|
||||
}
|
||||
}
|
||||
function getForm() {
|
||||
return node.value
|
||||
function onEdit(record) {
|
||||
data.isEdit = true
|
||||
if (data.type == 1) {
|
||||
data.formulaVisible = true;
|
||||
conditionFormulaRef.value.setForm(record)
|
||||
} else {
|
||||
data.sqlVisible = true;
|
||||
conditionSqlRef.value.setForm(record)
|
||||
}
|
||||
}
|
||||
function onDelete(id) {
|
||||
let list = node.value.conditions
|
||||
var currentIndex = (list || []).findIndex((element) => element.id == id);
|
||||
node.value.conditions.splice(currentIndex, 1)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getForm
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,17 +5,12 @@
|
|||
<a-form-item label="条件名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="数据库" name="dbCode">
|
||||
<a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
|
||||
<el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
|
||||
<el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<a-form-item label="数据库" name="dbCode">
|
||||
<a-select v-model:value="formData.dbCode" placeholder="请选择" :options="sqlOptions"
|
||||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||||
</a-select>
|
||||
</a-form-item> -->
|
||||
</a-form-item>
|
||||
<a-form-item label="数据表" name="table">
|
||||
<!-- <a-select v-model:value="formData.table" placeholder="请选择" :options="formData.columns">
|
||||
</a-select> -->
|
||||
<a-space>
|
||||
<a-input v-model:value="formData.table" placeholder="请输入" readonly />
|
||||
<a-button @click="handleTableClick">选择</a-button>
|
||||
|
|
@ -37,8 +32,8 @@
|
|||
<a-input v-model:value="formData.value" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-modal width="60%" height="80%" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
|
||||
<SelectTable ref="tableRef"></SelectTable>
|
||||
<a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
|
||||
<SelectTable ref="tableRef" :dbCode = 'formData.dbCode'></SelectTable>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -46,11 +41,13 @@
|
|||
import { reactive, ref, onMounted } from 'vue'
|
||||
import SelectTable from '@/components/SelectTable/index.vue'
|
||||
import { getTableForms } from '@/api/sys/flowPenal'
|
||||
import { getLoadDataBaseLinkTree } from '@/api/demo/system';
|
||||
|
||||
const labelCol = { span: 5 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const formRef = ref < any > ()
|
||||
const tableRef = ref < any > ()
|
||||
const sqlOptions =ref([])
|
||||
|
||||
const data = reactive({
|
||||
rules: {
|
||||
|
|
@ -100,6 +97,15 @@
|
|||
value: '',
|
||||
name: ''
|
||||
})
|
||||
async function getSQL(){
|
||||
const data = await getLoadDataBaseLinkTree()
|
||||
data.forEach(element => {
|
||||
if(element.childNodes == null){
|
||||
element.childNodes = []
|
||||
}
|
||||
});
|
||||
sqlOptions.value = data
|
||||
}
|
||||
function handleTableClick() {
|
||||
data.tableOpen = true
|
||||
}
|
||||
|
|
@ -113,13 +119,16 @@
|
|||
// 选择数据表，把获取表头
|
||||
async function handleTableChange(table) {
|
||||
var querys = {
|
||||
dbCode: 'lrsystemdb',
|
||||
dbCode: formData.value.dbCode,
|
||||
tableNames: table
|
||||
}
|
||||
console.log(querys)
|
||||
const data = await getTableForms(querys)
|
||||
console.log(data);
|
||||
}
|
||||
function setForm(data){
|
||||
formData.value = data
|
||||
}
|
||||
// 校验表单
|
||||
function validateForm() {
|
||||
formRef.value
|
||||
|
|
@ -131,20 +140,36 @@
|
|||
return false
|
||||
});
|
||||
}
|
||||
function setForm(data) {
|
||||
this.formData = this.$deepClone(data);
|
||||
}
|
||||
function getForm() {
|
||||
return formData.value;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
getForm
|
||||
getForm,
|
||||
setForm
|
||||
})
|
||||
onMounted(() => {
|
||||
getSQL()
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.l-from-body {
|
||||
padding: 10px 30px;
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(80vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,11 +6,8 @@
|
|||
<a-input v-model:value="formData.name" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item label="数据库" name="dbCode">
|
||||
<a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
|
||||
<el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
|
||||
<el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<a-select v-model:value="formData.dbCode" placeholder="请选择" :options="sqlOptions"
|
||||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="SQL语句" name="sql">
|
||||
|
|
@ -20,11 +17,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { reactive, ref ,onMounted} from 'vue'
|
||||
import { getLoadDataBaseLinkTree } from '@/api/demo/system';
|
||||
const labelCol = { span: 5 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const formRef = ref < any > ()
|
||||
const formData = reactive({
|
||||
|
||||
const formData = ref({
|
||||
name: '',
|
||||
dbCode: '',
|
||||
sql: '',
|
||||
|
|
@ -43,6 +42,19 @@
|
|||
]
|
||||
},
|
||||
})
|
||||
const sqlOptions =ref([])
|
||||
async function getSQL(){
|
||||
const data = await getLoadDataBaseLinkTree()
|
||||
data.forEach(element => {
|
||||
if(element.childNodes == null){
|
||||
element.childNodes = []
|
||||
}
|
||||
});
|
||||
sqlOptions.value = data
|
||||
}
|
||||
function setForm(data){
|
||||
formData.value = data
|
||||
}
|
||||
// 校验表单
|
||||
function validateForm() {
|
||||
formRef.value
|
||||
|
|
@ -59,8 +71,12 @@
|
|||
}
|
||||
defineExpose({
|
||||
getForm,
|
||||
validateForm
|
||||
validateForm,
|
||||
setForm
|
||||
})
|
||||
onMounted(() => {
|
||||
getSQL()
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.l-from-body {
|
||||
|
|
|
|||
|
|
@ -1,177 +1,198 @@
|
|||
<template>
|
||||
<div class="user-task">
|
||||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-alert message="包容网关说明"
|
||||
description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）" type="info"
|
||||
show-icon />
|
||||
<a-space>
|
||||
<a-radio-group>
|
||||
<a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
|
||||
<a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button danger :size="size" @click="handleClearClick">清空</a-button>
|
||||
</a-space>
|
||||
<a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<a-button>编辑</a-button>
|
||||
<a-button danger @click='onDelete(record.name,false)'>删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form>
|
||||
<a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
|
||||
<conditionFormula ref="conditionFormulaRef"></conditionFormula>
|
||||
</a-modal>
|
||||
<a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
|
||||
<conditionSql ref="conditionSqlRef"></conditionSql>
|
||||
</a-modal>
|
||||
</div>
|
||||
<div class="user-task">
|
||||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-alert message="包容网关说明" description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）" type="info" show-icon />
|
||||
<a-space>
|
||||
<a-radio-group>
|
||||
<a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
|
||||
<a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button danger :size="size" @click="handleClearClick">清空</a-button>
|
||||
</a-space>
|
||||
<a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ typeFormat(text) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<a-button @click="onEdit(record)" size="small">编辑</a-button>
|
||||
<a-button danger @click='onDelete(record.id)' size="small" class="ml-2">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form>
|
||||
<a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
|
||||
<conditionFormula ref="conditionFormulaRef"></conditionFormula>
|
||||
</a-modal>
|
||||
<a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
|
||||
<conditionSql ref="conditionSqlRef"></conditionSql>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import conditionFormula from '../exclusiveGateway/src/conditionFormula.vue'
|
||||
import conditionSql from '../exclusiveGateway/src/conditionSql.vue'
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const conditionFormulaRef = ref < any > ()
|
||||
const conditionSqlRef = ref < any > ()
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
})
|
||||
const node = ref({
|
||||
conditions: [],
|
||||
id: ''
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:ExclusiveGateway") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
import conditionFormula from '../exclusiveGateway/src/conditionFormula.vue'
|
||||
import conditionSql from '../exclusiveGateway/src/conditionSql.vue'
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||||
import { buildGUID } from '@/utils/uuid';
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const conditionFormulaRef = ref < any > ()
|
||||
const conditionSqlRef = ref < any > ()
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
})
|
||||
const node = ref({
|
||||
conditions: [],
|
||||
id: ''
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:InclusiveGateway") {
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const data = reactive({
|
||||
tableBtns: [
|
||||
{ prop: 'Edit', label: '编辑' },
|
||||
{ prop: 'Delete', label: '删除' }
|
||||
],
|
||||
columns: [
|
||||
{ title: '类型', dataIndex: 'type' },
|
||||
{ title: '名称', dataIndex: 'name' },
|
||||
],
|
||||
tableData: [],
|
||||
const data = reactive({
|
||||
columns: [
|
||||
{ title: '类型', dataIndex: 'type' },
|
||||
{ title: '名称', dataIndex: 'name', width: '40%' },
|
||||
{ title: '操作', dataIndex: 'operation' }
|
||||
],
|
||||
tableData: [],
|
||||
formulaVisible: false,
|
||||
sqlVisible: false,
|
||||
editRow: null,
|
||||
rowIndex: 0,
|
||||
isEdit: false,
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
|
||||
formulaVisible: false,
|
||||
sqlVisible: false,
|
||||
})
|
||||
function updateWfData(key) {
|
||||
flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
function typeFormat(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '表达式'
|
||||
case '2':
|
||||
return 'sql语句'
|
||||
}
|
||||
}
|
||||
|
||||
editRow: null,
|
||||
rowIndex: 0,
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
function handleFormulaClick() {
|
||||
data.formulaVisible = true;
|
||||
data.isEdit = false
|
||||
conditionFormulaRef.value.setForm({
|
||||
dbCode: '',
|
||||
table: '',
|
||||
columns: [],
|
||||
rfield: '',
|
||||
cfield: '',
|
||||
compareType: '',
|
||||
value: '',
|
||||
name: ''
|
||||
})
|
||||
}
|
||||
function handleSQlClick() {
|
||||
data.sqlVisible = true;
|
||||
data.isEdit = false
|
||||
conditionSqlRef.value.setForm({
|
||||
name: '',
|
||||
dbCode: '',
|
||||
sql: '',
|
||||
})
|
||||
}
|
||||
function handleClearClick() {
|
||||
node.conditions = [];
|
||||
}
|
||||
async function handleFormulaOk() {
|
||||
conditionFormulaRef.value.validateForm()
|
||||
let obj = conditionFormulaRef.value.getForm()
|
||||
obj.type = '1';
|
||||
if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
|
||||
|
||||
})
|
||||
function getNode() {
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
data.formulaVisible = true;
|
||||
} else {
|
||||
if (data.isEdit) {
|
||||
node.value.conditions[data.rowIndex] = obj;
|
||||
} else {
|
||||
obj.code = buildGUID();
|
||||
node.value.conditions.push(obj);
|
||||
}
|
||||
data.formulaVisible = false;
|
||||
}
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
})
|
||||
function typeFormat(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '表达式'
|
||||
case '2':
|
||||
return 'sql语句'
|
||||
}
|
||||
}
|
||||
|
||||
function handleFormulaClick() {
|
||||
data.formulaVisible = true;
|
||||
}
|
||||
function handleSQlClick() {
|
||||
data.sqlVisible = true;
|
||||
}
|
||||
function handleClearClick() {
|
||||
node.conditions = [];
|
||||
}
|
||||
async function handleFormulaOk() {
|
||||
conditionFormulaRef.value.validateForm()
|
||||
let obj = conditionFormulaRef.value.getForm()
|
||||
if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
|
||||
data.formulaVisible = true;
|
||||
}else{
|
||||
data.formulaVisible = false;
|
||||
}
|
||||
|
||||
}
|
||||
function handleSqlOk() {
|
||||
console.log(conditionSqlRef.value.getForm())
|
||||
// this.sqlVisible = false;
|
||||
conditionSqlRef.value.validateForm()
|
||||
let obj = conditionSqlRef.value.getForm()
|
||||
if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
|
||||
data.formulaVisible = true;
|
||||
}else{
|
||||
data.formulaVisible = false;
|
||||
}
|
||||
}
|
||||
function getForm() {
|
||||
return node.value
|
||||
}
|
||||
defineExpose({
|
||||
getForm
|
||||
})
|
||||
}
|
||||
function handleSqlOk() {
|
||||
conditionSqlRef.value.validateForm()
|
||||
let obj = conditionSqlRef.value.getForm()
|
||||
obj.type = '2';
|
||||
if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
|
||||
data.sqlVisible = true;
|
||||
} else {
|
||||
if (data.isEdit) {
|
||||
node.value.conditions[data.rowIndex] = obj;
|
||||
} else {
|
||||
obj.code = buildGUID();
|
||||
node.value.conditions.push(obj);
|
||||
}
|
||||
data.sqlVisible = false;
|
||||
}
|
||||
}
|
||||
function onEdit(record) {
|
||||
data.isEdit = true
|
||||
if (data.type == 1) {
|
||||
data.formulaVisible = true;
|
||||
conditionFormulaRef.value.setForm(record)
|
||||
} else {
|
||||
data.sqlVisible = true;
|
||||
conditionSqlRef.value.setForm(record)
|
||||
}
|
||||
}
|
||||
function onDelete(id) {
|
||||
let list = node.value.conditions
|
||||
var currentIndex = (list || []).findIndex((element) => element.id == id);
|
||||
node.value.conditions.splice(currentIndex, 1)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .ant-alert-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
::v-deep .ant-alert-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
::v-deep .ant-table-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,114 +18,57 @@
|
|||
<script lang="ts" setup>
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
import { ref, reactive, defineProps, onMounted, watch } from 'vue'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
wfData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
flowRef: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
from: '',
|
||||
to: ''
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(props)
|
||||
let node = ref({
|
||||
id: "",
|
||||
lineConditions: ''
|
||||
})
|
||||
let node = ref({})
|
||||
const data = reactive({
|
||||
conditionsOptions: [],
|
||||
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:SequenceFlow") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
console.log(props)
|
||||
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
getConditions()
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
|
||||
})
|
||||
function getNode() {
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function getConditions() {
|
||||
|
||||
/**
|
||||
ExclusiveGateway:'排他网关',
|
||||
Task:'审核节点',
|
||||
*/
|
||||
if (props.wfData.length == 0) {
|
||||
return
|
||||
}
|
||||
let wfdata = JSON.parse(JSON.stringify(props.wfData))
|
||||
let wfdata = flowWfDataStore.getWfData
|
||||
wfdata.forEach(element => {
|
||||
if (element.id == props.flowRef.from) {
|
||||
if (element.id == node.value.from) {
|
||||
if (element.type == 'bpmn:ExclusiveGateway') {
|
||||
data.conditionsOptions = element.conditions
|
||||
} else if (element.type == 'bpmn:Task') {
|
||||
data.conditionsOptions = element.btnlist.filter(t => !t.hidden)
|
||||
|
||||
} else {
|
||||
data.conditionsOptions = []
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(data.conditionsOptions)
|
||||
}
|
||||
|
||||
|
||||
function filterValue() {
|
||||
const vlist = this.node.lineConditions.split(',')
|
||||
const res = []
|
||||
vlist.forEach(item => {
|
||||
if (this.conditionsOptions.findIndex(t => t.code == item) != -1) {
|
||||
res.push(item)
|
||||
}
|
||||
})
|
||||
this.node.lineConditions = String(res)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,63 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="user-task">
|
||||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-alert message="并行网关说明"
|
||||
description="并行网关会等待所有分支汇入才往下执行，所有出口分支都会被执行" type="info"
|
||||
show-icon />
|
||||
</a-form>
|
||||
|
||||
</div>
|
||||
<div class="user-task">
|
||||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-alert message="并行网关说明" description="并行网关会等待所有分支汇入才往下执行，所有出口分支都会被执行" type="info" show-icon />
|
||||
</a-form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
})
|
||||
const node = ref({
|
||||
id: ''
|
||||
})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:ParallelGateway") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
})
|
||||
const node = ref({})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:ParallelGateway") {
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const data = reactive({
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
})
|
||||
function getNode() {
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
})
|
||||
function getForm() {
|
||||
return node.value
|
||||
}
|
||||
defineExpose({
|
||||
getForm
|
||||
})
|
||||
const data = reactive({
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .ant-alert-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
::v-deep .ant-alert-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
::v-deep .ant-table-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,9 +38,8 @@
|
|||
<a-tab-pane key="1" tab="执行SQL">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
<a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
|
||||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
|
|
@ -74,9 +73,8 @@
|
|||
<a-tab-pane key="1" tab="执行SQL">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
<a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
|
||||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
|
|
@ -110,9 +108,8 @@
|
|||
<a-tab-pane key="1" tab="执行SQL">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
<a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
|
||||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
|
|
@ -150,6 +147,8 @@
|
|||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { IconPicker } from '/@/components/Icon';
|
||||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||
import { getLoadDataBaseLinkTree } from '@/api/demo/system';
|
||||
|
||||
const formRef = ref();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
|
|
@ -160,8 +159,9 @@
|
|||
const data = reactive({
|
||||
optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
|
||||
optionsType: [],
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
componentDisabled: props.pageType == 'detail' ? true : false,
|
||||
})
|
||||
const sqlOptions =ref([])
|
||||
|
||||
let formState = ref({
|
||||
code: '',
|
||||
|
|
@ -212,6 +212,15 @@
|
|||
{ required: true, message: '请选择颜色' }
|
||||
],
|
||||
};
|
||||
async function getSQL(){
|
||||
const data = await getLoadDataBaseLinkTree()
|
||||
data.forEach(element => {
|
||||
if(element.childNodes == null){
|
||||
element.childNodes = []
|
||||
}
|
||||
});
|
||||
sqlOptions.value = data
|
||||
}
|
||||
async function fetch() {
|
||||
let list = await getLoad({ code: 'FlowSort' });
|
||||
data.optionsType = list
|
||||
|
|
@ -241,6 +250,7 @@
|
|||
})
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
getSQL()
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="start-event">
|
||||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||||
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol"
|
||||
:disabled="data.componentDisabled">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-form-item label="下一审核人">
|
||||
<a-switch v-model:checked="node.isNextAuditor" />
|
||||
<a-switch v-model:checked="node.isNextAuditor" @change="updateWfData('isNextAuditor')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="自定义标题">
|
||||
<a-switch v-model:checked="node.isCustmerTitle" />
|
||||
<a-switch v-model:checked="node.isCustmerTitle" @change="updateWfData('isCustmerTitle')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通知策略" name="f_Color">
|
||||
<a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
|
||||
<a-checkbox-group v-model:value="node.messageType" name="checkboxgroup" @change="updateWfData('messageType')"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
|
||||
</a-form-item>
|
||||
<a-divider plain="true">表单添加</a-divider>
|
||||
|
|
@ -21,13 +21,18 @@
|
|||
<a-tab-pane key="1" tab="自定义表单">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="node.formVerison" placeholder="请选择表单版本">
|
||||
<a-input v-model:value="formData.formCode" placeholder="请选择表单" readonly />
|
||||
<a-button >选择</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="node.formVerison" placeholder="请选择表单版本" @change="updateWfData('formVerison')">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段">
|
||||
<a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段"
|
||||
@change="updateWfData('formRelationId')">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
|
|
@ -37,10 +42,10 @@
|
|||
<a-tab-pane key="2" tab="系统表单">
|
||||
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
||||
<a-space-compact block>
|
||||
<a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" />
|
||||
<a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" @change="updateWfData('formUrl')" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" />
|
||||
<a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" @change="updateWfData('formAppUrl')" />
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
|
|
@ -92,7 +97,8 @@
|
|||
import { reactive, defineProps, computed, inject, ref, watch, h, onMounted } from 'vue'
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const props = defineProps({
|
||||
|
|
@ -134,41 +140,16 @@
|
|||
elementData: props.element,
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
})
|
||||
let node = ref({
|
||||
id: data.elementData.id,
|
||||
type: data.elementData.type,
|
||||
isNextAuditor: false,
|
||||
isCustmerTitle: false,
|
||||
formRelations: [],
|
||||
formType: "1",
|
||||
formCode: "",
|
||||
formVerison: "",
|
||||
formRelationId: "",
|
||||
formUrl: "",
|
||||
formAppUrl: "",
|
||||
authFields: [
|
||||
{
|
||||
label: '测试',
|
||||
field: 'ceshi',
|
||||
required: true,
|
||||
isEdit: true,
|
||||
isLook: true,
|
||||
}
|
||||
],
|
||||
messageType: "",
|
||||
isInit: true
|
||||
})
|
||||
let node = ref({})
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:StartEvent") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
if(props.pageType == 'detail'){
|
||||
getNode()
|
||||
}
|
||||
if(props.schemeCode) {
|
||||
getDetailInfo()
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -186,24 +167,8 @@
|
|||
}
|
||||
}
|
||||
)
|
||||
function getNode(){
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
|
||||
function updateWfData(key) {
|
||||
flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
|
||||
}
|
||||
function handleAddAuthField() {
|
||||
node.value.authFields.push({
|
||||
|
|
@ -217,27 +182,12 @@
|
|||
function handleDeleteAuthField(key) {
|
||||
node.value.authFields = node.value.authFields.filter(item => item.field !== key);
|
||||
}
|
||||
function getForm() {
|
||||
if(node.value.messageType != ""){
|
||||
if(node.value.messageType.length > 1){
|
||||
node.value.messageType = node.value.messageType.join(',')
|
||||
|
||||
}else{
|
||||
node.value.messageType = node.value.messageType[0]
|
||||
}
|
||||
}
|
||||
return node.value
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getForm
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<!-- 开始节点配置 -->
|
||||
<template>
|
||||
<div class="subprocess">
|
||||
<a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||||
<a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol"
|
||||
:disabled="data.componentDisabled">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
|
|
@ -9,7 +10,8 @@
|
|||
<a-switch v-model:checked="node.isAsync" />
|
||||
</a-form-item>
|
||||
<a-form-item label="流程模版">
|
||||
<a-select v-model:value="node.wfschemeId" :options="list" @change="changeScheme" :fieldNames="{ value: 'id', label: 'name' }">
|
||||
<a-select v-model:value="node.wfschemeId" :options="list" @change="changeScheme"
|
||||
:fieldNames="{ value: 'id', label: 'name' }">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="流程版本">
|
||||
|
|
@ -21,22 +23,19 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, defineProps, computed, inject, ref, watch, h ,onMounted} from 'vue'
|
||||
import { getDetail ,getLoad,getVerisonsLoad} from '@/api/sys/WFSchemeInfo'
|
||||
import { reactive, defineProps, computed, inject, ref, watch, h, onMounted } from 'vue'
|
||||
import { getDetail, getLoad, getVerisonsLoad } from '@/api/sys/WFSchemeInfo'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode:String,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
})
|
||||
let node = ref({
|
||||
id: '',
|
||||
isAsync: false,
|
||||
wfschemeId: '',
|
||||
wfVersionId: '',
|
||||
})
|
||||
let node = ref({})
|
||||
const data = reactive({
|
||||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
})
|
||||
|
|
@ -46,57 +45,31 @@
|
|||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:SubProcess") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
if(props.pageType == 'detail'){
|
||||
getNode()
|
||||
}
|
||||
if(props.schemeCode) {
|
||||
getDetailInfo()
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
function getNode(){
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getSchemeList(){
|
||||
|
||||
async function getSchemeList() {
|
||||
const data = await getLoad()
|
||||
list.value = data
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if(element.id == node.value.id){
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
async function changeScheme() {
|
||||
const data = await getVerisonsLoad({ id: node.value.wfschemeId })
|
||||
verisons.value = data
|
||||
}
|
||||
async function changeScheme(){
|
||||
const data = await getVerisonsLoad({id:node.value.wfschemeId})
|
||||
verisons.value = data
|
||||
}
|
||||
onMounted(() => {
|
||||
getSchemeList()
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
|
||||
})
|
||||
function getForm() {
|
||||
if (node.value.id != '') {
|
||||
return node.value
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getForm
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,32 +9,35 @@
|
|||
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
||||
</a-form-item>
|
||||
<a-form-item label="继承表单">
|
||||
<a-switch v-model:checked="node.isInherit" />
|
||||
<a-switch v-model:checked="node.isInherit" @change="updateWfData('isInherit')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="允许加签">
|
||||
<a-switch v-model:checked="node.isAddSign" />
|
||||
<a-switch v-model:checked="node.isAddSign" @change="updateWfData('isAddSign')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="允许转移">
|
||||
<a-switch v-model:checked="node.isTransfer" />
|
||||
<a-switch v-model:checked="node.isTransfer" @change="updateWfData('isTransfer')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="允许批量审核">
|
||||
<a-switch v-model:checked="node.isBatchAudit" />
|
||||
<a-switch v-model:checked="node.isBatchAudit" @change="updateWfData('isBatchAudit')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="自动同意规则">
|
||||
<a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions">
|
||||
<a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions"
|
||||
@change="updateWfData('autoAgree')">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="无对应处理人">
|
||||
<a-select v-model:value="node.rejectType"
|
||||
:options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]">
|
||||
<a-select v-model:value="node.noAuditor" @change="updateWfData('noAuditor')"
|
||||
:options="data.noAuditorOptions">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="驳回策略">
|
||||
<a-radio-group v-model:value="node.rejectType" name="checkboxgroup"
|
||||
@change="updateWfData('rejectType')"
|
||||
:options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通知策略">
|
||||
<a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
|
||||
@change="updateWfData('messageType')"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
|
||||
</a-form-item>
|
||||
</a-collapse-panel>
|
||||
|
|
@ -50,21 +53,29 @@
|
|||
</a-radio-group>
|
||||
</a-space>
|
||||
<a-table size="small" :columns="data.userColumns" :data-source="node.auditUsers" bordered
|
||||
:pagination="false">
|
||||
@change="updateWfData('auditUsers')" :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<template v-if="['name'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="[ 'type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ typeFormat(text) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['condition'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions">
|
||||
<a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions"
|
||||
v-if="record.type == '2'">
|
||||
</a-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<delete-outlined two-tone-color='#eb2f96' @click='onDelete(record.name,false)' />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name,false)">
|
||||
<delete-outlined two-tone-color='#eb2f96' />
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
|
@ -83,35 +94,43 @@
|
|||
<a-table size="small" :columns="data.userColumns" :data-source="node.lookUsers" bordered
|
||||
:pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'type'].includes(column.dataIndex)">
|
||||
<template v-if="['name'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="[ 'type'].includes(column.dataIndex)">
|
||||
<div>
|
||||
{{ typeFormat(text) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['condition'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions">
|
||||
<a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions"
|
||||
v-if="record.type == '2'" @change="updateWfData('lookUsers')">
|
||||
</a-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<delete-outlined two-tone-color='#eb2f96' @click='onDelete(record.name,true)' />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name,true)">
|
||||
<delete-outlined two-tone-color='#eb2f96' />
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="4" header="按钮设置">
|
||||
<a-table size="small" :columns="data.columns" :data-source="node.btnlist" bordered
|
||||
:pagination="false">
|
||||
@change="updateWfData('btnlist')" :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['name', 'code'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-input v-model:value="record[column.dataIndex]" placeholder="请输入" />
|
||||
<a-input v-model:value="record[column.dataIndex]" placeholder="请输入" @change="updateWfData('btnlist')"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['isNextAuditor', 'isSign','hidden'].includes(column.dataIndex)">
|
||||
<div>
|
||||
<a-switch v-model:checked="record[column.dataIndex]" />
|
||||
<a-switch v-model:checked="record[column.dataIndex]" @change="updateWfData('btnlist')"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
|
|
@ -127,24 +146,27 @@
|
|||
</a-collapse-panel>
|
||||
<a-collapse-panel key="5" header="会签设置">
|
||||
<a-form-item label="是否会签">
|
||||
<a-switch v-model:checked="node.isCountersign" />
|
||||
<a-switch v-model:checked="node.isCountersign" @change="updateWfData('isCountersign')" />
|
||||
</a-form-item>
|
||||
<template v-if="node.isCountersign">
|
||||
<a-form-item label="审核方式">
|
||||
<a-radio-group v-model:value="node.countersignType" name="checkboxgroup"
|
||||
@change="updateWfData('countersignType')"
|
||||
:options="[{value:'1',label:'并行'},{value:'2',label:'串行'}]" />
|
||||
</a-form-item>
|
||||
<template v-if="node.countersignType == 1">
|
||||
<a-form-item label="是否等待">
|
||||
<a-switch v-model:checked="node.isCountersignAll" />
|
||||
<a-switch v-model:checked="node.isCountersignAll"
|
||||
@change="updateWfData('isCountersignAll')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通过百分比">
|
||||
<a-input-number id="inputNumber" v-model:value="node.countersignAllType" :min="1"
|
||||
:max="100" />
|
||||
:max="100" @change="updateWfData('countersignAllType')" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="再次审核">
|
||||
<a-radio-group v-model:value="node.countersignAgian" name="checkboxgroup"
|
||||
@change="updateWfData('countersignAgian')"
|
||||
:options="[{value:'1',label:'已同意不需要审核'},{value:'2',label:'已同意需要审核'}]" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
|
@ -155,16 +177,20 @@
|
|||
</a-form-item>
|
||||
<template v-if="node.isOvertimeMessage">
|
||||
<a-form-item label="第一次通知(时)">
|
||||
<a-input-number id="inputNumber" v-model:value="node.overtimeMessageStart" :min="1" />
|
||||
<a-input-number id="inputNumber" v-model:value="node.overtimeMessageStart" :min="1"
|
||||
@change="updateWfData('overtimeMessageStart')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="通知间隔(时)">
|
||||
<a-input-number id="inputNumber" v-model:value="node.overtimeMessageInterval" :min="1" />
|
||||
<a-input-number id="inputNumber" v-model:value="node.overtimeMessageInterval" :min="1"
|
||||
@change="updateWfData('overtimeMessageInterval')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="超时流转时间(时)">
|
||||
<a-input-number id="inputNumber" v-model:value="node.overtimeGo" :min="1" />
|
||||
<a-input-number id="inputNumber" v-model:value="node.overtimeGo" :min="1"
|
||||
@change="updateWfData('overtimeGo')" />
|
||||
</a-form-item>
|
||||
<a-form-item label="超时通知策略">
|
||||
<a-checkbox-group v-model:value="node.overtimeMessageType" name="checkboxgroup"
|
||||
@change="updateWfData('overtimeMessageType')"
|
||||
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
|
@ -172,18 +198,25 @@
|
|||
</a-collapse>
|
||||
|
||||
</a-form>
|
||||
<a-modal width="60%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
|
||||
<a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
|
||||
<SelectPos ref="posRef"></SelectPos>
|
||||
</a-modal>
|
||||
<a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
|
||||
<a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
|
||||
<SelectRole ref="roleRef"></SelectRole>
|
||||
</a-modal>
|
||||
<a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
|
||||
<a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.accountOpen" title="添加用户"
|
||||
@ok="accountHandleOk">
|
||||
<SelectAccount ref="accountRef"></SelectAccount>
|
||||
</a-modal>
|
||||
<a-modal width="60%" v-model:open="data.levelOpen" title="添加角色" @ok="accountHandleOk">
|
||||
<a-modal width="40%" v-model:open="data.levelOpen" title="添加上下级" @ok="levelHandleOk">
|
||||
<AuditorLevel ref="levelRef"></AuditorLevel>
|
||||
</a-modal>
|
||||
<a-modal width="40%" v-model:open="data.nodeOpen" title="流程节点选择" @ok="nodeHandleOk">
|
||||
<AuditorNode ref="nodeRef" :id="nodeId"></AuditorNode>
|
||||
</a-modal>
|
||||
<a-modal width="40%" v-model:open="data.auditorSqlOpen" title="数据表字段选择" @ok="sqlHandleOk">
|
||||
<AuditorSql ref="sqlRef" ></AuditorSql>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -194,20 +227,26 @@
|
|||
import SelectRole from '@/components/SelectRole/index.vue';
|
||||
import SelectAccount from '@/components/SelectAccount/index.vue';
|
||||
import AuditorLevel from './src/auditorLevel.vue'
|
||||
import AuditorSql from './src/auditorSql.vue'
|
||||
import AuditorNode from './src/auditorNode.vue'
|
||||
import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
||||
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const labelCol = { span: 7 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const activeKey = ref('1')
|
||||
|
||||
const nodeId = ref('')
|
||||
const data = reactive({
|
||||
atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
|
||||
noAuditorOptions: [{ value: '1', label: '超级管理员处理' }, { value: '2', label: '跳过此步骤' }, { value: '3', label: '不能提交' }],
|
||||
postOpen: false,
|
||||
roleOpen: false,
|
||||
accountOpen: false,
|
||||
levelOpen: false,
|
||||
nodeOpen: false,
|
||||
auditorSqlOpen: false,
|
||||
userColumns: [
|
||||
{ title: '类型', dataIndex: 'type' },
|
||||
{ title: '名称', dataIndex: 'name' },
|
||||
|
|
@ -246,107 +285,50 @@
|
|||
componentDisabled: props.pageType == 'detail' ? true : false
|
||||
|
||||
})
|
||||
let node = ref({
|
||||
id: "",
|
||||
type: "",
|
||||
isAddSign: false,
|
||||
isTransfer: false,
|
||||
isBatchAudit: false,
|
||||
autoAgree: "",
|
||||
noAuditor: "1",
|
||||
rejectType: "1",
|
||||
messageType: "",
|
||||
auditUsers: [],
|
||||
lookUsers: [],
|
||||
formRelations: [],
|
||||
formType: "1",
|
||||
formCode: "",
|
||||
formVerison: "",
|
||||
formRelationId: "",
|
||||
formUrl: "",
|
||||
formAppUrl: "",
|
||||
authFields: [],
|
||||
name: "审核节点",
|
||||
btnlist: [
|
||||
{
|
||||
code: "agree",
|
||||
name: "同意",
|
||||
hidden: false,
|
||||
isNextAuditor: false,
|
||||
isSign: false,
|
||||
isSys: true
|
||||
},
|
||||
{
|
||||
code: "disagree",
|
||||
name: "驳回",
|
||||
hidden: false,
|
||||
isNextAuditor: false,
|
||||
isSign: false,
|
||||
isSys: true
|
||||
}
|
||||
],
|
||||
isCountersign: false,
|
||||
isCountersignAll: false,
|
||||
countersignAgian: "1",
|
||||
countersignType: "1",
|
||||
countersignAllType: 100,
|
||||
isOvertimeMessage: false,
|
||||
overtimeMessageType: "",
|
||||
overtimeMessageStart: 1,
|
||||
overtimeMessageInterval: 1,
|
||||
overtimeGo: 12,
|
||||
isInherit: true,
|
||||
isInit: true,
|
||||
|
||||
})
|
||||
let node = ref({})
|
||||
const props = defineProps({
|
||||
element: Object,
|
||||
schemeCode: String,
|
||||
pageType: String,
|
||||
pageView: String,
|
||||
taskData: Object
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.element,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.type == "bpmn:Task") {
|
||||
node.value.id = newVal.id
|
||||
node.value.type = newVal.type
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
|
||||
if (currentNode) {
|
||||
node.value = currentNode
|
||||
} else {
|
||||
node.value = newVal
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
function getNode() {
|
||||
var content = JSON.parse(props.pageView)
|
||||
content.wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
function updateWfData(key) {
|
||||
flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
|
||||
}
|
||||
async function getDetailInfo() {
|
||||
let data = await getDetail({ code: props.schemeCode })
|
||||
let scheme = JSON.parse(data.scheme.content);
|
||||
let wfData = scheme.wfData
|
||||
wfData.forEach(element => {
|
||||
if (element.id == node.value.id) {
|
||||
console.log(element)
|
||||
node.value = element
|
||||
}
|
||||
});
|
||||
|
||||
function typeFormat(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '岗位'
|
||||
case '2':
|
||||
return '角色'
|
||||
case '3':
|
||||
return '用户'
|
||||
case '4':
|
||||
return '上下级'
|
||||
case '5':
|
||||
return '节点'
|
||||
case '6':
|
||||
return '表字段'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.schemeCode) {
|
||||
getDetailInfo()
|
||||
}
|
||||
if (props.pageType == 'detail') {
|
||||
getNode()
|
||||
}
|
||||
|
||||
})
|
||||
// 岗位
|
||||
const posRef = ref < any > ()
|
||||
|
|
@ -354,8 +336,24 @@
|
|||
data.postOpen = true;
|
||||
data.isLooker = isLooker;
|
||||
}
|
||||
function addTableData(selectData) {
|
||||
if (data.isLooker) {
|
||||
let addData2 = selectData.filter(t => node.value.lookUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
|
||||
node.value.lookUsers = node.value.lookUsers.concat(addData2);
|
||||
updateWfData('lookUsers')
|
||||
}
|
||||
else {
|
||||
let addData = selectData.filter(t => node.value.auditUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
|
||||
node.value.auditUsers = node.value.auditUsers.concat(addData);
|
||||
updateWfData('auditUsers')
|
||||
}
|
||||
}
|
||||
function postHandleOk() {
|
||||
console.log(posRef.value.getRow())
|
||||
let selectData = posRef.value.getRow().map(t => {
|
||||
return { type: '1', id: t.id, name: t.name }
|
||||
});
|
||||
addTableData(selectData);
|
||||
data.postOpen = false;
|
||||
}
|
||||
// 角色
|
||||
const roleRef = ref < any > ()
|
||||
|
|
@ -364,25 +362,8 @@
|
|||
data.roleOpen = true;
|
||||
}
|
||||
function roleHandleOk() {
|
||||
console.log(roleRef.value.getRow())
|
||||
var list = roleRef.value.getRow()
|
||||
list.forEach(element => {
|
||||
if (data.isLooker) {
|
||||
// 传阅人员
|
||||
node.lookUsers.push({
|
||||
name: element.name,
|
||||
type: '角色',
|
||||
condition: ''
|
||||
})
|
||||
} else {
|
||||
// 审核人员
|
||||
node.auditUsers.push({
|
||||
name: element.name,
|
||||
type: '角色',
|
||||
condition: ''
|
||||
})
|
||||
}
|
||||
});
|
||||
let selectData = roleRef.value.getRow().map(t => { return { type: '2', id: t.id, name: t.name, condition: '' } });
|
||||
addTableData(selectData);
|
||||
data.roleOpen = false;
|
||||
}
|
||||
// 用户
|
||||
|
|
@ -392,7 +373,9 @@
|
|||
data.accountOpen = true;
|
||||
}
|
||||
function accountHandleOk() {
|
||||
console.log(accountRef.value.getRow())
|
||||
let selectData = accountRef.value.getRow().map(t => { return { type: '3', id: t.id, name: t.name } });
|
||||
addTableData(selectData);
|
||||
data.accountOpen = false;
|
||||
}
|
||||
// 上下级
|
||||
const levelRef = ref < any > ()
|
||||
|
|
@ -400,37 +383,70 @@
|
|||
data.isLooker = isLooker;
|
||||
data.levelOpen = true;
|
||||
}
|
||||
function levelHandleOk() {
|
||||
console.log(levelRef.value.getRow())
|
||||
async function levelHandleOk() {
|
||||
const value = await levelRef.value.validateForm()
|
||||
let obj = levelRef.value.getForm();
|
||||
if (obj.id != '') {
|
||||
addTableData([obj]);
|
||||
data.levelOpen = false;
|
||||
}
|
||||
}
|
||||
//节点执行人
|
||||
const nodeRef = ref < any > ()
|
||||
|
||||
function handleNodeAuditorClick(isLooker) {
|
||||
nodeId.value = node.value.id
|
||||
data.isLooker = isLooker;
|
||||
data.nodeOpen = true
|
||||
}
|
||||
function nodeHandleOk() {
|
||||
nodeRef.value.validateForm()
|
||||
let obj = nodeRef.value.getForm()
|
||||
if (obj.id != '') {
|
||||
addTableData([obj]);
|
||||
data.nodeOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 数据表字段选择
|
||||
const sqlRef = ref < any > ()
|
||||
function handleAuditorSqlClick(isLooker) {
|
||||
data.isLooker = isLooker;
|
||||
data.auditorSqlOpen = true;
|
||||
}
|
||||
function sqlHandleOk() {
|
||||
sqlRef.value.validateForm()
|
||||
let obj = sqlRef.value.getForm()
|
||||
if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
|
||||
data.auditorSqlOpen = true;
|
||||
} else {
|
||||
obj.name = `${data.table}【${data.auditorField}】`
|
||||
addTableData([data]);
|
||||
data.auditorSqlOpen = false;
|
||||
}
|
||||
}
|
||||
// 审核人员设置
|
||||
function onDelete(key, isLook) {
|
||||
if (isLook) {
|
||||
node.value.lookUsers = node.value.lookUsers.filter(item => item.name !== key);
|
||||
updateWfData('lookUsers')
|
||||
} else {
|
||||
node.value.auditUsers = node.value.auditUsers.filter(item => item.name !== key);
|
||||
updateWfData('auditUsers')
|
||||
}
|
||||
}
|
||||
// 按钮设置
|
||||
function handleAddBtns() {
|
||||
node.value.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
|
||||
updateWfData('btnlist')
|
||||
}
|
||||
function handleDeleteBtns(key) {
|
||||
node.value.btnlist = node.value.btnlist.filter(item => item.code !== key);
|
||||
updateWfData('btnlist')
|
||||
}
|
||||
function getForm() {
|
||||
console.log(node.value)
|
||||
if (node.value.overtimeMessageType != '' ) {
|
||||
if (node.value.overtimeMessageType.length > 1) {
|
||||
node.value.overtimeMessageType = node.value.overtimeMessageType.join(',')
|
||||
} else {
|
||||
node.value.overtimeMessageType = node.value.overtimeMessageType[0]
|
||||
}
|
||||
return node.value
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getForm
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -480,4 +496,19 @@
|
|||
::v-deep .ant-collapse>.ant-collapse-item>.ant-collapse-header {
|
||||
padding: 12px 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
height: calc(80vh);
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,14 +3,16 @@
|
|||
<a-form ref="formRef" :rules="data.rules" :model="data.formData" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-form-item label="上下级" name="id">
|
||||
<a-select v-model:value="data.formData.id" placeholder="请选择上下级" :options="data.options">
|
||||
<a-select v-model:value="data.formData.id" placeholder="请选择上下级" :options="data.options"
|
||||
@change="handleChange">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {reactive} from 'vue'
|
||||
import { reactive,ref } from 'vue'
|
||||
const formRef = ref<any>()
|
||||
const data = reactive({
|
||||
formData: {
|
||||
name: '',
|
||||
|
|
@ -35,16 +37,30 @@
|
|||
{ value: '10', label: '下五级' }
|
||||
]
|
||||
})
|
||||
function getRow() {
|
||||
let rows = data.value.formData
|
||||
function handleChange(val,option) {
|
||||
data.formData.name = option.label
|
||||
}
|
||||
function validateForm(){
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (values) => {
|
||||
return true
|
||||
})
|
||||
.catch(async (error) => {
|
||||
return false
|
||||
});
|
||||
}
|
||||
function getForm() {
|
||||
let rows = data.formData
|
||||
return rows
|
||||
}
|
||||
defineExpose({
|
||||
getRow
|
||||
getForm,
|
||||
validateForm
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.l-from-body{
|
||||
.l-from-body {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,56 +1,88 @@
|
|||
<template>
|
||||
<div class="l-from-body" >
|
||||
<el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="80px" >
|
||||
<el-col :span="24">
|
||||
<el-form-item label="节点" prop="id">
|
||||
<l-select v-model="formData.id" placeholder="请选择节点" valueKey="id" labelKey="name" :options="options" @change="handleChange" ></l-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div class="l-from-body">
|
||||
<a-form ref="formRef" :rules="data.rules" :model="data.formData" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-form-item label="节点" name="id">
|
||||
<a-select v-model:value="data.formData.id" placeholder="请选择节点" :options="data.options"
|
||||
:field-names="{ label: 'name', value: 'id' }" @change="handleChange">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'node-auditor-form',
|
||||
data(){
|
||||
return {
|
||||
formData:{
|
||||
name:'',
|
||||
type:'5',
|
||||
id:'',
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: '请选择节点' }
|
||||
]
|
||||
},
|
||||
options: []
|
||||
};
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods:{
|
||||
resetForm(){
|
||||
this.$refs.form && this.$refs.form.resetFields();
|
||||
},
|
||||
// 校验表单
|
||||
validateForm(callback){
|
||||
this.$refs.form.validate((valid) => {
|
||||
if(valid){
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
setForm(wfdata){
|
||||
//console.log(wfdata,'节点选择')
|
||||
this.options = wfdata.filter(t=>t.name);
|
||||
},
|
||||
getForm(){
|
||||
return this.$deepClone(this.formData);
|
||||
},
|
||||
handleChange(val){
|
||||
this.formData.name = this.options.find(t=>t.id == val).name;
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, defineEmits, defineProps, watch,onMounted } from 'vue'
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
const emit = defineEmits(['success']);
|
||||
const props = defineProps({
|
||||
id: String
|
||||
})
|
||||
console.log(props)
|
||||
watch(
|
||||
() => props.id,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal)
|
||||
getOptions(newVal)
|
||||
}
|
||||
)
|
||||
const formRef = ref < any > ()
|
||||
const data = reactive({
|
||||
formData: {
|
||||
name: '',
|
||||
type: '5',
|
||||
id: '',
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: '请选择节点' }
|
||||
]
|
||||
},
|
||||
options: []
|
||||
})
|
||||
onMounted(() => {
|
||||
getOptions(props.id)
|
||||
})
|
||||
function getOptions(nodeId) {
|
||||
/**
|
||||
ExclusiveGateway:'排他网关',
|
||||
Task:'审核节点',
|
||||
*/
|
||||
let wfdata = flowWfDataStore.getWfData
|
||||
var arr = []
|
||||
wfdata.forEach(element => {
|
||||
if (element.type == 'bpmn:Task' && element.id != nodeId) {
|
||||
arr.push(element)
|
||||
}
|
||||
});
|
||||
console.log(arr)
|
||||
data.options = arr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
function handleChange(val, option) {
|
||||
data.formData.name = option.name
|
||||
}
|
||||
function validateForm() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (values) => {
|
||||
return true
|
||||
})
|
||||
.catch(async (error) => {
|
||||
return false
|
||||
});
|
||||
}
|
||||
function getForm() {
|
||||
let rows = data.formData
|
||||
console.log(rows)
|
||||
return rows
|
||||
}
|
||||
defineExpose({
|
||||
getForm,
|
||||
validateForm
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.l-from-body {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,104 +1,117 @@
|
|||
<template>
|
||||
<div class="l-from-body" >
|
||||
<el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="120px" >
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据库" prop="dbCode">
|
||||
<el-select v-model="formData.dbCode" placeholder="请选择">
|
||||
<el-option-group
|
||||
v-for="group in lr_dblinkTree"
|
||||
:key="group.id"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.children"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
<div class="l-from-body">
|
||||
<a-form ref="formRef" :rules="data.rules" :model="formData" labelAlign="left" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<!-- <a-form-item label="数据库" name="dbCode">
|
||||
<a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
|
||||
<el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
|
||||
<el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据表" prop="table">
|
||||
<l-codetable-select
|
||||
@change="handleTableChange"
|
||||
:dbCode="formData.dbCode"
|
||||
v-model="formData.table"></l-codetable-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="关联流程字段" prop="rfield">
|
||||
<l-select :options="columns" valueKey="name" labelKey="coment" v-model="formData.rfield" >
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="审核人字段" prop="auditorField">
|
||||
<l-select :options="columns" valueKey="name" labelKey="coment" v-model="formData.auditorField" >
|
||||
</l-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-option-group>
|
||||
</a-select>
|
||||
</a-form-item> -->
|
||||
<a-form-item label="数据表" name="table">
|
||||
<!-- <a-select v-model:value="formData.table" placeholder="请选择" :options="formData.columns">
|
||||
</a-select> -->
|
||||
<a-space>
|
||||
<a-input v-model:value="formData.table" placeholder="请输入" readonly />
|
||||
<a-button @click="handleTableClick">选择</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联流程字段" name="rfield">
|
||||
<a-select v-model:value="formData.rfield" placeholder="请选择" :options="data.columns">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="审核人字段" name="auditorField">
|
||||
<a-select v-model:value="formData.auditorField" placeholder="请选择" :options="data.columns">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-modal width="60%" height="80%" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
|
||||
<SelectTable ref="tableRef"></SelectTable>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'auditor-sql-form',
|
||||
props:{
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
formData:{
|
||||
dbCode:'',
|
||||
table:'',
|
||||
rfield:'',
|
||||
auditorField:'',
|
||||
type:'6'
|
||||
},
|
||||
rules: {
|
||||
dbCode: [
|
||||
{ required: true, message: '请选择数据库' }
|
||||
],
|
||||
table: [
|
||||
{ required: true, message: '请选择数据表' }
|
||||
],
|
||||
rfield: [
|
||||
{ required: true, message: '请选择关联字段' }
|
||||
],
|
||||
auditorField: [
|
||||
{ required: true, message: '请选择审核人字段' }
|
||||
]
|
||||
},
|
||||
columns:[],
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods:{
|
||||
handleTableChange(table){
|
||||
this.columns = table.columns
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import SelectTable from '@/components/SelectTable/index.vue'
|
||||
import { getTableForms } from '@/api/sys/flowPenal'
|
||||
|
||||
const labelCol = { span: 5 };
|
||||
const wrapperCol = { span: 17 };
|
||||
const formRef = ref < any > ()
|
||||
const tableRef = ref < any > ()
|
||||
|
||||
const data = reactive({
|
||||
rules: {
|
||||
dbCode: [
|
||||
{ required: true, message: '请选择数据库' }
|
||||
],
|
||||
table: [
|
||||
{ required: true, message: '请选择数据表' }
|
||||
],
|
||||
rfield: [
|
||||
{ required: true, message: '请选择关联字段' }
|
||||
],
|
||||
auditorField: [
|
||||
{ required: true, message: '请选择审核人字段' }
|
||||
]
|
||||
},
|
||||
resetForm(){
|
||||
this.columns = [];
|
||||
this.$refs.form && this.$refs.form.resetFields()
|
||||
},
|
||||
// 校验表单
|
||||
validateForm(callback){
|
||||
this.$refs.form.validate((valid) => {
|
||||
if(valid){
|
||||
callback()
|
||||
}
|
||||
});
|
||||
},
|
||||
setForm(data){
|
||||
this.formData = this.$deepClone(data)
|
||||
},
|
||||
getForm(){
|
||||
let formData = this.$deepClone(this.formData)
|
||||
return formData
|
||||
}
|
||||
columns:[],
|
||||
tableOpen: false
|
||||
})
|
||||
let formData = ref({
|
||||
dbCode: '',
|
||||
table: '',
|
||||
rfield: '',
|
||||
auditorField: '',
|
||||
type: '6'
|
||||
})
|
||||
function handleTableClick() {
|
||||
data.tableOpen = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
function tableHandleOk() {
|
||||
console.log(tableRef.value.getRow())
|
||||
const obj = tableRef.value.getRow()
|
||||
formData.value.table = obj[0].name
|
||||
handleTableChange(obj[0].name)
|
||||
data.tableOpen = false
|
||||
}
|
||||
// 选择数据表，把获取表头
|
||||
async function handleTableChange(table) {
|
||||
var querys = {
|
||||
dbCode: 'lrsystemdb',
|
||||
tableNames: table
|
||||
}
|
||||
console.log(querys)
|
||||
const data = await getTableForms(querys)
|
||||
console.log(data);
|
||||
}
|
||||
// 校验表单
|
||||
function validateForm() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (values) => {
|
||||
return true
|
||||
})
|
||||
.catch(async (error) => {
|
||||
return false
|
||||
});
|
||||
}
|
||||
function setForm(data) {
|
||||
this.formData = this.$deepClone(data);
|
||||
}
|
||||
function getForm() {
|
||||
return formData.value;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
getForm
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.l-from-body {
|
||||
padding: 10px 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree title="部门列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||||
<BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||||
:clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref ,nextTick,unref} from 'vue';
|
||||
|
||||
import { BasicTree, TreeItem } from '@/components/Tree';
|
||||
import { getDeptList } from '@/api/demo/system';
|
||||
|
|
@ -16,9 +16,14 @@
|
|||
const emit = defineEmits(['select']);
|
||||
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDeptList()) as unknown as TreeItem[];
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(keys) {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,11 @@
|
|||
return info;
|
||||
},
|
||||
});
|
||||
function handleSelect(orgId = '') {
|
||||
searchInfo.orgId = orgId;
|
||||
reload();
|
||||
}
|
||||
|
||||
function getRow() {
|
||||
let rows = getSelectRows();
|
||||
return rows
|
||||
|
|
@ -55,5 +60,6 @@
|
|||
<style scoped>
|
||||
.select-account{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||||
:clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref ,nextTick,unref} from 'vue';
|
||||
|
||||
import { BasicTree, TreeItem } from '@/components/Tree';
|
||||
import { getDeptList } from '@/api/demo/system';
|
||||
|
||||
defineOptions({ name: 'DeptTree' });
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDeptList()) as unknown as TreeItem[];
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(keys) {
|
||||
emit('select', keys[0]);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import { getAllRoleList, isAccountExist } from '@/api/demo/system';
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
|
||||
/**
|
||||
* transform mock data
|
||||
* {
|
||||
* 0: '华东分部',
|
||||
* '0-0': '华东分部-研发部'
|
||||
* '0-1': '华东分部-市场部',
|
||||
* ...
|
||||
* }
|
||||
*/
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'account',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'organizations',
|
||||
// customRender: ({ value }) => {
|
||||
// return deptMap[value];
|
||||
// },
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'account',
|
||||
label: '用户名',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'nickname',
|
||||
label: '昵称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -1,68 +1,58 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTree ref="asyncExpandTreeRef" title="部门和职级列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
||||
loadData :clickRowToExpand="false" :treeData="treeData"
|
||||
:fieldNames="{ key: 'id', title: 'name' ,disabled:'disabled'}" :defaultExpandAll="true" :checkable="true"
|
||||
:checkStrictly="true" @check="handleSelect" />
|
||||
</div>
|
||||
<!-- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> -->
|
||||
<div class="select-account">
|
||||
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
|
||||
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo" @fetch-success="onFetchSuccess"> </BasicTable>
|
||||
</div>
|
||||
<!-- </PageWrapper> -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted, nextTick, unref } from 'vue';
|
||||
import { reactive,nextTick} from 'vue';
|
||||
|
||||
import { BasicTree, TreeItem } from '@/components/Tree';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getLoadPositionByOrg, deleteAccount } from '@/api/demo/system';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import DeptTree from './DeptTree.vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
const posData = ref([])
|
||||
function treeIterator(tree) {
|
||||
tree.forEach((node) => {
|
||||
if (node.key == 0) {
|
||||
node.name = "部门--" + node.name
|
||||
node.disableCheckbox = true
|
||||
} else {
|
||||
node.name = "职级--" + node.name
|
||||
// 需要拼接parentName
|
||||
posData.value.push(node)
|
||||
}
|
||||
node.children && treeIterator(node.children)
|
||||
})
|
||||
}
|
||||
async function fetch() {
|
||||
const data = (await getOrgPositonTree()) as unknown as TreeItem[];
|
||||
treeIterator(data)
|
||||
treeData.value = await data
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
import { columns, searchFormSchema } from './account.data';
|
||||
|
||||
defineOptions({ name: 'AccountManagement' });
|
||||
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
const [registerTable, { expandAll,reload, updateTableDataRecord, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '账号列表',
|
||||
api: getLoadPositionByOrg,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
},
|
||||
rowSelection: {//多选框
|
||||
type: 'checkbox',
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
bordered: true,
|
||||
tableSetting: { fullScreen: true },
|
||||
isCanResizeParent: true,
|
||||
handleSearchInfoFn(info) {
|
||||
console.log('handleSearchInfoFn', info);
|
||||
return info;
|
||||
},
|
||||
});
|
||||
let orgList = ref([])
|
||||
let posList = ref([])
|
||||
function handleSelect(checkedKeys, e: { checked: bool, checkedNodes, node, event }) {
|
||||
const list = e.checkedNodes
|
||||
console.log(e.node)
|
||||
console.log(checkedKeys)
|
||||
orgList.value = []
|
||||
posList.value = []
|
||||
list.forEach(element => {
|
||||
if (element.key > 0) {
|
||||
posList.value.push({
|
||||
orgId: Number(element.tag),
|
||||
posId: element.id,
|
||||
})
|
||||
} else {
|
||||
orgList.value.push({
|
||||
orgId: element.id,
|
||||
posId: 0,
|
||||
})
|
||||
}
|
||||
});
|
||||
function handleSelect(orgId = '') {
|
||||
searchInfo.orgId = orgId;
|
||||
reload();
|
||||
nextTick(expandAll);
|
||||
|
||||
}
|
||||
function onFetchSuccess() {
|
||||
// 演示默认展开所有表项
|
||||
nextTick(expandAll);
|
||||
}
|
||||
function getRow() {
|
||||
let rows = getSelectRows();
|
||||
|
|
@ -71,5 +61,10 @@
|
|||
defineExpose({
|
||||
getRow
|
||||
})
|
||||
|
||||
</script>
|
||||
</script>
|
||||
<style scoped>
|
||||
.select-account{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="div-box">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo"> </BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, } from 'vue';
|
||||
import { reactive, defineProps ,watch} from 'vue';
|
||||
import { getTableList } from '@/api/sys/flowPenal'
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
const searchInfo = reactive < Recordable > ({});
|
||||
const props = defineProps({
|
||||
dbCode: String
|
||||
})
|
||||
const searchInfo = reactive < Recordable > ({
|
||||
code: props.dbCode
|
||||
});
|
||||
watch(
|
||||
() => props.dbCode,
|
||||
(newVal, oldVal) => {
|
||||
searchInfo.code = newVal
|
||||
reload()
|
||||
}
|
||||
)
|
||||
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
// 表格名称
|
||||
|
|
@ -60,4 +71,10 @@
|
|||
getRow
|
||||
})
|
||||
|
||||
</script>
|
||||
</script>
|
||||
<style scoped>
|
||||
.div-box{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
|
||||
export const flowStore = defineStore({
|
||||
id: 'flow',
|
||||
state: () => ({
|
||||
flowWfData: [],
|
||||
}),
|
||||
getters: {
|
||||
getWfData(state) {
|
||||
return state.flowWfData;
|
||||
},
|
||||
|
||||
},
|
||||
actions: {
|
||||
// 获取单个节点的数据
|
||||
getWfDataNode(id){
|
||||
var currentIndex = (this.flowWfData || []).findIndex((element) => element.id === id);
|
||||
if(currentIndex == -1){
|
||||
return null
|
||||
}else{
|
||||
return this.flowWfData[currentIndex]
|
||||
}
|
||||
},
|
||||
// 添加单个节点的数据
|
||||
setWfDataNode(data) {
|
||||
let flowWfData = this.flowWfData
|
||||
var currentIndex = (flowWfData || []).findIndex((element) => element.id === data.id);
|
||||
if(currentIndex == -1){
|
||||
this.flowWfData.push(data)
|
||||
}
|
||||
},
|
||||
// 全覆盖，供更新和详情使用
|
||||
setWfDataAll(list){
|
||||
this.flowWfData=list
|
||||
},
|
||||
// 修改单个节点的某项数据
|
||||
updataWfDataNode(id,key,value){
|
||||
let flowWfData = this.flowWfData
|
||||
var currentIndex = (flowWfData || []).findIndex((element) => element.id === id);
|
||||
this.flowWfData[currentIndex][key] = value
|
||||
},
|
||||
deleteWfData(data) {
|
||||
let flowWfData = this.flowWfData
|
||||
var currentIndex = (flowWfData || []).findIndex((element) => element.id === data.id);
|
||||
this.flowWfData.splice(currentIndex,1)
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -16,6 +16,7 @@ import { RouteRecordRaw } from 'vue-router';
|
|||
import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic';
|
||||
import { isArray } from '@/utils/is';
|
||||
import { h } from 'vue';
|
||||
import md5 from 'js-md5'
|
||||
|
||||
interface UserState {
|
||||
userInfo: Nullable<UserInfo>;
|
||||
|
|
@ -90,8 +91,8 @@ export const useUserStore = defineStore({
|
|||
): Promise<GetUserInfoModel | null> {
|
||||
try {
|
||||
const { goHome = true, mode, ...loginParams } = params;
|
||||
loginParams.password = md5(loginParams.password)
|
||||
const data = await loginApi(loginParams, mode);
|
||||
console.log(data)
|
||||
const { token } = data;
|
||||
|
||||
// save token
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree title="部门列表" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||||
<BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
|
||||
:clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref ,nextTick,unref} from 'vue';
|
||||
|
||||
import { BasicTree, TreeItem } from '@/components/Tree';
|
||||
import { getDeptList } from '@/api/demo/system';
|
||||
|
|
@ -16,9 +16,14 @@
|
|||
const emit = defineEmits(['select']);
|
||||
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDeptList()) as unknown as TreeItem[];
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(keys) {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@
|
|||
import PermissionBtn from '@/components/PermissionBtn/index.vue'
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
const flowWfDataStore = flowStore();
|
||||
import { useGo } from '@/hooks/web/usePage';
|
||||
const go = useGo();
|
||||
|
||||
|
|
@ -131,7 +132,7 @@
|
|||
reload();
|
||||
if (data) {
|
||||
return createMessage.warn('删除成功');
|
||||
}else{
|
||||
} else {
|
||||
return createMessage.warn('删除失败');
|
||||
}
|
||||
},
|
||||
|
|
@ -151,6 +152,7 @@
|
|||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnAdd':
|
||||
flowWfDataStore.setWfDataAll([])
|
||||
go('/dashboard/scheme_preview/add');
|
||||
break;
|
||||
case 'btnEdit':
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<a-button type="primary" :icon="h(CloseCircleOutlined)" @click="closePreview" class="ml-2" danger>关闭 </a-button>
|
||||
</div>
|
||||
<process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
|
||||
v-loading="designerData.loading" :schemeCode="schemeCode" @save="onSaveDesigner" />
|
||||
v-loading="designerData.loading" :schemeCode="schemeCode" @save="onSaveDesigner" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
@ -19,7 +19,9 @@
|
|||
import { useRoute } from 'vue-router'
|
||||
import { useMultipleTabStore } from '@/store/modules/multipleTab';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { flowStore } from '@/store/modules/flow';
|
||||
|
||||
const flowWfDataStore = flowStore();
|
||||
const tabStore = useMultipleTabStore();
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -31,6 +33,7 @@
|
|||
})
|
||||
const modelDesigner = ref < any > ()
|
||||
async function onSave(type) {
|
||||
console.log(flowWfDataStore.getWfData)
|
||||
let validateData = await modelDesigner.value.validateFlow()
|
||||
if (validateData) {
|
||||
let formData = await modelDesigner.value.getFlow()
|
||||
|
|
|
|||
Loading…
Reference in New Issue