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="content management">
<div class="sub-title-area mb-30">
<h2>회원관리</h2>
<div class="breadcrumb-list">
<ul>
<li><img :src="homeicon" alt="Home Icon">
<p>회원관리</p>
</li>
<li><img :src="righticon" alt=""></li>
<li>회원관리</li>
</ul>
</div>
</div>
<div class="flex-sp-bw">
<div class="left-con">
<div class="search-wrap mb-20">
<div class="search-area">
<div class="select-box">
<select name="" id="">
<option value="all" selected>전체</option>
<option value="id">아이디</option>
<option value="name">이름</option>
</select>
</div>
<div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
<button class="search-btn"><img :src="searchicon" alt=""></button>
</div>
</div>
<table class="mb-10">
<thead>
<tr>
<th>아이디</th>
<th>이름</th>
<th>권한</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="index" :class="{ 'delete-member': item.delete }">
<!-- Category 칼럼 -->
<td>
{{ item.id }}
</td>
<!-- Checkbox 칼럼 -->
<td>
{{ item.name }}
</td>
<td>
{{ item.gownhan }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="righi-con wfull">
<div class="btn-group-small flex-end mb-20">
<div class="button green-line">복구</div>
<div class="button red-line">회원탈퇴</div>
<div class="button gray-line">비밀번호 초기화</div>
<div class="button pink-line-bg flex align-center"><img :src="check_pink" alt="">
<p>신규등록</p>
</div>
<div class="button blue-line-bg flex align-center"><img :src="check_blue" alt="">
<p>등록</p>
</div>
<div class="button gray-bg">취소</div>
</div>
<form action="" class="insert-form mb-50">
<dl>
<dd>
<label for="id" class="require">아이디</label>
<input type="text" id="id" value="admin" readonly>
</dd>
<div class="hr"></div>
<dd>
<label for="pw" class="require">비밀번호</label><input type="text" id="pw" value="">
<div class="invalid-feedback border">
<img :src="erroricon" alt="">
<span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span>
</div>
</dd>
<div class="hr"></div>
<dd>
<label for="pwcheck" class="require">비밀번호 확인</label>
<input type="text" id="pwcheck" value="">
<div class="invalid-feedback border">
<img :src="erroricon" alt="">
<span>비밀번호가 일치하지 않습니다.</span>
</div>
</dd>
<div class="hr"></div>
<dd>
<label for="name" class="require">이름</label>
<input type="text" id="name" value="관리자" readonly>
</dd>
<div class="hr"></div>
<dd>
<label for="gwonhan" class="require">권한</label>
<div class="select-box">
<select>
<option selected>관리자</option>
<option></option>
<option></option>
</select>
</div>
</dd>
<div class="hr"></div>
<dd>
<label for="use" class="require">사용여부</label>
<div class="switch">
<input type="checkbox" id="switch" />
<label for="switch">Toggle</label>
</div>
</dd>
</dl>
</form>
</div>
</div>
</div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
export default {
components: {
DoubleLeftOutlined,
LeftOutlined,
RightOutlined,
DoubleRightOutlined,
},
data() {
return {
items: [
{ id: 'user1', name: '카테고리 1', gownhan: '관리자', delete: false },
{ id: 'user2', name: '카테고리 2', gownhan: '사용자', delete: false },
{ id: 'user3', name: '카테고리 3', gownhan: '사용자', delete: true },
],
isModalOpen: false,
// Define the image sources
homeicon: 'client/resources/images/icon/home.png',
erroricon: 'client/resources/images/icon/error.png',
righticon: 'client/resources/images/icon/right.png',
check_pink: 'client/resources/images/checkbox_pink.png',
check_blue: 'client/resources/images/checkbox_blue.png',
searchicon: 'client/resources/images/icon/search.png',
fileNames: [],
selectedCategories: [],
};
},
computed: {
filteredItems() {
// This could be modified to support filtering based on searchQuery
return this.items.filter(item =>
item.id.includes(this.searchQuery)
);
}
},
methods: {
}
};
</script>