From 9ec1c5ff4b18972386aa4b364c839ce43b838084 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 11 Sep 2024 23:17:38 +0200
Subject: [PATCH] feat: updates ItemProposal

---
 src/pages/Item/components/ItemProposal.vue    | 308 ++++++++----------
 src/pages/Route/RouteList.vue                 |  17 +-
 src/pages/Ticket/Card/TicketTransfer.vue      |   4 +-
 .../Ticket/Negative/TicketLackDetail.vue      |  27 +-
 src/pages/Ticket/Negative/TicketLackList.vue  |  80 +++--
 src/pages/Ticket/Negative/TicketLackTable.vue |  40 ++-
 6 files changed, 244 insertions(+), 232 deletions(-)

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index c7355f2f9..a943a23e0 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -9,6 +9,9 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import { toCurrency } from 'filters/index';
 import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
 import { useDialogPluginComponent } from 'quasar';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
@@ -79,12 +82,23 @@ const columns = computed(() => [
         label: t('proposal.available'),
         name: 'available',
         field: 'available',
+        columnClass: 'shrink',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
         label: t('proposal.difference'),
         name: 'difference',
-        field: (item) => (item.id % 2 === 0 ? 10 : -10),
+        format: (item) => (item.id % 2 === 0 ? 10 : -10),
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
@@ -106,6 +120,8 @@ const columns = computed(() => [
         label: t('proposal.longName'),
         name: 'longName',
         field: 'longName',
+        columnClass: 'expand',
+        columnFilter: { class: 'expand' },
     },
     // {
     //     ...defaultColumnAttrs,
@@ -152,12 +168,22 @@ const columns = computed(() => [
         label: t('proposal.price2'),
         name: 'price2',
         field: 'price2',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            class: 'expand',
+        },
     },
     {
         ...defaultColumnAttrs,
         label: t('proposal.minQuantity'),
         name: 'minQuantity',
         field: 'minQuantity',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            class: 'expand',
+        },
     },
     {
         ...defaultColumnAttrs,
@@ -200,82 +226,15 @@ onUnmounted(() => {});
 </script>
 <template>
     <QPopupProxy ref="popupProxyRef">
-        <QCard>
-            <!-- {{ itemLack }} -->
-            <QCardSection v-if="false" class="row items-center q-pb-none">
-                <VnLv class="image">
-                    <template #label>
-                        <QImg
-                            :src="`/api/Images/catalog/50x50/${item.id}/download?access_token=${token}`"
-                            spinner-color="primary"
-                            :ratio="1"
-                            height="50px"
-                            width="50px"
-                            class="image remove-bg"
-                            :alt="'asdads'"
-                        />
-                    </template>
-                    <template #value>
-                        <QBtn flat class="link text-blue">
-                            {{ item.longName }}
-                            <ItemDescriptorProxy :id="item.id" />
-                        </QBtn>
-                        <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
-                    </template>
-                </VnLv>
-                <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardSection
-                v-if="false"
-                class="row items-center justify-center column items-stretch"
-            >
-                <span class="text-h6 text-grey">
-                    <!-- {{ currentTicket }} -->
-                    <!-- {{
-                        t('proposal.title', {
-                            ticketFk: currentTicket.ticketFk,
-                            saleFk: currentTicket.saleFk,
-                        })
-                    }} -->
-                </span>
-            </QCardSection>
-            <QCardActions v-if="$props.replaceAction">
-                <!-- <QBtn
-                    :label="t('globals.removeSelection')"
-                    color="primary"
-                    flat
-                    :disable="proposalSelected.length < 1 || quantity === 0"
-                    @click="proposalSelected = []"
-                /> -->
-
-                <QBtn
-                    :label="t('globals.replace')"
-                    color="primary"
-                    :loading="isLoading"
-                    @click="confirm"
-                    :disable="proposalSelected.length < 1 || quantity === 0"
-                    unelevated
-                />
-                <QInput
-                    v-model.number="quantity"
-                    v-if="quantity > -1"
-                    @update:model-value="(val) => (quantity = val)"
-                    type="number"
-                    min="0"
-                    :label="t('proposal.quantityToReplace')"
-                    class="q-ml-lg"
-                />
-            </QCardActions>
-
+        <QCard style="min-width: 500px">
             <QCardSection class="row items-center justify-center column items-stretch">
                 <!-- <VnRow style="display: flex"> -->
-                <div>
+                <div style="width: 62vw">
                     <!-- {{ proposalSelected }} -->
                     {{ $props.itemLack.itemFk }}
                     {{ $props.itemLack.warehouseFk }}
-                    <VnPaginate
-                        :append="false"
+                    <!-- {{ rows[1].available }} -->
+                    <VnTable
                         data-key="ItemsGetSimilar"
                         url="Items/getSimilar"
                         :filter="{
@@ -285,57 +244,66 @@ onUnmounted(() => {});
                             },
                         }"
                         auto-load
+                        :columns="columns"
+                        class="full-width q-mt-md"
+                        v-model:selected="proposalSelected"
+                        row-key="id"
+                        :is-editable="false"
+                        :right-search="false"
+                        :without-header="false"
+                        :disable-option="{ card: true, table: true }"
+                        :table="{
+                            'row-key': 'id',
+                            selection: 'multiple',
+                        }"
                     >
