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

fix: แก้ การ ยิง api 3 เส้น

Browse source
This commit is contained in:
Net 2024-06-25 14:31:08 +07:00
parent c78ae55582
commit 86099a9573
1 changed files with 216 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

284
src/pages/04_product-service/MainPage.vue
View file

@ -35,6 +35,7 @@ import {
ServiceById,
WorkItems,
Attributes,
ServiceAndProduct,
} from 'src/stores/product-service/types';
const productServiceStore = useProductServiceStore();
@ -74,6 +75,8 @@ const {
fetchListProductByIdWork,
fetchListOfWork,
fetchListProductAndService,
} = productServiceStore;
const { workNameItems } = storeToRefs(productServiceStore);
@ -131,9 +134,10 @@ const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
const productGroup = ref<ProductGroup[]>();
const productType = ref<ProductGroup[]>();
const product = ref<ProductList[]>();
const product = ref<(ProductList & { type: 'product' })[]>();
const service = ref<(Service & { type: 'service' })[]>();
const resultSearchProduct = ref<ProductList[]>();
const service = ref<Service[]>();
const productAndService = ref<ServiceAndProduct[]>([]);
const productAndServiceTab = ref<string>('all');
const manageWorkNameDialog = ref<boolean>(false);
@ -169,6 +173,7 @@ const formDataProductService = ref<ServiceCreate>({
detail: '',
name: '',
code: '',
productTypeId: '',
});
const serviceTab = [
@ -192,6 +197,10 @@ const selectProduct = ref<ProductList[]>([]);
const currentWorkIndex = ref<number>(0);
const totalProduct = ref<number>(0);
const totalService = ref<number>(0);
const totalProductAndService = ref<number>(0);
const currentId = ref<string>('');
const currentIdType = ref<string>('');
const currentIdService = ref<string>('');
@ -242,6 +251,20 @@ async function searchProduct() {
}
}
async function featchStatsService() {
const resStatsService = await fetchStatsService();
totalService.value = resStatsService;
}
async function featchStatsProduct() {
const resStatsProduct = await fetchStatsProduct({
productTypeId: currentIdType.value,
});
totalProduct.value = resStatsProduct;
}
async function fetchListType() {
const res = await fetchListProductServiceType({
productGroupId: currentId.value,
@ -274,18 +297,44 @@ async function fetchListGroups() {
}
async function fetchListOfProduct(productTypeId: string) {
const res = await fetchListProduct({ productTypeId });
const res = await fetchListProduct({
status:
currentStatus.value === 'INACTIVE'
? 'INACTIVE'
: currentStatus.value === 'ACTIVE'
? 'ACTIVE'
: undefined,
productTypeId,
});
if (res) {
product.value = res.result;
product.value = res.result.map((v) => {
return {
...v,
type: 'product',
};
});
}
}
async function fetchListOfService() {
const res = await fetchListService({ productTypeId: currentIdType.value });
const res = await fetchListService({
status:
currentStatus.value === 'INACTIVE'
? 'INACTIVE'
: currentStatus.value === 'ACTIVE'
? 'ACTIVE'
: undefined,
productTypeId: currentIdType.value,
});
if (res) {
service.value = res.result;
service.value = res.result.map((v) => {
return {
...v,
type: 'service',
};
});
}
}
@ -366,6 +415,25 @@ async function toggleStatusGroup(id: string, status: Status) {
await fetchListGroups();
}
async function fetchListOfProductAndService() {
const res = await fetchListProductAndService({
status:
currentStatus.value === 'INACTIVE'
? 'INACTIVE'
: currentStatus.value === 'ACTIVE'
? 'ACTIVE'
: undefined,
productTypeId: currentIdType.value,
});
if (res) {
if (currentStatus.value === 'All') {
totalProductAndService.value = res.total;
}
productAndService.value = res.result;
}
}
async function deleteServiceById(serviceId?: string) {
dialog({
color: 'negative',
@ -375,11 +443,15 @@ async function deleteServiceById(serviceId?: string) {
persistent: true,
message: t('deleteConfirmMessage'),
action: async () => {
await deleteService(serviceId ?? currentIdService.value);
const res = await deleteService(serviceId ?? currentIdService.value);
await fetchListOfService();
dialogServiceEdit.value = false;
if (res) {
totalService.value = totalService.value - 1;
}
calculateStats();
},
cancel: () => {},
@ -395,11 +467,14 @@ async function deleteTypeOfProduct(id?: string) {
persistent: true,
message: t('deleteConfirmMessage'),
action: async () => {
await deleteProduct(id ?? currentIdProduct.value);
const res = await deleteProduct(id ?? currentIdProduct.value);
await fetchListOfProduct(currentIdType.value);
dialogProductEdit.value = false;
if (res) {
totalProduct.value = totalProduct.value - 1;
}
calculateStats();
},
cancel: () => {},
@ -464,6 +539,7 @@ const prevService = ref<ServiceCreate>({
detail: '',
name: '',
code: '',
productTypeId: '',
});
async function assignFormDataProductService(id: string) {
@ -479,6 +555,7 @@ async function assignFormDataProductService(id: string) {
attributes: res.attributes,
work: [],
status: res.status,
productTypeId: res.productTypeId,
};
formDataProductService.value = { ...prevService.value };
@ -567,6 +644,7 @@ function clearFormService() {
},
work: [],
status: undefined,
productTypeId: '',
};
workItems.value = [];
@ -590,6 +668,7 @@ function assignFormDataProductServiceCreate() {
async function submitService() {
assignFormDataProductServiceCreate();
formDataProductService.value.image = imageProduct.value;
formDataProductService.value.productTypeId = currentIdType.value;
if (dialogService.value) {
const res = await createService(formDataProductService.value);
@ -609,7 +688,7 @@ async function submitService() {
await fetchListOfService();
}
}
totalService.value = totalService.value + 1;
clearFormService();
}
@ -633,7 +712,7 @@ async function submitProduct() {
status: statusToggle.value ? 'ACTIVE' : 'INACTIVE',
});
}
totalProduct.value = totalProduct.value + 1;
clearFormProduct();
await fetchListOfProduct(currentIdType.value);
}
@ -714,6 +793,19 @@ async function calculateStats() {
stat.value[3].count = resStatsProduct ?? 0;
}
async function fetchStatus() {
if (productAndServiceTab.value === 'all') {
await fetchListOfProductAndService();
}
if (productAndServiceTab.value === 'product') {
await fetchListOfProduct(currentIdType.value);
}
if (productAndServiceTab.value === 'service') {
await fetchListOfService();
}
}
onMounted(async () => {
calculateStats();
await fetchListGroups();
@ -937,21 +1029,33 @@ watch(currentStatus, async () => {
<q-item
clickable
class="flex items-center"
@click="currentStatus = 'All'"
@click="
() => {
currentStatus = 'All';
}
"
>
{{ $t('all') }}
</q-item>
<q-item
clickable
class="flex items-center"
@click="currentStatus = 'ACTIVE'"
@click="
() => {
currentStatus = 'ACTIVE';
}
"
>
{{ $t('statusACTIVE') }}
</q-item>
<q-item
clickable
class="flex items-center"
@click="currentStatus = 'INACTIVE'"
@click="
() => {
currentStatus = 'INACTIVE';
}
"
>
{{ $t('statusINACTIVE') }}
</q-item>
@ -1013,8 +1117,12 @@ watch(currentStatus, async () => {
pathTypeName = v.name;
currentIdType = v.id;
productMode = 'service';
await fetchListOfProduct(currentIdType);
await fetchListOfService();
// await fetchListOfProduct(currentIdType);
// await fetchListOfService();
await featchStatsService();
await featchStatsProduct();
await fetchListOfProductAndService();
}
"
/>
@ -1079,7 +1187,15 @@ watch(currentStatus, async () => {
<AppBox bordered v-else-if="productMode === 'service'" no-padding>
<div class="row justify-between q-px-md">
<q-tabs v-model="productAndServiceTab" dense>
<q-tab name="all">
<q-tab
name="all"
@click="
async () => {
currentStatus = 'All';
await fetchListOfProductAndService();
}
"
>
<div
class="row"
:class="
@ -1096,12 +1212,20 @@ watch(currentStatus, async () => {
"
:color="productAndServiceTab === 'all' ? 'primary' : ''"
style="background-color: var(--surface-3)"
:label="(service?.length ?? 0) + (product?.length ?? 0)"
:label="totalProductAndService"
/>
</div>
</q-tab>
<q-tab name="product">
<q-tab
name="product"
@click="
async () => {
currentStatus = 'All';
await fetchListOfProduct(currentIdType);
}
"
>
<div
class="row"
:class="
@ -1118,11 +1242,19 @@ watch(currentStatus, async () => {
"
:color="productAndServiceTab === 'product' ? 'primary' : ''"
style="background-color: var(--surface-3)"
:label="service?.length"
:label="totalProduct"
/>
</div>
</q-tab>
<q-tab name="service">
<q-tab
name="service"
@click="
async () => {
currentStatus = 'All';
await fetchListOfService();
}
"
>
<div
class="row"
:class="
@ -1139,7 +1271,7 @@ watch(currentStatus, async () => {
"
:color="productAndServiceTab === 'service' ? 'primary' : ''"
style="background-color: var(--surface-3)"
:label="product?.length"
:label="totalService"
/>
</div>
</q-tab>
@ -1175,21 +1307,36 @@ watch(currentStatus, async () => {
<q-item
clickable
class="flex items-center"
@click="currentStatus = 'All'"
@click="
async () => {
currentStatus = 'All';
await fetchStatus();
}
"
>
{{ $t('all') }}
</q-item>
<q-item
clickable
class="flex items-center"
@click="currentStatus = 'ACTIVE'"
@click="
async () => {
currentStatus = 'ACTIVE';
await fetchStatus();
}
"
>
{{ $t('statusACTIVE') }}
</q-item>
<q-item
clickable
class="flex items-center"
@click="currentStatus = 'INACTIVE'"
@click="
async () => {
currentStatus = 'INACTIVE';
await fetchStatus();
}
"
>
{{ $t('statusINACTIVE') }}
</q-item>
@ -1200,7 +1347,7 @@ watch(currentStatus, async () => {
</div>
<div
v-if="product && product.length === 0"
v-if="productAndService && productAndService.length === 0"
class="flex justify-center items-center"
style="min-height: 70vh; background-color: var(--surface-2)"
>
@ -1208,64 +1355,68 @@ watch(currentStatus, async () => {
</div>
<div
v-if="product && product.length > 0"
v-if="productAndService && productAndService.length > 0"
class="row q-col-gutter-lg flex"
style="padding: 20px"
>
<!-- ACITVE or CREATED -->
<div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
v-for="i in productAndServiceTab === 'all' ||
productAndServiceTab === 'product'
? product?.filter((i) => {
if (currentStatus === 'All' || currentStatus === 'ACTIVE') {
return i.status === 'ACTIVE' || i.status === 'CREATED';
}
})
: []"
v-for="i in productAndServiceTab === 'all'
? productAndService
: productAndServiceTab === 'product'
? product
: service"
:key="i.id"
>
<TotalProductCardComponent
:data="i"
:key="i.id"
:code="i.code"
:price="i.price"
:process="i.process"
:id="i.id"
typeProduct="product"
:title="i.name"
:isDisabled="i.status === 'INACTIVE' ? true : false"
@toggleStatus="
() => {
toggleStatusProduct(i.id, i.status);
if (i.type === 'product') {
toggleStatusProduct(i.id, i.status);
}
if (i.type === 'service') {
toggleStatusService(i.id, i.status);
}
}
"
@menuViewDetail="
() => {
currentIdProduct = i.id;
assignFormDataProduct(i);
dialogProductEdit = true;
if (i.type === 'product') {
currentIdProduct = i.id;
assignFormDataProduct(i);
dialogProductEdit = true;
}
if (i.type === 'service') {
currentIdService = i.id;
infoServiceEdit = false;
assignFormDataProductService(i.id);
dialogServiceEdit = true;
}
}
"
@menuEdit="
() => {
currentIdProduct = i.id;
infoProductEdit = true;
assignFormDataProduct(i);
dialogProductEdit = true;
}
"
@viewDetail="
() => {
currentIdProduct = i.id;
infoProductEdit = false;
assignFormDataProduct(i);
dialogProductEdit = true;
if (i.type === 'product') {
currentIdProduct = i.id;
infoProductEdit = true;
assignFormDataProduct(i);
dialogProductEdit = true;
}
if (i.type === 'service') {
currentIdService = i.id;
infoServiceEdit = true;
assignFormDataProductService(i.id);
dialogServiceEdit = true;
}
}
"
/>
</div>
<!--
<div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
v-for="i in productAndServiceTab === 'all' ||
@ -1311,7 +1462,7 @@ watch(currentStatus, async () => {
<!-- INACTIVE -->
<div
<!-- <div
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
v-for="i in productAndServiceTab === 'all' ||
productAndServiceTab === 'product'
@ -1324,7 +1475,7 @@ watch(currentStatus, async () => {
:key="i.id"
>
<TotalProductCardComponent
:data="i"
:data="{ ...i, type: 'product' }"
:key="i.id"
:code="i.code"
:price="i.price"
@ -1405,7 +1556,7 @@ watch(currentStatus, async () => {
}
"
/>
</div>
</div> -->
</div>
</AppBox>
</div>
@ -1553,12 +1704,7 @@ watch(currentStatus, async () => {
:index="selectProduct.findIndex((v) => v.id === i.id)"
:isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
:isSelected="true"
:data="i"
:code="i.code"
:price="i.price"
:process="i.process"
:id="i.id"
typeProduct="product"
:data="{ ...i, type: 'product' }"
:title="i.name"
:status="i.status === 'INACTIVE' ? true : false"
@menuViewDetail="
@ -1759,7 +1905,8 @@ watch(currentStatus, async () => {
v-if="currentServiceTab === 'workInformation'"
dense
@addProduct="
(index) => {
async (index) => {
await fetchListOfProduct(currentIdType);
currentWorkIndex = index;
dialogTotalProduct = true;
}
@ -1901,7 +2048,8 @@ watch(currentStatus, async () => {
v-if="currentServiceTab === 'workInformation'"
dense
@addProduct="
(index) => {
async (index) => {
await fetchListOfProduct(currentIdType);
currentWorkIndex = index;
dialogTotalProduct = true;
}