jws-frontend/src/components/05_quotation/FormAbout.vue

101 lines
2.6 KiB
Vue

<script setup lang="ts">
import SelectCustomer from '../shared/select/SelectCustomer.vue';
import SelectBranch from '../shared/select/SelectBranch.vue';
const branchId = defineModel<string>('branchId');
const customerBranchId = defineModel<string>('customerBranchId');
const agentPrice = defineModel<boolean>('agentPrice');
const special = defineModel<boolean>('special');
defineProps<{
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
employee?: boolean;
title?: string;
inputOnly?: boolean;
hideAdd?: boolean;
onCreate?: boolean;
}>();
defineEmits<{
(e: 'addCustomer'): void;
}>();
</script>
<template>
<div class="row">
<div
v-if="!inputOnly"
class="col-12 row items-center q-pb-sm text-weight-bold text-body1"
>
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-sm"
color="info"
name="mdi-file-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`general.about`) }}
<div class="text-weight-regular" :class="{ 'q-ml-md ': $q.screen.gt.sm }">
<q-checkbox
:label="$t('productService.product.agentPrice')"
size="xs"
v-model="agentPrice"
style="font-size: 14px"
/>
<q-checkbox
class="q-ml-md"
:label="$t('quotation.specialCondition')"
size="xs"
v-model="special"
style="font-size: 14px"
/>
</div>
</div>
<div class="col-12 row" :class="{ 'q-col-gutter-sm': !inputOnly }">
<SelectBranch
v-model:value="branchId"
:label="$t('quotation.branchVirtual')"
class="col-md-6 col-12"
:class="{
'field-one': inputOnly && $q.screen.gt.sm,
'q-mb-sm': inputOnly && $q.screen.lt.md,
}"
simple
required
:readonly
/>
<SelectCustomer
v-model:value="customerBranchId"
:label="$t('quotation.customer')"
:creatable-disabled-text="`(${$t('form.error.selectField', {
field: $t('quotation.branchVirtual'),
})})`"
@create="$emit('addCustomer')"
class="col-md-6 col-12"
:class="{ 'field-two': inputOnly && $q.screen.gt.sm }"
:creatable-disabled="!branchId"
:creatable="!inputOnly"
simple
required
:readonly
/>
</div>
</div>
</template>
<style scoped>
:deep(
label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
) {
padding-right: 4px;
}
:deep(
label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
) {
padding-left: 4px;
}
</style>