refactor: service, package => expansion workflow step
This commit is contained in:
puriphatt
parent
f68d49a0d9
commit
20856b2d0a
1 changed files with 133 additions and 122 deletions
|
|
@ -548,136 +548,147 @@ watch(
|
|||
|
||||
<!-- properties -->
|
||||
<div class="bordered-t">
|
||||
<div
|
||||
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
<q-expansion-item
|
||||
default-opened
|
||||
switch-toggle-side
|
||||
header-style="background-color: hsla(var(--info-bg) / 0.1); padding: 4px 16px; min-height: 36.08px"
|
||||
header-class="row items-center q-px-md"
|
||||
expand-icon-class="no-padding"
|
||||
dense
|
||||
>
|
||||
<span>
|
||||
{{ $t('flow.processStep') }}
|
||||
</span>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-add-work-product"
|
||||
class="text-capitalize rounded"
|
||||
flat
|
||||
dense
|
||||
padding="4px 8px"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click.stop="$emit('workProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="20.08px"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
/>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="q-py-md q-px-md full-width column">
|
||||
<span
|
||||
v-if="
|
||||
attributes.stepProperties?.length === 0 ||
|
||||
!attributes.stepProperties
|
||||
"
|
||||
class="app-text-muted"
|
||||
>
|
||||
{{ $t('flow.noProcessStep') }}
|
||||
</span>
|
||||
|
||||
<template
|
||||
v-for="(step, stepIndex) in attributes.stepProperties"
|
||||
:key="step.id"
|
||||
>
|
||||
<template #header>
|
||||
<div
|
||||
class="text-weight-medium row justify-between items-center full-width"
|
||||
>
|
||||
<span>
|
||||
{{ $t('flow.processStep') }}
|
||||
</span>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-add-work-product"
|
||||
class="text-capitalize rounded"
|
||||
flat
|
||||
dense
|
||||
padding="4px 8px"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click.stop="$emit('workProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="20.08px"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
/>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<div class="q-py-md q-px-md full-width column">
|
||||
<span
|
||||
v-if="
|
||||
attributes.stepProperties?.length > 0 &&
|
||||
step.attributes.length > 0
|
||||
attributes.stepProperties?.length === 0 ||
|
||||
!attributes.stepProperties
|
||||
"
|
||||
class="app-text-muted"
|
||||
>
|
||||
<q-icon name="mdi-circle-medium" />
|
||||
{{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
|
||||
{{ mapStepName(step.id) }}
|
||||
|
||||
<!-- step att -->
|
||||
<section
|
||||
class="col scroll q-pa-sm flex items-center surface-1 rounded"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
attributes.stepProperties[stepIndex].attributes.length > 0
|
||||
"
|
||||
class="row q-gutter-sm"
|
||||
>
|
||||
<span
|
||||
v-for="(att, i) in step.attributes"
|
||||
:key="i"
|
||||
class="surface-2 bordered rounded q-px-xs"
|
||||
>
|
||||
{{ optionStore.mapOption(att.fieldName ?? '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="app-text-muted-2">
|
||||
{{ $t('productService.service.noProperties') }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- step product -->
|
||||
<section
|
||||
class="q-pt-sm q-pl-lg column"
|
||||
:class="{
|
||||
'q-pb-sm':
|
||||
stepIndex !== attributes.stepProperties.length - 1,
|
||||
}"
|
||||
>
|
||||
<span class="app-text-muted-2 text-caption">
|
||||
{{
|
||||
$t('general.select', {
|
||||
msg: $t('productService.product.title'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-if="productItems.length > 0"
|
||||
class="surface-1 rounded q-pa-xs"
|
||||
>
|
||||
<div v-for="product in productItems" :key="product.id">
|
||||
<q-checkbox
|
||||
:disable="readonly"
|
||||
:model-value="
|
||||
attributes.stepProperties[
|
||||
stepIndex
|
||||
].productsId.includes(product.id)
|
||||
"
|
||||
@click="toggleCheckProductInStep(product.id, stepIndex)"
|
||||
size="xs"
|
||||
/>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-else
|
||||
class="app-text-muted-2 surface-1 rounded q-pa-xs"
|
||||
>
|
||||
{{ $t('productService.product.noProduct') }}
|
||||
</span>
|
||||
</section>
|
||||
{{ $t('flow.noProcessStep') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
attributes.workflowId &&
|
||||
attributes.stepProperties?.every(
|
||||
(s) => s.attributes.length === 0,
|
||||
)
|
||||
"
|
||||
class="app-text-muted"
|
||||
>
|
||||
{{ $t('productService.service.noPropertiesYet') }}
|
||||
</span>
|
||||
</div>
|
||||
<template
|
||||
v-for="(step, stepIndex) in attributes.stepProperties"
|
||||
:key="step.id"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
attributes.stepProperties?.length > 0 &&
|
||||
step.attributes.length > 0
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-circle-medium" />
|
||||
{{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
|
||||
{{ mapStepName(step.id) }}
|
||||
|
||||
<!-- step att -->
|
||||
<section
|
||||
class="col scroll q-pa-sm flex items-center surface-1 rounded"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
attributes.stepProperties[stepIndex].attributes.length >
|
||||
0
|
||||
"
|
||||
class="row q-gutter-sm"
|
||||
>
|
||||
<span
|
||||
v-for="(att, i) in step.attributes"
|
||||
:key="i"
|
||||
class="surface-2 bordered rounded q-px-xs"
|
||||
>
|
||||
{{ optionStore.mapOption(att.fieldName ?? '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="app-text-muted-2">
|
||||
{{ $t('productService.service.noProperties') }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- step product -->
|
||||
<section
|
||||
class="q-pt-sm q-pl-lg column"
|
||||
:class="{
|
||||
'q-pb-sm':
|
||||
stepIndex !== attributes.stepProperties.length - 1,
|
||||
}"
|
||||
>
|
||||
<span class="app-text-muted-2 text-caption">
|
||||
{{
|
||||
$t('general.select', {
|
||||
msg: $t('productService.product.title'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-if="productItems.length > 0"
|
||||
class="surface-1 rounded q-pa-xs"
|
||||
>
|
||||
<div v-for="product in productItems" :key="product.id">
|
||||
<q-checkbox
|
||||
:disable="readonly"
|
||||
:model-value="
|
||||
attributes.stepProperties[
|
||||
stepIndex
|
||||
].productsId.includes(product.id)
|
||||
"
|
||||
@click="
|
||||
toggleCheckProductInStep(product.id, stepIndex)
|
||||
"
|
||||
size="xs"
|
||||
/>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-else
|
||||
class="app-text-muted-2 surface-1 rounded q-pa-xs"
|
||||
>
|
||||
{{ $t('productService.product.noProduct') }}
|
||||
</span>
|
||||
</section>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
attributes.workflowId &&
|
||||
attributes.stepProperties?.every(
|
||||
(s) => s.attributes.length === 0,
|
||||
)
|
||||
"
|
||||
class="app-text-muted"
|
||||
>
|
||||
{{ $t('productService.service.noPropertiesYet') }}
|
||||
</span>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<!-- <div class="q-py-md q-px-md full-width">
|
||||
<div
|
||||
v-if="attributes.additional.length > 0"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue