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>