feat: userOption
This commit is contained in:
puriphatt
parent
0206372cef
commit
81b74ebe5d
3 changed files with 117 additions and 82 deletions
|
|
@ -7,12 +7,7 @@ import useUserStore from 'stores/user';
|
|||
import useBranchStore from 'src/stores/branch';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
|
||||
import {
|
||||
UserCreate,
|
||||
UserTypeStats,
|
||||
UserOption,
|
||||
RoleData,
|
||||
} from 'src/stores/user/types';
|
||||
import { UserCreate, UserTypeStats, RoleData } from 'src/stores/user/types';
|
||||
import { BranchUserStats } from 'src/stores/branch/types';
|
||||
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
|
|
@ -116,23 +111,6 @@ inputFile.addEventListener('change', (e) => {
|
|||
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
});
|
||||
|
||||
const userTypeOpts = [
|
||||
{ label: 'พนักงาน', value: 'USER' },
|
||||
{ label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
|
||||
{ label: 'ตัวแทน', value: 'DELEGATE' },
|
||||
{ label: 'เอเจนซี่', value: 'AGENCY' },
|
||||
];
|
||||
const genderOpts = [
|
||||
{ label: 'ชาย', value: 'male' },
|
||||
{ label: 'หญิง', value: 'female' },
|
||||
];
|
||||
|
||||
const userOption = ref<UserOption>({
|
||||
hqOpts: [],
|
||||
brOpts: [],
|
||||
roleOpts: [],
|
||||
});
|
||||
|
||||
const selectorList = [
|
||||
{ label: 'personnelSelector1', count: 0 },
|
||||
{ label: 'personnelSelector2', count: 0 },
|
||||
|
|
@ -150,28 +128,12 @@ async function createKeycloak() {
|
|||
return res.data;
|
||||
}
|
||||
|
||||
async function fetchRoleOption() {
|
||||
const res = await api.get<RoleData[]>('/keycloak/role');
|
||||
res.data.map((item) => {
|
||||
const formattedName = item.name
|
||||
.replace(/_/g, ' ')
|
||||
.toLowerCase()
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
userOption.value.roleOpts.push({
|
||||
label: formattedName,
|
||||
value: item.id,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchHqOption() {
|
||||
if (userOption.value.hqOpts.length === 0) {
|
||||
if (userStore.userOption.hqOpts.length === 0) {
|
||||
const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
|
||||
if (res) {
|
||||
res.result.map((item) => {
|
||||
userOption.value.hqOpts.push({
|
||||
userStore.userOption.hqOpts.push({
|
||||
label: item.code,
|
||||
value: item.id,
|
||||
});
|
||||
|
|
@ -186,7 +148,7 @@ async function fetchBrOption(id: string) {
|
|||
});
|
||||
if (res && res?.branch) {
|
||||
res.branch.map((item) => {
|
||||
userOption.value.brOpts.push({
|
||||
userStore.userOption.brOpts.push({
|
||||
label: item.code,
|
||||
value: item.id,
|
||||
});
|
||||
|
|
@ -194,13 +156,17 @@ async function fetchBrOption(id: string) {
|
|||
}
|
||||
}
|
||||
|
||||
async function openDialog(id?: string) {
|
||||
await fetchHqOption();
|
||||
await fetchRoleOption();
|
||||
async function openDialog(idEdit?: string) {
|
||||
modal.value = true;
|
||||
age.value = '';
|
||||
if (id && userData.value) {
|
||||
const foundUser = userData.value.result.find((user) => user.id === id);
|
||||
if (userStore.userOption.hqOpts.length === 0) {
|
||||
await fetchHqOption();
|
||||
}
|
||||
if (userStore.userOption.roleOpts.length === 0) {
|
||||
await userStore.fetchRoleOption();
|
||||
}
|
||||
if (idEdit && userData.value) {
|
||||
const foundUser = userData.value.result.find((user) => user.id === idEdit);
|
||||
|
||||
if (foundUser) {
|
||||
formData.value = {
|
||||
|
|
@ -249,7 +215,9 @@ async function openDialog(id?: string) {
|
|||
code.value = foundUser.code;
|
||||
urlProfile.value = foundUser.profileImageUrl;
|
||||
isEdit.value = true;
|
||||
await fetchBrOption(hqId.value);
|
||||
if (userStore.userOption.brOpts.length === 0) {
|
||||
await fetchBrOption(hqId.value);
|
||||
}
|
||||
await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
|
||||
await formDialogRef.value.fetchDistrict(formData.value.provinceId);
|
||||
}
|
||||
|
|
@ -283,7 +251,7 @@ async function onSubmit() {
|
|||
action: async () => {
|
||||
const formDataEdit = { ...formData.value };
|
||||
delete formDataEdit.keycloakId;
|
||||
delete formDataEdit.profileImage;
|
||||
// delete formDataEdit.profileImage;
|
||||
await userStore.editById(userId.value, formDataEdit);
|
||||
onClose();
|
||||
userStore.fetchList({ includeBranch: true });
|
||||
|
|
@ -361,7 +329,7 @@ function calculateAge(birthDate: Date | null): string {
|
|||
async function selectHq(id: string) {
|
||||
if (!id) return;
|
||||
brId.value = '';
|
||||
userOption.value.brOpts = [];
|
||||
userStore.userOption.brOpts = [];
|
||||
await fetchBrOption(id);
|
||||
}
|
||||
|
||||
|
|
@ -450,7 +418,10 @@ watch(
|
|||
userData?.result.map((v) => ({
|
||||
id: v.id,
|
||||
img: `${v.profileImageUrl}`,
|
||||
name: `${v.firstName} ${v.lastName}`,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
detail: [
|
||||
|
|
@ -522,7 +493,7 @@ watch(
|
|||
option-value="value"
|
||||
label="รหัสสำนักงานใหญ่"
|
||||
v-model="hqId"
|
||||
:options="userOption.hqOpts"
|
||||
:options="userStore.userOption.hqOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
|
||||
@update:model-value="(val: string) => selectHq(val)"
|
||||
/>
|
||||
|
|
@ -539,7 +510,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="brId"
|
||||
:options="userOption.brOpts"
|
||||
:options="userStore.userOption.brOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
|
||||
/>
|
||||
<q-select
|
||||
|
|
@ -555,7 +526,7 @@ watch(
|
|||
option-label="label"
|
||||
label="ประเภทผู้ใช้งาน"
|
||||
v-model="formData.userType"
|
||||
:options="userTypeOpts"
|
||||
:options="userStore.userOption.userTypeOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
|
||||
/>
|
||||
<q-select
|
||||
|
|
@ -571,7 +542,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.userRole"
|
||||
:options="userOption.roleOpts"
|
||||
:options="userStore.userOption.roleOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
|
||||
/>
|
||||
<q-input
|
||||
|
|
@ -708,7 +679,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.gender"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.genderOpts"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
|
|
@ -865,13 +836,14 @@ watch(
|
|||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.responsibleArea"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.responsibleAreaOpts"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -898,48 +870,43 @@ watch(
|
|||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สัญชาติต้นทาง"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
option-value="label"
|
||||
v-model="formData.sourceNationality"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="นำเข้าสัญชาติ"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
option-value="label"
|
||||
v-model="formData.importNationality"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-input
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สถานที่อบรม"
|
||||
class="col-6"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="formData.trainingPlace"
|
||||
:options="userStore.userOption.trainingPlaceOpts"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ด่าน"
|
||||
class="col-6"
|
||||
v-model="formData.trainingPlace"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ด่าน ENG"
|
||||
class="col-6"
|
||||
v-model="formData.trainingPlace"
|
||||
/>
|
||||
<q-input dense outlined label="ด่าน" class="col-6" />
|
||||
<q-input dense outlined label="ด่าน ENG" class="col-6" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue