From b3109bbf656ace19d6244a314fb4b18986afbe7f Mon Sep 17 00:00:00 2001
From: Yesol Choi <ysoli36512@gmail.com>
Date: Mon, 2 Jun 2025 22:07:06 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EB=8C=80=EA=B8=88=EC=A7=80=EA=B8=89?=
 =?UTF-8?q?=EC=A4=91,=20=EB=8C=80=EA=B8=88=EC=A7=80=EA=B8=89=EC=A0=84=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20Tab=20=EC=B2=98=EB=A6=AC=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/app/DocumentManagement.vue       | 140 +++++-
 src/pages/app/contractDetail.vue           |  15 +-
 src/pages/app/contractManagement.vue       |   4 +-
 src/pages/app/documentManagementDetail.vue | 512 +++++++++++++++++++++
 src/service/slipApi.ts                     |  30 +-
 src/utils/types.ts                         |  11 +
 types/router.d.ts                          |   1 +
 7 files changed, 686 insertions(+), 27 deletions(-)
 create mode 100644 src/pages/app/documentManagementDetail.vue

diff --git a/src/pages/app/DocumentManagement.vue b/src/pages/app/DocumentManagement.vue
index efc8be9..82e9013 100644
--- a/src/pages/app/DocumentManagement.vue
+++ b/src/pages/app/DocumentManagement.vue
@@ -1,28 +1,38 @@
 <script setup lang="ts">
 
-import { getSlipDetail } from "/@src/service/slipApi.ts";
+import {getBeforeSlipDetail, saveTempSlip} from "/@src/service/slipApi.ts";
+import {formatDatefromStringDate} from "/@src/utils/common/comfunc.ts";
+import {ApprsList} from "/@src/utils/types.ts";
 
 onBeforeMount(async ()=>{
-  const result = await getSlipDetail(history.state.key)
+  const result = await getBeforeSlipDetail(history.state.key)
   getDetailList(result)
 })
+const notyf = useNotyf()
+//결재선 담아오는 변수
+const apprsList = ref<ApprsList>()
 
 const getDetailList = (item) => {
   console.log("getDetailList",item)
-  affiliationCode.value = item.trtGubun//소속
+  params.contNo = item.contNo
+  affiliationCode.value = item.bukrs//소속
   params.title = item.bktxt   //계약명
   params.regNm = item.lifnr  //계약상대자
-  params.place = ''// 업체명
-  formattedNumber.value = '' //공급가액
+  params.place = ''// 업체명 bupla
+  formattedNumber.value = item.wrbtrS //공급가액
   taxCode.value=  item.mwskz //세금코드 ->세금계산서랑 같이 ?
-  currencyCode.value = item.banks //통화
-  params.regSdt = '' //증빙일
-  params.regSdt2 = ''//전기일
-  taxInvoiceCode.value = item.mwskz //세금계산서
-  accountSubjectCode.value = item.mwskz //예산관리
-  selectCostCode.value = ''//코스트센터
+  currencyCode.value = item.waers //통화
+  params.regSdt = formatDatefromStringDate(item.bldat) //증빙일
+  params.regSdt2 = formatDatefromStringDate(item.budat)//전기일
+  params.bankl = item.bankl //계좌관리 은행코드
+  params.bankn = item.bankn//계좌관리 계좌번호
+  //taxInvoiceCode.value = item.mwskz //세금계산서 따로 연계 태워야됨 todo
+  //  item.hkont  G/L 계정
+  selectCostCode.value = ''//코스트센터 kostl wbs요소코드 projk
 //코드
   //첨부파일
+  params.apprList = item.zwf0011t.apprs[0].value[0]
+  console.log("apprsList.value",apprsList.value)
 }
 
 const affiliationCode = ref()
@@ -46,9 +56,18 @@ const params = reactive({
   reason: '',
   regSdt: '',
   regSdt2: '',
+  bankl:'',
+  bankn:'',
   page: 1,
   row: 10,
-  flexColumn: [],
+  flexColumn: [
+    { key: 'btext', label: '이름'},
+    { key: 'bname', label: '사원번호'},
+    { key: 'posit', label: '부서'},
+    { key: 'lineclsf', label: '담당'},
+    { key: 'wkfst', label: '결재요청'},
+  ],
+  apprList:[],
   modalColumn: [],
 })
 const formattedNumber = ref(0)
