ace-front-end 1.0.0

package/ace-install-system-ui/src/components/HostMachineManage/MachineSelector.vue

@@ -0,0 +1,119 @@
+<template>
+    <custom-dialog v-model="visible" width="60%" title="选择设备" @opened="init">
+        <div class="sfc-app-selector">
+            <HostMachineManage
+                :title="props.title"
+                ref="hostManageRef"
+                isRequestDataByParams
+                mode="select"
+                :machines="machines"
+                :hostParams="hostParams"
+                v-model:unified-path="unifiedPath"
+                v-model:unified-path-open="unifiedPathOpen"
+                @machine-selection="machineSelectionHandle"
+            />
+            <!-- :echo="state.machines"
+                :hostParams="hostParams" -->
+        </div>
+
+        <template #footer>
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="submitHandle">确定</el-button>
+        </template>
+    </custom-dialog>
+</template>
+
+<script setup lang="ts">
+import { CustomDesktopApp, CustomDesktopMachineSecured, HostParams } from "@/model/DesktopApp";
+import CustomDialog from "../CustomDialog.vue";
+import HostMachineManage from "./HostMachineManage.vue";
+import { computed, nextTick, reactive, ref } from "vue";
+// import { CustomDesktopApp } from "@/model/DesktopApp";
+
+interface Props {
+    title: string;
+    modelValue: boolean;
+    unifiedPathOpen: boolean;
+    unifiedPath: string;
+    hostParams: HostParams;
+    machines: CustomDesktopMachineSecured[];
+}
+const props = withDefaults(defineProps<Props>(), {
+    unifiedPath: "",
+    unifiedPathOpen: true,
+    title: "请选择安装设备",
+    machines: () => [],
+});
+
+const emit = defineEmits([
+    "update:modelValue",
+    "update:machines",
+    "update:unifiedPathOpen",
+    "update:unifiedPath",
+]);
+
+const unifiedPath = computed({
+    get() {
+        return props.unifiedPath;
+    },
+    set(val: string) {
+        emit("update:unifiedPath", val);
+    },
+});
+
+const unifiedPathOpen = computed({
+    get() {
+        return props.unifiedPathOpen;
+    },
+    set(val: boolean) {
+        emit("update:unifiedPathOpen", val);
+    },
+});
+
+const machines = computed({
+    get() {
+        return props.machines;
+    },
+    set(val) {
+        emit("update:machines", val);
+    },
+});
+
+const hostManageRef = ref<InstanceType<typeof HostMachineManage> | null>(null);
+
+const state = reactive<{
+    machines: CustomDesktopMachineSecured[];
+}>({
+    machines: [],
+});
+
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit("update:modelValue", value);
+    },
+});
+const init = () => {
+    nextTick(() => {
+        if (hostManageRef.value === null) return;
+        hostManageRef.value.getMachineList();
+    });
+};
+const submitHandle = () => {
+    machines.value = state.machines;
+    visible.value = false;
+};
+const machineSelectionHandle = (values: CustomDesktopMachineSecured[]) => {
+    state.machines = values;
+    // machines.value = values;
+    // modelValue.value = state.apps;
+};
+</script>
+
+<style lang="scss" scoped>
+.sfc-app-selector {
+    height: 600px;
+}
+</style>

package/ace-install-system-ui/src/components/InstallModuleHeader.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="sfc-install-module-header">
+        <h1 class="title">{{ props.title }}</h1>
+        <p v-if="description" class="description">{{ props.description }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    title:string,
+    description?:string
+}>();
+
+</script>
+
+<style lang="scss" scoped>
+.sfc-install-module-header{
+    margin-bottom: 16px;
+    .title{
+        margin: 0;
+        padding: 0;
+        color:var(--el-text-color-primary);
+        font-size:18px;
+        line-height: 1;
+        margin-bottom: 8px;
+    }
+    .description{
+        font-size: 14px;
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+        color:var(--el-text-color-regular)
+    }
+}
+
+</style>

package/ace-install-system-ui/src/components/Log/ViewAllLog.vue

