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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/matrixapi/type.ts
  2. 465
      src/components/workflow/dialog/matrix.vue
  3. 76
      src/components/workflow/nodeWrap.vue
  4. 864
      src/views/sysworkflow/flow/flowDrawingBoard.vue
  5. 1122
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue
  6. 1145
      src/views/sysworkflow/lowcodepage/workFlow.vue

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

@ -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;
}

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

@ -3,221 +3,302 @@
@ 时间: 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
},
data: {
type: Object,
default: () => {
return {
"matrixid":0,
"matrixName":"",
"factorid":0,
"factorName":"",
"outcomeid":0,
"outcomeName":"",
}
}
},
})
const emits = defineEmits(["update:isshow","change"]); //父级元素
isshow: {
type: Boolean,
default: false,
},
data: {
type: Object,
default: () => {
return {
matrixid: 0,
matrixName: "",
factorid: 0,
factorName: "",
outcomeid: 0,
outcomeName: "",
list: [],
};
},
},
});
const emits = defineEmits(["update:isshow", "change"]); //父级元素
const isShow = computed({
get: () => props.isshow,
set: (val) => {
emits("update:isshow", val);
},
get: () => props.isshow,
set: (val) => {
emits("update:isshow", val);
},
});
const loading = ref(true);
const loadingVal = ref(true);
const matrixContList = ref<matrixCont[]>();
const matrixIsClick = reactive<matrixInfo>({
matrixid:0,
factorid:0,
outcomeid:0,
matrixName:"",
factorName:"",
outcomeName:"",
matrixid: 0,
factorid: 0,
outcomeid: 0,
matrixName: "",
factorName: "",
outcomeName: "",
list: [],
});
//执行监听
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;
}
})
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
})
const total = ref(0); //总记录数
const farstId = ref<number>(0)
page: 1,
pagesize: 10,
});
const total = ref(0); //总记录数
const farstId = ref<number>(0);
/**
* 获取矩阵列表
*/
function searchMatrixList(){
loading.value = true
// console.log("值改变---->",matrixIsClick)
getMatrixList(searchArchiveQuery)
.then(({ data })=>{
// console.log("获取矩阵列表->",data)
matrixContList.value = data.list
total.value = data.total
if(data.list.length > 0){
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);
})
function searchMatrixList() {
loading.value = true;
// console.log("值改变---->",matrixIsClick)
getMatrixList(searchArchiveQuery)
.then(({ data }) => {
// console.log("获取矩阵列表->",data)
matrixContList.value = data.list;
total.value = data.total;
if (data.list.length > 0) {
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);
});
}
const factorList = ref<martixFieldStruct[]>()
const outcomeList = ref<martixFieldStruct[]>()
const factorList = ref<martixFieldStruct[]>();
const outcomeList = ref<martixFieldStruct[]>();
//获取矩阵相关字段
const gainMatrixNeed = (val:any) =>{
loadingVal.value = true
getMatrixField({id:val*1})
.then(({data})=>{
// 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
}
if(data.outcome.length>0){
// matrixIsClick.outcomeid = data.outcome[0].id*1
// matrixIsClick.outcomeName = data.outcome[0].name
}
})
.finally(()=>{
loadingVal.value = false
})
}
const gainMatrixNeed = (val: any) => {
loadingVal.value = true;
getMatrixField({ id: val * 1 })
.then(({ data }) => {
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
}
if (data.outcome.length > 0) {
// matrixIsClick.outcomeid = data.outcome[0].id*1
// matrixIsClick.outcomeName = data.outcome[0].name
}
})
.finally(() => {
loadingVal.value = false;
});
};
//选择矩阵
const pickmatirval = (val:matrixCont) =>{
matrixIsClick.matrixid = val.id*1
matrixIsClick.matrixName = val.name
gainMatrixNeed(val.id*1);
}
const pickmatirval = (val: matrixCont) => {
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
}
const pickval = (val: martixFieldStruct) => {
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
}
})
}
watch(matrixIsClick,(val:any) => {
// console.log("值改变---->",val)
emits("change", val);
})
onMounted(()=>{
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;
searchMatrixList();
})
const pickSelect = (val: any) => {
factorList.value.forEach((item: any) => {
if (item.id == val) {
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;
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 : [];
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>
<el-divider content-position="left">矩阵选项</el-divider>
<el-descriptions
v-if="isShow"
title=""
direction="vertical"
:column="2"
:size="size"
border
class="suojin"
>
<el-descriptions-item label="可用矩阵" width="50%">
<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>
</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-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-option
v-for="item in factorList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</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>
</ul>
</el-col>
</el-row>
</el-descriptions-item>
</el-descriptions>
</div>
<div>
<el-divider content-position="left">矩阵选项</el-divider>
<el-descriptions
v-if="isShow"
title=""
direction="vertical"
:column="2"
:size="size"
border
class="suojin"
>
<el-descriptions-item label="可用矩阵" width="50%">
<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>
</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-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-option
v-for="item in factorList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-col>
<el-col :span="24" class="materBody">
<ul>
<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>
.materBody{
padding:5px 0 5px 0;
li{
display: flex;
justify-content: space-between;
align-items: center;
cursor:pointer;
}
li.active span {
color:#409EFF;
}
<style lang="scss" scoped>
.materBody {
padding: 5px 0 5px 0;
li {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
li.active span {
color: #409eff;
}
}
.suojin{
padding: 0px 20px;
.suojin {
padding: 0px 20px;
}
</style>

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

@ -44,11 +44,10 @@ 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);
if (props.nodeConfig.type == 3) return $func.setApproverStr(props.nodeConfig);
// console.log("props.nodeConfig.type",props.nodeConfig);
return $func.copyerStr(props.nodeConfig);
});
@ -104,7 +103,7 @@ const addTerm = () => {
const delTerm = (index: any) => {
// eslint-disable-next-line vue/no-mutating-props
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.nodeName = `条件${index + 1}`;
});
@ -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);
@ -136,8 +131,7 @@ const reData = (data: any, addData: any) => {
const setPerson = (priorityLevel: any) => {
var { type } = props.nodeConfig;
// console.log("选中节点--->",type,props.nodeConfig)
// console.log("选中节点--->",type,props.nodeConfig)
if (type == 0) {
setPromoter(true);
@ -183,7 +177,7 @@ const arrTransfer = (index: any, type = 1) => {
1,
props.nodeConfig.conditionNodes[index]
)[0];
props.nodeConfig.conditionNodes.map((item:any, index:any) => {
props.nodeConfig.conditionNodes.map((item: any, index: any) => {
item.priorityLevel = index + 1;
});
resetConditionNodesErr();
@ -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,12 +341,15 @@ 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>
<!--循环组件-->
<!--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>
<style lang="scss" scoped>
.nodeIcon {

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

@ -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";
@ -20,196 +28,190 @@ import copyerDrawer from "@/components/workflow/drwer/copyerDrawer.vue";
import conditionDrawer from "@/components/workflow/drwer/conditionDrawer.vue";
const props = defineProps({
openDrawer:{
type:Boolean,
default:true
},
drawerWidht:{
type:Number,
default:100
},
isFormFlow:{
type:Boolean,
default:true
},
customerFormKey:{
type:String,
default:""
},
customerFormName:{
type:String,
default:""
},
flowKey:{
type:String,
default:""
}
})
const emits = defineEmits(["update:openDrawer","chanerequest"]);
const isShow = computed({
get: () => props.openDrawer,
set: (val) => {
emits("update:openDrawer", val);
},
openDrawer: {
type: Boolean,
default: true,
},
drawerWidht: {
type: Number,
default: 100,
},
isFormFlow: {
type: Boolean,
default: true,
},
customerFormKey: {
type: String,
default: "",
},
customerFormName: {
type: String,
default: "",
},
flowKey: {
type: String,
default: "",
},
});
const emits = defineEmits(["update:openDrawer", "chanerequest"]);
const isShow = computed({
get: () => props.openDrawer,
set: (val) => {
emits("update:openDrawer", val);
},
});
let { setTableId, setIsTried } = useStore()
let { setTableId, setIsTried } = useStore();
let tipList = ref<any>([]);
let tipVisible = ref(false);
let nowVal = ref(100); //缩放比例
let nowVal = ref(100); //缩放比例
let processConfig = ref<any>({});
let nodeConfig = ref({});
let workFlowDef = ref({});
let flowPermission = ref([]);
let directorMaxLeveling = ref<number>(0);
const shenPiTitle = ref<string>("")
const activeTabs = 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 = ()=>{
gainFlowVersionList({id:props.customerFormKey.toString()})
.then(({data})=>{
// console.log("获取工作流版本列表-->",data)
// versionList = data;
versionList.splice(0,versionList.length)
if(data){
if(data.length>0){
data.forEach((item:any)=>{
const getFlowVerList = () => {
gainFlowVersionList({ id: props.customerFormKey.toString() })
.then(({ data }) => {
// console.log("获取工作流版本列表-->",data)
// versionList = data;
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;
}
versionList.push({
id: item.id,
key: item.key,
state: item.state,
version: item.version,
});
});
if(item.state == 1){
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
})
})
isRead.value = true
}else{
isRead.value = false
}
}
// console.log("获取工作流版本列表---1-->",activeTabs.value);
// console.log("获取工作流版本列表---2-->",enableFlow.value);
// console.log("获取工作流版本列表---3-->",enableVersion.value);
})
.finally(()=>{
if(isRead.value == true){
gainFlowCont();
}else{
clearCanvas(1);
}
clickOpenOrClose();
})
}
isRead.value = true;
} else {
isRead.value = false;
}
}
// console.log("获取工作流版本列表---1-->",activeTabs.value);
// console.log("获取工作流版本列表---2-->",enableFlow.value);
// console.log("获取工作流版本列表---3-->",enableVersion.value);
})
.finally(() => {
if (isRead.value == true) {
gainFlowCont();
} else {
clearCanvas(1);
}
clickOpenOrClose();
});
};
//首次加载页面
onMounted(async ()=>{
// getFlowVerList()
})
onMounted(async () => {
// getFlowVerList()
});
//初始化工作流数据
const initWorkFlowData = async() => {
let { data } = await initializeWorkFlow({name:props.customerFormName})
// console.log("data-=------>",data)
processConfig.value = data;
let {
nodeConfig:nodes,
flowPermission:flowPermissiones,
directorMaxLevel:levels,
workFlowDef:workName,
tableId,
} = data;
processConfig.value.workFlowDef.formKey = props.customerFormKey
nodeConfig.value = nodes;
flowPermission.value = flowPermissiones;
directorMaxLeveling = levels;
workFlowDef.value = workName;
setTableId(tableId);
// console.log("max--1->",data)
// console.log("max--6->",tableId)
// console.log("max--2->",flowPermission)
// console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig)
}
const initWorkFlowData = async () => {
let { data } = await initializeWorkFlow({ name: props.customerFormName });
console.log("data-=------>", data);
processConfig.value = data;
let {
nodeConfig: nodes,
flowPermission: flowPermissiones,
directorMaxLevel: levels,
workFlowDef: workName,
tableId,
} = data;
processConfig.value.workFlowDef.formKey = props.customerFormKey;
nodeConfig.value = nodes;
flowPermission.value = flowPermissiones;
directorMaxLeveling = levels;
workFlowDef.value = workName;
setTableId(tableId);
// console.log("max--1->",data)
// console.log("max--6->",tableId)
// console.log("max--2->",flowPermission)
// console.log("max--3->",nodeConfig)
// console.log("max--4->",directorMaxLevel)
// console.log("max--5->",processConfig)
};
//错误提示
const reErr = ({ childNode }:any) => {
if (childNode) {
let { type, error, nodeName, conditionNodes } = childNode;
if (type == 1 || type == 2 || type == 3) {
if (error) {
tipList.value.push({
name: nodeName,
type: ["", "审核人", "抄送人", "执行人"][type],
});
}
reErr(childNode);
} else if (type == 4) {
reErr(childNode);
} else if (type == 5) {
reErr(childNode);
for (var i = 0; i < conditionNodes.length; i++) {
if (conditionNodes[i].error) {
tipList.value.push({ name: conditionNodes[i].nodeName, type: "条件" });
}
reErr(conditionNodes[i]);
}
}
} else {
childNode = null;
}
const reErr = ({ childNode }: any) => {
if (childNode) {
let { type, error, nodeName, conditionNodes } = childNode;
if (type == 1 || type == 2 || type == 3) {
if (error) {
tipList.value.push({
name: nodeName,
type: ["", "审核人", "抄送人", "执行人"][type],
});
}
reErr(childNode);
} else if (type == 4) {
reErr(childNode);
} else if (type == 5) {
reErr(childNode);
for (var i = 0; i < conditionNodes.length; i++) {
if (conditionNodes[i].error) {
tipList.value.push({ name: conditionNodes[i].nodeName, type: "条件" });
}
reErr(conditionNodes[i]);
}
}
} else {
childNode = null;
}
};
//保存
const saveSet = async () => {
setIsTried(true);
tipList.value = [];
reErr(nodeConfig.value);
if (tipList.value.length != 0) {
tipVisible.value = true;
return;
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",processConfig.value);
// console.log("flowPermission",flowPermission.value);
// console.log("nodeConfig",nodeConfig.value);
saveFlowCont(processConfig.value)
.then((data:any) => {
if(data.code == 0){
ElMessage.success("设置成功");
emits("update:openDrawer", false);
clearCanvas(1);
}
})
.finally(()=>{
emits("chanerequest");
})
// let res = await setWorkFlowData(processConfig.value);
// if (res.code == 200) {
// ElMessage.success("设置成功")
// setTimeout(function () {
// window.location.href = "";
// }, 200);
// }
setIsTried(true);
tipList.value = [];
reErr(nodeConfig.value);
if (tipList.value.length != 0) {
tipVisible.value = true;
return;
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
console.log("processConfig", processConfig.value);
// console.log("flowPermission",flowPermission.value);
// console.log("nodeConfig", nodeConfig.value);
saveFlowCont(processConfig.value)
.then((data: any) => {
if (data.code == 0) {
ElMessage.success("设置成功");
emits("update:openDrawer", false);
clearCanvas(1);
}
})
.finally(() => {
emits("chanerequest");
});
// let res = await setWorkFlowData(processConfig.value);
// if (res.code == 200) {
// ElMessage.success("设置成功")
// setTimeout(function () {
// window.location.href = "";
// }, 200);
// }
};
//缩放画布
const zoomSize = (type:number) => {
const zoomSize = (type: number) => {
if (type == 1) {
if (nowVal.value == 50) {
return;
@ -223,267 +225,301 @@ const zoomSize = (type:number) => {
}
};
//清空画布
const clearCanvas = (isOk?:any) =>{
if(isOk==1){
initWorkFlowData()
setIsTried(false);
tipList.value = []
}else{
ElMessageBox.confirm('确定要清空画布?')
.then(() => {
initWorkFlowData()
setIsTried(false);
tipList.value = []
})
}
enableFlow.value = ""
}
watch(()=>props.openDrawer,(val)=>{
// console.log("1111",props.customerFormKey,val)
if(val){
if(props.customerFormKey != ""){
getFlowVerList()
}else{
initWorkFlowData()
}
shenPiTitle.value = props.customerFormName
}else{
setIsTried(false);
tipList.value = []
enableFlow.value = ""
isRead.value=false
}
})
const clearCanvas = (isOk?: any) => {
if (isOk == 1) {
initWorkFlowData();
setIsTried(false);
tipList.value = [];
} else {
ElMessageBox.confirm("确定要清空画布?").then(() => {
initWorkFlowData();
setIsTried(false);
tipList.value = [];
});
}
enableFlow.value = "";
};
watch(
() => props.openDrawer,
(val) => {
// console.log("1111",props.customerFormKey,val)
if (val) {
if (props.customerFormKey != "") {
getFlowVerList();
} else {
initWorkFlowData();
}
shenPiTitle.value = props.customerFormName;
} else {
setIsTried(false);
tipList.value = [];
enableFlow.value = "";
isRead.value = false;
}
}
);
//选择工作流版本
const clickFormTable = (val:any) =>{
// console.log("切换表单",val,activeTabs.value)
enableVersion.value = val
gainFlowCont();
clickOpenOrClose();
// getTableFieldList(versionIndex.value,val)
}
const clickFormTable = (val: any) => {
// console.log("切换表单",val,activeTabs.value)
enableVersion.value = val;
gainFlowCont();
clickOpenOrClose();
// getTableFieldList(versionIndex.value,val)
};
//编辑
const saveEdit =()=>{
setIsTried(true);
tipList.value = [];
reErr(nodeConfig.value);
if (tipList.value.length != 0) {
tipVisible.value = true;
return;
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",flowPermission);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id:enableVersion.value.toString(),
flowinfo:processConfig.value
}
editFlowCont(sendCont)
.then((data:any) => {
if(data.code == 0){
ElMessage.success("设置成功");
emits("update:openDrawer", false);
clearCanvas(1);
}
})
.finally(()=>{
emits("chanerequest");
})
}
const saveEdit = () => {
setIsTried(true);
tipList.value = [];
reErr(nodeConfig.value);
if (tipList.value.length != 0) {
tipVisible.value = true;
return;
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
console.log("processConfig", processConfig.value);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo: processConfig.value,
};
editFlowCont(sendCont)
.then((data: any) => {
if (data.code == 0) {
ElMessage.success("设置成功");
emits("update:openDrawer", false);
clearCanvas(1);
}
})
.finally(() => {
emits("chanerequest");
});
};
//另存为新版
const saveNew = () => {
setIsTried(true);
tipList.value = [];
reErr(nodeConfig.value);
if (tipList.value.length != 0) {
tipVisible.value = true;
return;
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",flowPermission);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id:enableVersion.value.toString(),
flowinfo:processConfig.value
}
saveNewFlow(sendCont)
.then((data:any) => {
if(data.code == 0){
ElMessage.success("设置成功");
emits("update:openDrawer", false);
clearCanvas(1);
}
})
.finally(()=>{
emits("chanerequest");
})
}
setIsTried(true);
tipList.value = [];
reErr(nodeConfig.value);
if (tipList.value.length != 0) {
tipVisible.value = true;
return;
}
processConfig.value.flowPermission = flowPermission.value;
// eslint-disable-next-line no-console
// console.log("processConfig",flowPermission);
// console.log("flowPermission",flowPermission.value);
// console.log("activeTabs",enableFlow.value);
let sendCont = {
id: enableVersion.value.toString(),
flowinfo: processConfig.value,
};
saveNewFlow(sendCont)
.then((data: any) => {
if (data.code == 0) {
ElMessage.success("设置成功");
emits("update:openDrawer", false);
clearCanvas(1);
}
})
.finally(() => {
emits("chanerequest");
});
};
//获取流程内容
const gainFlowCont = () =>{
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
nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel;
workFlowDef.value = data.data.workFlowDef;
setTableId(data.data.tableId);
// console.log("max--1->",data)
// console.log("max--6->",data.data.tableId)
// console.log("max--2->",data.data.flowPermission)
// console.log("max--3->",nodeConfig)
// console.log("max--4->",data.data.directorMaxLevel)
// console.log("max--5->",processConfig.value)
}else{
clearCanvas(1);
}
// initWorkFlowData();
})
}
const gainFlowCont = () => {
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;
nodeConfig.value = data.data.nodeConfig;
flowPermission.value = data.data.flowPermission;
directorMaxLeveling = data.data.directorMaxLevel;
workFlowDef.value = data.data.workFlowDef;
setTableId(data.data.tableId);
// console.log("max--1->",data)
// console.log("max--6->",data.data.tableId)
// console.log("max--2->",data.data.flowPermission)
// console.log("max--3->",nodeConfig)
// console.log("max--4->",data.data.directorMaxLevel)
// console.log("max--5->",processConfig.value)
} else {
clearCanvas(1);
}
// initWorkFlowData();
});
};
//启用禁用
const setupState = (val:number) =>{
let sendCont = {
id:enableVersion.value.toString(),
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=>{
if(item.id == enableVersion.value){
enableFlow.value = item
}
})
}
})
.finally(()=>{
clickOpenOrClose();
})
// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
}
const openOfClise = ref(false)
const setupState = (val: number) => {
let sendCont = {
id: enableVersion.value.toString(),
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) => {
if (item.id == enableVersion.value) {
enableFlow.value = item;
}
});
}
})
.finally(() => {
clickOpenOrClose();
});
// console.log("enableFlow.version==activeTabs",enableFlow.version,activeTabs)
};
const openOfClise = ref(false);
const clickOpenOrClose = () => {
if(enableFlow.value.id==activeTabs.value){
openOfClise.value = true
}else{
openOfClise.value = false
}
// console.log("openOfClise",openOfClise.value)
// console.log("enableFlow.version=1=activeTabs",enableFlow.value,activeTabs.value)
}
if (enableFlow.value.id == activeTabs.value) {
openOfClise.value = true;
} else {
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>
<el-button type="warning" @click="clearCanvas">
<el-icon class="el-icon--left"><Delete /></el-icon>
清空
</el-button>
<el-button v-if="!isRead" type="primary" @click="saveSet">
<el-icon class="el-icon--left"><Promotion /></el-icon>
发布
</el-button>
<el-button v-if="isRead" type="primary" @click="saveEdit">
<el-icon class="fa fa-save" style="margin-right:5px"></el-icon>
保存
</el-button>
<el-button v-if="isRead" color="#626aef" @click="saveNew">
<el-icon class="el-icon--left"><Share /></el-icon>
另存为新版
</el-button>
<el-button type="danger" @click="close">
<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
关闭
</el-button>
</template>
<div class="canvas_body">
<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">
<template #label>
<span class="custom-tabs-label">
<span>V{{ item.version }}</span>
</span>
</template>
</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>
</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>
<span>{{ nowVal }}%</span>
<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" />
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">4</div>
</div>
</div>
</section>
</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" />
<copyerDrawer />
<conditionDrawer :is-form-flow="props.isFormFlow" :customer-form-key="props.customerFormKey" />
</div>
</el-drawer>
<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>
<el-button type="warning" @click="clearCanvas">
<el-icon class="el-icon--left"><Delete /></el-icon>
清空
</el-button>
<el-button v-if="!isRead" type="primary" @click="saveSet">
<el-icon class="el-icon--left"><Promotion /></el-icon>
发布
</el-button>
<el-button v-if="isRead" type="primary" @click="saveEdit">
<el-icon class="fa fa-save" style="margin-right: 5px"></el-icon>
保存
</el-button>
<el-button v-if="isRead" color="#626aef" @click="saveNew">
<el-icon class="el-icon--left"><Share /></el-icon>
另存为新版
</el-button>
<el-button type="danger" @click="close">
<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
关闭
</el-button>
</template>
<div class="canvas_body">
<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"
>
<template #label>
<span class="custom-tabs-label">
<span>V{{ item.version }}</span>
</span>
</template>
</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>
</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>
<span>{{ nowVal }}%</span>
<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"
/>
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">4</div>
</div>
</div>
</section>
</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"
/>
<copyerDrawer />
<conditionDrawer
:is-form-flow="props.isFormFlow"
:customer-form-key="props.customerFormKey"
/>
</div>
</el-drawer>
</template>
<style>
.canvas_body{
height: 100%;
width: inherit;
.canvas_body {
height: 100%;
width: inherit;
}
.flow_version{
.flow_version {
}
.flow_version > .el-tabs__content{
padding: 0px;
height:0px;
.flow_version > .el-tabs__content {
padding: 0px;
height: 0px;
}
.flow_version > .el-tabs__header{
margin:0px;
.flow_version > .el-tabs__header {
margin: 0px;
}
.flow_version .custom-tabs-label span {
padding:0 10px;
padding: 0 10px;
}
.right_kongx{
margin-right:50px
.right_kongx {
margin-right: 50px;
}
</style>

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

File diff suppressed because it is too large

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

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save