yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

代码优化, bug 修复

pull/452/head
jason 2024-08-22 23:23:06 +08:00
parent eb79ee1b77
commit e75f954495
9 changed files with 318 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/SimpleProcessDesignerV2/src/node.ts
View File

@ -90,6 +90,55 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
getNodeConfigFormFields 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 = { export type UserTaskFormType = {
//candidateParamArray: any[] //candidateParamArray: any[]
@ -408,3 +457,22 @@ export function useNodeName(nodeType: NodeType) {
blurEvent 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
}
}

429
src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
View File

@ -4,9 +4,9 @@
v-model="settingVisible" v-model="settingVisible"
:show-close="false" :show-close="false"
:size="588" :size="588"
:before-close=" handleClose" :before-close="handleClose"
> >
<template #header> <template #header>
<div class="config-header"> <div class="config-header">
<input <input
v-if="showInput" v-if="showInput"
@ -16,36 +16,42 @@
v-mountedFocus v-mountedFocus
v-model="currentNode.name" v-model="currentNode.name"
:placeholder="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 class="divide-line"></div>
</div> </div>
</template> </template>
<div> <div>
<div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div> <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow"
>其它条件不满足进入此分支（该分支不可编辑和删除）</div
>
<div v-else> <div v-else>
<el-form <el-form
ref="formRef" ref="formRef"
:model="currentNode.attributes" :model="currentNode.attributes"
:rules="formRules" :rules="formRules"
label-position="top"> label-position="top"
<el-form-item label="配置方式" prop="conditionType"> >
<el-radio-group <el-form-item label="配置方式" prop="conditionType">
v-model="currentNode.attributes.conditionType" <el-radio-group
@change="changeConditionType" 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 {{ dict.label }}
v-for="(dict, index) in conditionConfigTypes" </el-radio>
:key="index" </el-radio-group>
:value="dict.value" </el-form-item>
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item <el-form-item
v-if="currentNode.attributes.conditionType === 1" v-if="currentNode.attributes.conditionType === 1"
label="条件表达式" label="条件表达式"
@ -58,87 +64,94 @@
style="width: 100%" style="width: 100%"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item v-if="currentNode.attributes.conditionType === 2" label="条件规则">
v-if="currentNode.attributes.conditionType === 2" <div class="condition-group-tool">
label="条件规则" <div class="flex items-center">
> <div class="mr-4">条件组关系</div>
<div class="condition-group-tool"> <el-switch
<div class="flex items-center"> v-model="conditionGroups.and"
<div class="mr-4">条件组关系</div> inline-prompt
<el-switch active-text="且"
v-model="conditionGroups.and" inactive-text="或"
inline-prompt />
active-text="且" </div>
inactive-text="或"/> <!-- <div class="flex items-center">
</div>
<!-- <div class="flex items-center">
<el-button size="small" type="primary">添加条件组</el-button> <el-button size="small" type="primary">添加条件组</el-button>
</div> --> </div> -->
</div> </div>
<el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或' "> <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
<el-card <el-card
class="condition-group" class="condition-group"
style="width: 530px" style="width: 530px"
v-for="(condition, cIdx) in conditionGroups.conditions" v-for="(condition, cIdx) in conditionGroups.conditions"
:key="cIdx"> :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 class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
</div> <Icon
<template #header> color="#0089ff"
<div class="flex items-center justify-between"> icon="ep:circle-close-filled"
<div>条件组</div> :size="18"
<div class="flex"> @click="deleteConditionGroup(cIdx)"
<div class="mr-4">规则关系</div> />
<el-switch </div>
v-model="condition.and" <template #header>
inline-prompt <div class="flex items-center justify-between">
active-text="且" <div>条件组</div>
inactive-text="或"/> <div class="flex">
</div> <div class="mr-4">规则关系</div>
</div> <el-switch
</template> v-model="condition.and"
inline-prompt
<div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx"> active-text="且"
<div class="mr-2"> inactive-text="或"
<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>
</div> </div>
</template>
</el-card>
</el-space> <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
<div title="添加条件组" class="mt-4 cursor-pointer"> <div class="mr-2">
<Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup"/> <el-select style="width: 160px" v-model="rule.leftSide">
</div> <el-option
</el-form-item> v-for="(item, index) in fieldsInfo"
:key="index"
</el-form> :label="item.title"
</div> :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> </div>
<template #footer> <template #footer>
<el-divider /> <el-divider />
@ -150,25 +163,31 @@
</el-drawer> </el-drawer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { SimpleFlowNode, CONDITION_CONFIG_TYPES, ConditionConfigType } from '../consts' import {
import { getDefaultConditionNodeName } from '../utils'; SimpleFlowNode,
import { COMPARISON_OPERATORS, ConditionGroup, Condition, ConditionRule } from '../consts'; CONDITION_CONFIG_TYPES,
ConditionConfigType,
COMPARISON_OPERATORS,
ConditionGroup,
Condition,
ConditionRule
} from '../consts'
import { getDefaultConditionNodeName } from '../utils'
import { useFormFields } from '../node'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
defineOptions({ defineOptions({
name: 'ConditionNodeConfig' name: 'ConditionNodeConfig'
}) })
const formFields = inject<Ref<string[]>>('formFields')
const formType = inject<Ref<number>>('formType') // 表单类型 const formType = inject<Ref<number>>('formType') // 表单类型
const conditionConfigTypes = computed(() => {
const conditionConfigTypes = computed( ()=> { return CONDITION_CONFIG_TYPES.filter((item) => {
return CONDITION_CONFIG_TYPES.filter(item => {
// 业务表单暂时去掉条件规则选项 // 业务表单暂时去掉条件规则选项
if (formType?.value !== 10 ){ if (formType?.value !== 10) {
return item.value === 1 return item.value === 1
} else { } else {
return true; return true
} }
}); })
}) })
const props = defineProps({ const props = defineProps({
@ -176,35 +195,39 @@ const props = defineProps({
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true required: true
}, },
nodeIndex : { nodeIndex: {
type: Number, type: Number,
required: true required: true
} }
}) })
const settingVisible = ref(false) const settingVisible = ref(false)
const open = () => { const open = () => {
getFieldsInfo()
if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) { if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
if (currentNode.value.attributes.conditionGroups) { if (currentNode.value.attributes.conditionGroups) {
conditionGroups.value = currentNode.value.attributes.conditionGroups conditionGroups.value = currentNode.value.attributes.conditionGroups
} }
} }
settingVisible.value = true settingVisible.value = true
} }
watch(() => props.conditionNode, (newValue) => { watch(
currentNode.value = newValue; () => props.conditionNode,
}); (newValue) => {
currentNode.value = newValue
}
)
// 显示名称输入框 // 显示名称输入框
const showInput = ref(false) const showInput = ref(false)
const clickIcon = () => { const clickIcon = () => {
showInput.value = true; showInput.value = true
} }
// 输入框失去焦点 // 输入框失去焦点
const blurEvent = () => { const blurEvent = () => {
showInput.value = false 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) const currentNode = ref<SimpleFlowNode>(props.conditionNode)
@ -216,13 +239,13 @@ const closeDrawer = () => {
settingVisible.value = false settingVisible.value = false
} }
const handleClose = async (done: (cancel?: boolean) => void) => { const handleClose = async (done: (cancel?: boolean) => void) => {
const isSuccess = await saveConfig(); const isSuccess = await saveConfig()
if ( !isSuccess) { if (!isSuccess) {
done(true); // 传入 true 阻止关闭 done(true) // 传入 true 阻止关闭
} else { } else {
done(); done()
} }
} }
// 表单校验规则 // 表单校验规则
const formRules = reactive({ const formRules = reactive({
@ -232,82 +255,83 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
// 保存配置 // 保存配置
const saveConfig = async () => { const saveConfig = async () => {
if (!currentNode.value.attributes.defaultFlow) { if (!currentNode.value.attributes.defaultFlow) {
// 校验表单 // 校验表单
if (!formRef) return false if (!formRef) return false
const valid = await formRef.value.validate() const valid = await formRef.value.validate()
if (!valid) return false if (!valid) return false
const showText = getShowText(); const showText = getShowText()
if(!showText){ if (!showText) {
return false; return false
} }
currentNode.value.showText = showText currentNode.value.showText = showText
if(currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION ){ if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
currentNode.value.attributes.conditionGroups = undefined 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.conditionExpression = undefined
currentNode.value.attributes.conditionGroups = conditionGroups.value currentNode.value.attributes.conditionGroups = conditionGroups.value
} }
} }
settingVisible.value = false settingVisible.value = false
return true; return true
} }
const getShowText = () : string => { const getShowText = (): string => {
let showText =''; let showText = ''
if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) { if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
if (currentNode.value.attributes.conditionExpression) { if (currentNode.value.attributes.conditionExpression) {
showText = `表达式：${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; const groupAnd = conditionGroups.value.and
let warningMesg : undefined | string = undefined let warningMesg: undefined | string = undefined
const conditionGroup = conditionGroups.value.conditions.map( item => { const conditionGroup = conditionGroups.value.conditions.map((item) => {
return '(' + item.rules.map( rule => { return (
if ( rule.leftSide && rule.rightSide) { '(' +
return getFieldTitle(rule.leftSide) + " " + getOpName(rule.opCode) + " " + rule.rightSide item.rules
}else { .map((rule) => {
// 又一条规则不完善。提示错误 if (rule.leftSide && rule.rightSide) {
warningMesg = '请完善条件规则' return (
return '' getFieldTitle(rule.leftSide) + ' ' + getOpName(rule.opCode) + ' ' + rule.rightSide
} )
}).join(item.and ? ' 且 ' : ' 或 ' ) + ' ) ' } else {
} // 又一条规则不完善。提示错误
) warningMesg = '请完善条件规则'
return ''
}
})
.join(item.and ? ' 且 ' : ' 或 ') +
' ) '
)
})
if (warningMesg) { if (warningMesg) {
message.warning(warningMesg); message.warning(warningMesg)
showText = ''; showText = ''
} else { } else {
showText = conditionGroup.join( groupAnd ? ' 且 ' : ' 或 ' ); showText = conditionGroup.join(groupAnd ? ' 且 ' : ' 或 ')
} }
}
}
return showText return showText
} }
// 改变条件配置方式 // 改变条件配置方式
const changeConditionType = () => { const changeConditionType = () => {}
}
const conditionGroups = ref<ConditionGroup>({ const conditionGroups = ref<ConditionGroup>({
and : true, and: true,
conditions: [ conditions: [
{ {
and : true, and: true,
rules: [ rules: [
{ {
type: 1, type: 1,
opName: "等于", opName: '等于',
opCode: "==", opCode: '==',
leftSide: "", leftSide: '',
rightSide: "" rightSide: ''
} }
] ]
} }
@ -316,69 +340,54 @@ const conditionGroups = ref<ConditionGroup>({
// 添加条件组 // 添加条件组
const addConditionGroup = () => { const addConditionGroup = () => {
const condition = { const condition = {
and : true, and: true,
rules: [ rules: [
{ {
type: 1, type: 1,
opName: "等于", opName: '等于',
opCode: "==", opCode: '==',
leftSide: "", leftSide: '',
rightSide: "" rightSide: ''
} }
] ]
} }
conditionGroups.value.conditions.push(condition) conditionGroups.value.conditions.push(condition)
} }
// 删除条件组 // 删除条件组
const deleteConditionGroup = (idx:number) => { const deleteConditionGroup = (idx: number) => {
conditionGroups.value.conditions.splice(idx, 1) conditionGroups.value.conditions.splice(idx, 1)
} }
// 添加条件规则 // 添加条件规则
const addConditionRule = (condition:Condition, idx:number) => { const addConditionRule = (condition: Condition, idx: number) => {
const rule: ConditionRule = { const rule: ConditionRule = {
type: 1, type: 1,
opName: "等于", opName: '等于',
opCode: "==", opCode: '==',
leftSide: "", leftSide: '',
rightSide: "" 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) condition.rules.splice(idx, 1)
} }
let fieldsInfo : any[] = []; const fieldsInfo = useFormFields()
const getFieldsInfo = () => { const getFieldTitle = (field: string) => {
fieldsInfo = []; const item = fieldsInfo.find((item) => item.field === field)
if(formFields){ return item?.title
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 getOpName = (opCode: string) : string => { const getOpName = (opCode: string): string => {
const opName = COMPARISON_OPERATORS.find( item => item.value === opCode) const opName = COMPARISON_OPERATORS.find((item) => item.value === opCode)
return opName?.label return opName?.label
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.condition-group-tool { .condition-group-tool {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

30
src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
View File

@ -13,7 +13,7 @@
v-model="currentNode.name" v-model="currentNode.name"
:placeholder="currentNode.name" :placeholder="currentNode.name"
/> />
<div v-else class="node-title" @click="clickEvent"> <div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }} {{ currentNode.name }}
</div> </div>
</div> </div>
@ -40,8 +40,9 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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 NodeHandler from '../NodeHandler.vue'
import { useNodeName2, useWatchNode } from '../node'
import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue' import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
defineOptions({ defineOptions({
name: 'CopyTaskNode' name: 'CopyTaskNode'
@ -56,27 +57,12 @@ const props = defineProps({
const emits = defineEmits<{ const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined] 'update:flowNode': [node: SimpleFlowNode | undefined]
}>() }>()
const currentNode = ref<SimpleFlowNode>(props.flowNode)
// 监控当前节点的变化 // 监控节点的变化
watch( const currentNode = useWatchNode(props)
() => props.flowNode, // 节点名称编辑
(newValue) => { const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.COPY_TASK_NODE)
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 nodeSetting = ref() const nodeSetting = ref()
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { const openNodeConfig = () => {

22
src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
View File

@ -15,7 +15,7 @@
v-model="currentNode.name" v-model="currentNode.name"
:placeholder="currentNode.name" :placeholder="currentNode.name"
/> />
<div v-else class="node-title" @click="clickEvent"> <div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }} {{ currentNode.name }}
</div> </div>
</div> </div>
@ -37,8 +37,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import NodeHandler from '../NodeHandler.vue' import NodeHandler from '../NodeHandler.vue'
import { useWatchNode } from '../node' import { useWatchNode, useNodeName2 } from '../node'
import { SimpleFlowNode, NODE_DEFAULT_NAME, NODE_DEFAULT_TEXT, NodeType } from '../consts' import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue' import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
defineOptions({ defineOptions({
name: 'StartEventNode' name: 'StartEventNode'
@ -53,21 +53,11 @@ const props = defineProps({
const emits = defineEmits<{ const emits = defineEmits<{
'update:modelValue': [node: SimpleFlowNode | undefined] 'update:modelValue': [node: SimpleFlowNode | undefined]
}>() }>()
// 监控节点变化
const currentNode = useWatchNode(props) 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 nodeSetting = ref()
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { const openNodeConfig = () => {

24
src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
View File

@ -13,7 +13,7 @@
v-model="currentNode.name" v-model="currentNode.name"
:placeholder="currentNode.name" :placeholder="currentNode.name"
/> />
<div v-else class="node-title" @click="clickEvent"> <div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }} {{ currentNode.name }}
</div> </div>
</div> </div>
@ -44,8 +44,8 @@
/> />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts' import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import { useWatchNode } from '../node' import { useWatchNode, useNodeName2 } from '../node'
import NodeHandler from '../NodeHandler.vue' import NodeHandler from '../NodeHandler.vue'
import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue' import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
defineOptions({ defineOptions({
@ -61,9 +61,10 @@ const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined] 'update:flowNode': [node: SimpleFlowNode | undefined]
'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType] 'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
}>() }>()
// 监控节点变化
const currentNode = useWatchNode(props) const currentNode = useWatchNode(props)
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
const nodeSetting = ref() const nodeSetting = ref()
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { const openNodeConfig = () => {
@ -72,19 +73,6 @@ const openNodeConfig = () => {
nodeSetting.value.openDrawer() 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 = () => { const deleteNode = () => {
emits('update:flowNode', currentNode.value.childNode) emits('update:flowNode', currentNode.value.childNode)
} }

BIN
src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
View File

Binary file not shown.

BIN
src/components/SimpleProcessDesignerV2/theme/iconfont.woff
View File

Binary file not shown.

BIN
src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
View File

Binary file not shown.

15
src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
View File

@ -119,6 +119,9 @@
&.copy-task { &.copy-task {
color: #3296fa; color: #3296fa;
} }
&.start-user {
color: #676565;
}
} }
.node-title { .node-title {
@ -669,9 +672,9 @@
@font-face { @font-face {
font-family: 'iconfont'; /* Project id 4495938 */ font-family: 'iconfont'; /* Project id 4495938 */
src: src:
url('iconfont.woff2?t=1712392083512') format('woff2'), url('iconfont.woff2?t=1724339470412') format('woff2'),
url('iconfont.woff?t=1712392083512') format('woff'), url('iconfont.woff?t=1724339470412') format('woff'),
url('iconfont.ttf?t=1712392083512') format('truetype'); url('iconfont.ttf?t=1724339470412') format('truetype');
} }
.iconfont { .iconfont {
@ -682,7 +685,11 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-Inclusive:before { .icon-start-user:before {
content: '\e679';
}
.icon-inclusive:before {
content: '\e602'; content: '\e602';
} }