@@ -0,0 +1,175 @@
+<template>
+    <CustomDialog
+        v-model="visible"
+        :modal="false"
+        title="查看日志"
+        width="50%"
+        body-padding="0"
+        :body-height="420"
+        @opened="getList"
+    >
+        <div class="sfc-view-all-log">
+            <el-table
+                :header-cell-style="{ fontWeight: 'bold', color: 'var(--install-system-color1)' }"
+                :data="state.list"
+                height="100%"
+                size="small"
+                style="width: 100%"
+            >
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="typeStr"
+                    show-overflow-tooltip
+                    label="任务类型"
+                >
+                </el-table-column>
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="appName"
+                    show-overflow-tooltip
+                    label="应用名称"
+                >
+                </el-table-column>
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="machineIp"
+                    show-overflow-tooltip
+                    label="设备IP"
+                >
+                </el-table-column>
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="startTime"
+                    show-overflow-tooltip
+                    label="任务开始时间"
+                >
+                </el-table-column>
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="endTime"
+                    show-overflow-tooltip
+                    label="任务结束时间"
+                >
+                </el-table-column>
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="status"
+                    show-overflow-tooltip
+                    label="任务状态"
+                >
+                </el-table-column>
+                <el-table-column label="操作" width="120">
+                    <template #default="scope">
+                        <template v-if="scope.row.type !== 'group'">
+                            <el-button
+                                @click="viewDetail(scope.row)"
+                                size="small"
+                                type="primary"
+                                plain
+                                >查看详情</el-button
+                            >
+                        </template>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination-box">
+                <el-pagination
+                    background
+                    small
+                    layout="prev, pager, next"
+                    :total="state.totalElements"
+                    @current-change="paginationChangeHandle"
+                />
+            </div>
+        </div>
+
+        <template #footer>
+            <el-button @click="visible = false">取消</el-button>
+        </template>
+    </CustomDialog>
+</template>
+
+<script setup lang="ts">
+import CustomDialog from "../CustomDialog.vue";
+import { reactive, onMounted, computed } from "vue";
+import { useTaskReportApi } from "@/api/taskReportApi";
+import { TaskLog } from "@/model/TaskLog";
+import { useStore } from "@/stores";
+const store = useStore();
+const { getTaskLogs, getTaskSshLog } = useTaskReportApi();
+
+interface Props {
+    modelValue: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emit = defineEmits(["update:modelValue"]);
+const state = reactive<{
+    size: number;
+    totalPages: number | null;
+    totalElements: number | null;
+    list: TaskLog[];
+    currentPage: number;
+}>({
+    size: 10,
+    totalPages: null,
+    totalElements: null,
+    list: [],
+    currentPage: 0,
+});
+const typeStr = {
+    INSTALL_DESKTOP_APP: "安装桌面应用",
+    SCAN_PACKAGE: "扫描包",
+    INSTALL_WEB_APP: "安装web服务应用",
+    INSTALL_BASE_COMPONENT: "安装基础组件",
+    INSTALL_IAM_EXTENSION: "安装统一任务服务扩展",
+    UNINSTALL_DESKTOP_APP: "卸载桌面应用",
+};
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+function setTypeStr(taskLogs: TaskLog[]) {
+    taskLogs.forEach((taskLog) => {
+        taskLog.typeStr = typeStr[taskLog.taskType];
+    });
+    return taskLogs;
+}
+
+function getList() {
+    getTaskLogs(state.currentPage, state.size).then((res) => {
+        state.list = setTypeStr(res.content);
+        state.totalPages = res.totalPages;
+        state.totalElements = res.totalElements;
+    });
+}
+function viewDetail(data: TaskLog) {
+    getTaskSshLog(data.id).then((res) => {
+        // state.log = res;
+        store.log = res;
+        store.logVisible = true;
+    });
+}
+
+function paginationChangeHandle(value: number) {
+    console.log(value);
+    state.currentPage = value;
+    getList();
+}
+onMounted(() => {});
+
+defineExpose({});
+</script>
+
+<style lang="scss" scoped>
+.sfc-view-all-log {
+    .pagination-box {
+        padding: 16px;
+        // display: flex;
+        // flex-direction: row-reverse;
+    }
+}
+</style>

package/ace-install-system-ui/src/components/Log/ViewLog.vue

@@ -0,0 +1,80 @@
+<template>
+    <custom-dialog
+        v-model="visible"
+        width="60%"
+        body-padding="0"
+        :body-height="430"
+        title="系统日志"
+    >
+        <el-input
+            resize="none"
+            v-model="log"
+            :rows="20"
+            readonly
+            class="custom-log-textarea"
+            type="textarea"
+            placeholder="暂无日志信息"
+        />
+        <template #footer>
+            <el-button @click="closeHandle">关闭</el-button>
+        </template>
+    </custom-dialog>
+</template>
+
+<script setup lang="ts">
+import CustomDialog from "../CustomDialog.vue";
+import { computed } from "vue";
+
+interface Props {
+    modelValue: string;
+    visible: boolean;
+}
+// const state = reactive<{ visible: boolean }>({
+//     visible: false,
+// });
+const emit = defineEmits(["update:modelValue", "update:visible"]);
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: "",
+    visible: false,
+});
+
+const visible = computed({
+    get() {
+        return props.visible;
+    },
+    set(value: boolean) {
+        emit("update:visible", value);
+    },
+});
+const log = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value: string) {
+        emit("update:modelValue", value);
+    },
+});
+function closeHandle() {
+    visible.value = false;
+}
+
+// function init() {}
+</script>
+
+<style lang="scss">
+.el-textarea.custom-log-textarea {
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    border-color: #000 !important;
+    color: #fff !important;
+    border-radius: 4 !important;
+    overflow: hidden;
+    box-shadow: none;
+    > textarea {
+        background-color: rgba(0, 0, 0, 0.8) !important;
+        border-color: #000 !important;
+        color: #fff !important;
+        border-radius: 0 !important;
+        box-shadow: none;
+    }
+}
+</style>

