com : userSap api 추가 및 컴포넌트 추가 완료

src/components/app-vuero/VUserSap.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {getUserSapList} from '/@src/service/UserApi'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '직원검색',
+  },
+  placeholder: {
+    type: String,
+  },
+  disabled: {
+    type: Boolean
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+export interface VUserEmits {
+  (e: 'update:modelValue', value: any): void
+}
+const emits = defineEmits<VUserEmits>()
+const tagsOptions = ref([])
+
+const approvers = ref()
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal.length > 0) {
+    emits('update:modelValue', approvers)
+    approvers.value = []
+  }
+})
+const onKeyup = async (e: any) => {
+  const regex_jaeum = /[ㄱ-ㅎ]/g
+  if (e.key === 'Enter') {
+    if (e.target.value.match(regex_jaeum) === null) {
+      try {
+        const res = await getUserSapList({params:{name : e.target.value}})
+
+        if (res.length > 0) {
+          tagsOptions.value = res
+        }
+      } catch (e) {
+        console.error('Error fetching user list:', e)
+      }
+    }
+    if (e.target.value === '') {
+      tagsOptions.value = []
+    }
+  }
+}
+</script>
+
+<template>
+  <VField v-slot="{ id }" class="pr-2 is-autocomplete-select">
+    <VLabel class="has-fullwidth">
+      {{props.label}}
+    </VLabel>
+    <VControl icon="lucide:search">
+      <Multiselect
+        v-model="approvers"
+        :attrs="{ id }"
+        :searchable="true"
+        :disabled="props.disabled"
+        :options="tagsOptions"
+        mode="multiple"
+        noResultsText="조회된 결과가 없습니다."
+        noOptionsText="검색된 결과가 없습니다."
+        :placeholder="props.placeholder"
+        @keyup="onKeyup"
+        @update:modelValue="(val) => {
+          emits('update:modelValue', val)
+        }"
+      >
+        <template #multiplelabel="{ values }">
+          <div class="multiselect-multiple-label pl-6">
+            {{props.placeholder}}
+          </div>
+        </template>
+      </Multiselect>
+    </VControl>
+  </VField>
+</template>
+
+<style scoped lang="scss">
+.field {
+  padding-bottom: 10px !important;
+  .label {
+    font-size: 1.3em;
+    color: var(--modal-text) !important;
+  }
+}
+</style>

src/service/UserApi.ts

@@ -1,5 +1,21 @@
 import axios from 'axios'
 
+/**
+ * 사용자관리 > (sap 결재용) 직원검색
+ * @property {string} name  - 이름
+ * @returns
+ * @param name
+ */
+export async function getUserSapList(params = {}) {
+    try {
+        const result = await axios.get('/api/sap/user',params)
+        console.log("result",result.data)
+        return result.data
+    } catch (e) {
+        throw new Error(e)
+    }
+}
+
 /**
  * 사용자관리 > 직원검색
  * @property {string} name  - 이름
@@ -9,7 +25,6 @@ import axios from 'axios'
 export async function getUserList(params = {}) {
     try {
         const result = await axios.get('/api/user',params)
-        console.log("result",result.data)
         return result.data
     } catch (e) {
         throw new Error(e)