feat: 통합 세력 장수/암행부 페이지 (#213)

- ag-grid 기반
- 컬럼 사용자 정의 기능 제공
  - 컬럼 재정렬, 고정, 정렬 기능
  - 컬럼 상태 저장, 불러오기
  - 마지막 컬럼 재 사용
- 아이콘, 장수명 클릭 시 특수 기능 제공
  - 기본 세력 장수/암행부에서는 '감찰부'
- 추가 컬럼
  - 최근 전투
  - 전투 수
  - 승리 수
  - 살상률
- API/Nation/GeneralList 추가

Co-authored-by: hide_d <hided62@gmail.com>
Reviewed-on: https://storage.hided.net/gitea/devsam/core/pulls/213
This commit is contained in:
2022-04-08 02:28:58 +09:00
parent c96f6d9381
commit a95b26551c
32 changed files with 3137 additions and 381 deletions
+29 -12
View File
@@ -1,21 +1,24 @@
<template>
<div class="bg0 back_bar">
<div :class="['bg0', 'back_bar', teleportZone?'back_bar_teleport':undefined]">
<button type="button" class="btn btn-sammo-base2 back_btn" @click="back">돌아가기</button
><button v-if="reloadable" type="button" class="btn btn-sammo-base2 reload_btn" @click="reload">갱신</button>
<div v-else />
<h2 class="title">
{{ title }}
</h2>
<div>&nbsp;</div>
<b-button
v-if="toggleSearch !== undefined"
class="btn-toggle-zoom"
:variant="toggleSearch ? 'info' : 'secondary'"
:pressed="toggleSearch"
@click="toggleSearch = !toggleSearch"
>
{{ toggleSearch ? "검색 켜짐" : "검색 꺼짐" }}
</b-button>
<div v-if="teleportZone" :id="teleportZone" class="teleport-zone"></div>
<template v-else>
<div>&nbsp;</div>
<b-button
v-if="toggleSearch !== undefined"
class="btn-toggle-zoom"
:variant="toggleSearch ? 'info' : 'secondary'"
:pressed="toggleSearch"
@click="toggleSearch = !toggleSearch"
>
{{ toggleSearch ? "검색 켜짐" : "검색 꺼짐" }}
</b-button>
</template>
</div>
</template>
@@ -41,6 +44,11 @@ const props = defineProps({
default: undefined,
required: false,
},
teleportZone: {
type: String,
default: undefined,
required: false,
},
});
const emit = defineEmits(["update:searchable", "reload"]);
@@ -72,16 +80,24 @@ function reload() {
width: 100%;
margin: auto;
display: grid;
grid-template-columns: 80px 80px 1fr 80px 80px;
grid-template-columns: 90px 90px 1fr 90px 90px;
position: relative;
height: 24pt;
}
.back_bar.back_bar_teleport {
grid-template-columns: 90px 90px 1fr 180px;
}
.reload_btn {
height: 24pt;
margin-right: 2px;
}
.teleport-zone{
height: 24pt;
}
.back_btn {
height: 24pt;
margin-right: 2px;
@@ -89,6 +105,7 @@ function reload() {
.btn-toggle-zoom {
height: 24pt;
position: relative;
}
.title {