package/ace-install-system-ui/src/components/TaskList/AppInstallTask.vue

@@ -0,0 +1,33 @@
+<template>
+    <template v-for="group in groups" :key="group.appName">
+        <AppInstallTaskGroup :task-id="props.taskId" :model-value="group" />
+    </template>
+</template>
+
+<script setup lang="ts">
+import {
+    AppInstallTaskStatus,
+    CustomDesktopAppInstallTaskGroup,
+    DesktopAppInstallTaskGroup,
+    Status,
+} from "@/model/TaskReport";
+import { onMounted, reactive, computed } from "vue";
+import AppInstallTaskGroup from "./AppInstallTaskGroup.vue";
+interface Props {
+    modelValue: CustomDesktopAppInstallTaskGroup[];
+    taskId: number;
+}
+const props = withDefaults(defineProps<Props>(), { modelValue: () => [] });
+const emit = defineEmits(["update:modelValue"]);
+
+const groups = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+</script>
+
+<style scoped lang="scss"></style>

package/ace-install-system-ui/src/components/TaskList/AppInstallTaskGroup.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="install-detail" :class="computedClasses">
+        <div class="header" @click="state.showBody = !state.showBody">
+            <div class="title">
+                {{ group.appName }}安装到{{ group.items.length }}台设备 ——
+                <span class="state-text running" v-if="group.state === 'finished'">
+                    <span v-if="group.hasError"> 任务结束，但存在错误。 </span>
+                    <span v-else> 安装完成</span>
+                </span>
+                <span class="state-text finished" v-else-if="group.state === 'running'">
+                    <span v-if="group.hasError"> 任务进行中，其中有任务发生错误。 </span>
+                    <span v-else> 正在安装中...</span>
+                </span>
+                <span class="state-text error" v-else> 任务发生错误 </span>
+            </div>
+            <div class="arrow">
+                <i class="aceicon icon-arrow-down"></i>
+            </div>
+        </div>
+
+        <div v-if="state.showBody" class="body">
+            <div
+                class="device-task"
+                v-for="item in group.items"
+                :class="item.status"
+                :key="item.id"
+            >
+                <div class="left">
+                    {{ item.machineName }}({{ item.machineIp }}) -
+                    <span v-if="item.status === 'ERROR'">{{ item.message }}</span>
+                    <span v-else-if="item.status === 'RUNNING'">正在安装中...</span>
+                    <span v-else-if="item.status === 'PENDING'">等待中</span>
+                    <span v-else-if="item.status === 'TERMINATED'">已中断</span>
+                    <span v-else>安装完成</span>
+                </div>
+                <div class="right">
+                    <el-button
+                        v-if="item.status === 'ERROR' || item.status === 'FINISHED'"
+                        plain
+                        link
+                        type="info"
+                        size="small"
+                        @click="viewLog(item)"
+                        >安装日志</el-button
+                    >
+                    <el-button
+                        v-if="item.status === 'ERROR' && item.errorCode === 1450"
+                        plain
+                        link
+                        type="warning"
+                        size="small"
+                        @click="forceInstall(item)"
+                        >强制安装</el-button
+                    >
+                    <el-progress
+                        v-if="item.status === 'RUNNING'"
+                        :percentage="item.progress"
+                        :show-text="false"
+                    />
+                </div>
+            </div>
+
+            <!-- <div class="device-task TERMINATED">
+                <div class="left">192.168.16.101 - 安装失败!</div>
+                <div class="right">
+                    <el-button plain link size="small">安装日志</el-button>
+                </div>
+            </div>
+            <div class="device-task FINISHED">
+                <div class="left">192.168.16.101 - 安装失败!</div>
+                <div class="right">
+                    <el-button plain link size="small">安装日志</el-button>
+                </div>
+            </div>
+            <div class="device-task RUNNING">
+                <div class="left">192.168.16.103 - 正在安装中...</div>
+                <div class="right">
+                    <el-progress :percentage="50" :show-text="false" />
+                </div>
+            </div>
+            <div class="device-task PENDING">
+                <div class="left">192.168.16.104 - 等待安装...</div>
+                <div class="right"></div>
+            </div> -->
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    AppInstallTaskStatus,
+    CustomDesktopAppInstallTaskGroup,
+    DesktopAppInstallTaskGroup,
+    Status,
+    TaskItem,
+} from "@/model/TaskReport";
+import { onMounted, reactive, computed } from "vue";
+import { useTaskReportApi } from "@/api/taskReportApi";
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+import { useStore } from "@/stores";
+const store = useStore();
+const { getTaskSshLog } = useTaskReportApi();
+const desktopAppApi = useDeskTopAppApi();
+interface Props {
+    modelValue: CustomDesktopAppInstallTaskGroup;
+    taskId: number;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emit = defineEmits(["update:modelValue"]);
+const computedClasses = computed(() => {
+    return [
+        {
+            expand: state.showBody,
+            collapse: !state.showBody,
+            "has-error": group.value.hasError,
+        },
+        group.value.state,
+    ];
+});
+const state = reactive<{
+    showBody: boolean;
+    log: string;
+}>({
+    showBody: true,
+    log: "",
+});
+
+const group = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+function forceInstall(item: TaskItem) {
+    desktopAppApi.forceInstall(props.taskId, item.id).then((res) => {
+        console.log(res);
+    });
+}
+function viewLog(taskItem: TaskItem) {
+    getTaskSshLog(taskItem.sshLogId).then((res) => {
+        // state.log = res;
+        store.log = res;
+        store.logVisible = true;
+    });
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/modules/task-install-detail.scss";
+</style>

package/ace-install-system-ui/src/components/TaskList/AppScanTask.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="sfc-app-scan-task">
+        <div class="file-name">文件名：{{ appScanTask?.currentDesktopFile }}</div>
+        <div class="error-msg">错误信息：{{ appScanTask?.desktopAppScan.message }}</div>
+
+        <el-button v-if="isKnownError" type="primary" icon="Edit" @click="gotoForm"
+            >前往完善自述文件</el-button
+        >
+        <el-button type="danger" icon="Delete" @click="deleteFileHandle"
+            >不需要了，我要删除</el-button
+        >
+    </div>
+</template>
+
+<script setup lang="ts">
+import { AppScanTask, Status } from "@/model/TaskReport";
+import { onMounted, reactive, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useStore } from "@/stores";
+import { ElMessageBox } from "element-plus";
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+const { deleteFile, startScan } = useDeskTopAppApi();
+// interface Props {}
+// const props = withDefaults(defineProps<Props>(), {});
+const store = useStore();
+const { appScanTask } = storeToRefs(store);
+const emit = defineEmits(["update:modelValue"]);
+const knownErrorCodes = [
+    1407, 1409, 1410, 1432, 1433, 1434, 1435, 1436, 1442, 1443, 1444, 1445, 1446, 1447, 1448, 1449,
+    1458, 1459, 1460, 1461, 1462, 1463, 1464, 1465,
+];
+const isKnownError = computed(() => {
+    if (!appScanTask.value) return false;
+    return knownErrorCodes.includes(appScanTask.value.desktopAppScan.errorCode);
+});
+function gotoForm() {
+    store.appMetaFormVisible = true;
+}
+function deleteFileHandle() {
+    ElMessageBox.confirm(`确定要删除${appScanTask?.value?.currentDesktopFile}吗?`, "Warning", {
+        confirmButtonText: "确认删除",
+        cancelButtonText: "取消",
+        type: "warning",
+    }).then(() => {
+        if (!appScanTask || appScanTask.value === null) return;
+        deleteFile(appScanTask.value.currentDesktopFile)
+            .then((res) => {
+                return startScan();
+            })
+            .catch((err) => {
+                console.log("删除文件出错", err);
+                return startScan();
+            })
+            .then((res) => {
+                console.log("重新扫描安装包");
+            });
+    });
+}
+</script>
+
+<style scoped lang="scss">
+.dark-theme {
+    .sfc-app-scan-task {
+        .file-name {
+            color: var(--ace-text-color1);
+        }
+    }
+}
+.sfc-app-scan-task {
+    .file-name {
+        color: var(--install-system-color6);
+        margin-bottom: 16px;
+    }
+    .error-msg {
+        margin-bottom: 16px;
+        font-size: 14px;
+        color: var(--el-color-danger);
+    }
+}
+</style>