refs #7172 change vnselectfilter

src/pages/Claim/Card/ClaimBasicData.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -40,11 +40,7 @@ const workers = ref([]);
 const workersCopy = ref([]);
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
+const workersOptions = ref([]);
 
 function setClaimStates(data) {
     claimStates.value = data;
@@ -89,8 +85,9 @@ const statesFilter = {
     <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
+        limit="30"
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
     <FormModel
@@ -118,7 +115,7 @@ const statesFilter = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QSelect
+                    <!-- <QSelect
                         v-model="data.workerFk"
                         :options="workers"
                         option-value="id"
@@ -140,7 +137,28 @@ const statesFilter = {
                                 />
                             </QAvatar>
                         </template>
-                    </QSelect>
+                    </QSelect> -->
+                    <VnSelectFilter
+                        :label="t('claim.basicData.assignedTo')"
+                        v-model="data.workerFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        auto-load
+                        @filter="(value, update) => filter(value, update, workerFilter)"
+                        :rules="validate('claim.claimStateFk')"
+                    >
+                        <template #before>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.workerFk"
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </VnSelectFilter>
                 </div>
                 <div class="col">
                     <QSelect