You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
536 lines
16 KiB
536 lines
16 KiB
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { commonStore } from "@/stores/commonStore";
|
|
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
|
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
|
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
|
|
|
|
import ViewComponent from "@/components/templates/stepconfig/ViewComponent.vue";
|
|
import StapComfigDialog from "@/components/atoms/organisms/WorklfowStepBaseDialog.vue";
|
|
|
|
import { WorkflowStepService } from "@/components/service/management/workflowStepService";
|
|
import type { WorkflowStep } from "@/components/models/management/WorkflowStep";
|
|
|
|
const store = commonStore();
|
|
const openView = ref(false);
|
|
type SearchType = "전체" | "제목" | "작성자";
|
|
|
|
const tableHeader = [
|
|
{ label: "No", width: "5%", style: "word-break: keep-all;" },
|
|
{ label: "Step Name", width: "15%", style: "word-break: keep-all;" },
|
|
{ label: "Type", width: "10%", style: "word-break: keep-all;" },
|
|
{ label: "Dataset", width: "10%", style: "word-break: keep-all;" },
|
|
{ label: "Script", width: "10%", style: "word-break: keep-all;" },
|
|
{ label: "Hyper Parameters", width: "15%", style: "word-break: keep-all;" },
|
|
{ label: "Resource", width: "15%", style: "word-break: keep-all;" },
|
|
{ label: "Status", width: "5%", style: "word-break: keep-all;" },
|
|
{ label: "Workflow", width: "10%", style: "word-break: keep-all;" },
|
|
{ label: "Action", width: "5%", style: "word-break: keep-all;" },
|
|
];
|
|
|
|
const searchOptions = [
|
|
{ label: "전체", value: "전체" as SearchType },
|
|
{ label: "제목", value: "제목" as SearchType },
|
|
{ label: "작성자", value: "작성자" as SearchType },
|
|
];
|
|
const SEARCH_TYPE_MAP: Record<SearchType | "", "ALL" | "TITLE" | "AUTHOR"> = {
|
|
"": "ALL",
|
|
전체: "ALL",
|
|
제목: "TITLE",
|
|
작성자: "AUTHOR",
|
|
};
|
|
const pageSizeOptions = [
|
|
{ text: "10 페이지", value: 10 },
|
|
{ text: "50 페이지", value: 50 },
|
|
{ text: "100 페이지", value: 100 },
|
|
];
|
|
|
|
const data = ref({
|
|
params: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
searchType: "전체" as SearchType,
|
|
searchText: "",
|
|
},
|
|
results: [] as any[],
|
|
totalElements: 0,
|
|
pageLength: 0,
|
|
modalMode: "" as "create" | "edit" | "",
|
|
selectedData: null as any,
|
|
isStepVisible: false,
|
|
allSelected: false,
|
|
selected: [] as Array<{ deviceKey: number }>,
|
|
isConfirmDialogVisible: false,
|
|
});
|
|
|
|
const toRow = (s: any, no: number) => ({
|
|
no,
|
|
stepName: s.stepName,
|
|
type: s.stepType,
|
|
dataset: s.datasetName,
|
|
script: s.scriptName,
|
|
hyperParameters: s.hyperParams,
|
|
resource: s.resource,
|
|
status: String(s.status).toLowerCase() === "success" ? "success" : "warning",
|
|
workflow: s.workflowName,
|
|
workflowId: s.workflowStepId,
|
|
deviceKey: s.id,
|
|
});
|
|
|
|
const fetchList = async () => {
|
|
const projectId = Number(localStorage.getItem("projectId"));
|
|
if (!projectId) {
|
|
console.warn("[WorkflowSteps] 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;
|
|
|
|
let reqPage = data.value.params.pageNum;
|
|
let reqSize = data.value.params.pageSize;
|
|
if (needLocalFilter) {
|
|
reqPage = 0;
|
|
reqSize = 1000;
|
|
}
|
|
const payload = {
|
|
projectId,
|
|
page: reqPage,
|
|
size: reqSize,
|
|
keyword,
|
|
searchType: mapped,
|
|
};
|
|
|
|
WorkflowStepService.search(payload)
|
|
.then((res: any) => {
|
|
if (res.status !== 200) return;
|
|
|
|
const result = res.data;
|
|
let list = result?.content ?? [];
|
|
|
|
if (needLocalFilter) {
|
|
const kw = keyword.toLowerCase();
|
|
|
|
if (mapped === "TITLE") {
|
|
list = list.filter((w: any) =>
|
|
String(w?.workflowName ?? "")
|
|
.toLowerCase()
|
|
.includes(kw),
|
|
);
|
|
} else if (mapped === "AUTHOR") {
|
|
list = list.filter((w: any) =>
|
|
String(w?.regUserId ?? "")
|
|
.toLowerCase()
|
|
.includes(kw),
|
|
);
|
|
}
|
|
|
|
const uiSize = data.value.params.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;
|
|
const totalPages = result.totalPages;
|
|
const serverPage = result.pageable.pageNumber;
|
|
const serverSize = result.pageable.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: any) => console.error("워크플로우 조회 에러:", err));
|
|
};
|
|
|
|
/** 검색 실행 (페이지 1로 리셋) */
|
|
const doSearch = () => {
|
|
data.value.params.pageNum = 1;
|
|
fetchList();
|
|
};
|
|
|
|
/** 페이지 이동 */
|
|
const changePageNum = (page: number) => {
|
|
data.value.params.pageNum = page;
|
|
fetchList();
|
|
};
|
|
|
|
/** 페이지 사이즈 변경 */
|
|
const changePageSize = (size: number) => {
|
|
data.value.params.pageSize = size;
|
|
data.value.params.pageNum = 1;
|
|
fetchList();
|
|
};
|
|
|
|
const saveStep = async (payload: WorkflowStep) => {
|
|
try {
|
|
const { data: saved } = await WorkflowStepService.add(payload);
|
|
await fetchList();
|
|
} catch (e) {
|
|
console.error("[STEP SAVE FAIL]", e);
|
|
} finally {
|
|
data.value.isStepVisible = false;
|
|
}
|
|
};
|
|
|
|
const removeData = (value?: Array<{ deviceKey: number }>) => {
|
|
const removeList = value ?? data.value.selected;
|
|
if (!removeList || removeList.length === 0) return;
|
|
|
|
const ids = removeList.map((x) => x.deviceKey);
|
|
const removeOne = (id: number) =>
|
|
WorkflowStepService.delete(id).then((res) => {
|
|
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) {
|
|
removeOne(ids[0])
|
|
.then(() => {
|
|
store.setSnackbarMsg({
|
|
color: "success",
|
|
text: "삭제되었습니다.",
|
|
result: 200,
|
|
});
|
|
after();
|
|
})
|
|
.catch((err) => {
|
|
console.error("삭제 실패:", err);
|
|
store.setSnackbarMsg({
|
|
color: "warning",
|
|
text: "삭제 실패",
|
|
result: 500,
|
|
});
|
|
});
|
|
} else {
|
|
Promise.all(ids.map(removeOne))
|
|
.then(() => {
|
|
store.setSnackbarMsg({
|
|
color: "success",
|
|
text: "모두 삭제되었습니다.",
|
|
result: 200,
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error("일부 삭제 실패:", err);
|
|
store.setSnackbarMsg({
|
|
color: "warning",
|
|
text: "일부 삭제 실패",
|
|
result: 500,
|
|
});
|
|
})
|
|
.finally(after);
|
|
}
|
|
};
|
|
|
|
const getSelectedAllData = () => {
|
|
data.value.selected = data.value.allSelected
|
|
? data.value.results.map((item: any) => ({ deviceKey: item.deviceKey }))
|
|
: [];
|
|
};
|
|
|
|
const openDetailModal = (selectedItem: any) => {
|
|
data.value.selectedData = selectedItem;
|
|
openView.value = true;
|
|
};
|
|
const closeDetail = () => {
|
|
openView.value = false;
|
|
};
|
|
const openCreateModal = () => {
|
|
data.value.selectedData = null;
|
|
data.value.modalMode = "create";
|
|
data.value.isStepVisible = true;
|
|
};
|
|
|
|
const openModifyModal = (item: any) => {
|
|
data.value.selectedData = {
|
|
id: item.deviceKey,
|
|
stepName: item.stepName,
|
|
status: item.status,
|
|
workflowStepId: item.workflowId,
|
|
};
|
|
data.value.modalMode = "edit";
|
|
data.value.isStepVisible = true;
|
|
};
|
|
|
|
const closeModal = () => {
|
|
data.value.isStepVisible = false;
|
|
data.value.selectedData = null;
|
|
};
|
|
|
|
/** 모달 닫히면 목록 새로고침하고 싶으면 아래 watch 사용 */
|
|
// watch(() => data.value.isStepVisible, (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">Workflows Step Config</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
|
|
<!-- 상단 검색 바 (워크플로우 화면과 동일 UX) -->
|
|
<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="searchOptions"
|
|
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>
|
|
|
|
<!-- 총 개수 / 페이지사이즈 / 생성 버튼 -->
|
|
<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="pageSizeOptions"
|
|
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 Workflow Step</v-btn
|
|
>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
|
|
<!-- 테이블 -->
|
|
<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 style="width: 5%" />
|
|
<col
|
|
v-for="(item, i) in tableHeader"
|
|
:key="i"
|
|
:style="`width:${item.width}`"
|
|
/>
|
|
</colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<v-checkbox
|
|
v-model="data.allSelected"
|
|
style="min-width: 36px"
|
|
:indeterminate="data.allSelected === true"
|
|
hide-details
|
|
@change="getSelectedAllData"
|
|
/>
|
|
</th>
|
|
<th
|
|
v-for="(item, i) in tableHeader"
|
|
:key="i"
|
|
class="text-center font-weight-bold"
|
|
:style="`${item.style}`"
|
|
>
|
|
{{ item.label }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="text-body-2">
|
|
<tr
|
|
v-for="item in data.results"
|
|
:key="item.no"
|
|
class="text-center"
|
|
>
|
|
<td>
|
|
<v-checkbox
|
|
v-model="data.selected"
|
|
:value="{ deviceKey: item.deviceKey }"
|
|
hide-details
|
|
style="min-width: 36px"
|
|
/>
|
|
</td>
|
|
<td>{{ item.no }}</td>
|
|
<td>{{ item.stepName }}</td>
|
|
<td>{{ item.type }}</td>
|
|
<td>{{ item.dataset }}</td>
|
|
<td>{{ item.script }}</td>
|
|
<td>{{ item.hyperParameters }}</td>
|
|
<td>{{ item.resource }}</td>
|
|
<td>
|
|
<v-icon
|
|
v-if="item.status === 'success'"
|
|
color="success"
|
|
>
|
|
mdi-checkbox-marked-circle
|
|
</v-icon>
|
|
<v-icon v-else color="warning">mdi-alert-circle</v-icon>
|
|
</td>
|
|
<td>{{ item.workflow }}</td>
|
|
<td style="white-space: nowrap">
|
|
<IconInfoBtn @on-click="openDetailModal(item)" />
|
|
<IconModifyBtn @on-click="openModifyModal(item)" />
|
|
<IconDeleteBtn
|
|
@on-click="
|
|
removeData([{ deviceKey: item.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>
|
|
</div>
|
|
|
|
<!-- 상세 보기 -->
|
|
<div class="w-100" v-else>
|
|
<ViewComponent
|
|
v-if="data.selectedData"
|
|
:id="data.selectedData.deviceKey"
|
|
@close="closeDetail"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 생성/수정 모달 -->
|
|
<v-dialog v-model="data.isStepVisible" max-width="760" persistent>
|
|
<StapComfigDialog
|
|
:editData="data.selectedData"
|
|
:mode="data.modalMode"
|
|
@saved="saveStep"
|
|
@close-modal="closeModal"
|
|
/>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|