feat: implement VnTable
This commit is contained in:
parent
b0a439c26c
commit
d6bb39236d
|
|
@ -80,4 +80,8 @@ defineExpose({
|
|||
.img_zoom {
|
||||
border-radius: 0%;
|
||||
}
|
||||
.image-wrapper {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -277,9 +277,7 @@ watch(
|
|||
:user-filter="lineFilter"
|
||||
>
|
||||
<template #column-image="{ row }">
|
||||
<div class="image-wrapper">
|
||||
<VnImg :id="parseInt(row?.item?.image)" class="rounded" />
|
||||
</div>
|
||||
<VnImg :id="parseInt(row?.item?.image)" class="rounded image-wrapper" />
|
||||
</template>
|
||||
<template #column-id="{ row }">
|
||||
<span class="link" @click.stop>
|
||||
|
|
@ -339,7 +337,7 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
.imafge-wrapper {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-left: 30%;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import axios from 'axios';
|
|||
import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
|
||||
import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
|
||||
import ItemProposal from 'pages/Item/components/ItemProposal.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import TicketTransfer from '../Card/TicketTransfer.vue';
|
||||
|
|
@ -21,8 +20,10 @@ import useNotify from 'src/composables/useNotify.js';
|
|||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import VnImg from 'src/components/ui/VnImg.vue';
|
||||
import TicketLackTable from './TicketLackTable.vue';
|
||||
const { t } = useI18n();
|
||||
const URL_KEY = 'Tickets/ItemLack';
|
||||
const editableStates = ref([]);
|
||||
|
|
@ -33,21 +34,14 @@ const changeStateDialogRef = ref();
|
|||
const changeQuantityDialogRef = ref();
|
||||
const showProposalDialog = ref(false);
|
||||
const showChangeQuantityDialog = ref(false);
|
||||
const componentIsRendered = ref(false);
|
||||
const showFree = ref(true);
|
||||
const selectedRows = ref([]);
|
||||
const session = useSession();
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
|
||||
const route = useRoute();
|
||||
const token = session.getTokenMultimedia();
|
||||
const itemLack = ref(null);
|
||||
const originalRowDataCopy = ref(null);
|
||||
onMounted(() => {
|
||||
stateStore.rightDrawer = false;
|
||||
nextTick(() => {
|
||||
componentIsRendered.value = true;
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
stateStore.rightDrawer = true;
|
||||
|
|
@ -56,173 +50,10 @@ onUnmounted(() => {
|
|||
const copyOriginalRowsData = (rows) => {
|
||||
originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
|
||||
};
|
||||
const getInputEvents = (colField, props) => ({
|
||||
'update:modelValue': () => saveChange(colField, props),
|
||||
'keyup.enter': () => saveChange(colField, props),
|
||||
});
|
||||
const saveChange = async (field, { rowIndex, row }) => {
|
||||
try {
|
||||
switch (field) {
|
||||
case 'code':
|
||||
await axios.post(`Tickets/state`, {
|
||||
ticketFk: row.ticketFk,
|
||||
code: row[field],
|
||||
});
|
||||
break;
|
||||
|
||||
case 'quantity':
|
||||
await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
|
||||
quantity: +row.quantity,
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error(field, { rowIndex, row });
|
||||
break;
|
||||
}
|
||||
notify('globals.dataSaved', 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error saving changes', err);
|
||||
}
|
||||
};
|
||||
const entityId = computed(() => route.params.id);
|
||||
const item = ref({});
|
||||
function isComponentVn(col) {
|
||||
return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
|
||||
}
|
||||
|
||||
const tableColumnComponents = computed(() => ({
|
||||
status: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
sortable: false,
|
||||
},
|
||||
ticketFk: {
|
||||
component: QBtn,
|
||||
props: { color: 'blue', sortable: true, flat: true },
|
||||
event: () => ({}),
|
||||
sortable: true,
|
||||
},
|
||||
shipped: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
theoreticalhour: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
state: {
|
||||
style: 'width: 160px',
|
||||
component: VnSelect,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
|
||||
props: {
|
||||
'option-value': 'code',
|
||||
'option-label': 'name',
|
||||
'emit-value': true,
|
||||
'map-options': true,
|
||||
'use-input': true,
|
||||
'hide-selected': true,
|
||||
dense: true,
|
||||
options: editableStates.value,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
zoneName: {
|
||||
component: QBtn,
|
||||
props: { color: 'blue', sortable: true, flat: true },
|
||||
event: () => ({}),
|
||||
},
|
||||
nickname: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
quantity: {
|
||||
component: VnInput,
|
||||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
class: 'input-number',
|
||||
},
|
||||
event: getInputEvents,
|
||||
style: 'width: 100px',
|
||||
},
|
||||
|
||||
alertLevelCode: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
}));
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'status',
|
||||
align: 'left',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
name: 'ticketFk',
|
||||
label: t('negative.detail.ticketFk'),
|
||||
field: 'ticketFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'shipped',
|
||||
label: t('negative.detail.shipped'),
|
||||
field: 'shipped',
|
||||
align: 'left',
|
||||
format: (val) => toDate(val),
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'theoreticalhour',
|
||||
label: t('negative.detail.theoreticalhour'),
|
||||
field: 'theoreticalhour',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
format: (val) => toHour(val),
|
||||
},
|
||||
{
|
||||
name: 'state',
|
||||
label: t('negative.detail.state'),
|
||||
field: 'code',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'zoneName',
|
||||
label: t('negative.detail.zoneName'),
|
||||
field: 'zoneName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'nickname',
|
||||
label: t('negative.detail.nickname'),
|
||||
field: 'nickname',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('negative.detail.quantity'),
|
||||
field: 'quantity',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
style: 'width: 100px',
|
||||
},
|
||||
]);
|
||||
const emit = defineEmits([...useDialogPluginComponent.emits, 'selection', 'close']);
|
||||
function rowsHasSelected(selection) {
|
||||
emit('selection', selection);
|
||||
}
|
||||
|
||||
const itemLackForm = ref();
|
||||
|
||||
|
|
@ -257,7 +88,6 @@ const itemProposalEvt = ({ itemProposal }) => {
|
|||
itemProposalSelected.value = itemProposal;
|
||||
replaceItem();
|
||||
};
|
||||
const tableRef = ref(null);
|
||||
const itemProposalSelected = ref(null);
|
||||
const replaceItem = () => {
|
||||
const rows = handleRows(originalRowDataCopy.value).sort((row) => row.quantity);
|
||||
|
|
@ -396,10 +226,10 @@ const replaceItem = () => {
|
|||
</VnSubToolbar>
|
||||
<QPage>
|
||||
<div class="full-width q-pa-md">
|
||||
<p>item:{{ item }}</p>
|
||||
<!-- <p>item:{{ item }}</p>
|
||||
<p>itemLack:{{ itemLack }}</p>
|
||||
<p>selectedRows:{{ selectedRows }}</p>
|
||||
<p>itemProposalSelected:{{ itemProposalSelected }}</p>
|
||||
<p>itemProposalSelected:{{ itemProposalSelected }}</p> -->
|
||||
<VnPaginate
|
||||
:data-key="URL_KEY"
|
||||
:url="`${URL_KEY}/${entityId}`"
|
||||
|
|
@ -408,159 +238,31 @@ const replaceItem = () => {
|
|||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<VnLv class="q-mb-lg image">
|
||||
<template #label>
|
||||
<QImg
|
||||
:src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
height="50px"
|
||||
width="50px"
|
||||
class="image remove-bg"
|
||||
:alt="'asdads'"
|
||||
/>
|
||||
</template>
|
||||
<template #value>
|
||||
<div style="display: flex; align-items: center">
|
||||
<QBtn flat class="link text-blue">
|
||||
{{ item.longName }}
|
||||
<ItemDescriptorProxy :id="entityId" />
|
||||
</QBtn>
|
||||
<QBadge
|
||||
v-if="itemLack"
|
||||
text-color="white"
|
||||
:color="itemLack.lack === 0 ? 'green' : 'red'"
|
||||
:label="itemLack.lack"
|
||||
/>
|
||||
<FetchedTags
|
||||
class="q-ml-md"
|
||||
:item="item"
|
||||
:max-length="5"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VnLv>
|
||||
<TransitionGroup name="list" tag="div">
|
||||
<QTable
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:rows="handleRows(rows)"
|
||||
row-key="ticketFk"
|
||||
selection="multiple"
|
||||
v-model:selected="selectedRows"
|
||||
@update:selected="rowsHasSelected"
|
||||
:grid="$q.screen.lt.md"
|
||||
hide-bottom
|
||||
>
|
||||
<template #body="props">
|
||||
<QTr>
|
||||
<QTd>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
<QIcon
|
||||
name="do_not_disturb_on_total_silence"
|
||||
size="sm"
|
||||
color="red"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('Disabled substitution')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
name="do_not_disturb_on_total_silence"
|
||||
size="sm"
|
||||
color="red"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('Substitution Observation')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
<QTd v-for="col in props.cols" :key="col.name">
|
||||
<template
|
||||
v-if="
|
||||
tableColumnComponents[col.name]?.component
|
||||
"
|
||||
>
|
||||
<component
|
||||
:is="
|
||||
tableColumnComponents[col.name]
|
||||
.component
|
||||
"
|
||||
v-bind="
|
||||
tableColumnComponents[col.name].props
|
||||
"
|
||||
v-model="props.row[col.field]"
|
||||
v-on="
|
||||
tableColumnComponents[col.name].event(
|
||||
col.field,
|
||||
props
|
||||
)
|
||||
"
|
||||
:style="
|
||||
tableColumnComponents[col.name].style
|
||||
"
|
||||
>
|
||||
<template v-if="isComponentVn(col)">{{
|
||||
col.value
|
||||
}}</template>
|
||||
<template v-if="col.name === 'status'">
|
||||
<QIcon
|
||||
v-if="props.row.isRookie"
|
||||
name="vn:person"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('negative.detail.isRookie')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="props.row.peticionCompra"
|
||||
name="vn:buyrequest"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t(
|
||||
'negative.detail.peticionCompra'
|
||||
)
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="props.row.turno"
|
||||
name="vn:calendar"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('negative.detail.turno')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
<template v-if="col.name === 'ticketFk'"
|
||||
>{{ col.value }}
|
||||
<ItemDescriptorProxy
|
||||
:id="$props.entityId"
|
||||
/></template>
|
||||
<template v-if="col.name === 'zoneName'">
|
||||
{{ col.value }}
|
||||
<ZoneDescriptorProxy
|
||||
:id="props.row.zoneFk"
|
||||
/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</TransitionGroup>
|
||||
<!-- <VnLv >
|
||||
<template #label> -->
|
||||
<div class="q-mb-lg image" style="display: flex; align-items: center">
|
||||
<VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
|
||||
<QBtn flat class="link text-blue">
|
||||
{{ item.longName }}
|
||||
<ItemDescriptorProxy :id="entityId" />
|
||||
</QBtn>
|
||||
<QBadge
|
||||
v-if="itemLack"
|
||||
text-color="white"
|
||||
:color="itemLack.lack === 0 ? 'green' : 'red'"
|
||||
:label="itemLack.lack"
|
||||
/>
|
||||
<FetchedTags class="q-ml-md" :item="item" :max-length="5" />
|
||||
</div>
|
||||
{{ rows }}
|
||||
<!-- </template>
|
||||
<template #value> </template>
|
||||
</VnLv> -->
|
||||
</template>
|
||||
</VnPaginate></div
|
||||
></QPage>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<TicketLackTable></TicketLackTable>
|
||||
</QPage>
|
||||
|
||||
<!--<HandleSplited
|
||||
ref="splitDialogRef"
|
||||
|
|
|
|||
|
|
@ -213,6 +213,7 @@ onBeforeMount(() => {
|
|||
:use-model="true"
|
||||
:row-click="redirectToCreateView"
|
||||
v-model:selected="selectedRows"
|
||||
:create="false"
|
||||
:table="{
|
||||
'row-key': 'itemFk',
|
||||
selection: 'multiple',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,308 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { QBtn, QCheckbox } from 'quasar';
|
||||
import axios from 'axios';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import VnSelect from 'components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
import { toDate, toHour } from 'src/filters';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const URL_KEY = 'Tickets/ItemLack';
|
||||
const editableStates = ref([]);
|
||||
const { notify } = useNotify();
|
||||
const showFree = ref(true);
|
||||
const selectedRows = ref([]);
|
||||
|
||||
const route = useRoute();
|
||||
const itemLack = ref(null);
|
||||
const originalRowDataCopy = ref(null);
|
||||
// defineProps({
|
||||
// rows: {
|
||||
// type: [Object],
|
||||
// required: true,
|
||||
// default: () => {},
|
||||
// },
|
||||
// });
|
||||
const getInputEvents = (colField, props) => ({
|
||||
'update:modelValue': () => saveChange(colField, props),
|
||||
'keyup.enter': () => saveChange(colField, props),
|
||||
});
|
||||
const saveChange = async (field, { rowIndex, row }) => {
|
||||
try {
|
||||
switch (field) {
|
||||
case 'code':
|
||||
await axios.post(`Tickets/state`, {
|
||||
ticketFk: row.ticketFk,
|
||||
code: row[field],
|
||||
});
|
||||
break;
|
||||
|
||||
case 'quantity':
|
||||
await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
|
||||
quantity: +row.quantity,
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error(field, { rowIndex, row });
|
||||
break;
|
||||
}
|
||||
notify('globals.dataSaved', 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error saving changes', err);
|
||||
}
|
||||
};
|
||||
const entityId = computed(() => route.params.id);
|
||||
const item = ref({});
|
||||
function isComponentVn(col) {
|
||||
return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
|
||||
}
|
||||
|
||||
const tableColumnComponents = computed(() => ({
|
||||
status: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
sortable: false,
|
||||
},
|
||||
ticketFk: {
|
||||
component: QBtn,
|
||||
props: { color: 'blue', sortable: true, flat: true },
|
||||
event: () => ({}),
|
||||
sortable: true,
|
||||
},
|
||||
shipped: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
theoreticalhour: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
state: {
|
||||
style: 'width: 160px',
|
||||
component: VnSelect,
|
||||
type: 'select',
|
||||
filterValue: null,
|
||||
|
||||
props: {
|
||||
'option-value': 'code',
|
||||
'option-label': 'name',
|
||||
'emit-value': true,
|
||||
'map-options': true,
|
||||
'use-input': true,
|
||||
'hide-selected': true,
|
||||
dense: true,
|
||||
options: editableStates.value,
|
||||
},
|
||||
event: getInputEvents,
|
||||
},
|
||||
zoneName: {
|
||||
component: QBtn,
|
||||
props: { color: 'blue', sortable: true, flat: true },
|
||||
event: () => ({}),
|
||||
},
|
||||
nickname: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
quantity: {
|
||||
component: VnInput,
|
||||
props: {
|
||||
type: 'number',
|
||||
min: 0,
|
||||
class: 'input-number',
|
||||
},
|
||||
event: getInputEvents,
|
||||
style: 'width: 100px',
|
||||
},
|
||||
|
||||
alertLevelCode: {
|
||||
component: 'span',
|
||||
props: {},
|
||||
event: () => ({}),
|
||||
},
|
||||
}));
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'status',
|
||||
align: 'left',
|
||||
sortable: false,
|
||||
columnClass: 'expand',
|
||||
},
|
||||
{
|
||||
name: 'ticketFk',
|
||||
label: t('negative.detail.ticketFk'),
|
||||
field: 'ticketFk',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'shipped',
|
||||
label: t('negative.detail.shipped'),
|
||||
field: 'shipped',
|
||||
align: 'left',
|
||||
format: ({ shipped }) => toDate(shipped),
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'theoreticalhour',
|
||||
label: t('negative.detail.theoreticalhour'),
|
||||
field: 'theoreticalhour',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
format: ({ theoreticalhour }) => toHour(theoreticalhour),
|
||||
},
|
||||
{
|
||||
name: 'state',
|
||||
label: t('negative.detail.state'),
|
||||
field: 'code',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'zoneName',
|
||||
label: t('negative.detail.zoneName'),
|
||||
field: 'zoneName',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'nickname',
|
||||
label: t('negative.detail.nickname'),
|
||||
field: 'nickname',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('negative.detail.quantity'),
|
||||
field: 'quantity',
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
style: 'width: 100px',
|
||||
},
|
||||
]);
|
||||
const emit = defineEmits([...useDialogPluginComponent.emits, 'selection', 'close']);
|
||||
function rowsHasSelected(selection) {
|
||||
emit('selection', selection);
|
||||
}
|
||||
|
||||
const itemLackForm = ref();
|
||||
|
||||
const reload = async () => {
|
||||
itemLackForm.value.fetch();
|
||||
};
|
||||
defineExpose({ reload });
|
||||
|
||||
// Función de comparación
|
||||
|
||||
const tableRef = ref(null);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="States/editableStates"
|
||||
@on-fetch="(data) => (editableStates = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
:url="`Items/${entityId}/getCard`"
|
||||
:fields="['longName']"
|
||||
@on-fetch="(data) => (item = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
:url="`Buys/latestBuysFilter`"
|
||||
:fields="['longName']"
|
||||
:filter="{ where: { 'i.id': '2' } }"
|
||||
@on-fetch="(data) => Object.assign(item.value, data[0])"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
:url="`Tickets/itemLack`"
|
||||
:params="{ itemFk: entityId }"
|
||||
@on-fetch="
|
||||
(data) => {
|
||||
itemLack = data[0];
|
||||
// itemLackForm.value.fetch();
|
||||
}
|
||||
"
|
||||
auto-load
|
||||
/>
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
:data-key="URL_KEY"
|
||||
:url="`${URL_KEY}/${entityId}`"
|
||||
:columns="columns"
|
||||
:without-header="true"
|
||||
:right-search="false"
|
||||
auto-load
|
||||
:create="false"
|
||||
>
|
||||
<!--
|
||||
<template #body="props">
|
||||
{{ props }}
|
||||
</template> -->
|
||||
<template #column-status="props">
|
||||
<QIcon
|
||||
v-if="props.row.isRookie"
|
||||
name="vn:person"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="props.row.peticionCompra"
|
||||
name="vn:buyrequest"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="props.row.turno"
|
||||
name="vn:calendar"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<QTooltip>{{ t('negative.detail.turno') }}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
<template #column-ticketFk="{ col }"
|
||||
>{{ col.value }} <ItemDescriptorProxy :id="$props.entityId"
|
||||
/></template>
|
||||
<template #column-zoneName="{ row, col }">
|
||||
{{ col.value }}
|
||||
<ZoneDescriptorProxy :id="row.zoneFk" />
|
||||
</template>
|
||||
</VnTable>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
background-color: $primary;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue