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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
import { nextTick, ref, watch } from 'vue';
import { $t } from '@/locales';
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 BranchDetail from '../detail/branch-detail.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 { nodeName, decision } = node.conditionNodes![currentIndex];
const { logicalCondition, expressionType, nodeExpression } = decision!;
const { expressionType, nodeExpression } = decision!;
if (nodeExpression) {
if (nodeName !== $t('workflow.node.condition.conditionNodes.otherNodeName')) {
const text = `<span class="content_label">${$t('workflow.node.condition.conditionNodes.logicalCondition')}: </span>${
logicalConditionRecord[logicalCondition!]
}\n<span class="content_label">${$t('workflow.node.condition.conditionNodes.expressionType')}: </span>${
const text = `<span class="content_label">${$t('workflow.node.condition.conditionNodes.expressionType')}: </span>${
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/>`;
return text;

View File

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