herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

矩阵

han_v1
herenshan112 7 months ago
parent
deda8b6601
commit
2b2a27ece0
6 changed files with 1930 additions and 1751 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/matrixapi/type.ts
  2. 275
      src/components/workflow/dialog/matrix.vue
  3. 74
      src/components/workflow/nodeWrap.vue
  4. 400
      src/views/sysworkflow/flow/flowDrawingBoard.vue
  5. 500
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
  6. 517
      src/views/sysworkflow/lowcodepage/workFlow.vue

9
src/api/matrixapi/type.ts
View File

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

275
src/components/workflow/dialog/matrix.vue
View File

@ -3,31 +3,37 @@
@ 时间: 2023-10-28 13:56:34 @ 时间: 2023-10-28 13:56:34
@ 备注: 矩阵选项 @ 备注: 矩阵选项
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import { searchMatrix,matrixCont,martixFieldStruct,matrixInfo } from '@/api/matrixapi/type' import {
import { getMatrixList,getMatrixField } from '@/api/matrixapi/index' searchMatrix,
matrixCont,
martixFieldStruct,
matrixInfo,
martOpter,
} from "@/api/matrixapi/type";
import { getMatrixList, getMatrixField } from "@/api/matrixapi/index";
const props = defineProps({ const props = defineProps({
isshow:{ isshow: {
type:Boolean, type: Boolean,
default:false default: false,
}, },
data: { data: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
"matrixid":0, matrixid: 0,
"matrixName":"", matrixName: "",
"factorid":0, factorid: 0,
"factorName":"", factorName: "",
"outcomeid":0, outcomeid: 0,
"outcomeName":"", outcomeName: "",
} list: [],
} };
}, },
}) },
const emits = defineEmits(["update:isshow","change"]); //父级元素 });
const emits = defineEmits(["update:isshow", "change"]); //父级元素
const isShow = computed({ const isShow = computed({
get: () => props.isshow, get: () => props.isshow,
set: (val) => { set: (val) => {
@ -38,112 +44,168 @@ const loading = ref(true);
const loadingVal = ref(true); const loadingVal = ref(true);
const matrixContList = ref<matrixCont[]>(); const matrixContList = ref<matrixCont[]>();
const matrixIsClick = reactive<matrixInfo>({ const matrixIsClick = reactive<matrixInfo>({
matrixid:0, matrixid: 0,
factorid:0, factorid: 0,
outcomeid:0, outcomeid: 0,
matrixName:"", matrixName: "",
factorName:"", factorName: "",
outcomeName:"", outcomeName: "",
list: [],
}); });
//执行监听 //执行监听
watch(() => props.isshow,(val:any) => { watch(
if(val){ () => props.isshow,
(val: any) => {
if (val) {
// console.log("执行监听") // console.log("执行监听")
searchMatrixList(); searchMatrixList();
matrixIsClick.matrixid = props.data.matrixid; matrixIsClick.matrixid = props.data.matrixid;
matrixIsClick.matrixName = props.data.matrixName; matrixIsClick.matrixName = props.data.matrixName;
matrixIsClick.factorid = props.data.factorid; matrixIsClick.factorid = props.data.factorid;
matrixIsClick.factorName = props.data.factorName; matrixIsClick.factorName = props.data.factorName;
matrixIsClick.outcomeid = props.data.outcomeid; matrixIsClick.outcomeid = props.data.outcomeid;
matrixIsClick.outcomeName = props.data.outcomeName; 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>({ const searchArchiveQuery = reactive<searchMatrix>({
page:1, page: 1,
pagesize:10 pagesize: 10,
}) });
const total = ref(0); //总记录数 const total = ref(0); //总记录数
const farstId = ref<number>(0) const farstId = ref<number>(0);
/** /**
* 获取矩阵列表 * 获取矩阵列表
*/ */
function searchMatrixList(){ function searchMatrixList() {
loading.value = true loading.value = true;
// console.log("值改变---->",matrixIsClick) // console.log("值改变---->",matrixIsClick)
getMatrixList(searchArchiveQuery) getMatrixList(searchArchiveQuery)
.then(({ data })=>{ .then(({ data }) => {
// console.log("获取矩阵列表->",data) // console.log("获取矩阵列表->",data)
matrixContList.value = data.list matrixContList.value = data.list;
total.value = data.total total.value = data.total;
if(data.list.length > 0){ 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.matrixid = data.list[0].id*1
// matrixIsClick.matrixName = data.list[0].name // 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 factorList = ref<martixFieldStruct[]>();
const outcomeList = ref<martixFieldStruct[]>() const outcomeList = ref<martixFieldStruct[]>();
//获取矩阵相关字段 //获取矩阵相关字段
const gainMatrixNeed = (val:any) =>{ const gainMatrixNeed = (val: any) => {
loadingVal.value = true loadingVal.value = true;
getMatrixField({id:val*1}) getMatrixField({ id: val * 1 })
.then(({data})=>{ .then(({ data }) => {
// console.log("监听数据---->",data) console.log("监听数据---->", data);
factorList.value = data.factor factorList.value = data.factor;
outcomeList.value = data.outcome outcomeList.value = data.outcome;
if(data.factor.length>0){ if (data.factor.length > 0) {
// matrixIsClick.factorid = data.factor[0].id*1 // matrixIsClick.factorid = data.factor[0].id*1
// matrixIsClick.factorName = data.factor[0].name // matrixIsClick.factorName = data.factor[0].name
} }
if(data.outcome.length>0){ if (data.outcome.length > 0) {
// matrixIsClick.outcomeid = data.outcome[0].id*1 // matrixIsClick.outcomeid = data.outcome[0].id*1
// matrixIsClick.outcomeName = data.outcome[0].name // matrixIsClick.outcomeName = data.outcome[0].name
} }
}) })
.finally(()=>{ .finally(() => {
loadingVal.value = false loadingVal.value = false;
}) });
} };
//选择矩阵 //选择矩阵
const pickmatirval = (val:matrixCont) =>{ const pickmatirval = (val: matrixCont) => {
matrixIsClick.matrixid = val.id*1 matrixIsClick.matrixid = val.id * 1;
matrixIsClick.matrixName = val.name matrixIsClick.matrixName = val.name;
gainMatrixNeed(val.id*1); gainMatrixNeed(val.id * 1);
} };
//选择矩阵值 //选择矩阵值
const pickval = (val:martixFieldStruct) =>{ const pickval = (val: martixFieldStruct) => {
matrixIsClick.outcomeid = val.id*1 matrixIsClick.outcomeid = val.id * 1;
matrixIsClick.outcomeName = val.name 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) =>{ const pickSelect = (val: any) => {
factorList.value.forEach((item:any)=>{ factorList.value.forEach((item: any) => {
if(item.id==val){ if (item.id == val) {
matrixIsClick.factorid = item.id*1 matrixIsClick.factorid = item.id * 1;
matrixIsClick.factorName = item.name matrixIsClick.factorName = item.name;
} }
}) });
} };
watch(matrixIsClick,(val:any) => { watch(matrixIsClick, (val: any) => {
// console.log("值改变---->",val) // console.log("值改变---->",val)
emits("change", val); emits("change", val);
}) });
onMounted(()=>{ onMounted(() => {
matrixIsClick.matrixid = props.data.matrixid; matrixIsClick.matrixid = props.data.matrixid;
matrixIsClick.matrixName = props.data.matrixName; matrixIsClick.matrixName = props.data.matrixName;
matrixIsClick.factorid = props.data.factorid; matrixIsClick.factorid = props.data.factorid;
matrixIsClick.factorName = props.data.factorName; matrixIsClick.factorName = props.data.factorName;
matrixIsClick.outcomeid = props.data.outcomeid; matrixIsClick.outcomeid = props.data.outcomeid;
matrixIsClick.outcomeName = props.data.outcomeName; matrixIsClick.outcomeName = props.data.outcomeName;
matrixIsClick.list = props.data.list ? props.data.list : [];
searchMatrixList(); 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> </script>
<template> <template>
<div> <div>
@ -161,27 +223,41 @@ onMounted(()=>{
<el-row v-loading="loading"> <el-row v-loading="loading">
<el-col :span="24" class="materBody"> <el-col :span="24" class="materBody">
<ul> <ul>
<li v-for="item in matrixContList" :key="item.id" :class="matrixIsClick.matrixid==item.id?'active':''" @click="pickmatirval(item)"> <li
<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{item.orgname}}</el-text> 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> </li>
</ul> </ul>
</el-col> </el-col>
<el-col :span="24"> <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-col>
</el-row> </el-row>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="矩阵选项" width="50%"> <el-descriptions-item label="矩阵选项" width="50%">
<el-row v-loading="loadingVal"> <el-row v-loading="loadingVal">
<el-col :span="24"> <el-col :span="24">
<el-select v-model="matrixIsClick.factorid" filterable placeholder="Select" style="width:100%" @change="pickSelect"> <el-select
<el-option v-model="matrixIsClick.factorid"
:key="0" filterable
label="请选择" placeholder="Select"
:value="0" style="width: 100%"
/> @change="pickSelect"
>
<el-option :key="0" label="请选择" :value="0" />
<el-option <el-option
v-for="item in factorList" v-for="item in factorList"
:key="item.id" :key="item.id"
@ -192,32 +268,37 @@ onMounted(()=>{
</el-col> </el-col>
<el-col :span="24" class="materBody"> <el-col :span="24" class="materBody">
<ul> <ul>
<li v-for="item in outcomeList" :key="item.id" :class="matrixIsClick.outcomeid==item.id?'active':''" @click="pickval(item)"> <li
<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{}}{{item.pinyin}}</el-text> 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> </li>
</ul> </ul>
</el-col> </el-col>
</el-row> </el-row>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.materBody{ .materBody {
padding:5px 0 5px 0; padding: 5px 0 5px 0;
li{ li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor:pointer; cursor: pointer;
} }
li.active span { li.active span {
color:#409EFF; color: #409eff;
} }
} }
.suojin{ .suojin {
padding: 0px 20px; padding: 0px 20px;
} }
</style> </style>

74
src/components/workflow/nodeWrap.vue
View File

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

400
src/views/sysworkflow/flow/flowDrawingBoard.vue
View File

@ -3,14 +3,22 @@
@ 时间: 2023-10-18 09:02:53 @ 时间: 2023-10-18 09:02:53
@ 备注: 工作流画板 @ 备注: 工作流画板
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import '@/styles/workflowcss/workflow.scss' import "@/styles/workflowcss/workflow.scss";
import { useStore } from '@/store/workflow/index' import { useStore } from "@/store/workflow/index";
import { flowversion } from '@/api/workflowapi/types' import { flowversion } from "@/api/workflowapi/types";
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion } from '@/api/workflowapi/index'
import {
initializeWorkFlow,
setWorkFlowData,
gainFlowVersionList,
saveFlowCont,
gainFlowInfo,
editFlowCont,
saveNewFlow,
switchFlowVersion,
} from "@/api/workflowapi/index";
//引入页面 //引入页面
import errorDialog from "@/components/workflow/dialog/errorDialog.vue"; import errorDialog from "@/components/workflow/dialog/errorDialog.vue";
@ -20,32 +28,32 @@ import copyerDrawer from "@/components/workflow/drwer/copyerDrawer.vue";
import conditionDrawer from "@/components/workflow/drwer/conditionDrawer.vue"; import conditionDrawer from "@/components/workflow/drwer/conditionDrawer.vue";
const props = defineProps({ const props = defineProps({
openDrawer:{ openDrawer: {
type:Boolean, type: Boolean,
default:true default: true,
}, },
drawerWidht:{ drawerWidht: {
type:Number, type: Number,
default:100 default: 100,
}, },
isFormFlow:{ isFormFlow: {
type:Boolean, type: Boolean,
default:true default: true,
}, },
customerFormKey:{ customerFormKey: {
type:String, type: String,
default:"" default: "",
}, },
customerFormName:{ customerFormName: {
type:String, type: String,
default:"" default: "",
}, },
flowKey:{ flowKey: {
type:String, type: String,
default:"" default: "",
} },
}) });
const emits = defineEmits(["update:openDrawer","chanerequest"]); const emits = defineEmits(["update:openDrawer", "chanerequest"]);
const isShow = computed({ const isShow = computed({
get: () => props.openDrawer, get: () => props.openDrawer,
set: (val) => { set: (val) => {
@ -53,7 +61,7 @@ const isShow = computed({
}, },
}); });
let { setTableId, setIsTried } = useStore() let { setTableId, setIsTried } = useStore();
let tipList = ref<any>([]); let tipList = ref<any>([]);
let tipVisible = ref(false); let tipVisible = ref(false);
@ -63,76 +71,72 @@ let nodeConfig = ref({});
let workFlowDef = ref({}); let workFlowDef = ref({});
let flowPermission = ref([]); let flowPermission = ref([]);
let directorMaxLeveling = ref<number>(0); let directorMaxLeveling = ref<number>(0);
const shenPiTitle = ref<string>("") const shenPiTitle = ref<string>("");
const activeTabs = ref<string>(""); //当前版本 const activeTabs = ref<string>(""); //当前版本
const versionList = reactive<flowversion[]>([]); //工作流版本列表 const versionList = reactive<flowversion[]>([]); //工作流版本列表
const enableFlow = ref<any>(); const enableFlow = ref<any>();
const isRead = ref(false) const isRead = ref(false);
const enableVersion = ref<string>("1"); const enableVersion = ref<string>("1");
//获取工作流版本列表 //获取工作流版本列表
const getFlowVerList = ()=>{ const getFlowVerList = () => {
gainFlowVersionList({id:props.customerFormKey.toString()}) gainFlowVersionList({ id: props.customerFormKey.toString() })
.then(({data})=>{ .then(({ data }) => {
// console.log("获取工作流版本列表-->",data) // console.log("获取工作流版本列表-->",data)
// versionList = data; // versionList = data;
versionList.splice(0,versionList.length) versionList.splice(0, versionList.length);
if(data){ if (data) {
if(data.length>0){ if (data.length > 0) {
data.forEach((item: any) => {
data.forEach((item:any)=>{ if (item.state == 1) {
activeTabs.value = item.id;
if(item.state == 1){ enableFlow.value = item;
activeTabs.value = item.id enableVersion.value = item.id;
enableFlow.value = item
enableVersion.value = item.id
} }
versionList.push({ versionList.push({
id:item.id, id: item.id,
key:item.key, key: item.key,
state:item.state, state: item.state,
version:item.version version: item.version,
}) });
}) });
isRead.value = true
}else{
isRead.value = false
isRead.value = true;
} else {
isRead.value = false;
} }
} }
// console.log("获取工作流版本列表---1-->",activeTabs.value); // console.log("获取工作流版本列表---1-->",activeTabs.value);
// console.log("获取工作流版本列表---2-->",enableFlow.value); // console.log("获取工作流版本列表---2-->",enableFlow.value);
// console.log("获取工作流版本列表---3-->",enableVersion.value); // console.log("获取工作流版本列表---3-->",enableVersion.value);
}) })
.finally(()=>{ .finally(() => {
if(isRead.value == true){ if (isRead.value == true) {
gainFlowCont(); gainFlowCont();
}else{ } else {
clearCanvas(1); clearCanvas(1);
} }
clickOpenOrClose(); clickOpenOrClose();
});
}) };
}
//首次加载页面 //首次加载页面
onMounted(async ()=>{ onMounted(async () => {
// getFlowVerList() // getFlowVerList()
}) });
//初始化工作流数据 //初始化工作流数据
const initWorkFlowData = async() => { const initWorkFlowData = async () => {
let { data } = await initializeWorkFlow({name:props.customerFormName}) let { data } = await initializeWorkFlow({ name: props.customerFormName });
// console.log("data-=------>",data) console.log("data-=------>", data);
processConfig.value = data; processConfig.value = data;
let { let {
nodeConfig:nodes, nodeConfig: nodes,
flowPermission:flowPermissiones, flowPermission: flowPermissiones,
directorMaxLevel:levels, directorMaxLevel: levels,
workFlowDef:workName, workFlowDef: workName,
tableId, tableId,
} = data; } = data;
processConfig.value.workFlowDef.formKey = props.customerFormKey processConfig.value.workFlowDef.formKey = props.customerFormKey;
nodeConfig.value = nodes; nodeConfig.value = nodes;
flowPermission.value = flowPermissiones; flowPermission.value = flowPermissiones;
directorMaxLeveling = levels; directorMaxLeveling = levels;
@ -144,9 +148,9 @@ const initWorkFlowData = async() => {
// console.log("max--3->",nodeConfig) // console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel) // console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig) // console.log("max--5->",processConfig)
} };
//错误提示 //错误提示
const reErr = ({ childNode }:any) => { const reErr = ({ childNode }: any) => {
if (childNode) { if (childNode) {
let { type, error, nodeName, conditionNodes } = childNode; let { type, error, nodeName, conditionNodes } = childNode;
if (type == 1 || type == 2 || type == 3) { if (type == 1 || type == 2 || type == 3) {
@ -184,21 +188,20 @@ const saveSet = async () => {
} }
processConfig.value.flowPermission = flowPermission.value; processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
// console.log("processConfig",processConfig.value); console.log("processConfig", processConfig.value);
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("nodeConfig",nodeConfig.value); // console.log("nodeConfig", nodeConfig.value);
saveFlowCont(processConfig.value) saveFlowCont(processConfig.value)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
emits("update:openDrawer", false); emits("update:openDrawer", false);
clearCanvas(1); clearCanvas(1);
} }
}) })
.finally(()=>{ .finally(() => {
emits("chanerequest"); emits("chanerequest");
});
})
// let res = await setWorkFlowData(processConfig.value); // let res = await setWorkFlowData(processConfig.value);
// if (res.code == 200) { // if (res.code == 200) {
// ElMessage.success("设置成功") // ElMessage.success("设置成功")
@ -206,10 +209,9 @@ const saveSet = async () => {
// window.location.href = ""; // window.location.href = "";
// }, 200); // }, 200);
// } // }
}; };
//缩放画布 //缩放画布
const zoomSize = (type:number) => { const zoomSize = (type: number) => {
if (type == 1) { if (type == 1) {
if (nowVal.value == 50) { if (nowVal.value == 50) {
return; return;
@ -223,51 +225,52 @@ const zoomSize = (type:number) => {
} }
}; };
//清空画布 //清空画布
const clearCanvas = (isOk?:any) =>{ const clearCanvas = (isOk?: any) => {
if(isOk==1){ if (isOk == 1) {
initWorkFlowData() initWorkFlowData();
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
}else{ } else {
ElMessageBox.confirm('确定要清空画布?') ElMessageBox.confirm("确定要清空画布?").then(() => {
.then(() => { initWorkFlowData();
initWorkFlowData()
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
}) });
} }
enableFlow.value = "" enableFlow.value = "";
} };
watch(()=>props.openDrawer,(val)=>{ watch(
() => props.openDrawer,
(val) => {
// console.log("1111",props.customerFormKey,val) // console.log("1111",props.customerFormKey,val)
if(val){ if (val) {
if(props.customerFormKey != ""){ if (props.customerFormKey != "") {
getFlowVerList() getFlowVerList();
}else{ } else {
initWorkFlowData() initWorkFlowData();
} }
shenPiTitle.value = props.customerFormName;
shenPiTitle.value = props.customerFormName } else {
}else{
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
enableFlow.value = "" enableFlow.value = "";
isRead.value=false isRead.value = false;
} }
}) }
);
//选择工作流版本 //选择工作流版本
const clickFormTable = (val:any) =>{ const clickFormTable = (val: any) => {
// console.log("切换表单",val,activeTabs.value) // console.log("切换表单",val,activeTabs.value)
enableVersion.value = val enableVersion.value = val;
gainFlowCont(); gainFlowCont();
clickOpenOrClose(); clickOpenOrClose();
// getTableFieldList(versionIndex.value,val) // getTableFieldList(versionIndex.value,val)
} };
//编辑 //编辑
const saveEdit =()=>{ const saveEdit = () => {
setIsTried(true); setIsTried(true);
tipList.value = []; tipList.value = [];
@ -278,26 +281,25 @@ const saveEdit =()=>{
} }
processConfig.value.flowPermission = flowPermission.value; processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
// console.log("processConfig",flowPermission); console.log("processConfig", processConfig.value);
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value); // console.log("activeTabs",enableFlow.value);
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
flowinfo:processConfig.value flowinfo: processConfig.value,
} };
editFlowCont(sendCont) editFlowCont(sendCont)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
emits("update:openDrawer", false); emits("update:openDrawer", false);
clearCanvas(1); clearCanvas(1);
} }
}) })
.finally(()=>{ .finally(() => {
emits("chanerequest"); emits("chanerequest");
});
}) };
}
//另存为新版 //另存为新版
const saveNew = () => { const saveNew = () => {
setIsTried(true); setIsTried(true);
@ -314,30 +316,28 @@ const saveNew = () => {
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value); // console.log("activeTabs",enableFlow.value);
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
flowinfo:processConfig.value flowinfo: processConfig.value,
} };
saveNewFlow(sendCont) saveNewFlow(sendCont)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
emits("update:openDrawer", false); emits("update:openDrawer", false);
clearCanvas(1); clearCanvas(1);
} }
}) })
.finally(()=>{ .finally(() => {
emits("chanerequest"); emits("chanerequest");
});
}) };
}
//获取流程内容 //获取流程内容
const gainFlowCont = () =>{ const gainFlowCont = () => {
gainFlowInfo({id:enableVersion.value.toString()}) gainFlowInfo({ id: enableVersion.value.toString() }).then((data: any) => {
.then((data:any)=>{ console.log("获取工作流版本列表-1->", data, enableFlow.value);
// console.log("获取工作流版本列表-1->",data,enableFlow.value) if (data.code == 0) {
if(data.code == 0){
processConfig.value = data.data; processConfig.value = data.data;
processConfig.value.workFlowDef.formKey = props.customerFormKey processConfig.value.workFlowDef.formKey = props.customerFormKey;
nodeConfig.value = data.data.nodeConfig; nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission; flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel; directorMaxLeveling = data.data.directorMaxLevel;
@ -349,54 +349,54 @@ const gainFlowCont = () =>{
// console.log("max--3->",nodeConfig) // console.log("max--3->",nodeConfig)
// console.log("max--4->",data.data.directorMaxLevel) // console.log("max--4->",data.data.directorMaxLevel)
// console.log("max--5->",processConfig.value) // console.log("max--5->",processConfig.value)
}else{ } else {
clearCanvas(1); clearCanvas(1);
} }
// initWorkFlowData(); // initWorkFlowData();
}) });
} };
//启用禁用 //启用禁用
const setupState = (val:number) =>{ const setupState = (val: number) => {
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
status:val status: val,
} };
switchFlowVersion(sendCont) switchFlowVersion(sendCont)
.then((data:any)=>{ .then((data: any) => {
ElMessage.success(data.msg); ElMessage.success(data.msg);
// activeTabs.value = enableVersion.value // activeTabs.value = enableVersion.value
// enableFlow.value.id = enableVersion.value // enableFlow.value.id = enableVersion.value
if(versionList.length > 0){ if (versionList.length > 0) {
versionList.forEach(item=>{ versionList.forEach((item) => {
if(item.id == enableVersion.value){ if (item.id == enableVersion.value) {
enableFlow.value = item enableFlow.value = item;
} }
}) });
} }
}) })
.finally(()=>{ .finally(() => {
clickOpenOrClose(); clickOpenOrClose();
}) });
// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs) // console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
} };
const openOfClise = ref(false) const openOfClise = ref(false);
const clickOpenOrClose = () => { const clickOpenOrClose = () => {
if(enableFlow.value.id==activeTabs.value){ if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true openOfClise.value = true;
}else{ } else {
openOfClise.value = false openOfClise.value = false;
} }
// console.log("openOfClise",openOfClise.value) // console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value) // console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
} };
</script> </script>
<template> <template>
<el-drawer v-model="isShow" :size="props.drawerWidht" :show-close="false"> <el-drawer v-model="isShow" :size="props.drawerWidht" :show-close="false">
<template #header="{ close, titleId, titleClass }"> <template #header="{ close, titleId, titleClass }">
<div style="display: flex; width:50%"> <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> </div>
<el-button type="warning" @click="clearCanvas"> <el-button type="warning" @click="clearCanvas">
<el-icon class="el-icon--left"><Delete /></el-icon> <el-icon class="el-icon--left"><Delete /></el-icon>
@ -407,7 +407,7 @@ const clickOpenOrClose = () => {
发布 发布
</el-button> </el-button>
<el-button v-if="isRead" type="primary" @click="saveEdit"> <el-button v-if="isRead" type="primary" @click="saveEdit">
<el-icon class="fa fa-save" style="margin-right:5px"></el-icon> <el-icon class="fa fa-save" style="margin-right: 5px"></el-icon>
保存 保存
</el-button> </el-button>
<el-button v-if="isRead" color="#626aef" @click="saveNew"> <el-button v-if="isRead" color="#626aef" @click="saveNew">
@ -424,7 +424,12 @@ const clickOpenOrClose = () => {
<el-row v-if="isRead" :gutter="20"> <el-row v-if="isRead" :gutter="20">
<el-col :span="22"> <el-col :span="22">
<el-tabs v-model="activeTabs" class="flow_version" @tab-change="clickFormTable"> <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> <template #label>
<span class="custom-tabs-label"> <span class="custom-tabs-label">
<span>V{{ item.version }}</span> <span>V{{ item.version }}</span>
@ -433,21 +438,46 @@ const clickOpenOrClose = () => {
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
<el-col :span="1" style="text-align: center; display: flex; margin: auto;"> <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
<el-button v-if="!openOfClise" type="success" size="small" round @click="setupState(1)">启用</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-col>
</el-row> </el-row>
<div class="fd-nav-content-new"> <div class="fd-nav-content-new">
<!--画板--> <!--画板-->
<section class="dingflow-design"> <section class="dingflow-design">
<div class="zoom"> <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> <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>
<div class="box-scale" :style="`transform: scale(${ nowVal / 100});`"> <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">
<div class="end-node-circle"></div> <div class="end-node-circle"></div>
<div class="end-node-text">4</div> <div class="end-node-text">4</div>
@ -457,33 +487,39 @@ const clickOpenOrClose = () => {
</div> </div>
<errorDialog v-model:visible="tipVisible" :list="tipList" /> <errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer /> <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 /> <copyerDrawer />
<conditionDrawer :is-form-flow="props.isFormFlow" :customer-form-key="props.customerFormKey" /> <conditionDrawer
:is-form-flow="props.isFormFlow"
:customer-form-key="props.customerFormKey"
/>
</div> </div>
</el-drawer> </el-drawer>
</template> </template>
<style> <style>
.canvas_body{ .canvas_body {
height: 100%; height: 100%;
width: inherit; width: inherit;
} }
.flow_version{ .flow_version {
} }
.flow_version > .el-tabs__content{ .flow_version > .el-tabs__content {
padding: 0px; padding: 0px;
height:0px; height: 0px;
} }
.flow_version > .el-tabs__header{ .flow_version > .el-tabs__header {
margin:0px; margin: 0px;
} }
.flow_version .custom-tabs-label span { .flow_version .custom-tabs-label span {
padding:0 10px; padding: 0 10px;
} }
.right_kongx{ .right_kongx {
margin-right:50px margin-right: 50px;
} }
</style> </style>

500
src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
View File

@ -3,74 +3,85 @@
@ 时间: 2024-05-07 15:07:51 @ 时间: 2024-05-07 15:07:51
@ 备注: 表单流程 @ 备注: 表单流程
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import '@/styles/workflowcss/workflow.scss' import "@/styles/workflowcss/workflow.scss";
import { useStore } from '@/store/workflow/index' import { useStore } from "@/store/workflow/index";
import { flowversion } from '@/api/workflowapi/types' import { flowversion } from "@/api/workflowapi/types";
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion,judgeFormFlowIsOpen,openFormFlow } from '@/api/workflowapi/index' import {
import FlowImgSrc from '@/assets/images/3.png' initializeWorkFlow,
setWorkFlowData,
gainFlowVersionList,
saveFlowCont,
gainFlowInfo,
editFlowCont,
saveNewFlow,
switchFlowVersion,
judgeFormFlowIsOpen,
openFormFlow,
} from "@/api/workflowapi/index";
import FlowImgSrc from "@/assets/images/3.png";
const props = defineProps({ const props = defineProps({
appCont:{ appCont: {
type:Object, type: Object,
default(){ default() {
return {} return {};
}
}, },
formKey:{
type:String,
default:""
}, },
groupKey:{ formKey: {
type:String, type: String,
default:"" default: "",
}, },
menuId:{ groupKey: {
type:String, type: String,
default:"" default: "",
}, },
appPageKey:{ menuId: {
type:String, type: String,
default:"" default: "",
},
appPageKey: {
type: String,
default: "",
},
formVersion: {
type: String,
default: "",
},
state: {
type: Object,
default() {
return {};
}, },
formVersion:{
type:String,
default:""
}, },
state:{
type:Object,
default(){
return {}
}
}
}); });
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'update:state', val: formStruct): void (e: "update:state", val: formStruct): void;
(e: 'update:formKey', val: string): void (e: "update:formKey", val: string): void;
(e: 'update:appPageKey', val: string): void (e: "update:appPageKey", val: string): void;
// (e: 'judgeFlowIsEdit', val: boolean): void // (e: 'judgeFlowIsEdit', val: boolean): void
// (e: 'runNextWindows', val: number): void // (e: 'runNextWindows', val: number): void
// (e: 'closeFormPage'): void // (e: 'closeFormPage'): void
}>() }>();
const state = computed({ const state = computed({
get() { get() {
return props.state return props.state;
}, },
set(val: formStruct) { set(val: formStruct) {
emits('update:state', val) emits("update:state", val);
} },
}); });
const appPageKey = computed({ const appPageKey = computed({
get() { get() {
return props.appPageKey return props.appPageKey;
}, },
set(val: formStruct) { set(val: formStruct) {
emits('update:appPageKey', val) emits("update:appPageKey", val);
} },
}); });
let { setTableId, setIsTried } = useStore() let { setTableId, setIsTried } = useStore();
const openOfClise = ref(false) //当前版本状态 const openOfClise = ref(false); //当前版本状态
const flowIsTrue = ref(false) //判断流程是否使用 const flowIsTrue = ref(false); //判断流程是否使用
const isRead = ref(false) //判断操作功能按钮 const isRead = ref(false); //判断操作功能按钮
const activeTabs = ref<string>(""); //当前工作流版本 const activeTabs = ref<string>(""); //当前工作流版本
const versionList = reactive<flowversion[]>([]); //工作流版本列表 const versionList = reactive<flowversion[]>([]); //工作流版本列表
const nowVal = ref(100); //缩放比例 const nowVal = ref(100); //缩放比例
@ -86,7 +97,7 @@ let tipVisible = ref(false);
const closeOrOpenVersion = ref(false); //判断是否显示版本启用与关闭 const closeOrOpenVersion = ref(false); //判断是否显示版本启用与关闭
let oneIsTrue = true; let oneIsTrue = true;
//缩放画布 //缩放画布
const zoomSize = (type:number) => { const zoomSize = (type: number) => {
if (type == 1) { if (type == 1) {
if (nowVal.value == 50) { if (nowVal.value == 50) {
return; return;
@ -104,67 +115,64 @@ const zoomSize = (type:number) => {
@ 时间: 2024-03-11 16:33:49 @ 时间: 2024-03-11 16:33:49
@ 功能: 开启流程 @ 功能: 开启流程
*/ */
const createFormFlow = () =>{ const createFormFlow = () => {
if(appPageKey.value == ""){ if (appPageKey.value == "") {
flowIsTrue.value = false; flowIsTrue.value = false;
ElMessageBox.alert('您还未设置表单！请先设置完表单后，在创建流程！','温馨提示！',{ ElMessageBox.alert("您还未设置表单！请先设置完表单后，在创建流程！", "温馨提示！", {
confirmButtonText: '确定', confirmButtonText: "确定",
callback: (action: Action) => { callback: (action: Action) => {
// emits("runNextWindows",1); // emits("runNextWindows",1);
}, },
}) });
}else{ } else {
openOrCloseFormFlow(1) openOrCloseFormFlow(1);
flowIsTrue.value = true flowIsTrue.value = true;
getFlowVerList() getFlowVerList();
} }
// flowIsTrue.value = true // flowIsTrue.value = true
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 11:29:46 @ 时间: 2024-05-21 11:29:46
@ 功能: 获取工作流版本列表 @ 功能: 获取工作流版本列表
*/ */
const getFlowVerList = ()=>{ const getFlowVerList = () => {
gainFlowVersionList({id:appPageKey.value.toString()}) gainFlowVersionList({ id: appPageKey.value.toString() })
.then(({data})=>{ .then(({ data }) => {
// console.log("获取工作流版本列表-->",data) // console.log("获取工作流版本列表-->",data)
// versionList = data; // versionList = data;
versionList.splice(0,versionList.length) versionList.splice(0, versionList.length);
if(data){ if (data) {
if(data.length>0){ if (data.length > 0) {
data.forEach((item: any) => {
data.forEach((item:any)=>{ if (item.state == 1) {
activeTabs.value = item.id;
if(item.state == 1){ enableFlow.value = item;
activeTabs.value = item.id enableVersion.value = item.id;
enableFlow.value = item
enableVersion.value = item.id
} }
versionList.push({ versionList.push({
id:item.id, id: item.id,
key:item.key, key: item.key,
state:item.state, state: item.state,
version:item.version version: item.version,
}) });
}) });
if(versionList.length > 1){ if (versionList.length > 1) {
closeOrOpenVersion.value = true closeOrOpenVersion.value = true;
}else{ } else {
closeOrOpenVersion.value = false closeOrOpenVersion.value = false;
} }
// console.log("获取工作流版本列表--1-1-->",enableFlow.value); // console.log("获取工作流版本列表--1-1-->",enableFlow.value);
if(enableFlow.value == "" || enableFlow.value == undefined){ if (enableFlow.value == "" || enableFlow.value == undefined) {
enableFlow.value = versionList[0] enableFlow.value = versionList[0];
// activeTabs.value = versionList[0].id // activeTabs.value = versionList[0].id
enableVersion.value = versionList[0].id enableVersion.value = versionList[0].id;
} }
isRead.value = true isRead.value = true;
}else{ } else {
isRead.value = false isRead.value = false;
} }
} }
// console.log("获取工作流版本列表---4-->",isRead.value); // console.log("获取工作流版本列表---4-->",isRead.value);
@ -173,17 +181,15 @@ const getFlowVerList = ()=>{
// console.log("获取工作流版本列表---3-->",enableVersion.value); // console.log("获取工作流版本列表---3-->",enableVersion.value);
// console.log("获取工作流版本列表---3-1->",versionList[0],versionList); // console.log("获取工作流版本列表---3-1->",versionList[0],versionList);
}) })
.finally(()=>{ .finally(() => {
if (isRead.value == true) {
if(isRead.value == true){
gainFlowCont(); gainFlowCont();
}else{ } else {
clearCanvas(1); clearCanvas(1);
} }
clickOpenOrClose(); clickOpenOrClose();
});
}) };
}
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 11:40:34 @ 时间: 2024-05-21 11:40:34
@ -191,52 +197,51 @@ const getFlowVerList = ()=>{
*/ */
const clickOpenOrClose = () => { const clickOpenOrClose = () => {
// console.log("判断当前工作流版本是否启用",enableFlow,activeTabs.value) // console.log("判断当前工作流版本是否启用",enableFlow,activeTabs.value)
if(enableFlow.value.id==activeTabs.value){ if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true openOfClise.value = true;
}else{ } else {
openOfClise.value = false openOfClise.value = false;
} }
// console.log("openOfClise",openOfClise.value) // console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value) // console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 11:37:19 @ 时间: 2024-05-21 11:37:19
@ 功能: 清空画布 @ 功能: 清空画布
*/ */
const clearCanvas = (isOk?:any) =>{ const clearCanvas = (isOk?: any) => {
if(isOk==1){ if (isOk == 1) {
initWorkFlowData() initWorkFlowData();
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
}else{ } else {
ElMessageBox.confirm('确定要清空画布?') ElMessageBox.confirm("确定要清空画布?").then(() => {
.then(() => { initWorkFlowData();
initWorkFlowData()
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
}) });
} }
enableFlow.value = "" enableFlow.value = "";
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 11:37:46 @ 时间: 2024-05-21 11:37:46
@ 功能: 初始化工作流数据 @ 功能: 初始化工作流数据
*/ */
const initWorkFlowData = async() => { 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) console.log("data-=------>", data);
processConfig.value = data; processConfig.value = data;
let { let {
nodeConfig:nodes, nodeConfig: nodes,
flowPermission:flowPermissiones, flowPermission: flowPermissiones,
directorMaxLevel:levels, directorMaxLevel: levels,
workFlowDef:workName, workFlowDef: workName,
tableId, tableId,
} = data; } = data;
processConfig.value.workFlowDef.formKey = appPageKey.value processConfig.value.workFlowDef.formKey = appPageKey.value;
nodeConfig.value = nodes; nodeConfig.value = nodes;
flowPermission.value = flowPermissiones; flowPermission.value = flowPermissiones;
directorMaxLeveling = levels; directorMaxLeveling = levels;
@ -249,72 +254,70 @@ const initWorkFlowData = async() => {
// console.log("max--3->",nodeConfig) // console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel) // console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig) // console.log("max--5->",processConfig)
} };
//缩放画布 //缩放画布
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 11:26:41 @ 时间: 2024-05-21 11:26:41
@ 功能: 编辑表单流程状态 @ 功能: 编辑表单流程状态
*/ */
const openOrCloseFormFlow = (val:number) => { const openOrCloseFormFlow = (val: number) => {
openFormFlow({id:appPageKey.value.toString(),status:val}) openFormFlow({ id: appPageKey.value.toString(), status: val });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 10:10:46 @ 时间: 2024-05-21 10:10:46
@ 功能: 组件加载完毕执行数据初始化 @ 功能: 组件加载完毕执行数据初始化
*/ */
onMounted(()=>{ onMounted(() => {
// console.log("判断是否已经存在工作流以及是否开启",appPageKey.value) // console.log("判断是否已经存在工作流以及是否开启",appPageKey.value)
if(appPageKey.value == ""){ if (appPageKey.value == "") {
flowIsTrue.value = false; flowIsTrue.value = false;
}else{ } else {
judgeFormFlowIsOpen({id:appPageKey.value.toString()}) judgeFormFlowIsOpen({ id: appPageKey.value.toString() }).then((data) => {
.then((data)=>{
// console.log("判断是否已经存在工作流以及是否开启",data) // console.log("判断是否已经存在工作流以及是否开启",data)
if(data.data.isOpen == 1){ if (data.data.isOpen == 1) {
flowIsTrue.value = true; flowIsTrue.value = true;
// emits('judgeFlowIsEdit', false) // emits('judgeFlowIsEdit', false)
getFlowVerList() getFlowVerList();
}else{ } else {
flowIsTrue.value = false; flowIsTrue.value = false;
// emits('judgeFlowIsEdit', false) // emits('judgeFlowIsEdit', false)
} }
}) });
} }
}) });
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 13:57:13 @ 时间: 2024-05-21 13:57:13
@ 功能: 流程版本启用禁用 @ 功能: 流程版本启用禁用
*/ */
const setupState = (val:number) =>{ const setupState = (val: number) => {
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
status:val status: val,
} };
if(val == 1){ if (val == 1) {
activeTabs.value = enableVersion.value activeTabs.value = enableVersion.value;
} }
// console.log("流程版本启用禁用",sendCont) // console.log("流程版本启用禁用",sendCont)
switchFlowVersion(sendCont) switchFlowVersion(sendCont)
.then((data:any)=>{ .then((data: any) => {
ElMessage.success(data.msg); ElMessage.success(data.msg);
// activeTabs.value = enableVersion.value // activeTabs.value = enableVersion.value
// enableFlow.value.id = enableVersion.value // enableFlow.value.id = enableVersion.value
if(versionList.length > 0){ if (versionList.length > 0) {
versionList.forEach(item=>{ versionList.forEach((item) => {
if(item.id == enableVersion.value){ if (item.id == enableVersion.value) {
enableFlow.value = item enableFlow.value = item;
} }
}) });
} }
}) })
.finally(()=>{ .finally(() => {
clickOpenOrClose(); clickOpenOrClose();
}) });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 13:59:44 @ 时间: 2024-05-21 13:59:44
@ -334,25 +337,25 @@ const saveSet = async () => {
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("nodeConfig",nodeConfig.value); // console.log("nodeConfig",nodeConfig.value);
saveFlowCont(processConfig.value) saveFlowCont(processConfig.value)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
// emits('judgeFlowIsEdit', false) // emits('judgeFlowIsEdit', false)
// emits("runNextWindows",3); // emits("runNextWindows",3);
// clearCanvas(1); // clearCanvas(1);
} }
}) })
.finally(()=>{ .finally(() => {
// emits("chanerequest"); // emits("chanerequest");
getFlowVerList() getFlowVerList();
}) });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 14:01:22 @ 时间: 2024-05-21 14:01:22
@ 功能: 错误提示 @ 功能: 错误提示
*/ */
const reErr = ({ childNode }:any) => { const reErr = ({ childNode }: any) => {
if (childNode) { if (childNode) {
let { type, error, nodeName, conditionNodes } = childNode; let { type, error, nodeName, conditionNodes } = childNode;
if (type == 1 || type == 2 || type == 3) { if (type == 1 || type == 2 || type == 3) {
@ -383,13 +386,12 @@ const reErr = ({ childNode }:any) => {
@ 时间: 2024-05-21 14:11:28 @ 时间: 2024-05-21 14:11:28
@ 功能: 获取流程内容 @ 功能: 获取流程内容
*/ */
const gainFlowCont = () =>{ const gainFlowCont = () => {
gainFlowInfo({id:enableVersion.value.toString()}) gainFlowInfo({ id: enableVersion.value.toString() }).then((data: any) => {
.then((data:any)=>{
// console.log("获取工作流版本列表-1->",data,enableFlow.value) // console.log("获取工作流版本列表-1->",data,enableFlow.value)
if(data.code == 0){ if (data.code == 0) {
processConfig.value = data.data; processConfig.value = data.data;
processConfig.value.workFlowDef.formKey = appPageKey.value processConfig.value.workFlowDef.formKey = appPageKey.value;
nodeConfig.value = data.data.nodeConfig; nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission; flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel; directorMaxLeveling = data.data.directorMaxLevel;
@ -402,30 +404,30 @@ const gainFlowCont = () =>{
// console.log("max--3->",nodeConfig) // console.log("max--3->",nodeConfig)
// console.log("max--4->",data.data.directorMaxLevel) // console.log("max--4->",data.data.directorMaxLevel)
// console.log("max--5->",processConfig.value) // console.log("max--5->",processConfig.value)
}else{ } else {
clearCanvas(1); clearCanvas(1);
} }
// initWorkFlowData(); // initWorkFlowData();
}) });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 14:12:43 @ 时间: 2024-05-21 14:12:43
@ 功能: 选择工作流版本 @ 功能: 选择工作流版本
*/ */
const clickFormTable = (val:any) =>{ const clickFormTable = (val: any) => {
// console.log("切换表单",val,activeTabs.value) // console.log("切换表单",val,activeTabs.value)
enableVersion.value = val enableVersion.value = val;
gainFlowCont(); gainFlowCont();
clickOpenOrClose(); clickOpenOrClose();
// getTableFieldList(versionIndex.value,val) // getTableFieldList(versionIndex.value,val)
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 14:21:06 @ 时间: 2024-05-21 14:21:06
@ 功能: 编辑当前版本流程 @ 功能: 编辑当前版本流程
*/ */
const saveEdit =()=>{ const saveEdit = () => {
setIsTried(true); setIsTried(true);
tipList.value = []; tipList.value = [];
@ -436,16 +438,17 @@ const saveEdit =()=>{
} }
processConfig.value.flowPermission = flowPermission.value; processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log("processConfig----------123--------->", processConfig.value);
// console.log("processConfig",flowPermission); // console.log("processConfig",flowPermission);
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value); // console.log("activeTabs",enableFlow.value);
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
flowinfo:processConfig.value flowinfo: processConfig.value,
} };
editFlowCont(sendCont) editFlowCont(sendCont)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
// emits("update:openDrawer", false); // emits("update:openDrawer", false);
// clearCanvas(1); // clearCanvas(1);
@ -453,11 +456,11 @@ const saveEdit =()=>{
// emits("runNextWindows",3); // emits("runNextWindows",3);
} }
}) })
.finally(()=>{ .finally(() => {
// emits("chanerequest"); // emits("chanerequest");
getFlowVerList() getFlowVerList();
}) });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 14:34:45 @ 时间: 2024-05-21 14:34:45
@ -478,39 +481,41 @@ const saveNew = () => {
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value); // console.log("activeTabs",enableFlow.value);
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
flowinfo:processConfig.value flowinfo: processConfig.value,
} };
saveNewFlow(sendCont) saveNewFlow(sendCont)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
// emits('judgeFlowIsEdit', false) // emits('judgeFlowIsEdit', false)
// emits("runNextWindows",3); // emits("runNextWindows",3);
} }
}) })
.finally(()=>{ .finally(() => {
getFlowVerList() getFlowVerList();
}) });
} };
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 14:35:06 @ 时间: 2024-05-21 14:35:06
@ 功能: 监听流程节点变动 @ 功能: 监听流程节点变动
*/ */
watch(()=>nodeConfig,()=>{ watch(
() => nodeConfig,
() => {
// console.log("变动流程") // console.log("变动流程")
if(oneIsTrue){ if (oneIsTrue) {
oneIsTrue = false; oneIsTrue = false;
// emits('judgeFlowIsEdit', false) // emits('judgeFlowIsEdit', false)
}else{ } else {
// emits('judgeFlowIsEdit', true) // emits('judgeFlowIsEdit', true)
} }
},
}, {
{ deep: true,
deep: true }
}) );
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-05-21 14:37:22 @ 时间: 2024-05-21 14:37:22
@ -519,30 +524,41 @@ watch(()=>nodeConfig,()=>{
const closwFormFlow = () => { const closwFormFlow = () => {
flowIsTrue.value = false; flowIsTrue.value = false;
// emits('judgeFlowIsEdit', false) // emits('judgeFlowIsEdit', false)
openOrCloseFormFlow(2) openOrCloseFormFlow(2);
} };
</script> </script>
<template> <template>
<el-main class="mainBox"> <el-main class="mainBox">
<div v-if="flowIsTrue" style="height: 100%;"> <div v-if="flowIsTrue" style="height: 100%">
<div class="flowVersionBox"> <div class="flowVersionBox">
<div class="tabs_box"> <div class="tabs_box">
<el-tabs v-if="isRead" v-model="activeTabs" @tab-change="clickFormTable"> <el-tabs v-if="isRead" v-model="activeTabs" @tab-change="clickFormTable">
<el-tab-pane v-for="item in versionList" :key="item.id" :name="item.id"> <el-tab-pane v-for="item in versionList" :key="item.id" :name="item.id">
<template #label> <template #label>
<el-icon><Share /></el-icon> <el-icon><Share /></el-icon>
<span class="my-label">V{{item.version}}</span> <span class="my-label">V{{ item.version }}</span>
</template> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="flowButBox"> <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-icon class="el-icon--left"><Delete /></el-icon>
启用 启用
</el-button> </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-icon class="el-icon--left"><Delete /></el-icon>
禁用 禁用
</el-button> </el-button>
@ -555,7 +571,7 @@ const closwFormFlow = () => {
发布 发布
</el-button> </el-button>
<el-button v-if="isRead" size="small" plain @click="saveEdit"> <el-button v-if="isRead" size="small" plain @click="saveEdit">
<el-icon class="fa fa-save" style="margin-right:5px"></el-icon> <el-icon class="fa fa-save" style="margin-right: 5px"></el-icon>
保存 保存
</el-button> </el-button>
<el-button v-if="isRead" type="warning" size="small" @click="saveNew"> <el-button v-if="isRead" type="warning" size="small" @click="saveNew">
@ -568,16 +584,26 @@ const closwFormFlow = () => {
</el-button> </el-button>
</div> </div>
</div> </div>
<div > <div>
<section class="dingflow-design" style="top: 80px">
<section class="dingflow-design" style="top:80px">
<div class="zoom"> <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> <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>
<div class="box-scale" :style="`transform: scale(${ nowVal / 100});`"> <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">
<div class="end-node-circle"></div> <div class="end-node-circle"></div>
<div class="end-node-text">流程结束5</div> <div class="end-node-text">流程结束5</div>
@ -586,8 +612,20 @@ const closwFormFlow = () => {
</section> </section>
<errorDialog v-model:visible="tipVisible" :list="tipList" /> <errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer v-model:form-data="state.formData" :form-key="appPageKey" :form-version="formVersion" :node-config="nodeConfig" /> <promoterDrawer
<approverDrawer :directormaxlevel="directorMaxLeveling" :node-config="nodeConfig" :is-form-flow="isFormFlow" :customer-form-key="appPageKey" v-model:form-data="state.formData" :form-version="formVersion" /> 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 /> <copyerDrawer />
<conditionDrawer :is-form-flow="isFormFlow" :customer-form-key="appPageKey" /> <conditionDrawer :is-form-flow="isFormFlow" :customer-form-key="appPageKey" />
</div> </div>
@ -595,66 +633,62 @@ const closwFormFlow = () => {
<div v-else class="flow_work_begin"> <div v-else class="flow_work_begin">
<el-result title="" sub-title=""> <el-result title="" sub-title="">
<template #icon> <template #icon>
流程可实现需要多人流转的业务场景。<br>绘制流程图，设定数据流转方式，即可搭建线上工作流。<br><br> 流程可实现需要多人流转的业务场景。<br />绘制流程图，设定数据流转方式，即可搭建线上工作流。<br /><br />
<el-image <el-image class="imgBox" :src="FlowImgSrc" />
class="imgBox"
:src="FlowImgSrc"
/>
</template> </template>
<template #extra> <template #extra>
<el-button type="primary" @click="createFormFlow">开启流程</el-button> <el-button type="primary" @click="createFormFlow">开启流程</el-button>
</template> </template>
</el-result> </el-result>
</div> </div>
</el-main> </el-main>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.mainBox{ .mainBox {
padding: 0; padding: 0;
overflow-y : auto; overflow-y: auto;
height: calc(100vh - 40px); height: calc(100vh - 40px);
background-color: #f5f5f7; background-color: #f5f5f7;
} }
.flow_work_begin{ .flow_work_begin {
height: calc(100vh - 40px); height: calc(100vh - 40px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #FFFFFF; background-color: #ffffff;
.imgBox{ .imgBox {
height: calc(100vh - 400px); height: calc(100vh - 400px);
// height: 10%; // height: 10%;
} }
} }
.flowVersionBox{ .flowVersionBox {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #FFFFFF; background-color: #ffffff;
.flowVerLeft{ .flowVerLeft {
max-width: 50%; max-width: 50%;
padding-left: 10px; padding-left: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.tabs_box{ .tabs_box {
max-width: 50%; max-width: 50%;
min-width:30%; min-width: 30%;
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
position: static !important; position: static !important;
/* background-color: #fff; */ /* background-color: #fff; */
} }
::v-deep .el-tabs__item{ ::v-deep .el-tabs__item {
padding:0 10px; padding: 0 10px;
} }
::v-deep .el-tabs__header{ ::v-deep .el-tabs__header {
margin:0; margin: 0;
} }
} }
.flowButBox{ .flowButBox {
padding: 7px 0; padding: 7px 0;
} }
</style> </style>

517
src/views/sysworkflow/lowcodepage/workFlow.vue
View File

@ -3,61 +3,72 @@
@ 时间: 2024-03-11 14:46:00 @ 时间: 2024-03-11 14:46:00
@ 备注: 工作流 @ 备注: 工作流
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import '@/styles/workflowcss/workflow.scss' import "@/styles/workflowcss/workflow.scss";
import { useStore } from '@/store/workflow/index' import { useStore } from "@/store/workflow/index";
import { flowversion } from '@/api/workflowapi/types' import { flowversion } from "@/api/workflowapi/types";
import { initializeWorkFlow,setWorkFlowData,gainFlowVersionList,saveFlowCont,gainFlowInfo,editFlowCont,saveNewFlow,switchFlowVersion,judgeFormFlowIsOpen,openFormFlow } from '@/api/workflowapi/index' 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({ const props = defineProps({
formKey:{ formKey: {
type:String, type: String,
default:"" default: "",
},
formVersion: {
type: String,
default: "",
},
state: {
type: Object,
default() {
return {};
}, },
formVersion:{
type:String,
default:""
}, },
state:{
type:Object,
default(){
return {}
}
}
}); });
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'update:state', val: formStruct): void (e: "update:state", val: formStruct): void;
(e: 'update:formKey', val: string): void (e: "update:formKey", val: string): void;
(e: 'update:formVersion', val: string): void (e: "update:formVersion", val: string): void;
(e: 'judgeFlowIsEdit', val: boolean): void (e: "judgeFlowIsEdit", val: boolean): void;
(e: 'runNextWindows', val: number): void (e: "runNextWindows", val: number): void;
(e: 'closeFormPage'): void (e: "closeFormPage"): void;
}>() }>();
const state = computed({ const state = computed({
get() { get() {
return props.state return props.state;
}, },
set(val: formStruct) { set(val: formStruct) {
emits('update:state', val) emits("update:state", val);
} },
}); });
const formKeyVal = computed({ const formKeyVal = computed({
get() { get() {
return props.formKey return props.formKey;
}, },
set(val: formStruct) { set(val: formStruct) {
emits('update:formKey', val) emits("update:formKey", val);
} },
}); });
let { setTableId, setIsTried } = useStore() let { setTableId, setIsTried } = useStore();
const flowIsTrue = ref(false) const flowIsTrue = ref(false);
const isRead = ref(false) //判断操作功能按钮 const isRead = ref(false); //判断操作功能按钮
const openOfClise = ref(false) //当前版本状态 const openOfClise = ref(false); //当前版本状态
const versionList = reactive<flowversion[]>([]); //工作流版本列表 const versionList = reactive<flowversion[]>([]); //工作流版本列表
const enableVersion = ref<string>("1"); //流程版本 const enableVersion = ref<string>("1"); //流程版本
const enableFlow = ref<any>(); const enableFlow = ref<any>();
@ -79,40 +90,40 @@ let oneIsTrue = true;
@ 时间: 2024-03-11 16:33:49 @ 时间: 2024-03-11 16:33:49
@ 功能: 开启流程 @ 功能: 开启流程
*/ */
const createFormFlow = () =>{ const createFormFlow = () => {
if(formKeyVal.value == ""){ if (formKeyVal.value == "") {
flowIsTrue.value = false; flowIsTrue.value = false;
ElMessageBox.alert('您还未设置表单！请先设置完表单后，在创建流程！','温馨提示！',{ ElMessageBox.alert("您还未设置表单！请先设置完表单后，在创建流程！", "温馨提示！", {
confirmButtonText: '确定', confirmButtonText: "确定",
callback: (action: Action) => { callback: (action: Action) => {
emits("runNextWindows",1); emits("runNextWindows", 1);
}, },
}) });
}else{ } else {
openOrCloseFormFlow(1) openOrCloseFormFlow(1);
getFlowVerList() getFlowVerList();
flowIsTrue.value = true flowIsTrue.value = true;
emits('judgeFlowIsEdit', true) emits("judgeFlowIsEdit", true);
} }
emits('judgeFlowIsEdit', true) emits("judgeFlowIsEdit", true);
// flowIsTrue.value = true // flowIsTrue.value = true
} };
const openOrCloseFormFlow = (val:number) => { const openOrCloseFormFlow = (val: number) => {
openFormFlow({id:formKeyVal.value.toString(),status:val}) openFormFlow({ id: formKeyVal.value.toString(), status: val });
} };
//初始化工作流数据 //初始化工作流数据
const initWorkFlowData = async() => { 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) // console.log("data-=------>",data)
processConfig.value = data; processConfig.value = data;
let { let {
nodeConfig:nodes, nodeConfig: nodes,
flowPermission:flowPermissiones, flowPermission: flowPermissiones,
directorMaxLevel:levels, directorMaxLevel: levels,
workFlowDef:workName, workFlowDef: workName,
tableId, tableId,
} = data; } = data;
processConfig.value.workFlowDef.formKey = formKeyVal.value processConfig.value.workFlowDef.formKey = formKeyVal.value;
nodeConfig.value = nodes; nodeConfig.value = nodes;
flowPermission.value = flowPermissiones; flowPermission.value = flowPermissiones;
directorMaxLeveling = levels; directorMaxLeveling = levels;
@ -125,9 +136,9 @@ const initWorkFlowData = async() => {
// console.log("max--3->",nodeConfig) // console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel) // console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig) // console.log("max--5->",processConfig)
} };
//缩放画布 //缩放画布
const zoomSize = (type:number) => { const zoomSize = (type: number) => {
if (type == 1) { if (type == 1) {
if (nowVal.value == 50) { if (nowVal.value == 50) {
return; return;
@ -142,45 +153,42 @@ const zoomSize = (type:number) => {
}; };
//获取工作流版本列表 //获取工作流版本列表
const getFlowVerList = ()=>{ const getFlowVerList = () => {
gainFlowVersionList({id:formKeyVal.value.toString()}) gainFlowVersionList({ id: formKeyVal.value.toString() })
.then(({data})=>{ .then(({ data }) => {
// console.log("获取工作流版本列表-->",data) // console.log("获取工作流版本列表-->",data)
// versionList = data; // versionList = data;
versionList.splice(0,versionList.length) versionList.splice(0, versionList.length);
if(data){ if (data) {
if(data.length>0){ if (data.length > 0) {
data.forEach((item: any) => {
data.forEach((item:any)=>{ if (item.state == 1) {
activeTabs.value = item.id;
if(item.state == 1){ enableFlow.value = item;
activeTabs.value = item.id enableVersion.value = item.id;
enableFlow.value = item
enableVersion.value = item.id
} }
versionList.push({ versionList.push({
id:item.id, id: item.id,
key:item.key, key: item.key,
state:item.state, state: item.state,
version:item.version version: item.version,
}) });
}) });
if(versionList.length > 1){ if (versionList.length > 1) {
closeOrOpenVersion.value = true closeOrOpenVersion.value = true;
}else{ } else {
closeOrOpenVersion.value = false closeOrOpenVersion.value = false;
} }
// console.log("获取工作流版本列表--1-1-->",enableFlow.value); // console.log("获取工作流版本列表--1-1-->",enableFlow.value);
if(enableFlow.value == "" || enableFlow.value == undefined){ if (enableFlow.value == "" || enableFlow.value == undefined) {
enableFlow.value = versionList[0] enableFlow.value = versionList[0];
// activeTabs.value = versionList[0].id // activeTabs.value = versionList[0].id
enableVersion.value = versionList[0].id enableVersion.value = versionList[0].id;
} }
isRead.value = true isRead.value = true;
}else{ } else {
isRead.value = false isRead.value = false;
} }
} }
// console.log("获取工作流版本列表---1-->",activeTabs.value); // console.log("获取工作流版本列表---1-->",activeTabs.value);
@ -188,35 +196,33 @@ const getFlowVerList = ()=>{
// console.log("获取工作流版本列表---3-->",enableVersion.value); // console.log("获取工作流版本列表---3-->",enableVersion.value);
// console.log("获取工作流版本列表---3-1->",versionList[0],versionList); // console.log("获取工作流版本列表---3-1->",versionList[0],versionList);
}) })
.finally(()=>{ .finally(() => {
if(isRead.value == true){ if (isRead.value == true) {
gainFlowCont(); gainFlowCont();
}else{ } else {
clearCanvas(1); clearCanvas(1);
} }
clickOpenOrClose(); clickOpenOrClose();
});
}) };
}
//判断当前工作流版本是否启用 //判断当前工作流版本是否启用
const clickOpenOrClose = () => { const clickOpenOrClose = () => {
// console.log("判断当前工作流版本是否启用",enableFlow,activeTabs.value) // console.log("判断当前工作流版本是否启用",enableFlow,activeTabs.value)
if(enableFlow.value.id==activeTabs.value){ if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true openOfClise.value = true;
}else{ } else {
openOfClise.value = false openOfClise.value = false;
} }
// console.log("openOfClise",openOfClise.value) // console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value) // console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
} };
//获取流程内容 //获取流程内容
const gainFlowCont = () =>{ const gainFlowCont = () => {
gainFlowInfo({id:enableVersion.value.toString()}) gainFlowInfo({ id: enableVersion.value.toString() }).then((data: any) => {
.then((data:any)=>{
// console.log("获取工作流版本列表-1->",data,enableFlow.value) // console.log("获取工作流版本列表-1->",data,enableFlow.value)
if(data.code == 0){ if (data.code == 0) {
processConfig.value = data.data; processConfig.value = data.data;
processConfig.value.workFlowDef.formKey = formKeyVal.value processConfig.value.workFlowDef.formKey = formKeyVal.value;
nodeConfig.value = data.data.nodeConfig; nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission; flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel; directorMaxLeveling = data.data.directorMaxLevel;
@ -229,31 +235,30 @@ const gainFlowCont = () =>{
// console.log("max--3->",nodeConfig) // console.log("max--3->",nodeConfig)
// console.log("max--4->",data.data.directorMaxLevel) // console.log("max--4->",data.data.directorMaxLevel)
// console.log("max--5->",processConfig.value) // console.log("max--5->",processConfig.value)
}else{ } else {
clearCanvas(1); clearCanvas(1);
} }
// initWorkFlowData(); // initWorkFlowData();
}) });
} };
//清空画布 //清空画布
const clearCanvas = (isOk?:any) =>{ const clearCanvas = (isOk?: any) => {
if(isOk==1){ if (isOk == 1) {
initWorkFlowData() initWorkFlowData();
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
}else{ } else {
ElMessageBox.confirm('确定要清空画布?') ElMessageBox.confirm("确定要清空画布?").then(() => {
.then(() => { initWorkFlowData();
initWorkFlowData()
setIsTried(false); setIsTried(false);
tipList.value = [] tipList.value = [];
}) });
} }
enableFlow.value = "" enableFlow.value = "";
} };
//错误提示 //错误提示
const reErr = ({ childNode }:any) => { const reErr = ({ childNode }: any) => {
if (childNode) { if (childNode) {
let { type, error, nodeName, conditionNodes } = childNode; let { type, error, nodeName, conditionNodes } = childNode;
if (type == 1 || type == 2 || type == 3) { if (type == 1 || type == 2 || type == 3) {
@ -280,41 +285,40 @@ const reErr = ({ childNode }:any) => {
} }
}; };
//选择工作流版本 //选择工作流版本
const clickFormTable = (val:any) =>{ const clickFormTable = (val: any) => {
// console.log("切换表单",val,activeTabs.value) // console.log("切换表单",val,activeTabs.value)
enableVersion.value = val enableVersion.value = val;
gainFlowCont(); gainFlowCont();
clickOpenOrClose(); clickOpenOrClose();
// getTableFieldList(versionIndex.value,val) // getTableFieldList(versionIndex.value,val)
} };
//流程版本启用禁用 //流程版本启用禁用
const setupState = (val:number) =>{ const setupState = (val: number) => {
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
status:val status: val,
} };
if(val == 1){ if (val == 1) {
activeTabs.value = enableVersion.value activeTabs.value = enableVersion.value;
} }
switchFlowVersion(sendCont) switchFlowVersion(sendCont)
.then((data:any)=>{ .then((data: any) => {
ElMessage.success(data.msg); ElMessage.success(data.msg);
// activeTabs.value = enableVersion.value // activeTabs.value = enableVersion.value
// enableFlow.value.id = enableVersion.value // enableFlow.value.id = enableVersion.value
if(versionList.length > 0){ if (versionList.length > 0) {
versionList.forEach(item=>{ versionList.forEach((item) => {
if(item.id == enableVersion.value){ if (item.id == enableVersion.value) {
enableFlow.value = item enableFlow.value = item;
} }
}) });
} }
}) })
.finally(()=>{ .finally(() => {
clickOpenOrClose(); clickOpenOrClose();
}) });
// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs) // console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
} };
//发布新流程 //发布新流程
const saveSet = async () => { const saveSet = async () => {
setIsTried(true); setIsTried(true);
@ -331,18 +335,18 @@ const saveSet = async () => {
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("nodeConfig",nodeConfig.value); // console.log("nodeConfig",nodeConfig.value);
saveFlowCont(processConfig.value) saveFlowCont(processConfig.value)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
emits("runNextWindows",3); emits("runNextWindows", 3);
// clearCanvas(1); // clearCanvas(1);
} }
}) })
.finally(()=>{ .finally(() => {
// emits("chanerequest"); // emits("chanerequest");
getFlowVerList() getFlowVerList();
}) });
// let res = await setWorkFlowData(processConfig.value); // let res = await setWorkFlowData(processConfig.value);
// if (res.code == 200) { // if (res.code == 200) {
// ElMessage.success("设置成功") // ElMessage.success("设置成功")
@ -350,10 +354,9 @@ const saveSet = async () => {
// window.location.href = ""; // window.location.href = "";
// }, 200); // }, 200);
// } // }
}; };
//编辑当前版本流程 //编辑当前版本流程
const saveEdit =()=>{ const saveEdit = () => {
setIsTried(true); setIsTried(true);
tipList.value = []; tipList.value = [];
@ -364,28 +367,28 @@ const saveEdit =()=>{
} }
processConfig.value.flowPermission = flowPermission.value; processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
// console.log("processConfig",flowPermission); console.log("processConfig------------------->", processConfig.value);
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value); // console.log("activeTabs",enableFlow.value);
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
flowinfo:processConfig.value flowinfo: processConfig.value,
} };
editFlowCont(sendCont) editFlowCont(sendCont)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
// emits("update:openDrawer", false); // emits("update:openDrawer", false);
// clearCanvas(1); // clearCanvas(1);
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
emits("runNextWindows",3); emits("runNextWindows", 3);
} }
}) })
.finally(()=>{ .finally(() => {
// emits("chanerequest"); // emits("chanerequest");
getFlowVerList() getFlowVerList();
}) });
} };
//另存为新版 //另存为新版
const saveNew = () => { const saveNew = () => {
setIsTried(true); setIsTried(true);
@ -402,34 +405,36 @@ const saveNew = () => {
// console.log("flowPermission",flowPermission.value); // console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value); // console.log("activeTabs",enableFlow.value);
let sendCont = { let sendCont = {
id:enableVersion.value.toString(), id: enableVersion.value.toString(),
flowinfo:processConfig.value flowinfo: processConfig.value,
} };
saveNewFlow(sendCont) saveNewFlow(sendCont)
.then((data:any) => { .then((data: any) => {
if(data.code == 0){ if (data.code == 0) {
ElMessage.success("设置成功"); ElMessage.success("设置成功");
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
emits("runNextWindows",3); emits("runNextWindows", 3);
} }
}) })
.finally(()=>{ .finally(() => {
getFlowVerList() getFlowVerList();
}) });
} };
watch(()=>nodeConfig,()=>{ watch(
() => nodeConfig,
() => {
// console.log("变动流程") // console.log("变动流程")
if(oneIsTrue){ if (oneIsTrue) {
oneIsTrue = false; oneIsTrue = false;
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
}else{ } else {
emits('judgeFlowIsEdit', true) emits("judgeFlowIsEdit", true);
} }
},
}, {
{ deep: true,
deep: true }
}) );
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-03-12 15:49:35 @ 时间: 2024-03-12 15:49:35
@ -437,32 +442,31 @@ watch(()=>nodeConfig,()=>{
*/ */
const closwFormFlow = () => { const closwFormFlow = () => {
flowIsTrue.value = false; flowIsTrue.value = false;
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
openOrCloseFormFlow(2) openOrCloseFormFlow(2);
} };
onMounted(()=>{ onMounted(() => {
// console.log("判断是否已经存在工作流以及是否开启",formKeyVal.value) // console.log("判断是否已经存在工作流以及是否开启",formKeyVal.value)
if(formKeyVal.value == ""){ if (formKeyVal.value == "") {
flowIsTrue.value = false; flowIsTrue.value = false;
}else{ } else {
judgeFormFlowIsOpen({id:formKeyVal.value.toString()}) judgeFormFlowIsOpen({ id: formKeyVal.value.toString() }).then((data) => {
.then((data)=>{
// console.log("判断是否已经存在工作流以及是否开启",data) // console.log("判断是否已经存在工作流以及是否开启",data)
if(data.data.isOpen == 1){ if (data.data.isOpen == 1) {
flowIsTrue.value = true; flowIsTrue.value = true;
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
getFlowVerList() getFlowVerList();
}else{ } else {
flowIsTrue.value = false; flowIsTrue.value = false;
emits('judgeFlowIsEdit', false) emits("judgeFlowIsEdit", false);
} }
}) });
} }
}) });
</script> </script>
<template> <template>
<div class="design_flow_work"> <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"> <el-col :span="24">
<table class="table_box"> <table class="table_box">
<tr> <tr>
@ -473,19 +477,30 @@ onMounted(()=>{
<el-tab-pane v-for="item in versionList" :key="item.id" :name="item.id"> <el-tab-pane v-for="item in versionList" :key="item.id" :name="item.id">
<template #label> <template #label>
<el-icon><Share /></el-icon> <el-icon><Share /></el-icon>
<span class="my-label">V{{item.version}}</span> <span class="my-label">V{{ item.version }}</span>
</template> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="but_box"> <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-icon class="el-icon--left"><Delete /></el-icon>
启用 启用
</el-button> </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-icon class="el-icon--left"><Delete /></el-icon>
禁用 禁用
</el-button> </el-button>
@ -498,7 +513,7 @@ onMounted(()=>{
发布 发布
</el-button> </el-button>
<el-button v-if="isRead" size="small" plain @click="saveEdit"> <el-button v-if="isRead" size="small" plain @click="saveEdit">
<el-icon class="fa fa-save" style="margin-right:5px"></el-icon> <el-icon class="fa fa-save" style="margin-right: 5px"></el-icon>
保存 保存
</el-button> </el-button>
<el-button v-if="isRead" type="warning" size="small" @click="saveNew"> <el-button v-if="isRead" type="warning" size="small" @click="saveNew">
@ -515,16 +530,25 @@ onMounted(()=>{
</table> </table>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<section class="dingflow-design" style="top: 40px">
<section class="dingflow-design" style="top:40px">
<div class="zoom"> <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> <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>
<div class="box-scale" :style="`transform: scale(${ nowVal / 100});`"> <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">
<div class="end-node-circle"></div> <div class="end-node-circle"></div>
<div class="end-node-text">流程结束2</div> <div class="end-node-text">流程结束2</div>
@ -532,8 +556,19 @@ onMounted(()=>{
</div> </div>
</section> </section>
<errorDialog v-model:visible="tipVisible" :list="tipList" /> <errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer v-model:form-data="state.formData" :form-key="formKeyVal" :form-version="formVersion" /> <promoterDrawer
<approverDrawer :directormaxlevel="directorMaxLeveling" :node-config="nodeConfig" :is-form-flow="isFormFlow" :customer-form-key="formKeyVal" v-model:form-data="state.formData" :form-version="formVersion" /> 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 /> <copyerDrawer />
<conditionDrawer :is-form-flow="isFormFlow" :customer-form-key="formKeyVal" /> <conditionDrawer :is-form-flow="isFormFlow" :customer-form-key="formKeyVal" />
</el-col> </el-col>
@ -541,33 +576,29 @@ onMounted(()=>{
<div v-else class="flow_work_begin"> <div v-else class="flow_work_begin">
<el-result title="" sub-title=""> <el-result title="" sub-title="">
<template #icon> <template #icon>
流程可实现需要多人流转的业务场景。<br>绘制流程图，设定数据流转方式，即可搭建线上工作流。<br><br> 流程可实现需要多人流转的业务场景。<br />绘制流程图，设定数据流转方式，即可搭建线上工作流。<br /><br />
<el-image <el-image class="imgBox" :src="FlowImgSrc" />
class="imgBox"
:src="FlowImgSrc"
/>
</template> </template>
<template #extra> <template #extra>
<el-button type="primary" @click="createFormFlow">开启流程</el-button> <el-button type="primary" @click="createFormFlow">开启流程</el-button>
</template> </template>
</el-result> </el-result>
</div> </div>
</div> </div>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.design_flow_work{ .design_flow_work {
height: calc(100vh - 40px); height: calc(100vh - 40px);
width: inherit; width: inherit;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
} }
.flow_work_begin{ .flow_work_begin {
height: calc(100vh - 40px); height: calc(100vh - 40px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.imgBox{ .imgBox {
height: calc(100vh - 400px); height: calc(100vh - 400px);
// height: 10%; // height: 10%;
} }
@ -577,37 +608,37 @@ onMounted(()=>{
position: static !important; position: static !important;
/* background-color: #fff; */ /* background-color: #fff; */
} }
::v-deep .el-tabs__item{ ::v-deep .el-tabs__item {
padding:0 10px; padding: 0 10px;
} }
.version_but{ .version_but {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.tabs_box{ .tabs_box {
max-width: 60%; max-width: 60%;
min-width:30% min-width: 30%;
} }
.but_box{ .but_box {
max-width: 50%; max-width: 50%;
min-width: 40%; min-width: 40%;
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
padding:5px 10px 5px 0; padding: 5px 10px 5px 0;
text-align: right; text-align: right;
} }
.table_box{ .table_box {
width: 100%; width: 100%;
} }
.table_td_title{ .table_td_title {
width: 60px; width: 60px;
text-align: right; text-align: right;
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
} }
.table_td_info{ .table_td_info {
display: flex; display: flex;
// width: calc(100% - 100px); // width: calc(100% - 100px);
align-items: center; align-items: center;
@ -615,26 +646,24 @@ onMounted(()=>{
} }
</style> </style>
<style> <style>
.canvas_body{ .canvas_body {
height: 100%; height: 100%;
width: inherit; width: inherit;
} }
.flow_version{ .flow_version {
} }
.flow_version > .el-tabs__content{ .flow_version > .el-tabs__content {
padding: 0px; padding: 0px;
height:0px; height: 0px;
} }
.flow_version > .el-tabs__header{ .flow_version > .el-tabs__header {
margin:0px; margin: 0px;
} }
.flow_version .custom-tabs-label span { .flow_version .custom-tabs-label span {
padding:0 10px; padding: 0 10px;
} }
.right_kongx{ .right_kongx {
margin-right:50px margin-right: 50px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save