From ea30d35227edaf3350b06b274282cffc4fe73b56 Mon Sep 17 00:00:00 2001
From: Yesol Choi <ysoli36512@gmail.com>
Date: Wed, 4 Jun 2025 19:33:40 +0900
Subject: [PATCH] =?UTF-8?q?com=20:=20userSap=20api=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app-vuero/VUserSap.vue | 95 +++++++++++++++++++++++++++
 src/service/UserApi.ts                | 17 ++++-
 2 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 src/components/app-vuero/VUserSap.vue

diff --git a/src/components/app-vuero/VUserSap.vue b/src/components/app-vuero/VUserSap.vue
new file mode 100644
index 0000000..94beffb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/service/UserApi.ts b/src/service/UserApi.ts
index 5b0e3f8..0345b85 100644
--- a/src/service/UserApi.ts
+++ b/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)