mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-19 21:15:11 +09:00
300 lines
9.3 KiB
Vue
300 lines
9.3 KiB
Vue
<script setup lang="ts">
|
|
import { getPriceList } from '/@src/service/priceApi'
|
|
import { formatDatefromString } from '/@src/utils/common/comfunc'
|
|
const router = useRouter()
|
|
|
|
onBeforeMount(async () => {
|
|
await getPriceListData()
|
|
const userSession = useUserSession()
|
|
params.sessionUser = userSession.user.data
|
|
})
|
|
|
|
const masks = ref({
|
|
modelValue: 'YYYY-MM-DD',
|
|
})
|
|
|
|
const totalItems = ref(0) // 전체 아이템 수
|
|
const currentPage = ref<number>(1) // 현재 페이지
|
|
const itemsPerPage = 8
|
|
const totalPages = ref(1)
|
|
|
|
const searchParamsList = reactive({
|
|
cateCd : '', //분야코드
|
|
stCd : '', //등록상태
|
|
regNm : '', //담당자
|
|
regSdt: '',//등록시작일
|
|
regEdt: '',//등록종료일
|
|
})
|
|
const params = reactive({
|
|
sessionUser:'',
|
|
priceData: [],
|
|
felxColumn: [
|
|
{ key: 'cateNm', label: '분야', align: 'center', cellClass: 'approvalColumn1'},
|
|
{ key: 'title', label: '제목',align: 'start', cellClass: 'approvalColumn6'},
|
|
{ key: 'regNm', label: '담당자', align: 'center', cellClass: 'approvalColumn1'},
|
|
{ key: 'regDt', label: '등록일' ,align: 'center', cellClass: 'approvalColumn1'},
|
|
{ key: 'stNm', label: '등록 상태',align: 'center', cellClass: 'approvalColumn1' },
|
|
]
|
|
})
|
|
|
|
async function getPriceListData(){
|
|
const priceBase = {
|
|
params:{
|
|
regSdt: formatDatefromString(searchParamsList.regSdt),
|
|
regEdt: formatDatefromString(searchParamsList.regEdt),
|
|
page: 1,
|
|
row: itemsPerPage //todo 혹시 1페이지가 8개 보다 갯수가 적을수 있다. 30일 동안
|
|
}
|
|
}
|
|
const result = await getPriceList(priceBase)
|
|
console.log("result.content",result.content)
|
|
params.priceData = result.content
|
|
console.log("result",result)
|
|
//페이지 관련 값 설정
|
|
totalItems.value = result.totalElements
|
|
totalPages.value = result.totalPages
|
|
}
|
|
|
|
const searchPrice = async (item) => {
|
|
|
|
let itemPerChangePage;
|
|
if(item == totalPages.value){
|
|
const remain = totalItems.value % itemsPerPage
|
|
itemPerChangePage = remain === 0? itemsPerPage : remain
|
|
}else{
|
|
itemPerChangePage = itemsPerPage
|
|
}
|
|
|
|
const searchParams = {
|
|
params: {
|
|
cateCd : searchParamsList.cateCd, //분야코드
|
|
stCd : searchParamsList.stCd, //등록상태
|
|
regNm : searchParamsList.regNm, //담당자
|
|
regSdt: formatDatefromString(searchParamsList.regSdt),//등록시작일
|
|
regEdt: formatDatefromString(searchParamsList.regEdt),//등록종료일
|
|
page: item,//페이지
|
|
row: itemPerChangePage //아이템갯수
|
|
}
|
|
}
|
|
const result = await getPriceList(searchParams)
|
|
params.priceData = result.content
|
|
totalItems.value = result.totalElements
|
|
totalPages.value = result.totalPages
|
|
}
|
|
|
|
function getPriceDetail(){
|
|
//stCd 결재상태 코드 [등록전:0000, 등록중:0100, ]
|
|
if(params.sessionUser.sabun == arguments[0].regSabun && arguments[0].stCd == '0000'){
|
|
router.push({ path: '/app/priceUpdate', state: { key: arguments[0].prcsNo }})
|
|
}else{
|
|
router.push({ path: '/app/priceDetail', state: { key: arguments[0].prcsNo }})
|
|
}
|
|
}
|
|
|
|
const getSliceTitle = (value) => {
|
|
return value.length > 50 ? value.slice(0, 50) + "....." : value
|
|
}
|
|
|
|
watch(currentPage, (newParams) => {
|
|
currentPage.value = newParams
|
|
searchPrice(currentPage.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-content is-navbar-lg">
|
|
<div>
|
|
<div class="datatable-toolbar">
|
|
<div class="column is-2">
|
|
<VField class="pr-2">
|
|
<VLabel class="has-fullwidth">
|
|
분야
|
|
</VLabel>
|
|
<VCodeSelect
|
|
cd_grp=5
|
|
v-model="searchParamsList.cateCd"
|
|
placeholder="전체"/>
|
|
</VField>
|
|
</div>
|
|
<div class="column is-2">
|
|
<VField class="pr-2">
|
|
<VLabel class="has-fullwidth">
|
|
등록상태
|
|
</VLabel>
|
|
<VCodeSelect
|
|
cd_grp=1
|
|
v-model="searchParamsList.stCd"
|
|
placeholder="전체"/>
|
|
</VField>
|
|
</div>
|
|
<div class="column is-2">
|
|
<VField class="pr-2">
|
|
<VLabel class="has-fullwidth">
|
|
담당자
|
|
</VLabel>
|
|
<VControl>
|
|
<input
|
|
v-model="searchParamsList.regNm"
|
|
class="input custom-text-filter"
|
|
placeholder="담당자"
|
|
@keydown.enter="searchPrice(1)"
|
|
>
|
|
</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.string="searchParamsList.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"
|
|
v-on="inputEvents"
|
|
placeholder="시작일"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
</VDatePicker>
|
|
</div>
|
|
<div style="transform: translateY(15px)">~</div>
|
|
<div class="column is-6">
|
|
<VDatePicker
|
|
v-model.string="searchParamsList.regEdt"
|
|
color="green"
|
|
:masks="masks"
|
|
trim-weeks
|
|
:minDate="searchParamsList.regSdt"
|
|
>
|
|
<template #default="{ inputValue, inputEvents }">
|
|
<VField>
|
|
<VControl icon="lucide:calendar">
|
|
<input
|
|
class="input v-input"
|
|
type="text"
|
|
:value="inputValue"
|
|
v-on="inputEvents"
|
|
placeholder="종료일"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
</VDatePicker>
|
|
</div>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
</div>
|
|
<div class="column is-1">
|
|
<div style="padding-top:20px;float:right;">
|
|
<VButtons>
|
|
<VButton
|
|
color="primary"
|
|
elevated
|
|
icon="fas fa-search"
|
|
@click.stop="searchPrice(1)"
|
|
>
|
|
검색
|
|
</VButton>
|
|
</VButtons>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="datatable-wrapper">
|
|
<ComVFlexTable
|
|
:data="params.priceData"
|
|
:columns="params.felxColumn"
|
|
:separators="true"
|
|
:clickable="true"
|
|
:compact="true"
|
|
:useApprovalHeader="true"
|
|
@rowClick="getPriceDetail"
|
|
>
|
|
<template #body-cell="{ row, column, index, value }">
|
|
<span
|
|
v-if="column.key === 'title'"
|
|
v-tooltip="value"
|
|
style="font-size: inherit; border: none;"
|
|
>
|
|
{{ getSliceTitle(value) }}
|
|
</span>
|
|
<span v-else>{{value}}</span>
|
|
</template>
|
|
</ComVFlexTable>
|
|
<VPlaceholderPage
|
|
v-if="params.priceData.length === 0"
|
|
larger
|
|
subtitle="입력하신 검색어와 일치하는 결과를 찾을 수 없습니다.
|
|
다른 검색어나 조건으로 조회해 보세요."
|
|
title="일치하는 결과를 찾을 수 없습니다."
|
|
>
|
|
<!-- <template #image>-->
|
|
<!-- <img-->
|
|
<!-- alt=""-->
|
|
<!-- class="light-image"-->
|
|
<!-- src="/images/illustrations/placeholders/search-7.svg"-->
|
|
<!-- >-->
|
|
<!-- <img-->
|
|
<!-- alt=""-->
|
|
<!-- class="dark-image"-->
|
|
<!-- src="/images/illustrations/placeholders/search-7-dark.svg"-->
|
|
<!-- >-->
|
|
<!-- </template>-->
|
|
</VPlaceholderPage>
|
|
</div>
|
|
</div>
|
|
<VButtons class="v-buttons-right-align">
|
|
<VButton
|
|
color="primary"
|
|
icon="fas fa-plus"
|
|
elevated
|
|
to="/app/PriceInsert"
|
|
>
|
|
등록
|
|
</VButton>
|
|
</VButtons>
|
|
<VFlexPagination
|
|
:item-per-page="itemsPerPage"
|
|
:total-items="totalItems"
|
|
v-model:current-page="currentPage"
|
|
/>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.datatable-toolbar {
|
|
padding: 1rem 1.5rem;
|
|
margin: 0 0 2rem 0;
|
|
}
|
|
|
|
.flex-table .flex-table-header {
|
|
min-height: 3rem;
|
|
}
|
|
|
|
.v-buttons-right-align {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 1rem; // 필요 시 간격 추가
|
|
}
|
|
|
|
.custom-vtag {
|
|
font-size: inherit !important; /* 부모 폰트 크기를 그대로 상속 */
|
|
vertical-align: baseline; /* 정렬이 어긋날 경우 */
|
|
}
|
|
</style>
|