-                        <template #body="{ rows }">
-                            <!-- {{ rows[1].available }} -->
-                            <QTable
-                                :rows="rows"
-                                :columns="columns"
-                                row-key="id"
-                                selection="single"
-                                disa
-                                :pagination="{ rowsPerPage: 0 }"
-                                class="full-width q-mt-md"
-                                :no-data-label="t('globals.noResults')"
-                                v-model:selected="proposalSelected"
-                                :dense="$q.screen.lt.md"
-                                flat
-                                :grid="$q.screen.lt.md"
-                                auto-load
-                                :rows-per-page-options="[0]"
-                                hide-pagination
-                                hide-bottom
-                            >
-                                <template #body-selection="scope">
-                                    <QTd align="center" v-if="$props.replaceAction"
-                                        ><QCheckbox
-                                            v-model="scope.selected"
-                                            :disable="
-                                                !(
-                                                    scope.row.available >=
-                                                    itemLack.lack * -1
-                                                )
-                                            "
-                                        >
-                                            <QTooltip
-                                                v-if="
-                                                    !(
-                                                        scope.row.available >=
-                                                        itemLack.lack * -1
-                                                    )
-                                                "
-                                            >
-                                                Nop</QTooltip
-                                            >
-                                        </QCheckbox>
-                                        <!-- <div v-else class="q-ml-sm">
+                        <template #top-left>
+                            <div v-if="$props.replaceAction" style="display: flex">
+                                <QBtn
+                                    :label="t('globals.replace')"
+                                    color="primary"
+                                    :loading="isLoading"
+                                    @click="confirm"
+                                    :disable="
+                                        proposalSelected.length < 1 || quantity === 0
+                                    "
+                                    unelevated
+                                />
+                                <VnInputNumber
+                                    v-model.number="quantity"
+                                    v-if="quantity > -1"
+                                    @update:model-value="(val) => (quantity = val)"
+                                    type="number"
+                                    min="0"
+                                    :label="t('proposal.quantityToReplace')"
+                                    class="q-ml-lg"
+                                /></div
+                        ></template>
+                        <!-- <template #body="scope">{{ scope }}</template> -->
+                        <template #body-selection="scope">
+                            <QTd align="center" v-if="$props.replaceAction"
+                                ><QCheckbox
+                                    v-model="scope.selected"
+                                    :disable="
+                                        !(scope.row.available >= itemLack.lack * -1)
+                                    "
+                                >
+                                    <QTooltip
+                                        v-if="
+                                            !(scope.row.available >= itemLack.lack * -1)
+                                        "
+                                    >
+                                        Nop</QTooltip
+                                    >
+                                </QCheckbox>
+                                <!-- <div v-else class="q-ml-sm">
                                             <QIcon name="info" size="sm"></QIcon>
                                             </div
                                     >--></QTd
-                                    >
-                                </template>
-                                <template #top-row>
-                                    <!-- <QTr>
+                            >
+                        </template>
+                        <template #top-row>
+                            <!-- <QTr>
                                         <QTd />
                                         <QTd
                                             v-for="(col, index) in cols"
@@ -352,62 +320,62 @@ onUnmounted(() => {});
                                             />
                                         </QTd>
                                     </QTr> -->
