oa/src/pages/app/documentManagementDetail.vue

<script setup lang="ts">

import {getSlipDetail, saveTempSlip} from "/@src/service/slipApi.ts";
import {formatDatefromStringDate} from "/@src/utils/common/comfunc.ts";
import {VTabsItem} from "/@src/components/app-vuero/VCustomTabs.vue";
import {sapApprConveterNo} from "/@src/service/sapApprovalApi.ts";


const props = defineProps<{apprNo : string}>();
console.log(props)

onBeforeMount(async ()=>{

  let result;
  if(history.state.key){
    result = await getSlipDetail(history.state.key)
  }else if(props.apprNo){
    const sapApprNo = await sapApprConveterNo(props.apprNo)
    result = await getSlipDetail(sapApprNo.data.contNo)
  }
  getDetailList(result)
  apprLine.value = result.zwf0011t.apprs
  selectedTab.value = apprLine.value[0].value
})

const notyf = useNotyf()
const apprLine = ref<VTabsItem[]>([])
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
  console.log(params.apprList)
}

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: 'lineclsf', label: '구분', value: {} },
    { key: 'bname', label: '사원번호', value: {} },
    { key: 'btext', label: '이름', value: {} },
    { key: 'abscd', label: '근태관리', value: {} },
  ],
  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 selectedTab = ref<VTabsItem[]>()

const addTabFromRow = (row,index) => {
  console.log(row)
  console.log(index)
}
</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>
                  <span>{{affiliationCode}}</span>
                </VField>
              </td>
              <td colspan="7" />
            </tr>
            <tr>
              <td>계약명</td>
              <td colspan="9">
                <VField>
                  <span>{{params.title}}</span>
                </VField>
              </td>
            </tr>
            <tr>
              <td>계약상대자</td>
              <td colspan="1" style="text-align: left">
                <VField>
                  <span>{{params.regNm}}</span>
                </VField>
              </td>
              <td colspan="2">
                <VField>
                  <span>업체명 : {{params.place}}</span>
                </VField>
              </td>
              <td></td>
              <td colspan="2">
                <VButton color="danger" disabled>
                  구매처 확인
                </VButton>
              </td>
              <td>
                <VButton color="success" disabled>
                  정상
                </VButton>
              </td>
              <td colspan="2" />
            </tr>
            <tr>
              <td>공급가액</td>
              <td colspan="2">
                <VField>
                  <span>{{formattedNumber}}</span>
                </VField>
              </td>
              <td style="color: black">(부가세 별도)</td>
              <td style="background-color: var(--primary); text-align: center">
                <span>세금코드</span>
              </td>
              <td colspan="2">
                <VField>
                  <span>{{taxCode}}</span>
                </VField>
              </td>
              <td style="background-color: var(--primary); text-align: center">통화</td>
              <td colspan="2">
                <VField>
                  <span>{{currencyCode}}</span>
                </VField>
              </td>
            </tr>
            <tr>
              <td>증빙일</td>
              <td colspan="2">
                <VField>
                  <span>{{ params.regSdt }}</span>
                </VField>
              </td>
              <td />
              <td style="background-color: var(--primary); text-align: center">
                <span>전기일</span>
              </td>
              <td colspan="5">
                <VField>
                  <span>{{ params.regSdt2 }}</span>
                </VField>
              </td>
            </tr>
            <tr>
              <td>계좌관리</td>
              <td>
                <VField>
                  <span>{{params.bankl}}</span>
                </VField>
              </td>
              <td colspan="2">
                <VField>
                  <span>{{params.bankn}}</span>
                </VField>
              </td>
              <td colspan="2">
                <VButton color="info" disabled>
                  계좌조회
                </VButton>
              </td>
              <td>
                <VButton color="success" disabled>
                  정상
                </VButton>
              </td>
              <td style="background-color: var(--primary); text-align: center">
                <span>세금계산서</span>
              </td>
              <td colspan="2">
                <VField>
                  <span>{{taxInvoiceCode}}</span>
                </VField>
              </td>
            </tr>
            <tr>
              <td>예산관리</td>
              <td>
                <VButton
                  color="primary"
                  @click="centeredActionsOpen = true"
                  disabled
                >
                  G/L계정// 설정필요
                </VButton>
              </td>
              <td colspan="2">
                <VField>
                  <span>{{accountSubjectCode}}</span>
                </VField>
              </td>
              <td>
                <VField>
                  <span>코스트센터/WBS{{selectCostCode}}</span>
                </VField>
              </td>
              <td colspan="2">
                <VField>
                  <span>코스트센터/WBS코드예정</span>
                </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="cancel">취 소</VButton>
        </div>
        <VCustomTabs
            type="boxed"
            v-model:selected="selectedTab"
            :tabs="params.apprList">
          <template #tab-link-label="{ tab }">
            {{ tab.label }}
          </template>
          <template #tab="{ activeValue }">
            <div>
              <ComVFlexTable
                  :data="activeValue? activeValue : []"
                  :columns="params.flexColumn"
                  :compact="true"
                  @rowClick="addTabFromRow"
              >
                <template #body-cell="{row, column}">
                  {{ row[column.key] }}
                </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 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;
}
.button[disabled], fieldset[disabled] .button {
  opacity: 1.0;
}

</style>