2156 lines
70 KiB
Vue
2156 lines
70 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia';
|
|
import { ref, onMounted, computed, watch } from 'vue';
|
|
import { Icon } from '@iconify/vue';
|
|
import { BranchContact } from 'src/stores/branch-contact/types';
|
|
import { useQuasar } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { QTableProps } from 'quasar';
|
|
|
|
import useBranchStore from 'stores/branch';
|
|
import useFlowStore from 'src/stores/flow';
|
|
import {
|
|
BranchWithChildren,
|
|
BranchCreate,
|
|
Branch,
|
|
BankBook,
|
|
} from 'stores/branch/types';
|
|
import { Status } from 'src/stores/types';
|
|
|
|
import useUtilsStore, { dialog, baseUrl } from 'src/stores/utils';
|
|
import AddButton from 'components/AddButton.vue';
|
|
import TooltipComponent from 'components/TooltipComponent.vue';
|
|
import StatCard from 'components/StatCardComponent.vue';
|
|
import BranchCard from 'components/01_branch-management/BranchCard.vue';
|
|
import FormAddress from 'components/02_personnel-management/FormAddress.vue';
|
|
import DialogForm from 'components/DialogForm.vue';
|
|
import FormBranchInformation from 'components/01_branch-management/FormBranchInformation.vue';
|
|
import FormLocation from 'components/01_branch-management/FormLocation.vue';
|
|
import FormQr from 'components/01_branch-management/FormQr.vue';
|
|
import FormBranchContact from 'components/01_branch-management/FormBranchContact.vue';
|
|
import DrawerInfo from 'components/DrawerInfo.vue';
|
|
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
|
|
import TreeCompoent from 'src/components/TreeCompoent.vue';
|
|
import ProfileBanner from 'src/components/ProfileBanner.vue';
|
|
import SideMenu from 'src/components/SideMenu.vue';
|
|
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
|
|
import FormBank from 'src/components/01_branch-management/FormBank.vue';
|
|
|
|
const $q = useQuasar();
|
|
const { t } = useI18n();
|
|
const utilsStore = useUtilsStore();
|
|
|
|
const holdDialog = ref(false);
|
|
const isSubCreate = ref(false);
|
|
const columns = [
|
|
{
|
|
name: 'branchLabelNo',
|
|
align: 'center',
|
|
label: 'orderNumber',
|
|
field: 'branchNo',
|
|
},
|
|
|
|
{
|
|
name: 'branchLabelName',
|
|
align: 'left',
|
|
label: 'office',
|
|
field: 'name',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'branchLabelAddress',
|
|
align: 'left',
|
|
label: 'address',
|
|
field: 'address',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'branchLabelTel',
|
|
align: 'left',
|
|
label: 'formDialogInputTelephone',
|
|
field: 'telephoneNo',
|
|
},
|
|
{
|
|
name: 'branchLabelType',
|
|
align: 'left',
|
|
label: 'type',
|
|
field: 'isHeadOffice',
|
|
},
|
|
] satisfies QTableProps['columns'];
|
|
|
|
const modal = ref<boolean>(false);
|
|
const hideStat = ref(false);
|
|
const currentId = ref<string>('');
|
|
const currentStatus = ref<Status | 'All'>('All');
|
|
const expandedTree = ref<string[]>([]);
|
|
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
|
|
{
|
|
icon: 'mdi-phone-outline',
|
|
color: 'hsl(var(--info-bg))',
|
|
bgColor: 'var(--surface-1)',
|
|
},
|
|
{
|
|
icon: 'mdi-map-marker-radius-outline',
|
|
color: 'hsl(var(--info-bg))',
|
|
bgColor: 'var(--surface-1)',
|
|
},
|
|
{
|
|
icon: 'mdi-map-legend',
|
|
color: 'hsl(var(--info-bg))',
|
|
bgColor: 'var(--surface-1)',
|
|
},
|
|
]);
|
|
|
|
const formBankBook = ref<BankBook[]>([
|
|
{
|
|
bankName: '',
|
|
accountNumber: '',
|
|
bankBranch: '',
|
|
accountName: '',
|
|
accountType: '',
|
|
currentlyUse: true,
|
|
},
|
|
]);
|
|
|
|
const refImageUpload = ref();
|
|
const isImageEdit = ref(false);
|
|
const profileFileImg = ref<File | undefined>(undefined);
|
|
const imageUrl = ref<string>('');
|
|
const prevImageUrl = ref<string>('');
|
|
const currentNode = ref<BranchWithChildren>();
|
|
const imageDialog = ref(false);
|
|
|
|
const profileFile = ref<File | undefined>(undefined);
|
|
const qrCodeimageUrl = ref<string | null>('');
|
|
|
|
const inputFile = (() => {
|
|
const element = document.createElement('input');
|
|
element.type = 'file';
|
|
element.accept = 'image/*';
|
|
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => {
|
|
if (typeof reader.result === 'string') qrCodeimageUrl.value = reader.result;
|
|
});
|
|
|
|
element.addEventListener('change', () => {
|
|
profileFile.value = element.files?.[0];
|
|
if (profileFile.value) {
|
|
reader.readAsDataURL(profileFile.value);
|
|
}
|
|
});
|
|
|
|
return element;
|
|
})();
|
|
|
|
const branchStore = useBranchStore();
|
|
const flowStore = useFlowStore();
|
|
const { locale } = useI18n();
|
|
|
|
const { data: branchData } = storeToRefs(branchStore);
|
|
|
|
const treeData = computed(() => {
|
|
const arr: BranchWithChildren[] = [];
|
|
|
|
branchData.value?.result.forEach((a) => {
|
|
if (a.isHeadOffice) arr.push(Object.assign(a, { branch: [] }));
|
|
else arr.find((b) => b.id === a.headOfficeId)?.branch.push(a);
|
|
});
|
|
|
|
return arr;
|
|
});
|
|
|
|
async function calculateStats() {
|
|
const _stats = await branchStore.stats();
|
|
|
|
if (_stats) {
|
|
stats.value = [
|
|
{
|
|
icon: 'mdi-office-building-outline',
|
|
count: _stats.hq,
|
|
label: 'branchHQLabel',
|
|
color: 'pink',
|
|
},
|
|
{
|
|
icon: 'mdi-home-group',
|
|
count: _stats.br,
|
|
label: 'branchLabel',
|
|
color: 'purple',
|
|
},
|
|
];
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
utilsStore.currentTitle.title = 'branchManagement';
|
|
utilsStore.currentTitle.path = [
|
|
{
|
|
text: 'branchManagementCaption',
|
|
i18n: true,
|
|
handler: () => {
|
|
fieldSelectedBranch.value.value = 'branchHQLabel';
|
|
currentHq.value = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
},
|
|
},
|
|
// track of the currently selected HQ branch, so when we reset it to an empty
|
|
// object, we are effectively unselecting any HQ branch.
|
|
];
|
|
|
|
await branchStore.fetchList({ pageSize: 99999 });
|
|
await calculateStats();
|
|
|
|
modeView.value = $q.screen.lt.md ? true : false;
|
|
|
|
flowStore.rotate();
|
|
});
|
|
|
|
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
|
|
|
const beforeBranch = ref<{ id: string; code: string }>({
|
|
id: '',
|
|
code: '',
|
|
});
|
|
|
|
const inputSearch = ref<string>('');
|
|
const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
|
|
const fieldDisplay = ref<
|
|
(
|
|
| 'branchLabelName'
|
|
| 'branchLabelAddress'
|
|
| 'branchLabelTel'
|
|
| 'branchLabelType'
|
|
| 'branchLabelNo'
|
|
)[]
|
|
>([
|
|
'branchLabelNo',
|
|
'branchLabelName',
|
|
'branchLabelTel',
|
|
'branchLabelAddress',
|
|
'branchLabelType',
|
|
]);
|
|
const fieldSelected = ref<
|
|
(
|
|
| 'branchLabelNo'
|
|
| 'branchLabelName'
|
|
| 'branchLabelAddress'
|
|
| 'branchLabelTel'
|
|
| 'branchLabelType'
|
|
)[]
|
|
>(fieldDisplay.value);
|
|
const fieldSelectedBranch = ref<{
|
|
label: string;
|
|
value: string;
|
|
}>({
|
|
label: t('branchHQLabel'),
|
|
value: 'branchHQLabel',
|
|
});
|
|
|
|
const stats = ref<
|
|
{ icon: string; count: number; label: string; color: 'pink' | 'purple' }[]
|
|
>([]);
|
|
|
|
const modeView = ref<boolean>(false);
|
|
|
|
const splitterModel = ref(25);
|
|
|
|
const defaultFormData = {
|
|
headOfficeId: null,
|
|
code: '',
|
|
taxNo: '',
|
|
nameEN: '',
|
|
name: '',
|
|
addressEN: '',
|
|
address: '',
|
|
zipCode: '',
|
|
email: '',
|
|
contactName: '',
|
|
contact: '',
|
|
telephoneNo: '',
|
|
longitude: '',
|
|
latitude: '',
|
|
subDistrictId: '',
|
|
districtId: '',
|
|
provinceId: '',
|
|
lineId: '',
|
|
};
|
|
|
|
const formDialogRef = ref();
|
|
|
|
const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
|
|
const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
|
|
const currentHq = ref<{ id: string; code: string }>({ id: '', code: '' });
|
|
const currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
|
|
const formData = ref<
|
|
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
|
|
>(structuredClone(defaultFormData));
|
|
|
|
const prevFormData = ref<
|
|
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
|
|
>(structuredClone(defaultFormData));
|
|
|
|
const modalDrawer = ref<boolean>(false);
|
|
|
|
function openDrawer() {
|
|
modalDrawer.value = true;
|
|
}
|
|
|
|
function openDialog() {
|
|
modal.value = true;
|
|
}
|
|
|
|
async function fetchBranchById(id: string) {
|
|
const res = await branchStore.fetchById(id, { includeContact: true });
|
|
|
|
if (res) {
|
|
qrCodeimageUrl.value = res.qrCodeImageUrl;
|
|
imageUrl.value = res.imageUrl;
|
|
prevImageUrl.value = res.imageUrl;
|
|
|
|
const updatedBank = res.bank.map((item) => {
|
|
const { id: _id, branchId: _branchId, ...rest } = item;
|
|
return rest;
|
|
});
|
|
formBankBook.value = updatedBank;
|
|
|
|
formData.value = {
|
|
code: res.code,
|
|
headOfficeId: res.headOfficeId,
|
|
taxNo: res.taxNo,
|
|
nameEN: res.nameEN,
|
|
name: res.name,
|
|
addressEN: res.addressEN,
|
|
address: res.address,
|
|
zipCode: res.zipCode,
|
|
email: res.email,
|
|
contactName: res.contactName,
|
|
contact: res.contact.length > 0 ? res.contact[0].telephoneNo : ' ',
|
|
telephoneNo: res.telephoneNo,
|
|
longitude: res.longitude,
|
|
latitude: res.latitude,
|
|
subDistrictId: res.subDistrictId,
|
|
districtId: res.districtId,
|
|
provinceId: res.provinceId,
|
|
lineId: res.lineId,
|
|
status: res.status,
|
|
};
|
|
}
|
|
}
|
|
|
|
function clearData() {
|
|
formData.value = structuredClone(defaultFormData);
|
|
imageUrl.value = '';
|
|
qrCodeimageUrl.value = null;
|
|
currentEdit.value = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
profileFile.value = undefined;
|
|
|
|
formBankBook.value = [
|
|
{
|
|
bankName: '',
|
|
accountNumber: '',
|
|
bankBranch: '',
|
|
accountName: '',
|
|
accountType: '',
|
|
currentlyUse: true,
|
|
},
|
|
];
|
|
}
|
|
|
|
async function undo() {
|
|
isImageEdit.value = false;
|
|
formType.value = 'view';
|
|
imageUrl.value = prevImageUrl.value;
|
|
formData.value = prevFormData.value;
|
|
}
|
|
|
|
function triggerCreate(
|
|
type: 'headOffice' | 'subBranch',
|
|
id?: string,
|
|
code?: string,
|
|
) {
|
|
clearData();
|
|
|
|
formTypeBranch.value = type;
|
|
|
|
if (type === 'headOffice') {
|
|
currentHq.value = {
|
|
id: id ?? '',
|
|
code: code ?? '',
|
|
};
|
|
}
|
|
|
|
if (type === 'subBranch' && id && code) {
|
|
isSubCreate.value = true;
|
|
formData.value.headOfficeId = id;
|
|
formData.value.code = code;
|
|
formData.value.codeHeadOffice = code;
|
|
}
|
|
|
|
formType.value = 'create';
|
|
openDialog();
|
|
}
|
|
|
|
function drawerEdit() {
|
|
isImageEdit.value = true;
|
|
formType.value = 'edit';
|
|
prevFormData.value = {
|
|
...formData.value,
|
|
};
|
|
}
|
|
|
|
async function triggerEdit(
|
|
openFormType: string,
|
|
id: string,
|
|
typeBranch: 'headOffice' | 'subBranch',
|
|
code?: string,
|
|
) {
|
|
await fetchBranchById(id);
|
|
if (openFormType === 'form') {
|
|
formType.value = 'edit';
|
|
openDialog();
|
|
}
|
|
if (openFormType === 'drawer') {
|
|
formType.value = 'view';
|
|
openDrawer();
|
|
}
|
|
|
|
if (typeBranch === 'headOffice') {
|
|
formData.value.codeHeadOffice = code;
|
|
}
|
|
|
|
currentId.value = id;
|
|
|
|
const currentRecord = branchData.value.result.find((x) => x.id === id);
|
|
|
|
if (!currentRecord) return;
|
|
|
|
currentEdit.value = {
|
|
id: currentRecord.id,
|
|
code: currentRecord.code,
|
|
};
|
|
|
|
if (typeBranch === 'subBranch') {
|
|
const currentRecordHead = branchData.value.result.find(
|
|
(x) => x.id === currentRecord.headOfficeId,
|
|
);
|
|
|
|
formData.value.codeHeadOffice = currentRecordHead?.code;
|
|
|
|
if (currentRecordHead) {
|
|
currentHq.value.id = currentRecordHead.id;
|
|
currentHq.value.code = currentRecordHead.code;
|
|
} else {
|
|
currentHq.value = currentEdit.value;
|
|
}
|
|
}
|
|
formTypeBranch.value = typeBranch;
|
|
}
|
|
|
|
function triggerDelete(id: string) {
|
|
if (id) {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-alert',
|
|
title: t('deleteConfirmTitle'),
|
|
actionText: t('agree'),
|
|
persistent: true,
|
|
message: t('deleteConfirmMessage'),
|
|
action: async () => {
|
|
await branchStore.deleteById(id);
|
|
await branchStore.fetchList({ pageSize: 99999 });
|
|
modalDrawer.value = false;
|
|
await calculateStats();
|
|
|
|
const branchLength = treeData.value.find(
|
|
(node) => node.id === expandedTree.value[0],
|
|
)?.branch.length;
|
|
if (branchLength === 0) {
|
|
expandedTree.value = [];
|
|
fieldSelectedBranch.value.value = 'branchHQLabel';
|
|
currentHq.value = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
}
|
|
flowStore.rotate();
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
}
|
|
|
|
async function triggerChangeStatus(
|
|
id: string,
|
|
status: string,
|
|
): Promise<Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }> {
|
|
return await new Promise((resolve) => {
|
|
dialog({
|
|
color: status !== 'INACTIVE' ? 'warning' : 'info',
|
|
icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
|
|
title: t('confirmChangeStatusTitle'),
|
|
actionText:
|
|
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
|
|
message:
|
|
status !== 'INACTIVE'
|
|
? t('confirmChangeStatusOffMessage')
|
|
: t('confirmChangeStatusOnMessage'),
|
|
action: async () => {
|
|
const res = await branchStore.editById(id, {
|
|
status: status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
|
|
});
|
|
if (res) resolve(res);
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
});
|
|
}
|
|
|
|
async function onSubmit() {
|
|
if (formType.value === 'edit') {
|
|
delete formData.value['codeHeadOffice'];
|
|
delete formData.value['code'];
|
|
|
|
await branchStore.editById(
|
|
currentEdit.value.id,
|
|
{
|
|
...formData.value,
|
|
status: undefined,
|
|
},
|
|
profileFile.value,
|
|
profileFileImg.value,
|
|
formBankBook.value,
|
|
);
|
|
|
|
await branchStore.fetchList({ pageSize: 99999 });
|
|
if (!imageDialog.value) modalDrawer.value = false;
|
|
modal.value = false;
|
|
}
|
|
|
|
if (formType.value === 'create') {
|
|
if (formTypeBranch.value === 'subBranch') {
|
|
const currentRecord = branchData.value.result.find(
|
|
(x) => x.id === formData.value.headOfficeId,
|
|
);
|
|
|
|
formData.value.headOfficeId = currentRecord?.id;
|
|
formData.value.code = formData.value.code?.slice(0, -6);
|
|
delete formData.value['codeHeadOffice'];
|
|
}
|
|
|
|
await branchStore.create(
|
|
{
|
|
...formData.value,
|
|
qrCodeImage: profileFile.value,
|
|
imageUrl: profileFileImg.value,
|
|
},
|
|
formBankBook.value,
|
|
);
|
|
|
|
await branchStore.fetchList({ pageSize: 99999 });
|
|
modal.value = false;
|
|
}
|
|
|
|
const _stats = await branchStore.stats();
|
|
|
|
if (_stats) {
|
|
stats.value = [
|
|
{
|
|
icon: 'mdi-home',
|
|
count: _stats.hq,
|
|
label: 'branchHQLabel',
|
|
color: 'pink',
|
|
},
|
|
{
|
|
icon: 'mdi-domain',
|
|
count: _stats.br,
|
|
label: 'branchLabel',
|
|
color: 'purple',
|
|
},
|
|
];
|
|
}
|
|
flowStore.rotate();
|
|
}
|
|
|
|
function changeTitle(
|
|
formType: 'edit' | 'create' | 'delete' | 'view',
|
|
typeBranch: 'headOffice' | 'subBranch',
|
|
) {
|
|
if (typeBranch === 'headOffice') {
|
|
return formType === 'create'
|
|
? t('formDialogTitleCreateHeadOffice')
|
|
: formType === 'view'
|
|
? t('formDialogTitleViewHeadOffice')
|
|
: t('formDialogTitleEditHeadOffice');
|
|
}
|
|
if (typeBranch === 'subBranch') {
|
|
return formType === 'create'
|
|
? t('formDialogTitleCreateSubBranch')
|
|
: formType === 'view'
|
|
? t('formDialogTitleViewSubBranch')
|
|
: t('formDialogTitleEditSubBranch');
|
|
}
|
|
return '';
|
|
}
|
|
|
|
function handleHold(node: BranchWithChildren) {
|
|
if ($q.screen.gt.xs) return;
|
|
return function (props: unknown) {
|
|
holdDialog.value = true;
|
|
currentNode.value = node;
|
|
};
|
|
}
|
|
|
|
async function handleImageUpload(file: File | null, url: string | null) {
|
|
if (formType.value === 'view') {
|
|
formType.value = 'edit';
|
|
await onSubmit();
|
|
formType.value = 'view';
|
|
}
|
|
if (formType.value === 'edit') {
|
|
await onSubmit();
|
|
}
|
|
imageDialog.value = false;
|
|
}
|
|
|
|
watch(
|
|
() => profileFileImg.value,
|
|
() => {
|
|
if (profileFileImg.value !== null) isImageEdit.value = true;
|
|
},
|
|
);
|
|
|
|
watch(locale, () => {
|
|
fieldSelectedBranch.value = {
|
|
label: t(`${fieldSelectedBranch.value.label}`),
|
|
value: fieldSelectedBranch.value.value,
|
|
};
|
|
});
|
|
|
|
watch(
|
|
() => $q.screen.lt.md,
|
|
(v) => {
|
|
if (v) modeView.value = true;
|
|
},
|
|
);
|
|
|
|
watch(currentHq, () => {
|
|
const tmp: typeof utilsStore.currentTitle.path = [
|
|
{
|
|
text: 'branchManagementCaption',
|
|
i18n: true,
|
|
handler: () => {
|
|
fieldSelectedBranch.value.value = 'branchHQLabel';
|
|
currentHq.value = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
},
|
|
},
|
|
];
|
|
|
|
if (currentHq.value.id !== '') {
|
|
tmp.push({
|
|
text: currentHq.value.code,
|
|
});
|
|
}
|
|
|
|
utilsStore.currentTitle.path = tmp;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column full-height no-wrap">
|
|
<div class="text-body-2 q-mb-xs flex items-center">
|
|
{{ $t('branchStatTitle') }}
|
|
<q-btn
|
|
class="q-ml-xs"
|
|
icon="mdi-pin-outline"
|
|
color="primary"
|
|
size="sm"
|
|
flat
|
|
dense
|
|
rounded
|
|
@click="hideStat = !hideStat"
|
|
:style="hideStat ? 'rotate: 90deg' : ''"
|
|
style="transition: 0.1s ease-in-out"
|
|
/>
|
|
</div>
|
|
<transition name="slide">
|
|
<StatCard
|
|
v-if="!hideStat"
|
|
class="q-pb-md"
|
|
label-i18n
|
|
:branch="
|
|
expandedTree[0]
|
|
? [
|
|
{
|
|
...stats[1],
|
|
count: (() => {
|
|
const foundItem = treeData.find(
|
|
(i) => i.id === expandedTree[0],
|
|
);
|
|
return foundItem ? foundItem._count.branch : 0;
|
|
})(),
|
|
},
|
|
]
|
|
: stats
|
|
"
|
|
:dark="$q.dark.isActive"
|
|
/>
|
|
</transition>
|
|
|
|
<div class="col surface-2 rounded" :no-padding="!!branchData.total">
|
|
<template v-if="!branchData.total">
|
|
<div class="full-width full-height column">
|
|
<div class="self-end q-ma-md">
|
|
<TooltipComponent
|
|
class="self-end"
|
|
title="branchNoMainOfficeYet"
|
|
caption="branchClickToCreateMainOffice"
|
|
imgSrc="personnel-table-"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col flex items-center justify-center">
|
|
<AddButton
|
|
label="branchAdd"
|
|
@trigger="() => triggerCreate('headOffice')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="full-height column" style="flex-grow: 1; flex-wrap: nowrap">
|
|
<q-splitter
|
|
v-model="splitterModel"
|
|
:limits="[0, 100]"
|
|
class="col"
|
|
before-class="overflow-hidden"
|
|
after-class="overflow-hidden"
|
|
>
|
|
<template v-slot:before>
|
|
<div class="surface-1 column full-height">
|
|
<div
|
|
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
|
|
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
|
|
>
|
|
<div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
|
|
<q-btn
|
|
round
|
|
flat
|
|
size="md"
|
|
dense
|
|
id="hq-add-btn"
|
|
class="q-mr-sm"
|
|
@click="
|
|
() => {
|
|
if (!currentHq.id) {
|
|
triggerCreate('headOffice');
|
|
} else {
|
|
triggerCreate(
|
|
'subBranch',
|
|
currentHq.id,
|
|
currentHq.code,
|
|
);
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<Icon
|
|
icon="pixelarticons:plus"
|
|
class="cursor-pointer"
|
|
style="color: var(--foreground); scale: 1.5"
|
|
/>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div class="col full-width scroll">
|
|
<div class="q-pa-md">
|
|
<TreeCompoent
|
|
v-model:nodes="treeData"
|
|
v-model:expanded-tree="expandedTree"
|
|
node-key="id"
|
|
label-key="name"
|
|
children-key="branch"
|
|
type-tree="branch"
|
|
@handle-hold="(v) => handleHold(v)"
|
|
@select="
|
|
(v) => {
|
|
if (
|
|
v.isHeadOffice &&
|
|
v._count.branch !== 0 &&
|
|
currentHq.id === v.id
|
|
) {
|
|
expandedTree = expandedTree.filter(
|
|
(i) => v.id !== i,
|
|
);
|
|
fieldSelectedBranch.value = 'branchHQLabel';
|
|
|
|
currentHq = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
return;
|
|
}
|
|
|
|
if (
|
|
v.isHeadOffice &&
|
|
v._count.branch !== 0 &&
|
|
currentHq.id !== v.id
|
|
) {
|
|
expandedTree = [];
|
|
expandedTree.push(v.id);
|
|
fieldSelectedBranch.value = '';
|
|
inputSearch = '';
|
|
currentHq = {
|
|
id: v.id,
|
|
code: v.code,
|
|
};
|
|
beforeBranch = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
}
|
|
}
|
|
"
|
|
@create="(v) => triggerCreate('subBranch', v.id, v.code)"
|
|
@view="
|
|
(v) => {
|
|
if (v.isHeadOffice) {
|
|
triggerEdit('drawer', v.id, 'headOffice', v.code);
|
|
} else {
|
|
triggerEdit('drawer', v.id, 'subBranch');
|
|
}
|
|
}
|
|
"
|
|
@edit="
|
|
(v) => {
|
|
if (v.isHeadOffice) {
|
|
triggerEdit('form', v.id, 'headOffice', v.code);
|
|
} else {
|
|
triggerEdit('form', v.id, 'subBranch');
|
|
}
|
|
}
|
|
"
|
|
@delete="
|
|
(v) => {
|
|
triggerDelete(v.id);
|
|
}
|
|
"
|
|
@change-status="
|
|
async (v) => {
|
|
const res = await triggerChangeStatus(v.id, v.status);
|
|
if (res) v.status = res.status;
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<div class="column full-height no-wrap">
|
|
<div
|
|
class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
|
|
>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
for="input-search"
|
|
outlined
|
|
dense
|
|
:label="$t('search')"
|
|
class="q-mr-md col-12 col-md-4"
|
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
|
v-model="inputSearch"
|
|
debounce="200"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="mdi-magnify" />
|
|
</template>
|
|
</q-input>
|
|
|
|
<div
|
|
class="row col-12 col-md-6"
|
|
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
|
>
|
|
<q-select
|
|
lazy-rules="ondemand"
|
|
v-model="statusFilter"
|
|
outlined
|
|
dense
|
|
option-value="value"
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
option-label="label"
|
|
class="col"
|
|
map-options
|
|
:for="'field-select-status'"
|
|
emit-value
|
|
:options="[
|
|
{ label: $t('all'), value: 'all' },
|
|
{ label: $t('statusACTIVE'), value: 'statusACTIVE' },
|
|
{
|
|
label: $t('statusINACTIVE'),
|
|
value: 'statusINACTIVE',
|
|
},
|
|
]"
|
|
></q-select>
|
|
|
|
<q-select
|
|
lazy-rules="ondemand"
|
|
id="select-field"
|
|
for="select-field"
|
|
:options="
|
|
fieldDisplay.map((v) => ({ label: $t(v), value: v }))
|
|
"
|
|
:display-value="$t('displayField')"
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
class="col q-mx-sm"
|
|
v-model="fieldSelected"
|
|
option-label="label"
|
|
option-value="value"
|
|
map-options
|
|
emit-value
|
|
outlined
|
|
multiple
|
|
dense
|
|
/>
|
|
|
|
<q-btn-toggle
|
|
id="btn-mode"
|
|
v-model="modeView"
|
|
dense
|
|
class="no-shadow bordered rounded surface-1"
|
|
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
|
size="xs"
|
|
:options="[
|
|
{ value: true, slot: 'folder' },
|
|
{ value: false, slot: 'list' },
|
|
]"
|
|
>
|
|
<template v-slot:folder>
|
|
<q-icon
|
|
name="mdi-view-grid-outline"
|
|
size="16px"
|
|
class="q-px-sm q-py-xs rounded"
|
|
:style="{
|
|
color: $q.dark.isActive
|
|
? modeView
|
|
? '#C9D3DB '
|
|
: '#787B7C'
|
|
: modeView
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
<template v-slot:list>
|
|
<q-icon
|
|
name="mdi-format-list-bulleted"
|
|
class="q-px-sm q-py-xs rounded"
|
|
size="16px"
|
|
:style="{
|
|
color: $q.dark.isActive
|
|
? modeView === false
|
|
? '#C9D3DB'
|
|
: '#787B7C'
|
|
: modeView === false
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
</q-btn-toggle>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="surface-2 q-pa-md scroll full-width">
|
|
<q-table
|
|
flat
|
|
bordered
|
|
class="full-width"
|
|
:rows-per-page-options="[0]"
|
|
:rows="
|
|
treeData
|
|
.flatMap((v) => [v, ...v.branch])
|
|
.filter((v) => {
|
|
if (
|
|
statusFilter === 'statusACTIVE' &&
|
|
v.status === 'INACTIVE'
|
|
) {
|
|
return false;
|
|
}
|
|
if (
|
|
statusFilter === 'statusINACTIVE' &&
|
|
v.status !== 'INACTIVE'
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
|
|
if (inputSearch && !terms.includes(inputSearch)) {
|
|
return false;
|
|
}
|
|
|
|
if (
|
|
!!currentHq.id &&
|
|
currentHq.id === v.headOfficeId
|
|
) {
|
|
return true;
|
|
}
|
|
if (fieldSelectedBranch.value === 'all') return true;
|
|
if (fieldSelectedBranch.value === 'branchHQLabel')
|
|
return v.isHeadOffice;
|
|
if (fieldSelectedBranch.value === 'branchLabel')
|
|
return !v.isHeadOffice;
|
|
|
|
return false;
|
|
})
|
|
"
|
|
:columns="columns"
|
|
:grid="modeView"
|
|
card-container-class="row q-col-gutter-md"
|
|
row-key="name"
|
|
hide-pagination
|
|
:visible-columns="fieldSelected"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr
|
|
style="background-color: hsla(var(--info-bg) / 0.07)"
|
|
:props="props"
|
|
>
|
|
<q-th
|
|
v-for="col in props.cols"
|
|
:key="col.name"
|
|
:props="props"
|
|
:class="{
|
|
'q-pl-sm': col.label === 'orderNumber',
|
|
}"
|
|
>
|
|
{{ $t(col.label) }}
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:body="props">
|
|
<q-tr
|
|
:class="{
|
|
'app-text-muted': props.row.status === 'INACTIVE',
|
|
'cursor-pointer': props.row._count.branch !== 0,
|
|
}"
|
|
:props="props"
|
|
@click="
|
|
() => {
|
|
if (
|
|
props.row.isHeadOffice &&
|
|
props.row._count.branch !== 0
|
|
) {
|
|
fieldSelectedBranch.value = '';
|
|
inputSearch = '';
|
|
currentHq = {
|
|
id: props.row.id,
|
|
code: props.row.code,
|
|
};
|
|
beforeBranch = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
expandedTree = [];
|
|
expandedTree.push(props.row.id);
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-td
|
|
class="text-center"
|
|
v-if="fieldSelected.includes('branchLabelNo')"
|
|
>
|
|
{{ props.rowIndex + 1 }}
|
|
</q-td>
|
|
|
|
<q-td v-if="fieldSelected.includes('branchLabelName')">
|
|
<div class="row items-center">
|
|
<div
|
|
:class="{
|
|
'q-mr-sm': true,
|
|
'status-active':
|
|
props.row.status !== 'INACTIVE',
|
|
'status-inactive':
|
|
props.row.status === 'INACTIVE',
|
|
'branch-card__hq': props.row.isHeadOffice,
|
|
'branch-card__br': !props.row.isHeadOffice,
|
|
}"
|
|
style="
|
|
width: 50px;
|
|
display: flex;
|
|
margin-bottom: var(--size-2);
|
|
"
|
|
>
|
|
<div class="">
|
|
<q-img
|
|
:src="
|
|
baseUrl +
|
|
`/branch/${props.row.id}/branch-image?ts=${Date.now()}`
|
|
"
|
|
style="
|
|
height: 3rem;
|
|
width: 3rem;
|
|
border-radius: 50%;
|
|
aspect-ratio: 1;
|
|
overflow: visible;
|
|
"
|
|
>
|
|
<template #error>
|
|
<div class="branch-card__icon">
|
|
<q-icon
|
|
size="sm"
|
|
name="mdi-office-building-outline"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</q-img>
|
|
|
|
<!-- <q-icon
|
|
size="md"
|
|
style="scale: 0.8"
|
|
name="mdi-office-building-outline"
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="col">{{ props.row.name }}</div>
|
|
<div class="col app-text-muted">
|
|
{{ props.row.code }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-td>
|
|
<q-td
|
|
v-if="fieldSelected.includes('branchLabelAddress')"
|
|
>
|
|
{{ props.row.address }}
|
|
</q-td>
|
|
<q-td v-if="fieldSelected.includes('branchLabelTel')">
|
|
{{ props.row.contact[0]?.telephoneNo || '-' }}
|
|
</q-td>
|
|
<q-td v-if="fieldSelected.includes('branchLabelType')">
|
|
{{
|
|
props.row.isHeadOffice
|
|
? $t('branchHQLabel')
|
|
: $t('branchLabel')
|
|
}}
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
icon="mdi-dots-vertical"
|
|
:id="`btn-dots-${props.row.code}`"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop
|
|
>
|
|
<q-menu class="bordered">
|
|
<q-list v-close-popup>
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.name}-view`"
|
|
@click.stop="
|
|
if (props.row.isHeadOffice) {
|
|
triggerEdit(
|
|
'drawer',
|
|
props.row.id,
|
|
'headOffice',
|
|
props.row.code,
|
|
);
|
|
} else {
|
|
triggerEdit(
|
|
'drawer',
|
|
props.row.id,
|
|
'subBranch',
|
|
);
|
|
}
|
|
"
|
|
v-close-popup
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
>
|
|
<q-icon
|
|
name="mdi-eye-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--green-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('viewDetail') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.name}-edit`"
|
|
v-close-popup
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
@click="
|
|
() => {
|
|
if (props.row.isHeadOffice) {
|
|
triggerEdit(
|
|
'drawer',
|
|
props.row.id,
|
|
'headOffice',
|
|
props.row.code,
|
|
);
|
|
} else {
|
|
triggerEdit(
|
|
'drawer',
|
|
props.row.id,
|
|
'subBranch',
|
|
);
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-icon
|
|
name="mdi-pencil-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--cyan-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('edit') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
dense
|
|
v-close-popup
|
|
:clickable="props.row.status === 'CREATED'"
|
|
class="row"
|
|
:class="{
|
|
'surface-3': props.row.status !== 'CREATED',
|
|
'app-text-muted':
|
|
props.row.status !== 'CREATED',
|
|
}"
|
|
style="white-space: nowrap"
|
|
@click="triggerDelete(props.row.id)"
|
|
>
|
|
<q-icon
|
|
name="mdi-trash-can-outline"
|
|
size="xs"
|
|
class="col-3"
|
|
:class="{
|
|
'app-text-negative':
|
|
props.row.status === 'CREATED',
|
|
}"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('delete') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item dense>
|
|
<q-item-section class="q-py-sm">
|
|
<div class="q-pa-sm surface-2 rounded">
|
|
<q-toggle
|
|
color="positive"
|
|
:id="`view-detail-btn-${props.row.name}-status`"
|
|
dense
|
|
size="sm"
|
|
:label="
|
|
props.row.status !== 'INACTIVE'
|
|
? $t('switchOnLabel')
|
|
: $t('switchOffLabel')
|
|
"
|
|
@click="
|
|
async () => {
|
|
const res =
|
|
await triggerChangeStatus(
|
|
props.row.id,
|
|
props.row.status,
|
|
);
|
|
|
|
if (res)
|
|
props.row.status = res.status;
|
|
}
|
|
"
|
|
:model-value="
|
|
props.row.status === 'CREATED' ||
|
|
props.row.status === 'ACTIVE'
|
|
"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:item="props">
|
|
<div class="col-12 col-md-6">
|
|
<BranchCard
|
|
class="surface-1"
|
|
:id="`branch-card-${props.row.name}`"
|
|
:class="{
|
|
'cursor-pointer': props.row._count.branch !== 0,
|
|
}"
|
|
@click="
|
|
() => {
|
|
if (
|
|
props.row.isHeadOffice &&
|
|
props.row._count.branch !== 0
|
|
) {
|
|
fieldSelectedBranch.value = '';
|
|
inputSearch = '';
|
|
currentHq = {
|
|
id: props.row.id,
|
|
code: props.row.code,
|
|
};
|
|
beforeBranch = {
|
|
id: '',
|
|
code: '',
|
|
};
|
|
expandedTree = [];
|
|
expandedTree.push(props.row.id);
|
|
}
|
|
}
|
|
"
|
|
:metadata="props.row"
|
|
:color="props.row.isHeadOffice ? 'hq' : 'br'"
|
|
:key="props.row.id"
|
|
:data="{
|
|
branchLabelCode: props.row.code,
|
|
branchLabelName:
|
|
$i18n.locale === 'en-US'
|
|
? props.row.nameEN
|
|
: props.row.name,
|
|
branchLabelTel: props.row.contact
|
|
.map((c: BranchContact) => c.telephoneNo)
|
|
.join(','),
|
|
branchLabelAddress:
|
|
$i18n.locale === 'en-US'
|
|
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
|
|
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
|
|
branchLabelType: $t(
|
|
props.row.isHeadOffice
|
|
? 'branchHQLabel'
|
|
: 'branchLabel',
|
|
),
|
|
branchImgUrl: `/branch/${props.row.id}/branch-image`,
|
|
}"
|
|
:field-selected="fieldSelected"
|
|
:badge-field="['branchLabelStatus']"
|
|
:inactive="props.row.status === 'INACTIVE'"
|
|
@view-detail="
|
|
(v) => {
|
|
triggerEdit(
|
|
'drawer',
|
|
v.id,
|
|
v.isHeadOffice ? 'headOffice' : 'subBranch',
|
|
v.code,
|
|
);
|
|
}
|
|
"
|
|
>
|
|
<template v-slot:action>
|
|
<q-menu class="bordered">
|
|
<q-list>
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.name}-view`"
|
|
@click.stop="
|
|
if (props.row.isHeadOffice) {
|
|
triggerEdit(
|
|
'drawer',
|
|
props.row.id,
|
|
'headOffice',
|
|
props.row.code,
|
|
);
|
|
} else {
|
|
triggerEdit(
|
|
'drawer',
|
|
props.row.id,
|
|
'subBranch',
|
|
);
|
|
}
|
|
"
|
|
v-close-popup
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
>
|
|
<q-icon
|
|
name="mdi-eye-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--green-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('viewDetail') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.name}-edit`"
|
|
v-close-popup
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
@click="
|
|
() => {
|
|
if (props.row.isHeadOffice) {
|
|
triggerEdit(
|
|
'form',
|
|
props.row.id,
|
|
'headOffice',
|
|
props.row.code,
|
|
);
|
|
} else {
|
|
triggerEdit(
|
|
'form',
|
|
props.row.id,
|
|
'subBranch',
|
|
);
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-icon
|
|
name="mdi-pencil-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--cyan-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('edit') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
dense
|
|
v-close-popup
|
|
:clickable="props.row.status === 'CREATED'"
|
|
class="row"
|
|
:class="{
|
|
'surface-3': props.row.status !== 'CREATED',
|
|
'app-text-muted':
|
|
props.row.status !== 'CREATED',
|
|
}"
|
|
style="white-space: nowrap"
|
|
@click="triggerDelete(props.row.id)"
|
|
>
|
|
<q-icon
|
|
name="mdi-trash-can-outline"
|
|
size="xs"
|
|
class="col-3"
|
|
:class="{
|
|
'app-text-negative':
|
|
props.row.status === 'CREATED',
|
|
}"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('delete') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item dense>
|
|
<q-item-section class="q-py-sm">
|
|
<div class="q-pa-sm surface-2 rounded">
|
|
<q-toggle
|
|
:id="`view-detail-btn-${props.row.name}-status`"
|
|
color="positive"
|
|
dense
|
|
size="sm"
|
|
:label="
|
|
props.row.status !== 'INACTIVE'
|
|
? $t('switchOnLabel')
|
|
: $t('switchOffLabel')
|
|
"
|
|
@click="
|
|
async () => {
|
|
const res =
|
|
await triggerChangeStatus(
|
|
props.row.id,
|
|
props.row.status,
|
|
);
|
|
|
|
if (res)
|
|
props.row.status = res.status;
|
|
}
|
|
"
|
|
:model-value="
|
|
props.row.status === 'CREATED' ||
|
|
props.row.status === 'ACTIVE'
|
|
"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</template>
|
|
</BranchCard>
|
|
</div>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</q-splitter>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogForm
|
|
ref="formDialogRef"
|
|
v-model:modal="modal"
|
|
:title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
|
|
:submit="
|
|
() => {
|
|
onSubmit();
|
|
}
|
|
"
|
|
:close="
|
|
() => (
|
|
(modal = false),
|
|
(profileFileImg = undefined),
|
|
(isImageEdit = false),
|
|
(isSubCreate = false)
|
|
)
|
|
"
|
|
>
|
|
<div class="q-mx-lg q-mt-lg">
|
|
<!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
|
|
caption="Jobs Worker Service Co., Ltd." -->
|
|
<ProfileBanner
|
|
active
|
|
useToggle
|
|
:title="formData.name"
|
|
:caption="formData.codeHeadOffice"
|
|
v-model:toggle-status="formData.status"
|
|
v-model:cover-url="imageUrl"
|
|
:hideFade="imageUrl === '' || imageUrl === null"
|
|
:img="imageUrl || null"
|
|
icon="mdi-office-building-outline"
|
|
:color="`hsla(var(${
|
|
formTypeBranch === 'headOffice'
|
|
? '--pink-6'
|
|
: $q.dark.isActive
|
|
? '--violet-10'
|
|
: '--violet-11'
|
|
}-hsl)/1)`"
|
|
:bg-color="`hsla(var(${
|
|
formTypeBranch === 'headOffice'
|
|
? '--pink-6'
|
|
: $q.dark.isActive
|
|
? '--violet-10'
|
|
: '--violet-11'
|
|
}-hsl)/0.15)`"
|
|
:menu="formMenuIcon"
|
|
@view="imageDialog = true"
|
|
@edit="refImageUpload && refImageUpload.browse()"
|
|
@update:toggle-status="
|
|
() => {
|
|
formData.status =
|
|
formData.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
|
id="branch-form"
|
|
>
|
|
<div class="col">
|
|
<div style="position: sticky; top: 0" class="q-pa-sm">
|
|
<SideMenu
|
|
:menu="[
|
|
{
|
|
name: $t('formDialogTitleInformation'),
|
|
anchor: 'form-information',
|
|
},
|
|
{
|
|
name: $t('formDialogTitleContact'),
|
|
anchor: 'form-contact',
|
|
},
|
|
{
|
|
name: $t('formDialogTitleAddress'),
|
|
anchor: 'form-address',
|
|
},
|
|
{
|
|
name: $t('formDialogTitleLocation'),
|
|
anchor: 'form-location',
|
|
},
|
|
{
|
|
name: 'QR Code',
|
|
anchor: 'form-qr',
|
|
},
|
|
{
|
|
name: $t('bankBook'),
|
|
anchor: 'form-bank',
|
|
},
|
|
]"
|
|
background="transparent"
|
|
:active="{
|
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
|
foreground: 'var(--blue-6)',
|
|
}"
|
|
scroll-element="#branch-form"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-10 q-pa-md q-gutter-y-xl">
|
|
<FormBranchInformation
|
|
id="form-information"
|
|
v-model:abbreviation="formData.code"
|
|
v-model:code="formData.codeHeadOffice"
|
|
v-model:code-sub-branch="currentEdit.code"
|
|
v-model:taxNo="formData.taxNo"
|
|
v-model:name="formData.name"
|
|
v-model:nameEN="formData.nameEN"
|
|
v-model:type-branch="formTypeBranch"
|
|
:dense="true"
|
|
:outlined="true"
|
|
:readonly="formType === 'view'"
|
|
:view="isSubCreate"
|
|
title="formDialogTitleInformation"
|
|
/>
|
|
<FormBranchContact
|
|
id="form-contact"
|
|
v-model:type-branch="formTypeBranch"
|
|
v-model:telephone-no="formData.telephoneNo"
|
|
v-model:contact="formData.contact"
|
|
v-model:email="formData.email"
|
|
v-model:contact-name="formData.contactName"
|
|
v-model:line-id="formData.lineId"
|
|
:separator="true"
|
|
title="formDialogTitleContact"
|
|
:dense="true"
|
|
:outlined="true"
|
|
/>
|
|
<FormAddress
|
|
id="form-address"
|
|
dense
|
|
outlined
|
|
separator
|
|
prefix-id="default"
|
|
:title="$t('formDialogTitleAddress')"
|
|
v-model:address="formData.address"
|
|
v-model:addressEN="formData.addressEN"
|
|
v-model:province-id="formData.provinceId"
|
|
v-model:district-id="formData.districtId"
|
|
v-model:sub-district-id="formData.subDistrictId"
|
|
v-model:zip-code="formData.zipCode"
|
|
/>
|
|
<FormLocation
|
|
id="form-location"
|
|
:readonly="formType === 'view'"
|
|
:separator="true"
|
|
v-model:latitude="formData.latitude"
|
|
v-model:longitude="formData.longitude"
|
|
title="formDialogTitleLocation"
|
|
/>
|
|
<FormQr
|
|
id="form-qr"
|
|
title="QR Code"
|
|
:separator="true"
|
|
:qr="qrCodeimageUrl"
|
|
:readonly="formType === 'view'"
|
|
@upload="
|
|
() => {
|
|
inputFile.click();
|
|
}
|
|
"
|
|
/>
|
|
<FormBank
|
|
id="form-bank"
|
|
title="bankBook"
|
|
dense
|
|
v-model:bank-book-list="formBankBook"
|
|
/>
|
|
<!-- <FormImage
|
|
:readonly="formType === 'view'"
|
|
v-model:image="imageUrl"
|
|
@upload="
|
|
() => {
|
|
inputFileImg.click();
|
|
}
|
|
"
|
|
:title="$t('formDialogTitleImg')"
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
</DialogForm>
|
|
|
|
<DrawerInfo
|
|
ref="formDialogRef"
|
|
v-model:drawerOpen="modalDrawer"
|
|
:category="changeTitle(formType, formTypeBranch)"
|
|
:title="$i18n.locale === 'en-US' ? formData.nameEN : formData.name"
|
|
:titleFormAddress="$t('formDialogTitleAddress')"
|
|
:addressSeparator="true"
|
|
:undo="() => undo()"
|
|
:isEdit="formType === 'edit'"
|
|
:editData="() => drawerEdit()"
|
|
:submit="() => onSubmit()"
|
|
:delete-data="() => triggerDelete(currentEdit.id)"
|
|
:close="
|
|
() => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
|
|
"
|
|
:statusBranch="formData.status"
|
|
>
|
|
<InfoForm>
|
|
<div class="q-mx-lg q-mt-lg">
|
|
<ProfileBanner
|
|
:active="formData.status !== 'INACTIVE'"
|
|
useToggle
|
|
v-model:cover-url="imageUrl"
|
|
:hideFade="imageUrl === '' || imageUrl === null"
|
|
:img="imageUrl || null"
|
|
:cover="imageUrl || null"
|
|
:title="formData.name"
|
|
:caption="formData.code"
|
|
icon="mdi-office-building-outline"
|
|
:color="`hsla(var(${
|
|
formTypeBranch === 'headOffice'
|
|
? '--pink-6'
|
|
: $q.dark.isActive
|
|
? '--violet-10'
|
|
: '--violet-11'
|
|
}-hsl)/1)`"
|
|
:bg-color="`hsla(var(${
|
|
formTypeBranch === 'headOffice'
|
|
? '--pink-6'
|
|
: $q.dark.isActive
|
|
? '--violet-10'
|
|
: '--violet-11'
|
|
}-hsl)/0.15)`"
|
|
v-model:toggle-status="formData.status"
|
|
@view="imageDialog = true"
|
|
@edit="refImageUpload && refImageUpload.browse()"
|
|
@update:toggle-status="
|
|
async (v) => {
|
|
const res = await triggerChangeStatus(currentId, v);
|
|
if (res) formData.status = res.status;
|
|
await branchStore.fetchList({ pageSize: 99999 });
|
|
}
|
|
"
|
|
:readonly="formType === 'view'"
|
|
:menu="formMenuIcon"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
|
id="branch-info"
|
|
>
|
|
<div class="col">
|
|
<div style="position: sticky; top: 0" class="q-pa-sm">
|
|
<SideMenu
|
|
:menu="[
|
|
{
|
|
name: $t('formDialogTitleInformation'),
|
|
anchor: 'info-information',
|
|
},
|
|
{
|
|
name: $t('formDialogTitleContact'),
|
|
anchor: 'info-contact',
|
|
},
|
|
{
|
|
name: $t('formDialogTitleAddress'),
|
|
anchor: 'info-address',
|
|
},
|
|
{
|
|
name: $t('formDialogTitleLocation'),
|
|
anchor: 'info-location',
|
|
},
|
|
{
|
|
name: 'QR Code',
|
|
anchor: 'info-qr',
|
|
},
|
|
{
|
|
name: $t('bankBook'),
|
|
anchor: 'info-bank',
|
|
},
|
|
]"
|
|
background="transparent"
|
|
:active="{
|
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
|
foreground: 'var(--blue-6)',
|
|
}"
|
|
scroll-element="#branch-info"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-10 q-pa-md q-gutter-y-xl">
|
|
<FormBranchInformation
|
|
id="info-information"
|
|
v-model:abbreviation="formData.code"
|
|
v-model:code="formData.codeHeadOffice"
|
|
v-model:code-sub-branch="currentEdit.code"
|
|
v-model:taxNo="formData.taxNo"
|
|
v-model:name="formData.name"
|
|
v-model:nameEN="formData.nameEN"
|
|
v-model:type-branch="formTypeBranch"
|
|
:separator="true"
|
|
:dense="true"
|
|
:outlined="true"
|
|
:readonly="formType === 'view'"
|
|
view
|
|
title="formDialogTitleInformation"
|
|
/>
|
|
<FormBranchContact
|
|
id="info-contact"
|
|
title="formDialogTitleContact"
|
|
v-model:telephone-no="formData.telephoneNo"
|
|
v-model:contact="formData.contact"
|
|
v-model:email="formData.email"
|
|
v-model:contact-name="formData.contactName"
|
|
v-model:line-id="formData.lineId"
|
|
:readonly="formType === 'view'"
|
|
:view="formType === 'view'"
|
|
:separator="true"
|
|
:dense="true"
|
|
:outlined="true"
|
|
/>
|
|
<FormAddress
|
|
id="info-address"
|
|
dense
|
|
outlined
|
|
separator
|
|
prefix-id="default"
|
|
:title="$t('formDialogTitleAddress')"
|
|
:readonly="formType === 'view'"
|
|
v-model:address="formData.address"
|
|
v-model:addressEN="formData.addressEN"
|
|
v-model:province-id="formData.provinceId"
|
|
v-model:district-id="formData.districtId"
|
|
v-model:sub-district-id="formData.subDistrictId"
|
|
v-model:zip-code="formData.zipCode"
|
|
/>
|
|
<FormLocation
|
|
id="info-location"
|
|
title="formDialogTitleLocation"
|
|
v-model:latitude="formData.latitude"
|
|
v-model:longitude="formData.longitude"
|
|
:readonly="formType === 'view'"
|
|
:separator="true"
|
|
/>
|
|
<FormQr
|
|
id="info-qr"
|
|
:readonly="formType === 'view'"
|
|
title="QR Code"
|
|
:separator="true"
|
|
:qr="qrCodeimageUrl"
|
|
@upload="
|
|
() => {
|
|
inputFile.click();
|
|
}
|
|
"
|
|
/>
|
|
<FormBank
|
|
id="info-bank"
|
|
:readonly="formType === 'view'"
|
|
title="bankBook"
|
|
dense
|
|
v-model:bank-book-list="formBankBook"
|
|
/>
|
|
<!-- <FormImage
|
|
@upload="
|
|
() => {
|
|
inputFileImg.click();
|
|
}
|
|
"
|
|
v-model:image="imageUrl"
|
|
:title="$t('formDialogTitleImg')"
|
|
:readonly="formType === 'view'"
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
</InfoForm>
|
|
</DrawerInfo>
|
|
|
|
<q-dialog v-model="holdDialog" position="bottom">
|
|
<div class="surface-1 full-width rounded column q-pb-md">
|
|
<div class="flex q-py-sm justify-center full-width">
|
|
<div
|
|
class="rounded"
|
|
style="
|
|
width: 8%;
|
|
height: 4px;
|
|
background-color: hsla(0, 0%, 50%, 0.75);
|
|
"
|
|
></div>
|
|
</div>
|
|
|
|
<q-list v-if="currentNode">
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-close-popup
|
|
@click.stop="
|
|
triggerCreate('subBranch', currentNode.id, currentNode.code)
|
|
"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="mdi-file-plus-outline" class="app-text-muted-2" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ $t('formDialogTitleCreateSubBranch') }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-close-popup
|
|
@click.stop="
|
|
if (currentNode.isHeadOffice) {
|
|
triggerEdit(
|
|
'drawer',
|
|
currentNode.id,
|
|
'headOffice',
|
|
currentNode.code,
|
|
);
|
|
} else {
|
|
triggerEdit('drawer', currentNode.id, 'subBranch');
|
|
}
|
|
"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
name="mdi-eye-outline"
|
|
style="color: hsl(var(--green-6-hsl))"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('viewDetail') }}</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-close-popup
|
|
@click="
|
|
() => {
|
|
if (currentNode && currentNode.isHeadOffice) {
|
|
triggerEdit(
|
|
'form',
|
|
currentNode.id,
|
|
'headOffice',
|
|
currentNode.code,
|
|
);
|
|
} else {
|
|
currentNode && triggerEdit('form', currentNode.id, 'subBranch');
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
name="mdi-pencil-outline"
|
|
style="color: hsl(var(--cyan-6-hsl))"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('edit') }}</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-close-popup
|
|
@click="triggerDelete(currentNode.id)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="mdi-trash-can-outline" class="app-text-negative" />
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('delete') }}</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-ripple>
|
|
<q-item-section avatar>
|
|
<q-toggle
|
|
dense
|
|
color="positive"
|
|
:id="`view-detail-btn-${currentNode.name}-status`"
|
|
size="sm"
|
|
@click="
|
|
async () => {
|
|
if (!currentNode) return;
|
|
const res = await triggerChangeStatus(
|
|
currentNode.id,
|
|
currentNode.status,
|
|
);
|
|
if (res) currentNode.status = res.status;
|
|
}
|
|
"
|
|
:model-value="
|
|
currentNode.status === 'CREATED' ||
|
|
currentNode.status === 'ACTIVE'
|
|
"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{
|
|
currentNode.status !== 'INACTIVE'
|
|
? $t('switchOnLabel')
|
|
: $t('switchOffLabel')
|
|
}}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</q-dialog>
|
|
|
|
<ImageUploadDialog
|
|
ref="refImageUpload"
|
|
v-model:dialogState="imageDialog"
|
|
v-model:file="profileFileImg as File"
|
|
v-model:image-url="imageUrl"
|
|
:hiddenFooter="!isImageEdit"
|
|
clearButton
|
|
@save="handleImageUpload"
|
|
>
|
|
<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(${
|
|
formTypeBranch === 'headOffice'
|
|
? '--pink-6'
|
|
: $q.dark.isActive
|
|
? '--violet-10'
|
|
: '--violet-11'
|
|
}-hsl)/0.15)`"
|
|
>
|
|
<q-icon
|
|
size="15rem"
|
|
name="mdi-office-building-outline"
|
|
:style="`color: hsla(var(${
|
|
formTypeBranch === 'headOffice'
|
|
? '--pink-6'
|
|
: $q.dark.isActive
|
|
? '--violet-10'
|
|
: '--violet-11'
|
|
}-hsl)/1)`"
|
|
></q-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ImageUploadDialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.color-icon-arrow {
|
|
color: var(--gray-3);
|
|
}
|
|
|
|
.color-icon-plus {
|
|
color: var(--cyan-6);
|
|
}
|
|
|
|
.tree-container {
|
|
width: 100%;
|
|
min-width: 300px;
|
|
max-width: 25%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.branch-wrapper {
|
|
flex-grow: 1;
|
|
|
|
& > .branch-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: unset;
|
|
gap: var(--size-4);
|
|
}
|
|
}
|
|
|
|
.branch-card__hq {
|
|
--_branch-card-bg: var(--pink-6-hsl);
|
|
}
|
|
|
|
.branch-card__br {
|
|
--_branch-card-bg: var(--violet-11-hsl);
|
|
|
|
&.branch-card__dark {
|
|
--_branch-card-bg: var(--violet-10-hsl);
|
|
}
|
|
}
|
|
|
|
.status-active {
|
|
--_branch-status-color: var(--green-6-hsl);
|
|
}
|
|
|
|
.status-inactive {
|
|
--_branch-status-color: var(--red-4-hsl);
|
|
--_branch-badge-bg: var(--red-4-hsl);
|
|
filter: grayscale(1);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.branch-card__icon {
|
|
background-color: hsla(var(--_branch-card-bg) / 0.15);
|
|
border-radius: 50%;
|
|
padding: var(--size-2);
|
|
position: relative;
|
|
width: 3rem;
|
|
transform: rotate(45deg);
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
display: block;
|
|
block-size: 0.5rem;
|
|
aspect-ratio: 1;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
right: -0.25rem;
|
|
top: calc(50% - 0.25rem);
|
|
bottom: calc(50% - 0.25rem);
|
|
background-color: hsla(var(--_branch-status-color) / 1);
|
|
}
|
|
|
|
& :deep(.q-icon) {
|
|
transform: rotate(-45deg);
|
|
color: hsla(var(--_branch-card-bg) / 1);
|
|
}
|
|
}
|
|
|
|
.slide-enter-active {
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.slide-leave-active {
|
|
transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
|
|
}
|
|
|
|
.slide-enter-from,
|
|
.slide-leave-to {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
|
|
* :deep(.q-icon.mdi-play) {
|
|
display: none;
|
|
}
|
|
</style>
|