-                                </template>
-                                <template #body-cell-longName="{ row, value }">
-                                    <QTd align="left" class="text-primary">
-                                        <QTooltip>
-                                            {{ row.id }}
-                                        </QTooltip>
-                                        <QImg
-                                            :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
-                                            spinner-color="primary"
-                                            :ratio="1"
-                                            height="50px"
-                                            width="50px"
-                                            class="image remove-bg"
-                                            :alt="'asdads'" />
-                                        <QBtn flat color="blue" dense>{{ value }}</QBtn>
+                        </template>
+                        <template #column-longName="{ row, value }">
+                            <!-- <QTd align="left" class="text-primary"> -->
+                            <QTooltip>
+                                {{ row.id }}
+                            </QTooltip>
+                            <QImg
+                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
+                                spinner-color="primary"
+                                :ratio="1"
+                                height="50px"
+                                width="50px"
+                                class="image remove-bg"
+                                :alt="'asdads'"
+                            />
+                            <QBtn flat color="blue" dense>{{ value }}</QBtn>
 
-                                        <ItemDescriptorProxy :id="row.id" />
-                                        <FetchedTags :item="row" :max-length="5"
-                                    /></QTd>
-                                </template>
-                                <template #body-cell-status="{ value }">
-                                    <QTd class="col" align="center">
-                                        <div
-                                            :style="{ background: gradientStyle(value) }"
-                                            class="compatibility"
-                                        >
-                                            <QTooltip>
-                                                {{ compatibilityItem(value) }}
-                                            </QTooltip>
-                                        </div>
-                                    </QTd>
-                                </template>
-                                <!-- <template #body-cell-tags="{ row }">
+                            <ItemDescriptorProxy :id="row.id" />
+                            <FetchedTags :item="row" :max-length="5" />
+                            <!-- </QTd> -->
+                        </template>
+                        <template #column-status="{ value }">
+                            <!-- <QTd class="col" align="center"> -->
+                            <div
+                                :style="{ background: gradientStyle(value) }"
+                                class="compatibility"
+                            >
+                                <QTooltip>
+                                    {{ compatibilityItem(value) }}
+                                </QTooltip>
+                            </div>
+                            <!-- </QTd> -->
+                        </template>
+                        <!-- <template #column-tags="{ row }">
                                     <QTd class="col" align="center"> </QTd>
                                 </template> -->
 
-                                <template #body-cell-price2="{ row, value }">
-                                    <QTd
-                                        class="col"
-                                        align="center"
-                                        :class="[conditionalValuePrice(value)]"
-                                    >
-                                        <QTooltip>
-                                            {{ toCurrency(row.price2) }}
-                                        </QTooltip>
-                                        {{ toCurrency(row.price2) }}
-                                    </QTd>
-                                </template>
-                                <template #body-cell-difference="{ value }">
-                                    <QTd class="col" align="left">
-                                        <VnStockValueDisplay :value="value" />
-                                    </QTd>
-                                </template>
-                            </QTable>
+                        <template #column-price2="{ row }">
+                            <!-- <QTd
+                                class="col"
+                                align="center"
+                                :class="[conditionalValuePrice(value)]"
+                            > -->
+                            <QTooltip>
+                                {{ toCurrency(row.price2) }}
+                            </QTooltip>
+                            {{ toCurrency(row.price2) }}
+                            <!-- </QTd> -->
                         </template>
-                    </VnPaginate>
+                        <template #column-difference="{ row }">
+                            <pre>{{ row.difference }}</pre>
+                            <!-- <QTd class="col" align="left"> -->
+                            <!-- <VnStockValueDisplay :value="value" /> -->
+                            <!-- </QTd> -->
+                        </template>
+                    </VnTable>
                 </div>
             </QCardSection>
         </QCard>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 7e2358236..dc37219d3 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -17,7 +17,13 @@ import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-
