Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
95c69cc9 1 parent 6290cc47

流程版本控制启用，删除，修改note功能完善

Inline Side-by-side
Showing 1 changed file with 153 additions and 10 deletions
......@@ -323,10 +323,58 @@
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click.native="onSelectFlowVersion(item.id)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
<el-dropdown-item @click.native="onSelectFlowVersion(item.id, item.code, item.note)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tooltip content="编辑版本" placement="bottom">
<i class="el-icon-chat-line-square" @click="editFlowVersion" style="font-size: 18px; margin-left: 8px;"></i>
</el-tooltip>
<el-dialog v-model="state.dialogVersionFormVisible" title="版本描述">
<el-form :model="state.versionForm" label-width="80px">
<el-form-item label="版本号">
流程版本(V{{ state.versionForm.code }})
</el-form-item>
<el-form-item label="版本描述">
<el-input
v-model="state.versionForm.note"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入版本描述"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-popconfirm
v-if="state.flow_version !== state.versionForm.code"
placement="top"
icon="el-icon-warning"
title="是否确认启用该版本流程？"
width="220px"
confirm-button-text="确认"
cancel-button-text="取消"
@confirm="setFLowVersionEnable">
<template #reference>
<el-button type="success">启用流程</el-button>
</template>
</el-popconfirm>
<el-popconfirm
v-if="state.flow_version !== state.versionForm.code"
title="是否确认删除该版本流程？"
width="220px"
confirm-button-text="确认"
cancel-button-text="取消"
@confirm="deleteFlowVersion">
<template #reference>
<el-button type="danger">删除流程</el-button>
</template>
</el-popconfirm>
<el-button type="primary" color="#009688" @click="saveFlowVersionNote">保存描述</el-button>
<el-button @click="state.dialogVersionFormVisible = false">关闭</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<!-- 表单底部按钮 -->
......@@ -367,6 +415,7 @@ import { extend } from '@vue/shared'
import { v4 as uuidv4 } from 'uuid';
import type { FormInstance, FormRules } from 'element-plus'
import qs from 'qs'
import { after } from 'lodash-es';
// import { VueSpinner } from 'vue3-spinners';
const G6 = (window as any).G6.default as any
......@@ -513,9 +562,17 @@ export default {
auth_all_edit: false,
field_auths: [],
field_extend: [],
flow_version: '',
flow_version: 0,
flow_version_list: [],
})
version_list: [],
dialogVersionFormVisible: false,
versionForm: {
code: 0,
id: 0,
note: '',
type: null, // 操作方式 0:仅保存流程说明 1:删除,2:启用
}
});
/**
* 更新URL
......@@ -627,8 +684,8 @@ export default {
getFlowData(flow_id);
// 显示提示框的标志位
var showConfirmation = true;
onMounted(async () => {
var showConfirmation = true;
document.title = '可视化流程设计器'
// 监听 beforeunload 事件
window.addEventListener('beforeunload', function (event) {
......@@ -650,8 +707,12 @@ export default {
getVersionList();
});
/***************** 版本操作 ***************/
/**
* 获取版本信息列表
*/
const getVersionList = () => {
// 获取版本信息列表
axios.get('/admin/?a=flow_version&form_id=' + form_id)
.then(res => {
if (res.data.code) {
......@@ -659,9 +720,17 @@ export default {
res.data.data.forEach((ele) => {
if (ele.status === '1') {
state.flow_version = ele.code;
state.versionForm = { // 当前版本信息
code: ele.code,
id: ele.id,
note: ele.note,
type: null,
}
}
});
// 版本列表
state.version_list = res.data.data;
// 版本列表不含有启用的版本
state.flow_version_list = res.data.data.filter((ele) => {
return ele.status !== '1';
});
......@@ -677,15 +746,61 @@ export default {
});
}
const onSelectFlowVersion = (id: string) => {
const onSelectFlowVersion = (id: number, code: number, note: string) => {
// 切换版本信息
axios.post('/admin/?a=enable_flow_version', qs.stringify({ id: +id }))
state.dialogVersionFormVisible = true;
state.versionForm = { // 当前版本信息
code,
id,
note,
type: null,
}
}
const setFLowVersionEnable = () => { // 启用版本
state.versionForm.type = 2;
axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
.then(res => {
if (res.data.code) {
state.dialogVersionFormVisible = false;
ElMessage({
type: 'success',
message: '启用成功',
});
getVersionList(); // 刷新版本列表
updateUrl(res.data.data); // 更新URL
state.reloadLoading = true; // 打开loading
getFlowData(res.data.data); // 更新流程图数据
}
})
.catch(err => {
console.error(err);
});
}
const editFlowVersion = () => { // 编辑版本
console.warn('编辑版本');
state.dialogVersionFormVisible = true;
state.version_list.forEach((ele) => {
if (ele.status === '1') {
state.versionForm.id = ele.id;
state.versionForm.code = ele.code;
state.versionForm.note = ele.note;
}
});
}
const deleteFlowVersion = () => { // 删除版本
state.versionForm.type = 1;
axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
.then(res => {
if (res.data.code) {
state.dialogVersionFormVisible = false;
ElMessage({
type: 'success',
message: '删除成功',
});
getVersionList();
updateUrl(res.data.data);
state.reloadLoading = true;
getFlowData(res.data.data);
} else {
ElMessage({
type: 'error',
......@@ -698,6 +813,30 @@ export default {
});
}
const saveFlowVersionNote = () => { // 保存版本描述
state.versionForm.type = 0;
axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
.then(res => {
if (res.data.code) {
state.dialogVersionFormVisible = false;
ElMessage({
type: 'success',
message: '保存成功',
});
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
}
/***************** END *******************/
function handleActiveChange(name: any) {
console.warn(name)
}
......@@ -1516,6 +1655,10 @@ export default {
handleAfterAdd,
onSelectFlowVersion,
setFLowVersionEnable,
editFlowVersion,
deleteFlowVersion,
saveFlowVersionNote,
handleActiveChange,
onAuthVisibleChange,
onAuthEditableChange,
......