refactor: workflow
This commit is contained in:
puriphatt
parent
249f7d59f5
commit
3395995f68
4 changed files with 562 additions and 165 deletions
285
src/pages/04_flow-managment/FlowDialog.vue
Normal file
285
src/pages/04_flow-managment/FlowDialog.vue
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<script lang="ts" setup>
|
||||
import { nextTick } from 'vue';
|
||||
import {
|
||||
WorkflowUserInTable,
|
||||
WorkflowTemplatePayload,
|
||||
} from 'src/stores/workflow-template/types';
|
||||
|
||||
import FormFlow from 'src/components/04_flow-management/FormFlow.vue';
|
||||
import DialogForm from 'src/components/DialogForm.vue';
|
||||
import SideMenu from 'src/components/SideMenu.vue';
|
||||
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||||
import {
|
||||
UndoButton,
|
||||
SaveButton,
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
} from 'src/components/button';
|
||||
|
||||
const model = defineModel<boolean>({ required: true, default: false });
|
||||
const drawerModel = defineModel<boolean>('drawerModel', {
|
||||
required: true,
|
||||
default: false,
|
||||
});
|
||||
const registerBranchId = defineModel('registerBranchId', { default: '' });
|
||||
const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
|
||||
required: true,
|
||||
default: {
|
||||
name: '',
|
||||
step: [],
|
||||
},
|
||||
});
|
||||
const userInTable = defineModel<WorkflowUserInTable[]>('userInTable', {
|
||||
default: [],
|
||||
});
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
isEdit?: boolean;
|
||||
}>(),
|
||||
{ readonly: false, isEdit: false },
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'submit'): void;
|
||||
(e: 'close'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
(e: 'drawerUndo'): void;
|
||||
(e: 'drawerEdit'): void;
|
||||
(e: 'drawerDelete'): void;
|
||||
}>();
|
||||
|
||||
async function addStep() {
|
||||
flowData.value.step.push({
|
||||
responsiblePersonId: [],
|
||||
value: [],
|
||||
name: '',
|
||||
});
|
||||
|
||||
await nextTick();
|
||||
const scrollTarget = document.getElementById(
|
||||
`input-flow-step-name-${flowData.value.step.length - 1}`,
|
||||
);
|
||||
if (scrollTarget)
|
||||
scrollTarget.scrollIntoView({ behavior: 'instant', inline: 'center' });
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<DialogForm
|
||||
:title="$t('flow.title')"
|
||||
v-model:modal="model"
|
||||
:submit="() => $emit('submit')"
|
||||
:close="() => $emit('close')"
|
||||
>
|
||||
<div
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
:class="{
|
||||
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<section
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('general.name', { msg: $t('flow.template') }),
|
||||
anchor: 'form-flow-template',
|
||||
},
|
||||
{
|
||||
name: $t('flow.processStep'),
|
||||
anchor: 'form-flow-step',
|
||||
useBtn: true,
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#flow-form"
|
||||
>
|
||||
<template v-slot:btn-form-flow-step>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="mdi-plus"
|
||||
size="sm"
|
||||
rounded
|
||||
id="btn-add-step"
|
||||
padding="0px 0px"
|
||||
style="color: var(--stone-9)"
|
||||
@click.stop="addStep"
|
||||
:disabled="readonly"
|
||||
/>
|
||||
</template>
|
||||
</SideMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="flow-form"
|
||||
>
|
||||
<FormFlow
|
||||
v-model:flow-data="flowData"
|
||||
v-model:register-branch-id="registerBranchId"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
||||
<DrawerInfo
|
||||
bg-on
|
||||
hide-action
|
||||
:is-edit="isEdit"
|
||||
:title="flowData.name"
|
||||
v-model:drawerOpen="drawerModel"
|
||||
:submit="() => $emit('submit')"
|
||||
:close="() => $emit('close')"
|
||||
>
|
||||
<div class="col column full-height">
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
id="drawer-user-form"
|
||||
:class="{
|
||||
'q-px-lg q-py-md': $q.screen.gt.sm,
|
||||
'q-px-md q-py-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
||||
>
|
||||
<div
|
||||
class="rounded row"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
>
|
||||
<div
|
||||
v-if="flowData.status !== 'INACTIVE'"
|
||||
class="surface-1 row rounded"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="isEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerUndo');
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="isEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!isEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerEdit');
|
||||
// infoDrawerEdit = true;
|
||||
// isImageEdit = true;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!isEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerDelete');
|
||||
// onDelete(currentUser.id);
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<section
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('general.name', { msg: $t('flow.template') }),
|
||||
anchor: 'form-flow-template',
|
||||
},
|
||||
{
|
||||
name: $t('flow.processStep'),
|
||||
anchor: 'form-flow-step',
|
||||
useBtn: true,
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#flow-form"
|
||||
>
|
||||
<template v-slot:btn-form-flow-step>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="mdi-plus"
|
||||
size="sm"
|
||||
rounded
|
||||
id="btn-add-step"
|
||||
padding="0px 0px"
|
||||
style="color: var(--stone-9)"
|
||||
@click.stop="addStep"
|
||||
:disabled="readonly"
|
||||
/>
|
||||
</template>
|
||||
</SideMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="flow-form"
|
||||
>
|
||||
<FormFlow
|
||||
:readonly
|
||||
@change-status="$emit('changeStatus')"
|
||||
onDrawer
|
||||
v-model:user-in-table="userInTable"
|
||||
v-model:flow-data="flowData"
|
||||
v-model:register-branch-id="registerBranchId"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerInfo>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue