fix : update는 결재선만 수정하기로 함

src/pages/app/contractManagement.vue

@@ -113,10 +113,11 @@ function getContractDetail(){
 }
 //[0200 계약종료 /0300 대금지급전 / 0400 대금지급중/ 0500 대금지급완료]
 function getBilling(row){
-  if(params.sessionUser.sabun == row.regSabun && (row.contStatCd == '0200' || row.contStatCd == '0300')){
-    //대금지급 전
-    const statusFlag = row.contStatCd
-    router.push({ path: '/app/documentManagementInsertUpdate', state: { key: row.contNo, status: statusFlag}})
+  if(params.sessionUser.sabun == row.regSabun && row.contStatCd == '0200'){
+    //계약종료
+    router.push({path: '/app/documentManagementInsert', state: {key: row.contNo}})
+  }else if(params.sessionUser.sabun == row.regSabun && row.contStatCd == '0300'){
+    router.push({path: '/app/documentManagementUpdate', state: {key: row.contNo}})
   }else if(params.sessionUser.sabun == row.regSabun && (row.contStatCd == '0400' || row.contStatCd == '0500')){
     //대금지급중, 대금지급완료
     router.push({ path: '/app/documentManagementDetail', state: { key: row.contNo}})

src/pages/app/documentManagementInsert.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {getBeforeSlipDetail, saveTempSlip} from "/@src/service/slipApi.ts";
+import {saveTempSlip} from "/@src/service/slipApi.ts";
 import {formatDatefromStringDate} from "/@src/utils/common/comfunc.ts";
 import {ApprsList, type iPbAtt, type Person} from "/@src/utils/types.ts";
 import {VTabsItem} from "/src/components/app-vuero/VCustomTabs.vue";
@@ -8,18 +8,9 @@ import {getContractDetail} from "/@src/service/contractApi.ts";
 import {deletePrcsFile} from "/@src/service/priceApi.ts";
 
 onBeforeMount(async ()=>{
-  let result;
-  if(history.state.status == '0200'){
-    // 계약종료는 contract api 결재선 추가해야 됨
-    result = await getContractDetail(history.state.key)
-    getDetailBeforeList(result)
-  }else if(history.state.status == '0300'){
-    params.contStatCd = history.state.status
-    // 대금지급 전 slip api 에서 결재선까지 받아옴
-    result = await getBeforeSlipDetail(history.state.key)
-    getDetailList(result)
-  }
-
+  const result = await getContractDetail(history.state.key)
+  // 계약종료는 contract api 결재선 추가해야 됨
+  getDetailBeforeList(result)
 })
 const notyf = useNotyf()
 
@@ -60,7 +51,6 @@ const params = reactive({
   compNm: '',
   signDt: '',
   contAmt: 0,
-  contStatCd: '',
   contStat: '',
   regsabun: '',
   place: '',
@@ -81,39 +71,9 @@ const params = reactive({
 const pbAtts = ref<iPbAtt[]>(params.slipAtts)
 const formattedNumber = ref(0)
 const apprLine = ref<VTabsItem[]>([])
-const getDetailList = (item) => {
-  console.log("getDetailList",item)
-  params.contNo = item.contNo
-  params.regSdt = formatDatefromStringDate(item.bldat) //증빙일
-  params.regSdt2 = formatDatefromStringDate(item.budat)//전기일
-  params.place = ''// 업체명 bupla
-  currencyCode.value = item.waers //통화
-  params.bktxt = item.bktxt   //계약명
-  params.lifnr = item.lifnr  //계약상대자
-  formattedNumber.value = item.wrbtrS //공급가액
-  taxCode.value=  item.mwskz //세금코드 ->세금계산서랑 같이 ?
-  affiliationCode.value = item.bupla//소속 gsber bupla
-  params.zterm = item.zterm
-  params.banks = item.banks
-  params.bankl = item.bankl //계좌관리 은행코드
-  params.bankn = item.bankn//계좌관리 계좌번호
-  //taxInvoiceCode.value = item.mwskz //세금계산서 따로 연계 태워야됨 todo
-  params.hkont = item.hkont  //G/L 계정
-  selectCostCode.value = ''//코스트센터 kostl wbs요소코드 projk
-  params.wrbtrS = item.wrbtrS
-  params.kostl = item.kostl
-  params.projk = item.projk
-  params.trtGubun = item.trtGubun
-  params.txBillSeq = item.txBillSeq
-  params.slipAtts = item.slipAtts//첨부파일
-  console.log("params.slipAtts",params.slipAtts)
-  apprLine.value = item.zwf0011t.apprs
-  console.log("apprsList.value",apprLine.value)
-}
 
 const getDetailBeforeList = (item) => {
   console.log("item before",item)
-  params.contStatCd = item.contStatCd
   params.contNo = item.contNo
   params.place = item.compNm// !!!!!!업체명 bupla
   params.bktxt = item.title   //!!!!!!계약명
@@ -666,8 +626,7 @@ const moveDown = (index: number) => {
           </tbody>
         </table>
         <div class="bottom-button">
-          <VButton v-if="params.contStatCd == '0200'" @click="createChit">전 표 생 성</VButton>
-          <VButton v-else-if="params.contStatCd == '0300'" @click="updateChit">전 표 수 정</VButton>
+          <VButton @click="createChit">전 표 생 성</VButton>
           <VButton @click="cancel">취 소</VButton>
         </div>
         <div class="column is-12">

src/pages/app/documentManagementUpdate.vue

@@ -0,0 +1,724 @@
+<script setup lang="ts">
+
+import {getBeforeSlipDetail, saveTempSlip} from "/@src/service/slipApi.ts";
+import {formatDatefromStringDate} from "/@src/utils/common/comfunc.ts";
+import { type iPbAtt, type Person} from "/@src/utils/types.ts";
+import {VTabsItem} from "/@src/components/app-vuero/VCustomTabs.vue";
+import {getContractDetail} from "/@src/service/contractApi.ts";
+import {deletePrcsFile} from "/@src/service/priceApi.ts";
+
+onBeforeMount(async ()=>{
+  const result = await getBeforeSlipDetail(history.state.key)
+  // 대금지급 전 slip api 에서 결재선까지 받아옴
+  getDetailList(result)
+})
+const notyf = useNotyf()
+
+const affiliationCode = ref()
+const taxCode = ref('')
+const currencyCode = ref('KRW')
+const taxInvoiceCode = ref()
+const accountSubjectCode = ref()
+const params = reactive({
+  //샘플 데이터 형식으로 맞춤
+  // https://git.hmsn.ink/kospo/svcm/api/-/blob/main/api/slip/%EC%9E%84%EC%8B%9C%EC%A0%84%ED%91%9C%EC%A0%80%EC%9E%A5.http?ref_type=heads
+  cateCd: '',
+  contNo: '',
+  bldat: '',
+  budat: '',
+  regSdt: '',
+  regSdt2: '',
+  //waers  => currencyCode ref
+  bktxt: '', //계약명
+  lifnr: '', //계약상대자
+  //wrbtr => formattedNumber ref
+  //mwskz => taxCode ref
+  //gsber => affiliationCode ref
+  //bupla => affiliationCode ref
+  zterm: '',
+  banks: '',
+  bankl:'',
+  bankn:'',
+  hkont: '',
+  wrbtrS: '', //공급가액 체크 필요 todo
+  kostl: '',
+  projk: '',
+  trtGubun: '',
+  txBillSeq: '',
+  slipAtts: [],
+  //apprList:[], ==> apprLine 변수로 변경 // 결재선 데이터 키: 값(배열 들어감)
+
+  compNm: '',
+  signDt: '',
+  contAmt: 0,
+  contStat: '',
+  regsabun: '',
+  place: '',
+  regDt: '',
+  reason: '',
+  page: 1,
+  row: 10,
+  flexColumn: [
+      //이름은 안넘어오고 있음
+    { key: 'lineclsf', label: '구분', value: {} },
+    { key: 'bname', label: '사원번호', value: {} },
+    { key: 'btext', label: '이름', value: {} },
+    { key: 'abscd', label: '근태관리', value: {} },
+    { key: 'actions', label: '동작' },
+  ],
+  modalColumn: [],
+})
+const pbAtts = ref<iPbAtt[]>(params.slipAtts)
+const formattedNumber = ref(0)
+const apprLine = ref<VTabsItem[]>([])
+const getDetailList = (item) => {
+  console.log("getDetailList",item)
+  params.contNo = item.contNo
+  params.regSdt = formatDatefromStringDate(item.bldat) //증빙일
+  params.regSdt2 = formatDatefromStringDate(item.budat)//전기일
+  params.place = ''// 업체명 bupla
+  currencyCode.value = item.waers //통화
+  params.bktxt = item.bktxt   //계약명
+  params.lifnr = item.lifnr  //계약상대자
+  formattedNumber.value = item.wrbtrS //공급가액
+  taxCode.value=  item.mwskz //세금코드 ->세금계산서랑 같이 ?
+  affiliationCode.value = item.bupla//소속 gsber bupla
+  params.zterm = item.zterm
+  params.banks = item.banks
+  params.bankl = item.bankl //계좌관리 은행코드
+  params.bankn = item.bankn//계좌관리 계좌번호
+  //taxInvoiceCode.value = item.mwskz //세금계산서 따로 연계 태워야됨 todo
+  params.hkont = item.hkont  //G/L 계정
+  selectCostCode.value = ''//코스트센터 kostl wbs요소코드 projk
+  params.wrbtrS = item.wrbtrS
+  params.kostl = item.kostl
+  params.projk = item.projk
+  params.trtGubun = item.trtGubun
+  params.txBillSeq = item.txBillSeq
+  params.slipAtts = item.slipAtts//첨부파일
+  console.log("params.slipAtts",params.slipAtts)
+  apprLine.value = item.zwf0011t.apprs
+  console.log("apprsList.value",apprLine.value)
+}
+
+const getDetailBeforeList = (item) => {
+  console.log("item before",item)
+  params.contStatCd = item.contStatCd
+  params.contNo = item.contNo
+  params.place = item.compNm// !!!!!!업체명 bupla
+  params.bktxt = item.title   //!!!!!!계약명
+  params.lifnr = item.bizNo  //!!!!!계약상대자
+}
+
+function onInput(event) {
+  let onlyNumber = event.target.value.replace(/[^0-9]/g, '')
+  formattedNumber.value = onlyNumber ? Number(onlyNumber).toLocaleString() : ''
+}
+
+const selectCostCode = ref('코스트센터') //todo
+const selectCostCodeOptions = [
+  { text: '코스트센터', key: 'kostl' },
+  { text: 'WBS', key: 'projk'}
+]
+const router = useRouter()
+const cancel = () => {
+  router.push('/app/contractManagement')
+}
+
+const loading = ref(false)
+
+const updateChit = async () => {
+  let res = null
+  try{
+    loading.value = true
+    const createParams = {
+      contNo : params.contNo, //"CONT-0000000005",
+      bldat : '20250602',//params.regSdt.replace("-",""), // "20250501",
+      budat : '20250610',//params.regSdt2.replace("-",""), // "20250502",
+      waers : currencyCode.value, //"KRW",
+      bktxt : params.bktxt,//"전표 생성 테스트1",
+      lifnr : params.lifnr, //999-99-99999",
+      wrbtr : formattedNumber.value, //수정필요 "1203",
+      mwskz : taxCode.value, //"V4",
+      gsber : affiliationCode.value, //무슨 값인지 모름 gsber bukrs bupla 같다고 함 1000
+      bupla : affiliationCode.value, //1000
+      zterm : params.zterm, //어떤 값인지 모름 PF00
+      banks : params.banks , //어떤 값인지 모름 KR
+      bankl : params.bankl, //012
+      bankn : params.bankn, //3510876657453
+      hkont : params.hkont,//G/L 계정 5366010
+      wrbtrS : formattedNumber.value, //1102
+      kostl : "12330", //12330
+      projk : selectCostCode.value, //빈값
+      trtGubun : params.trtGubun,//어떤 값인지 모름 11
+      txBillSeq : params.txBillSeq,//어떤 값인지 모름 202503231
+      slipAtts: pbAtts.value.map(req => ({
+        logiFnm: req.logiFnm,
+        data: req.data})),//첨부파일 데이터,
+      zwf0011t : {
+        wkftx : "결재 테스트11", //어떤 값인지 모름
+        apprs : [{
+          label: apprLine.value[0].label,
+          value: apprLine.value[0].value.map((req) => ({
+            lineclsf : req.lineclsf,
+            bname : req.bname,
+            abscd : req.abscd
+          }))
+        }]
+      }
+    }
+    notyf.dismissAll()
+    res = await saveTempSlip(createParams)
+    if(res.request.status == '200'){
+      notyf.primary('등록 되었습니다.')
+      router.push({path: '/app/priceManagement'})
+    }
+  }catch(e){
+    notyf.error(e.message)
+  }finally {
+    loading.value = false
+  }
+}
+const selectedTab = ref<VTabsItem[]>()
+const addTabFromRow =()=>{
+  console.log("row",row)
+  console.log("row",index)
+}
+
+const onFileClick = () => {
+  const input = <any> document.querySelector('.file-input')
+  input.click()
+}
+
+const onFileChange = (e: any) => {
+  Array.from(e.target.files).forEach((file: any) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = <string>reader.result
+      const pbAtt = <iPbAtt>{ // todo 여기 첨부파일로 변경 필요
+        prcsNo: params.prcsNo,
+        logiFnm: file.name,
+        size: file.size,
+        data: result.split(',')[1],
+      }
+      notyf.dismissAll()
+      if(pbAtt.logiFnm.includes('.pdf')) { //todo 여러개 올릴 때 이슈 발생 확인 필요
+        pbAtts.value.push(pbAtt)
+      }else{
+        notyf.error("pdf 파일만 업로드 가능합니다.")
+      }
+    }
+
+    reader.readAsDataURL(file)
+  })
+}
+
+const onFilDelete = async (prcsNo: string, index: number, fileOrd: number) => {
+  notyf.dismissAll()
+  const confirmed = confirm('삭제하시겠습니까?')
+  if (!prcsNo) {
+    if (confirmed){
+      pbAtts.value.splice(index, 1)
+    }
+  } else {
+    if (confirmed) {
+      await deletePrcsFile(prcsNo, fileOrd).then((res: string) => {
+        notyf.success(res)
+        pbAtts.value.splice(index, 1)
+      }).catch((err) => {
+        notyf.error('삭제 중 오류가 발생했습니다.')
+        console.error(err)
+      })
+    }
+  }
+}
+
+const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: string) => {
+  const link = document.createElement('a')
+  link.href = `https://svcm.hmsn.ink/api/prcs/${prcsNo}/${fileOrd}` //todo
+  link.setAttribute('download', logiFnm)
+  link.setAttribute('target', '_blank')
+  document.body.appendChild(link)
+  link.click()
+}
+
+const selectUser = ref<Person[]>([])
+
+const isDuplicate = (person: Person) =>{
+    console.log("value[0].value", apprLine.value)
+    return apprLine.value.some((p) => p.lineclsf === person.sabun)}
+
+watch(
+    selectUser,
+    (newPersons) => {
+      console.log("newPersons",newPersons)
+      if (Array.isArray(newPersons) && newPersons.length > 0) {
+        const filtered = newPersons.filter((p) => !isDuplicate(p))
+        apprLine.value = [...apprLine.value, ...filtered]
+        selectUser.value = []
+      }
+    },
+    { deep: true }
+)
+
+const onPriceDelete = (index: number) => {
+
+  if(apprLine.value.length-1 !== params.flexColumn.length
+      || (params.flexColumn.length == 8 && apprLine.value.length-1 == params.flexColumn.length))
+  {
+    apprLine.value.splice(index, 1)
+  }
+}
+
+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>
+  <div class="page-content is-navbar-lg">
+    <div class="datatable-wrapper">
+      <div class="table-container">
+        <table class="table datatable-table is-fullwidth">
+          <colgroup>
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+            <col style="width: 10%;">
+          </colgroup>
+          <tbody>
+          <tr>
+            <td>소속</td>
+            <td colspan="2">
+              <VField>
+                <VCodeSelect
+                    v-model="affiliationCode"
+                    cd_grp=11 >
+                </VCodeSelect>
+              </VField>
+            </td>
+            <td colspan="7" />
+          </tr>
+          <tr>
+            <td>계약명</td>
+            <td colspan="9">
+              <VField>
+                <VControl>
+                  <input
+                      v-model="params.bktxt"
+                      class="input custom-text-filter"
+                      placeholder="계약명"
+                  >
+                </VControl>
+              </VField>
+            </td>
+          </tr>
+          <tr>
+            <td>계약상대자</td>
+            <td colspan="2">
+              <VField>
+                <VControl>
+                  <input
+                      v-model="params.lifnr"
+                      class="input custom-text-filter"
+                      placeholder="사업자번호"
+                  >
+                </VControl>
+              </VField>
+            </td>
+            <td colspan="2">
+              <VField>
+                <VControl>
+                  <input
+                      v-model="params.place"
+                      class="input custom-text-filter"
+                      placeholder="업체명"
+                  >
+                </VControl>
+              </VField>
+            </td>
+            <td>
+              <VButton color="danger">
+                구매처 확인
+              </VButton>
+            </td>
+            <td>
+              <VButton color="success">
+                정상
+              </VButton>
+            </td>
+            <td colspan="2" />
+          </tr>
+          <tr>
+            <td>공급가액</td>
+            <td colspan="2">
+              <VField>
+                <VControl>
+                  <input
+                      :value="formattedNumber"
+                      placeholder="금액"
+                      @input="onInput"
+                      class="input custom-text-filter"
+                  >
+                </VControl>
+              </VField>
+            </td>
+            <td style="color: black">(부가세 별도)</td>
+            <td style="background-color: var(--primary); text-align: center">
+              <span>세금코드</span>
+            </td>
+            <td colspan="2">
+              <VField>
+                <VCodeSelect v-model="taxCode" cd_grp="12">
+                  <template #code="{ item }">
+                    {{ item.cd }}
+                  </template>
+                </VCodeSelect>
+              </VField>
+            </td>
+            <td style="background-color: var(--primary); text-align: center">통화</td>
+            <td colspan="2">
+              <VField>
+                <VCodeSelect v-model="currencyCode" cd_grp="13">
+                  <template #code="{ item }">
+                    {{ item.cd }}
+                  </template>
+                </VCodeSelect>
+              </VField>
+            </td>
+          </tr>
+          <tr>
+            <td>증빙일</td>
+            <td colspan="2">
+              <div>
+                <VDatePicker
+                    v-model="params.regSdt"
+                    color="green"
+                    trim-weeks
+                >
+                  <template #default="{ inputValue, inputEvents }">
+                    <VField>
+                      <VControl icon="lucide:calendar">
+                        <input
+                            class="input v-input"
+                            type="text"
+                            :value="inputValue"
+                            placeholder="증빙일"
+                            v-on="inputEvents"
+                        >
+                      </VControl>
+                    </VField>
+                  </template>
+                </VDatePicker>
+              </div>
+            </td>
+            <td />
+            <td style="background-color: var(--primary); text-align: center">
+              <span>전기일</span>
+            </td>
+            <td colspan="2">
+              <div>
+                <VDatePicker
+                    v-model="params.regSdt2"
+                    color="green"
+                    trim-weeks
+                >
+                  <template #default="{ inputValue, inputEvents }">
+                    <VField>
+                      <VControl icon="lucide:calendar">
+                        <input
+                            class="input v-input"
+                            type="text"
+                            :value="inputValue"
+                            placeholder="전기일"
+                            v-on="inputEvents"
+                        >
+                      </VControl>
+                    </VField>
+                  </template>
+                </VDatePicker>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>계좌관리</td>
+            <td>
+              <VField>
+                <VControl>
+                  <input
+                      v-model="params.bankl"
+                      class="input custom-text-filter"
+                      placeholder="계약번호"
+                  >
+                </VControl>
+              </VField>
+            </td>
+            <td colspan="2">
+              <VField>
+                <VControl>
+                  <input
+                      v-model="params.bankn"
+                      class="input custom-text-filter"
+                      placeholder="계좌번호"
+                  >
+                </VControl>
+              </VField>
+            </td>
+            <td>
+              <VButton color="info">
+                계좌조회
+              </VButton>
+            </td>
+            <td>
+              <VButton color="success">
+                정상
+              </VButton>
+            </td>
+            <td></td>
+            <td style="background-color: var(--primary); text-align: center">
+              <span>세금계산서</span>
+            </td>
+            <td colspan="2">
+              <VField>
+                <VCodeSelect
+                    v-model="taxInvoiceCode"
+                    cd_grp=12 >
+                </VCodeSelect>
+              </VField>
+            </td>
+          </tr>
+          <tr>
+            <td>예산관리</td>
+            <td>
+              <VButton
+                  color="primary"
+                  @click="centeredActionsOpen = true"
+              >
+                G/L계정// 설정필요
+              </VButton>
+            </td>
+            <td colspan="2">
+              <VField>
+                <VCodeSelect
+                    v-model="accountSubjectCode"
+                    cd_grp=12 >
+                </VCodeSelect>
+              </VField>
+            </td>
+            <td>
+              <VField>
+                <VSelect v-model="selectCostCode">
+                  <option v-for="opt in selectCostCodeOptions" :key="opt.key">
+                    {{ opt.text }}
+                  </option>
+                </VSelect>
+              </VField>
+            </td>
+            <td colspan="2">
+              <VField>
+                <VControl>
+                  <input
+                      v-model="params.bktxt"
+                      class="input custom-text-filter"
+                      placeholder="코드"
+                  >
+                </VControl>
+              </VField>
+            </td>
+            <td colspan="4"></td>
+          </tr>
+          <tr>
+            <td>첨부파일</td>
+            <td colspan="1">
+              <VField>
+                <div class="form-label">
+                  <div class="file has-name is-fullwidth">
+                    <input
+                        class="file-input hide"
+                        type="file"
+                        multiple
+                        @change="(e) => onFileChange(e)"
+                    >
+                    <VLabel>
+                      <VButton icon="fas fa-plus" color="info" class="file-trigger" @click="onFileClick" >
+                        <span>파일업로드</span>
+                      </VButton>
+                    </VLabel>
+                  </div>
+                </div>
+                <VControl>
+                  <div
+                      v-for="(f, i) in pbAtts"
+                      :key="f.logiFnm"
+                      class="content estimate-file-wrapper"
+                  >
+                    <div class="estimate-file-name">
+                      {{ f.logiFnm }}{{" ("}}{{Math.ceil(f.size / 1024)}}kb{{")"}}
+                    </div>
+                    <div>
+                      <i class="fa fa-trash estimate-file-delete" @click="onFilDelete(f.bizNo, i, f.fileOrd)" />
+                    </div>
+                  </div>
+                </VControl>
+              </VField>
+              <div class="column is-12">
+                <VField>
+                  <VControl>
+                    <div
+                        v-for="f in params.slipAtts"
+                        :key="f.logiFnm"
+                        class="content estimate-file-wrapper"
+                    >
+                      <div class="estimate-file-name">
+                        {{ f.logiFnm }}{{" ("}}{{Math.ceil(f.size / 1024)}}kb{{")"}}
+                      </div>
+                      <span>
+                        <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
+                        <i class="fa fa-trash estimate-file-delete" @click="onFilDelete(f.prcsNo, i, f.fileOrd)" />
+                      </span>
+                    </div>
+                  </VControl>
+                </VField>
+              </div>
+            </td>
+            <td colspan="5">
+              <div>('준공보고서' 또는 '검수보고서' 등)</div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+        <div class="bottom-button">
+          <VButton @click="updateChit">전 표 수 정</VButton>
+          <VButton @click="cancel">취 소</VButton>
+        </div>
+        <div class="column is-12">
+          <VUserSap v-model="selectUser" placeholder="사번이나 이름으로 검색해주세요"/>
+        </div>
+        <VCustomTabs
+            type="boxed"
+            v-model:selected="selectedTab"
+            :tabs="apprLine">
+          <template #tab-link-label="{ tab }">
+            {{ tab.label }}
+          </template>
+          <template #tab="{ activeValue }">
+            <div>
+              <ComVFlexTable
+                  :data="activeValue? activeValue : []"
+                  :columns="params.flexColumn"
+                  :compact="true"
+                  :clickable="true"
+                  @rowClick="addTabFromRow"
+              >
+                <template #body-cell="{row, column, index, value}">
+                  <span v-if="column.key=='lineclsf'" class="column">
+                      <VField class="pr-1">
+                        <VCodeSelect
+                            cd_grp=9
+                            v-model="row.lineclsf"
+                        />
+                      </VField>
+                    </span>
+                  <span v-else-if="column.key=='wkfst'" class="column">
+                      <VField class="pr-1">
+                        <VCodeSelect
+                            cd_grp=8
+                            v-model="row.wkfst"
+                        />
+                      </VField>
+                  </span>
+                  <span v-else-if="column.key === 'actions'" class="flex gap-1">
+                    <VCustomButton v-if="index != 1" @click="moveUp(index)" icon="lucide:arrow-up" />
+                    <VCustomButton @click="moveDown(index)" icon="lucide:arrow-down" />
+                    <VCustomButton @click="onPriceDelete(index)">{{"삭제"}}</VCustomButton>
+                  </span>
+                </template>
+              </ComVFlexTable>
+            </div>
+          </template>
+        </VCustomTabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table tbody td {
+  color: var(--smoke-white);
+
+}
+
+.datatable-table  {
+  td{
+    font-family: var(--font),serif;
+    vertical-align: middle;
+    padding: 4px 20px;
+    border-bottom: 1px solid var(--fade-grey);
+  }
+
+  td:nth-child(1) {
+    background-color: var(--primary);
+    text-align: center;
+  }
+
+  tr:nth-child(3) {
+    text-align: center;
+  }
+
+  tr td button{
+    width: 100%;
+  }
+
+}
+
+.button.v-button {
+  padding: 0px 0px;
+}
+
+.bottom-button {
+  text-align: center;
+  button {
+    background-color: cornflowerblue;
+    margin: 10px;
+    font-weight: bold;
+    border-color: var(--primary);
+    color: white;
+    padding: 0.5rem 1rem !important;
+  }
+}
+button:nth-child(2) {
+  background-color: #AB9A6c;
+}
+button:nth-child(3) {
+  background-color: silver;
+}
+
+.field {
+  margin: 0px 0px;
+}
+
+
+.disabled-button {
+  //opacity: 0.5;
+  background-color: #ccc;
+  cursor: not-allowed;
+  //transition: all 0.2s;
+}
+
+</style>

types/router.d.ts

@@ -29,7 +29,8 @@ declare module 'vue-router/auto-routes' {
     '/app/contractManagement': RouteRecordInfo<'/app/contractManagement', '/app/contractManagement', Record<never, never>, Record<never, never>>,
     '/app/contractUpdate': RouteRecordInfo<'/app/contractUpdate', '/app/contractUpdate', Record<never, never>, Record<never, never>>,
     '/app/documentManagementDetail': RouteRecordInfo<'/app/documentManagementDetail', '/app/documentManagementDetail', Record<never, never>, Record<never, never>>,
-    '/app/documentManagementInsertUpdate': RouteRecordInfo<'/app/documentManagementInsertUpdate', '/app/documentManagementInsertUpdate', Record<never, never>, Record<never, never>>,
+    '/app/documentManagementInsert': RouteRecordInfo<'/app/documentManagementInsert', '/app/documentManagementInsert', Record<never, never>, Record<never, never>>,
+    '/app/documentManagementUpdate': RouteRecordInfo<'/app/documentManagementUpdate', '/app/documentManagementUpdate', Record<never, never>, Record<never, never>>,
     '/app/priceDetail': RouteRecordInfo<'/app/priceDetail', '/app/priceDetail', Record<never, never>, Record<never, never>>,
     '/app/PriceInsert': RouteRecordInfo<'/app/PriceInsert', '/app/PriceInsert', Record<never, never>, Record<never, never>>,
     '/app/priceManagement': RouteRecordInfo<'/app/priceManagement', '/app/priceManagement', Record<never, never>, Record<never, never>>,