+const $props = defineProps({
+    filter: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+watch($props.filter, (v) => (filterLack.value.where = v));
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const quasar = useQuasar();
@@ -27,7 +33,7 @@ const tableRef = ref([]);
 const confirmationDialog = ref(false);
 const startingDate = ref(null);
 const router = useRouter();
-const routeFilter = {
+const filterLack = ref({
     include: [
         {
             relation: 'workers',
@@ -36,7 +42,8 @@ const routeFilter = {
             },
         },
     ],
-};
+    where: { alertLevel: 'FREE' },
+});
 const columns = computed(() => [
     {
         align: 'left',
@@ -306,7 +313,7 @@ const openTicketsDialog = (id) => {
         :columns="columns"
         :right-search="false"
         :is-editable="true"
-        :filter="routeFilter"
+        :filter="filterLack"
         redirect="route"
         :row-click="false"
         :create="{
diff --git a/src/pages/Ticket/Card/TicketTransfer.vue b/src/pages/Ticket/Card/TicketTransfer.vue
index 15366d799..e245b654b 100644
--- a/src/pages/Ticket/Card/TicketTransfer.vue
+++ b/src/pages/Ticket/Card/TicketTransfer.vue
@@ -34,7 +34,7 @@ const emit = defineEmits(['refreshData']);
 
 const router = useRouter();
 const { t } = useI18n();
-const QPopupProxyRef = ref(null);
+const popupProxyRef = ref(null);
 
 const transferLinesColumns = computed(() => [
     {
@@ -102,7 +102,7 @@ const transferSales = async (ticketId) => {
 </script>
 
 <template>
-    <QPopupProxy :breakpoint="600" ref="QPopupProxyRef">
+    <QPopupProxy ref="popupProxyRef">
         <QCard class="full-width q-px-md" style="display: flex; width: 100vw">
             <QTable
                 v-if="transfer.sales"
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 7ee1c553a..6e3b16fe1 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QBtn, QCheckbox } from 'quasar';
 import axios from 'axios';
 import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
 import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
@@ -196,8 +195,8 @@ const replaceItem = () => {
                             sales: selectedRows,
                             lastActiveTickets: selectedRows.map((row) => row.ticketFk),
                         }"
-                    ></TicketTransfer
-                ></QBtn>
+                    ></TicketTransfer>
+                </QBtn>
                 <QBtn color="primary" @click="showProposalDialog = true">
                     <QIcon name="import_export" class="rotate-90"></QIcon>
                     <ItemProposal
@@ -217,7 +216,7 @@ const replaceItem = () => {
         </template>
     </VnSubToolbar>
     <QPage>
-        <div class="full-width q-pa-md">
+        <div class="full-width q-pa-md" style="padding-bottom: 0px">
             <!-- <p>item:{{ item }}</p>
             <p>itemLack:{{ itemLack }}</p>
             <p>selectedRows:{{ selectedRows }}</p>
@@ -229,31 +228,32 @@ const replaceItem = () => {
                 @on-fetch="copyOriginalRowsData"
                 auto-load
             >
-                <template #body="{ rows }">
+                <template #body>
                     <!-- <VnLv >
                         <template #label> -->
-                    <div class="q-mb-lg image" style="display: flex; align-items: center">
+                    <div 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
+                            class="q-ml-xs"
                             v-if="itemLack"
                             text-color="white"
                             :color="itemLack.lack === 0 ? 'green' : 'red'"
                             :label="itemLack.lack"
                         />
+                        <QBtn flat class="link text-blue">
+                            {{ item.longName }}
+                            <ItemDescriptorProxy :id="entityId" />
+                        </QBtn>
                         <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
                     </div>
-                    {{ rows }}
+                    <!-- {{ rows }} -->
                     <!-- </template>
                         <template #value> </template>
                     </VnLv> -->
                 </template>
             </VnPaginate>
         </div>
-        <TicketLackTable></TicketLackTable>
+        <TicketLackTable :filter="{ alertLevel: showFree }"></TicketLackTable>
     </QPage>
 
     <!--<HandleSplited
@@ -273,4 +273,7 @@ const replaceItem = () => {
     opacity: 0;
     background-color: $primary;
 }
+.q-table.q-table__container > div:first-child {
+    border-radius: unset;
+}
 </style>
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index 1cc537db6..d372df093 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -12,8 +12,10 @@ import { useState } from 'src/composables/useState';
 import { useRole } from 'src/composables/useRole';
 import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 const router = useRouter();
 import VnImg from 'src/components/ui/VnImg.vue';
+import TicketLackFilter from './TicketLackFilter.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -67,7 +69,8 @@ const columns = computed(() => [
         format: ({ itemFk }) => itemFk,
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
             columnClass: 'shrink',
         },
     },
@@ -115,7 +118,8 @@ const columns = computed(() => [
         sortable: true,
         cardVisible: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
             columnClass: 'shrink',
         },
     },
@@ -133,7 +137,8 @@ const columns = computed(() => [
         label: t('negative.lack'),
         field: ({ lack }) => lack,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
             columnClass: 'shrink',
         },
         sortable: true,
@@ -198,39 +203,42 @@ onBeforeMount(() => {
                 <!-- </QBtnGroup> -->
             </template>
         </VnSubToolbar>
-        <div class="list">
-            <VnTable
-                ref="tableRef"
-                data-key="NegativeList"
-                :url="`Tickets/itemLack`"
-                :order="['itemFk DESC, date DESC, timed DESC']"
-                :user-params="negativeParams"
-                auto-load
-                :columns="columns"
-                default-mode="table"
-                :right-search="true"
-                :is-editable="false"
-                :use-model="true"
-                :row-click="redirectToCreateView"
-                v-model:selected="selectedRows"
-                :create="false"
-                :table="{
-                    'row-key': 'itemFk',
-                    selection: 'multiple',
-                }"
-            >
-                <template #column-itemFk="{ row }">
-                    <!-- <QTd style="height: 76px; flex-direction: row; display: flex"> -->
-                    {{ row.itemFk }}
-                    <VnImg
-                        style="width: 50px; height: 50px; float: inline-end"
-                        :id="row.itemFk"
-                        class="rounded"
-                    ></VnImg>
-                    <!-- </QTd> -->
-                </template>
-            </VnTable>
-        </div>
+        <RightMenu>
+            <template #right-panel>
+                <TicketLackFilter data-key="NegativeList" />
+            </template>
+        </RightMenu>
+        <VnTable
+            ref="tableRef"
+            data-key="NegativeList"
+            :url="`Tickets/itemLack`"
+            :order="['itemFk DESC, date DESC, timed DESC']"
+            :user-params="negativeParams"
+            auto-load
+            :columns="columns"
+            default-mode="table"
+            :right-search="false"
+            :is-editable="false"
+            :use-model="true"
+            :row-click="redirectToCreateView"
+            v-model:selected="selectedRows"
+            :create="false"
+            :table="{
+                'row-key': 'itemFk',
+                selection: 'multiple',
+            }"
+        >
+            <template #column-itemFk="{ row }">
+                <!-- <QTd style="height: 76px; flex-direction: row; display: flex"> -->
+                {{ row.itemFk }}
+                <VnImg
+                    style="width: 50px; height: 50px; float: inline-end"
+                    :id="row.itemFk"
+                    class="rounded"
+                ></VnImg>
+                <!-- </QTd> -->
+            </template>
+        </VnTable>
     </QPage>
 </template>
 
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 613e58ab4..017db8d75 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import FetchData from 'src/components/FetchData.vue';
@@ -14,7 +14,30 @@ import { useRoute } from 'vue-router';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import TicketDescriptorProxy from '../Card/TicketDescriptorProxy.vue';
 const rowsSelected = ref([]);
-
+const $props = defineProps({
+    filter: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+watch(
+    () => $props.filter,
+    (v) => {
+        filterLack.value.where = v;
+        tableRef.value.reload(filterLack);
+    }
+);
+const filterLack = ref({
+    include: [
+        {
+            relation: 'workers',
+            scope: {
+                fields: ['id', 'firstName'],
+            },
+        },
+    ],
+    where: { alertLevel: 'FRasdEE' },
+});
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
 const editableStates = ref([]);
@@ -75,7 +98,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
         },
         columnClass: 'shrink',
     },
@@ -85,7 +109,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
         },
         columnClass: 'shrink',
     },
@@ -155,8 +180,9 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: 'number',
-            columnClass: 'shrink',
+            component: 'input',
+            type: 'number',
+            class: 'expand',
         },
     },
 ]);
@@ -217,7 +243,7 @@ const tableRef = ref(null);
         :create="false"
         :create-as-dialog="false"
         :use-model="true"
-        :filter="routeFilter"
+        :filter="filterLack"
         :table="{
             'row-key': 'id',
             selection: 'multiple',