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

feat: by ค่า

Browse source
This commit is contained in:
Net 2024-06-20 18:02:02 +07:00
parent 2a684790d2
commit 9c515d10cc
3 changed files with 153 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/components/04_product-service/FormServiceWork.vue
View file

@ -8,46 +8,51 @@ import WorkManagementComponent from './WorkManagementComponent.vue';
const { t } = useI18n();
const serviceName = defineModel<string>('serviceName');
import { WorkItems, ProductList } from 'src/stores/product-service/types';
const workItems = ref([
{
id: '1',
product: [
{
id: '1',
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
labelEn: '2 year work permit fee',
code: 'AC101',
price: 1200,
time: '14',
},
],
},
{
id: '2',
product: [
{
id: '1',
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
labelEn: '2 year work permit fee',
code: 'AC101',
price: 1200,
time: '14',
},
{
id: '1',
label:
'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
labelEn:
'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
code: 'AC102',
price: 1200,
time: '14',
},
],
},
]);
const serviceName = defineModel<string>('serviceName');
const product = defineModel<ProductList[]>();
const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
// const workItems = ref([
// {
// id: '1',
// product: [
// {
// id: '1',
// label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี 555',
// labelEn: '2 year work permit fee',
// code: 'AC101',
// price: 1200,
// time: '14',
// },
// ],
// },
// {
// id: '2',
// product: [
// {
// id: '1',
// label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
// labelEn: '2 year work permit fee',
// code: 'AC101',
// price: 1200,
// time: '14',
// },
// {
// id: '1',
// label:
// 'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
// labelEn:
// 'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
// code: 'AC102',
// price: 1200,
// time: '14',
// },
// ],
// },
// ]);
defineProps<{
dense?: boolean;
@ -57,15 +62,16 @@ defineProps<{
}>();
defineEmits<{
(e: 'addProduct'): void;
(e: 'addProduct', index: number): void;
(e: 'manageWorkName'): void;
(e: 'workProperties'): void;
(e: 'workProperties', index: number): void;
}>();
function addWork() {
console.log('hi');
workItems.value.push({
id: '',
name: '',
attributes: { additional: [] },
product: [],
});
}
@ -108,8 +114,9 @@ function confirmDelete(items: unknown[], index: number) {
:index="index"
:length="workItems.length"
:workIndex="index"
v-model:work-name="workItems[index].name"
v-model:product-items="work.product"
@add-product="$emit('addProduct')"
@add-product="$emit('addProduct', index)"
@move-work-up="moveItemUp(workItems, index)"
@move-work-down="moveItemDown(workItems, index)"
@delete-work="confirmDelete(workItems, index)"
@ -117,7 +124,7 @@ function confirmDelete(items: unknown[], index: number) {
@move-product-down="moveItemDown"
@delete-product="confirmDelete"
@manage-work-name="$emit('manageWorkName')"
@work-properties="$emit('workProperties')"
@work-properties="$emit('workProperties', index)"
></WorkManagementComponent>
</div>

47
src/components/04_product-service/WorkManagementComponent.vue
View file

@ -2,6 +2,8 @@
import { Icon } from '@iconify/vue';
import { formatNumberDecimal } from 'src/stores/utils';
import { ProductList } from 'src/stores/product-service/types';
defineProps<{
workIndex: number;
length: number;
@ -9,16 +11,20 @@ defineProps<{
}>();
const workName = defineModel<string>('workName');
const productItems = defineModel<
const productItems = defineModel<(ProductList & { nameEn: string })[]>(
'productItems',
{
id: string;
label: string;
labelEn: string;
code: string;
price: number;
time: string;
}[]
>('productItems', { required: true });
required: true,
},
);
const testName = [
'ทดสอบการขาย 1',
'ทดสอบการขาย 2',
'ทดสอบการขาย 3',
'ทดสอบการขาย 4',
'ทดสอบการขาย 5',
];
defineEmits<{
(e: 'moveWorkUp'): void;
@ -87,7 +93,9 @@ defineEmits<{
</q-btn>
<span class="text-body2 q-pl-sm" style="color: var(--foreground)">
{{ $t('workNo') }} {{ index + 1 }} :
<span class="app-text-muted-2">{{ $t('workName') }}</span>
<span class="app-text-muted-2">
{{ $t('workName') + ' ' + workName }}
</span>
</span>
<q-menu fit anchor="bottom left" self="top left">
@ -109,7 +117,12 @@ defineEmits<{
</q-btn>
</div>
</q-item>
<q-item clickable>
<q-item
@click="workName = item"
clickable
v-for="item in testName"
:key="item"
>
<div class="full-width flex items-center">
<q-icon
v-if="false"
@ -125,7 +138,7 @@ defineEmits<{
style="color: hsl(var(--text-mute))"
class="q-mr-sm"
/>
{{ 'asd' }}
{{ item }}
</div>
</q-item>
</q-menu>
@ -214,15 +227,13 @@ defineEmits<{
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
>
{{
$i18n.locale === 'en-US'
? product.labelEn
: product.label
$i18n.locale === 'en-US' ? product.nameEn : product.name
}}
<q-tooltip>
{{
$i18n.locale === 'en-US'
? product.labelEn
: product.label
? product.nameEn
: product.name
}}
</q-tooltip>
</span>
@ -247,7 +258,7 @@ defineEmits<{
{{ $t('processTime') }}
</span>
<span class="col-3 text-caption app-text-muted-2">
{{ product.time }} {{ $t('day') }}
{{ product.process }} {{ $t('day') }}
</span>
</div>
</div>

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

@ -33,6 +33,8 @@ import {
ServiceCreate,
Service,
ServiceById,
WorkItems,
Attributes,
} from 'src/stores/product-service/types';
const productServiceStore = useProductServiceStore();
@ -81,6 +83,7 @@ const stat = ref<
import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue';
import { time } from 'console';
const { t } = useI18n();
@ -100,7 +103,9 @@ const infoProductEdit = ref<boolean>(false);
const imageProduct = ref<File | undefined>(undefined);
const profileUrl = ref<string | null>('');
const groupName = ref<string>('งาน MOU');
const pathGroupName = ref<string>('');
const pathTypeName = ref<string>('');
const dialogProductServiceType = ref<boolean>(false);
const dialogTotalProduct = ref<boolean>(false);
const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
@ -156,11 +161,16 @@ const serviceTab = [
label: 'workInformation',
},
];
const workItems = ref<WorkItems[]>([]);
const currentServiceTab = ref('serviceInformation');
const propertiesDialog = ref<boolean>(false);
const selectProduct = ref<ProductList[]>([]);
const currentWorkIndex = ref<number>(0);
const currentId = ref<string>('');
const currentIdType = ref<string>('');
const currentIdService = ref<string>('');
@ -532,6 +542,11 @@ async function submitGroup() {
clearFormGroup();
}
const tempValueProperties = ref<Attributes>({
additional: [],
});
const currentPropertiesMode = ref<'service' | 'work'>('service');
function openPropertiesDialog(type: 'service' | 'work') {
if (type === 'service') {
propertiesOption.value =
@ -541,6 +556,8 @@ function openPropertiesDialog(type: 'service' | 'work') {
if (type === 'work') {
propertiesOption.value = optionStore.globalOption.tha.workPropertiesField;
}
currentPropertiesMode.value = type;
propertiesDialog.value = true;
}
@ -676,7 +693,7 @@ watch(currentStatus, async () => {
class="q-mr-md"
/>
<div class="text-h6 app-text-muted q-mr-sm hover-underline">
{{ groupName }}
{{ pathGroupName }}
</div>
<div class="text-h6 app-text-muted q-mx-sm">/</div>
<div class="text-h6 text-weight-bold">
@ -696,11 +713,11 @@ watch(currentStatus, async () => {
class="q-mr-md"
/>
<div class="text-h6 app-text-muted q-mr-sm hover-underline">
{{ groupName }}
{{ pathGroupName }}
</div>
<div class="text-h6 app-text-muted q-mx-sm">/</div>
<div class="text-h6 app-text-muted q-mr-sm hover-underline">
{{ 'บริการพิสูจน์สัญชาติ' }}
{{ pathTypeName }}
</div>
<div class="text-h6 app-text-muted q-mx-sm">/</div>
<div class="text-h6 text-weight-bold">
@ -843,6 +860,7 @@ watch(currentStatus, async () => {
"
@on-click="
async () => {
pathTypeName = v.name;
currentIdType = v.id;
productMode = 'service';
await fetchListOfProduct(currentIdType);
@ -885,6 +903,7 @@ watch(currentStatus, async () => {
"
@on-click="
async () => {
pathGroupName = v.name;
currentId = v.id;
productMode = 'type';
await fetchListType();
@ -917,7 +936,7 @@ watch(currentStatus, async () => {
: 'app-text-muted'
"
>
ทั้งหมด
{{ $t('all') }}
<q-badge
class="rounded q-ml-sm"
:class="
@ -939,7 +958,7 @@ watch(currentStatus, async () => {
: 'app-text-muted'
"
>
บริการ
{{ $t('service') }}
<q-badge
class="rounded q-ml-sm"
:class="
@ -960,7 +979,7 @@ watch(currentStatus, async () => {
: 'app-text-muted'
"
>
สินค้า
{{ $t('product') }}
<q-badge
class="rounded q-ml-sm"
:class="
@ -1161,7 +1180,15 @@ watch(currentStatus, async () => {
title="สินค้าทั้งหมด"
:submit="
() => {
console.log('submit');
selectProduct.forEach((i) => {
workItems[currentWorkIndex].product.push({
...i,
nameEn: '',
});
});
dialogTotalProduct = false;
selectProduct = [];
}
"
:close="() => {}"
@ -1394,14 +1421,31 @@ watch(currentStatus, async () => {
v-if="currentServiceTab === 'serviceInformation'"
dense
service
@service-properties="openPropertiesDialog('service')"
@service-properties="
() => {
tempValueProperties = formDataProductService.attributes;
openPropertiesDialog('service');
}
"
/>
<FormServiceWork
v-model:work-items="workItems"
v-if="currentServiceTab === 'workInformation'"
dense
@addProduct="dialogTotalProduct = true"
@addProduct="
(index) => {
currentWorkIndex = index;
dialogTotalProduct = true;
}
"
@manage-work-name="manageWorkNameDialog = true"
@work-properties="openPropertiesDialog('work')"
@work-properties="
(index) => {
currentWorkIndex = index;
tempValueProperties = workItems[index].attributes;
openPropertiesDialog('work');
}
"
/>
</template>
</FormDialog>
@ -1409,15 +1453,31 @@ watch(currentStatus, async () => {
<!-- service properties -->
<FormDialog
no-address
no-footer
no-app-box
width="75%"
title="Properties"
v-model:modal="propertiesDialog"
:submit="
() => {
if (currentPropertiesMode === 'service') {
formDataProductService.attributes = tempValueProperties;
}
if (currentPropertiesMode === 'work') {
workItems[currentWorkIndex].attributes = tempValueProperties;
}
propertiesDialog = false;
}
"
:close="
() => {
propertiesDialog = false;
}
"
>
<ServiceProperties
v-model:properties-option="propertiesOption"
v-model:form-service-properties="formDataProductService.attributes"
v-model:form-service-properties="tempValueProperties"
@add-properties="console.log('')"
/>
</FormDialog>