fix : 동작 위아래이동, 삭제 , 결제 2명 validation까지 완료

- VUser 오류 발생 중으로 수정 요함

src/components/app-vuero/VCustomButton.vue

@@ -0,0 +1,648 @@
+<script lang="ts">
+import type { RouteLocationAsString } from 'unplugin-vue-router'
+import type { SlotsType, PropType } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import VPlaceload from '/@src/components/base/VPlaceload.vue'
+
+export type VButtonSize = 'medium' | 'big' | 'huge'
+export type VButtonColor =
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'white'
+  | 'dark'
+  | 'light'
+  | 'validation'
+export type VButtonDark = '1' | '2' | '3' | '4' | '5' | '6'
+
+export default defineComponent({
+  props: {
+    to: {
+      type: [Object, String] as PropType<RouteLocationAsString>,
+      default: undefined,
+    },
+    href: {
+      type: String,
+      default: undefined,
+    },
+    icon: {
+      type: String,
+      default: undefined,
+    },
+    iconCaret: {
+      type: String,
+      default: undefined,
+    },
+    placeload: {
+      type: String,
+      default: undefined,
+      validator: (value: string) => {
+        if (value.match(CssUnitRe) === null) {
+          console.warn(
+            `VButton: invalid "${value}" placeload. Should be a valid css unit value.`,
+          )
+        }
+
+        return true
+      },
+    },
+    color: {
+      type: String as PropType<VButtonColor>,
+      default: undefined,
+      validator: (value: VButtonColor) => {
+        // The value must match one of these strings
+        if (
+          [
+            undefined,
+            'primary',
+            'info',
+            'success',
+            'warning',
+            'danger',
+            'white',
+            'dark',
+            'light',
+            'validation',
+          ].indexOf(value) === -1
+        ) {
+          console.warn(
+            `VButton: invalid "${value}" color. Should be primary, info, success, warning, danger, dark, light, validation, white or undefined`,
+          )
+          return false
+        }
+
+        return true
+      },
+    },
+    size: {
+      type: String as PropType<VButtonSize>,
+      default: undefined,
+      validator: (value: VButtonSize) => {
+        // The value must match one of these strings
+        if ([undefined, 'medium', 'big', 'huge'].indexOf(value) === -1) {
+          console.warn(
+            `VButton: invalid "${value}" size. Should be big, huge, medium or undefined`,
+          )
+          return false
+        }
+
+        return true
+      },
+    },
+    dark: {
+      type: String as PropType<VButtonDark>,
+      default: undefined,
+      validator: (value: VButtonDark) => {
+        // The value must match one of these strings
+        if ([undefined, '1', '2', '3', '4', '5', '6'].indexOf(value) === -1) {
+          console.warn(
+            `VButton: invalid "${value}" dark. Should be 1, 2, 3, 4, 5, 6 or undefined`,
+          )
+          return false
+        }
+
+        return true
+      },
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    bold: {
+      type: Boolean,
+      default: false,
+    },
+    fullwidth: {
+      type: Boolean,
+      default: false,
+    },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    raised: {
+      type: Boolean,
+      default: false,
+    },
+    elevated: {
+      type: Boolean,
+      default: false,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    darkOutlined: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    lower: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    static: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  slots: Object as SlotsType<{
+    default: void
+  }>,
+  setup(props, { slots, attrs }) {
+    const classes = computed(() => {
+      const defaultClasses = (attrs?.class || []) as string[] | string
+      return [
+        defaultClasses,
+      ]
+    })
+    const isIconify = computed(() => props.icon && props.icon.indexOf(':') !== -1)
+    const isCaretIconify = computed(
+      () => props.iconCaret && props.iconCaret.indexOf(':') !== -1,
+    )
+
+    const getChildrens = () => {
+      const childrens = []
+
+      let iconWrapper
+      if (isIconify.value) {
+        const icon = h('iconify-icon', {
+          class: 'iconify',
+          icon: props.icon,
+        })
+        iconWrapper = h('span', { class: 'icon' }, icon)
+      }
+      else if (props.icon) {
+        const icon = h('i', { 'aria-hidden': true, 'class': props.icon })
+        iconWrapper = h('span', { class: 'icon rtl-reflect' }, icon)
+      }
+
+      let caretWrapper
+      if (isCaretIconify.value) {
+        const caret = h('iconify-icon', {
+          class: 'iconify',
+          icon: props.iconCaret,
+        })
+        caretWrapper = h('span', { class: 'caret' }, caret)
+      }
+      else if (props.iconCaret) {
+        const caret = h('i', { 'aria-hidden': true, 'class': props.iconCaret })
+        caretWrapper = h('span', { class: 'caret' }, caret)
+      }
+
+      if (iconWrapper) {
+        childrens.push(iconWrapper)
+      }
+      if (props.placeload) {
+        childrens.push(
+          h(VPlaceload, {
+            width: props.placeload,
+          }),
+        )
+      }
+      else {
+        childrens.push(h('span', slots.default?.()))
+      }
+      if (caretWrapper) {
+        childrens.push(caretWrapper)
+      }
+
+      return childrens
+    }
+
+    return () => {
+      if (props.to) {
+        return h(
+          RouterLink,
+          {
+            ...attrs,
+            'aria-hidden': !!props.placeload,
+            'to': props.to,
+            'class': ['button', ...classes.value],
+          },
+          {
+            default: getChildrens,
+          },
+        )
+      }
+      else if (props.href) {
+        return h(
+          'a',
+          {
+            ...attrs,
+            'aria-hidden': !!props.placeload,
+            'href': props.href,
+            'class': classes.value,
+          },
+          {
+            default: getChildrens,
+          },
+        )
+      }
+
+      return h(
+        'button',
+        {
+          'type': 'button',
+          ...attrs,
+          'aria-hidden': !!props.placeload,
+          'disabled': props.disabled,
+          'class': ['button', ...classes.value],
+        },
+        {
+          default: getChildrens,
+        },
+      )
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.button {
+  &.is-circle {
+    border-radius: var(--radius-rounded);
+  }
+
+  &.v-button {
+    padding: 8px 22px;
+    height: 38px;
+    line-height: 1.1;
+    font-size: 0.95rem;
+    font-family: var(--font);
+    transition: all 0.3s; // transition-all test
+
+    &:not([disabled]) {
+      cursor: pointer;
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: none !important;
+      border-color: color-mix(in oklab, var(--fade-grey), black 2%);
+    }
+
+    &:not(
+        .is-primary,
+        .is-success,
+        .is-info,
+        .is-warning,
+        .is-danger,
+        .is-light,
+        .is-white,
+        .is-validation
+      ) {
+      &.is-active {
+        background: var(--primary) !important;
+        border-color: var(--primary) !important;
+        color: var(--white) !important;
+        box-shadow: var(--primary-box-shadow) !important;
+      }
+    }
+
+    &:focus-visible {
+      outline-offset: var(--accessibility-focus-outline-offset);
+      outline-width: var(--accessibility-focus-outline-width);
+      outline-style: var(--accessibility-focus-outline-style);
+      outline-color: var(--accessibility-focus-outline-color);
+    }
+
+    &.is-bold {
+      font-weight: 500;
+    }
+
+    &.is-primary {
+      &.is-raised:hover {
+        opacity: 0.9;
+        box-shadow: var(--primary-box-shadow);
+      }
+
+      &.is-elevated {
+        box-shadow: var(--primary-box-shadow);
+      }
+    }
+
+    &.is-success {
+      &.is-raised:hover {
+        opacity: 0.9;
+        box-shadow: var(--success-box-shadow);
+      }
+
+      &.is-elevated {
+        box-shadow: var(--success-box-shadow);
+      }
+    }
+
+    &.is-info {
+      &.is-raised:hover {
+        opacity: 0.9;
+        box-shadow: var(--info-box-shadow);
+      }
+
+      &.is-elevated {
+        box-shadow: var(--info-box-shadow);
+      }
+    }
+
+    &.is-warning {
+      &.is-raised:hover {
+        opacity: 0.9;
+        box-shadow: var(--warning-box-shadow);
+      }
+
+      &.is-elevated {
+        box-shadow: var(--warning-box-shadow);
+      }
+    }
+
+    &.is-validation {
+      &.is-raised:hover {
+        opacity: 0.9;
+        box-shadow: var(--warning-box-shadow);
+      }
+
+      &.is-elevated {
+        box-shadow: var(--warning-box-shadow);
+      }
+    }
+
+    &.is-danger {
+      &.is-raised:hover {
+        opacity: 0.9;
+        box-shadow: var(--danger-box-shadow);
+      }
+
+      &.is-elevated {
+        box-shadow: var(--danger-box-shadow);
+      }
+    }
+
+    &.is-lower {
+      text-transform: none !important;
+      font-size: 0.9rem;
+    }
+
+    &.is-big {
+      height: 40px;
+    }
+
+    &.is-medium {
+      height: 2.5rem;
+      font-size: 1rem;
+    }
+
+    &.is-huge {
+      height: 50px;
+      width: 220px;
+    }
+  }
+
+  &.simple-action {
+    height: 32px;
+    padding: 0 24px;
+    line-height: 0;
+    border-radius: 100px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s; // transition-all test
+
+    &.is-purple {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: var(--smoke-white);
+
+      &:hover,
+      &:focus {
+        opacity: 0.95;
+        box-shadow: var(--primary-box-shadow);
+        color: var(--smoke-white) !important;
+      }
+    }
+
+    &.has-icon {
+      .iconify {
+        height: 16px;
+        width: 16px;
+        font-size: 16px;
+      }
+    }
+
+    &:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    .iconify {
+      height: 18px;
+      width: 18px;
+      font-size: 18px;
+    }
+  }
+
+  .icon {
+    .iconify {
+      height: 14px;
+      width: 14px;
+      font-size: 14px;
+    }
+  }
+}
+
+.is-dark {
+  .v-button {
+    &:not(
+        .is-primary,
+        .is-success,
+        .is-info,
+        .is-warning,
+        .is-danger,
+        .is-light,
+        .is-white,
+        .is-validation
+      ) {
+      background: color-mix(in oklab, var(--dark-sidebar), white 10%);
+      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+      color: var(--dark-dark-text);
+
+      &:hover,
+      &:focus {
+        border-color: color-mix(in oklab, var(--dark-sidebar), white 18%);
+      }
+    }
+
+    &.is-light {
+      border: none;
+      background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+      color: var(--smoke-white) !important;
+
+      &:hover {
+        background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+      }
+    }
+
+    &.is-primary {
+      border-color: var(--primary);
+      background: var(--primary);
+
+      &.is-raised:hover {
+        box-shadow: var(--primary-box-shadow) !important;
+      }
+
+      &.is-elevated {
+        box-shadow: var(--primary-box-shadow) !important;
+      }
+
+      &.is-outlined {
+        background: transparent;
+        border-color: var(--primary) !important;
+        color: var(--primary);
+
+        &:hover,
+        &:focus {
+          background: var(--primary) !important;
+          border-color: var(--primary) !important;
+          color: var(--white) !important;
+        }
+      }
+
+      &.is-light {
+        border: none;
+        background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+        color: color-mix(in oklab, var(--primary), white 20%) !important;
+
+        &:hover {
+          background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+        }
+      }
+    }
+
+    &.is-info {
+      &.is-light {
+        background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+        color: color-mix(in oklab, var(--info), white 20%) !important;
+
+        &:hover {
+          background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+        }
+      }
+    }
+
+    &.is-success {
+      &.is-light {
+        background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+        color: color-mix(in oklab, var(--success), white 20%) !important;
+
+        &:hover {
+          background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+        }
+      }
+    }
+
+    &.is-warning {
+      &.is-light {
+        background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+        color: color-mix(in oklab, var(--warning), white 20%) !important;
+
+        &:hover {
+          background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+        }
+      }
+    }
+
+    &.is-validation {
+      &.is-light {
+        background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+        color: color-mix(in oklab, var(--warning), white 20%) !important;
+
+        &:hover {
+          background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+        }
+      }
+    }
+
+    &.is-danger {
+      &.is-light {
+        background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
+        color: color-mix(in oklab, var(--danger), white 20%) !important;
+
+        &:hover {
+          background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
+        }
+      }
+    }
+
+    &.is-white {
+      background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
+      border-color: var(--muted-grey) !important;
+      color: var(--muted-grey) !important;
+    }
+
+    &.is-dark-outlined {
+      background: color-mix(in oklab, var(--dark-sidebar), white 10%);
+      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+      color: var(--dark-dark-text);
+
+      &:hover,
+      &:focus {
+        border-color: var(--primary) !important;
+        color: var(--primary) !important;
+      }
+    }
+  }
+
+  .button {
+    &:not(
+        .is-primary,
+        .is-success,
+        .is-info,
+        .is-warning,
+        .is-danger,
+        .is-light,
+        .is-white,
+        .is-validation
+      ) {
+      background: color-mix(in oklab, var(--dark-sidebar), white 10%);
+      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+      color: var(--dark-dark-text);
+
+      &:hover,
+      &:focus {
+        border-color: color-mix(in oklab, var(--dark-sidebar), white 18%);
+      }
+    }
+
+    &.is-primary {
+      border-color: var(--primary);
+      background: var(--primary);
+    }
+
+    &.is-white {
+      background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
+      border-color: var(--muted-grey) !important;
+      color: var(--muted-grey) !important;
+    }
+
+    &.is-dark-outlined {
+      background: color-mix(in oklab, var(--dark-sidebar), white 10%);
+      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+      color: var(--dark-dark-text);
+
+      &:hover,
+      &:focus {
+        border-color: var(--primary) !important;
+        color: var(--primary) !important;
+      }
+    }
+  }
+}
+</style>

src/components/app-vuero/VUser.vue

@@ -22,7 +22,6 @@ const dataUser = reactive({
 //   model.value = sessioinData
 // })
 const initiator = ref<Person | null>(null)
-const approvers = ref<Person[]>([])
 
 onBeforeMount(() => {
   dataUser.userSession = userSession.user.data
@@ -36,15 +35,6 @@ onBeforeMount(() => {
   }
 })
 
-// 부모에게 넘길 결재선 전체
-const apprLine = computed(() => {
-  return initiator.value ? [initiator.value, ...approvers.value] : [...approvers.value]
-})
-
-watch(apprLine, (val) => {
-  model.value = val
-})
-
 
 const props = defineProps({
   label: {
@@ -56,11 +46,27 @@ const props = defineProps({
   },
   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') {
@@ -69,27 +75,6 @@ const onKeyup = async (e: any) => {
         const res = await getUserList({params:{name : e.target.value}})
 
         if (res.length > 0) {
-          // res.forEach(u => { 2명으로 제한 로직 풀기 25.05.29
-          //   if (model.value?.length > 0) {
-          //     const ignore = model.value.reduce((a: Person, b: Person) => {
-          //       console.log("aaaaa",a.sabun)
-          //       console.log("bbbbbb",b.sabun)
-          //       return a.sabun + '|' + b.sabun
-          //     })
-          //
-          //     if (typeof ignore !== 'object') {
-          //       if (ignore.includes(u.sabun)) {
-          //         console.log("ignore 처리",u.sabun)
-          //         u['disabled'] = true
-          //       }
-          //     } else {
-          //       if (ignore.sabun.includes(u.sabun)) {
-          //         console.log("ignore 처리222",u.sabun)
-          //         u['disabled'] = true
-          //       }
-          //     }
-          //   }
-          // })
           tagsOptions.value = res
         }
       } catch (e) {
@@ -120,6 +105,9 @@ const onKeyup = async (e: any) => {
         noOptionsText="검색된 결과가 없습니다."
         :placeholder="props.placeholder"
         @keyup="onKeyup"
+        @update:modelValue="(val) => {
+          emits('update:modelValue', val)
+        }"
       >
         <template #multiplelabel="{ values }">
           <div class="multiselect-multiple-label pl-6">

src/pages/app/priceUpdate.vue

@@ -14,7 +14,7 @@ onBeforeMount(async ()=>{
 
 const showTable = ref(false)
 const detailActionsOpen = ref(false)
-const apprLine = defineModel<Person[]>()
+const apprLine = ref([])
 
 const generalParams = reactive({
   title: "",
@@ -30,6 +30,7 @@ const params = reactive({
   cateSelect: '',
   prcsNo: '',
   stCd: '', //상태코드 등록 전 : 0000
+  defaultPricePerson:[],
   prcsAttsColumn:[ //첨부파일 입력
     { key: 'logiFnm', label: '구분'},
     { key: 'data', label: '데이터'}
@@ -40,9 +41,10 @@ const params = reactive({
     { key: 'deptNm', label: '부서' },
     { key: 'sabun', label: '사번' },
     { key: 'name', label: '이름' },
-    { key: 'attendCd', label: '비고'},
+    { key: 'attendCd', label: '근태'},
     { key: 'apprStat', label: '결재상태'},
     { key: 'apprDt', label: '승인일자'},
+    {key:'actions', label: '동작'},
   ],
   priceData:[],
   prcsBizsColumn: [ //견적사 입력
@@ -90,10 +92,9 @@ function getDetailList(arg){
     apprNo: req.apprNo,
     apprOrd: req.apprOrd,
     apprStat: req.apprStat,
-    apprDt: req.apprDt,
+    apprDt: req.apprDt ? req.apprDt : '-',
     attendCd: req.attendCd
-  }))  //비고 데이터 없음, 승인일자 없음 todo
+  }))
-  console.log("apprLine.value",apprLine.value)
   params.prcsAtts = arg.prcsAtts
 }
 
@@ -104,23 +105,44 @@ const changeButton = () => {
 }
 
 const validation = () => {
-  notyf.dismissAll() //todo
+  notyf.dismissAll()
   if(generalParams.regSdat > generalParams.regEdat){
     notyf.error("등록 종료일은 등록 시작일보다 빠를 수 없습니다.")
-    return
+    return false
+  }
+
+  const resultGu = apprLine.value.filter((item)=> !item.gubunCd)
+
+  if(resultGu.length > 0){
+    notyf.error("결재선 구분값을 입력해주세요")
+    return false
   }
 
   if(apprLine.value.length < 2){
     notyf.error("결재선은 두 명이상 입력해주세요.")
-    return
+    return false
   }
+  const result = apprLine.value.filter((item)=> item.gubunCd === '0200' )
+
+  if(result.length > 1){
+    notyf.error("결재는 한 명입니다.")
+    return false
+  }
+  return true
 }
 
+const selectUser = ref()
+watch(selectUser,(newPersons)=>{
+  if (Array.isArray(newPersons)) {
+    apprLine.value = [...apprLine.value, ...newPersons]
+  }
+})
+
 const updatePriceOne = async () => {
   let res = null
   try{
     loading.value = true
-    validation()
+    if (validation()){
       const paramsPrice ={
         prcsNo : params.prcsNo,
         cateCd : params.cateSelect,
@@ -138,7 +160,10 @@ const updatePriceOne = async () => {
         prcsAtts: pbAtts.value.map(req => ({
           logiFnm: req.logiFnm,
           data: req.data})),//첨부파일 데이터,
-      apprReqs: apprLine.value.map(({ deptNm, ...rest }) => rest),  //결재선 데이터
+        apprReqs: apprLine.value.map(({ deptNm, ...rest }, index) =>  ({
+          ...rest,
+          apprOrd: index + 1, // 결재 순서 1부터 시작
+        })),  //결재선 데이터
       }
       res = await updatePrice(paramsPrice)
       notyf.dismissAll()
@@ -146,6 +171,7 @@ const updatePriceOne = async () => {
         notyf.primary('수정 되었습니다.')
         router.push({path: '/app/priceManagement'})
       }
+    }
   }catch(e){
     notyf.error(e.message)
   }finally {
@@ -191,6 +217,14 @@ const onDetailDelete = (index: number) => {
   }
 }
 
+const onPriceDelete = (index: number) => {
+
+  if(apprLine.value.length-1 !== params.felxColumn.length
+      || (params.felxColumn.length == 8 && apprLine.value.length-1 == params.felxColumn.length))
+  {
+    apprLine.value.splice(index, 1)
+  }
+}
 
 function onInput(row, column){
   if (column.key === 'bizNo') {
@@ -251,6 +285,20 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
   link.click()
 }
 
+const moveUp = (index: number) => {
+  if (index <= 0) return
+  let temp = apprLine.value[index]
+  apprLine.value[index] = apprLine.value[index - 1]
+  apprLine.value[index - 1] = temp
+}
+
+const moveDown = (index: number) => {
+  if (index >= apprLine.value.length - 1) return
+  let temp = apprLine.value[index]
+  apprLine.value[index] = apprLine.value[index + 1]
+  apprLine.value[index + 1] = temp
+}
+
 </script>
 
 <template>
@@ -539,7 +587,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
         </table>
       </div>
       <div class="column is-12">
-        <VUser v-model="apprLine"/>
+        <VUser v-model="selectUser"/>
       </div>
       <div class="column is-12">
         <VField class="pr-2">
@@ -548,6 +596,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
           </VLabel>
         </VField>
         <ComVFlexTable
+          :key="apprLine.map(item => item.sabun).join(',')"
           :data="apprLine"
           :columns="params.felxColumn"
           :separators="true"
@@ -569,14 +618,15 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
                         placeholder="재중"
                         cd_grp=6
                         v-model="row.attendCd">
-<!--                      <template #code>-->
-<!--                        <span v-if="!row.attendCd">{{"재중"}}</span>-->
-<!--                      </template>-->
                     </VDefaultCodeSelect>
                   </VField>
                 </span>
-              <span v-else
+              <span v-else-if="column.key === 'actions'" class="flex gap-1">
-                    @click="onDetailDelete(index)">{{value}}</span>
+                <VCustomButton @click="moveUp(index)" icon="lucide:chevron-up" />
+                <VCustomButton @click="moveDown(index)" icon="lucide:chevron-down" />
+                <VCustomButton @click="onPriceDelete(index)" icon="lucide:x" />
+              </span>
+              <span v-else>{{value}}</span>
             </div>
           </template>
         </ComVFlexTable>
@@ -584,7 +634,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
       <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;">
       <VButton
           color="primary"
-          @click.stop="updatePriceOne"
+          @click.stop="updatePriceOne()"
           raised>
         수정
       </VButton>