parent
4686379184
commit
8114ca58c5
@ -1,3 +1,3 @@
|
||||
NODE_ENV = "development"
|
||||
VITE_APP_API_SERVER_URL = "http://localhost:80"
|
||||
VITE_APP_API_SERVER_URL = "http://localhost:8080"
|
||||
VITE_ROOT_PATH = ""
|
||||
@ -0,0 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
import IconArrowDown from "@/components/atoms/button/IconArrowDown.vue";
|
||||
import IconArrowUp from "@/components/atoms/button/IconArrowUp.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
import { computed, onBeforeUnmount, onMounted, watch, ref } from "vue";
|
||||
import { DataGroupService } from "@/components/service/management/DataGroupService";
|
||||
import { storage } from "@/utils/storage";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useAutoflowStore } from "@/stores/autoflowStore";
|
||||
|
||||
const { projectId } = storeToRefs(useAutoflowStore());
|
||||
|
||||
const props = defineProps<{ editData: any; mode: "create" | "edit" }>();
|
||||
const emit = defineEmits<{
|
||||
(e: "close-modal"): void;
|
||||
(e: "saved", v: any): void;
|
||||
}>();
|
||||
|
||||
const isEdit = computed(() => props.mode === "edit");
|
||||
|
||||
const saving = ref(false);
|
||||
const errorMsg = ref("");
|
||||
|
||||
const form = ref({ name: "", description: "" });
|
||||
|
||||
// 편집 데이터 → 폼
|
||||
function hydrateFormFromEdit(data: any) {
|
||||
if (!data) return;
|
||||
form.value.name = data.workflowName ?? data.dsNm ?? data.name ?? "";
|
||||
form.value.description =
|
||||
data.workflowDescription ?? data.dsDesc ?? data.description ?? "";
|
||||
}
|
||||
onMounted(() => {
|
||||
if (isEdit.value) hydrateFormFromEdit(props.editData);
|
||||
});
|
||||
watch(
|
||||
() => props.editData,
|
||||
(v) => {
|
||||
if (isEdit.value) hydrateFormFromEdit(v);
|
||||
},
|
||||
);
|
||||
|
||||
// 유저/프로젝트
|
||||
function getAuthUser() {
|
||||
const authObj =
|
||||
(typeof storage?.getAuth === "function" ? storage.getAuth() : null) ??
|
||||
JSON.parse(localStorage.getItem("autoflow-auth") || "{}");
|
||||
const ui = authObj?.userInfo ?? authObj?.userinfo ?? authObj ?? {};
|
||||
return { id: Number(ui.id), username: String(ui.username ?? "").trim() };
|
||||
}
|
||||
|
||||
function cleanUndefined<T extends Record<string, any>>(obj: T): T {
|
||||
return Object.fromEntries(
|
||||
Object.entries(obj).filter(([, v]) => v !== undefined),
|
||||
) as T;
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
errorMsg.value = "";
|
||||
|
||||
const name = (form.value.name ?? "").trim(); // ← 제한 없음(한글/특수문자 OK)
|
||||
if (!name) {
|
||||
errorMsg.value = "이름을 입력하세요.";
|
||||
return;
|
||||
}
|
||||
|
||||
const { id: userId, username } = getAuthUser();
|
||||
if (!userId || !username) {
|
||||
errorMsg.value = "로그인 사용자 정보를 찾을 수 없습니다.";
|
||||
return;
|
||||
}
|
||||
if (!projectId.value) {
|
||||
errorMsg.value = "프로젝트가 선택되지 않았습니다.";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
saving.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
const rawId = props.editData?.id ?? props.editData?.deviceKey;
|
||||
const id = Number(rawId);
|
||||
if (!id) {
|
||||
errorMsg.value = "수정할 ID가 없습니다.";
|
||||
return;
|
||||
}
|
||||
|
||||
const viewRes = await DataGroupService.view(id);
|
||||
const current = (viewRes?.data ?? viewRes) || {};
|
||||
|
||||
const updatePayload = {
|
||||
id,
|
||||
dsNm: name,
|
||||
dsDesc: form.value.description ?? "",
|
||||
|
||||
projectId: current.projectId,
|
||||
regUserId: current.regUserId,
|
||||
regUserNm: current.regUserNm,
|
||||
|
||||
modUserId: userId,
|
||||
modUserNm: username,
|
||||
};
|
||||
console.log(id);
|
||||
|
||||
const { data } = await DataGroupService.update(id, updatePayload);
|
||||
emit("saved", data);
|
||||
emit("close-modal");
|
||||
} else {
|
||||
const createPayload = {
|
||||
dsNm: name,
|
||||
dsDesc: form.value.description ?? "",
|
||||
regUserId: userId,
|
||||
regUserNm: username,
|
||||
projectId: projectId.value!,
|
||||
};
|
||||
const { data } = await DataGroupService.add(createPayload);
|
||||
emit("saved", data);
|
||||
emit("close-modal");
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error("데이터그룹 저장 실패:", e);
|
||||
const status = e?.response?.status;
|
||||
const raw =
|
||||
(typeof e?.response?.data === "string"
|
||||
? e?.response?.data
|
||||
: e?.response?.data?.message || e?.response?.data?.error) ||
|
||||
e?.message ||
|
||||
"";
|
||||
if (status === 409)
|
||||
errorMsg.value = "같은 이름의 데이터그룹이 이미 존재합니다.";
|
||||
else if (status === 400) errorMsg.value = "요청 형식이 올바르지 않습니다.";
|
||||
else if (status === 401 || status === 403)
|
||||
errorMsg.value = "권한이 없거나 로그인 정보가 만료되었습니다.";
|
||||
else errorMsg.value = raw || `요청 실패 (HTTP ${status ?? "Error"})`;
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onEsc(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") emit("close-modal");
|
||||
}
|
||||
onMounted(() => window.addEventListener("keydown", onEsc));
|
||||
onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title
|
||||
class="text-white font-weight-bold text-h6"
|
||||
style="background-color: #1976d2"
|
||||
>
|
||||
{{ isEdit ? "Edit DataGroup" : "Create DataGroup" }}
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<div class="text-subtitle-1 font-weight-medium mb-4">
|
||||
DataGroup Information
|
||||
</div>
|
||||
|
||||
<v-form @submit.prevent="submit">
|
||||
<!-- Name: 제한 없음 -->
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>DataGroup Name</label
|
||||
>
|
||||
<v-text-field
|
||||
v-model="form.name"
|
||||
variant="outlined"
|
||||
:disabled="saving"
|
||||
dense
|
||||
hide-details="auto"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description: 제한 없음 -->
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Description</label
|
||||
>
|
||||
<v-textarea
|
||||
v-model="form.description"
|
||||
variant="outlined"
|
||||
:disabled="saving"
|
||||
rows="3"
|
||||
dense
|
||||
hide-details="auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMsg" class="mt-3 text-error">{{ errorMsg }}</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" :loading="saving" @click="submit">
|
||||
{{ isEdit ? "Update" : "Save" }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
class="white--text"
|
||||
:disabled="saving"
|
||||
@click="$emit('close-modal')"
|
||||
>Close</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,570 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import tz from "dayjs/plugin/timezone";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { commonStore } from "@/stores/commonStore";
|
||||
import { DataGroupService } from "@/components/service/management/DataGroupService";
|
||||
|
||||
import ViewComponent from "@/components/templates/workflow/ViewComponent.vue";
|
||||
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import DatagroupBaseDoalog from "@/components/atoms/organisms/DatagroupBaseDoalog.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
|
||||
/* -------------------------
|
||||
* Dayjs & Router
|
||||
* ------------------------*/
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(tz);
|
||||
const KST = "Asia/Seoul";
|
||||
const router = useRouter();
|
||||
|
||||
/* -------------------------
|
||||
* Types
|
||||
* ------------------------*/
|
||||
type SearchType = "전체" | "제목" | "작성자";
|
||||
type ApiSearchType = "ALL" | "TITLE" | "AUTHOR";
|
||||
|
||||
interface DataGroupRow {
|
||||
no: number;
|
||||
name: string;
|
||||
description: string;
|
||||
author: string;
|
||||
registDt: string | number | Date;
|
||||
deviceKey: number;
|
||||
}
|
||||
|
||||
/* -------------------------
|
||||
* Constants
|
||||
* ------------------------*/
|
||||
const TABLE_HEADERS = [
|
||||
{ label: "No", width: "6%", style: "word-break: keep-all;" },
|
||||
{ label: "DataGroup Name", width: "24%", style: "word-break: keep-all;" },
|
||||
{ label: "Description", width: "32%", style: "word-break: keep-all;" },
|
||||
{ label: "Author", width: "14%", style: "word-break: keep-all;" },
|
||||
{ label: "Created DateTime", width: "16%", style: "word-break: keep-all;" },
|
||||
{ label: "Action", width: "8%", style: "word-break: keep-all;" },
|
||||
] as const;
|
||||
|
||||
const SEARCH_OPTIONS = [
|
||||
{ label: "전체", value: "전체" as SearchType },
|
||||
{ label: "제목", value: "제목" as SearchType },
|
||||
{ label: "작성자", value: "작성자" as SearchType },
|
||||
];
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [
|
||||
{ text: "10 페이지", value: 10 },
|
||||
{ text: "50 페이지", value: 50 },
|
||||
{ text: "100 페이지", value: 100 },
|
||||
];
|
||||
|
||||
const SEARCH_TYPE_MAP: Record<SearchType | "", ApiSearchType> = {
|
||||
"": "ALL",
|
||||
전체: "ALL",
|
||||
제목: "TITLE",
|
||||
작성자: "AUTHOR",
|
||||
};
|
||||
|
||||
/* -------------------------
|
||||
* Store & Local State
|
||||
* ------------------------*/
|
||||
const store = commonStore();
|
||||
const openView = ref(false);
|
||||
|
||||
const isRunVisible = ref(false); // 유지 (다른 곳에서 열릴 수 있음)
|
||||
const selectedRun = ref<any | null>(null);
|
||||
|
||||
const data = ref({
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
searchType: "전체" as SearchType,
|
||||
searchText: "",
|
||||
},
|
||||
results: [] as DataGroupRow[],
|
||||
totalElements: 0,
|
||||
pageLength: 0,
|
||||
modalMode: "" as "create" | "edit" | "upload" | "",
|
||||
selectedData: null as any,
|
||||
allSelected: false,
|
||||
selected: [] as Array<{ deviceKey: number }>,
|
||||
isCreateVisible: false,
|
||||
isUploadVisible: false,
|
||||
isModalVisible: false,
|
||||
isConfirmDialogVisible: false,
|
||||
userOption: [] as any[],
|
||||
});
|
||||
|
||||
/* -------------------------
|
||||
* Utils
|
||||
* ------------------------*/
|
||||
const formatDateTime = (
|
||||
v?: string | number | Date,
|
||||
fmt = "YYYY-MM-DD HH:mm:ss",
|
||||
) => (v ? dayjs(v).tz(KST).format(fmt) : "");
|
||||
|
||||
const toRow = (g: any, no: number): DataGroupRow => ({
|
||||
no,
|
||||
name: g.dsNm,
|
||||
description: g.dsDesc,
|
||||
author: g.regUserNm,
|
||||
registDt: g.regDate,
|
||||
deviceKey: g.id,
|
||||
});
|
||||
|
||||
function onRowClick(row: DataGroupRow) {
|
||||
const id = Number(row?.deviceKey);
|
||||
if (!Number.isFinite(id)) return;
|
||||
router.push({
|
||||
path: "/training-script",
|
||||
query: { refId: String(id), refName: row.name },
|
||||
});
|
||||
}
|
||||
|
||||
/* -------------------------
|
||||
* Data Loaders
|
||||
* ------------------------*/
|
||||
async function fetchList() {
|
||||
const projectId = Number(localStorage.getItem("projectId"));
|
||||
if (!projectId) {
|
||||
console.warn("[TrainingscriptGroup] projectId 없음 — 프로젝트 먼저 선택");
|
||||
data.value.results = [];
|
||||
data.value.totalElements = 0;
|
||||
data.value.pageLength = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const { pageNum, pageSize, searchType, searchText } = data.value.params;
|
||||
const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
|
||||
const keyword = (searchText || "").trim();
|
||||
const needLocalFilter = mapped !== "ALL" && keyword.length > 0;
|
||||
|
||||
// 서버 요청 크기 설정 (로컬 필터가 필요하면 넉넉히 가져옴)
|
||||
const reqPage = needLocalFilter ? 0 : pageNum - 1; // 서버가 0-based 라면 조정
|
||||
const reqSize = needLocalFilter ? 1000 : pageSize;
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
projectId,
|
||||
page: reqPage,
|
||||
size: reqSize,
|
||||
keyword,
|
||||
searchType: mapped,
|
||||
};
|
||||
const res: any = await DataGroupService.search(payload);
|
||||
if (res?.status !== 200) return;
|
||||
|
||||
const result = res.data;
|
||||
let list: any[] = result?.content ?? [];
|
||||
|
||||
// 로컬 필터
|
||||
if (needLocalFilter) {
|
||||
const kw = keyword.toLowerCase();
|
||||
if (mapped === "TITLE") {
|
||||
list = list.filter((w: any) =>
|
||||
String(w?.name ?? "")
|
||||
.toLowerCase()
|
||||
.includes(kw),
|
||||
);
|
||||
} else if (mapped === "AUTHOR") {
|
||||
list = list.filter((w: any) =>
|
||||
String(w?.regUserNm ?? "")
|
||||
.toLowerCase()
|
||||
.includes(kw),
|
||||
);
|
||||
}
|
||||
|
||||
const uiSize = pageSize;
|
||||
const totalElements = list.length;
|
||||
const totalPages = Math.max(1, Math.ceil(totalElements / uiSize));
|
||||
const safePage = Math.min(Math.max(1, pageNum), totalPages);
|
||||
const start = (safePage - 1) * uiSize;
|
||||
const pageSlice = list.slice(start, start + uiSize);
|
||||
const firstNo = totalElements - start;
|
||||
|
||||
data.value.results = pageSlice.map((w: any, i: number) =>
|
||||
toRow(w, firstNo - i),
|
||||
);
|
||||
data.value.totalElements = totalElements;
|
||||
data.value.pageLength = totalPages;
|
||||
return;
|
||||
}
|
||||
|
||||
// 서버 페이징 결과 사용
|
||||
const totalElements = result.totalElements ?? list.length;
|
||||
const totalPages = result.totalPages ?? 1;
|
||||
const serverPage = result.pageable?.pageNumber ?? 0;
|
||||
const serverSize = result.pageable?.pageSize ?? pageSize;
|
||||
const offset =
|
||||
typeof result.pageable?.offset === "number"
|
||||
? result.pageable.offset
|
||||
: serverPage * serverSize;
|
||||
const firstNo = totalElements - offset;
|
||||
|
||||
data.value.results = list.map((w: any, i: number) => toRow(w, firstNo - i));
|
||||
data.value.totalElements = totalElements;
|
||||
data.value.pageLength = totalPages;
|
||||
} catch (err) {
|
||||
console.error("[TrainingscriptGroup] 조회 에러:", err);
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------
|
||||
* Actions
|
||||
* ------------------------*/
|
||||
function doSearch() {
|
||||
data.value.params.pageNum = 1;
|
||||
fetchList();
|
||||
}
|
||||
function changePageNum(page: number) {
|
||||
data.value.params.pageNum = page;
|
||||
fetchList();
|
||||
}
|
||||
function changePageSize(size: number) {
|
||||
data.value.params.pageSize = size;
|
||||
data.value.params.pageNum = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
function removeData(value?: Array<{ deviceKey: number }>) {
|
||||
const removeList = value ?? data.value.selected;
|
||||
if (!removeList?.length) return;
|
||||
|
||||
const ids = removeList.map((x) => x.deviceKey);
|
||||
const removeOnce = (id: number) =>
|
||||
DataGroupService.delete(id).then((res: any) => {
|
||||
if (res.status < 200 || res.status >= 300) return Promise.reject(res);
|
||||
});
|
||||
|
||||
const after = () => {
|
||||
if (
|
||||
ids.length >= data.value.results.length &&
|
||||
data.value.params.pageNum > 1
|
||||
) {
|
||||
data.value.params.pageNum -= 1;
|
||||
}
|
||||
fetchList();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
};
|
||||
|
||||
if (ids.length === 1) {
|
||||
removeOnce(ids[0])
|
||||
.then(() =>
|
||||
store.setSnackbarMsg({
|
||||
color: "success",
|
||||
text: "삭제되었습니다.",
|
||||
result: 200,
|
||||
}),
|
||||
)
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
store.setSnackbarMsg({
|
||||
color: "warning",
|
||||
text: "삭제 실패",
|
||||
result: 500,
|
||||
});
|
||||
})
|
||||
.finally(after);
|
||||
} else {
|
||||
Promise.all(ids.map(removeOnce))
|
||||
.then(() =>
|
||||
store.setSnackbarMsg({
|
||||
color: "success",
|
||||
text: "모두 삭제되었습니다.",
|
||||
result: 200,
|
||||
}),
|
||||
)
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
store.setSnackbarMsg({
|
||||
color: "warning",
|
||||
text: "일부 삭제 실패",
|
||||
result: 500,
|
||||
});
|
||||
})
|
||||
.finally(after);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRemoveData() {
|
||||
if (data.value.selected.length === 0) return;
|
||||
if (data.value.allSelected || data.value.selected.length !== 1) {
|
||||
data.value.isConfirmDialogVisible = true;
|
||||
return;
|
||||
}
|
||||
removeData();
|
||||
}
|
||||
|
||||
function getSelectedAllData() {
|
||||
data.value.selected = data.value.allSelected
|
||||
? data.value.results.map((item) => ({ deviceKey: item.deviceKey }))
|
||||
: [];
|
||||
}
|
||||
|
||||
function openDetailModal(selectedItem: DataGroupRow) {
|
||||
data.value.selectedData = selectedItem;
|
||||
openView.value = true;
|
||||
}
|
||||
const closeDetail = () => (openView.value = false);
|
||||
|
||||
function openRunModal(item: any) {
|
||||
selectedRun.value = item;
|
||||
isRunVisible.value = true;
|
||||
}
|
||||
|
||||
function openModifyModal(item: DataGroupRow) {
|
||||
data.value.selectedData = {
|
||||
id: item.deviceKey,
|
||||
workflowName: item.name,
|
||||
workflowDescription: item.description,
|
||||
};
|
||||
data.value.modalMode = "edit";
|
||||
data.value.isCreateVisible = true;
|
||||
}
|
||||
function openCreateModal() {
|
||||
data.value.selectedData = null;
|
||||
data.value.modalMode = "create";
|
||||
data.value.isCreateVisible = true;
|
||||
}
|
||||
function openUploadModal() {
|
||||
data.value.selectedData = null;
|
||||
data.value.modalMode = "upload";
|
||||
data.value.isUploadVisible = true;
|
||||
}
|
||||
function closeCreateModal() {
|
||||
data.value.isModalVisible = false;
|
||||
data.value.isCreateVisible = false;
|
||||
}
|
||||
function closeUploadModal() {
|
||||
data.value.isModalVisible = false;
|
||||
data.value.isUploadVisible = false;
|
||||
}
|
||||
|
||||
/* -------------------------
|
||||
* Watchers & Lifecycle
|
||||
* ------------------------*/
|
||||
watch(
|
||||
() => data.value.isCreateVisible,
|
||||
(now, prev) => {
|
||||
if (prev && !now) fetchList();
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => data.value.isUploadVisible,
|
||||
(now, prev) => {
|
||||
if (prev && !now) fetchList();
|
||||
},
|
||||
);
|
||||
onMounted(fetchList);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-100" v-if="!openView">
|
||||
<v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
|
||||
<v-card
|
||||
flat
|
||||
class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
|
||||
>
|
||||
<v-card flat class="bg-shades-transparent w-100">
|
||||
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||
<div class="d-flex flex-row justify-start align-center">
|
||||
<div class="text-primary">TrainingScriptGroup</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
|
||||
<!-- Search -->
|
||||
<v-card flat class="bg-shades-transparent w-100">
|
||||
<v-card flat class="bg-shades-transparent mb-4">
|
||||
<div class="d-flex justify-center flex-wrap align-center">
|
||||
<v-responsive
|
||||
max-width="180"
|
||||
min-width="180"
|
||||
class="mr-3 mt-3 mb-3"
|
||||
>
|
||||
<v-select
|
||||
v-model="data.params.searchType"
|
||||
label="검색조건"
|
||||
density="compact"
|
||||
:items="SEARCH_OPTIONS"
|
||||
item-title="label"
|
||||
item-value="value"
|
||||
hide-details
|
||||
@update:model-value="doSearch"
|
||||
/>
|
||||
</v-responsive>
|
||||
|
||||
<v-responsive min-width="540" max-width="540">
|
||||
<v-text-field
|
||||
v-model="data.params.searchText"
|
||||
label="검색어"
|
||||
density="compact"
|
||||
clearable
|
||||
required
|
||||
class="mt-3 mb-3"
|
||||
hide-details
|
||||
@keyup.enter="doSearch"
|
||||
/>
|
||||
</v-responsive>
|
||||
|
||||
<div class="ml-3">
|
||||
<v-btn
|
||||
size="large"
|
||||
color="primary"
|
||||
:rounded="5"
|
||||
@click="doSearch"
|
||||
>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<v-sheet
|
||||
class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
|
||||
>
|
||||
<v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
|
||||
<v-sheet
|
||||
class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
|
||||
>
|
||||
<v-chip color="primary"
|
||||
>총 {{ data.totalElements.toLocaleString() }}개</v-chip
|
||||
>
|
||||
</v-sheet>
|
||||
<v-sheet class="bg-shades-transparent">
|
||||
<v-responsive max-width="140" min-width="140" class="mb-2">
|
||||
<v-select
|
||||
v-model="data.params.pageSize"
|
||||
density="compact"
|
||||
:items="PAGE_SIZE_OPTIONS"
|
||||
item-title="text"
|
||||
item-value="value"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
hide-details
|
||||
@update:model-value="changePageSize"
|
||||
/>
|
||||
</v-responsive>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
<v-sheet class="justify-end mb-2">
|
||||
<v-btn color="info" @click="openCreateModal"
|
||||
>Create DataGroup</v-btn
|
||||
>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
|
||||
<!-- Table -->
|
||||
<v-card class="rounded-lg pa-8">
|
||||
<v-col cols="12">
|
||||
<v-sheet>
|
||||
<v-table
|
||||
density="comfortable"
|
||||
fixed-header
|
||||
height="625"
|
||||
col-md-12
|
||||
col-12
|
||||
overflow-x-auto
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
v-for="(h, i) in TABLE_HEADERS"
|
||||
:key="i"
|
||||
:style="`width:${h.width}`"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="(h, i) in TABLE_HEADERS"
|
||||
:key="i"
|
||||
class="text-center font-weight-bold"
|
||||
:style="h.style"
|
||||
>
|
||||
{{ h.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-body-2">
|
||||
<tr
|
||||
v-for="(row, i) in data.results"
|
||||
:key="i"
|
||||
class="text-center row-hover"
|
||||
@click="onRowClick(row)"
|
||||
>
|
||||
<td>{{ row.no }}</td>
|
||||
<td>{{ row.name }}</td>
|
||||
<td>{{ row.description }}</td>
|
||||
<td>{{ row.author || "-" }}</td>
|
||||
<td>{{ formatDateTime(row.registDt) }}</td>
|
||||
<td
|
||||
style="white-space: nowrap"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
>
|
||||
<IconInfoBtn @on-click="openDetailModal(row)" />
|
||||
<IconModifyBtn @on-click="openModifyModal(row)" />
|
||||
<IconDeleteBtn
|
||||
@on-click="removeData([{ deviceKey: row.deviceKey }])"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-sheet>
|
||||
|
||||
<v-card-actions class="text-center mt-8 justify-center">
|
||||
<v-pagination
|
||||
v-model="data.params.pageNum"
|
||||
:length="data.pageLength"
|
||||
:total-visible="10"
|
||||
color="primary"
|
||||
rounded="circle"
|
||||
@update:model-value="changePageNum"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-col>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Create/Edit Dialog -->
|
||||
<v-dialog v-model="data.isCreateVisible" max-width="800" persistent>
|
||||
<DatagroupBaseDoalog
|
||||
:key="data.modalMode + String(data.selectedData?.deviceKey ?? '')"
|
||||
:edit-data="data.selectedData"
|
||||
:mode="data.modalMode"
|
||||
@close-modal="closeCreateModal"
|
||||
/>
|
||||
</v-dialog>
|
||||
</div>
|
||||
|
||||
<div class="w-100" v-else>
|
||||
<ViewComponent
|
||||
v-if="data.selectedData"
|
||||
:id="data.selectedData.deviceKey"
|
||||
@close="closeDetail"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 행 Hover 효과 */
|
||||
.row-hover {
|
||||
cursor: pointer;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
tbody tr.row-hover:hover {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
tbody tr.row-hover:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<script setup>
|
||||
import ListComponent from "@/components/templates/trainingscriptgroup/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass"></style>
|
||||
Loading…
Reference in new issue