feat: refs #7346 style radioButton
This commit is contained in:
parent
2a94916bc2
commit
4e957ed8a7
|
|
@ -2,5 +2,12 @@
|
|||
const model = defineModel({ type: Boolean, required: true });
|
||||
</script>
|
||||
<template>
|
||||
<QRadio v-model="model" v-bind="$attrs" dense :dark="true" class="q-mr-sm" />
|
||||
<QRadio
|
||||
v-model="model"
|
||||
v-bind="$attrs"
|
||||
dense
|
||||
:dark="true"
|
||||
class="q-mr-sm"
|
||||
size="xs"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<script setup>
|
||||
defineProps({ wrap: { type: Boolean, default: false } });
|
||||
</script>
|
||||
<template>
|
||||
<div class="vn-row q-gutter-md q-mb-md">
|
||||
<div class="vn-row q-gutter-md">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,6 +18,9 @@ defineProps({ wrap: { type: Boolean, default: false } });
|
|||
&:not(.wrap) {
|
||||
flex-direction: column;
|
||||
}
|
||||
&[fixed] {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ import { QBtn } from 'quasar';
|
|||
import axios from 'axios';
|
||||
import RightMenu from 'src/components/common/RightMenu.vue';
|
||||
import InvoiceOutFilter from './InvoiceOutFilter.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnRadio from 'src/components/common/VnRadio.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
|
|
@ -39,13 +42,9 @@ const columns = computed(() => [
|
|||
align: 'center',
|
||||
name: 'id',
|
||||
label: t('invoiceOutList.tableVisibleColumns.id'),
|
||||
chip: {
|
||||
condition: () => true,
|
||||
},
|
||||
chip: { condition: () => true },
|
||||
isId: true,
|
||||
columnFilter: {
|
||||
name: 'search',
|
||||
},
|
||||
columnFilter: { name: 'search' },
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -53,14 +52,8 @@ const columns = computed(() => [
|
|||
label: t('invoiceOutList.tableVisibleColumns.ref'),
|
||||
isTitle: true,
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: MODEL,
|
||||
optionLabel: 'ref',
|
||||
optionValue: 'id',
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
attrs: { url: MODEL, optionLabel: 'ref', optionValue: 'id' },
|
||||
columnField: { component: null },
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -68,9 +61,7 @@ const columns = computed(() => [
|
|||
label: t('invoiceOutList.tableVisibleColumns.issued'),
|
||||
component: 'date',
|
||||
format: (row) => toDate(row.issued),
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
columnField: { component: null },
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -78,13 +69,8 @@ const columns = computed(() => [
|
|||
label: t('invoiceOutModule.customer'),
|
||||
cardVisible: true,
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Clients',
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
attrs: { url: 'Clients', fields: ['id', 'name'] },
|
||||
columnField: { component: null },
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -92,14 +78,8 @@ const columns = computed(() => [
|
|||
label: t('invoiceOutModule.company'),
|
||||
cardVisible: true,
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Companies',
|
||||
optionLabel: 'code',
|
||||
optionValue: 'id',
|
||||
},
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
attrs: { url: 'Companies', optionLabel: 'code', optionValue: 'id' },
|
||||
columnField: { component: null },
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
@ -113,9 +93,7 @@ const columns = computed(() => [
|
|||
name: 'created',
|
||||
label: t('invoiceOutList.tableVisibleColumns.created'),
|
||||
component: 'date',
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
columnField: { component: null },
|
||||
format: (row) => toDate(row.created),
|
||||
},
|
||||
{
|
||||
|
|
@ -123,9 +101,7 @@ const columns = computed(() => [
|
|||
name: 'dued',
|
||||
label: t('invoiceOutList.tableVisibleColumns.dueDate'),
|
||||
component: 'date',
|
||||
columnField: {
|
||||
component: null,
|
||||
},
|
||||
columnField: { component: null },
|
||||
format: (row) => toDate(row.dued),
|
||||
},
|
||||
{
|
||||
|
|
@ -216,9 +192,7 @@ watchEffect(selectedRows);
|
|||
urlCreate: 'InvoiceOuts/createManualInvoice',
|
||||
title: t('createManualInvoice'),
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: {
|
||||
active: true,
|
||||
},
|
||||
formInitialData: { active: true },
|
||||
}"
|
||||
:right-search="false"
|
||||
v-model:selected="selectedRows"
|
||||
|
|
@ -232,92 +206,84 @@ watchEffect(selectedRows);
|
|||
}"
|
||||
>
|
||||
<template #more-create-dialog="{ data }">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col-12">
|
||||
<div class="q-gutter-sm q-col-gutter-xs">
|
||||
<div class="row q-m-none">
|
||||
<div class="col-auto">
|
||||
<QRadio
|
||||
v-model="selectedOption"
|
||||
val="ticket"
|
||||
label="Ticket"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QInput
|
||||
v-if="selectedOption === 'ticket'"
|
||||
v-model="data.ticketFk"
|
||||
label="Ticket ID"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-xs">
|
||||
<div class="col-auto">
|
||||
<QRadio
|
||||
v-model="selectedOption"
|
||||
val="cliente"
|
||||
label="Cliente"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-if="selectedOption === 'cliente'"
|
||||
v-model="data.clientFk"
|
||||
label="Cliente"
|
||||
url="Clients"
|
||||
:options="customerOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@update:model-value="fetchClientAddress"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-xs">
|
||||
<div class="col-auto">
|
||||
<QRadio
|
||||
v-model="selectedOption"
|
||||
val="consignatario"
|
||||
label="Consignatario"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="selectedOption === 'consignatario'"
|
||||
class="row q-col-gutter-md"
|
||||
>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.clientFk"
|
||||
label="Cliente"
|
||||
url="Clients"
|
||||
:options="customerOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@update:model-value="fetchClientAddress"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.addressFk"
|
||||
label="Consignatario"
|
||||
:options="addressOptions"
|
||||
option-label="nickname"
|
||||
option-value="id"
|
||||
:disable="!data.clientFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-col-gutter-xs">
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="ticket"
|
||||
label="Ticket"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
<VnInput
|
||||
:disable="selectedOption !== 'ticket'"
|
||||
v-model="data.ticketFk"
|
||||
label="Ticket ID"
|
||||
style="flex: 1"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="cliente"
|
||||
label="Cliente"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
<VnSelect
|
||||
:disable="selectedOption !== 'cliente'"
|
||||
v-model="data.clientFk"
|
||||
label="Cliente"
|
||||
url="Clients"
|
||||
:options="customerOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@update:model-value="fetchClientAddress"
|
||||
style="flex: 1"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow fixed>
|
||||
<VnRadio
|
||||
v-model="selectedOption"
|
||||
val="consignatario"
|
||||
label="Consignatario"
|
||||
class="q-my-none q-mr-md"
|
||||
/>
|
||||
<div
|
||||
:disable="selectedOption !== 'consignatario'"
|
||||
class="row q-col-gutter-xs q-ml-none"
|
||||
>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.clientFk"
|
||||
label="Cliente"
|
||||
url="Clients"
|
||||
:options="customerOptions"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@update:model-value="fetchClientAddress"
|
||||
:disable="selectedOption !== 'consignatario'"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelect
|
||||
v-model="data.addressFk"
|
||||
label="Consignatario"
|
||||
:options="addressOptions"
|
||||
option-label="nickname"
|
||||
option-value="id"
|
||||
:disable="
|
||||
!data.clientFk ||
|
||||
selectedOption !== 'consignatario'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VnRow>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-gutter-md">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="full-width">
|
||||
<VnRow class="row q-col-gutter-xs">
|
||||
<VnSelect
|
||||
url="InvoiceOutSerials"
|
||||
v-model="data.serial"
|
||||
|
|
@ -332,8 +298,8 @@ watchEffect(selectedRows);
|
|||
:label="t('invoiceOutList.tableVisibleColumns.dueDate')"
|
||||
v-model="data.maxShipped"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-gutter-md">
|
||||
</VnRow>
|
||||
<VnRow class="row q-col-gutter-xs">
|
||||
<VnSelect
|
||||
url="TaxAreas"
|
||||
v-model="data.taxArea"
|
||||
|
|
@ -342,31 +308,27 @@ watchEffect(selectedRows);
|
|||
option-label="code"
|
||||
option-value="code"
|
||||
/>
|
||||
<QInput
|
||||
<VnInput
|
||||
v-model="data.reference"
|
||||
:label="t('invoiceOutList.tableVisibleColumns.ref')"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
searchInvoice: Search issued invoice
|
||||
fileDenied: Browser denied file download...
|
||||
fileAllowed: Successful download of CSV file
|
||||
youCanSearchByInvoiceReference: You can search by invoice reference
|
||||
createInvoice: Make invoice
|
||||
createManualInvoice: Create manual invoice
|
||||
|
||||
es:
|
||||
searchInvoice: Buscar factura emitida
|
||||
fileDenied: El navegador denegó la descarga de archivos...
|
||||
fileAllowed: Descarga exitosa de archivo CSV
|
||||
youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
|
||||
createInvoice: Crear factura
|
||||
createManualInvoice: Crear factura manual
|
||||
</i18n>
|
||||
<style lang="scss" scoped>
|
||||
#formModel .vn-row {
|
||||
min-height: 45px;
|
||||
}
|
||||
#formModel .vn-row .q-radio {
|
||||
align-self: flex-end;
|
||||
flex: 0.3;
|
||||
}
|
||||
#formModel .vn-row > .q-input,
|
||||
#formModel .vn-row > .q-select {
|
||||
flex: 0.75;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue