chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: bind crud business type
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Details

Browse source
This commit is contained in:
Thanaphon Frappet 2025-07-11 10:49:01 +07:00
parent 577da39cf0
commit e3f86136e7
7 changed files with 159 additions and 857 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/i18n/eng.ts
View file

@ -4,7 +4,7 @@ export default {
save: 'Save',
open: 'Open',
close: 'Close',
edit: 'Edit',
edit: 'Edit{text}',
cancel: 'Cancel',
back: 'Back',
undo: 'Undo',
@ -31,6 +31,7 @@ export default {
displayField: 'Display Fields',
order: 'Order',
name: '{msg} Name',
nameEN: 'Name (English)',
fullName: 'Full Name',
detail: '{msg} Detail',
remark: '{msg} Remark',
@ -209,6 +210,7 @@ export default {
customer: 'Customer',
mainData: 'Main Data',
agencies: 'Agencies',
businessType: 'Business Type',
},
sales: {
@ -1510,4 +1512,11 @@ export default {
last90Days: 'Last 90 Days',
customDateRange: 'Custom Date Range',
},
businessType: {
title: 'Business Type',
caption: 'Manage Business Type',
name: 'Business Type Name',
nameEn: 'Business Type Name (English)',
},
};

11
src/i18n/tha.ts
View file

@ -4,7 +4,7 @@ export default {
save: 'บันทึก',
open: 'เปิด',
close: 'ปิด',
edit: 'แก้ไข',
edit: 'แก้ไข{text}',
cancel: 'ยกเลิก',
back: 'ย้อนกลับ',
undo: 'ย้อนกลับ',
@ -31,6 +31,7 @@ export default {
displayField: 'ฟิลด์แสดงผล',
order: 'ลำดับ',
name: 'ชื่อ{msg}',
nameEN: 'ชื่อ (ภาษาอังกฤษ)',
fullName: 'ชื่อ-สกุล',
detail: 'รายละเอียด{msg}',
remark: 'หมายเหตุ{msg}',
@ -209,6 +210,7 @@ export default {
customer: 'ลูกค้า',
mainData: 'ข้อมูลหลัก',
agencies: 'หน่วยงาน',
businessType: 'ประเภทกิจการ',
},
sales: {
@ -1498,4 +1500,11 @@ export default {
last90Days: '90 วันที่ผ่านมา',
customDateRange: 'กำหนดช่วงวันที่เอง',
},
businessType: {
title: 'ประเภทกิจการ',
caption: 'จัดการประเภทกิจการ',
name: 'ชื่อประเภทกิจการ',
nameEn: 'ชื่อประเภทกิจการ (ภาษาอังกฤษ)',
},
};

4
src/layouts/DrawerComponent.vue
View file

@ -106,6 +106,10 @@ function initMenu() {
label: 'agencies',
route: '/agencies-management',
},
{
label: 'businessType',
route: '/business-type',
},
],
},
{

658
src/pages/16_ิbusiness-type-management/AgenciesDialog.vue
View file

@ -1,658 +0,0 @@
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { InstitutionPayload } from 'src/stores/institution/types';
import { Icon } from '@iconify/vue/dist/iconify.js';
import { useInstitution } from 'src/stores/institution';
import { baseUrl } from 'src/stores/utils';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import DialogForm from 'src/components/DialogForm.vue';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
import FormBank from 'src/components/01_branch-management/FormBank.vue';
import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
import {
UndoButton,
SaveButton,
EditButton,
DeleteButton,
} from 'src/components/button';
import AddressForm from 'src/components/form/AddressForm.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
import { BankBook } from 'src/stores/branch/types';
import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
const institutionStore = useInstitution();
const model = defineModel<boolean>({ required: true, default: false });
const drawerModel = defineModel<boolean>('drawerModel', {
required: true,
default: false,
});
const imageListOnCreate = defineModel<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>('imageListOnCreate', { default: { selectedImage: '', list: [] } });
const deletesStatusQrCodeBankImag = defineModel<number[]>(
'deletesStatusQrCodeBankImag',
{ default: [] },
);
const imageState = reactive({
imageDialog: false,
isImageEdit: false,
refreshImageState: false,
imageUrl: '',
});
const imageFile = ref<File | null>(null);
const imageList = ref<{ selectedImage: string; list: string[] }>();
const qrCodeDialog = ref(false);
const qrCodeImageUrl = ref<string>('');
const currentIndexQrCodeBank = ref<number>(-1);
const statusQrCodeFile = ref<File | undefined>(undefined);
const refQrCodeUpload = ref();
const statusQrCodeUrl = ref<string>('');
const statusDeletesQrCode = ref<boolean>(false);
const props = withDefaults(
defineProps<{
readonly?: boolean;
isEdit?: boolean;
hideAction?: boolean;
hideDelete?: boolean;
dataId?: string;
}>(),
{ readonly: false, isEdit: false, dataId: '' },
);
defineExpose({ clearImageState });
const emit = defineEmits<{
(e: 'submit'): void;
(e: 'close'): void;
(e: 'changeStatus'): void;
(e: 'drawerUndo'): void;
(e: 'drawerEdit'): void;
(e: 'drawerDelete'): void;
(e: 'addImage'): void;
(e: 'removeImage'): void;
(e: 'submitImage', name: string): void;
}>();
const data = defineModel<InstitutionPayload>('data', {
required: true,
default: {
group: '',
name: '',
nameEN: '',
contactName: '',
contactEmail: '',
contactTel: '',
code: '',
addressEN: '',
address: '',
soi: '',
soiEN: '',
moo: '',
mooEN: '',
street: '',
streetEN: '',
subDistrictId: '',
districtId: '',
provinceId: '',
selectedImage: '',
},
});
const formBankBook = defineModel<BankBook[]>('formBankBook', {
default: [
{
bankName: '',
accountNumber: '',
bankBranch: '',
accountName: '',
accountType: '',
currentlyUse: true,
bankUrl: '',
},
],
});
function viewImage() {
imageState.imageDialog = true;
imageState.isImageEdit = false;
}
function editImage() {
imageState.imageDialog = imageState.isImageEdit = true;
}
async function fetchImageList(id: string, selectedName: string) {
const res = await institutionStore.fetchImageListById(id);
imageList.value = {
selectedImage: selectedName,
list: res.map((n: string) => `institution/${id}/image/${n}`),
};
return res;
}
async function addImage(file: File | null) {
if (!file) return;
if (!props.dataId) return;
await institutionStore.addImageList(
file,
props.dataId,
Date.now().toString(),
);
await fetchImageList(props.dataId, data.value.selectedImage || '');
}
async function removeImage(name: string) {
if (!name) return;
if (!props.dataId) return;
const targetName = name.split('/').pop() || '';
await institutionStore.deleteImageByName(props.dataId, targetName);
await fetchImageList(props.dataId, data.value.selectedImage || '');
}
async function submitImage(name: string) {
if (model.value) {
imageState.imageUrl = name;
imageState.imageDialog = false;
} else {
imageState.refreshImageState = true;
emit('submitImage', name);
}
}
function clearImageState() {
imageState.imageDialog = false;
imageFile.value = null;
imageListOnCreate.value = { selectedImage: '', list: [] };
imageState.refreshImageState = false;
}
function triggerEditQrCodeBank(opts?: { save?: boolean }) {
if (opts?.save === undefined) {
qrCodeDialog.value = true;
statusDeletesQrCode.value = false;
statusQrCodeUrl.value =
formBankBook.value[currentIndexQrCodeBank.value].bankUrl || '';
statusDeletesQrCode.value = false;
} else {
formBankBook.value[currentIndexQrCodeBank.value].bankUrl =
statusQrCodeUrl.value;
formBankBook.value[currentIndexQrCodeBank.value].bankQr =
statusQrCodeFile.value;
if (statusDeletesQrCode.value === true) {
deletesStatusQrCodeBankImag.value.push(currentIndexQrCodeBank.value);
}
if (statusDeletesQrCode.value === false) {
deletesStatusQrCodeBankImag.value =
deletesStatusQrCodeBankImag.value.filter(
(item) => item !== currentIndexQrCodeBank.value,
);
}
currentIndexQrCodeBank.value = -1;
statusDeletesQrCode.value = false;
}
}
watch(
() => imageFile.value,
() => {
if (imageFile.value !== null) imageState.isImageEdit = true;
},
);
watch(
() => data.value.selectedImage,
() => {
imageState.imageUrl = `${baseUrl}/institution/${props.dataId}/image/${data.value.selectedImage}`;
imageList.value
? (imageList.value.selectedImage = data.value.selectedImage || '')
: '';
imageState.refreshImageState = false;
},
);
watch(
() => drawerModel.value,
async () => {
if (drawerModel.value) {
await fetchImageList(props.dataId, data.value.selectedImage || '');
imageState.imageUrl = `${baseUrl}/institution/${props.dataId}/image/${data.value.selectedImage}`;
} else {
imageList.value = { selectedImage: '', list: [] };
}
},
);
</script>
<template>
<DialogForm
hide-footer
:title="$t('general.add', { text: $t('agencies.title') })"
v-model:modal="model"
:submit="() => $emit('submit')"
:close="
() => {
imageState.imageUrl = '';
clearImageState();
$emit('close');
}
"
>
<div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner
prefix="dialog"
active
use-toggle
hide-fade
:toggle-title="$t('status.title')"
:icon="'ph-building-office'"
:img="imageState.imageUrl || null"
:title="data.name"
:caption="data.code"
:color="`hsla(var(--green-8-hsl)/1)`"
:bg-color="`hsla(var(--green-8-hsl)/0.1)`"
v-model:toggle-status="data.status"
@view="viewImage"
@edit="editImage"
@update:toggle-status="
() => {
data.status = data.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
}
"
/>
</div>
<div
class="col surface-1 rounded bordered scroll row relative-position"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
id="group-form"
>
<div
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('form.field.basicInformation'),
anchor: 'agencies-form-basic-info',
},
{
name: $t('general.address'),
anchor: 'agencies-form-address-info',
},
{
name: $t('agencies.bankInfo'),
anchor: 'agencies-form-bank-info',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#agencies-form-content"
/>
</div>
</div>
<div
class="col-12 col-md-10"
id="agencies-form-content"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<div
class="rounded"
:class="{
'q-py-md q-px-lg': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
style="position: absolute; z-index: 99999; top: 0; right: 0"
>
<div class="surface-1 row rounded">
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
</div>
</div>
<FormBasicInfoAgencies
id="agencies-form-basic-info"
class="q-mb-xl"
v-model:group="data.group"
v-model:name="data.name"
v-model:name-en="data.nameEN"
v-model:contact-name="data.contactName"
v-model:email="data.contactEmail"
v-model:contact-tel="data.contactTel"
/>
<AddressForm
id="agencies-form-address-info"
dense
:prefix-id="''"
v-model:address="data.address"
v-model:address-en="data.addressEN"
v-model:moo="data.moo"
v-model:moo-en="data.mooEN"
v-model:soi="data.soi"
v-model:soi-en="data.soiEN"
v-model:street="data.street"
v-model:street-en="data.streetEN"
v-model:province-id="data.provinceId"
v-model:district-id="data.districtId"
v-model:sub-district-id="data.subDistrictId"
/>
<FormBank
id="agencies-form-bank-info"
title="agencies.bankInfo"
class="q-pt-xl"
dense
v-model:bank-book-list="formBankBook"
@view-qr="
(i) => {
currentIndexQrCodeBank = i;
triggerEditQrCodeBank();
}
"
@edit-qr="
(i) => {
currentIndexQrCodeBank = i;
refQrCodeUpload && refQrCodeUpload.browse();
}
"
/>
</div>
</div>
</DialogForm>
<DrawerInfo
bg-on
hide-action
:is-edit="isEdit"
:title="data.name"
v-model:drawerOpen="drawerModel"
:submit="() => $emit('submit')"
:close="
() => {
clearImageState();
$emit('close');
}
"
>
<div class="col column full-height">
<div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner
:prefix="data.name"
hide-fade
use-toggle
:readonly="hideAction"
:active="data.status !== 'INACTIVE'"
:toggle-title="$t('status.title')"
:icon="'ph-building-office'"
:title="data.name"
:caption="data.code"
:color="`hsla(var(${'--green-8'}-hsl)/1)`"
:bg-color="`hsla(var(${'--green-8'}-hsl)/0.1)`"
:img="
`${baseUrl}/institution/${dataId}/image/${data.selectedImage}`.concat(
imageState.refreshImageState ? `?ts=${Date.now()}` : '',
) || null
"
v-model:toggle-status="data.status"
@view="viewImage"
@edit="editImage"
@update:toggle-status="$emit('changeStatus')"
/>
</div>
<div
style="flex: 1; width: 100%; overflow-y: auto"
id="drawer-user-form"
:class="{
'q-px-lg q-pb-lg': $q.screen.gt.sm,
'q-px-md q-pb-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-pa-sm': !$q.screen.gt.sm,
}"
style="position: absolute; z-index: 999; top: 0; right: 0"
>
<div
v-if="data.status !== 'INACTIVE' && !hideAction"
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 && !hideDelete"
id="btn-info-basic-delete"
icon-only
@click="
() => {
$emit('drawerDelete');
}
"
type="button"
/>
</div>
</div>
<div
class="col"
style="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('form.field.basicInformation'),
anchor: 'agencies-basic-info',
},
{
name: $t('general.address'),
anchor: 'agencies-address-info',
},
{
name: $t('agencies.bankInfo'),
anchor: 'agencies-bank-info',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#agencies-view-content"
/>
</div>
</div>
<div
class="col-12 col-md-10 relative-position"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
id="agencies-view-content"
style="height: 100%; max-height: 100; overflow-y: auto"
>
<FormBasicInfoAgencies
id="agencies-basic-info"
:readonly
onDrawer
class="q-mb-xl"
v-model:group="data.group"
v-model:name="data.name"
v-model:name-en="data.nameEN"
v-model:contact-name="data.contactName"
v-model:email="data.contactEmail"
v-model:contact-tel="data.contactTel"
/>
<AddressForm
id="agencies-address-info"
dense
:readonly
:prefix-id="data.code ? data.code : ''"
v-model:address="data.address"
v-model:address-en="data.addressEN"
v-model:moo="data.moo"
v-model:moo-en="data.mooEN"
v-model:soi="data.soi"
v-model:soi-en="data.soiEN"
v-model:street="data.street"
v-model:street-en="data.streetEN"
v-model:province-id="data.provinceId"
v-model:district-id="data.districtId"
v-model:sub-district-id="data.subDistrictId"
/>
<FormBank
id="agencies-bank-info"
title="agencies.bankInfo"
class="q-pt-xl"
dense
:readonly
v-model:bank-book-list="formBankBook"
@view-qr="
(i) => {
currentIndexQrCodeBank = i;
triggerEditQrCodeBank();
}
"
@edit-qr="
(i) => {
currentIndexQrCodeBank = i;
refQrCodeUpload && refQrCodeUpload.browse();
}
"
/>
</div>
</div>
</div>
</div>
</DrawerInfo>
<ImageUploadDialog
v-model:dialog-state="imageState.imageDialog"
v-model:file="imageFile"
v-model:on-create-data-list="imageListOnCreate"
v-model:image-url="imageState.imageUrl"
v-model:data-list="imageList"
:changeDisabled="hideAction"
:on-create="model"
:hiddenFooter="!imageState.isImageEdit"
@add-image="addImage"
@remove-image="removeImage"
@submit="submitImage"
>
<template #title>
<span v-if="!model" class="justify-center flex text-bold">
{{ $t('general.image') }}
{{ $i18n.locale === 'eng' ? data.nameEN : data.name }}
</span>
</template>
<template #error>
<div class="full-height full-width" style="background: white">
<div
class="full-height full-width flex justify-center items-center"
style="
background: hsla(var(--green-8-hsl) / 0.1);
color: hsla(var(--green-8-hsl) / 1);
"
>
<Icon width="3rem" icon="ph-building-office" />
</div>
</div>
</template>
</ImageUploadDialog>
<QrCodeUploadDialog
ref="refQrCodeUpload"
v-model:dialog-state="qrCodeDialog"
v-model:file="statusQrCodeFile as File"
v-model:image-url="statusQrCodeUrl"
@save="
(_file) => {
qrCodeDialog = false;
if (currentIndexQrCodeBank !== -1) {
triggerEditQrCodeBank({ save: true });
}
}
"
@clear="statusDeletesQrCode = true"
clearButton
>
<template #error>
<div
class="full-width full-height flex items-center justify-center"
style="color: gray"
>
<q-icon size="15rem" name="mdi-qrcode" />
</div>
</template>
</QrCodeUploadDialog>
</template>
<style scoped></style>

84
src/pages/16_ิbusiness-type-management/BusinessTypeDialog.vue Normal file
View file

@ -0,0 +1,84 @@
<script setup lang="ts">
import { BusinessTypePayLoad } from 'src/stores/business-type/types';
import { useInstitution } from 'src/stores/institution';
import DialogForm from 'src/components/DialogForm.vue';
const model = defineModel<boolean>({ required: true, default: false });
const props = withDefaults(
defineProps<{
readonly?: boolean;
isEdit?: boolean;
hideAction?: boolean;
hideDelete?: boolean;
dataId?: string;
}>(),
{ readonly: false, isEdit: false, dataId: '' },
);
const emit = defineEmits<{
(e: 'submit'): void;
(e: 'close'): void;
}>();
const data = defineModel<BusinessTypePayLoad>('data', {
required: true,
default: {
name: '',
nameEN: '',
},
});
</script>
<template>
<DialogForm
:title="
$t(`general.${data.id ? 'edit' : 'add'}`, {
text: $t('businessType.title'),
})
"
:height="'50'"
:maxWidth="'60'"
v-model:modal="model"
:submit="() => $emit('submit')"
:close="
() => {
$emit('close');
}
"
>
<div class="scroll q-pa-md q-gutter-sm">
<q-input
for="input-agencies-name"
dense
outlined
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('businessType.name')"
v-model="data.name"
:rules="[
(val) => !!val || $t('form.error.required'),
(val) =>
/^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
$t('form.error.branchNameField'),
]"
/>
<q-input
for="input-agencies-name"
dense
outlined
:readonly="readonly"
hide-bottom-space
class="col"
:label="$t('businessType.nameEn')"
v-model="data.nameEN"
:rules="[(val) => !!val || $t('form.error.required')]"
/>
</div>
</DialogForm>
</template>
<style scoped></style>

240
src/pages/16_ิbusiness-type-management/MainPage.vue
View file

@ -26,7 +26,7 @@ import StatCardComponent from 'src/components/StatCardComponent.vue';
import FloatingActionButton from 'src/components/FloatingActionButton.vue';
import CreateButton from 'src/components/AddButton.vue';
import NoData from 'src/components/NoData.vue';
import AgenciesDialog from './AgenciesDialog.vue';
import BusinessTypeDialog from './BusinessTypeDialog.vue';
import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
const { t } = useI18n();
@ -34,14 +34,13 @@ const $q = useQuasar();
const useBusinessType = useBusinessTypeStore();
const navigatorStore = useNavigator();
const institutionStore = useInstitution();
const { data, page, pageMax, pageSize } = storeToRefs(institutionStore);
const { data, page, pageMax, pageSize } = storeToRefs(useBusinessType);
const fieldSelected = ref<('no' | 'name' | 'nameEn')[]>([
const fieldSelected = ref<('no' | 'name' | 'nameEN')[]>([
'no',
'name',
'nameEn',
'nameEN',
]);
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
{
@ -53,9 +52,10 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
label: 'general.name',
value: 'name',
},
{
label: 'general.nameEn',
value: 'nameEn',
label: 'general.nameEN',
value: 'nameEN',
},
]);
const columns = [
@ -65,6 +65,7 @@ const columns = [
label: 'general.order',
field: 'no',
},
,
{
name: 'name',
align: 'left',
@ -72,10 +73,10 @@ const columns = [
field: 'name',
},
{
name: 'nameEn',
align: 'center',
label: 'general.nameEn',
field: 'nameEn',
name: 'nameEN',
align: 'left',
label: 'general.nameEN',
field: 'nameEN',
},
] satisfies QTableProps['columns'];
const pageState = reactive({
@ -84,12 +85,11 @@ const pageState = reactive({
gridView: false,
total: 0,
addModal: false,
businessTypeDialog: false,
viewDrawer: false,
isDrawerEdit: true,
searchDate: [],
});
const deletesStatusQrCodeBankImag = ref<number[]>([]);
const blankFormData: BusinessTypePayLoad = {
name: '',
@ -97,71 +97,51 @@ const blankFormData: BusinessTypePayLoad = {
};
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
const refAgenciesDialog = ref();
const formData = ref<BusinessTypePayLoad | undefined>(
structuredClone(blankFormData),
);
const currBusinessType = ref<BusinessType>();
const imageListOnCreate = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
function triggerDialog(type: 'add' | 'edit' | 'view') {
function triggerDialog(type: 'add' | 'edit') {
if (type === 'add') {
formData.value = structuredClone(blankFormData);
pageState.addModal = true;
pageState.isDrawerEdit = true;
}
if (type === 'view') {
pageState.viewDrawer = true;
pageState.isDrawerEdit = false;
pageState.businessTypeDialog = true;
}
if (type === 'edit') {
pageState.viewDrawer = true;
pageState.isDrawerEdit = true;
pageState.businessTypeDialog = true;
}
}
function resetForm() {
pageState.isDrawerEdit = true;
pageState.addModal = false;
pageState.viewDrawer = false;
pageState.businessTypeDialog = false;
currBusinessType.value = undefined;
formData.value = structuredClone(blankFormData);
}
function undo() {
if (!currBusinessType.value) return;
assignFormData(currBusinessType.value);
pageState.isDrawerEdit = false;
}
function assignFormData(data: BusinessType) {
currBusinessType.value = data;
formData.value = { id: data.id, name: data.name, nameEN: data.nameEN };
}
async function submit(opt?: { selectedImage: string }) {
async function submit() {
const payload = {
id: formData.value.id,
name: formData.value.name,
nameEN: formData.value.nameEN,
};
if (pageState.isDrawerEdit && currBusinessType.value?.id) {
if (currBusinessType.value?.id) {
const ret = await useBusinessType.editById(payload);
if (ret) {
pageState.isDrawerEdit = false;
await fetchData($q.screen.xs);
pageState.businessTypeDialog = false;
return;
}
} else {
await useBusinessType.create(payload);
await fetchData($q.screen.xs);
pageState.addModal = false;
pageState.businessTypeDialog = false;
return;
}
}
@ -204,8 +184,8 @@ async function fetchData(mobileFetch?: boolean) {
}
onMounted(async () => {
navigatorStore.current.title = 'agencies.title';
navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
navigatorStore.current.title = 'businessType.title';
navigatorStore.current.path = [{ text: 'businessType.caption', i18n: true }];
pageState.gridView = $q.screen.lt.md ? true : false;
await fetchData();
@ -265,7 +245,7 @@ watch(
{
icon: 'ph-building-office',
count: pageState.total,
label: 'agencies.title',
label: 'businessType.title',
color: 'light-green',
},
]"
@ -498,10 +478,7 @@ watch(
: ''
"
>
<q-td
class="text-center"
v-if="fieldSelected.includes('orderNumber')"
>
<q-td class="text-center" v-if="fieldSelected.includes('no')">
{{
$q.screen.xs
? props.rowIndex + 1
@ -555,67 +532,22 @@ watch(
</span>
</section>
</q-td>
<q-td v-if="fieldSelected.includes('address')">
{{
formatAddress({
address: props.row.address,
addressEN: props.row.addressEN,
moo: props.row.moo,
mooEN: props.row.mooEN,
soi: props.row.soi,
soiEN: props.row.soiEN,
street: props.row.street,
streetEN: props.row.streetEN,
province: props.row.province,
district: props.row.district,
subDistrict: props.row.subDistrict,
en: $i18n.locale === 'eng',
})
}}
<q-tooltip>
{{
formatAddress({
address: props.row.address,
addressEN: props.row.addressEN,
moo: props.row.moo,
mooEN: props.row.mooEN,
soi: props.row.soi,
soiEN: props.row.soiEN,
street: props.row.street,
streetEN: props.row.streetEN,
province: props.row.province,
district: props.row.district,
subDistrict: props.row.subDistrict,
en: $i18n.locale === 'eng',
})
}}
</q-tooltip>
<q-td v-if="fieldSelected.includes('nameEN')">
<span class="col row items-center no-wrap">
<div>
{{ props.row.nameEN }}
</div>
</span>
</q-td>
<q-td>
<q-btn
icon="mdi-eye-outline"
:id="`btn-eye-${props.row.name}`"
size="sm"
dense
round
flat
@click.stop="
() => {
assignFormData(props.row);
triggerDialog('view');
}
"
/>
<KebabAction
v-if="canAccess('agencies', 'edit')"
hide-toggle
hide-view
:id-name="props.row.name"
:status="props.row.status"
@view="
() => {
assignFormData(props.row);
triggerDialog('view');
}
"
@edit="
() => {
assignFormData(props.row);
@ -623,7 +555,6 @@ watch(
}
"
@delete="() => triggerDelete(props.row.id)"
@change-status="() => triggerChangeStatus(props.row)"
/>
</q-td>
</q-tr>
@ -665,41 +596,21 @@ watch(
></q-badge>
</q-avatar>
<span class="text-weight-bold column q-pl-md">
{{
$i18n.locale === 'eng'
? props.row.nameEN
: props.row.name
}}
{{ props.row.name }}
<span class="text-caption app-text-muted-2">
{{ props.row.code }}
{{ props.row.nameEN }}
</span>
</span>
<nav
class="row q-ml-auto items-center justify-end no-wrap"
>
<q-btn
icon="mdi-eye-outline"
size="sm"
dense
round
flat
@click.stop="
() => {
assignFormData(props.row);
triggerDialog('view');
}
"
/>
<KebabAction
v-if="canAccess('agencies', 'edit')"
hide-toggle
hide-view
:id-name="props.row.id"
:status="props.row.status"
@view="
() => {
assignFormData(props.row);
triggerDialog('view');
}
"
@edit="
() => {
assignFormData(props.row);
@ -707,52 +618,9 @@ watch(
}
"
@delete="() => triggerDelete(props.row.id)"
@change-status="() => triggerChangeStatus(props.row)"
/>
</nav>
</header>
<q-separator spaced="lg" />
<div class="row full-width">
<span class="col-2 app-text-muted">
{{ $t('general.address') }}
</span>
<span class="col">
{{
formatAddress({
address: props.row.address,
addressEN: props.row.addressEN,
moo: props.row.moo,
mooEN: props.row.mooEN,
soi: props.row.soi,
soiEN: props.row.soiEN,
street: props.row.street,
streetEN: props.row.streetEN,
province: props.row.province,
district: props.row.district,
subDistrict: props.row.subDistrict,
en: $i18n.locale === 'eng',
})
}}
<q-tooltip>
{{
formatAddress({
address: props.row.address,
addressEN: props.row.addressEN,
moo: props.row.moo,
mooEN: props.row.mooEN,
soi: props.row.soi,
soiEN: props.row.soiEN,
street: props.row.street,
streetEN: props.row.streetEN,
province: props.row.province,
district: props.row.district,
subDistrict: props.row.subDistrict,
en: $i18n.locale === 'eng',
})
}}
</q-tooltip>
</span>
</div>
</div>
</section>
</template>
@ -812,33 +680,13 @@ watch(
</section>
</div>
<AgenciesDialog
ref="refAgenciesDialog"
<BusinessTypeDialog
ref="refBusinessTypeDialog"
:data-id="currBusinessType && currBusinessType.id"
@drawer-delete="
() => {
if (currBusinessType) triggerDelete(currBusinessType.id);
}
"
@drawer-edit="pageState.isDrawerEdit = true"
@drawer-undo="undo"
@close="resetForm"
@submit="submit"
@submit-image="
async (v) => {
if (v) await submit({ selectedImage: v });
}
"
@change-status="triggerChangeStatus"
:readonly="!pageState.isDrawerEdit"
:isEdit="pageState.isDrawerEdit"
:hide-action="!canAccess('agencies', 'edit')"
v-model="pageState.addModal"
v-model:drawer-model="pageState.viewDrawer"
v-model="pageState.businessTypeDialog"
v-model:data="formData"
v-model:form-bank-book="formData.bank"
v-model:image-list-on-create="imageListOnCreate"
v-model:deletes-status-qr-code-bank-imag="deletesStatusQrCodeBankImag"
/>
</template>
<style scoped>

8
src/stores/business-type/index.ts
View file

@ -7,7 +7,10 @@ import { BusinessType, BusinessTypePayLoad } from './types';
import axios from 'axios';
const useBusinessTypeStore = defineStore('business-type-store', () => {
const data = ref<Pagination<BusinessType[]>>();
const data = ref<BusinessType[]>([]);
const page = ref<number>(1);
const pageMax = ref<number>(1);
const pageSize = ref<number>(30);
async function fetchList(opts?: {
page?: number;
@ -68,6 +71,9 @@ const useBusinessTypeStore = defineStore('business-type-store', () => {
return {
data,
page,
pageMax,
pageSize,
fetchList,
fetchById,