style(sj_map_reduce): 优化工作流各节点样式

This commit is contained in:
xlsea 2024-07-03 09:30:20 +08:00
parent cdf91334a8
commit 78a6d9f895
5 changed files with 26 additions and 35 deletions

View File

@ -19,8 +19,8 @@ const onCreate = () => {
const dynamicInputRule = [ const dynamicInputRule = [
{ {
trigger: ['input', 'blur'], trigger: ['input', 'blur'],
validator(_: unknown, value: string) { validator(_: unknown, value: string | number) {
if (!value) return new Error('不能为空'); if (!value && value !== 0) return new Error('不能为空');
return true; return true;
} }
} }
@ -44,11 +44,11 @@ const typeOptions = [
const boolenOptions = [ const boolenOptions = [
{ {
label: 'true', label: 'true',
value: 0 value: 1
}, },
{ {
label: 'false', label: 'false',
value: 1 value: 0
} }
]; ];
@ -58,7 +58,7 @@ const handleUpdateType = (index: number) => {
} }
if (content.value[index].type === 'boolean') { if (content.value[index].type === 'boolean') {
content.value[index].value = 1; content.value[index].value = 0;
} }
if (content.value[index].type === 'number') { if (content.value[index].type === 'number') {
@ -69,21 +69,21 @@ const handleUpdateType = (index: number) => {
<template> <template>
<NDynamicInput v-model:value="content" item-style="margin-bottom: 0;" :on-create="onCreate" #="{ index }"> <NDynamicInput v-model:value="content" item-style="margin-bottom: 0;" :on-create="onCreate" #="{ index }">
<div class="flex"> <NGrid :x-gap="16">
<NFormItem <NFormItemGi
:span="8"
ignore-path-change ignore-path-change
:show-label="false" :show-label="false"
:show-feedback="false"
:rule="dynamicInputRule" :rule="dynamicInputRule"
:path="`${path}[${index}].key`" :path="`${path}[${index}].key`"
> >
<NInput v-model:value="content[index].key" placeholder="key" @keydown.enter.prevent /> <NInput v-model:value="content[index].key" placeholder="key" @keydown.enter.prevent />
</NFormItem> </NFormItemGi>
<div class="mx-8px h-34px lh-34px">=</div> <NGi :span="1" class="h-34px lh-34px">=</NGi>
<NFormItem <NFormItemGi
:span="8"
ignore-path-change ignore-path-change
:show-label="false" :show-label="false"
:show-feedback="false"
:rule="dynamicInputRule" :rule="dynamicInputRule"
:path="`${path}[${index}].value`" :path="`${path}[${index}].value`"
> >
@ -96,35 +96,32 @@ const handleUpdateType = (index: number) => {
<NInputNumber <NInputNumber
v-if="content[index].type === 'number'" v-if="content[index].type === 'number'"
v-model:value="content[index].value as number" v-model:value="content[index].value as number"
class="w-full"
placeholder="value" placeholder="value"
@keydown.enter.prevent @keydown.enter.prevent
/> />
<NSelect <NSelect
v-if="content[index].type === 'boolean'" v-if="content[index].type === 'boolean'"
v-model:value="content[index].value as number" v-model:value="content[index].value as number"
class="w-full"
:options="boolenOptions" :options="boolenOptions"
placeholder="value" placeholder="value"
@keydown.enter.prevent @keydown.enter.prevent
/> />
</NFormItem> </NFormItemGi>
<div class="mx-3px h-34px lh-34px">(</div> <NFormItemGi :span="3" class="w-130px" ignore-path-change :show-label="false" :path="`${path}[${index}].type`">
<NFormItem <div :span="1" class="h-34px lh-34px">(</div>
class="w-170px"
ignore-path-change
:show-label="false"
:show-feedback="false"
:path="`${path}[${index}].type`"
>
<NSelect <NSelect
v-model:value="content[index].type" v-model:value="content[index].type"
class="mx-3px"
:options="typeOptions" :options="typeOptions"
placeholder="字段类型" placeholder="字段类型"
@keydown.enter.prevent @keydown.enter.prevent
@update:value="handleUpdateType(index)" @update:value="handleUpdateType(index)"
/> />
</NFormItem> <div :span="1" class="h-34px lh-34px">)</div>
<div class="ml-3px h-34px lh-34px">)</div> </NFormItemGi>
</div> </NGrid>
</NDynamicInput> </NDynamicInput>
</template> </template>

View File

@ -3,7 +3,7 @@ import { nextTick, onMounted, ref } from 'vue';
import CodeMirror from 'vue-codemirror6'; import CodeMirror from 'vue-codemirror6';
import { oneDark } from '@codemirror/theme-one-dark'; import { oneDark } from '@codemirror/theme-one-dark';
import { javascript } from '@codemirror/lang-javascript'; import { javascript } from '@codemirror/lang-javascript';
import { expressionRecord, logicalConditionRecord } from '@/constants/business'; import { expressionRecord } from '@/constants/business';
defineOptions({ defineOptions({
name: 'BranchDesc' name: 'BranchDesc'
@ -66,9 +66,6 @@ onMounted(() => {
<template> <template>
<NDescriptions id="branch-desc" :column="2" label-placement="left" bordered :label-style="{ width: '120px' }"> <NDescriptions id="branch-desc" :column="2" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="节点名称" :span="2">{{ modelValue.nodeName }}</NDescriptionsItem> <NDescriptionsItem label="节点名称" :span="2">{{ modelValue.nodeName }}</NDescriptionsItem>
<NDescriptionsItem label="判定逻辑">
{{ logicalConditionRecord[modelValue.decision?.logicalCondition!] }}
</NDescriptionsItem>
<NDescriptionsItem label="表达式类型"> <NDescriptionsItem label="表达式类型">
{{ expressionRecord[modelValue.decision?.expressionType!] }} {{ expressionRecord[modelValue.decision?.expressionType!] }}
</NDescriptionsItem> </NDescriptionsItem>

View File

@ -89,7 +89,6 @@ const checkNodeExpression = async () => {
const rules: FormRules = { const rules: FormRules = {
decision: { decision: {
logicalCondition: [{ required: true, message: '请选择判定逻辑', trigger: 'change', type: 'number' }],
expressionType: [{ required: true, message: '请选择表达式类型', trigger: 'change', type: 'number' }], expressionType: [{ required: true, message: '请选择表达式类型', trigger: 'change', type: 'number' }],
nodeExpression: [{ required: true, validator: checkNodeExpression, trigger: 'blur' }] nodeExpression: [{ required: true, validator: checkNodeExpression, trigger: 'blur' }]
} }

View File

@ -2,7 +2,7 @@
import { nextTick, ref, watch } from 'vue'; import { nextTick, ref, watch } from 'vue';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { useWorkflowStore } from '@/store/modules/workflow'; import { useWorkflowStore } from '@/store/modules/workflow';
import { expressionRecord, logicalConditionRecord, taskBatchStatusEnum } from '@/constants/business'; import { expressionRecord, taskBatchStatusEnum } from '@/constants/business';
import BranchDrawer from '../drawer/branch-drawer.vue'; import BranchDrawer from '../drawer/branch-drawer.vue';
import BranchDetail from '../detail/branch-detail.vue'; import BranchDetail from '../detail/branch-detail.vue';
import DetailCard from '../common/detail-card.vue'; import DetailCard from '../common/detail-card.vue';
@ -92,12 +92,10 @@ const arrTransfer = (index: number, type: number = 1) => {
const toText = (node: Workflow.NodeModelType, currentIndex: number) => { const toText = (node: Workflow.NodeModelType, currentIndex: number) => {
const { nodeName, decision } = node.conditionNodes![currentIndex]; const { nodeName, decision } = node.conditionNodes![currentIndex];
const { logicalCondition, expressionType, nodeExpression } = decision!; const { expressionType, nodeExpression } = decision!;
if (nodeExpression) { if (nodeExpression) {
if (nodeName !== $t('workflow.node.condition.conditionNodes.otherNodeName')) { if (nodeName !== $t('workflow.node.condition.conditionNodes.otherNodeName')) {
const text = `<span class="content_label">${$t('workflow.node.condition.conditionNodes.logicalCondition')}: </span>${ const text = `<span class="content_label">${$t('workflow.node.condition.conditionNodes.expressionType')}: </span>${
logicalConditionRecord[logicalCondition!]
}\n<span class="content_label">${$t('workflow.node.condition.conditionNodes.expressionType')}: </span>${
expressionRecord[expressionType!] expressionRecord[expressionType!]
}\n<span class="content_label">${$t('workflow.node.condition.conditionNodes.nodeExpression')}: </span><span style="display: inline-block; vertical-align: bottom; width: 120px; overflow: hidden; text-overflow: ellipsis">${nodeExpression}<span/>`; }\n<span class="content_label">${$t('workflow.node.condition.conditionNodes.nodeExpression')}: </span><span style="display: inline-block; vertical-align: bottom; width: 120px; overflow: hidden; text-overflow: ellipsis">${nodeExpression}<span/>`;
return text; return text;

View File

@ -169,7 +169,7 @@ export function parseContent(value?: { key: string; value: string | number | boo
} }
if (item.type === 'boolean') { if (item.type === 'boolean') {
obj[item.key] = item.value === 0; obj[item.key] = item.value === 1;
} }
if (item.type === 'number') { if (item.type === 'number') {