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

修改fonticon

liwenxuan_v2
超级管理员 2 years ago
parent
ecc6b653a3
commit
a90b6db4c7
1 changed files with 332 additions and 251 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. 213
      src/components/workflow/nodeWrap.vue

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

@ -1,14 +1,13 @@
import { loginApi } from '@/api/auth';
<!--
@ 作者: 秦东
@ 时间: 2023-10-10 11:30:42
@ 备注: 工作流引擎主干
-->
<script lang='ts' setup>
import $func from '@/utils/workflow/index'
import { useStore } from '@/store/workflow/index'
import { bgColors, placeholderList } from '@/utils/workflow/const'
<script lang="ts" setup>
import $func from "@/utils/workflow/index";
import { useStore } from "@/store/workflow/index";
import { bgColors, placeholderList } from "@/utils/workflow/const";
let _uid = getCurrentInstance().uid;
@ -35,47 +34,51 @@ let {
setCopyerConfig,
setConditionsConfig,
} = store;
let isTried = computed(()=> store.isTried)
let flowPermission1 = computed(()=> store.flowPermission1)
let approverConfig1 = computed(()=> store.approverConfig1)
let copyerConfig1 = computed(()=> store.copyerConfig1)
let conditionsConfig1 = computed(()=> store.conditionsConfig1)
let isTried = computed(() => store.isTried);
let flowPermission1 = computed(() => store.flowPermission1);
let approverConfig1 = computed(() => store.approverConfig1);
let copyerConfig1 = computed(() => store.copyerConfig1);
let conditionsConfig1 = computed(() => store.conditionsConfig1);
let defaultText = computed(() => {
return placeholderList[props.nodeConfig.type]
return placeholderList[props.nodeConfig.type];
});
let showText = computed(() => {
// 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 == 0)
return $func.arrToStr(props.flowPermission) || "所有人";
if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig);
// console.log("props.nodeConfig.type",props.nodeConfig.type);
return $func.copyerStr(props.nodeConfig)
return $func.copyerStr(props.nodeConfig);
});
let isInputList = ref([]);
let isInput = ref(false);
const resetConditionNodesErr = () => {
for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == "请设置条件" && i != props.nodeConfig.conditionNodes.length - 1;
props.nodeConfig.conditionNodes[i].error =
$func.conditionStr(props.nodeConfig, i) == "请设置条件" &&
i != props.nodeConfig.conditionNodes.length - 1;
}
}
};
const clickEvent = (index:any) => {
const clickEvent = (index: any) => {
if (index || index === 0) {
isInputList.value[index] = true;
} else {
isInput.value = true;
}
};
const blurEvent = (index:any) => {
const blurEvent = (index: any) => {
if (index || index === 0) {
isInputList.value[index] = false;
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || "条件";
props.nodeConfig.conditionNodes[index].nodeName =
props.nodeConfig.conditionNodes[index].nodeName || "条件";
} else {
isInput.value = false;
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText;
}
};
//删除节点
@ -94,38 +97,42 @@ const addTerm = () => {
nodeUserList: [],
childNode: null,
});
resetConditionNodesErr()
resetConditionNodesErr();
emits("update:nodeConfig", props.nodeConfig);
};
const delTerm = (index:any) => {
const delTerm = (index: any) => {
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes.splice(index, 1);
props.nodeConfig.conditionNodes.map((item, index) => {
item.priorityLevel = index + 1;
item.nodeName = `条件${index + 1}`;
});
resetConditionNodesErr()
resetConditionNodesErr();
emits("update:nodeConfig", props.nodeConfig);
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);
}
};
const reData = (data:any, addData:any) => {
const reData = (data: any, addData: any) => {
if (!data.childNode) {
data.childNode = addData;
} else {
reData(data.childNode, addData);
}
};
const setPerson = (priorityLevel:any) => {
const setPerson = (priorityLevel: any) => {
var { type } = props.nodeConfig;
if (type == 0) {
setPromoter(true);
@ -161,10 +168,11 @@ const setPerson = (priorityLevel:any) => {
});
}
};
const arrTransfer = (index:any, type = 1) => {
const arrTransfer = (index: any, type = 1) => {
//向左-1,向右1
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
props.nodeConfig.conditionNodes[index] =
props.nodeConfig.conditionNodes.splice(
index + type,
1,
props.nodeConfig.conditionNodes[index]
@ -172,7 +180,7 @@ const arrTransfer = (index:any, type = 1) => {
props.nodeConfig.conditionNodes.map((item, index) => {
item.priorityLevel = index + 1;
});
resetConditionNodesErr()
resetConditionNodesErr();
emits("update:nodeConfig", props.nodeConfig);
};
//监听组块
@ -197,7 +205,6 @@ watch(conditionsConfig1, (condition) => {
}
});
onMounted(() => {
if (props.nodeConfig.type == 1) {
// eslint-disable-next-line vue/no-mutating-props
@ -206,54 +213,99 @@ onMounted(() => {
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.error = !$func.copyerStr(props.nodeConfig);
} else if (props.nodeConfig.type == 4) {
resetConditionNodesErr()
resetConditionNodesErr();
}
})
});
</script>
<template>
<!--通用模块（0 发起人 1审批 2抄送 3处理 4条件 5路由）-->
<div v-if="nodeConfig.type < 4" class="node-wrap" >
<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
<div v-if="nodeConfig.type < 4" class="node-wrap">
<div
class="node-wrap-box"
:class="
(nodeConfig.type == 0 ? 'start-node ' : '') +
(isTried && nodeConfig.error ? 'active error' : '')
"
>
<!--标签头部-->
<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>
<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
>
<template v-else>
<span v-if="nodeConfig.type==1" class="iconfont"><el-icon class="nodeIcon"><Stamp /></el-icon></span>
<span v-if="nodeConfig.type==2" class="iconfont"><i class="fa fa-send"></i></span>
<span v-if="nodeConfig.type==3" class="iconfont"><i class="fa fa-pencil-square-o"></i></span>
<span v-if="nodeConfig.type == 1" class="iconfont"
><el-icon class="nodeIcon"><Stamp /></el-icon
></span>
<span v-if="nodeConfig.type == 2" class="iconfont"
><i class="fa fa-send"></i
></span>
<span v-if="nodeConfig.type == 3" class="iconfont"
><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>
<i class="anticon anticon-close close" @click="delNode"></i>
<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>
{{showText}}
<span v-if="!showText" class="placeholder"
>请选择{{ defaultText }}</span
>
{{ showText }}
</div>
<i class="anticon anticon-right arrow"></i>
<i class="fa fa-angle-right arrow"></i>
</div>
<!--标签错误提示-->
<div v-if="isTried && nodeConfig.error" class="error_tip">
<i class="anticon anticon-exclamation-circle"></i>
<i class="fa fa-exclamation-circle fa-2x"></i>
</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 v-if="nodeConfig.type == 5" class="node-wrap" >
<div v-if="nodeConfig.type == 5" class="node-wrap">
<div class="branch-box-wrap">
<div class="branch-box">
<button class="add-branch" @click="addTerm">添加条件</button>
<div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box" >
<div
v-for="(item, index) in nodeConfig.conditionNodes"
:key="index"
class="col-box"
>
<div class="condition-node">
<div class="condition-node-box">
<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
<div v-if="index != 0" class="sort-left" @click="arrTransfer(index, -1)">&lt;</div>
<div
class="auto-judge"
:class="isTried && item.error ? 'error active' : ''"
>
<div
v-if="index != 0"
class="sort-left"
@click="arrTransfer(index, -1)"
>
&lt;
</div>
<div class="title-wrapper">
<input
v-if="isInputList[index]"
@ -263,19 +315,38 @@ onMounted(() => {
class="ant-input editable-title-input"
@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)">优先级{{ item.priorityLevel }}</span>
<i class="anticon anticon-close close" @click="delTerm(index)"></i>
<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>
</div>
<div
v-if="index != nodeConfig.conditionNodes.length - 1"
class="sort-right"
@click="arrTransfer(index)"
>
&gt;
</div>
<div v-if="index != nodeConfig.conditionNodes.length - 1" class="sort-right" @click="arrTransfer(index)">&gt;</div>
<div class="content" @click="setPerson(item.priorityLevel)">{{ $func.conditionStr(nodeConfig, index) }}</div>
<div v-if="isTried && item.error" class="error_tip" >
<i class="anticon anticon-exclamation-circle"></i>
<div class="content" @click="setPerson(item.priorityLevel)">
{{ $func.conditionStr(nodeConfig, index) }}
</div>
<div v-if="isTried && item.error" class="error_tip">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<addNode v-model:childNodeP="item.childNode" :node-config="item" />
</div>
<addNode
v-model:childNodeP="item.childNode"
:node-config="item"
/>
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
@ -290,16 +361,26 @@ 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{
font-size: 20px;
<style lang="scss" scoped>
.nodeIcon {
margin-top: 5px;
font-size: 20px;
}
.error_tip i {
color: #f00;
}
</style>

Write Preview
Loading…
Cancel
Save