style(sj_map_reduce): 优化工作流各节点样式
This commit is contained in:
parent
cdf91334a8
commit
78a6d9f895
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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' }]
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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') {
|
||||||
|
Loading…
Reference in New Issue
Block a user