parent
4686379184
commit
8114ca58c5
@ -1,3 +1,3 @@
|
|||||||
NODE_ENV = "development"
|
NODE_ENV = "development"
|
||||||
VITE_APP_API_SERVER_URL = "http://localhost:80"
|
VITE_APP_API_SERVER_URL = "http://localhost:8080"
|
||||||
VITE_ROOT_PATH = ""
|
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