diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index d0fb0866..282600a3 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -90,6 +90,55 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
getNodeConfigFormFields
}
}
+/**
+ * @description 获取表单的字段
+ */
+export function useFormFields() {
+ // 解析后的表单字段
+ const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
+ const parseFormFields = () => {
+ const parsedFormFields: Array<Record<string, string>> = []
+ if (formFields) {
+ formFields.value.forEach((fieldStr: string) => {
+ parseField(JSON.parse(fieldStr), parsedFormFields)
+ })
+ }
+ return parsedFormFields
+ }
+ // 解析字段。
+ const parseField = (
+ rule: Record<string, any>,
+ parsedFormFields: Array<Record<string, string>>,
+ parentTitle: string = ''
+ ) => {
+ const { field, title: tempTitle, children, type } = rule
+ if (field && tempTitle) {
+ let title = tempTitle
+ if (parentTitle) {
+ title = `${parentTitle}.${tempTitle}`
+ }
+ parsedFormFields.push({
+ field,
+ title,
+ type
+ })
+ // TODO 子表单 需要处理子表单字段
+ // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+ // // 解析子表单的字段
+ // rule.props.rule.forEach((item) => {
+ // parseFieldsSetDefaultPermission(item, fieldsPermission, title)
+ // })
+ // }
+ }
+ if (children && Array.isArray(children)) {
+ children.forEach((rule) => {
+ parseField(rule, parsedFormFields)
+ })
+ }
+ }
+
+ return parseFormFields()
+}
export type UserTaskFormType = {
//candidateParamArray: any[]
@@ -408,3 +457,22 @@ export function useNodeName(nodeType: NodeType) {
blurEvent
}
}
+
+export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+ // 显示节点名称输入框
+ const showInput = ref(false)
+ // 节点名称输入框失去焦点
+ const blurEvent = () => {
+ showInput.value = false
+ node.value.name = node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string)
+ }
+ // 点击节点标题进行输入
+ const clickTitle = () => {
+ showInput.value = true
+ }
+ return {
+ showInput,
+ clickTitle,
+ blurEvent
+ }
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 679fdbfe..4ffcd4c5 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -4,9 +4,9 @@
v-model="settingVisible"
:show-close="false"
:size="588"
- :before-close=" handleClose"
- >
- <template #header>
+ :before-close="handleClose"
+ >
+ <template #header>
<div class="config-header">
<input
v-if="showInput"
@@ -16,36 +16,42 @@
v-mountedFocus
v-model="currentNode.name"
:placeholder="currentNode.name"
- />
- <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
-
+ />
+ <div v-else class="node-name"
+ >{{ currentNode.name }}
+ <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
+ /></div>
+
<div class="divide-line"></div>
</div>
- </template>
- <div>
- <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
+ </template>
+ <div>
+ <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow"
+ >其它条件不满足进入此分支（该分支不可编辑和删除）</div
+ >
<div v-else>
- <el-form
- ref="formRef"
- :model="currentNode.attributes"
- :rules="formRules"
- label-position="top">
- <el-form-item label="配置方式" prop="conditionType">
- <el-radio-group
- v-model="currentNode.attributes.conditionType"
- @change="changeConditionType"
+ <el-form
+ ref="formRef"
+ :model="currentNode.attributes"
+ :rules="formRules"
+ label-position="top"
+ >
+ <el-form-item label="配置方式" prop="conditionType">
+ <el-radio-group
+ v-model="currentNode.attributes.conditionType"
+ @change="changeConditionType"
+ >
+ <el-radio
+ v-for="(dict, index) in conditionConfigTypes"
+ :key="index"
+ :value="dict.value"
+ :label="dict.value"
>
- <el-radio
- v-for="(dict, index) in conditionConfigTypes"
- :key="index"
- :value="dict.value"
- :label="dict.value"
- >
- {{ dict.label }}
- </el-radio>
- </el-radio-group>
- </el-form-item>
-
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+
<el-form-item
v-if="currentNode.attributes.conditionType === 1"
label="条件表达式"
@@ -58,87 +64,94 @@
style="width: 100%"
/>
</el-form-item>
- <el-form-item
- v-if="currentNode.attributes.conditionType === 2"
- label="条件规则"
- >
- <div class="condition-group-tool">
- <div class="flex items-center">
- <div class="mr-4">条件组关系</div>
- <el-switch
- v-model="conditionGroups.and"
- inline-prompt
- active-text="且"
- inactive-text="或"/>
- </div>
- <!-- <div class="flex items-center">
+ <el-form-item v-if="currentNode.attributes.conditionType === 2" label="条件规则">
+ <div class="condition-group-tool">
+ <div class="flex items-center">
+ <div class="mr-4">条件组关系</div>
+ <el-switch
+ v-model="conditionGroups.and"
+ inline-prompt
+ active-text="且"
+ inactive-text="或"
+ />
+ </div>
+ <!-- <div class="flex items-center">
<el-button size="small" type="primary">添加条件组</el-button>
</div> -->
- </div>
- <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或' ">
- <el-card
- class="condition-group"
- style="width: 530px"
- v-for="(condition, cIdx) in conditionGroups.conditions"
- :key="cIdx">
- <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
- <Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteConditionGroup(cIdx)"/>
- </div>
- <template #header>
- <div class="flex items-center justify-between">
- <div>条件组</div>
- <div class="flex">
- <div class="mr-4">规则关系</div>
- <el-switch
- v-model="condition.and"
- inline-prompt
- active-text="且"
- inactive-text="或"/>
- </div>
- </div>
- </template>
-
- <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
- <div class="mr-2">
- <el-select style="width: 160px" v-model="rule.leftSide">
- <el-option
- v-for="(item, index) in fieldsInfo"
- :key="index"
- :label="item.title"
- :value="item.field"
- />
- </el-select>
- </div>
- <div class="mr-2">
- <el-select v-model="rule.opCode" style="width: 100px">
- <el-option
- v-for="item in COMPARISON_OPERATORS"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- <div class="mr-2">
- <el-input v-model="rule.rightSide" style="width: 160px" />
- </div>
- <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
- <Icon icon="ep:delete" :size="18" @click="deleteConditionRule(condition,rIdx)"/>
- </div>
- <div class="flex items-center">
- <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition,rIdx)"/>
+ </div>
+ <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
+ <el-card
+ class="condition-group"
+ style="width: 530px"
+ v-for="(condition, cIdx) in conditionGroups.conditions"
+ :key="cIdx"
+ >
+ <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
+ <Icon
+ color="#0089ff"
+ icon="ep:circle-close-filled"
+ :size="18"
+ @click="deleteConditionGroup(cIdx)"
+ />
+ </div>
+ <template #header>
+ <div class="flex items-center justify-between">
+ <div>条件组</div>
+ <div class="flex">
+ <div class="mr-4">规则关系</div>
+ <el-switch
+ v-model="condition.and"
+ inline-prompt
+ active-text="且"
+ inactive-text="或"
+ />
</div>
</div>
-
- </el-card>
- </el-space>
- <div title="添加条件组" class="mt-4 cursor-pointer">
- <Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup"/>
- </div>
- </el-form-item>
-
- </el-form>
- </div>
+ </template>
+
+ <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
+ <div class="mr-2">
+ <el-select style="width: 160px" v-model="rule.leftSide">
+ <el-option
+ v-for="(item, index) in fieldsInfo"
+ :key="index"
+ :label="item.title"
+ :value="item.field"
+ />
+ </el-select>
+ </div>
+ <div class="mr-2">
+ <el-select v-model="rule.opCode" style="width: 100px">
+ <el-option
+ v-for="item in COMPARISON_OPERATORS"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ <div class="mr-2">
+ <el-input v-model="rule.rightSide" style="width: 160px" />
+ </div>
+ <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
+ <Icon
+ icon="ep:delete"
+ :size="18"
+ @click="deleteConditionRule(condition, rIdx)"
+ />
+ </div>
+ <div class="flex items-center">
+ <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition, rIdx)" />
+ </div>
+ </div>
+ </el-card>
+ </el-space>
+ <div title="添加条件组" class="mt-4 cursor-pointer">
+ <Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup" />
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
</div>
<template #footer>
<el-divider />
@@ -150,25 +163,31 @@
</el-drawer>
</template>
<script setup lang="ts">
-import { SimpleFlowNode, CONDITION_CONFIG_TYPES, ConditionConfigType } from '../consts'
-import { getDefaultConditionNodeName } from '../utils';
-import { COMPARISON_OPERATORS, ConditionGroup, Condition, ConditionRule } from '../consts';
+import {
+ SimpleFlowNode,
+ CONDITION_CONFIG_TYPES,
+ ConditionConfigType,
+ COMPARISON_OPERATORS,
+ ConditionGroup,
+ Condition,
+ ConditionRule
+} from '../consts'
+import { getDefaultConditionNodeName } from '../utils'
+import { useFormFields } from '../node'
const message = useMessage() // 消息弹窗
defineOptions({
name: 'ConditionNodeConfig'
})
-const formFields = inject<Ref<string[]>>('formFields')
const formType = inject<Ref<number>>('formType') // 表单类型
-
-const conditionConfigTypes = computed( ()=> {
- return CONDITION_CONFIG_TYPES.filter(item => {
+const conditionConfigTypes = computed(() => {
+ return CONDITION_CONFIG_TYPES.filter((item) => {
// 业务表单暂时去掉条件规则选项
- if (formType?.value !== 10 ){
+ if (formType?.value !== 10) {
return item.value === 1
} else {
- return true;
+ return true
}
- });
+ })
})
const props = defineProps({
@@ -176,35 +195,39 @@ const props = defineProps({
type: Object as () => SimpleFlowNode,
required: true
},
- nodeIndex : {
+ nodeIndex: {
type: Number,
required: true
}
})
const settingVisible = ref(false)
const open = () => {
- getFieldsInfo()
if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
- if (currentNode.value.attributes.conditionGroups) {
- conditionGroups.value = currentNode.value.attributes.conditionGroups
- }
+ if (currentNode.value.attributes.conditionGroups) {
+ conditionGroups.value = currentNode.value.attributes.conditionGroups
+ }
}
settingVisible.value = true
}
-watch(() => props.conditionNode, (newValue) => {
- currentNode.value = newValue;
-});
+watch(
+ () => props.conditionNode,
+ (newValue) => {
+ currentNode.value = newValue
+ }
+)
// 显示名称输入框
const showInput = ref(false)
const clickIcon = () => {
- showInput.value = true;
+ showInput.value = true
}
// 输入框失去焦点
const blurEvent = () => {
showInput.value = false
- currentNode.value.name = currentNode.value.name || getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
+ currentNode.value.name =
+ currentNode.value.name ||
+ getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
}
const currentNode = ref<SimpleFlowNode>(props.conditionNode)
@@ -216,13 +239,13 @@ const closeDrawer = () => {
settingVisible.value = false
}
-const handleClose = async (done: (cancel?: boolean) => void) => {
- const isSuccess = await saveConfig();
- if ( !isSuccess) {
- done(true); // 传入 true 阻止关闭
- } else {
- done();
- }
+const handleClose = async (done: (cancel?: boolean) => void) => {
+ const isSuccess = await saveConfig()
+ if (!isSuccess) {
+ done(true) // 传入 true 阻止关闭
+ } else {
+ done()
+ }
}
// 表单校验规则
const formRules = reactive({
@@ -232,82 +255,83 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref
// 保存配置
-const saveConfig = async () => {
+const saveConfig = async () => {
if (!currentNode.value.attributes.defaultFlow) {
// 校验表单
if (!formRef) return false
const valid = await formRef.value.validate()
if (!valid) return false
- const showText = getShowText();
- if(!showText){
- return false;
+ const showText = getShowText()
+ if (!showText) {
+ return false
}
currentNode.value.showText = showText
- if(currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION ){
- currentNode.value.attributes.conditionGroups = undefined
+ if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
+ currentNode.value.attributes.conditionGroups = undefined
}
- if(currentNode.value.attributes.conditionType === ConditionConfigType.RULE ){
+ if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
currentNode.value.attributes.conditionExpression = undefined
- currentNode.value.attributes.conditionGroups = conditionGroups.value
+ currentNode.value.attributes.conditionGroups = conditionGroups.value
}
-
}
settingVisible.value = false
- return true;
+ return true
}
-const getShowText = () : string => {
- let showText ='';
+const getShowText = (): string => {
+ let showText = ''
if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
if (currentNode.value.attributes.conditionExpression) {
showText = `表达式：${currentNode.value.attributes.conditionExpression}`
}
}
- if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE ) {
+ if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
// 条件组是否为与关系
- const groupAnd = conditionGroups.value.and;
- let warningMesg : undefined | string = undefined
- const conditionGroup = conditionGroups.value.conditions.map( item => {
- return '(' + item.rules.map( rule => {
- if ( rule.leftSide && rule.rightSide) {
- return getFieldTitle(rule.leftSide) + " " + getOpName(rule.opCode) + " " + rule.rightSide
- }else {
- // 又一条规则不完善。提示错误
- warningMesg = '请完善条件规则'
- return ''
- }
- }).join(item.and ? ' 且 ' : ' 或 ' ) + ' ) '
- }
- )
+ const groupAnd = conditionGroups.value.and
+ let warningMesg: undefined | string = undefined
+ const conditionGroup = conditionGroups.value.conditions.map((item) => {
+ return (
+ '(' +
+ item.rules
+ .map((rule) => {
+ if (rule.leftSide && rule.rightSide) {
+ return (
+ getFieldTitle(rule.leftSide) + ' ' + getOpName(rule.opCode) + ' ' + rule.rightSide
+ )
+ } else {
+ // 又一条规则不完善。提示错误
+ warningMesg = '请完善条件规则'
+ return ''
+ }
+ })
+ .join(item.and ? ' 且 ' : ' 或 ') +
+ ' ) '
+ )
+ })
if (warningMesg) {
- message.warning(warningMesg);
- showText = '';
+ message.warning(warningMesg)
+ showText = ''
} else {
- showText = conditionGroup.join( groupAnd ? ' 且 ' : ' 或 ' );
+ showText = conditionGroup.join(groupAnd ? ' 且 ' : ' 或 ')
}
-
- }
+ }
return showText
}
-
-
// 改变条件配置方式
-const changeConditionType = () => {
-
-}
+const changeConditionType = () => {}
const conditionGroups = ref<ConditionGroup>({
- and : true,
+ and: true,
conditions: [
{
- and : true,
+ and: true,
rules: [
{
type: 1,
- opName: "等于",
- opCode: "==",
- leftSide: "",
- rightSide: ""
+ opName: '等于',
+ opCode: '==',
+ leftSide: '',
+ rightSide: ''
}
]
}
@@ -316,69 +340,54 @@ const conditionGroups = ref<ConditionGroup>({
// 添加条件组
const addConditionGroup = () => {
const condition = {
- and : true,
+ and: true,
rules: [
{
type: 1,
- opName: "等于",
- opCode: "==",
- leftSide: "",
- rightSide: ""
+ opName: '等于',
+ opCode: '==',
+ leftSide: '',
+ rightSide: ''
}
]
}
conditionGroups.value.conditions.push(condition)
}
// 删除条件组
-const deleteConditionGroup = (idx:number) => {
+const deleteConditionGroup = (idx: number) => {
conditionGroups.value.conditions.splice(idx, 1)
}
// 添加条件规则
-const addConditionRule = (condition:Condition, idx:number) => {
+const addConditionRule = (condition: Condition, idx: number) => {
const rule: ConditionRule = {
type: 1,
- opName: "等于",
- opCode: "==",
- leftSide: "",
- rightSide: ""
+ opName: '等于',
+ opCode: '==',
+ leftSide: '',
+ rightSide: ''
}
- condition.rules.splice(idx+1, 0, rule)
+ condition.rules.splice(idx + 1, 0, rule)
}
-const deleteConditionRule = (condition:Condition, idx:number) => {
+const deleteConditionRule = (condition: Condition, idx: number) => {
condition.rules.splice(idx, 1)
}
-let fieldsInfo : any[] = [];
+const fieldsInfo = useFormFields()
-const getFieldsInfo = () => {
- fieldsInfo = [];
- if(formFields){
- formFields.value.forEach((fieldStr: string) => {
- const { field, title, type } = JSON.parse(fieldStr)
- fieldsInfo.push({
- field,
- title,
- type
- })
- })
- }
-}
-const getFieldTitle = (field:string) : string => {
- const item = fieldsInfo.find( item => item.field === field)
- return item?.title;
+const getFieldTitle = (field: string) => {
+ const item = fieldsInfo.find((item) => item.field === field)
+ return item?.title
}
-const getOpName = (opCode: string) : string => {
- const opName = COMPARISON_OPERATORS.find( item => item.value === opCode)
+const getOpName = (opCode: string): string => {
+ const opName = COMPARISON_OPERATORS.find((item) => item.value === opCode)
return opName?.label
}
-
</script>
<style lang="scss" scoped>
-
.condition-group-tool {
display: flex;
justify-content: space-between;
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 3e3e0f7f..14a85a29 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -13,7 +13,7 @@
v-model="currentNode.name"
:placeholder="currentNode.name"
/>
- <div v-else class="node-title" @click="clickEvent">
+ <div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }}
</div>
</div>
@@ -40,8 +40,9 @@
</div>
</template>
<script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode } from '../node'
import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
defineOptions({
name: 'CopyTaskNode'
@@ -56,27 +57,12 @@ const props = defineProps({
const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined]
}>()
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// 监控当前节点的变化
-watch(
- () => props.flowNode,
- (newValue) => {
- currentNode.value = newValue
- }
-)
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
- showInput.value = false
- currentNode.value.name =
- currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
- showInput.value = true
-}
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.COPY_TASK_NODE)
+
const nodeSetting = ref()
// 打开节点配置
const openNodeConfig = () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 23e1dd3e..51116781 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -15,7 +15,7 @@
v-model="currentNode.name"
:placeholder="currentNode.name"
/>
- <div v-else class="node-title" @click="clickEvent">
+ <div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }}
</div>
</div>
@@ -37,8 +37,8 @@
</template>
<script setup lang="ts">
import NodeHandler from '../NodeHandler.vue'
-import { useWatchNode } from '../node'
-import { SimpleFlowNode, NODE_DEFAULT_NAME, NODE_DEFAULT_TEXT, NodeType } from '../consts'
+import { useWatchNode, useNodeName2 } from '../node'
+import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
defineOptions({
name: 'StartEventNode'
@@ -53,21 +53,11 @@ const props = defineProps({
const emits = defineEmits<{
'update:modelValue': [node: SimpleFlowNode | undefined]
}>()
-
+// 监控节点变化
const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
- showInput.value = false
- currentNode.value.name =
- currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.START_USER_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
- showInput.value = true
-}
const nodeSetting = ref()
// 打开节点配置
const openNodeConfig = () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index a7fe1b6d..c817cbe2 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -13,7 +13,7 @@
v-model="currentNode.name"
:placeholder="currentNode.name"
/>
- <div v-else class="node-title" @click="clickEvent">
+ <div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }}
</div>
</div>
@@ -44,8 +44,8 @@
/>
</template>
<script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
-import { useWatchNode } from '../node'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useWatchNode, useNodeName2 } from '../node'
import NodeHandler from '../NodeHandler.vue'
import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
defineOptions({
@@ -61,9 +61,10 @@ const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined]
'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
}>()
-
+// 监控节点变化
const currentNode = useWatchNode(props)
-
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
const nodeSetting = ref()
// 打开节点配置
const openNodeConfig = () => {
@@ -72,19 +73,6 @@ const openNodeConfig = () => {
nodeSetting.value.openDrawer()
}
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
- showInput.value = false
- currentNode.value.name =
- currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
- showInput.value = true
-}
-
const deleteNode = () => {
emits('update:flowNode', currentNode.value.childNode)
}
diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf b/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
index c2dcd3f4..bb85b35f 100644
Binary files a/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf and b/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf differ
diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff
index e20cfa28..94befbd1 100644
Binary files a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff and b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff differ
diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
index 77bbd1b3..e8f95c8c 100644
Binary files a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 and b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 differ
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index ecf4250a..fd2ab0ed 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -119,6 +119,9 @@
&.copy-task {
color: #3296fa;
}
+ &.start-user {
+ color: #676565;
+ }
}
.node-title {
@@ -669,9 +672,9 @@
@font-face {
font-family: 'iconfont'; /* Project id 4495938 */
src:
- url('iconfont.woff2?t=1712392083512') format('woff2'),
- url('iconfont.woff?t=1712392083512') format('woff'),
- url('iconfont.ttf?t=1712392083512') format('truetype');
+ url('iconfont.woff2?t=1724339470412') format('woff2'),
+ url('iconfont.woff?t=1724339470412') format('woff'),
+ url('iconfont.ttf?t=1724339470412') format('truetype');
}
.iconfont {
@@ -682,7 +685,11 @@
-moz-osx-font-smoothing: grayscale;
}
-.icon-Inclusive:before {
+.icon-start-user:before {
+ content: '\e679';
+}
+
+.icon-inclusive:before {
content: '\e602';
}