refactor: use select office

src/components/02_personnel-management/FormByType.vue

@@ -9,6 +9,8 @@ import { Icon } from '@iconify/vue';
 import { QSelect } from 'quasar';
 import DatePicker from '../shared/DatePicker.vue';
 
+import SelectOffice from 'components/shared/select-muliple/SelectOffice.vue';
+
 const { t } = useI18n();
 const userStore = useUserStore();
 const optionStore = useOptionStore();
@@ -18,7 +20,7 @@ const userType = defineModel<string>('userType');
 const registrationNo = defineModel<string | null>('registrationNo');
 const startDate = defineModel<Date | null | string>('startDate');
 const retireDate = defineModel<Date | null | string>('retireDate');
-const responsibleArea = defineModel<string | null | undefined>(
+const responsibleArea = defineModel<string[] | null | undefined>(
   'responsibleArea',
 );
 const discountCondition = defineModel<string | null | undefined>(
@@ -178,30 +180,12 @@ watch(
           clearable
         />
 
-        <q-select
+        <SelectOffice
+          v-model:value="responsibleArea"
           v-if="userType === 'MESSENGER'"
-          outlined
-          clearable
-          fill-input
-          emit-value
-          map-options
-          hide-bottom-space
-          class="col-12"
-          input-debounce="0"
-          multiple
-          use-chips
-          stack-label
-          option-label="label"
-          option-value="value"
-          id="input-responsible-area"
-          :dense="dense"
           :readonly="readonly"
-          :hide-dropdown-icon="readonly"
           :label="$t('personnel.form.responsibleArea')"
-          :options="responsibleAreaOptions"
-          @filter="responsibleAreaFilter"
-          v-model="responsibleArea"
-        ></q-select>
+        />
       </div>
       <div
         v-if="userType === 'DELEGATE'"