refactor: edit layout
This commit is contained in:
Net
parent
96e59d175e
commit
2be948dcfa
1 changed files with 167 additions and 156 deletions
|
|
@ -15,6 +15,7 @@ const username = defineModel<string | null | undefined>('username');
|
||||||
const userCode = defineModel<string>('userCode');
|
const userCode = defineModel<string>('userCode');
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
title?: string;
|
||||||
dense?: boolean;
|
dense?: boolean;
|
||||||
outlined?: boolean;
|
outlined?: boolean;
|
||||||
readonly?: boolean;
|
readonly?: boolean;
|
||||||
|
|
@ -71,157 +72,171 @@ onMounted(async () => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-md-3 col-12 app-text-muted">
|
<div class="row col-12">
|
||||||
• {{ $t('formDialogTitleInformation') }}
|
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||||
</div>
|
<q-icon
|
||||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
flat
|
||||||
<q-select
|
size="xs"
|
||||||
outlined
|
class="q-pa-sm rounded q-mr-xs"
|
||||||
clearable
|
color="info"
|
||||||
use-input
|
name="mdi-office-building-outline"
|
||||||
fill-input
|
style="background-color: var(--surface-3)"
|
||||||
emit-value
|
/>
|
||||||
map-options
|
{{ $t(`${title}`) }}
|
||||||
hide-selected
|
</div>
|
||||||
hide-bottom-space
|
|
||||||
v-model="hqId"
|
<div class="col-12 row q-col-gutter-md">
|
||||||
for="select-hq-id"
|
<q-select
|
||||||
input-debounce="0"
|
outlined
|
||||||
option-label="label"
|
clearable
|
||||||
option-value="value"
|
use-input
|
||||||
lazy-rules="ondemand"
|
fill-input
|
||||||
class="col-md-4 col-6"
|
emit-value
|
||||||
:dense="dense"
|
map-options
|
||||||
:readonly="readonly"
|
hide-selected
|
||||||
:hide-dropdown-icon="readonly"
|
hide-bottom-space
|
||||||
:label="$t('formDialogInputCode')"
|
v-model="hqId"
|
||||||
:options="hqOptions"
|
for="select-hq-id"
|
||||||
:rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
|
input-debounce="0"
|
||||||
@update:model-value="(val: string) => selectHq(val)"
|
option-label="label"
|
||||||
@filter="hqFilter"
|
option-value="value"
|
||||||
>
|
lazy-rules="ondemand"
|
||||||
<template v-slot:no-option>
|
class="col-2"
|
||||||
<q-item>
|
:dense="dense"
|
||||||
<q-item-section class="text-grey">
|
:readonly="readonly"
|
||||||
{{ $t('noResults') }}
|
:hide-dropdown-icon="readonly"
|
||||||
</q-item-section>
|
:label="$t('formDialogInputCode')"
|
||||||
</q-item>
|
:options="hqOptions"
|
||||||
</template>
|
:rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
|
||||||
</q-select>
|
@update:model-value="(val: string) => selectHq(val)"
|
||||||
<q-select
|
@filter="hqFilter"
|
||||||
outlined
|
>
|
||||||
clearable
|
<template v-slot:no-option>
|
||||||
use-input
|
<q-item>
|
||||||
fill-input
|
<q-item-section class="text-grey">
|
||||||
emit-value
|
{{ $t('noResults') }}
|
||||||
map-options
|
</q-item-section>
|
||||||
hide-selected
|
</q-item>
|
||||||
hide-bottom-space
|
</template>
|
||||||
v-model="brId"
|
</q-select>
|
||||||
for="select-br-id"
|
<q-select
|
||||||
input-debounce="0"
|
outlined
|
||||||
option-label="label"
|
clearable
|
||||||
option-value="value"
|
use-input
|
||||||
lazy-rules="ondemand"
|
fill-input
|
||||||
class="col-md-4 col-6"
|
emit-value
|
||||||
:dense="dense"
|
map-options
|
||||||
:readonly="readonly"
|
hide-selected
|
||||||
:hide-dropdown-icon="readonly"
|
hide-bottom-space
|
||||||
:label="$t('formDialogInputBrId')"
|
v-model="brId"
|
||||||
:options="brOptions"
|
for="select-br-id"
|
||||||
@filter="brFilter"
|
input-debounce="0"
|
||||||
>
|
option-label="label"
|
||||||
<template v-slot:no-option>
|
option-value="value"
|
||||||
<q-item>
|
lazy-rules="ondemand"
|
||||||
<q-item-section class="text-grey">
|
class="col-2"
|
||||||
{{ $t('noResults') }}
|
:dense="dense"
|
||||||
</q-item-section>
|
:readonly="readonly"
|
||||||
</q-item>
|
:hide-dropdown-icon="readonly"
|
||||||
</template>
|
:label="$t('formDialogInputBrId')"
|
||||||
</q-select>
|
:options="brOptions"
|
||||||
<q-input
|
@filter="brFilter"
|
||||||
lazy-rules="ondemand"
|
>
|
||||||
for="input-username"
|
<template v-slot:no-option>
|
||||||
:dense="dense"
|
<q-item>
|
||||||
outlined
|
<q-item-section class="text-grey">
|
||||||
:readonly="usernameReadonly"
|
{{ $t('noResults') }}
|
||||||
emit-value
|
</q-item-section>
|
||||||
map-options
|
</q-item>
|
||||||
options-dense
|
</template>
|
||||||
hide-bottom-space
|
</q-select>
|
||||||
class="col-md-4 col-12"
|
<q-input
|
||||||
:label="$t('formDialogInputUsername')"
|
lazy-rules="ondemand"
|
||||||
v-model="username"
|
for="input-username"
|
||||||
:rules="[
|
:dense="dense"
|
||||||
(val: string) =>
|
outlined
|
||||||
val.length > 2 || $t('formDialogInputUsernameValidate'),
|
:readonly="usernameReadonly"
|
||||||
]"
|
emit-value
|
||||||
/>
|
map-options
|
||||||
<q-select
|
options-dense
|
||||||
outlined
|
hide-bottom-space
|
||||||
clearable
|
class="col"
|
||||||
use-input
|
:label="$t('formDialogInputUsername')"
|
||||||
fill-input
|
v-model="username"
|
||||||
emit-value
|
:rules="[
|
||||||
map-options
|
(val: string) =>
|
||||||
hide-selected
|
val.length > 2 || $t('formDialogInputUsernameValidate'),
|
||||||
hide-bottom-space
|
]"
|
||||||
class="col-6"
|
/>
|
||||||
v-model="userType"
|
<q-select
|
||||||
input-debounce="0"
|
outlined
|
||||||
option-value="value"
|
clearable
|
||||||
option-label="label"
|
use-input
|
||||||
lazy-rules="ondemand"
|
fill-input
|
||||||
for="select-user-type"
|
emit-value
|
||||||
:dense="dense"
|
map-options
|
||||||
:readonly="readonly"
|
hide-selected
|
||||||
:hide-dropdown-icon="readonly"
|
hide-bottom-space
|
||||||
:label="$t('formDialogInputUserType')"
|
class="col"
|
||||||
:options="userTypeOptions"
|
v-model="userType"
|
||||||
:rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
|
input-debounce="0"
|
||||||
@filter="userTypeFilter"
|
option-value="value"
|
||||||
>
|
option-label="label"
|
||||||
<template v-slot:no-option>
|
lazy-rules="ondemand"
|
||||||
<q-item>
|
for="select-user-type"
|
||||||
<q-item-section class="text-grey">
|
:dense="dense"
|
||||||
{{ $t('noResults') }}
|
:readonly="readonly"
|
||||||
</q-item-section>
|
:hide-dropdown-icon="readonly"
|
||||||
</q-item>
|
:label="$t('formDialogInputUserType')"
|
||||||
</template>
|
:options="userTypeOptions"
|
||||||
</q-select>
|
:rules="[
|
||||||
<q-select
|
(val: string) => !!val || $t('formDialogInputUserTypeValidate'),
|
||||||
outlined
|
]"
|
||||||
clearable
|
@filter="userTypeFilter"
|
||||||
use-input
|
>
|
||||||
fill-input
|
<template v-slot:no-option>
|
||||||
emit-value
|
<q-item>
|
||||||
map-options
|
<q-item-section class="text-grey">
|
||||||
hide-selected
|
{{ $t('noResults') }}
|
||||||
hide-bottom-space
|
</q-item-section>
|
||||||
class="col-6"
|
</q-item>
|
||||||
input-debounce="0"
|
</template>
|
||||||
option-label="label"
|
</q-select>
|
||||||
option-value="value"
|
<q-select
|
||||||
lazy-rules="ondemand"
|
outlined
|
||||||
for="select-user-role"
|
clearable
|
||||||
:dense="dense"
|
use-input
|
||||||
v-model="userRole"
|
fill-input
|
||||||
:readonly="readonly"
|
emit-value
|
||||||
:hide-dropdown-icon="readonly"
|
map-options
|
||||||
:label="$t('formDialogInputUserRole')"
|
hide-selected
|
||||||
:options="roleOptions"
|
hide-bottom-space
|
||||||
:rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
|
class="col"
|
||||||
@filter="roleFilter"
|
input-debounce="0"
|
||||||
>
|
option-label="label"
|
||||||
<template v-slot:no-option>
|
option-value="value"
|
||||||
<q-item>
|
lazy-rules="ondemand"
|
||||||
<q-item-section class="text-grey">
|
for="select-user-role"
|
||||||
{{ $t('noResults') }}
|
:dense="dense"
|
||||||
</q-item-section>
|
v-model="userRole"
|
||||||
</q-item>
|
:readonly="readonly"
|
||||||
</template>
|
:hide-dropdown-icon="readonly"
|
||||||
</q-select>
|
:label="$t('formDialogPrefixName')"
|
||||||
<!-- <q-input lazy-rules="ondemand"
|
:options="roleOptions"
|
||||||
|
:rules="[
|
||||||
|
(val: string) => !!val || $t('formDialogInputPrefixNameValidate'),
|
||||||
|
]"
|
||||||
|
@filter="roleFilter"
|
||||||
|
>
|
||||||
|
<template v-slot:no-option>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-grey">
|
||||||
|
{{ $t('noResults') }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
<!-- <q-input lazy-rules="ondemand"
|
||||||
id="input-user-code"
|
id="input-user-code"
|
||||||
:dense="dense"
|
:dense="dense"
|
||||||
:outlined="readonly ? false : outlined"
|
:outlined="readonly ? false : outlined"
|
||||||
|
|
@ -232,10 +247,6 @@ onMounted(async () => {
|
||||||
:label="$t('formDialogInputUserCode')"
|
:label="$t('formDialogInputUserCode')"
|
||||||
v-model="userCode"
|
v-model="userCode"
|
||||||
/> -->
|
/> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-separator
|
|
||||||
v-if="separator"
|
|
||||||
class="col-12 q-mb-md"
|
|
||||||
style="padding-block: 0.5px; margin-top: 32px"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue