src/components/common/VnSelectWorker.vue

@@ -1,48 +1,10 @@
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
 
-const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
 const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
-        default: null,
-    },
-    label: {
-        type: String,
-        required: true,
-    },
-    url: {
-        type: String,
-        required: true,
-    },
-    optionValue: {
-        type: String,
-        default: 'id',
-    },
-    optionLabel: {
-        type: String,
-        default: 'name',
-    },
-    fields: {
-        type: Array,
-        default: null,
-    },
-    params: {
-        type: Object,
-        default: null,
-    },
-    sortBy: {
-        type: String,
-        default: null,
-    },
-    exprBuilder: {
-        type: Function,
-        default: null,
-    },
     hasAvatar: {
         type: Boolean,
         default: false,
@@ -51,9 +13,13 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-    noOne: {
+    modelValue: {
-        type: Boolean,
+        type: [String, Number, Object],
-        default: false,
+        default: null,
+    },
+    params: {
+        type: Object,
+        default: null,
     },
 });
 
@@ -69,24 +35,27 @@ const value = computed({
 
 <template>
     <VnSelect
-        :label="t($props.label)"
+        v-bind="$attrs"
         v-model="value"
-        :url="$props.url"
+        :url="
-        :option-value="$props.optionValue"
+            $props.params
-        :option-label="$props.optionLabel"
+                ? `Workers/search?departmentCodes=${JSON.stringify(
-        :fields="$props.fields"
+                      $props.params.departmentCodes
+                  )}`
+                : 'Workers/search'
+        "
+        option-value="id"
+        option-label="nickname"
+        :fields="['id', 'name', 'nickname', 'code']"
+        sort-by="name ASC"
         :params="$props.params"
-        :sort-by="$props.sortBy"
-        :expr-builder="$props.exprBuilder"
-        :no-one="$props.noOne"
-        hide-selected
     >
-        <template #prepend v-if="hasAvatar">
+        <template #prepend v-if="$props.hasAvatar">
             <VnAvatar :worker-id="value" color="primary" :title="title" />
         </template>
-        <template #append v-if="hasInfo">
+        <template #append v-if="$props.hasInfo">
             <QIcon name="info" class="cursor-pointer">
-                <QTooltip>{{ t('Responsible for approving invoices') }}</QTooltip>
+                <QTooltip>{{ $t('Responsible for approving invoices') }}</QTooltip>
             </QIcon>
         </template>
         <template #option="scope">

src/pages/Customer/Card/CustomerBasicData.vue

@@ -8,7 +8,6 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnAvatar from 'src/components/ui/VnAvatar.vue';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const route = useRoute();
@@ -16,7 +15,6 @@ const { t } = useI18n();
 
 const businessTypes = ref([]);
 const contactChannels = ref([]);
-const title = ref();
 const handleSalesModelValue = (val) => ({
     or: [
         { id: val },
@@ -107,28 +105,14 @@ const exprBuilder = (param, value) => {
                 <VnSelectWorker
                     :label="t('customer.summary.salesPerson')"
                     v-model="data.salesPersonFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'nickname'"
-                    :fields="['id', 'name', 'nickname']"
                     :params="{
                         departmentCodes: ['VT', 'shopping'],
                     }"
-                    :sort-by="'nickname ASC'"
                     :has-avatar="true"
                     :rules="validate('client.salesPersonFk')"
                     :expr-builder="exprBuilder"
                     emit-value
-                    auto-load
+                />
-                >
-                    <template #prepend>
-                        <VnAvatar
-                            :worker-id="data.salesPersonFk"
-                            color="primary"
-                            :title="title"
-                        />
-                    </template>
-                </VnSelectWorker>
                 <VnSelect
                     v-model="data.contactChannelFk"
                     :options="contactChannels"

src/pages/Customer/CustomerFilter.vue

@@ -69,14 +69,9 @@ const exprBuilder = (param, value) => {
                     <VnSelectWorker
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         :params="{
                             departmentCodes: ['VT'],
                         }"
-                        :sort-by="'nickname ASC'"
                         :expr-builder="exprBuilder"
                         @update:model-value="searchFn()"
                         emit-value

src/pages/Customer/CustomerList.vue

@@ -424,17 +424,14 @@ function handleLocation(data, location) {
             <VnSelectWorker
                 :label="t('customer.summary.salesPerson')"
                 v-model="data.salesPersonFk"
-                :url="'Workers/search'"
-                :option-value="'id'"
-                :option-label="'nickname'"
-                :fields="['id', 'name', 'nickname']"
                 :params="{
                     departmentCodes: ['VT', 'shopping'],
                 }"
-                :sort-by="'nickname ASC'"
                 :has-avatar="true"
+                :id-value="data.salesPersonFk"
                 emit-value
                 auto-load
+                option-label="nickname"
             />
             <VnLocation
                 :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"

src/pages/Department/Card/DepartmentBasicData.vue

@@ -52,10 +52,6 @@ const { t } = useI18n();
                 <VnSelectWorker
                     :label="t('department.bossDepartment')"
                     v-model="data.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    :fields="['id', 'name', 'nickname']"
                     :rules="validate('department.workerFk')"
                 />
                 <VnSelect

src/pages/Item/ItemRequestFilter.vue

@@ -148,13 +148,8 @@ const decrement = (paramsObj, key) => {
                 <QItemSection>
                     <VnSelectWorker
                         :label="t('params.requesterFk')"
-                        v-model="params.requesterFkk"
+                        v-model="params.requesterFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         @update:model-value="searchFn()"
-                        :sort-by="'name ASC'"
                         :params="{ departmentCodes: ['VT'] }"
                         dense
                         outlined

src/pages/Monitor/Ticket/MonitorTicketFilter.vue

@@ -115,13 +115,23 @@ const getLocale = (label) => {
                         rounded
                         :label="t('globals.params.salesPersonFk')"
                         v-model="params.salesPersonFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         :params="{ departmentCodes: ['VT'] }"
                         :no-one="true"
-                    />
+                    >
+                        <template #option="{ opt, itemProps }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel
+                                        v-if="opt.code"
+                                        class="text-grey text-caption"
+                                    >
+                                        {{ `${opt.nickname}, ${opt.code}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectWorker>
                 </QItemSection>
             </QItem>
             <QItem>

src/pages/Order/Card/OrderFilter.vue

@@ -65,11 +65,6 @@ const sourceList = ref([]);
                 <VnSelectWorker
                     :label="t('globals.salesPerson')"
                     v-model="params.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'nickname'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'nickname ASC'"
                     dense
                     outlined
                     rounded

src/pages/Route/Card/RouteFilter.vue

@@ -35,11 +35,6 @@ const emit = defineEmits(['search']);
                     <VnSelectWorker
                         :label="t('Worker')"
                         v-model="params.workerFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'nickname'"
-                        :fields="['id', 'name', 'nickname']"
-                        :sort-by="'nickname ASC'"
                         dense
                         outlined
                         rounded

src/pages/Route/Card/RouteForm.vue

@@ -95,15 +95,7 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow>
-                <VnSelectWorker
+                <VnSelectWorker :label="t('worker')" v-model="data.workerFk" />
-                    :label="t('worker')"
-                    v-model="data.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'nickname'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'nickname ASC'"
-                />
                 <VnSelect
                     :label="t('Vehicle')"
                     v-model="data.vehicleFk"

src/pages/Supplier/Card/SupplierBasicData.vue

@@ -34,11 +34,6 @@ const companySizes = [
                 <VnSelectWorker
                     :label="t('supplier.basicData.workerFk')"
                     v-model="data.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'nickname ASC'"
                     :has-info="true"
                     :rules="validate('supplier.workerFk')"
                 />

src/pages/Ticket/Card/TicketCreateTracking.vue

@@ -47,15 +47,7 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                     option-label="name"
                     option-value="id"
                 />
-                <VnSelectWorker
+                <VnSelectWorker :label="t('expedition.worker')" v-model="data.userFk" />
-                    :label="t('expedition.worker')"
-                    v-model="data.userFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'name ASC'"
-                />
             </VnRow>
         </template>
     </FormModelPopup>

src/pages/Worker/WorkerCreate.vue

@@ -153,10 +153,6 @@ async function autofillBic(worker) {
                     <VnSelectWorker
                         :label="t('worker.summary.boss')"
                         v-model="data.bossFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         :rules="validate('Worker.boss')"
                     />
                 </VnRow>

src/pages/Worker/WorkerList.vue

@@ -15,10 +15,10 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
-import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -264,10 +264,6 @@ async function autofillBic(worker) {
                     <VnSelectWorker
                         :label="t('worker.summary.boss')"
                         v-model="data.bossFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                     />
                 </VnRow>
                 <VnRow>