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')"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue