refactor: workflow
This commit is contained in:
puriphatt
parent
249f7d59f5
commit
3395995f68
4 changed files with 562 additions and 165 deletions
|
|
@ -7,20 +7,32 @@ 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 {
|
||||
WorkflowUserInTable,
|
||||
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';
|
||||
|
||||
const props = defineProps<{
|
||||
readonly?: boolean;
|
||||
onDrawer?: boolean;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
const userInTable = defineModel<WorkflowUserInTable[]>('userInTable', {
|
||||
default: [],
|
||||
});
|
||||
const registerBranchId = defineModel('registerBranchId', { default: '' });
|
||||
const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
|
||||
required: true,
|
||||
default: {
|
||||
status: 'CREATED',
|
||||
name: '',
|
||||
step: [],
|
||||
},
|
||||
|
|
@ -28,7 +40,6 @@ const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
|
|||
|
||||
const role = ref<string[]>([]);
|
||||
const userList = ref<User[]>([]);
|
||||
const userInTable = ref<User[]>([]);
|
||||
const responsiblePersonSearch = ref('');
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -58,10 +69,10 @@ async function getUserList(opts?: { query: string }) {
|
|||
if (resUser) userList.value = resUser.result;
|
||||
}
|
||||
|
||||
async function getUserById(responsiblePersonId: string) {
|
||||
const resUser = await userStore.fetchById(responsiblePersonId);
|
||||
if (resUser) userInTable.value.push(resUser);
|
||||
}
|
||||
// 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];
|
||||
|
|
@ -71,16 +82,38 @@ function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
|
|||
|
||||
if (existPersonIndex === -1) {
|
||||
currStep.responsiblePersonId?.push(responsiblePerson.id);
|
||||
userInTable.value.push(responsiblePerson);
|
||||
|
||||
if (!userInTable.value[stepIndex]) {
|
||||
userInTable.value[stepIndex] = {
|
||||
name: flowData.value.step[stepIndex].name,
|
||||
resposiblePerson: [],
|
||||
};
|
||||
}
|
||||
|
||||
userInTable.value[stepIndex]?.resposiblePerson.push({
|
||||
id: responsiblePerson.id,
|
||||
selectedImage: responsiblePerson.selectedImage,
|
||||
gender: responsiblePerson.gender,
|
||||
namePrefix: responsiblePerson.namePrefix,
|
||||
firstName: responsiblePerson.firstName,
|
||||
lastName: responsiblePerson.lastName,
|
||||
firstNameEN: responsiblePerson.firstNameEN,
|
||||
lastNameEN: responsiblePerson.lastNameEN,
|
||||
code: responsiblePerson.code,
|
||||
});
|
||||
} else {
|
||||
currStep.responsiblePersonId?.splice(Number(existPersonIndex), 1);
|
||||
userInTable.value.splice(Number(existPersonIndex), 1);
|
||||
userInTable.value[stepIndex]?.resposiblePerson.splice(
|
||||
Number(existPersonIndex),
|
||||
1,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
defineEmits<{
|
||||
(e: 'moveUp'): void;
|
||||
(e: 'moveDown'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
}>();
|
||||
|
||||
watch(
|
||||
|
|
@ -90,8 +123,8 @@ watch(
|
|||
|
||||
onMounted(async () => {
|
||||
role.value = getRole() || [];
|
||||
await getUserList();
|
||||
await userStore.fetchHqOption();
|
||||
getUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -109,14 +142,28 @@ onMounted(async () => {
|
|||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`general.name`, { msg: $t('flow.title') }) }}
|
||||
<span class="row items-center q-ml-auto text-weight-regular text-body2">
|
||||
<span class="row q-ml-lg items-center text-weight-regular text-body2">
|
||||
<ToggleButton
|
||||
class="q-mr-sm"
|
||||
two-way
|
||||
:model-value="flowData.status !== 'INACTIVE'"
|
||||
@click="
|
||||
() => {
|
||||
onDrawer
|
||||
? $emit('changeStatus')
|
||||
: flowData.status !== 'INACTIVE'
|
||||
? (flowData.status = 'INACTIVE')
|
||||
: (flowData.status = 'CREATED');
|
||||
}
|
||||
"
|
||||
/>
|
||||
{{ $t('status.title') }}
|
||||
<ToggleButton class="q-ml-md" />
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<section id="form-flow-template" class="col-12 row">
|
||||
<SelectInput
|
||||
:readonly
|
||||
v-model="registerBranchId"
|
||||
v-if="role.includes('system')"
|
||||
class="col-12 q-pb-sm"
|
||||
|
|
@ -124,6 +171,8 @@ onMounted(async () => {
|
|||
:label="$t('branch.form.code')"
|
||||
/>
|
||||
<q-input
|
||||
:readonly
|
||||
bg-color="transparent"
|
||||
outlined
|
||||
dense
|
||||
class="col-12"
|
||||
|
|
@ -212,6 +261,7 @@ onMounted(async () => {
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly
|
||||
:id="`input-flow-step-name-${props.rowIndex}`"
|
||||
:for="`input-flow-step-name-${props.rowIndex}`"
|
||||
class="col"
|
||||
|
|
@ -224,7 +274,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
|
||||
<q-td>
|
||||
<q-field @click.stop dense outlined>
|
||||
<q-field @click.stop dense outlined :readonly>
|
||||
<span
|
||||
v-if="props.row.responsiblePersonId.length === 0"
|
||||
class="app-text-muted row items-center col"
|
||||
|
|
@ -238,17 +288,21 @@ onMounted(async () => {
|
|||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/user/${userInTable[props.rowIndex].id}/profile-image/${userInTable[props.rowIndex].selectedImage}`"
|
||||
:src="`${baseUrl}/user/${userInTable[props.rowIndex]?.resposiblePerson[0]?.id}/profile-image/${userInTable[props.rowIndex]?.resposiblePerson[0]?.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%);'}`"
|
||||
:style="`${userInTable[props.rowIndex]?.resposiblePerson[0].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"
|
||||
v-if="
|
||||
userInTable[props.rowIndex]?.resposiblePerson[0]
|
||||
?.gender
|
||||
"
|
||||
:src="
|
||||
userInTable[props.rowIndex].gender === 'male'
|
||||
userInTable[props.rowIndex]?.resposiblePerson[0]
|
||||
?.gender === 'male'
|
||||
? '/no-img-man.png'
|
||||
: '/no-img-female.png'
|
||||
"
|
||||
|
|
@ -269,19 +323,25 @@ onMounted(async () => {
|
|||
>
|
||||
<span>
|
||||
{{
|
||||
`${optionStore.mapOption(userInTable[props.rowIndex].namePrefix || '')} ${
|
||||
`${optionStore.mapOption(userInTable[props.rowIndex]?.resposiblePerson[0]?.namePrefix || '')} ${
|
||||
$i18n.locale === 'eng'
|
||||
? userInTable[props.rowIndex].firstNameEN
|
||||
: userInTable[props.rowIndex].firstName
|
||||
? userInTable[props.rowIndex]?.resposiblePerson[0]
|
||||
?.firstNameEN
|
||||
: userInTable[props.rowIndex]?.resposiblePerson[0]
|
||||
?.firstName
|
||||
} ${
|
||||
$i18n.locale === 'eng'
|
||||
? userInTable[props.rowIndex].lastNameEN
|
||||
: userInTable[props.rowIndex].lastName
|
||||
? userInTable[props.rowIndex]?.resposiblePerson[0]
|
||||
?.lastNameEN
|
||||
: userInTable[props.rowIndex]?.resposiblePerson[0]
|
||||
?.lastName
|
||||
}`
|
||||
}}
|
||||
</span>
|
||||
<span class="text-caption app-text-muted">
|
||||
{{ userInTable[props.rowIndex].code }}
|
||||
{{
|
||||
userInTable[props.rowIndex]?.resposiblePerson[0]?.code
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
|
@ -292,7 +352,7 @@ onMounted(async () => {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<q-menu :offset="[0, 4]">
|
||||
<q-menu v-if="!readonly" :offset="[0, 4]">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-input
|
||||
|
|
@ -404,6 +464,7 @@ onMounted(async () => {
|
|||
|
||||
<q-td style="width: 10%">
|
||||
<DeleteButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
class="q-ml-auto"
|
||||
@click="deleteItem(flowData.step, props.rowIndex)"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue