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
File name
Commit message
Commit date
<template>
<div class="card ">
<div class="card-body ">
<h2 class="card-title">접근제어관리</h2>
<div class="flex align-top">
<div class="sch-form-wrap search">
<div class="tbl-wrap table-scroll">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>권한목록 </th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 100%;">
<div class="tbl-wrap chk-area">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>메뉴명</th>
<th>전체</th>
<th>읽기</th>
<th>쓰기</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td>{{ item.menuName }}</td>
<td>
<div class="form-check">
<input
type="checkbox"
:id="`all_${index}`"
v-model="item.permissions.all"
@change="toggleAll(index)"
/>
<label :for="`all_${index}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input
type="checkbox"
:id="`read_${index}`"
v-model="item.permissions.read"
/>
<label :for="`read_${index}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input
type="checkbox"
:id="`write_${index}`"
v-model="item.permissions.write"
/>
<label :for="`write_${index}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input
type="checkbox"
:id="`edit_${index}`"
v-model="item.permissions.edit"
/>
<label :for="`edit_${index}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input
type="checkbox"
:id="`delete_${index}`"
v-model="item.permissions.delete"
/>
<label :for="`delete_${index}`"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
data() {
return {
require: "/client/resources/img/require.png",
h3icon: "/client/resources/img/h3icon.png",
photoicon: "/client/resources/img/photo_icon.png",
img1: "/client/resources/img/img.png",
icon1: "/client/resources/img/icon.png",
dateicon: "/client/resources/img/date.png",
startbtn: "/client/resources/img/start.png",
stopbtn: "/client/resources/img/stop.png",
moreicon: "/client/resources/img/more.png",
today: new Date().toLocaleDateString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
weekday: 'short',
}),
time: this.getCurrentTime(),
listData: [
{
menuName: '메뉴1',
permissions: {
all: false,
read: false,
write: false,
edit: false,
delete: false,
},
},
{
menuName: '메뉴2',
permissions: {
all: false,
read: false,
write: false,
edit: false,
delete: false,
},
},
]
}
},
components: {
SearchOutlined
},
methods: {
toggleAll(index) {
const all = this.listData[index].permissions.all;
this.listData[index].permissions.read = all;
this.listData[index].permissions.write = all;
this.listData[index].permissions.edit = all;
this.listData[index].permissions.delete = all;
},
formatBudget(amount) {
return new Intl.NumberFormat().format(amount) + ' 원';
},
isPastPeriod(period) {
// 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
const endDateStr = period.split('~')[1]?.trim();
if (!endDateStr) return false;
const endDate = new Date(endDateStr);
const today = new Date();
// 현재 날짜보다 과거면 true
return endDate < today;
},
getStatusClass(status) {
return status === 'active' ? 'status-active' : 'status-inactive';
},
getStatusClass(status) {
if (status === '미진행') return 'status-pending';
if (status === '진행중') return 'status-approved';
// Default empty string
return '';
},
getCurrentTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
},
getCategoryClass(category) {
switch (category) {
case '용역': return 'category-service';
case '내부': return 'category-internal';
case '국가과제': return 'category-government';
default: return '';
}
},
},
watch: {
},
computed: {
},
mounted() {
console.log('main mounted');
setInterval(() => {
this.time = this.getCurrentTime();
}, 1000);
}
}
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>