ace-front-end 1.0.0

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

@@ -0,0 +1,509 @@
+<template>
+    <div class="sfc-host-manage" :v-loading="state.loading">
+        <div class="toolbar">
+            <div class="left">
+                <div class="title" v-if="props.title">{{ props.title }}</div>
+                <div v-if="props.mode === 'manage'">
+                    <el-input placeholder="Please input" class="input-with-select">
+                        <template #append>
+                            <el-button icon="Search"/>
+                        </template>
+                    </el-input>
+                </div>
+            </div>
+            <div class="right" v-if="props.mode === 'manage'">
+                <el-button icon="Plus" type="success" plain @click="addClickHandle"
+                >添加主机
+                </el-button
+                >
+                <el-button
+                    v-if="state.selection.length !== 0"
+                    @click="deleteClickHandle"
+                    icon="Delete"
+                    type="danger"
+                    plain
+                >删除主机
+                </el-button
+                >
+            </div>
+        </div>
+
+        <div class="table" ref="tableBoxRef">
+            <AddHostMachine
+                :mode="state.formMode"
+                ref="addHostMachineRef"
+                @add-success="successHandle"
+                @update-success="successHandle"
+                :groups="state.tableData"
+            />
+            <!-- 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%"
+                size="small"
+                default-expand-all
+                style="width: 100%"
+                :tree-props="{ children: 'children' }"
+            >
+                <!-- :span-method="tableSpanRow" -->
+                <!-- <el-table-column type="selection" width="40" /> -->
+                <el-table-column
+                    class-name="custom-first-column-small"
+                    prop="name"
+                    label="分组名称 / 主机IP"
+                    show-overflow-tooltip
+                >
+                    <template #default="scope">
+                        <!-- style="font-weight:bold;" -->
+                        <el-checkbox
+                            v-model="scope.row.checked"
+                            style="margin-right: 8px"
+                            @change="checkBoxChangeHandle(scope.row, $event)"
+                        ></el-checkbox>
+                        <span
+                            v-if="scope.row.type === 'group'"
+                            style="color: var(--el-text-color-primary); font-weight: bold"
+                        >{{ scope.row.category }}</span
+                        >
+                        <span v-else>{{ scope.row.ip }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" show-overflow-tooltip label="主机名称"/>
+                <el-table-column
+                    v-if="props.mode === 'manage'"
+                    show-overflow-tooltip
+                    prop="sshUser"
+                    label="SSH用户"
+                />
+                <el-table-column
+                    v-if="props.mode === 'manage'"
+                    show-overflow-tooltip
+                    prop="os"
+                    label="系统"
+                />
+                <el-table-column
+                    v-if="props.mode === 'manage'"
+                    show-overflow-tooltip
+                    prop="cpu"
+                    label="cpu类型"
+                />
+                <el-table-column
+                    v-if="props.mode === 'select'"
+                    show-overflow-tooltip
+                    prop="sshUser"
+                    label="当前设施是否已安装"
+                >
+                    <template #default="scope">
+                        <template v-if="scope.row.type !== 'group'">
+                            <el-tag size="small" type="success" v-if="!scope.row.installed"
+                            >未安装
+                            </el-tag
+                            >
+                            <el-tag size="small" type="warning" v-else>已安装</el-tag>
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="180" v-if="props.mode === 'manage'">
+                    <template #default="scope">
+                        <template v-if="scope.row.type !== 'group'">
+                            <el-button
+                                @click="connectTerminal(scope.row)"
+                                size="small"
+                                type="primary"
+                                plain
+                            >连接终端
+                            </el-button
+                            >
+                            <el-button
+                                size="small"
+                                type="primary"
+                                plain
+                                @click="editClickHandle(scope.row)"
+                            >编辑
+                            </el-button
+                            >
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="安装路径" v-if="props.mode === 'select'">
+                    <template #default="{ row }">
+                        <template v-if="row.type !== 'group' && row.checked">
+                            <el-input
+                                :disabled="unifiedPathOpen"
+                                size="small"
+                                placeholder="请填写安装路径"
+                                v-model="row.path"
+                                @input="pathChange(row)"
+                            ></el-input>
+                        </template>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="default-path" v-if="props.mode === 'select'">
+            <div class="left">
+                统一安装路径
+                <el-switch
+                    v-model="unifiedPathOpen"
+                    style="margin-left: 16px"
+                    @change="unifiedPathSwichHandle"
+                ></el-switch>
+            </div>
+            <div class="right">
+                <el-input
+                    v-if="unifiedPathOpen"
+                    v-model="unifiedPath"
+                    placeholder="请填写统一路径"
+                    @input="unifiedPathChangeHandle"
+                ></el-input>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import AddHostMachine from "./AddHostMachine.vue";
+import {
+    HostParams,
+    DesktopMachine,
+    DesktopMachineSecured,
+    Group,
+    CustomDesktopMachineSecured,
+} 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 {useStore} from "@/stores";
+import {store} from "@jari-ace/app-bolts";
+
+const mainStore = useStore();
+const {getAll, getByCpuAndOs, deleteByIds} = useDesktopMachineApi();
+const addHostMachineRef = ref<InstanceType<typeof AddHostMachine> | null>(null);
+const tableBoxRef = ref<HTMLDivElement | null>(null);
+const tableRef = ref<TableInstance | null>(null);
+// interface SpanMethodProps {
+//     row: Group | DesktopMachine;
+//     column: TableColumnCtx<Group | DesktopMachine>;
+//     rowIndex: number;
+//     columnIndex: number;
+// }
+
+const state = reactive<{
+    tableData: Group[];
+    loading: boolean;
+    selection: CustomDesktopMachineSecured[];
+    formMode: "edit" | "add";
+}>({
+    tableData: [],
+    loading: false,
+    selection: [],
+    formMode: "add",
+});
+
+/**
+ * @property title 展示标题 非必传
+ * @property model
+ */
+//  <{
+//     title?: string;
+//     mode: ComponentMode;
+//     hostParams?: hostParams;
+//     ids?: (string | number)[];
+//     //是否根据参数请求数据
+// }>
+
+interface Props {
+    mode: ComponentMode;
+    title?: string;
+    hostParams?: HostParams;
+    machines: CustomDesktopMachineSecured[];
+    unifiedPathOpen?: boolean;
+    unifiedPath?: string;
+}
+
+const emit = defineEmits(["machineSelection", "update:unifiedPathOpen", "update:unifiedPath"]);
+const props = withDefaults(defineProps<Props>(), {
+    title: "",
+    machines: () => [],
+    unifiedPathOpen: true,
+    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);
+    },
+});
+
+emitter.on("mechineChange", getMachineList);
+
+function checkBoxChangeHandle(row: Group | CustomDesktopMachineSecured, checked: boolean) {
+    if (row.type === "group") {
+        row.children.forEach((item) => {
+            item.checked = checked;
+        });
+    }
+    state.selection = [];
+    state.tableData.forEach((group) => {
+        if (group.children.length === 0) return;
+        group.children.forEach((item) => {
+            if (unifiedPathOpen.value) {
+                item.path = unifiedPath.value;
+            }
+            if (item.checked) {
+                state.selection.push(item);
+            }
+        });
+    });
+    emit("machineSelection", state.selection);
+}
+
+function addSelection(machine: CustomDesktopMachineSecured) {
+    let has: boolean = state.selection.findIndex((item) => item.id === machine.id) !== -1;
+    if (has) return;
+    state.selection.push(machine);
+    emit("machineSelection", state.selection);
+}
+
+function pathChange(row: CustomDesktopMachineSecured) {
+    if (!row.checked) return;
+    emit("machineSelection", state.selection);
+}
+
+function successHandle() {
+    //如果 mode 是select模式 则根据 hostParams.os hostParams.cpu 作为参数去请求
+    //如果 mode 是manage模式 则直接请求所有
+    // getMachineList();
+    emitter.emit("mechineChange");
+    ElNotification({
+        type: "success",
+        title: state.formMode === "add" ? "新建桌面主机成功" : "修改桌面主机成功",
+    });
+}
+
+function resolveDesktopMachineList(machines: DesktopMachineSecured[]): Group[] {
+    const groups: Group[] = [];
+
+    const customMachines: CustomDesktopMachineSecured[] = machines.map((machine) => {
+        let selectedData: CustomDesktopMachineSecured | null = null;
+        let customMachine: CustomDesktopMachineSecured | null = null;
+        props.machines.forEach((item) => {
+            if (machine.id === item.id) {
+                selectedData = item;
+            }
+        });
+        if (selectedData !== null) {
+            customMachine = {
+                ...machine,
+                ...(
+                    selectedData as CustomDesktopMachineSecured
+                ),
+            };
+        } else {
+            customMachine = {
+                ...machine,
+                type: "item",
+                path: "",
+                checked: false,
+            };
+        }
+        if (customMachine.checked) {
+            addSelection(customMachine);
+        }
+
+        return customMachine;
+    });
+    customMachines.forEach((machine) => {
+        if (groups.findIndex((group) => group.category === machine.category) === -1) {
+            groups.push({
+                type: "group",
+                category: machine.category,
+                checked: false,
+                children: [],
+                id: "group" + groups.length + 1,
+            });
+        }
+    });
+    groups.forEach((group) => {
+        group.children = customMachines.filter((machine) => machine.category == group.category);
+    });
+    return groups;
+}
+
+function unifiedPathSwichHandle(val: boolean) {
+    unifiedPathOpen.value = val;
+    unifiedPathChangeHandle(unifiedPath.value);
+}
+
+function unifiedPathChangeHandle(val: string) {
+    if (!unifiedPathOpen.value) return;
+    state.tableData.forEach((group) => {
+        if (group.children && group.children.length > 0) {
+            group.children.forEach((machine) => {
+                if (machine.checked) {
+                    machine.path = val;
+                }
+            });
+        }
+    });
+    unifiedPath.value = val;
+    emit("machineSelection", state.selection);
+}
+
+// function tableSpanRow({ row }: SpanMethodProps) {
+//     // if (row.type === "group") {
+//     //     if (columnIndex === 1) {
+//     //         return {
+//     //             rowspan: 1,
+//     //             colspan: 7,
+//     //         };
+//     //     }
+//     // }
+// }
+function getMachineList() {
+    state.loading = true;
+    //重置选择结果
+    state.selection = [];
+    if (props.mode === "select") {
+        getByCpuAndOs(props.hostParams?.appId, props.hostParams?.os, props.hostParams?.cpu).then(
+            (res) => {
+                state.tableData = resolveDesktopMachineList(res);
+
+                state.loading = false;
+            }
+        );
+    } else {
+        getAll().then((res) => {
+            state.tableData = resolveDesktopMachineList(res);
+            mainStore.machines = state.tableData;
+            state.loading = false;
+        });
+    }
+}
+
+function deleteClickHandle() {
+    let msg = "";
+    state.selection.forEach((item) => {
+        msg += `【${item.name}】`;
+    });
+
+    ElMessageBox.confirm(`您确定要删除${msg}吗？`, `提示`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+    }).then(() => {
+        let ids: number[] = state.selection.map((item) => item.id) as number[];
+        deleteByIds(ids).then(() => {
+            getMachineList();
+            state.selection = [];
+            ElNotification({
+                type: "success",
+                title: msg + "删除成功",
+            });
+        });
+    });
+}
+
+function addClickHandle() {
+    state.formMode = "add";
+    addHostMachineRef.value?.init(null);
+}
+
+function editClickHandle(row: DesktopMachine) {
+    state.formMode = "edit";
+    addHostMachineRef.value?.init(row.id);
+}
+
+function connectTerminal(row: DesktopMachine) {
+    mainStore.machineTerminals = [row];
+    // mainStore.connectMachineInfo = row;
+    mainStore.connectMachineType = "DESKTOP";
+    mainStore.connectTerminalVisible = true;
+}
+
+onMounted(() => {
+    if (props.mode === "manage") {
+        getMachineList();
+    }
+});
+
+defineExpose({
+    getMachineList,
+});
+</script>
+
+<style lang="scss" scoped>
+.sfc-host-manage {
+    height: 100%;
+
+    .table {
+        height: calc(100% - 48px - 49px);
+    }
+
+    .default-path {
+        padding: 8px 16px;
+        display: flex;
+        height: 48px;
+
+        > .left {
+            font-size: 14px;
+            color: var(--el-text-color-regular);
+            display: flex;
+            align-items: center;
+        }
+
+        > .right {
+            flex: 1;
+            padding-left: 32px;
+        }
+    }
+
+    :deep(.host-table .el-table__header) {
+        .el-table-column--selection {
+            .el-checkbox {
+                display: none;
+            }
+        }
+    }
+
+    .toolbar {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 8px 16px;
+        height: 49px;
+        border-bottom: 1px solid var(--el-border-color);
+
+        > .left {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            justify-content: space-between;
+
+            .title {
+                font-size: 14px;
+                color: var(el-text-color-primary);
+                margin-right: 16px;
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+    <el-drawer
+        modal-class="device-manage-drawer"
+        :model-value="modelValue"
+        :close-on-click-modal="false"
+        :append-to-body="false"
+        size="1100"
+        :with-header="false"
+    >
+        <div class="sfc-device-manage-drawer">
+            <div class="header">
+                <div class="close-btn" @click="modelValue = false">
+                    <i class="aceicon icon-Rightarrow"></i>
+                </div>
+                <div class="title">设备管理</div>
+            </div>
+            <div class="body">
+                <el-tabs type="border-card" class="device-manage-tabs">
+                    <el-tab-pane label="桌面主机">
+                        <div class="tab-content">
+                            <HostManage
+                                mode="manage"
+                                :machines="[]"
+                                :host-parameters="{ os: 'All', cpu: 'All' }"
+                            ></HostManage>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="服务器" disabled></el-tab-pane>
+                </el-tabs>
+            </div>
+        </div>
+    </el-drawer>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import HostManage from "./HostMachineManage.vue";
+
+const props = defineProps<{
+    modelValue: boolean;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+const modelValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emit("update:modelValue", val);
+    },
+});
+/**
+ * 初始化组件
+ * @param show 是否显示
+ */
+
+/**
+ * 关闭事件
+ */
+
+defineExpose({});
+</script>
+<style lang="scss" scoped>
+.dark-theme {
+    .sfc-device-manage-drawer {
+        .header {
+            background-color: var(--ace-bg-color8);
+        }
+    }
+}
+:deep(.device-manage-drawer) {
+    .el-drawer__body {
+        overflow: hidden !important;
+    }
+}
+.sfc-device-manage-drawer {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+    }
+    :deep(.device-manage-tabs) {
+        height: 100%;
+        .el-tabs__content {
+            padding: 0;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.device-manage-drawer {
+    position: absolute !important;
+    z-index: 999 !important;
+    display: flex;
+
+    .el-drawer__body {
+        padding: 0;
+    }
+
+    .body {
+        // padding: 16px;
+        flex: 1;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        height: 48px;
+        align-items: center;
+        gap: 16px;
+
+        // border-bottom: 1px solid var(--el-border-color);
+        .title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--el-text-color-primary);
+        }
+
+        .close-btn {
+            cursor: pointer;
+            width: 48px;
+            height: 100%;
+            border-right: 1px solid var(--el-border-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: background-color var(--el-transition-duration);
+
+            &:hover {
+                background-color: var(--ace-fill-color3);
+            }
+
+            > .aceicon {
+                font-size: 20px;
+                color: var(--el-text-color-regular);
+            }
+        }
+    }
+}
+</style>