8627-devToTest #1421
|
|
@ -0,0 +1,43 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
colors: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (value) => value.length <= 3,
|
||||
},
|
||||
});
|
||||
|
||||
const sectionHeight = computed(() => `${100 / props.colors.length}%`);
|
||||
|
||||
const divStyle = computed(() => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}));
|
||||
</script>
|
||||
<template>
|
||||
<div class="color-div" :style="divStyle">
|
||||
<div
|
||||
v-for="(color, index) in colors"
|
||||
:key="index"
|
||||
class="color-section"
|
||||
:style="{ backgroundColor: color, height: sectionHeight }"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.color-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.color-section {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,46 +51,47 @@ defineExpose({ orderBy });
|
|||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
@click="orderBy(name, model?.direction)"
|
||||
class="row items-center no-wrap cursor-pointer"
|
||||
class="row items-center no-wrap cursor-pointer title"
|
||||
>
|
||||
<span :title="label" class="title">{{ label }}</span>
|
||||
<QChip
|
||||
v-if="name && model?.index"
|
||||
:label="!vertical ? model?.index : ''"
|
||||
:icon="
|
||||
(model?.index || hover) && !vertical
|
||||
? model?.direction == 'DESC'
|
||||
? 'arrow_downward'
|
||||
: 'arrow_upward'
|
||||
: undefined
|
||||
"
|
||||
:size="vertical ? '' : 'sm'"
|
||||
:class="[
|
||||
model?.index ? 'color-vn-text' : 'bg-transparent',
|
||||
vertical ? 'q-px-none' : '',
|
||||
]"
|
||||
class="no-box-shadow"
|
||||
:clickable="true"
|
||||
style="min-width: 40px; max-height: 30px"
|
||||
>
|
||||
<div
|
||||
class="column flex-center"
|
||||
v-if="vertical"
|
||||
:style="!model?.index && 'color: #5d5d5d'"
|
||||
<span :title="label">{{ label }}</span>
|
||||
<sup v-if="name && model?.index">
|
||||
<QChip
|
||||
:label="!vertical ? model?.index : ''"
|
||||
:icon="
|
||||
(model?.index || hover) && !vertical
|
||||
? model?.direction == 'DESC'
|
||||
? 'arrow_downward'
|
||||
: 'arrow_upward'
|
||||
: undefined
|
||||
"
|
||||
:size="vertical ? '' : 'sm'"
|
||||
:class="[
|
||||
model?.index ? 'color-vn-text' : 'bg-transparent',
|
||||
vertical ? 'q-px-none' : '',
|
||||
]"
|
||||
class="no-box-shadow"
|
||||
:clickable="true"
|
||||
style="min-width: 40px; max-height: 30px"
|
||||
>
|
||||
{{ model?.index }}
|
||||
<QIcon
|
||||
:name="
|
||||
model?.index
|
||||
? model?.direction == 'DESC'
|
||||
? 'arrow_downward'
|
||||
: 'arrow_upward'
|
||||
: 'swap_vert'
|
||||
"
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
</QChip>
|
||||
<div
|
||||
class="column flex-center"
|
||||
v-if="vertical"
|
||||
:style="!model?.index && 'color: #5d5d5d'"
|
||||
>
|
||||
{{ model?.index }}
|
||||
<QIcon
|
||||
:name="
|
||||
model?.index
|
||||
? model?.direction == 'DESC'
|
||||
? 'arrow_downward'
|
||||
: 'arrow_upward'
|
||||
: 'swap_vert'
|
||||
"
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
</QChip>
|
||||
</sup>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -102,4 +103,8 @@ defineExpose({ orderBy });
|
|||
width: 100%;
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
sup {
|
||||
vertical-align: super; /* Valor predeterminado */
|
||||
/* También puedes usar otros valores como "baseline", "top", "text-top", etc. */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import VnTableChip from 'components/VnTable/VnChip.vue';
|
|||
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
|
||||
import VnLv from 'components/ui/VnLv.vue';
|
||||
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
const $props = defineProps({
|
||||
columns: {
|
||||
|
|
@ -321,6 +322,32 @@ function handleOnDataSaved(_, res) {
|
|||
if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
|
||||
else $props.create.onDataSaved(_);
|
||||
}
|
||||
|
||||
const editingRow = ref(null);
|
||||
const editingField = ref(null);
|
||||
|
||||
const handleClick = (event) => {
|
||||
const clickedElement = event.target.closest('td');
|
||||
|
||||
if (!clickedElement) return;
|
||||
|
||||
const rowIndex = clickedElement.getAttribute('data-row-index');
|
||||
const colField = clickedElement.getAttribute('data-col-field');
|
||||
|
||||
if (rowIndex !== null && colField) {
|
||||
startEditing(Number(rowIndex), colField);
|
||||
}
|
||||
};
|
||||
|
||||
const startEditing = (rowId, field) => {
|
||||
editingRow.value = rowId;
|
||||
editingField.value = field;
|
||||
};
|
||||
|
||||
const stopEditing = () => {
|
||||
editingRow.value = null;
|
||||
editingField.value = null;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<QDrawer
|
||||
|
|
@ -407,6 +434,7 @@ function handleOnDataSaved(_, res) {
|
|||
<QTable
|
||||
v-bind="table"
|
||||
class="vnTable"
|
||||
wrap-cells
|
||||
:columns="splittedColumns.columns"
|
||||
:rows="rows"
|
||||
v-model:selected="selected"
|
||||
|
|
@ -424,9 +452,20 @@ function handleOnDataSaved(_, res) {
|
|||
"
|
||||
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
|
||||
@update:selected="emit('update:selected', $event)"
|
||||
@row-contextmenu="
|
||||
(event, row, index) =>
|
||||
console.log('event ', event, ' row ', row, ' index ', index)
|
||||
"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template #top-left v-if="!$props.withoutHeader">
|
||||
<slot name="top-left"></slot>
|
||||
<QIcon
|
||||
v-if="$props.isEditable"
|
||||
name="edit"
|
||||
color="primary"
|
||||
size="sm"
|
||||
/>
|
||||
<slot name="top-left"> </slot>
|
||||
</template>
|
||||
<template #top-right v-if="!$props.withoutHeader">
|
||||
<VnVisibleColumn
|
||||
|
|
@ -451,9 +490,13 @@ function handleOnDataSaved(_, res) {
|
|||
/>
|
||||
</template>
|
||||
<template #header-cell="{ col }">
|
||||
<QTh v-if="col.visible ?? true" class="q-px-xl">
|
||||
<QTh
|
||||
v-if="col.visible ?? true"
|
||||
class="body-cell"
|
||||
:style="col?.width ? `max-width: ${col?.width}` : ''"
|
||||
>
|
||||
<div
|
||||
class="q-pa-xs"
|
||||
class="no-padding"
|
||||
:style="$props.columnSearch ? 'height: 75px' : ''"
|
||||
>
|
||||
<div class="text-center" style="height: 30px">
|
||||
|
|
@ -467,7 +510,7 @@ function handleOnDataSaved(_, res) {
|
|||
/>
|
||||
</div>
|
||||
<VnFilter
|
||||
v-if="$props.columnSearch"
|
||||
v-if="$props.columnSearch && col.columnSearch !== false"
|
||||
:column="col"
|
||||
:show-title="true"
|
||||
:data-key="$attrs['data-key']"
|
||||
|
|
@ -491,31 +534,67 @@ function handleOnDataSaved(_, res) {
|
|||
</QTd>
|
||||
</template>
|
||||
<template #body-cell="{ col, row, rowIndex }">
|
||||
<!-- Columns -->
|
||||
<QTd
|
||||
auto-width
|
||||
class="no-margin q-px-xs"
|
||||
:style="{
|
||||
maxWidth: col?.width ?? false,
|
||||
position: 'relative',
|
||||
}"
|
||||
class="no-margin body-cell"
|
||||
:class="[getColAlign(col), col.columnClass]"
|
||||
v-if="col.visible ?? true"
|
||||
@click.ctrl="
|
||||
($event) =>
|
||||
rowCtrlClickFunction && rowCtrlClickFunction($event, row)
|
||||
"
|
||||
:data-row-index="rowIndex"
|
||||
:data-col-field="col?.name"
|
||||
:auto-foucs="col?.tabIndex"
|
||||
>
|
||||
<slot
|
||||
:name="`column-${col.name}`"
|
||||
:col="col"
|
||||
:row="row"
|
||||
:row-index="rowIndex"
|
||||
<div
|
||||
v-if="
|
||||
col?.isEditable === false ||
|
||||
editingRow !== rowIndex ||
|
||||
editingField !== col?.name
|
||||
"
|
||||
>
|
||||
<slot
|
||||
:name="`column-${col.name}`"
|
||||
:col="col"
|
||||
:row="row"
|
||||
:row-index="rowIndex"
|
||||
>
|
||||
<QIcon
|
||||
v-if="col?.component === 'checkbox'"
|
||||
:name="
|
||||
row[col?.name]
|
||||
? 'check_box'
|
||||
: 'check_box_outline_blank' ||
|
||||
'indeterminate_check_box'
|
||||
"
|
||||
size="sm"
|
||||
style="color: var(--vn-label-color)"
|
||||
:class="col?.isEditable ?? 'editable-text'"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
:class="col?.isEditable ?? 'editable-text'"
|
||||
:style="col?.style ? col.style(row) : null"
|
||||
>
|
||||
{{
|
||||
col?.format
|
||||
? col.format(row, dashIfEmpty)
|
||||
: dashIfEmpty(row[col?.name])
|
||||
}}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-else>
|
||||
<VnTableColumn
|
||||
:column="col"
|
||||
:row="row"
|
||||
:is-editable="col.isEditable ?? isEditable"
|
||||
v-model="row[col.name]"
|
||||
component-prop="columnField"
|
||||
class="cell-input"
|
||||
auto-focus
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-tableActions="{ col, row }">
|
||||
|
|
@ -756,6 +835,40 @@ es:
|
|||
</i18n>
|
||||
|
||||
<style lang="scss">
|
||||
.side-padding {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.editable-text:hover {
|
||||
border: 1px dashed var(--q-primary);
|
||||
cursor: pointer;
|
||||
@extend .side-padding;
|
||||
}
|
||||
.editable-text {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 1px 1px rgb(56, 56, 56);
|
||||
border: 1px dashed rgba(0, 0, 0, 0.15);
|
||||
@extend .side-padding;
|
||||
}
|
||||
|
||||
.cell-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
.q-field--labeled .q-field__native,
|
||||
.q-field--labeled .q-field__prefix,
|
||||
.q-field--labeled .q-field__suffix {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.body-cell {
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
.bg-chip-secondary {
|
||||
background-color: var(--vn-page-color);
|
||||
color: var(--vn-text-color);
|
||||
|
|
@ -797,7 +910,9 @@ es:
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.q-table tbody tr td {
|
||||
position: relative;
|
||||
}
|
||||
.q-table {
|
||||
th {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup>
|
||||
import { useAttrs } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useValidator } from 'src/composables/useValidator';
|
||||
|
|
@ -57,10 +58,6 @@ const focus = () => {
|
|||
vnInputRef.value.focus();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
});
|
||||
import { useAttrs } from 'vue';
|
||||
const $attrs = useAttrs();
|
||||
|
||||
const mixinRules = [
|
||||
|
|
@ -76,6 +73,10 @@ const mixinRules = [
|
|||
}
|
||||
},
|
||||
];
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,13 @@ const $props = defineProps({
|
|||
required: false,
|
||||
default: 'value',
|
||||
},
|
||||
columns: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null, // Si es null, no se forzarán columnas
|
||||
},
|
||||
});
|
||||
|
||||
const tags = computed(() => {
|
||||
return Object.keys($props.item)
|
||||
.filter((i) => i.startsWith(`${$props.tag}`))
|
||||
|
|
@ -28,10 +34,20 @@ const tags = computed(() => {
|
|||
return acc;
|
||||
}, {});
|
||||
});
|
||||
|
||||
const columnStyle = computed(() => {
|
||||
if ($props.columns) {
|
||||
return {
|
||||
'grid-template-columns': `repeat(${$props.columns}, 1fr)`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fetchedTags">
|
||||
<div class="wrap">
|
||||
<div class="wrap" :style="columnStyle">
|
||||
<div
|
||||
v-for="(val, key) in tags"
|
||||
:key="key"
|
||||
|
|
@ -39,7 +55,7 @@ const tags = computed(() => {
|
|||
:title="`${key}: ${val}`"
|
||||
:class="{ empty: !val }"
|
||||
>
|
||||
{{ val }}
|
||||
<span>{{ val }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,7 +67,7 @@ const tags = computed(() => {
|
|||
.wrap {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
display: grid; /* Cambiado a grid para poder controlar las columnas */
|
||||
}
|
||||
|
||||
.inline-tag {
|
||||
|
|
@ -61,8 +77,7 @@ const tags = computed(() => {
|
|||
text-align: center;
|
||||
font-size: smaller;
|
||||
padding: 1px;
|
||||
flex: 1;
|
||||
border: 1px solid $color-spacer;
|
||||
border: 1px solid var(--vn-label-color);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
min-width: 4rem;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
@import './icons.scss';
|
||||
@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
|
||||
|
||||
.tbody {
|
||||
--vn-color-negative: $negative;
|
||||
}
|
||||
|
||||
body.body--light {
|
||||
--font-color: black;
|
||||
--vn-header-color: #cecece;
|
||||
|
|
@ -17,6 +21,8 @@ body.body--light {
|
|||
.q-header .q-toolbar {
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
--vn-color-negative: $negative;
|
||||
}
|
||||
body.body--dark {
|
||||
--vn-header-color: #5d5d5d;
|
||||
|
|
@ -28,6 +34,8 @@ body.body--dark {
|
|||
--vn-accent-color: #424242;
|
||||
|
||||
background-color: var(--vn-page-color);
|
||||
|
||||
--vn-color-negative: $negative;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -256,7 +264,6 @@ input::-webkit-inner-spin-button {
|
|||
}
|
||||
td {
|
||||
font-size: 11pt;
|
||||
border-top: 1px solid var(--vn-page-color);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,3 +45,6 @@ $color-font-secondary: #777;
|
|||
.bg-alert {
|
||||
background-color: $negative;
|
||||
}
|
||||
.c-negative {
|
||||
color: $negative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,95 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, computed } from 'vue';
|
||||
import VnTable from 'components/VnTable/VnTable.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
const tableRef = ref();
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'search':
|
||||
return /^\d+$/.test(value)
|
||||
? { id: value }
|
||||
: { alias: { like: `%${value}%` } };
|
||||
}
|
||||
};
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
name: 'id',
|
||||
label: t('Id'),
|
||||
isId: true,
|
||||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'alias',
|
||||
label: t('Alias'),
|
||||
cardVisible: true,
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
name: 'description',
|
||||
label: t('Description'),
|
||||
cardVisible: true,
|
||||
create: true,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
data-key="AccountAliasList"
|
||||
url="MailAliases"
|
||||
:expr-builder="exprBuilder"
|
||||
:label="t('mailAlias.search')"
|
||||
:info="t('mailAlias.searchInfo')"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="AccountAliasList"
|
||||
url="MailAliases"
|
||||
:create="{
|
||||
urlCreate: 'MailAliases',
|
||||
title: 'Create MailAlias',
|
||||
onDataSaved: ({ id }) => tableRef.redirect(id),
|
||||
formInitialData: {},
|
||||
}"
|
||||
order="id DESC"
|
||||
:columns="columns"
|
||||
:disable-option="{ card: true }"
|
||||
default-mode="table"
|
||||
redirect="account/alias"
|
||||
:is-editable="true"
|
||||
:use-model="true"
|
||||
/>
|
||||
<q-page class="q-pa-md">
|
||||
<q-table title="Editable Table" :rows="rows" :columns="columns" row-key="id">
|
||||
<template #body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div
|
||||
v-if="
|
||||
editingRow !== props.row.id || editingField !== props.col.name
|
||||
"
|
||||
@dblclick="startEditing(props.row.id, props.col.name)"
|
||||
>
|
||||
{{ props.row[props.col.name] }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-input
|
||||
v-model="props.row[props.col.name]"
|
||||
dense
|
||||
autofocus
|
||||
@blur="stopEditing"
|
||||
@keyup.enter="stopEditing"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Id: Id
|
||||
Alias: Alias
|
||||
Description: Descripción
|
||||
</i18n>
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'EditableTable',
|
||||
setup() {
|
||||
const editingRow = ref(null);
|
||||
const editingField = ref(null);
|
||||
|
||||
const rows = ref([
|
||||
{ id: 1, name: 'Apple', quantity: 10, price: 1.99 },
|
||||
{ id: 2, name: 'Banana', quantity: 5, price: 0.99 },
|
||||
{ id: 3, name: 'Orange', quantity: 8, price: 1.29 },
|
||||
]);
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
name: 'name',
|
||||
required: true,
|
||||
label: 'Product Name',
|
||||
align: 'left',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
required: true,
|
||||
label: 'Quantity',
|
||||
align: 'left',
|
||||
field: 'quantity',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
required: true,
|
||||
label: 'Price',
|
||||
align: 'left',
|
||||
field: 'price',
|
||||
format: (val) => `$${val.toFixed(2)}`,
|
||||
},
|
||||
]);
|
||||
|
||||
const startEditing = (rowId, field) => {
|
||||
editingRow.value = rowId;
|
||||
editingField.value = field;
|
||||
};
|
||||
|
||||
const stopEditing = () => {
|
||||
editingRow.value = null;
|
||||
editingField.value = null;
|
||||
};
|
||||
|
||||
return {
|
||||
rows,
|
||||
columns,
|
||||
editingRow,
|
||||
editingField,
|
||||
startEditing,
|
||||
stopEditing,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.q-td {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,46 +2,71 @@
|
|||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import VnColor from 'src/components/VnColor.vue';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
const { t } = useI18n();
|
||||
const selectedRows = ref([]);
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const columns = [
|
||||
{
|
||||
align: 'center',
|
||||
label: 'Nv',
|
||||
name: 'isIgnored',
|
||||
component: 'checkbox',
|
||||
width: '35px',
|
||||
tabIndex: 1,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
label: 'Id',
|
||||
name: 'itemFk',
|
||||
component: 'input',
|
||||
create: true,
|
||||
inputStyle: 'text-align: right',
|
||||
width: '45px',
|
||||
tabIndex: 2,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
name: 'hex',
|
||||
columnSearch: false,
|
||||
width: '5px',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
label: t('Article'),
|
||||
name: 'name',
|
||||
width: '100px',
|
||||
isEditable: false,
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
align: 'center',
|
||||
label: t('Size'),
|
||||
name: 'size',
|
||||
width: '35px',
|
||||
isEditable: false,
|
||||
style: () => {
|
||||
return { color: 'var(--vn-label-color)' };
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('Stickers'),
|
||||
align: 'center',
|
||||
label: t('Sti.'),
|
||||
name: 'stickers',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '50px',
|
||||
tabIndex: 1,
|
||||
},
|
||||
{
|
||||
label: t('Packaging'),
|
||||
align: 'center',
|
||||
label: t('Bucket'),
|
||||
name: 'packagingFk',
|
||||
component: 'select',
|
||||
attrs: {
|
||||
|
|
@ -49,85 +74,110 @@ const columns = [
|
|||
fields: ['id', 'volume'],
|
||||
optionLabel: 'id',
|
||||
},
|
||||
inputStyle: 'text-align: right',
|
||||
width: '60px',
|
||||
},
|
||||
{
|
||||
label: t('Weight'),
|
||||
align: 'center',
|
||||
label: 'Kg',
|
||||
name: 'weight',
|
||||
component: 'number',
|
||||
create: true,
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
},
|
||||
{
|
||||
label: t('Packing'),
|
||||
label: 'Pack',
|
||||
name: 'packing',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
style: (row) => {
|
||||
if (row.groupingMode === 'grouping') {
|
||||
return { color: 'var(--vn-label-color)' };
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('Grouping'),
|
||||
label: 'Group',
|
||||
name: 'grouping',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
style: (row) => {
|
||||
if (row.groupingMode === 'packing') {
|
||||
return { color: 'var(--vn-label-color)' };
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('Quantity'),
|
||||
name: 'quantity',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '50px',
|
||||
style: (row) => {
|
||||
if (row?.quantity !== row?.stickers * row?.packing)
|
||||
return { color: 'var(--q-negative)' };
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('Amount'),
|
||||
name: 'amount',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '50px',
|
||||
},
|
||||
{
|
||||
label: t('price2'),
|
||||
label: t('Package'),
|
||||
name: 'price2',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
},
|
||||
{
|
||||
label: t('price3'),
|
||||
label: t('Box'),
|
||||
name: 'price3',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
label: 'Min.',
|
||||
name: 'minPrice',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
style: (row) => {
|
||||
if (row?.hasMinPrice) {
|
||||
return { backgroundColor: 'var(--q-positive)', color: 'black' };
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('packingOut'),
|
||||
label: t('P.Sen'),
|
||||
name: 'packingOut',
|
||||
component: 'number',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '40px',
|
||||
},
|
||||
{
|
||||
label: 'Com.',
|
||||
align: 'center',
|
||||
label: t('Com.'),
|
||||
name: 'comment',
|
||||
component: 'input',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '55px',
|
||||
},
|
||||
{
|
||||
label: t('subName'),
|
||||
label: 'Prod.',
|
||||
name: 'subName',
|
||||
inputStyle: 'text-align: right',
|
||||
},
|
||||
{
|
||||
label: t('tags'),
|
||||
name: 'tags',
|
||||
component: 'input',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '45px',
|
||||
},
|
||||
{
|
||||
label: t('companyName'),
|
||||
align: 'center',
|
||||
label: 'Tags',
|
||||
name: 'tags',
|
||||
width: '120px',
|
||||
isEditable: false,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
label: 'Comp.',
|
||||
name: 'company_name',
|
||||
component: 'input',
|
||||
inputStyle: 'text-align: right',
|
||||
width: '35px',
|
||||
},
|
||||
];
|
||||
onMounted(() => (stateStore.rightDrawer = false));
|
||||
|
|
@ -139,12 +189,18 @@ onMounted(() => (stateStore.rightDrawer = false));
|
|||
ref="tableRef"
|
||||
data-key="EntryBuys"
|
||||
:url="`Entries/${route.params.id}/getBuys`"
|
||||
:is-editable="true"
|
||||
:right-search="false"
|
||||
:row-click="false"
|
||||
:columns="columns"
|
||||
auto-load
|
||||
:disable-option="{ card: true }"
|
||||
class="buyList"
|
||||
is-editable
|
||||
auto-load
|
||||
>
|
||||
<template #column-hex="{ row }">
|
||||
{{ console.log('row?.hex: ', row?.hex) }}
|
||||
<VnColor :colors="['#ff0000']" />
|
||||
</template>
|
||||
<template #column-name="{ row }">
|
||||
<span class="link">
|
||||
{{ row?.name }}
|
||||
|
|
@ -152,28 +208,24 @@ onMounted(() => (stateStore.rightDrawer = false));
|
|||
</span>
|
||||
</template>
|
||||
<template #column-tags="{ row }">
|
||||
<FetchedTags :item="row" :max-length="3" />
|
||||
<FetchedTags :item="row" :columns="3" />
|
||||
</template>
|
||||
<template #column-stickers="{ row }">
|
||||
<span>{{ row.stickers }}</span>
|
||||
<span style="color: var(--vn-label-color)">/{{ row.printedStickers }}</span>
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-table--horizontal-separator tbody tr:nth-child(odd) > td {
|
||||
border-bottom-width: 0px;
|
||||
border-top-width: 2px;
|
||||
border-color: var(--vn-text-color);
|
||||
}
|
||||
.infoRow > td {
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Import buys: Importar compras
|
||||
Buy deleted: Compra eliminada
|
||||
Buys deleted: Compras eliminadas
|
||||
Confirm deletion: Confirmar eliminación
|
||||
Are you sure you want to delete this buy?: Seguro que quieres eliminar esta compra?
|
||||
Are you sure you want to delete this buys?: Seguro que quieres eliminar estas compras?
|
||||
Article: Artículo
|
||||
Size: Med.
|
||||
Sti.: Eti.
|
||||
Bucket: Cubo
|
||||
Quantity: Cantidad
|
||||
Amount: Importe
|
||||
Package: Paquete
|
||||
Box: Caja
|
||||
P.Sen: P.Env
|
||||
Com.: Ref.
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ const fetchEntryBuys = async () => {
|
|||
:disable="true"
|
||||
/>
|
||||
</QCard>
|
||||
<QCard class="vn-two" style="min-width: 100%">
|
||||
<!-- <QCard class="vn-two" style="min-width: 100%">
|
||||
<a class="header header-link">
|
||||
{{ t('entry.summary.buys') }}
|
||||
<QIcon name="open_in_new" />
|
||||
|
|
@ -326,13 +326,12 @@ const fetchEntryBuys = async () => {
|
|||
<FetchedTags :item="row.item" />
|
||||
</QTd>
|
||||
</QTr>
|
||||
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
|
||||
<QTr v-if="rowIndex !== entryBuys.length - 1">
|
||||
<QTd colspan="10" class="vn-table-separation-row" />
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QCard>
|
||||
</QCard> -->
|
||||
</template>
|
||||
</CardSummary>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const columns = computed(() => [
|
|||
format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: t('entry.list.tableVisibleColumns.isBooked'),
|
||||
name: 'isBooked',
|
||||
cardVisible: true,
|
||||
|
|
@ -97,7 +97,7 @@ const columns = computed(() => [
|
|||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: t('entry.list.tableVisibleColumns.isConfirmed'),
|
||||
name: 'isConfirmed',
|
||||
cardVisible: true,
|
||||
|
|
@ -105,7 +105,7 @@ const columns = computed(() => [
|
|||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: t('entry.list.tableVisibleColumns.isOrdered'),
|
||||
name: 'isOrdered',
|
||||
cardVisible: true,
|
||||
|
|
@ -154,7 +154,7 @@ const columns = computed(() => [
|
|||
cardVisible: true,
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
|
||||
name: 'isExcludedFromAvailable',
|
||||
chip: {
|
||||
|
|
@ -165,9 +165,10 @@ const columns = computed(() => [
|
|||
columnFilter: {
|
||||
inWhere: true,
|
||||
},
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: t('entry.list.tableVisibleColumns.isRaid'),
|
||||
name: 'isRaid',
|
||||
chip: {
|
||||
|
|
@ -178,6 +179,7 @@ const columns = computed(() => [
|
|||
columnFilter: {
|
||||
inWhere: true,
|
||||
},
|
||||
component: 'checkbox',
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ const columns = computed(() => [
|
|||
align: 'left',
|
||||
name: 'hasDiploma',
|
||||
label: t('worker.formation.tableVisibleColumns.hasDiploma'),
|
||||
component: 'checkbox',
|
||||
create: true,
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue