Browse Source

矩阵

han_v1
herenshan112 7 months ago
parent
commit
2b2a27ece0
  1. 9
      src/api/matrixapi/type.ts
  2. 207
      src/components/workflow/dialog/matrix.vue
  3. 66
      src/components/workflow/nodeWrap.vue
  4. 244
      src/views/sysworkflow/flow/flowDrawingBoard.vue
  5. 302
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
  6. 317
      src/views/sysworkflow/lowcodepage/workFlow.vue

9
src/api/matrixapi/type.ts

@ -48,7 +48,10 @@ export interface martixFieldStruct{
pinyin:string; //拼音(标识使用)
isedit:boolean; //是否可更改
pyedit:boolean; //拼音是否可更改
}
/**
*
*/
@ -117,4 +120,10 @@ export interface matrixInfo{
factorName:string;
outcomeid:number;
outcomeName:string;
list:martOpter[], //多选矩阵
}
//矩阵列表
export interface martOpter{
outcomeid:number;
outcomeName:string;
}

207
src/components/workflow/dialog/matrix.vue

@ -3,30 +3,36 @@
@ 时间: 2023-10-28 13:56:34
@ 备注: 矩阵选项
-->
<script lang='ts' setup>
import { searchMatrix,matrixCont,martixFieldStruct,matrixInfo } from '@/api/matrixapi/type'
import { getMatrixList,getMatrixField } from '@/api/matrixapi/index'
<script lang="ts" setup>
import {
searchMatrix,
matrixCont,
martixFieldStruct,
matrixInfo,
martOpter,
} from "@/api/matrixapi/type";
import { getMatrixList, getMatrixField } from "@/api/matrixapi/index";
const props = defineProps({
isshow: {
type: Boolean,
default:false
default: false,
},
data: {
type: Object,
default: () => {
return {
"matrixid":0,
"matrixName":"",
"factorid":0,
"factorName":"",
"outcomeid":0,
"outcomeName":"",
}
}
matrixid: 0,
matrixName: "",
factorid: 0,
factorName: "",
outcomeid: 0,
outcomeName: "",
list: [],
};
},
})
},
});
const emits = defineEmits(["update:isshow", "change"]); //
const isShow = computed({
get: () => props.isshow,
@ -44,59 +50,79 @@ const matrixIsClick = reactive<matrixInfo>({
matrixName: "",
factorName: "",
outcomeName: "",
list: [],
});
//
watch(() => props.isshow,(val:any) => {
watch(
() => props.isshow,
(val: any) => {
if (val) {
// console.log("")
searchMatrixList();
matrixIsClick.matrixid = props.data.matrixid;
matrixIsClick.matrixName = props.data.matrixName;
matrixIsClick.factorid = props.data.factorid;
matrixIsClick.factorName = props.data.factorName;
matrixIsClick.outcomeid = props.data.outcomeid;
matrixIsClick.outcomeName = props.data.outcomeName;
matrixIsClick.list = props.data.list ? props.data.list : [];
}
})
}
);
watch(
() => props.data,
(val: any) => {
matrixIsClick.matrixid = val.matrixid;
matrixIsClick.matrixName = val.matrixName;
matrixIsClick.factorid = val.factorid;
matrixIsClick.factorName = val.factorName;
matrixIsClick.outcomeid = val.outcomeid;
matrixIsClick.outcomeName = val.outcomeName;
matrixIsClick.list = val.list ? val.list : [];
console.log("数据变换---->", val);
searchMatrixList();
},
(deep) => true
);
//
const searchArchiveQuery = reactive<searchMatrix>({
page: 1,
pagesize:10
})
pagesize: 10,
});
const total = ref(0); //
const farstId = ref<number>(0)
const farstId = ref<number>(0);
/**
* 获取矩阵列表
*/
function searchMatrixList() {
loading.value = true
loading.value = true;
// console.log("---->",matrixIsClick)
getMatrixList(searchArchiveQuery)
.then(({ data }) => {
// console.log("->",data)
matrixContList.value = data.list
total.value = data.total
matrixContList.value = data.list;
total.value = data.total;
if (data.list.length > 0) {
farstId.value = data.list[0].id*1
farstId.value = data.list[0].id * 1;
// matrixIsClick.matrixid = data.list[0].id*1
// matrixIsClick.matrixName = data.list[0].name
}
}).finally(()=>{
loading.value = false
gainMatrixNeed(farstId.value);
})
.finally(() => {
loading.value = false;
gainMatrixNeed(farstId.value);
});
}
const factorList = ref<martixFieldStruct[]>()
const outcomeList = ref<martixFieldStruct[]>()
const factorList = ref<martixFieldStruct[]>();
const outcomeList = ref<martixFieldStruct[]>();
//
const gainMatrixNeed = (val: any) => {
loadingVal.value = true
loadingVal.value = true;
getMatrixField({ id: val * 1 })
.then(({ data }) => {
// console.log("---->",data)
factorList.value = data.factor
outcomeList.value = data.outcome
console.log("监听数据---->", data);
factorList.value = data.factor;
outcomeList.value = data.outcome;
if (data.factor.length > 0) {
// matrixIsClick.factorid = data.factor[0].id*1
// matrixIsClick.factorName = data.factor[0].name
@ -107,33 +133,51 @@ const gainMatrixNeed = (val:any) =>{
}
})
.finally(() => {
loadingVal.value = false
})
}
loadingVal.value = false;
});
};
//
const pickmatirval = (val: matrixCont) => {
matrixIsClick.matrixid = val.id*1
matrixIsClick.matrixName = val.name
matrixIsClick.matrixid = val.id * 1;
matrixIsClick.matrixName = val.name;
gainMatrixNeed(val.id * 1);
}
};
//
const pickval = (val: martixFieldStruct) => {
matrixIsClick.outcomeid = val.id*1
matrixIsClick.outcomeName = val.name
matrixIsClick.outcomeid = val.id * 1;
matrixIsClick.outcomeName = val.name;
console.log("监听数据--123-->", matrixIsClick);
var isAdd = true;
if (matrixIsClick.list && matrixIsClick.list.length > 0) {
matrixIsClick.list.forEach((item: martOpter, index: number) => {
console.log("监听数据--1-->", item.outcomeid == val.id * 1);
if (item.outcomeid == val.id * 1) {
matrixIsClick.list.splice(index, 1);
isAdd = false;
}
});
}
if (isAdd) {
matrixIsClick.list.push({
outcomeid: val.id * 1,
outcomeName: val.name,
});
}
console.log("监听数据---->", matrixIsClick);
};
//
const pickSelect = (val: any) => {
factorList.value.forEach((item: any) => {
if (item.id == val) {
matrixIsClick.factorid = item.id*1
matrixIsClick.factorName = item.name
}
})
matrixIsClick.factorid = item.id * 1;
matrixIsClick.factorName = item.name;
}
});
};
watch(matrixIsClick, (val: any) => {
// console.log("---->",val)
emits("change", val);
})
});
onMounted(() => {
matrixIsClick.matrixid = props.data.matrixid;
matrixIsClick.matrixName = props.data.matrixName;
@ -141,9 +185,27 @@ onMounted(()=>{
matrixIsClick.factorName = props.data.factorName;
matrixIsClick.outcomeid = props.data.outcomeid;
matrixIsClick.outcomeName = props.data.outcomeName;
matrixIsClick.list = props.data.list ? props.data.list : [];
searchMatrixList();
})
});
/**
@ 作者: 秦东
@ 时间: 2025-04-23 09:46:10
@ 功能: 判断是否已经选中
*/
const jugdeIsTrue = (id: number) => {
var isAdd = false;
if (matrixIsClick.list && matrixIsClick.list.length > 0) {
matrixIsClick.list.forEach((item: martOpter) => {
console.log("数据变换--111111-->", item.outcomeid == id, item.outcomeid, id);
if (item.outcomeid == id) {
isAdd = true;
}
});
}
console.log("判断--111111111-->", id);
return isAdd;
};
</script>
<template>
<div>
@ -161,27 +223,41 @@ onMounted(()=>{
<el-row v-loading="loading">
<el-col :span="24" class="materBody">
<ul>
<li v-for="item in matrixContList" :key="item.id" :class="matrixIsClick.matrixid==item.id?'active':''" @click="pickmatirval(item)">
<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{item.orgname}}</el-text>
<li
v-for="item in matrixContList"
:key="item.id"
:class="matrixIsClick.matrixid == item.id ? 'active' : ''"
@click="pickmatirval(item)"
>
<el-text class="mx-1">{{ item.name }}</el-text>
<el-text class="mx-1">{{ item.orgname }}</el-text>
</li>
</ul>
</el-col>
<el-col :span="24">
<el-pagination v-model:total="total" v-model:current-page="searchArchiveQuery.page" small layout="prev, pager, next" :page-size="searchArchiveQuery.pagesize" :pager-count="5" />
<el-pagination
v-model:total="total"
v-model:current-page="searchArchiveQuery.page"
small
layout="prev, pager, next"
:page-size="searchArchiveQuery.pagesize"
:pager-count="5"
/>
</el-col>
</el-row>
</el-descriptions-item>
<el-descriptions-item label="矩阵选项" width="50%">
<el-row v-loading="loadingVal">
<el-col :span="24">
<el-select v-model="matrixIsClick.factorid" filterable placeholder="Select" style="width:100%" @change="pickSelect">
<el-option
:key="0"
label="请选择"
:value="0"
/>
<el-select
v-model="matrixIsClick.factorid"
filterable
placeholder="Select"
style="width: 100%"
@change="pickSelect"
>
<el-option :key="0" label="请选择" :value="0" />
<el-option
v-for="item in factorList"
:key="item.id"
@ -192,18 +268,23 @@ onMounted(()=>{
</el-col>
<el-col :span="24" class="materBody">
<ul>
<li v-for="item in outcomeList" :key="item.id" :class="matrixIsClick.outcomeid==item.id?'active':''" @click="pickval(item)">
<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{}}{{item.pinyin}}</el-text>
<li
v-for="item in outcomeList"
:key="item.id"
:class="jugdeIsTrue(item.id) ? 'active' : ''"
@click="pickval(item)"
>
<el-text class="mx-1">{{ item.name }}</el-text>
<el-text class="mx-1">{{ item.pinyin }}</el-text>
</li>
</ul>
</el-col>
</el-row>
</el-descriptions-item>
</el-descriptions>
</div>
</template>
<style lang='scss' scoped>
<style lang="scss" scoped>
.materBody {
padding: 5px 0 5px 0;
@ -214,7 +295,7 @@ onMounted(()=>{
cursor: pointer;
}
li.active span {
color:#409EFF;
color: #409eff;
}
}
.suojin {

66
src/components/workflow/nodeWrap.vue

@ -44,9 +44,8 @@ let defaultText = computed(() => {
return placeholderList[props.nodeConfig.type];
});
let showText = computed(() => {
// console.log("props.nodeConfig.type===>",props.nodeConfig,props.nodeConfig.type);
if (props.nodeConfig.type == 0)
return $func.arrToStr(props.flowPermission) || "所有人";
console.log("props.nodeConfig.type===>", props.nodeConfig);
if (props.nodeConfig.type == 0) return $func.arrToStr(props.flowPermission) || "所有人";
if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig);
if (props.nodeConfig.type == 3) return $func.setApproverStr(props.nodeConfig);
// console.log("props.nodeConfig.type",props.nodeConfig);
@ -113,14 +112,10 @@ const delTerm = (index: any) => {
if (props.nodeConfig.conditionNodes.length == 1) {
if (props.nodeConfig.childNode) {
if (props.nodeConfig.conditionNodes[0].childNode) {
reData(
props.nodeConfig.conditionNodes[0].childNode,
props.nodeConfig.childNode
);
reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode);
} else {
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[0].childNode =
props.nodeConfig.childNode;
props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode;
}
}
emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
@ -138,7 +133,6 @@ const setPerson = (priorityLevel: any) => {
// console.log("--->",type,props.nodeConfig)
if (type == 0) {
setPromoter(true);
setFlowPermission({
@ -234,10 +228,7 @@ onMounted(() => {
"
>
<!--标签头部-->
<div
class="title"
:style="`background: rgb(${bgColors[nodeConfig.type]});`"
>
<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
<span v-if="nodeConfig.type == 0" class="iconfont"
><i class="fa fa-play-circle-o"></i> {{ nodeConfig.nodeName }}</span
>
@ -252,18 +243,26 @@ onMounted(() => {
><i class="fa fa-pencil-square-o"></i
></span>
<!--eslint-disable-next-line vue/no-mutating-props-->
<input v-if="isInput" v-model="nodeConfig.nodeName" v-focus:placeholder="defaultText" type="text" class="ant-input editable-title-input" @blur="blurEvent()" @focus="$event.currentTarget.select()"/>
<input
v-if="isInput"
v-model="nodeConfig.nodeName"
v-focus:placeholder="defaultText"
type="text"
class="ant-input editable-title-input"
@blur="blurEvent()"
@focus="$event.currentTarget.select()"
/>
<span v-else class="editable-title" @click="clickEvent()">{{nodeConfig.nodeName}}</span>
<span v-else class="editable-title" @click="clickEvent()">{{
nodeConfig.nodeName
}}</span>
<i class="fa fa-close close" @click="delNode"></i>
</template>
</div>
<!--标签主体-->
<div class="content" @click="setPerson">
<div class="text">
<span v-if="!showText" class="placeholder"
>请选择{{ defaultText }}</span
>
<span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
{{ showText }}
</div>
<i class="fa fa-angle-right arrow"></i>
@ -292,11 +291,7 @@ onMounted(() => {
class="auto-judge"
:class="isTried && item.error ? 'error active' : ''"
>
<div
v-if="index != 0"
class="sort-left"
@click="arrTransfer(index, -1)"
>
<div v-if="index != 0" class="sort-left" @click="arrTransfer(index, -1)">
&lt;
</div>
<div class="title-wrapper">
@ -309,15 +304,10 @@ onMounted(() => {
@blur="blurEvent(index)"
@focus="$event.currentTarget.select()"
/>
<span
v-else
class="editable-title"
@click="clickEvent(index)"
>{{ item.nodeName }}</span
>
<span
class="priority-title"
@click="setPerson(item.priorityLevel)"
<span v-else class="editable-title" @click="clickEvent(index)">{{
item.nodeName
}}</span>
<span class="priority-title" @click="setPerson(item.priorityLevel)"
>优先级{{ item.priorityLevel }}</span
>
<i class="fa fa-close close" @click="delTerm(index)"></i>
@ -336,10 +326,7 @@ onMounted(() => {
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
</div>
<addNode
v-model:childNodeP="item.childNode"
:node-config="item"
/>
<addNode v-model:childNodeP="item.childNode" :node-config="item" />
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
@ -354,7 +341,10 @@ onMounted(() => {
</div>
</div>
<!--eslint-disable-next-line vue/no-mutating-props-->
<addNode v-model:childNodeP="nodeConfig.childNode" :node-config="props.nodeConfig" />
<addNode
v-model:childNodeP="nodeConfig.childNode"
:node-config="props.nodeConfig"
/>
</div>
</div>
<!--循环组件-->

244
src/views/sysworkflow/flow/flowDrawingBoard.vue

@ -3,14 +3,22 @@
@ 时间: 2023-10-18 09:02:53
@ 备注: 工作流画板
-->
<script lang='ts' setup>
import '@/styles/workflowcss/workflow.scss'
<script lang="ts" setup>
import "@/styles/workflowcss/workflow.scss";
import { useStore } from '@/store/workflow/index'
import { flowversion } from '@/api/workflowapi/types'
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion } from '@/api/workflowapi/index'
import { useStore } from "@/store/workflow/index";
import { flowversion } from "@/api/workflowapi/types";
import {
initializeWorkFlow,
setWorkFlowData,
gainFlowVersionList,
saveFlowCont,
gainFlowInfo,
editFlowCont,
saveNewFlow,
switchFlowVersion,
} from "@/api/workflowapi/index";
//
import errorDialog from "@/components/workflow/dialog/errorDialog.vue";
@ -22,29 +30,29 @@ import conditionDrawer from "@/components/workflow/drwer/conditionDrawer.vue";
const props = defineProps({
openDrawer: {
type: Boolean,
default:true
default: true,
},
drawerWidht: {
type: Number,
default:100
default: 100,
},
isFormFlow: {
type: Boolean,
default:true
default: true,
},
customerFormKey: {
type: String,
default:""
default: "",
},
customerFormName: {
type: String,
default:""
default: "",
},
flowKey: {
type: String,
default:""
}
})
default: "",
},
});
const emits = defineEmits(["update:openDrawer", "chanerequest"]);
const isShow = computed({
get: () => props.openDrawer,
@ -53,7 +61,7 @@ const isShow = computed({
},
});
let { setTableId, setIsTried } = useStore()
let { setTableId, setIsTried } = useStore();
let tipList = ref<any>([]);
let tipVisible = ref(false);
@ -63,12 +71,12 @@ let nodeConfig = ref({});
let workFlowDef = ref({});
let flowPermission = ref([]);
let directorMaxLeveling = ref<number>(0);
const shenPiTitle = ref<string>("")
const shenPiTitle = ref<string>("");
const activeTabs = ref<string>(""); //
const versionList = reactive<flowversion[]>([]); //
const enableFlow = ref<any>();
const isRead = ref(false)
const isRead = ref(false);
const enableVersion = ref<string>("1");
//
const getFlowVerList = () => {
@ -76,29 +84,26 @@ const getFlowVerList = ()=>{
.then(({ data }) => {
// console.log("-->",data)
// versionList = data;
versionList.splice(0,versionList.length)
versionList.splice(0, versionList.length);
if (data) {
if (data.length > 0) {
data.forEach((item: any) => {
if (item.state == 1) {
activeTabs.value = item.id
enableFlow.value = item
enableVersion.value = item.id
activeTabs.value = item.id;
enableFlow.value = item;
enableVersion.value = item.id;
}
versionList.push({
id: item.id,
key: item.key,
state: item.state,
version:item.version
})
})
version: item.version,
});
});
isRead.value = true
isRead.value = true;
} else {
isRead.value = false
isRead.value = false;
}
}
// console.log("---1-->",activeTabs.value);
@ -112,18 +117,17 @@ const getFlowVerList = ()=>{
clearCanvas(1);
}
clickOpenOrClose();
})
}
});
};
//
onMounted(async () => {
// getFlowVerList()
})
});
//
const initWorkFlowData = async () => {
let { data } = await initializeWorkFlow({name:props.customerFormName})
// console.log("data-=------>",data)
let { data } = await initializeWorkFlow({ name: props.customerFormName });
console.log("data-=------>", data);
processConfig.value = data;
let {
nodeConfig: nodes,
@ -132,7 +136,7 @@ const initWorkFlowData = async() => {
workFlowDef: workName,
tableId,
} = data;
processConfig.value.workFlowDef.formKey = props.customerFormKey
processConfig.value.workFlowDef.formKey = props.customerFormKey;
nodeConfig.value = nodes;
flowPermission.value = flowPermissiones;
directorMaxLeveling = levels;
@ -144,7 +148,7 @@ const initWorkFlowData = async() => {
// console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig)
}
};
//
const reErr = ({ childNode }: any) => {
if (childNode) {
@ -184,7 +188,7 @@ const saveSet = async () => {
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",processConfig.value);
console.log("processConfig", processConfig.value);
// console.log("flowPermission",flowPermission.value);
// console.log("nodeConfig", nodeConfig.value);
saveFlowCont(processConfig.value)
@ -197,8 +201,7 @@ const saveSet = async () => {
})
.finally(() => {
emits("chanerequest");
})
});
// let res = await setWorkFlowData(processConfig.value);
// if (res.code == 200) {
// ElMessage.success("")
@ -206,7 +209,6 @@ const saveSet = async () => {
// window.location.href = "";
// }, 200);
// }
};
//
const zoomSize = (type: number) => {
@ -225,47 +227,48 @@ const zoomSize = (type:number) => {
//
const clearCanvas = (isOk?: any) => {
if (isOk == 1) {
initWorkFlowData()
initWorkFlowData();
setIsTried(false);
tipList.value = []
tipList.value = [];
} else {
ElMessageBox.confirm('确定要清空画布?')
.then(() => {
initWorkFlowData()
ElMessageBox.confirm("确定要清空画布?").then(() => {
initWorkFlowData();
setIsTried(false);
tipList.value = []
})
tipList.value = [];
});
}
enableFlow.value = ""
}
watch(()=>props.openDrawer,(val)=>{
enableFlow.value = "";
};
watch(
() => props.openDrawer,
(val) => {
// console.log("1111",props.customerFormKey,val)
if (val) {
if (props.customerFormKey != "") {
getFlowVerList()
getFlowVerList();
} else {
initWorkFlowData()
initWorkFlowData();
}
shenPiTitle.value = props.customerFormName
shenPiTitle.value = props.customerFormName;
} else {
setIsTried(false);
tipList.value = []
enableFlow.value = ""
isRead.value=false
tipList.value = [];
enableFlow.value = "";
isRead.value = false;
}
})
}
);
//
const clickFormTable = (val: any) => {
// console.log("",val,activeTabs.value)
enableVersion.value = val
enableVersion.value = val;
gainFlowCont();
clickOpenOrClose();
// getTableFieldList(versionIndex.value,val)
}
};
//
const saveEdit = () => {
setIsTried(true);
@ -278,13 +281,13 @@ const saveEdit =()=>{
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",flowPermission);
console.log("processConfig", processConfig.value);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo:processConfig.value
}
flowinfo: processConfig.value,
};
editFlowCont(sendCont)
.then((data: any) => {
if (data.code == 0) {
@ -295,9 +298,8 @@ const saveEdit =()=>{
})
.finally(() => {
emits("chanerequest");
})
}
});
};
//
const saveNew = () => {
setIsTried(true);
@ -315,8 +317,8 @@ const saveNew = () => {
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo:processConfig.value
}
flowinfo: processConfig.value,
};
saveNewFlow(sendCont)
.then((data: any) => {
if (data.code == 0) {
@ -327,17 +329,15 @@ const saveNew = () => {
})
.finally(() => {
emits("chanerequest");
})
}
});
};
//
const gainFlowCont = () => {
gainFlowInfo({id:enableVersion.value.toString()})
.then((data:any)=>{
// console.log("-1->",data,enableFlow.value)
gainFlowInfo({ id: enableVersion.value.toString() }).then((data: any) => {
console.log("获取工作流版本列表-1->", data, enableFlow.value);
if (data.code == 0) {
processConfig.value = data.data;
processConfig.value.workFlowDef.formKey = props.customerFormKey
processConfig.value.workFlowDef.formKey = props.customerFormKey;
nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel;
@ -353,50 +353,50 @@ const gainFlowCont = () =>{
clearCanvas(1);
}
// initWorkFlowData();
})
}
});
};
//
const setupState = (val: number) => {
let sendCont = {
id: enableVersion.value.toString(),
status:val
}
status: val,
};
switchFlowVersion(sendCont)
.then((data: any) => {
ElMessage.success(data.msg);
// activeTabs.value = enableVersion.value
// enableFlow.value.id = enableVersion.value
if (versionList.length > 0) {
versionList.forEach(item=>{
versionList.forEach((item) => {
if (item.id == enableVersion.value) {
enableFlow.value = item
enableFlow.value = item;
}
})
});
}
})
.finally(() => {
clickOpenOrClose();
})
});
// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
}
const openOfClise = ref(false)
};
const openOfClise = ref(false);
const clickOpenOrClose = () => {
if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true
openOfClise.value = true;
} else {
openOfClise.value = false
openOfClise.value = false;
}
// console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
}
};
</script>
<template>
<el-drawer v-model="isShow" :size="props.drawerWidht" :show-close="false">
<template #header="{ close, titleId, titleClass }">
<div style="display: flex; width: 50%">
<div class="right_kongx"><h4 :id="titleId" :class="titleClass">{{ shenPiTitle }}审批流程</h4></div>
<div class="right_kongx">
<h4 :id="titleId" :class="titleClass">{{ shenPiTitle }}审批流程</h4>
</div>
</div>
<el-button type="warning" @click="clearCanvas">
<el-icon class="el-icon--left"><Delete /></el-icon>
@ -424,7 +424,12 @@ const clickOpenOrClose = () => {
<el-row v-if="isRead" :gutter="20">
<el-col :span="22">
<el-tabs v-model="activeTabs" class="flow_version" @tab-change="clickFormTable">
<el-tab-pane v-for="item in versionList" :key="item.id" :label="item.version" :name="item.id">
<el-tab-pane
v-for="item in versionList"
:key="item.id"
:label="item.version"
:name="item.id"
>
<template #label>
<span class="custom-tabs-label">
<span>V{{ item.version }}</span>
@ -433,21 +438,46 @@ const clickOpenOrClose = () => {
</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="1" style="text-align: center; display: flex; margin: auto;">
<el-button v-if="openOfClise" type="danger" size="small" round @click="setupState(2)">禁用</el-button>
<el-button v-if="!openOfClise" type="success" size="small" round @click="setupState(1)">启用</el-button>
<el-col :span="1" style="text-align: center; display: flex; margin: auto">
<el-button
v-if="openOfClise"
type="danger"
size="small"
round
@click="setupState(2)"
>禁用</el-button
>
<el-button
v-if="!openOfClise"
type="success"
size="small"
round
@click="setupState(1)"
>启用</el-button
>
</el-col>
</el-row>
<div class="fd-nav-content-new">
<!--画板-->
<section class="dingflow-design">
<div class="zoom">
<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
<div
class="zoom-out"
:class="nowVal == 50 && 'disabled'"
@click="zoomSize(1)"
></div>
<span>{{ nowVal }}%</span>
<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
<div
class="zoom-in"
:class="nowVal == 300 && 'disabled'"
@click="zoomSize(2)"
></div>
</div>
<div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
<nodeWrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
<nodeWrap
v-model:nodeConfig="nodeConfig"
v-model:flowPermission="flowPermission"
/>
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">4</div>
@ -457,9 +487,17 @@ const clickOpenOrClose = () => {
</div>
<errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer />
<approverDrawer :directormaxlevel="directorMaxLeveling" :node-config="nodeConfig" :is-form-flow="props.isFormFlow" :customer-form-key="props.customerFormKey" />
<approverDrawer
:directormaxlevel="directorMaxLeveling"
:node-config="nodeConfig"
:is-form-flow="props.isFormFlow"
:customer-form-key="props.customerFormKey"
/>
<copyerDrawer />
<conditionDrawer :is-form-flow="props.isFormFlow" :customer-form-key="props.customerFormKey" />
<conditionDrawer
:is-form-flow="props.isFormFlow"
:customer-form-key="props.customerFormKey"
/>
</div>
</el-drawer>
</template>
@ -469,7 +507,6 @@ const clickOpenOrClose = () => {
width: inherit;
}
.flow_version {
}
.flow_version > .el-tabs__content {
padding: 0px;
@ -483,7 +520,6 @@ const clickOpenOrClose = () => {
}
.right_kongx {
margin-right:50px
margin-right: 50px;
}
</style>

302
src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue

@ -3,74 +3,85 @@
@ 时间: 2024-05-07 15:07:51
@ 备注: 表单流程
-->
<script lang='ts' setup>
import '@/styles/workflowcss/workflow.scss'
import { useStore } from '@/store/workflow/index'
import { flowversion } from '@/api/workflowapi/types'
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion,judgeFormFlowIsOpen,openFormFlow } from '@/api/workflowapi/index'
import FlowImgSrc from '@/assets/images/3.png'
<script lang="ts" setup>
import "@/styles/workflowcss/workflow.scss";
import { useStore } from "@/store/workflow/index";
import { flowversion } from "@/api/workflowapi/types";
import {
initializeWorkFlow,
setWorkFlowData,
gainFlowVersionList,
saveFlowCont,
gainFlowInfo,
editFlowCont,
saveNewFlow,
switchFlowVersion,
judgeFormFlowIsOpen,
openFormFlow,
} from "@/api/workflowapi/index";
import FlowImgSrc from "@/assets/images/3.png";
const props = defineProps({
appCont: {
type: Object,
default() {
return {}
}
return {};
},
},
formKey: {
type: String,
default:""
default: "",
},
groupKey: {
type: String,
default:""
default: "",
},
menuId: {
type: String,
default:""
default: "",
},
appPageKey: {
type: String,
default:""
default: "",
},
formVersion: {
type: String,
default:""
default: "",
},
state: {
type: Object,
default() {
return {}
}
}
return {};
},
},
});
const emits = defineEmits<{
(e: 'update:state', val: formStruct): void
(e: 'update:formKey', val: string): void
(e: 'update:appPageKey', val: string): void
(e: "update:state", val: formStruct): void;
(e: "update:formKey", val: string): void;
(e: "update:appPageKey", val: string): void;
// (e: 'judgeFlowIsEdit', val: boolean): void
// (e: 'runNextWindows', val: number): void
// (e: 'closeFormPage'): void
}>()
}>();
const state = computed({
get() {
return props.state
return props.state;
},
set(val: formStruct) {
emits('update:state', val)
}
emits("update:state", val);
},
});
const appPageKey = computed({
get() {
return props.appPageKey
return props.appPageKey;
},
set(val: formStruct) {
emits('update:appPageKey', val)
}
emits("update:appPageKey", val);
},
});
let { setTableId, setIsTried } = useStore()
const openOfClise = ref(false) //
const flowIsTrue = ref(false) //使
const isRead = ref(false) //
let { setTableId, setIsTried } = useStore();
const openOfClise = ref(false); //
const flowIsTrue = ref(false); //使
const isRead = ref(false); //
const activeTabs = ref<string>(""); //
const versionList = reactive<flowversion[]>([]); //
const nowVal = ref(100); //
@ -107,20 +118,20 @@ const zoomSize = (type:number) => {
const createFormFlow = () => {
if (appPageKey.value == "") {
flowIsTrue.value = false;
ElMessageBox.alert('您还未设置表单!请先设置完表单后,在创建流程!','温馨提示!',{
confirmButtonText: '确定',
ElMessageBox.alert("您还未设置表单!请先设置完表单后,在创建流程!", "温馨提示!", {
confirmButtonText: "确定",
callback: (action: Action) => {
// emits("runNextWindows",1);
},
})
});
} else {
openOrCloseFormFlow(1)
flowIsTrue.value = true
getFlowVerList()
openOrCloseFormFlow(1);
flowIsTrue.value = true;
getFlowVerList();
}
// flowIsTrue.value = true
}
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 11:29:46
@ -131,40 +142,37 @@ const getFlowVerList = ()=>{
.then(({ data }) => {
// console.log("-->",data)
// versionList = data;
versionList.splice(0,versionList.length)
versionList.splice(0, versionList.length);
if (data) {
if (data.length > 0) {
data.forEach((item: any) => {
if (item.state == 1) {
activeTabs.value = item.id
enableFlow.value = item
enableVersion.value = item.id
activeTabs.value = item.id;
enableFlow.value = item;
enableVersion.value = item.id;
}
versionList.push({
id: item.id,
key: item.key,
state: item.state,
version:item.version
})
})
version: item.version,
});
});
if (versionList.length > 1) {
closeOrOpenVersion.value = true
closeOrOpenVersion.value = true;
} else {
closeOrOpenVersion.value = false
closeOrOpenVersion.value = false;
}
// console.log("--1-1-->",enableFlow.value);
if (enableFlow.value == "" || enableFlow.value == undefined) {
enableFlow.value = versionList[0]
enableFlow.value = versionList[0];
// activeTabs.value = versionList[0].id
enableVersion.value = versionList[0].id
enableVersion.value = versionList[0].id;
}
isRead.value = true
isRead.value = true;
} else {
isRead.value = false
isRead.value = false;
}
}
// console.log("---4-->",isRead.value);
@ -174,16 +182,14 @@ const getFlowVerList = ()=>{
// console.log("---3-1->",versionList[0],versionList);
})
.finally(() => {
if (isRead.value == true) {
gainFlowCont();
} else {
clearCanvas(1);
}
clickOpenOrClose();
})
}
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 11:40:34
@ -192,13 +198,13 @@ const getFlowVerList = ()=>{
const clickOpenOrClose = () => {
// console.log("",enableFlow,activeTabs.value)
if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true
openOfClise.value = true;
} else {
openOfClise.value = false
openOfClise.value = false;
}
// console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
}
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 11:37:19
@ -206,28 +212,27 @@ const clickOpenOrClose = () => {
*/
const clearCanvas = (isOk?: any) => {
if (isOk == 1) {
initWorkFlowData()
initWorkFlowData();
setIsTried(false);
tipList.value = []
tipList.value = [];
} else {
ElMessageBox.confirm('确定要清空画布?')
.then(() => {
initWorkFlowData()
ElMessageBox.confirm("确定要清空画布?").then(() => {
initWorkFlowData();
setIsTried(false);
tipList.value = []
})
tipList.value = [];
});
}
enableFlow.value = ""
}
enableFlow.value = "";
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 11:37:46
@ 功能: 初始化工作流数据
*/
const initWorkFlowData = async () => {
let { data } = await initializeWorkFlow({name:state.value.formData.form.formName})
console.log("data-=------>",data)
let { data } = await initializeWorkFlow({ name: state.value.formData.form.formName });
console.log("data-=------>", data);
processConfig.value = data;
let {
nodeConfig: nodes,
@ -236,7 +241,7 @@ const initWorkFlowData = async() => {
workFlowDef: workName,
tableId,
} = data;
processConfig.value.workFlowDef.formKey = appPageKey.value
processConfig.value.workFlowDef.formKey = appPageKey.value;
nodeConfig.value = nodes;
flowPermission.value = flowPermissiones;
directorMaxLeveling = levels;
@ -249,7 +254,7 @@ const initWorkFlowData = async() => {
// console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig)
}
};
//
/**
@ 作者: 秦东
@ -257,8 +262,8 @@ const initWorkFlowData = async() => {
@ 功能: 编辑表单流程状态
*/
const openOrCloseFormFlow = (val: number) => {
openFormFlow({id:appPageKey.value.toString(),status:val})
}
openFormFlow({ id: appPageKey.value.toString(), status: val });
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 10:10:46
@ -269,20 +274,19 @@ onMounted(()=>{
if (appPageKey.value == "") {
flowIsTrue.value = false;
} else {
judgeFormFlowIsOpen({id:appPageKey.value.toString()})
.then((data)=>{
judgeFormFlowIsOpen({ id: appPageKey.value.toString() }).then((data) => {
// console.log("",data)
if (data.data.isOpen == 1) {
flowIsTrue.value = true;
// emits('judgeFlowIsEdit', false)
getFlowVerList()
getFlowVerList();
} else {
flowIsTrue.value = false;
// emits('judgeFlowIsEdit', false)
}
})
});
}
})
});
/**
@ 作者: 秦东
@ 时间: 2024-05-21 13:57:13
@ -291,10 +295,10 @@ onMounted(()=>{
const setupState = (val: number) => {
let sendCont = {
id: enableVersion.value.toString(),
status:val
}
status: val,
};
if (val == 1) {
activeTabs.value = enableVersion.value
activeTabs.value = enableVersion.value;
}
// console.log("",sendCont)
switchFlowVersion(sendCont)
@ -303,18 +307,17 @@ const setupState = (val:number) =>{
// activeTabs.value = enableVersion.value
// enableFlow.value.id = enableVersion.value
if (versionList.length > 0) {
versionList.forEach(item=>{
versionList.forEach((item) => {
if (item.id == enableVersion.value) {
enableFlow.value = item
enableFlow.value = item;
}
})
});
}
})
.finally(() => {
clickOpenOrClose();
})
}
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 13:59:44
@ -344,9 +347,9 @@ const saveSet = async () => {
})
.finally(() => {
// emits("chanerequest");
getFlowVerList()
})
}
getFlowVerList();
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 14:01:22
@ -384,12 +387,11 @@ const reErr = ({ childNode }:any) => {
@ 功能: 获取流程内容
*/
const gainFlowCont = () => {
gainFlowInfo({id:enableVersion.value.toString()})
.then((data:any)=>{
gainFlowInfo({ id: enableVersion.value.toString() }).then((data: any) => {
// console.log("-1->",data,enableFlow.value)
if (data.code == 0) {
processConfig.value = data.data;
processConfig.value.workFlowDef.formKey = appPageKey.value
processConfig.value.workFlowDef.formKey = appPageKey.value;
nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel;
@ -406,8 +408,8 @@ const gainFlowCont = () =>{
clearCanvas(1);
}
// initWorkFlowData();
})
}
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 14:12:43
@ -415,11 +417,11 @@ const gainFlowCont = () =>{
*/
const clickFormTable = (val: any) => {
// console.log("",val,activeTabs.value)
enableVersion.value = val
enableVersion.value = val;
gainFlowCont();
clickOpenOrClose();
// getTableFieldList(versionIndex.value,val)
}
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 14:21:06
@ -436,13 +438,14 @@ const saveEdit =()=>{
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
console.log("processConfig----------123--------->", processConfig.value);
// console.log("processConfig",flowPermission);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo:processConfig.value
}
flowinfo: processConfig.value,
};
editFlowCont(sendCont)
.then((data: any) => {
if (data.code == 0) {
@ -455,9 +458,9 @@ const saveEdit =()=>{
})
.finally(() => {
// emits("chanerequest");
getFlowVerList()
})
}
getFlowVerList();
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 14:34:45
@ -479,8 +482,8 @@ const saveNew = () => {
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo:processConfig.value
}
flowinfo: processConfig.value,
};
saveNewFlow(sendCont)
.then((data: any) => {
if (data.code == 0) {
@ -490,15 +493,17 @@ const saveNew = () => {
}
})
.finally(() => {
getFlowVerList()
})
}
getFlowVerList();
});
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 14:35:06
@ 功能: 监听流程节点变动
*/
watch(()=>nodeConfig,()=>{
watch(
() => nodeConfig,
() => {
// console.log("")
if (oneIsTrue) {
oneIsTrue = false;
@ -506,11 +511,11 @@ watch(()=>nodeConfig,()=>{
} else {
// emits('judgeFlowIsEdit', true)
}
},
{
deep: true
})
deep: true,
}
);
/**
@ 作者: 秦东
@ 时间: 2024-05-21 14:37:22
@ -519,13 +524,12 @@ watch(()=>nodeConfig,()=>{
const closwFormFlow = () => {
flowIsTrue.value = false;
// emits('judgeFlowIsEdit', false)
openOrCloseFormFlow(2)
}
openOrCloseFormFlow(2);
};
</script>
<template>
<el-main class="mainBox">
<div v-if="flowIsTrue" style="height: 100%;">
<div v-if="flowIsTrue" style="height: 100%">
<div class="flowVersionBox">
<div class="tabs_box">
<el-tabs v-if="isRead" v-model="activeTabs" @tab-change="clickFormTable">
@ -538,11 +542,23 @@ const closwFormFlow = () => {
</el-tabs>
</div>
<div class="flowButBox">
<el-button v-if="isRead && !openOfClise && closeOrOpenVersion" type="success" size="small" plain @click="setupState(1)">
<el-button
v-if="isRead && !openOfClise && closeOrOpenVersion"
type="success"
size="small"
plain
@click="setupState(1)"
>
<el-icon class="el-icon--left"><Delete /></el-icon>
启用
</el-button>
<el-button v-if="isRead && openOfClise && closeOrOpenVersion" type="warning" size="small" plain @click="setupState(2)">
<el-button
v-if="isRead && openOfClise && closeOrOpenVersion"
type="warning"
size="small"
plain
@click="setupState(2)"
>
<el-icon class="el-icon--left"><Delete /></el-icon>
禁用
</el-button>
@ -569,15 +585,25 @@ const closwFormFlow = () => {
</div>
</div>
<div>
<section class="dingflow-design" style="top: 80px">
<div class="zoom">
<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
<div
class="zoom-out"
:class="nowVal == 50 && 'disabled'"
@click="zoomSize(1)"
></div>
<span>{{ nowVal }}%</span>
<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
<div
class="zoom-in"
:class="nowVal == 300 && 'disabled'"
@click="zoomSize(2)"
></div>
</div>
<div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
<nodeWrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
<nodeWrap
v-model:nodeConfig="nodeConfig"
v-model:flowPermission="flowPermission"
/>
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">流程结束5</div>
@ -586,8 +612,20 @@ const closwFormFlow = () => {
</section>
<errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer v-model:form-data="state.formData" :form-key="appPageKey" :form-version="formVersion" :node-config="nodeConfig" />
<approverDrawer :directormaxlevel="directorMaxLeveling" :node-config="nodeConfig" :is-form-flow="isFormFlow" :customer-form-key="appPageKey" v-model:form-data="state.formData" :form-version="formVersion" />
<promoterDrawer
v-model:form-data="state.formData"
:form-key="appPageKey"
:form-version="formVersion"
:node-config="nodeConfig"
/>
<approverDrawer
:directormaxlevel="directorMaxLeveling"
:node-config="nodeConfig"
:is-form-flow="isFormFlow"
:customer-form-key="appPageKey"
v-model:form-data="state.formData"
:form-version="formVersion"
/>
<copyerDrawer />
<conditionDrawer :is-form-flow="isFormFlow" :customer-form-key="appPageKey" />
</div>
@ -595,21 +633,17 @@ const closwFormFlow = () => {
<div v-else class="flow_work_begin">
<el-result title="" sub-title="">
<template #icon>
流程可实现需要多人流转的业务场景<br>绘制流程图设定数据流转方式即可搭建线上工作流<br><br>
<el-image
class="imgBox"
:src="FlowImgSrc"
/>
流程可实现需要多人流转的业务场景<br />绘制流程图设定数据流转方式即可搭建线上工作流<br /><br />
<el-image class="imgBox" :src="FlowImgSrc" />
</template>
<template #extra>
<el-button type="primary" @click="createFormFlow">开启流程</el-button>
</template>
</el-result>
</div>
</el-main>
</template>
<style lang='scss' scoped>
<style lang="scss" scoped>
.mainBox {
padding: 0;
overflow-y: auto;
@ -621,7 +655,7 @@ const closwFormFlow = () => {
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
background-color: #ffffff;
.imgBox {
height: calc(100vh - 400px);
// height: 10%;
@ -632,7 +666,7 @@ const closwFormFlow = () => {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FFFFFF;
background-color: #ffffff;
.flowVerLeft {
max-width: 50%;
padding-left: 10px;

317
src/views/sysworkflow/lowcodepage/workFlow.vue

@ -3,61 +3,72 @@
@ 时间: 2024-03-11 14:46:00
@ 备注: 工作流
-->
<script lang='ts' setup>
import '@/styles/workflowcss/workflow.scss'
<script lang="ts" setup>
import "@/styles/workflowcss/workflow.scss";
import { useStore } from '@/store/workflow/index'
import { flowversion } from '@/api/workflowapi/types'
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion,judgeFormFlowIsOpen,openFormFlow } from '@/api/workflowapi/index'
import { useStore } from "@/store/workflow/index";
import { flowversion } from "@/api/workflowapi/types";
import {
initializeWorkFlow,
setWorkFlowData,
gainFlowVersionList,
saveFlowCont,
gainFlowInfo,
editFlowCont,
saveNewFlow,
switchFlowVersion,
judgeFormFlowIsOpen,
openFormFlow,
} from "@/api/workflowapi/index";
import FlowImgSrc from '@/assets/images/3.png'
import FlowImgSrc from "@/assets/images/3.png";
const props = defineProps({
formKey: {
type: String,
default:""
default: "",
},
formVersion: {
type: String,
default:""
default: "",
},
state: {
type: Object,
default() {
return {}
}
}
return {};
},
},
});
const emits = defineEmits<{
(e: 'update:state', val: formStruct): void
(e: 'update:formKey', val: string): void
(e: 'update:formVersion', val: string): void
(e: 'judgeFlowIsEdit', val: boolean): void
(e: 'runNextWindows', val: number): void
(e: 'closeFormPage'): void
}>()
(e: "update:state", val: formStruct): void;
(e: "update:formKey", val: string): void;
(e: "update:formVersion", val: string): void;
(e: "judgeFlowIsEdit", val: boolean): void;
(e: "runNextWindows", val: number): void;
(e: "closeFormPage"): void;
}>();
const state = computed({
get() {
return props.state
return props.state;
},
set(val: formStruct) {
emits('update:state', val)
}
emits("update:state", val);
},
});
const formKeyVal = computed({
get() {
return props.formKey
return props.formKey;
},
set(val: formStruct) {
emits('update:formKey', val)
}
emits("update:formKey", val);
},
});
let { setTableId, setIsTried } = useStore()
const flowIsTrue = ref(false)
const isRead = ref(false) //
const openOfClise = ref(false) //
let { setTableId, setIsTried } = useStore();
const flowIsTrue = ref(false);
const isRead = ref(false); //
const openOfClise = ref(false); //
const versionList = reactive<flowversion[]>([]); //
const enableVersion = ref<string>("1"); //
const enableFlow = ref<any>();
@ -82,27 +93,27 @@ let oneIsTrue = true;
const createFormFlow = () => {
if (formKeyVal.value == "") {
flowIsTrue.value = false;
ElMessageBox.alert('您还未设置表单!请先设置完表单后,在创建流程!','温馨提示!',{
confirmButtonText: '确定',
ElMessageBox.alert("您还未设置表单!请先设置完表单后,在创建流程!", "温馨提示!", {
confirmButtonText: "确定",
callback: (action: Action) => {
emits("runNextWindows", 1);
},
})
});
} else {
openOrCloseFormFlow(1)
getFlowVerList()
flowIsTrue.value = true
emits('judgeFlowIsEdit', true)
openOrCloseFormFlow(1);
getFlowVerList();
flowIsTrue.value = true;
emits("judgeFlowIsEdit", true);
}
emits('judgeFlowIsEdit', true)
emits("judgeFlowIsEdit", true);
// flowIsTrue.value = true
}
};
const openOrCloseFormFlow = (val: number) => {
openFormFlow({id:formKeyVal.value.toString(),status:val})
}
openFormFlow({ id: formKeyVal.value.toString(), status: val });
};
//
const initWorkFlowData = async () => {
let { data } = await initializeWorkFlow({name:state.value.formData.form.formName})
let { data } = await initializeWorkFlow({ name: state.value.formData.form.formName });
// console.log("data-=------>",data)
processConfig.value = data;
let {
@ -112,7 +123,7 @@ const initWorkFlowData = async() => {
workFlowDef: workName,
tableId,
} = data;
processConfig.value.workFlowDef.formKey = formKeyVal.value
processConfig.value.workFlowDef.formKey = formKeyVal.value;
nodeConfig.value = nodes;
flowPermission.value = flowPermissiones;
directorMaxLeveling = levels;
@ -125,7 +136,7 @@ const initWorkFlowData = async() => {
// console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig)
}
};
//
const zoomSize = (type: number) => {
if (type == 1) {
@ -147,40 +158,37 @@ const getFlowVerList = ()=>{
.then(({ data }) => {
// console.log("-->",data)
// versionList = data;
versionList.splice(0,versionList.length)
versionList.splice(0, versionList.length);
if (data) {
if (data.length > 0) {
data.forEach((item: any) => {
if (item.state == 1) {
activeTabs.value = item.id
enableFlow.value = item
enableVersion.value = item.id
activeTabs.value = item.id;
enableFlow.value = item;
enableVersion.value = item.id;
}
versionList.push({
id: item.id,
key: item.key,
state: item.state,
version:item.version
})
})
version: item.version,
});
});
if (versionList.length > 1) {
closeOrOpenVersion.value = true
closeOrOpenVersion.value = true;
} else {
closeOrOpenVersion.value = false
closeOrOpenVersion.value = false;
}
// console.log("--1-1-->",enableFlow.value);
if (enableFlow.value == "" || enableFlow.value == undefined) {
enableFlow.value = versionList[0]
enableFlow.value = versionList[0];
// activeTabs.value = versionList[0].id
enableVersion.value = versionList[0].id
enableVersion.value = versionList[0].id;
}
isRead.value = true
isRead.value = true;
} else {
isRead.value = false
isRead.value = false;
}
}
// console.log("---1-->",activeTabs.value);
@ -195,28 +203,26 @@ const getFlowVerList = ()=>{
clearCanvas(1);
}
clickOpenOrClose();
})
}
});
};
//
const clickOpenOrClose = () => {
// console.log("",enableFlow,activeTabs.value)
if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true
openOfClise.value = true;
} else {
openOfClise.value = false
openOfClise.value = false;
}
// console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
}
};
//
const gainFlowCont = () => {
gainFlowInfo({id:enableVersion.value.toString()})
.then((data:any)=>{
gainFlowInfo({ id: enableVersion.value.toString() }).then((data: any) => {
// console.log("-1->",data,enableFlow.value)
if (data.code == 0) {
processConfig.value = data.data;
processConfig.value.workFlowDef.formKey = formKeyVal.value
processConfig.value.workFlowDef.formKey = formKeyVal.value;
nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel;
@ -233,25 +239,24 @@ const gainFlowCont = () =>{
clearCanvas(1);
}
// initWorkFlowData();
})
}
});
};
//
const clearCanvas = (isOk?: any) => {
if (isOk == 1) {
initWorkFlowData()
initWorkFlowData();
setIsTried(false);
tipList.value = []
tipList.value = [];
} else {
ElMessageBox.confirm('确定要清空画布?')
.then(() => {
initWorkFlowData()
ElMessageBox.confirm("确定要清空画布?").then(() => {
initWorkFlowData();
setIsTried(false);
tipList.value = []
})
tipList.value = [];
});
}
enableFlow.value = ""
}
enableFlow.value = "";
};
//
const reErr = ({ childNode }: any) => {
if (childNode) {
@ -282,19 +287,19 @@ const reErr = ({ childNode }:any) => {
//
const clickFormTable = (val: any) => {
// console.log("",val,activeTabs.value)
enableVersion.value = val
enableVersion.value = val;
gainFlowCont();
clickOpenOrClose();
// getTableFieldList(versionIndex.value,val)
}
};
//
const setupState = (val: number) => {
let sendCont = {
id: enableVersion.value.toString(),
status:val
}
status: val,
};
if (val == 1) {
activeTabs.value = enableVersion.value
activeTabs.value = enableVersion.value;
}
switchFlowVersion(sendCont)
.then((data: any) => {
@ -302,19 +307,18 @@ const setupState = (val:number) =>{
// activeTabs.value = enableVersion.value
// enableFlow.value.id = enableVersion.value
if (versionList.length > 0) {
versionList.forEach(item=>{
versionList.forEach((item) => {
if (item.id == enableVersion.value) {
enableFlow.value = item
enableFlow.value = item;
}
})
});
}
})
.finally(() => {
clickOpenOrClose();
})
});
// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
}
};
//
const saveSet = async () => {
setIsTried(true);
@ -334,15 +338,15 @@ const saveSet = async () => {
.then((data: any) => {
if (data.code == 0) {
ElMessage.success("设置成功");
emits('judgeFlowIsEdit', false)
emits("judgeFlowIsEdit", false);
emits("runNextWindows", 3);
// clearCanvas(1);
}
})
.finally(() => {
// emits("chanerequest");
getFlowVerList()
})
getFlowVerList();
});
// let res = await setWorkFlowData(processConfig.value);
// if (res.code == 200) {
// ElMessage.success("")
@ -350,7 +354,6 @@ const saveSet = async () => {
// window.location.href = "";
// }, 200);
// }
};
//
const saveEdit = () => {
@ -364,28 +367,28 @@ const saveEdit =()=>{
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",flowPermission);
console.log("processConfig------------------->", processConfig.value);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo:processConfig.value
}
flowinfo: processConfig.value,
};
editFlowCont(sendCont)
.then((data: any) => {
if (data.code == 0) {
ElMessage.success("设置成功");
// emits("update:openDrawer", false);
// clearCanvas(1);
emits('judgeFlowIsEdit', false)
emits("judgeFlowIsEdit", false);
emits("runNextWindows", 3);
}
})
.finally(() => {
// emits("chanerequest");
getFlowVerList()
})
}
getFlowVerList();
});
};
//
const saveNew = () => {
setIsTried(true);
@ -403,33 +406,35 @@ const saveNew = () => {
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo:processConfig.value
}
flowinfo: processConfig.value,
};
saveNewFlow(sendCont)
.then((data: any) => {
if (data.code == 0) {
ElMessage.success("设置成功");
emits('judgeFlowIsEdit', false)
emits("judgeFlowIsEdit", false);
emits("runNextWindows", 3);
}
})
.finally(() => {
getFlowVerList()
})
}
watch(()=>nodeConfig,()=>{
getFlowVerList();
});
};
watch(
() => nodeConfig,
() => {
// console.log("")
if (oneIsTrue) {
oneIsTrue = false;
emits('judgeFlowIsEdit', false)
emits("judgeFlowIsEdit", false);
} else {
emits('judgeFlowIsEdit', true)
emits("judgeFlowIsEdit", true);
}
},
{
deep: true
})
deep: true,
}
);
/**
@ 作者: 秦东
@ 时间: 2024-03-12 15:49:35
@ -437,32 +442,31 @@ watch(()=>nodeConfig,()=>{
*/
const closwFormFlow = () => {
flowIsTrue.value = false;
emits('judgeFlowIsEdit', false)
openOrCloseFormFlow(2)
}
emits("judgeFlowIsEdit", false);
openOrCloseFormFlow(2);
};
onMounted(() => {
// console.log("",formKeyVal.value)
if (formKeyVal.value == "") {
flowIsTrue.value = false;
} else {
judgeFormFlowIsOpen({id:formKeyVal.value.toString()})
.then((data)=>{
judgeFormFlowIsOpen({ id: formKeyVal.value.toString() }).then((data) => {
// console.log("",data)
if (data.data.isOpen == 1) {
flowIsTrue.value = true;
emits('judgeFlowIsEdit', false)
getFlowVerList()
emits("judgeFlowIsEdit", false);
getFlowVerList();
} else {
flowIsTrue.value = false;
emits('judgeFlowIsEdit', false)
emits("judgeFlowIsEdit", false);
}
})
});
}
})
});
</script>
<template>
<div class="design_flow_work">
<el-row v-if="flowIsTrue" style="height: 100%;">
<el-row v-if="flowIsTrue" style="height: 100%">
<el-col :span="24">
<table class="table_box">
<tr>
@ -479,13 +483,24 @@ onMounted(()=>{
</el-tabs>
</div>
<div class="but_box">
<el-button v-if="isRead && !openOfClise && closeOrOpenVersion" type="success" size="small" plain @click="setupState(1)">
<el-button
v-if="isRead && !openOfClise && closeOrOpenVersion"
type="success"
size="small"
plain
@click="setupState(1)"
>
<el-icon class="el-icon--left"><Delete /></el-icon>
启用
</el-button>
<el-button v-if="isRead && openOfClise && closeOrOpenVersion" type="warning" size="small" plain @click="setupState(2)">
<el-button
v-if="isRead && openOfClise && closeOrOpenVersion"
type="warning"
size="small"
plain
@click="setupState(2)"
>
<el-icon class="el-icon--left"><Delete /></el-icon>
禁用
</el-button>
@ -515,16 +530,25 @@ onMounted(()=>{
</table>
</el-col>
<el-col :span="24">
<section class="dingflow-design" style="top: 40px">
<div class="zoom">
<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
<div
class="zoom-out"
:class="nowVal == 50 && 'disabled'"
@click="zoomSize(1)"
></div>
<span>{{ nowVal }}%</span>
<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
<div
class="zoom-in"
:class="nowVal == 300 && 'disabled'"
@click="zoomSize(2)"
></div>
</div>
<div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
<nodeWrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
<nodeWrap
v-model:nodeConfig="nodeConfig"
v-model:flowPermission="flowPermission"
/>
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">流程结束2</div>
@ -532,8 +556,19 @@ onMounted(()=>{
</div>
</section>
<errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer v-model:form-data="state.formData" :form-key="formKeyVal" :form-version="formVersion" />
<approverDrawer :directormaxlevel="directorMaxLeveling" :node-config="nodeConfig" :is-form-flow="isFormFlow" :customer-form-key="formKeyVal" v-model:form-data="state.formData" :form-version="formVersion" />
<promoterDrawer
v-model:form-data="state.formData"
:form-key="formKeyVal"
:form-version="formVersion"
/>
<approverDrawer
:directormaxlevel="directorMaxLeveling"
:node-config="nodeConfig"
:is-form-flow="isFormFlow"
:customer-form-key="formKeyVal"
v-model:form-data="state.formData"
:form-version="formVersion"
/>
<copyerDrawer />
<conditionDrawer :is-form-flow="isFormFlow" :customer-form-key="formKeyVal" />
</el-col>
@ -541,21 +576,17 @@ onMounted(()=>{
<div v-else class="flow_work_begin">
<el-result title="" sub-title="">
<template #icon>
流程可实现需要多人流转的业务场景<br>绘制流程图设定数据流转方式即可搭建线上工作流<br><br>
<el-image
class="imgBox"
:src="FlowImgSrc"
/>
流程可实现需要多人流转的业务场景<br />绘制流程图设定数据流转方式即可搭建线上工作流<br /><br />
<el-image class="imgBox" :src="FlowImgSrc" />
</template>
<template #extra>
<el-button type="primary" @click="createFormFlow">开启流程</el-button>
</template>
</el-result>
</div>
</div>
</template>
<style lang='scss' scoped>
<style lang="scss" scoped>
.design_flow_work {
height: calc(100vh - 40px);
width: inherit;
@ -587,7 +618,7 @@ onMounted(()=>{
}
.tabs_box {
max-width: 60%;
min-width:30%
min-width: 30%;
}
.but_box {
max-width: 50%;
@ -620,7 +651,6 @@ onMounted(()=>{
width: inherit;
}
.flow_version {
}
.flow_version > .el-tabs__content {
padding: 0px;
@ -634,7 +664,6 @@ onMounted(()=>{
}
.right_kongx {
margin-right:50px
margin-right: 50px;
}
</style>

Loading…
Cancel
Save