ace-front-end 1.0.0

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

@@ -0,0 +1,138 @@
+<template>
+    <div class="sfc-dependent-app" :class="{ first: props.isFirst }">
+        <div class="dependent-app-info">
+            {{ modelValue.name }}
+            <el-select v-model="modelValue.currentVersion" @change="dependentAppChange($event)">
+                <el-option
+                    v-for="app in modelValue.children"
+                    :key="app.id"
+                    :label="'v ' + app.version"
+                    :value="app.version"
+                ></el-option>
+            </el-select>
+        </div>
+
+        <template v-if="currentApp !== null && currentApp.dependencieApps.length > 0">
+            <DependentApp
+                v-for="(dependentApp, index) in currentApp.dependencieApps"
+                :key="dependentApp.id"
+                :isFirst="false"
+                v-model="currentApp.dependencieApps[index]"
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, defineComponent } from "vue";
+import { App, CustomDesktopApp } from "@/model/DesktopApp";
+import { useStore } from "@/stores";
+const store = useStore();
+// const appManageRef = ref<InstanceType<typeof AppsManage> | null>(null);
+defineComponent({
+    name: "DependentApp",
+});
+
+interface Props {
+    modelValue: App;
+    isFirst: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    isFirst: false,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const currentApp = computed((): CustomDesktopApp | null => {
+    const index: number = modelValue.value.children.findIndex(
+        (app) => app.version === modelValue.value.currentVersion
+    );
+    if (index === -1) return null;
+
+    return modelValue.value.children[index];
+});
+
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+const submitHandle = () => {};
+const dependentAppChange = (version: string) => {
+    console.log("依赖应用发生改变", version);
+
+    //找到当前应用的应用信息并找到所属依赖
+    modelValue.value.children.forEach((app, index) => {
+        if (app.version === version) {
+            app.dependencieApps = getDependencies(app);
+        }
+    });
+};
+const getDependencies = (app: CustomDesktopApp, currentAppIndex: number = 0): App[] => {
+    const dependencieApps: App[] = [];
+    if (app.dependencies.length !== 0) {
+        app.dependencies.forEach((appName) => {
+            if (appName) {
+                store.apps.forEach((item) => {
+                    if (item.name === appName) {
+                        let currentApp = item.children[currentAppIndex];
+                        item.currentVersion = currentApp.version;
+                        if (currentApp.dependencies.length !== 0) {
+                            currentApp.dependencieApps = getDependencies(currentApp);
+                        }
+                        dependencieApps.push(item);
+                    }
+                });
+            }
+        });
+    }
+    return dependencieApps;
+};
+const init = () => {};
+defineExpose({});
+</script>
+
+<style lang="scss" scoped>
+.sfc-dependent-app {
+    padding: 0 16px 0 48px;
+    position: relative;
+    border-left: 1px solid var(--ace-light-border-color4);
+    margin-left: 8px;
+    &.first {
+        padding: 0 16px 0 24px;
+        border-left: none;
+        &::after,
+        &::before {
+            display: none !important;
+        }
+    }
+    // &::after {
+    //     position: absolute;
+    //     top: -39px;
+    //     left: -16px;
+    //     display: block;
+    //     content: "";
+    //     width: 1px;
+    //     background-color: var(--ace-light-border-color4);
+    //     height: 55px;
+    // }
+    &::before {
+        position: absolute;
+        top: 21px;
+        left: 0;
+        display: block;
+        content: "";
+        width: 40px;
+        background-color: var(--ace-light-border-color4);
+        height: 1px;
+    }
+    .dependent-app-info {
+        color: var(--ace-text-color2);
+        height: 42px;
+        line-height: 42px;
+    }
+}
+</style>

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

@@ -0,0 +1,232 @@
+<template>
+    <div class="sfc-install-desktop-app-step1">
+        <!-- <InstallModuleHeader
+            title="步骤1：选择应用及主机"
+            description="请先选择需要安装的应用，再选择需要安装到的主机。"
+        /> -->
+        <div class="body">
+            <div class="apps custom-card">
+                <AppsManage
+                    title="选择应用"
+                    mode="select"
+                    :apps="props.modelValue"
+                    @cell-click="appCellClickHandle"
+                    @app-seleced="appSelectedHandle"
+                    @app-selection="appSelectionHandle"
+                />
+            </div>
+            <div class="hosts custom-card">
+                <div class="empty-prompt" v-if="modelValue.length === 0 || !state.currentApp">
+                    <el-image
+                        style="width: 60%; height: 60%"
+                        src="/images/desktopAppInstall/not-data.svg"
+                    ></el-image>
+
+                    <p v-if="modelValue.length === 0" class="prompt-text">
+                        尚没有选择需要安装的应用，请双击或勾选需要安装的应用
+                    </p>
+                    <p v-else class="prompt-text">请选中已勾选的应用或点击“选择安装到的主机”按钮</p>
+                </div>
+                <HostManage
+                    v-else
+                    ref="hostManageRef"
+                    :title="machineTitle"
+                    isRequestDataByParams
+                    mode="select"
+                    :echo="state.machines"
+                    :hostParams="hostParams"
+                    :unified-path-open="state.currentApp ? state.currentApp.unifiedPathOpen : false"
+                    :unified-path="state.currentApp ? state.currentApp.unifiedPath : ''"
+                    @unified-path-change="unifiedpathchangeHandle"
+                    @unified-path-open-change="unifiedpathOpenchangeHandle"
+                    @machine-selection="machineSelectionHandle"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, reactive, ref, unref, computed, watch, onMounted } from "vue";
+import {
+    CustomDesktopApp,
+    DesktopAppInstallCommand,
+    Deploy,
+    CustomCpuArchType,
+    CustomDesktopOS,
+    HostParams,
+    DesktopMachine,
+    CustomDesktopMachineSecured,
+    MachineInstallPath,
+} from "@/model/DesktopApp";
+import AppsManage from "@/components/AppsManage/AppsManage.vue";
+import HostManage from "@/components/HostMachineManage/HostMachineManage.vue";
+// import { ClickOutside as vClickOutside } from "element-plus";
+const emit = defineEmits(["update:modelValue"]);
+
+interface Props {
+    modelValue: CustomDesktopApp[];
+}
+
+const props = withDefaults(defineProps<Props>(), { modelValue: () => [] });
+
+const state = reactive<{
+    deployList: DesktopAppInstallCommand;
+    currentApp: CustomDesktopApp | null;
+    machines: CustomDesktopMachineSecured[];
+    apps: CustomDesktopApp[];
+}>({
+    deployList: {
+        deploys: [],
+    },
+    currentApp: null,
+    machines: [],
+    apps: [],
+});
+
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit("update:modelValue", value);
+    },
+});
+
+const tebleCellRef = ref<any>(null);
+const hostManageRef = ref<InstanceType<typeof HostManage> | null>(null);
+const hostParams = computed((): HostParams => {
+    if (state.currentApp === null) {
+        return {
+            os: "LINUX",
+            cpu: "ARM64",
+            appId: 0,
+        };
+    }
+    return {
+        os: state.currentApp?.supportOs,
+        cpu: state.currentApp?.supportCpu,
+        appId: state.currentApp?.id,
+    };
+});
+const machineTitle = computed(() => {
+    if (state.currentApp !== null) {
+        return `为${state.currentApp.name}(${state.currentApp.majorVersion}.${state.currentApp.minorVersion}.${state.currentApp.revisionVersion})选择安装到的主机`;
+    }
+    return "";
+});
+function unifiedpathOpenchangeHandle(val: boolean) {
+    if (state.currentApp === null) return;
+    state.apps.forEach((app) => {
+        if (app.id === state.currentApp?.id) {
+            app.unifiedPathOpen = val;
+        }
+    });
+    state.currentApp.unifiedPathOpen = val;
+    modelValue.value = state.apps;
+    // state.currentApp.unifiedPathOpen = val;
+}
+function unifiedpathchangeHandle(val: string) {
+    if (state.currentApp === null) return;
+    // state.currentApp.unifiedPath = val;
+    state.apps.forEach((app) => {
+        if (app.id === state.currentApp?.id) {
+            app.unifiedPath = val;
+        }
+    });
+    modelValue.value = state.apps;
+}
+function appSelectedHandle(app: CustomDesktopApp) {
+    state.currentApp = app;
+
+    state.currentApp.unifiedPathOpen = true;
+    //设置默认的统一安装路径
+    modelValue.value.forEach((item) => {
+        if (item.id === state.currentApp?.id) {
+            state.machines = item.machines;
+        }
+    });
+    hostManageRef.value?.getMachineList();
+}
+function appCellClickHandle(row: CustomDesktopApp, column: any, cell: any, event: Event) {
+    tebleCellRef.value = cell;
+}
+function appSelectionHandle(apps: CustomDesktopApp[]) {
+    modelValue.value = apps;
+    state.apps = apps;
+    if (apps.length === 0) {
+        state.currentApp = null;
+    }
+}
+function machineSelectionHandle(machines: CustomDesktopMachineSecured[]) {
+    if (state.currentApp === null) return;
+    state.apps.forEach((app) => {
+        if (app.id === state.currentApp?.id) {
+            app.machines = machines;
+            // machines.forEach((machine) => {
+            //     app.machines = [
+            //         ...app.machines,
+            //         {
+            //             machineName: machine.name,
+            //             machineId: machine.id,
+            //             machineIp: machine.ip,
+            //             path: machine.path,
+            //         },
+            //     ];
+            // });
+        }
+    });
+    modelValue.value = state.apps;
+}
+
+onMounted(() => {
+    state.apps = props.modelValue;
+});
+</script>
+
+<style lang="scss" scoped>
+.sfc-install-desktop-app-step1 {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .body {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: row;
+        gap: 16px;
+        :deep(.el-card) {
+            height: 100%;
+            .el-card__body {
+                padding: 16px 0;
+                height: 100%;
+            }
+        }
+        .custom-card {
+            background-color: #fff;
+            height: 100%;
+            overflow: hidden;
+            border-radius: 4px;
+            box-shadow: var(--el-box-shadow-light);
+        }
+        .apps {
+            flex: 4;
+        }
+        .hosts {
+            flex: 3;
+            .empty-prompt {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                .prompt-text {
+                    font-size: 14px;
+                    color: var(--el-text-color-secondary);
+                }
+            }
+        }
+    }
+}
+</style>