File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="popup-overlay" @click.self="$emit('close')">
<div class="popup-content">
<div class="card">
<div class="card-body">
<h2 class="card-title">법인카드 목록</h2>
<div class="sch-form-wrap">
<div class="input-group">
<div class="sch-input">
<input type="text" class="form-control" v-model="request.searchText" @keyup.enter="fnChangeCurrentPage(1)">
<button class="ico-sch" @click="fnChangeCurrentPage(1)">
<SearchOutlined />
</button>
</div>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>카드명</th>
<th>선택</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in items" :key="idx">
<td>{{ item.cardNm }}</td>
<td>
<button type="button" class="btn sm sm secondary" @click="selectCard(item)" :disabled="isSelected(item.cardId)">선택</button>
</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="request" @onChange="fnChangeCurrentPage" />
</div>
</div>
<button @click="$emit('close')" class="close-btn">
<CloseCircleFilled />
</button>
</div>
</div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import Pagination from '../Pagination.vue';
// API
import { findAllAsSetCard } from '../../../resources/api/asset'
export default {
components: {
SearchOutlined, CloseCircleFilled,
Pagination,
},
props: {
editData: {
type: Object,
default: () => ({}),
},
lists: {
type: Array,
default: () => [],
}
},
data() {
return {
items: [],
request: {
searchType: "vm", // 검색조건 ( all: 전체, vm: 차량명, vn: 차량 번호 )
searchText: null, // 검색어
useAt: null, // 사용여부 ( N: 미사용, Y: 사용 )
selectedCardIds: null, // 선택된 카드 Id
bgnde: null, // 시작 일
beginHour: null, // 시작 시
beginMnt: null, // 시작 분
endde: null, // 종료 일
endHour: null, // 종료 시
endMnt: null, // 종료 분
},
}
},
computed: {
selectedIds() {
return new Set(this.lists.map(item => item.cardId));
}
},
watch: {
editData: {
handler(newVal) {
if (newVal) {
this.request.bgnde = newVal.bgnde;
this.request.beginHour = newVal.beginHour;
this.request.beginMnt = newVal.beginMnt;
this.request.endde = newVal.endde;
this.request.endHour = newVal.endHour;
this.request.endMnt = newVal.endMnt;
this.findDatas();
}
},
deep: true,
immediate: true
}
},
mounted() {
this.findDatas();
},
methods: {
// 목록 조회
async findDatas() {
try {
const response = await findAllAsSetCard(this.request);
const result = response.data.data;
this.items = result.card;
this.request = result.search;
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
}
},
// 카드 검증
isSelected(id) {
return this.selectedIds.has(id);
},
// 카드 선택
selectCard(item) {
this.$emit('onSelected', item);
},
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.request.currentPage = Number(currentPage);
this.$nextTick(() => {
this.findDatas();
});
},
}
}
</script>
<style scoped>
.popup-content {
width: 50%;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>