oa/src/pages/app/contractManagement.vue

<script setup lang="ts">
import {getContractList} from "/src/service/contractApi";
import regex, {formatCurrency} from "/@src/utils/common/regex.ts";

const emits = defineEmits(['on-search', 'on-tr-click'])
const selUser = ref()
const masks = ref({
  modelValue: 'YYYY-MM-DD',
})
const router = useRouter()

const selectedCode = ref()

watch(selUser, (value) => {
  console.log(value)
})

const data = reactive({
  contractData: [],
  priceData: [],
})

onBeforeMount(async () => {
  await getContractListView()
  const userSession = useUserSession()
  params.sessionUser = userSession.user.data
})

async function getContractListView() {
  const approvalParams = {
    params:{
      title: '',
      page: '1',
      row: '10'
    }
  }
  const result = await getContractList(approvalParams)
  data.contractData = result
  console.log('result', result)
}

const params = reactive({
  sessionUser:'',
  flexColumn: [
    { key: 'cateNm', label: '분야' },
    { key: 'title', label: '계약명' },
    { key: 'compNm', label: '계약상대자' },
    { key: 'regNm', label: '담당자' },
    { key: 'contAmt', label: '계약금액', format: formatCurrency },
    { key: 'contNo', label: '계약번호' },
    { key: 'signDt', label: '계약체결일' },
    { key: 'charge', label: '대금청구' },
    { key: 'contStat', label: '계약상태' },
  ],
})

function getContractDetail(){
  //contStatCd 결재상태 코드 [계약전:0000, 계약종료:0100, ]
  if(params.sessionUser.sabun == arguments[0].regSabun && arguments[0].contStatCd == '0000'){
    router.push({ path: '/app/contractUpdate', state: { key: arguments[0].contNo}})
  }else{
    router.push({ path: '/app/contractDetail', state: { key: arguments[0].contNo }})
  }
}
</script>

<template>
  <div class="page-content is-navbar-lg">
    <div>
      <div class="datatable-toolbar">
        <div class="column is-2">
          <!--        <VUserList v-model="selUser"/>-->
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              분야
            </VLabel>
            <VCodeSelect
              cd_grp=5
              v-model="selectedCode"/>
          </VField>
        </div>
        <div class="column is-2">
          <!--        <VUserList v-model="selUser"/>-->
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              계약번호
            </VLabel>
            <VControl>
              <input
                v-model="params.title"
                class="input custom-text-filter"
                placeholder="계약번호"
              >
            </VControl>
          </VField>
        </div>
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              담당자
            </VLabel>
            <VControl>
              <input
                v-model="params.regNm"
                class="input custom-text-filter"
                placeholder="담당자명"
              >
            </VControl>
          </VField>
        </div>
        <div class="column is-5">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              계약일
            </VLabel>
            <VControl>
              <div class="columns">
                <div class="column is-6">
                  <VDatePicker
                    v-model="params.regSdt"
                    color="green"
                    :masks="masks"
                    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>
                <div style="transform: translateY(15px)">
                  ~
                </div>
                <div class="column is-6">
                  <VDatePicker
                    v-model="params.regEdt"
                    color="green"
                    :masks="masks"
                    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>
              </div>
            </VControl>
          </VField>
        </div>
        <div class="column is-2" style="position:relative;">
          <div style="margin-top: 1.8rem">
            <VButtons>
              <VButton
                color="primary"
                elevated
                icon="fas fa-search"
                @click.stop="emits('on-search', params)"
              >
                검색
              </VButton>
            </VButtons>
          </div>
        </div>
      </div>
      <div class="datatable-wrapper">
        <ComVFlexTable
          :data="data.contractData"
          :columns="params.flexColumn"
          :separators="true"
          :clickable="true"
          :rounded="true"
          :compact="true"
          @rowClick="getContractDetail"
        />
      </div>
    </div>
    <VButtons class="is-right">
      <VButton
          class=""
        color="primary"
        icon="fas fa-plus"
        elevated
        to="/app/ContractInsert"
        style="margin-top: 20px"
      >
        등록
      </VButton>
    </VButtons>
  </div>
</template>

<style scoped lang="scss">
.datatable-toolbar {
  padding: 1rem 1.5rem;
  margin: 0 0 2rem 0;
}

.flex-table .flex-table-item {
  min-height: 3rem;
}

</style>