src/components/ui/VnFilterPanel.vue

@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
-const { t } = useI18n();
+const { t, te } = useI18n();
 const $props = defineProps({
     modelValue: {
         type: Object,
@@ -200,6 +200,11 @@ function sanitizer(params) {
     }
     return params;
 }
+
+function getLocale(label) {
+    const globalLocale = `globals.params.${label}`;
+    return te(globalLocale) ? t(globalLocale) : t(`params.${label}`);
+}
 </script>
 
 <template>
@@ -248,7 +253,12 @@ function sanitizer(params) {
                         :removable="!unremovableParams?.includes(chip.label)"
                         @remove="remove(chip.label)"
                     >
-                        <slot name="tags" :tag="chip" :format-fn="formatValue">
+                        <slot
+                            name="tags"
+                            :tag="chip"
+                            :format-fn="formatValue"
+                            :locale-fn="getLocale"
+                        >
                             <div class="q-gutter-x-xs">
                                 <strong>{{ chip.label }}:</strong>
                                 <span>"{{ formatValue(chip.value) }}"</span>
@@ -262,6 +272,7 @@ function sanitizer(params) {
                         :tags="customTags"
                         :format-fn="formatValue"
                         :search-fn="search"
+                        :locale-fn="getLocale"
                     />
                 </div>
             </QItem>

src/pages/Monitor/Ticket/MonitorTicketFilter.vue

@@ -11,7 +11,7 @@ import FetchData from 'src/components/FetchData.vue';
 import { dateRange } from 'src/filters';
 
 defineProps({ dataKey: { type: String, required: true } });
-const { t } = useI18n();
+const { t, te } = useI18n();
 const warehouses = ref();
 const groupedStates = ref();
 
@@ -26,6 +26,11 @@ const handleScopeDays = (params, days, callback) => {
     }
     if (callback) callback();
 };
+
+const getLocale = (label) => {
+    const globalLocale = `globals.params.${label}`;
+    return te(globalLocale) ? t(globalLocale) : t(`params.${label}`);
+};
 </script>
 <template>
     <FetchData url="Warehouses" auto-load @on-fetch="(data) => (warehouses = data)" />
@@ -46,7 +51,7 @@ const handleScopeDays = (params, days, callback) => {
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong v-text="`${t(`params.${tag.label}`)}:`" />
+                <strong v-text="`${getLocale(tag.label)}:`" />
                 <span v-text="formatFn(tag.value)" />
             </div>
         </template>
@@ -110,7 +115,7 @@ const handleScopeDays = (params, days, callback) => {
                         url="Workers/search"
                         :params="{ departmentCodes: ['VT'] }"
                         is-outlined
-                        option-value="code"
+                        option-value="id"
                         option-label="name"
                         :no-one="true"
                     >