@@ -58,16 +77,56 @@ function onInput(event) {
   formattedNumber.value = onlyNumber ? Number(onlyNumber).toLocaleString() : ''
 }
 
-const selectCostCode = ref('코스트센터')
+const selectCostCode = ref('코스트센터') //todo
 const selectCostCodeOptions = [
-  { text: '코스트센터', value: '코스트센터' },
-  { text: 'WBS', value: 'WBS'}
+  { text: '코스트센터', key: 'kostl' },
+  { text: 'WBS', key: 'projk'}
 ]
 const router = useRouter()
 const cancel = () => {
   router.push('/app/contractManagement')
 }
 
+const loading = ref(false)
+const createChit = async () => {
+  let res = null
+  try{
+    loading.value = true
+    const createParams = {
+      contNo : params.contNo,
+      bldat : '20250602',//params.regSdt.replace("-",""),
+      budat : '20250602',//params.regSdt2.replace("-",""),
+      waers : currencyCode.value,
+      bktxt : params.title,
+      lifnr : params.regNm,
+      wrbtr : formattedNumber.value, //수정필요
+      mwskz : taxCode.value,
+      gsber : affiliationCode.value, //무슨 값인지 모름 gsber bukrs bupla
+      bupla : affiliationCode.value,
+      zterm : '', //어떤 값인지 모름
+      banks : '' , //어떤 값인지 모름
+      bankl : params.bankl,
+      bankn : params.bankn,
+      hkont : '',//G/L 계정
+      wrbtrS : formattedNumber.value,
+      kostl : selectCostCode.value,
+      projk : selectCostCode.value,
+      trtGubun : '',//어떤 값인지 모름
+      txBillSeq : '',//어떤 값인지 모름
+      slipAtts: '' // 파일 업로드
+    }
+    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
+  }
+}
 </script>
 
 <template>
