refactor: flow
This commit is contained in:
puriphatt
parent
b0cb6061af
commit
1fe2c3a96c
4 changed files with 348 additions and 30 deletions
|
|
@ -1,12 +1,23 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { QTableProps } from 'quasar';
|
||||
import { moveItemUp, moveItemDown, deleteItem } from 'src/stores/utils';
|
||||
|
||||
import useUserStore from 'src/stores/user';
|
||||
import useOptionStore from 'src/stores/options';
|
||||
import { baseUrl } from 'stores/utils';
|
||||
import { getRole } from 'src/services/keycloak';
|
||||
import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
|
||||
import { User } from 'src/stores/user/types';
|
||||
|
||||
import SelectInput from '../shared/SelectInput.vue';
|
||||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
||||
import { DeleteButton } from '../button';
|
||||
import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
const registerBranchId = defineModel('registerBranchId', { default: '' });
|
||||
const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
|
||||
required: true,
|
||||
default: {
|
||||
|
|
@ -15,6 +26,9 @@ const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
|
|||
},
|
||||
});
|
||||
|
||||
const role = ref<string[]>([]);
|
||||
const userList = ref<User[]>([]);
|
||||
const userInTable = ref<User[]>([]);
|
||||
const responsiblePersonSearch = ref('');
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -37,10 +51,48 @@ const columns = [
|
|||
},
|
||||
] satisfies QTableProps['columns'];
|
||||
|
||||
async function getUserList(opts?: { query: string }) {
|
||||
const resUser = await userStore.fetchList({
|
||||
query: !!opts?.query ? opts.query : undefined,
|
||||
});
|
||||
if (resUser) userList.value = resUser.result;
|
||||
}
|
||||
|
||||
async function getUserById(responsiblePersonId: string) {
|
||||
const resUser = await userStore.fetchById(responsiblePersonId);
|
||||
if (resUser) userInTable.value.push(resUser);
|
||||
}
|
||||
|
||||
function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
|
||||
const currStep = flowData.value.step[stepIndex];
|
||||
const existPersonIndex = currStep.responsiblePersonId?.findIndex(
|
||||
(p) => p === responsiblePerson.id,
|
||||
);
|
||||
|
||||
if (existPersonIndex === -1) {
|
||||
currStep.responsiblePersonId?.push(responsiblePerson.id);
|
||||
userInTable.value.push(responsiblePerson);
|
||||
} else {
|
||||
currStep.responsiblePersonId?.splice(Number(existPersonIndex), 1);
|
||||
userInTable.value.splice(Number(existPersonIndex), 1);
|
||||
}
|
||||
}
|
||||
|
||||
defineEmits<{
|
||||
(e: 'moveUp'): void;
|
||||
(e: 'moveDown'): void;
|
||||
}>();
|
||||
|
||||
watch(
|
||||
responsiblePersonSearch,
|
||||
async () => await getUserList({ query: responsiblePersonSearch.value }),
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
role.value = getRole() || [];
|
||||
await userStore.fetchHqOption();
|
||||
getUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -57,23 +109,30 @@ defineEmits<{
|
|||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`general.name`, { msg: $t('flow.title') }) }}
|
||||
<span class="row items-center q-ml-auto text-weight-regular">
|
||||
<span class="row items-center q-ml-auto text-weight-regular text-body2">
|
||||
{{ $t('status.title') }}
|
||||
<ToggleButton class="q-ml-md" />
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<section id="form-flow-template" class="col-12 row">
|
||||
<SelectInput
|
||||
v-model="registerBranchId"
|
||||
v-if="role.includes('system')"
|
||||
class="col-12 q-pb-sm"
|
||||
:option="userStore.userOption.hqOpts"
|
||||
:label="$t('branch.form.code')"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
class="col"
|
||||
class="col-12"
|
||||
id="input-flow-template-name"
|
||||
v-model="flowData.name"
|
||||
hide-bottom-space
|
||||
:label="$t(`general.name`, { msg: $t('flow.step') })"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
></q-input>
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section
|
||||
|
|
@ -166,11 +225,74 @@ defineEmits<{
|
|||
|
||||
<q-td>
|
||||
<q-field @click.stop dense outlined>
|
||||
<span class="app-text-muted row items-center col">
|
||||
<span
|
||||
v-if="props.row.responsiblePersonId.length === 0"
|
||||
class="app-text-muted row items-center col"
|
||||
>
|
||||
{{ $t('general.no', { msg: $t('flow.responsiblePerson') }) }}
|
||||
<q-icon name="mdi-chevron-down" class="q-ml-auto" />
|
||||
</span>
|
||||
<q-menu style="width: 18rem" :offset="[0, 4]">
|
||||
<div v-else>
|
||||
<div class="row items-center no-wrap">
|
||||
<q-avatar class="q-ml-sm" size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/user/${userInTable[props.rowIndex].id}/profile-image/${userInTable[props.rowIndex].selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="no-padding full-width full-height flex items-center justify-center"
|
||||
:style="`${userInTable[props.rowIndex].gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
|
||||
>
|
||||
<q-img
|
||||
v-if="userInTable[props.rowIndex].gender"
|
||||
:src="
|
||||
userInTable[props.rowIndex].gender === 'male'
|
||||
? '/no-img-man.png'
|
||||
: '/no-img-female.png'
|
||||
"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
size="sm"
|
||||
name="mdi-account-outline"
|
||||
style="color: white"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<div
|
||||
class="column q-pl-md"
|
||||
style="color: var(--foreground)"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
`${optionStore.mapOption(userInTable[props.rowIndex].namePrefix || '')} ${
|
||||
$i18n.locale === 'eng'
|
||||
? userInTable[props.rowIndex].firstNameEN
|
||||
: userInTable[props.rowIndex].firstName
|
||||
} ${
|
||||
$i18n.locale === 'eng'
|
||||
? userInTable[props.rowIndex].lastNameEN
|
||||
: userInTable[props.rowIndex].lastName
|
||||
}`
|
||||
}}
|
||||
</span>
|
||||
<span class="text-caption app-text-muted">
|
||||
{{ userInTable[props.rowIndex].code }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="q-pl-md"
|
||||
v-if="props.row.responsiblePersonId.length > 1"
|
||||
>
|
||||
({{ props.row.responsiblePersonId.length }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<q-menu :offset="[0, 4]">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-input
|
||||
|
|
@ -189,24 +311,80 @@ defineEmits<{
|
|||
</q-input>
|
||||
</q-item>
|
||||
<span class="text-caption app-text-muted-2 q-px-md">
|
||||
ผู้คน
|
||||
{{ $t('general.people') }}
|
||||
</span>
|
||||
|
||||
<q-item clickable class="column">
|
||||
<div class="row items-center">
|
||||
<q-checkbox :model-value="false" size="xs"></q-checkbox>
|
||||
<q-item
|
||||
v-for="(person, i) in userList"
|
||||
:key="i"
|
||||
clickable
|
||||
class="column"
|
||||
@click.stop="
|
||||
selectResponiblePerson(props.rowIndex, person)
|
||||
"
|
||||
>
|
||||
<div class="row items-center no-wrap">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="
|
||||
props.row.responsiblePersonId.includes(person.id)
|
||||
"
|
||||
@click.stop="
|
||||
selectResponiblePerson(props.rowIndex, person)
|
||||
"
|
||||
/>
|
||||
<q-avatar class="q-ml-sm" size="md">
|
||||
<q-img :src="`/images/employee-avatar.png`" />
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/user/${person.id}/profile-image/${person.selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="no-padding full-width full-height flex items-center justify-center"
|
||||
:style="`${person.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
|
||||
>
|
||||
<q-img
|
||||
v-if="person.gender"
|
||||
:src="
|
||||
person.gender === 'male'
|
||||
? '/no-img-man.png'
|
||||
: '/no-img-female.png'
|
||||
"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
size="sm"
|
||||
name="mdi-account-outline"
|
||||
style="color: white"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<div class="column q-pl-md">
|
||||
<span>นาย กอไก่ ขอไข่</span>
|
||||
<span class="text-caption app-text-muted">10002</span>
|
||||
<span>
|
||||
{{
|
||||
`${optionStore.mapOption(person.namePrefix || '')} ${
|
||||
$i18n.locale === 'eng'
|
||||
? person.firstNameEN
|
||||
: person.firstName
|
||||
} ${
|
||||
$i18n.locale === 'eng'
|
||||
? person.lastNameEN
|
||||
: person.lastName
|
||||
}`
|
||||
}}
|
||||
</span>
|
||||
<span class="text-caption app-text-muted">
|
||||
{{ person.code }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
|
||||
<span class="text-caption app-text-muted-2 q-px-md">
|
||||
กลุ่ม
|
||||
{{ $t('general.group') }}
|
||||
</span>
|
||||
<q-item clickable class="column">
|
||||
<div class="row items-center">
|
||||
|
|
@ -215,7 +393,7 @@ defineEmits<{
|
|||
<q-img :src="`/images/employee-avatar.png`" />
|
||||
</q-avatar>
|
||||
<div class="column q-pl-md">
|
||||
<span>กลุ่มคาโมมายด์</span>
|
||||
<span>กลุ่มคาโมมายด์ (Mocking)</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ defineEmits<{
|
|||
:idName="code"
|
||||
status="ACTIVE"
|
||||
hide-toggle
|
||||
use-link
|
||||
use-upload
|
||||
@view="$emit('view')"
|
||||
@edit="$emit('edit')"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,104 @@
|
|||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
|
||||
import {
|
||||
WorkflowTemplate,
|
||||
WorkflowTemplatePayload,
|
||||
} from 'src/stores/workflow-template/types';
|
||||
import { useWorkflowTemplate } from 'src/stores/workflow-template';
|
||||
|
||||
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
import CreateButton from 'src/components/AddButton.vue';
|
||||
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||
import FlowDialog from '../04_product-service/FlowDialog.vue';
|
||||
import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
|
||||
import NoData from 'src/components/NoData.vue';
|
||||
import { QTableProps } from 'quasar';
|
||||
|
||||
const workflowStore = useWorkflowTemplate();
|
||||
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
inputSearch: '',
|
||||
fieldSelected: [],
|
||||
gridView: true,
|
||||
gridView: false,
|
||||
total: 0,
|
||||
|
||||
addModal: false,
|
||||
});
|
||||
|
||||
const formFlowData = ref<WorkflowTemplatePayload>({
|
||||
const workflowList = ref<WorkflowTemplate[]>([]);
|
||||
const formDataWorkflow = ref<WorkflowTemplatePayload>({
|
||||
name: '',
|
||||
step: [],
|
||||
});
|
||||
|
||||
const registeredBranchId = ref('');
|
||||
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||
const columns = [
|
||||
{
|
||||
name: 'order',
|
||||
align: 'center',
|
||||
label: 'general.order',
|
||||
field: 'order',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
align: 'center',
|
||||
label: 'general.name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
name: 'step',
|
||||
align: 'center',
|
||||
label: 'general.numberOf',
|
||||
field: 'step',
|
||||
},
|
||||
{
|
||||
name: 'action',
|
||||
align: 'center',
|
||||
label: '',
|
||||
field: 'action',
|
||||
},
|
||||
] satisfies QTableProps['columns'];
|
||||
|
||||
function triggerAddDialog() {
|
||||
pageState.addModal = true;
|
||||
}
|
||||
|
||||
async function submitAdd() {
|
||||
const res = await workflowStore.creatWorkflowTemplate({
|
||||
registeredBranchId: registeredBranchId.value,
|
||||
...formDataWorkflow.value,
|
||||
});
|
||||
if (res) {
|
||||
pageState.addModal = false;
|
||||
await fetchWorkflowList();
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formDataWorkflow.value = {
|
||||
name: '',
|
||||
step: [],
|
||||
};
|
||||
}
|
||||
|
||||
async function fetchWorkflowList() {
|
||||
const res = await workflowStore.getWorkflowTemplateList();
|
||||
if (res) workflowList.value = res.result;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchWorkflowList();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<ButtonAddComponent
|
||||
style="z-index: 999"
|
||||
hide-icon
|
||||
@click="triggerAddDialog"
|
||||
></ButtonAddComponent>
|
||||
|
||||
<div class="column full-height no-wrap">
|
||||
<!-- SEC: stat -->
|
||||
<section class="text-body-2 q-mb-xs flex items-center">
|
||||
|
|
@ -100,7 +170,6 @@ function triggerAddDialog() {
|
|||
</q-input>
|
||||
|
||||
<div
|
||||
v-if="true"
|
||||
class="row col-12 col-md-4 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
|
|
@ -142,6 +211,7 @@ function triggerAddDialog() {
|
|||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
v-if="false"
|
||||
id="btn-mode"
|
||||
v-model="pageState.gridView"
|
||||
dense
|
||||
|
|
@ -192,7 +262,7 @@ function triggerAddDialog() {
|
|||
|
||||
<!-- SEC: body content -->
|
||||
<article
|
||||
v-if="true"
|
||||
v-if="workflowList.length === 0 && !pageState.inputSearch"
|
||||
class="col surface-2 flex items-center justify-center"
|
||||
>
|
||||
<NoData
|
||||
|
|
@ -207,7 +277,58 @@ function triggerAddDialog() {
|
|||
:i18n-args="{ text: $t('flow.title') }"
|
||||
/>
|
||||
</article>
|
||||
<article v-else class="col q-pa-md surface-2 scroll"></article>
|
||||
<article v-else class="col q-pa-md surface-2 scroll">
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
hide-pagination
|
||||
:columns="columns"
|
||||
:rows="workflowList"
|
||||
>
|
||||
<template #header="{ cols }">
|
||||
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
||||
<q-th
|
||||
v-for="v in cols"
|
||||
:key="v"
|
||||
:class="{
|
||||
'text-left': v.name === 'name',
|
||||
'text-right': v.name === 'step',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
v.label &&
|
||||
$t(v.label, {
|
||||
msg:
|
||||
v.name === 'step'
|
||||
? $t('flow.step')
|
||||
: v.name === 'name'
|
||||
? $t('flow.title')
|
||||
: '',
|
||||
})
|
||||
}}
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template #body="props">
|
||||
<q-tr>
|
||||
<q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
|
||||
<q-td>{{ props.row.name }}</q-td>
|
||||
<q-td class="text-right">{{ props.row.step.length }}</q-td>
|
||||
<q-td class="text-right">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="$emit('view', props.rowIndex)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</article>
|
||||
|
||||
<!-- SEC: footer content -->
|
||||
<!-- <footer
|
||||
|
|
@ -265,5 +386,11 @@ function triggerAddDialog() {
|
|||
</section>
|
||||
</div>
|
||||
|
||||
<FlowDialog v-model="pageState.addModal" v-model:flow-data="formFlowData" />
|
||||
<FlowDialog
|
||||
@close="resetForm"
|
||||
@submit="submitAdd"
|
||||
v-model="pageState.addModal"
|
||||
v-model:flow-data="formDataWorkflow"
|
||||
v-model:register-branch-id="registeredBranchId"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import FormFlow from 'src/components/04_flow-management/FormFlow.vue';
|
|||
import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
const registerBranchId = defineModel('registerBranchId', { default: '' });
|
||||
const model = defineModel<boolean>({ required: true, default: false });
|
||||
const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
|
||||
required: true,
|
||||
|
|
@ -21,10 +22,15 @@ withDefaults(
|
|||
{ readonly: false },
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'submit'): void;
|
||||
(e: 'close'): void;
|
||||
}>();
|
||||
|
||||
async function addStep() {
|
||||
flowData.value.step.push({
|
||||
responsiblePersonId: [''],
|
||||
value: [''],
|
||||
responsiblePersonId: [],
|
||||
value: [],
|
||||
name: '',
|
||||
});
|
||||
|
||||
|
|
@ -37,7 +43,12 @@ async function addStep() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<DialogForm :title="$t('flow.title')" v-model:modal="model">
|
||||
<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="{
|
||||
|
|
@ -97,7 +108,10 @@ async function addStep() {
|
|||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="flow-form"
|
||||
>
|
||||
<FormFlow v-model:flow-data="flowData" />
|
||||
<FormFlow
|
||||
v-model:flow-data="flowData"
|
||||
v-model:register-branch-id="registerBranchId"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue