ace-front-end 1.0.0

package/ace-install-system-ui/src/pages/InstallDesktopApp/components/InstallDesktopAppStep2.vue

@@ -0,0 +1,267 @@
+<template>
+    <div class="sfc-install-desktop-app-step1">
+        <div class="body">
+            <div class="apps custom-card">
+                <div class="apps__title">请选择应用</div>
+                <div class="app-list">
+                    <div
+                        v-for="(item, index) in modelValue"
+                        @click="appClickHandle(index)"
+                        :key="item.appId"
+                        class="app"
+                        :class="{
+                            active: currentDeploy.appId === item.appId,
+                        }"
+                    >
+                        <span>
+                            {{ item.appName }} v{{ item.appVersion }}
+                            <template v-if="item.suppleInfo">
+                                (为 {{ item.suppleInfo }} 所依赖)
+                            </template>
+                        </span>
+                        <i class="aceicon icon-settings_2_fill"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="config custom-card">
+                <template v-if="currentDeploy">
+                    <div class="config__title">
+                        应用
+                        <span> {{ currentDeploy.appName }} v{{ currentDeploy.appVersion }}</span>
+                        <template v-if="currentDeploy.suppleInfo">
+                            (为 {{ currentDeploy.suppleInfo }} 所依赖)
+                        </template>
+                        安装配置
+                    </div>
+                    <div class="config__content">
+                        <el-form label-position="left">
+                            <template v-if="Object.keys(currentDeploy.env).length !== 0">
+                                <!-- <el-divider content-position="left"
+                                    ><span style="font-size: 16px">安装路径</span></el-divider
+                                > -->
+                                <h4 class="sub-title">安装路径</h4>
+                                <div style="padding-left: 16px">
+                                    <el-form-item
+                                        v-for="item in currentDeploy.paths"
+                                        :key="item.machineId"
+                                        :label="`${item.machineName}(${item.machineIp})`"
+                                    >
+                                        <el-input v-model="item.path" readonly></el-input>
+                                    </el-form-item>
+                                </div>
+                            </template>
+                            <template v-if="Object.keys(currentDeploy.env).length !== 0">
+                                <!-- <el-divider content-position="left"
+                                    ><span style="font-size: 16px">环境变量配置</span></el-divider
+                                > -->
+                                <h4 class="sub-title">环境变量配置</h4>
+                                <div style="padding-left: 16px">
+                                    <el-form-item
+                                        v-for="item in currentDeploy.env"
+                                        :key="item.name"
+                                        :label="item.name"
+                                    >
+                                        <el-input
+                                            v-model="item.value"
+                                            :placeholder="item.caption"
+                                        ></el-input>
+                                    </el-form-item>
+                                </div>
+                            </template>
+                            <template v-if="currentDeploy.ini.length !== 0">
+                                <!-- <el-divider content-position="left"
+                                    ><span style="font-size: 16px">ini配置</span></el-divider
+                                > -->
+                                <h4 class="sub-title">ini配置</h4>
+                                <template v-for="(ini, index) in currentDeploy.ini" :key="index">
+                                    <div class="ini-area">ini区域：{{ ini.sectionName }}</div>
+                                    <div style="padding-left: 16px">
+                                        <el-form-item
+                                            v-for="item in ini.items"
+                                            :key="item.name"
+                                            :label="item.name"
+                                        >
+                                            <el-input
+                                                v-model="item.value"
+                                                :placeholder="item.caption"
+                                            ></el-input>
+                                        </el-form-item>
+                                    </div>
+                                </template>
+                            </template>
+                        </el-form>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Deploy } from "@/model/DesktopApp";
+import { computed, onMounted, reactive } from "vue";
+interface Props {
+    modelValue: Deploy[];
+}
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => [],
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+const currentDeploy = computed(() => {
+    return props.modelValue[state.currentDeployIndex];
+});
+
+const state = reactive<{
+    // currentApp: CustomDesktopApp | null;
+    // currentDeploy: CustomDeploy | null;
+    currentDeployIndex: number;
+}>({
+    // currentApp: null,
+    // currentDeploy: null,
+    currentDeployIndex: 0,
+});
+function appClickHandle(index: number) {
+    state.currentDeployIndex = index;
+}
+onMounted(() => {
+    state.currentDeployIndex = 0;
+});
+</script>
+
+<style lang="scss" scoped>
+.sfc-install-desktop-app-step1 {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    :deep(.el-divider) {
+        border-color: var(--ace-light-border-color5);
+        .el-divider__text {
+            background: var(--ace-bg-gradient-2);
+            border-radius: 2px;
+        }
+    }
+    .body {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: row;
+        gap: 16px;
+        :deep(.el-card) {
+            height: 100%;
+        }
+        .custom-card {
+            background-color: var(--ace-bg-color8);
+            border: 1px solid var(--ace-border-color5);
+            border-radius: 5px;
+        }
+        .apps__title,
+        .config__title {
+            color: var(--ace-text-color1);
+            height: 48px;
+            line-height: 48px;
+            padding: 0 16px;
+            font-size: 16px;
+            border-bottom: 1px solid var(--el-border-color);
+        }
+        .config__title {
+            color: var(--ace-text-color3);
+            > span {
+                color: var(--ace-text-color1);
+            }
+        }
+        .apps {
+            flex: 1;
+            height: 100%;
+
+            .app-list {
+                height: calc(100% - 48px);
+                overflow-y: auto;
+                .app {
+                    color: var(--ace-text-color1);
+                    height: 48px;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 16px;
+                    justify-content: space-between;
+                    cursor: pointer;
+                    font-size: 14px;
+                    &.active {
+                        background-color: var(--el-color-primary) !important;
+                        > span {
+                            color: var(--el-color-white);
+                            font-weight: bold;
+                        }
+                        > .aceicon {
+                            color: var(--el-color-white) !important;
+                        }
+                    }
+                    &:hover {
+                        background-color: var(--ace-bg-color8);
+                        > .aceicon {
+                            color: var(--el-menu-hover-text-color);
+                        }
+                    }
+                    > span {
+                        font-size: 14px;
+                        color: var(--el-text-color-regular);
+                    }
+                    > .aceicon {
+                        display: block;
+                        width: 24px;
+                        height: 24px;
+                        line-height: 24px;
+                        text-align: center;
+                        border-radius: 4px;
+                        color: var(--ace-text-color3);
+                    }
+                }
+            }
+        }
+        .config {
+            flex: 4;
+            height: 100%;
+            &__content {
+                height: calc(100% - 48px);
+                overflow-y: auto;
+                padding: 0 16px;
+                .sub-title {
+                    color: var(--ace-text-color1);
+                    // font-weight: normal;
+                    margin: 0 0 8px 0;
+                    padding: 16px 0 8px 0;
+                    font-size: 15px;
+                    border-bottom: 1px solid var(--ace-light-border-color6);
+                }
+                .ini-area {
+                    height: 32px;
+                    line-height: 32px;
+                    font-size: 14px;
+                    color: var(--ace-text-color2);
+                    // margin-bottom: 6px;
+                    line-height: 21px;
+                    font-size: 14px;
+                    // background-color: var(--ace-bg-color8);
+                    padding: 0 16px;
+                }
+                .item-lable {
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: var(--el-text-color-regular);
+                    margin-bottom: 16px;
+                }
+            }
+        }
+    }
+}
+</style>

package/ace-install-system-ui/src/pages/InstallDesktopApp/components/InstallDesktopAppStep3.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="sfc-install-desktop-app-step1">
+        <div class="body">
+            <div class="install-info custom-card">
+                <div class="install-info__title">确认安装明细</div>
+                <div class="install-info__content">
+                    <template v-for="deploy in modelValue" :key="deploy.appId">
+                        <div class="app-info">
+                            安装任务：{{ deploy.appName }}({{ deploy.appVersion }})
+                        </div>
+                        <template v-for="item in deploy.paths" :key="item.machineId">
+                            <div class="machine-info">
+                                <div class="machine-text">
+                                    <div>
+                                        主机名称：<span>{{ item.machineName }}</span>
+                                    </div>
+                                    <div>
+                                        主机IP：<span>{{ item.machineIp }}</span>
+                                    </div>
+                                    <div>
+                                        安装地址：<span>{{ item.path }}</span>
+                                    </div>
+                                </div>
+
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    plain
+                                    @click="downloadInstallPackage(deploy, item)"
+                                    >下载安装包</el-button
+                                >
+                            </div>
+                        </template>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Deploy, CustomDesktopApp, MachineInstallPath } from "@/model/DesktopApp";
+import { computed, onMounted, reactive } from "vue";
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+
+const { prepareDownload } = useDeskTopAppApi();
+interface Props {
+    modelValue: Deploy[];
+    apps: CustomDesktopApp[];
+}
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => [],
+    apps: () => [],
+});
+const state = reactive<{
+    downloadKey: string;
+}>({
+    downloadKey: "",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+function downloadInstallPackage(deploy: Deploy, machine: MachineInstallPath) {
+    if (state.downloadKey == "") {
+        prepareDownload({ deploys: props.modelValue }).then((key) => {
+            // console.log(key);
+
+            // const fileUrl = URL.createObjectURL(file);
+            const link = document.createElement("a");
+            link.style.display = "none";
+            document.body.appendChild(link);
+            let url = `/desktop-apps/download/${deploy.appId}/${machine.machineId}/${key}`;
+            let downloadUrl = import.meta.env.DEV ? "/ace" + url : url;
+            // link.download = `file.txt`;
+            link.href = downloadUrl;
+            link.click();
+            // window.open(downloadUrl);
+        });
+    }
+    //准备下载 下载地址
+}
+// onMounted(() => {
+//     console.log(modelValue);
+// });
+</script>
+
+<style lang="scss" scoped>
+.sfc-install-desktop-app-step1 {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .custom-card {
+        background-color: var(--ace-bg-color8);
+        border: 1px solid var(--ace-border-color5);
+        border-radius: 5px;
+        height: 100%;
+        overflow: hidden;
+    }
+    .body {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: row;
+        gap: 16px;
+        // gap: 16px;
+        :deep(.el-card) {
+            height: 100%;
+        }
+        .install-info {
+            width: 100%;
+            height: 100%;
+            &__title {
+                height: 48px;
+                line-height: 48px;
+                padding: 0 16px;
+                font-size: 16px;
+                border-bottom: 1px solid var(--ace-light-border-color5);
+                color: var(--el-text-color-primary);
+            }
+            &__content {
+                height: calc(100% - 48px);
+                overflow-y: auto;
+                padding: 16px;
+                .app-info {
+                    height: 32px;
+                    line-height: 32px;
+                    color: var(--el-text-color-primary);
+                }
+                .machine-info {
+                    height: 36px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0 16px 0 24px;
+                    position: relative;
+                    border-left: 1px solid var(--el-border-color);
+                    margin-left: 16px;
+                    .machine-text {
+                        font-size: 14px;
+                        display: flex;
+
+                        > div {
+                            color: var(--el-text-color-secondary);
+                            margin-right: 16px;
+                            > span {
+                                color: var(--el-text-color-primary);
+                            }
+                        }
+                    }
+                    &:hover {
+                        background-color: var(--ace-bg-color7);
+                    }
+                    &::before {
+                        content: " ";
+                        position: absolute;
+                        display: block;
+                        height: 1px;
+                        width: 16px;
+                        background-color: var(--el-border-color);
+                        left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/ace-install-system-ui/src/pages/InstallDesktopApp/components/ViewDependencies.vue

@@ -0,0 +1,74 @@
+<template>
+    <custom-dialog v-model="visible" width="40%" :title="props.title" @opend="init">
+        <div class="sfc-view-dependencies">
+            <div v-for="(dependent, index) in dependencies" :key="dependent.id">
+                <DependentApp v-model="dependencies[index]" isFirst />
+                <!-- <template v-if="dependencie">
+                    <div></div>
+                </template> -->
+            </div>
+        </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 CustomDialog from "@/components/CustomDialog.vue";
+import DependentApp from "./DependentApp.vue";
+import { computed, reactive, ref, ComponentInternalInstance } from "vue";
+import { App, CustomDesktopApp } from "@/model/DesktopApp";
+
+import { useStore } from "@/stores";
+const store = useStore();
+// const appManageRef = ref<InstanceType<typeof AppsManage> | null>(null);
+
+interface Props {
+    modelValue: boolean;
+    title: string;
+    dependencies: App[];
+}
+const props = withDefaults(defineProps<Props>(), {
+    apps: () => [],
+    title: "查看依赖",
+    dependencies: () => [],
+});
+
+const emit = defineEmits(["update:modelValue", "update:apps", "update:dependencies", "submit"]);
+
+const state = reactive<{
+    visible: boolean;
+}>({
+    visible: false,
+});
+const dependencies = computed({
+    get() {
+        return props.dependencies;
+    },
+    set(value) {
+        emit("update:dependencies", value);
+    },
+});
+
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit("update:modelValue", value);
+    },
+});
+const submitHandle = () => {};
+
+const init = () => {};
+defineExpose({});
+</script>
+
+<style lang="scss" scoped>
+.sfc-view-dependencies {
+    padding: 16px 0 16px 0;
+}
+</style>

package/ace-install-system-ui/src/pages/UninstallDesktopApp.vue

@@ -0,0 +1,167 @@
+<template>
+    <div
+        class="sfc-uninstall-desktop-app"
+        v-loading="state.loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+        <!-- backgroundColor: 'var(--el-fill-color-light)'  @selection-change="selectionChangeHandler"-->
+        <el-table
+            :header-cell-style="{ fontWeight: 'bold', color: 'var(--install-system-color1)' }"
+            :data="state.tableData"
+            row-key="id"
+            ref="tableRef"
+            class="host-table"
+            height="100%"
+            default-expand-all
+            style="width: 100%"
+            :tree-props="{ children: 'installApps' }"
+        >
+            <el-table-column
+                class-name="custom-first-column-small"
+                prop="name"
+                label="设备 / 应用名称"
+                show-overflow-tooltip
+            >
+                <template #default="scope">
+                    <span
+                        v-if="scope.row.ip"
+                        style="color: var(--el-text-color-primary); font-weight: bold"
+                    >
+                        {{ scope.row.ip }} {{ scope.row.name }}
+                    </span>
+                    <span v-else>{{ scope.row.installedApp.name }}</span>
+                </template>
+            </el-table-column>
+            <!-- <el-table-column prop="name" show-overflow-tooltip label="主机名称" /> -->
+            <el-table-column label="应用版本号">
+                <template #default="scope">
+                    <span v-if="!scope.row.ip">
+                        {{
+                            `${scope.row.installedApp.majorVersion}.${scope.row.installedApp.minorVersion}.${scope.row.installedApp.revisionVersion}`
+                        }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="安装路径" prop="installPath"></el-table-column>
+            <el-table-column label="安装日期" prop="installTime"></el-table-column>
+            <el-table-column label="操作" width="180">
+                <template #default="scope">
+                    <template v-if="!scope.row.ip">
+                        <el-button
+                            size="small"
+                            type="danger"
+                            @click="uninstallApp(scope.row)"
+                            plain
+                            icon="Delete"
+                            >卸载应用</el-button
+                        >
+                        <!-- <el-button size="small" type="primary" plain>编辑</el-button> -->
+                    </template>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    HostParams,
+    DesktopMachine,
+    DesktopMachineSecured,
+    Group,
+    CustomDesktopMachineSecured,
+    DesktopAppInstallInfo,
+    MachineInstalledApps,
+    UninstallAppInfo,
+} from "@/model/DesktopApp";
+import { ComponentMode } from "@/model/Common";
+import { reactive, onMounted, ref, computed } from "vue";
+import type { TableInstance } from "element-plus";
+import { ElMessageBox, ElNotification } from "element-plus";
+import { useDesktopMachineApi } from "@/api/desktopMachineApi";
+import emitter from "@/utils/EventBus";
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+const { getInstallInfos, uninstall } = useDeskTopAppApi();
+// import { useStore } from "@/stores";
+// import { store } from "@jari-ace/app-bolts";
+// const mainStore = useStore();
+// const { getAll, getByCpuAndOs, deleteByIds } = useDesktopMachineApi();
+// emitter.on("mechineChange", getMachineList);
+const tableRef = ref<TableInstance | null>(null);
+const state = reactive<{
+    tableData: MachineInstalledApps[];
+    loading: boolean;
+    selection: CustomDesktopMachineSecured[];
+    formMode: "edit" | "add";
+}>({
+    tableData: [],
+    loading: false,
+    selection: [],
+    formMode: "add",
+});
+
+/**
+ * @property title 展示标题 非必传
+ * @property model
+ */
+function getInstallList() {
+    // state.loading = true;
+    getInstallInfos().then((res) => {
+        // state.loading = false;
+        state.tableData = resolveList(res);
+    });
+}
+
+getInstallList();
+
+function resolveList(installedApps: DesktopAppInstallInfo[]): MachineInstalledApps[] {
+    const machines: MachineInstalledApps[] = [];
+    installedApps.forEach((app) => {
+        app.id = new Date().getMilliseconds() + app.id;
+        if (machines.find((machine) => machine.id === app.machine.id)) return;
+        machines.push({
+            ...app.machine,
+            installApps: [],
+        });
+    });
+
+    machines.forEach((machine) => {
+        machine.installApps = installedApps.filter((app) => app.machine.id === machine.id);
+    });
+
+    return machines;
+}
+function uninstallApp(data: DesktopAppInstallInfo) {
+    ElMessageBox.confirm(
+        `确定要从${data.machine.name}卸载应用${data.installedApp.name}？`,
+        "提示",
+        {
+            confirmButtonText: "确定删除",
+            cancelButtonText: "取消",
+            type: "warning",
+        }
+    ).then(() => {
+        // state.loading = true;
+        let uninstallList: UninstallAppInfo[] = [];
+        uninstallList[0] = {
+            machineId: data.machine.id,
+            appId: data.installedApp.id,
+        };
+
+        // uninstallObj[data.installedApp.id] = data.;
+        uninstall(uninstallList).then((res) => {
+            emitter.emit("showTaskList");
+            //延迟执行
+            setTimeout(() => {
+                getInstallList();
+            }, 4000);
+        });
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.sfc-host-manage {
+    height: 100%;
+}
+</style>