@@ -247,7 +306,7 @@ const cancel = () => {
                 <VField>
                   <VControl>
                     <input
-                      v-model="params.title"
+                      v-model="params.bankl"
                       class="input custom-text-filter"
                       placeholder="계약번호"
                     >
@@ -258,7 +317,7 @@ const cancel = () => {
                 <VField>
                   <VControl>
                     <input
-                      v-model="params.title"
+                      v-model="params.bankn"
                       class="input custom-text-filter"
                       placeholder="계좌번호"
                     >
@@ -295,7 +354,7 @@ const cancel = () => {
                   color="primary"
                   @click="centeredActionsOpen = true"
                 >
-                  G/L계정
+                  G/L계정// 설정필요
                 </VButton>
               </td>
               <td colspan="2">
@@ -309,7 +368,7 @@ const cancel = () => {
               <td>
                 <VField>
                   <VSelect v-model="selectCostCode">
-                    <option v-for="opt in selectCostCodeOptions" :key="opt.value" :value="opt.value">
+                    <option v-for="opt in selectCostCodeOptions" :key="opt.key">
                       {{ opt.text }}
                     </option>
                   </VSelect>
@@ -342,12 +401,53 @@ const cancel = () => {
           </tbody>
         </table>
         <div class="bottom-button">
-          <VButton>전 표 생 성</VButton>
+          <VButton @click="createChit">전 표 생 성</VButton>
           <VButton @click="cancel">취 소</VButton>
         </div>
+          <VTabs
+              type="boxed"
+              selected="team"
+              :tabs="[
+                { label: '결재', value:'team' },
+              ]"
+          >
+            <template #tab="{ activeValue }">
+              <p v-if="activeValue === 'team'">
+                <ComVFlexTable
+                    :data="params.apprList"
+                    :columns="params.flexColumn"
+                    :compact="true">
+                  <template #body-cell="{ row, column, index, value }">
+                    <span v-if="column.key=='lineclsf'" class="column">
+                      <VField class="pr-1">
+                        <VCodeSelect
+                            disabled="true"
+                            cd_grp=9
+                            v-model="row.lineclsf"
+                        />
+                        <!--                   :disabled="index === 0"-->
+                      </VField>
+                    </span>
+                    <span v-if="column.key=='wkfst'" class="column">
+                      <VField class="pr-1">
+                        <VCodeSelect
+                            disabled="true"
+                            cd_grp=8
+                            v-model="row.wkfst"
+                        />
+                        <!--                   :disabled="index === 0"-->
+                      </VField>
+                    </span>
+                  </template>
+                </ComVFlexTable>
+              </p>
+            </template>
+          </VTabs>
       </div>
     </div>
+
   </div>
+
 </template>
 
 <style scoped lang="scss">
diff --git a/src/pages/app/contractDetail.vue b/src/pages/app/contractDetail.vue
index bc9fda1..b069779 100644
--- a/src/pages/app/contractDetail.vue
+++ b/src/pages/app/contractDetail.vue
@@ -7,6 +7,8 @@ import {changeConfirm, signStart} from "/@src/service/signDocApi.ts";
 onBeforeMount(async ()=>{
   const result = await getContractDetail(history.state.key)
   getDetailList(result)
+  const userSession = useUserSession()
+  params.sessionUser = userSession.user.data
 })
 
 const registerFormOpen = ref(false)
@@ -14,6 +16,7 @@ const loading = ref(false)
 const notyf = useNotyf()
 const router = useRouter()
 const params = reactive({
+  sessionUser: '',
   cateCd: '',
   contNo: '',
   title: '',
@@ -99,12 +102,13 @@ function getDetailList(arg){
   completedPriceDataParams.title = arg.title
   completedPriceDataParams.regSdat = arg.contSdat // 계약기간
   completedPriceDataParams.regEdat = arg.contEdat
+  completedPriceDataParams.regSabun = arg.regSabun
   completedPriceDataParams.contAmt = arg.contAmt
   // completedPriceDataParams.svyDt = arg.signDt 계약체결일 todo
   completedPriceDataParams.reason = arg.reason
   params.contAtts = arg.contAtts
   params.contStatCd = arg.contStatCd
-
+  params.contNo = arg.contNo
 }
 
 
@@ -227,6 +231,12 @@ const onChangeSign = async() => {
   }
 }
 
+function getBilling(){
+  if(params.sessionUser.sabun == completedPriceDataParams.regSabun &&  params.contStatCd == '0200'){
+    router.push({ path: '/app/DocumentManagement', state: { key: params.contNo}})
+  }
+}
+
 const onPrcsFileDownload = async (contNo: string, fileOrd: number, logiFnm: string) => {
   const link = document.createElement('a')
   link.href = `https://svcm.hmsn.ink/api/prcs/${contNo}/${fileOrd}` //todo
@@ -535,7 +545,8 @@ const onPrcsFileDownload = async (contNo: string, fileOrd: number, logiFnm: stri
         </table>
         <div class="bottom-button">
           <VButton v-if="params.contStatCd == '0100'" @click="onChangeSign">전자결재(상세)</VButton>
-          <VButton v-else-if="params.contStatCd == '0200'" @click="onChangeSign">대금지급 전자결재(상세)</VButton>
+          <VButton v-else-if="params.contStatCd == '0200'" @click="getBilling">대금지급</VButton>
+<!--          <VButton v-else-if="params.contStatCd == '0200'" @click="onChangeSign">전자결재(상세)</VButton>-->
           <VButton @click="moveList">취 소</VButton>
         </div>
       </div>
diff --git a/src/pages/app/contractManagement.vue b/src/pages/app/contractManagement.vue
index 5f6b32d..2fdafa1 100644
--- a/src/pages/app/contractManagement.vue
+++ b/src/pages/app/contractManagement.vue
@@ -83,10 +83,10 @@ function getContractDetail(){
     router.push({ path: '/app/contractDetail', state: { key: arguments[0].contNo }})
   }
 }
-
+//[0300 대금지급전 / 0400 대금지급중/ 0500 대금지급완료]
 function getBilling(row){
   if(params.sessionUser.sabun == row.regSabun && row.contStatCd == '0200'){
-    router.push({ path: '/app/DocumentManagement', state: { key: row.contNo}})
+    router.push({ path: '/app/documentManagementDetail', state: { key: row.contNo}})
   }
 }
 </script>
diff --git a/src/pages/app/documentManagementDetail.vue b/src/pages/app/documentManagementDetail.vue
new file mode 100644
index 0000000..c26cc5c
--- /dev/null
+++ b/src/pages/app/documentManagementDetail.vue
@@ -0,0 +1,512 @@
+<script setup lang="ts">
+
+import {getSlipDetail, saveTempSlip} from "/@src/service/slipApi.ts";
+import {formatDatefromStringDate} from "/@src/utils/common/comfunc.ts";
+
+onBeforeMount(async ()=>{
+  const result = await getSlipDetail(history.state.key)
+  getDetailList(result)
+})
+const notyf = useNotyf()
+const getDetailList = (item) => {
+  console.log("getDetailList",item)
+  params.contNo = item.contNo
+  affiliationCode.value = item.bukrs//소속
+  params.title = item.bktxt   //계약명
+  params.regNm = item.lifnr  //계약상대자
+  params.place = ''// 업체명 bupla
+  formattedNumber.value = item.wrbtrS //공급가액
+  taxCode.value=  item.mwskz //세금코드 ->세금계산서랑 같이 ?
+  currencyCode.value = item.waers //통화
+  params.regSdt = formatDatefromStringDate(item.bldat) //증빙일
+  params.regSdt2 = formatDatefromStringDate(item.budat)//전기일
+  params.bankl = item.bankl //계좌관리 은행코드
+  params.bankn = item.bankn//계좌관리 계좌번호
+  //taxInvoiceCode.value = item.mwskz //세금계산서 따로 연계 태워야됨 todo
+  //  item.hkont  G/L 계정
+  selectCostCode.value = ''//코스트센터 kostl wbs요소코드 projk
+//코드
+  //첨부파일
+  params.apprList = item.zwf0011t.apprs[0].value[0]
+}
+
+const affiliationCode = ref()
+const taxCode = ref('')
+const currencyCode = ref('KRW')
+const taxInvoiceCode = ref()
+const accountSubjectCode = ref()
+
+const params = reactive({
+  cateCd: '',
+  contNo: '',
+  title: '',
+  compNm: '',
+  signDt: '',
+  contAmt: 0,
+  contStatCd: '',
+  contStat: '',
+  regsabun: '',
+  regNm: '',
+  place: '',
+  regDt: '',
+  reason: '',
+  regSdt: '',
+  regSdt2: '',
+  bankl:'',
+  bankn:'',
+  page: 1,
+  row: 10,
+  flexColumn: [
+    { key: 'btext', label: '이름'},
+    { key: 'bname', label: '사원번호'},
+    { key: 'posit', label: '부서'},
+    { key: 'lineclsf', label: '담당'},
+    { key: 'wkfst', label: '결재요청'},
+  ],
+  apprList:[],
+  modalColumn: [],
+})
+const formattedNumber = ref(0)
+
+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 createChit = async () => {
+  let res = null
+  try{
+    loading.value = true
+    const createParams = {
+      contNo : params.contNo,
+      bldat : '20250602',//params.regSdt.replace("-",""),
+      budat : '20250602',//params.regSdt2.replace("-",""),
+      waers : currencyCode.value,
+      bktxt : params.title,
+      lifnr : params.regNm,
+      wrbtr : formattedNumber.value, //수정필요
+      mwskz : taxCode.value,
+      gsber : affiliationCode.value, //무슨 값인지 모름 gsber bukrs bupla
+      bupla : affiliationCode.value,
+      zterm : '', //어떤 값인지 모름
+      banks : '' , //어떤 값인지 모름
+      bankl : params.bankl,
+      bankn : params.bankn,
+      hkont : '',//G/L 계정
+      wrbtrS : formattedNumber.value,
+      kostl : selectCostCode.value,
+      projk : selectCostCode.value,
+      trtGubun : '',//어떤 값인지 모름
+      txBillSeq : '',//어떤 값인지 모름
+      slipAtts: '' // 파일 업로드
+    }
+    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
+  }
+}
+</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.title"
+                      class="input custom-text-filter"
+                      placeholder="계약명"
+                    >
+                  </VControl>
+                </VField>
+              </td>
+            </tr>
+            <tr>
+              <td>계약상대자</td>
+              <td colspan="2">
+                <VField>
+                  <VControl>
+                    <input
+                      v-model="params.regNm"
+                      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.title"
+                      class="input custom-text-filter"
+                      placeholder="코드"
+                    >
+                  </VControl>
+                </VField>
+              </td>
+              <td colspan="4"></td>
+            </tr>
+            <tr>
+              <td>첨부파일</td>
+              <td colspan="1">
+                <VButton color="info">
+                  등록
+                </VButton>
+              </td>
+              <td colspan="5">
+                <div>('준공보고서' 또는 '검수보고서' 등)</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="bottom-button">
+          <VButton @click="createChit">대금지급중</VButton>
+          <VButton @click="cancel">취 소</VButton>
+        </div>
+        <VTabs
+            type="boxed"
+            selected="team"
+            :tabs="[
+                { label: '결재', value:'team' }, //todo 이 데이터를 동적으로 들고와야 한다..
+              ]"
+        >
+          <template #tab="{ activeValue }">
+            <p v-if="activeValue === 'team'">
+              <ComVFlexTable
+                  :data="params.apprList"
+                  :columns="params.flexColumn"
+                  :compact="true">
+                <template #body-cell="{ row, column, index, value }">
+                    <span v-if="column.key=='lineclsf'" class="column">
+                      <VField class="pr-1">
+                        <VCodeSelect
+                            disabled="true"
+                            cd_grp=9
+                            v-model="row.lineclsf"
+                        />
+                        <!--                   :disabled="index === 0"-->
+                      </VField>
+                    </span>
+                  <span v-if="column.key=='wkfst'" class="column">
+                      <VField class="pr-1">
+                        <VCodeSelect
+                            disabled="true"
+                            cd_grp=8
+                            v-model="row.wkfst"
+                        />
+                        <!--                   :disabled="index === 0"-->
+                      </VField>
+                    </span>
+                </template>
+              </ComVFlexTable>
+            </p>
+          </template>
+        </VTabs>
+      </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>
diff --git a/src/service/slipApi.ts b/src/service/slipApi.ts
index e98e852..2f49f9d 100644
--- a/src/service/slipApi.ts
+++ b/src/service/slipApi.ts
@@ -23,6 +23,30 @@ export async function saveTempSlip(params = {}) {
     }
 }
 
+/**
+ * 전표 상세 조회(대금지급전)
+ * @property {string} params.contNo -계약번호
+ *  * @returns
+ *  * @param contNo
+ *  */
+export async function getBeforeSlipDetail(contNo: string) {
+    try {
+        const result = await axios.get(`/api/slip/${contNo}`)
+        return result.data
+    } catch (e) {
+        const serverError = e.response?.data;
+
+        const message = typeof serverError?.body === 'string'
+            ? serverError.body
+            : 'Unknown error occurred';
+
+        const error = new Error(message); // ✅ 반드시 string만 넣기! 아니면 객체가 문자열로 나옴
+        error.code = serverError?.code;
+        error.errTime = serverError?.errTime;
+        throw error;
+    }
+}
+
 /**
  * 임시전표 삭제
  * @property {string} params.contNo -계약번호
@@ -48,14 +72,14 @@ export async function deleteSlipDetail(contNo: string) {
 }
 
 /**
- * 전표 상세 조회
- * * @property {string} params.contNo -계약번호
+ * 전표 상세 조회(대금지급중)
+ * @property {string} params.contNo -계약번호
  *  * @returns
  *  * @param contNo
  *  */
 export async function getSlipDetail(contNo: string) {
     try {
-        const result = await axios.get(`/api/slip/page/${contNo}`)
+        const result = await axios.get(`/api/slip/detail/${contNo}`)
         return result.data
     } catch (e) {
         const serverError = e.response?.data;
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 39183d7..e246e8f 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -25,4 +25,15 @@ export interface iPbAtt {
     size: number
     data: string
     path: string
+}
+
+export interface ApprsList{
+    abscd: string
+    bname: string
+    btext: string
+    lineclsf: string
+    posit: string
+    wkfid: string
+    wkfsq: number
+    wkfst: string
 }
\ No newline at end of file
diff --git a/types/router.d.ts b/types/router.d.ts
index 6dd973f..cb8fa20 100644
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -29,6 +29,7 @@ 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/DocumentManagement': RouteRecordInfo<'/app/DocumentManagement', '/app/DocumentManagement', Record<never, never>, Record<never, never>>,
+    '/app/documentManagementDetail': RouteRecordInfo<'/app/documentManagementDetail', '/app/documentManagementDetail', 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>>,