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

feat: add service dialog

Browse source
This commit is contained in:
puriphatt 2024-06-18 02:01:02 +00:00
parent c19f6fefe3
commit 2b44855585
3 changed files with 227 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/components/04_product-service/BasicInformation.vue
View file

@ -4,72 +4,108 @@ const detail = defineModel<string>('detail');
const name = defineModel<string>('name');
const code = defineModel<string>('code');
const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceName');
const serviceDescription = defineModel<string>('serviceDescription');
defineProps<{
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
isType?: boolean;
service?: boolean;
}>();
</script>
<template>
<div class="row">
<div class="col-4 app-text-muted">
• {{ $t(`formDialogTitleInformation`) }}
</div>
<div class="col-8 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="
$t(
isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode',
)
"
v-model="code"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="
$t(
isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName',
)
"
v-model="name"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('detail')"
v-model="detail"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
v-model="remark"
/>
</div>
<div class="col-3 app-text-muted">
• {{ $t(`formDialogTitleInformation`) }}
</div>
<div v-if="!service" class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="
$t(isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode')
"
v-model="code"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="
$t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName')
"
v-model="name"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('detail')"
v-model="detail"
/>
<q-input
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
v-model="remark"
/>
</div>
<div v-if="service" class="col-9 row q-col-gutter-md">
<q-input
for="input-service-code"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('serviceCode')"
v-model="serviceCode"
/>
<q-input
for="input-service-name"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-9"
:label="$t('serviceName')"
v-model="serviceName"
/>
<q-input
for="input-service-description"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('serviceDetail')"
v-model="serviceDescription"
/>
</div>
</template>

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

@ -0,0 +1,88 @@
<script setup lang="ts">
import NoData from 'src/components/NoData.vue';
import WorkManagementComponent from './WorkManagementComponent.vue';
import { ref } from 'vue';
const serviceName = defineModel<string>('serviceName');
const workItems = ref([
{
id: '1',
product: [
{
id: '1',
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
code: 'AC101',
price: '1,200.00',
time: '14',
},
],
},
{
id: '2',
product: [
{
id: '1',
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
code: 'AC101',
price: '1,200.00',
time: '14',
},
{
id: '1',
label:
'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
code: 'AC102',
price: '1,200.00',
time: '14',
},
],
},
]);
defineProps<{
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
}>();
defineEmits<{
(e: 'addProduct'): void;
(e: 'deleteWork'): void;
(e: 'deleteProduct'): void;
}>();
</script>
<template>
<div class="column col-12 full-height">
<div class="col-1 app-text-muted row items-start">
• {{ $t(`workInformation`) }}
<q-btn
icon="mdi-plus"
dense
flat
round
padding="0"
color="primary"
class="q-ml-sm"
/>
</div>
<!-- <div class="col row rounded bordered surface-2 justify-center items-center">
<NoData />
</div> -->
<div class="col q-gutter-y-md">
<WorkManagementComponent
v-for="(work, index) in workItems"
:key="work.id"
v-model:product-items="work.product"
:workIndex="index"
@addProduct="$emit('addProduct')"
></WorkManagementComponent>
</div>
</div>
</template>
<style scoped lang="scss"></style>