ace-front-end 1.0.0

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

@@ -0,0 +1,441 @@
+<template>
+    <div
+        class="sfc-app-manage"
+        v-loading="state.loading"
+        element-loading-background="rgba(0, 0, 0, 0.5)"
+    >
+        <div class="toolbar">
+            <div class="left">
+                <div class="title" v-if="props.title">{{ props.title }}</div>
+                <div>
+                    <!-- <el-input placeholder="Please input" class="input-with-select">
+                        <template #append>
+                            <el-button icon="Search" />
+                        </template>
+                    </el-input> -->
+                </div>
+            </div>
+            <div class="right">
+                <el-button
+                    v-if="props.mode !== 'select'"
+                    icon="Plus"
+                    type="success"
+                    plain
+                    @click="addAppHandle"
+                    >添加应用</el-button
+                >
+                <el-button
+                    v-if="state.selection.length !== 0 && props.mode !== 'select'"
+                    @click="deleteClickHandle"
+                    icon="Delete"
+                    type="danger"
+                    plain
+                    >删除应用</el-button
+                >
+            </div>
+        </div>
+        <div class="table" ref="tableBoxRef">
+            <AddApp ref="addAppRef" @add-success="addSuccessHandle" :apps="state.tableData" />
+            <!-- @select="handleCheckboxChange" -->
+            <el-table
+                ref="tableRef"
+                :header-cell-style="{ fontWeight: 'bold', color: 'var(--install-system-color1)' }"
+                :data="state.tableData"
+                row-key="id"
+                default-expand-all
+                size="small"
+                :span-method="spanRowMethod"
+                height="100%"
+                highlight-current-row
+                class="app-table ace-custom-table"
+                style="width: 100%"
+                @row-click="rowClickHandle"
+                @row-dblclick="rowDblClickHandle"
+                :tooltip-options="{ effect: 'light' }"
+                :tree-props="{ children: 'children' }"
+            >
+                <el-table-column
+                    width="100"
+                    label="应用名称"
+                    class-name="custom-first-column-small"
+                >
+                    <template #default="{ row }">
+                        <span class="teble-app-name" v-if="row.type === 'parent'">{{
+                            row.name
+                        }}</span>
+
+                        <el-checkbox
+                            v-else
+                            class="row-checkbox"
+                            :disabled="row.disabled"
+                            v-model="row.checked"
+                            @change="
+                                ($event:any) => {
+                                    checkboxChangeHandle(row, $event);
+                                }
+                            "
+                        >
+                        </el-checkbox>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="versions"
+                    :show-overflow-tooltip="{ effect: 'light' } as ElTooltipProps"
+                    label="版本号"
+                >
+                    <template #default="{ row }: { row: CustomDesktopApp }">
+                        <el-tooltip
+                            v-if="row.type == 'children'"
+                            :content="`应用说明：${row.caption}`"
+                        >
+                            <span>{{
+                                `${row.majorVersion}.${row.minorVersion}.${row.revisionVersion}`
+                            }}</span>
+                        </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="supportOs" label="支持系统">
+                </el-table-column>
+                <el-table-column
+                    show-overflow-tooltip
+                    prop="supportCpu"
+                    label="支持cpu类型"
+                    min-width="82"
+                ></el-table-column>
+                <el-table-column
+                    v-if="props.mode === 'manage'"
+                    show-overflow-tooltip
+                    prop="uploadTime"
+                    label="更新时间"
+                ></el-table-column>
+
+                <el-table-column
+                    show-overflow-tooltip
+                    prop="caption"
+                    label="说明"
+                ></el-table-column>
+
+                <!-- <el-table-column width="148" label="操作" v-if="props.mode === 'select'">
+                    <template #default="{ row }">
+                        <el-button
+                            v-if="props.mode === 'select' && row.type !== 'parent' && row.checked"
+                            size="small"
+                            type="primary"
+                            plain
+                            @click="selectMachine(row)"
+                            >选择安装到的主机</el-button
+                        >
+                    </template>
+                </el-table-column> -->
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { clone } from "lodash-es";
+import AddApp from "./AddApp.vue";
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+
+import {
+    reactive,
+    onMounted,
+    ref,
+    watch,
+    nextTick,
+    getCurrentInstance,
+    ComponentInternalInstance,
+} from "vue";
+import { useWindowSize } from "@vueuse/core";
+import {
+    DesktopApp,
+    CustomCpuArchType,
+    CustomDesktopOS,
+    HostParams,
+    CustomDesktopApp,
+    App,
+} from "@/model/DesktopApp";
+import { ComponentMode } from "@/model/Common";
+import {
+    ElMessageBox,
+    ElNotification,
+    ElTable,
+    ElTooltipProps,
+    TableColumnCtx,
+} from "element-plus";
+import emitter from "@/utils/EventBus";
+import { useStore } from "@/stores";
+const store = useStore();
+const desktopAppApi = useDeskTopAppApi();
+
+const { getAll, deleteByIds } = desktopAppApi;
+const emit = defineEmits(["appSelection", "appSeleced", "appCheckboxChange"]);
+const tableRef = ref<InstanceType<typeof ElTable>>();
+const addAppRef = ref<InstanceType<typeof AddApp> | null>(null);
+const tableBoxRef = ref<HTMLDivElement | null>(null);
+
+interface SpanMethodProps {
+    row: App | CustomDesktopApp;
+    column: TableColumnCtx<App | CustomDesktopApp>;
+    rowIndex: number;
+    columnIndex: number;
+}
+
+//监听全局事件
+emitter.on("desktopAppChange", getAllApp);
+
+/**
+ * 表格所需要的格式
+ */
+//let desktopAppList: CustomDesktopApp[] = [];
+
+const state = reactive<{
+    tableData: App[];
+    addDialogVisible: boolean;
+    fileList: [];
+    loading: boolean;
+    selection: CustomDesktopApp[];
+}>({
+    tableData: [],
+    addDialogVisible: false,
+    fileList: [],
+    selection: [],
+    loading: false,
+});
+
+const props = defineProps<{
+    apps: CustomDesktopApp[];
+    title?: string;
+    mode: ComponentMode;
+}>();
+
+onMounted(() => {
+    //获取table 容器的高度
+    // state.tableData = resolveDesktopAppList(desktopAppList);
+    getAllApp();
+});
+function spanRowMethod({ row, columnIndex }: SpanMethodProps) {
+    if (columnIndex === 0) {
+        if (row.type === "parent") {
+            return {
+                rowspan: 1,
+                colspan: 7,
+            };
+        }
+    }
+}
+
+const cellStyleHandle = ({ columnIndex }: { columnIndex: number }) => {
+    if (columnIndex === 0) {
+        return {};
+    }
+};
+function selectMachine(row: CustomDesktopApp) {
+    emit("appSeleced", row);
+}
+function addAppHandle() {
+    addAppRef.value?.init();
+}
+
+function deleteClickHandle() {
+    let msg = "";
+    state.selection.forEach((item) => {
+        msg += `【${item.name}：${item.majorVersion}.${item.minorVersion}.${item.revisionVersion}】`;
+    });
+
+    ElMessageBox.confirm(`您确定要删除${msg}吗？`, `提示`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+    }).then(() => {
+        let ids = state.selection.map((item) => item.id);
+        deleteByIds(ids).then(() => {
+            getAllApp();
+            state.selection = [];
+            ElNotification({
+                type: "success",
+                title: "删除成功",
+            });
+        });
+    });
+}
+
+function getAllApp() {
+    getAll().then((res) => {
+        /*
+        desktopAppList = res.map((item) => ({
+            ...item,
+            checked: false,
+            machines: [],
+            unifiedPathOpen: false,
+            unifiedPath: "",
+            dependencieApps: [],
+        }));
+        */
+        state.tableData = resolveDesktopAppList(res);
+        store.apps = state.tableData;
+        state.loading = false;
+    });
+}
+function addSuccessHandle() {
+    emitter.emit("desktopAppChange");
+}
+function rowClickHandle(row: CustomDesktopApp) {
+    if (row.type !== "children" || !row.checked) {
+        return;
+    }
+    emit("appSeleced", row);
+    // row.checked = !row.checked;
+}
+
+function rowDblClickHandle(row: CustomDesktopApp) {
+    checkboxChangeHandle(row, !row.checked);
+}
+
+function resolveDesktopAppList(desktopApps: DesktopApp[]): App[] {
+    const appList: App[] = [];
+    const apps: CustomDesktopApp[] = [];
+    desktopApps.forEach((desktopApp, index) => {
+        const appInfo: CustomDesktopApp = {
+            ...desktopApp,
+            checked: false,
+            type: "children",
+            dependencieApps: [],
+            machines: [],
+            unifiedPathOpen: true,
+            unifiedPath: desktopApp.supportOs === "LINUX" ? "/usr/local/ace" : "d:/ace",
+            version: `${desktopApp.majorVersion}.${desktopApp.minorVersion}.${desktopApp.revisionVersion}`,
+        };
+        apps.push(appInfo);
+        //if (appInfo.checked) {
+        //  checkboxChangeHandle(appInfo, true);
+        // }
+        if (appList.findIndex((app) => app.name === desktopApp.name) !== -1) return;
+        appList.push({
+            name: desktopApp.name,
+            children: [],
+            id: "app" + index,
+            currentVersion: "",
+            type: "parent",
+        });
+    });
+    if (appList.length === 0) return [];
+    appList.forEach((group) => {
+        group.children = apps.filter((app) => {
+            return app.name === group.name;
+        });
+    });
+    return appList;
+}
+function checkboxChangeHandle(row: CustomDesktopApp, checked: boolean) {
+    state.loading = true;
+    if (props.mode === "select") {
+        state.tableData.forEach((app) => {
+            app.children.forEach((item) => {
+                if (item.id === row.id) {
+                    item.checked = checked;
+                } else {
+                    item.checked = false;
+                }
+            });
+        });
+        if (checked) {
+            emit("appSelection", [clone(row)]);
+        } else {
+            emit("appSelection", []);
+        }
+    } else {
+        emit("appCheckboxChange", row, checked);
+        //处理选中状态
+        if (checked) {
+            state.selection.push(row);
+            //找到选中依赖的依赖应用 并且选中
+        } else {
+            state.selection = state.selection.filter((app) => app.id !== row.id);
+        }
+        emit("appSelection", state.selection);
+    }
+    nextTick(() => {
+        state.loading = false;
+    });
+}
+
+function getSelectionApps() {
+    return state.selection;
+}
+function getApps(): App[] {
+    return clone(state.tableData);
+}
+
+defineExpose({
+    getSelectionApps,
+    getAllApp,
+    getApps,
+});
+</script>
+
+<style lang="scss" scoped>
+.sfc-app-manage {
+    height: 100%;
+    :deep(.row-checkbox) {
+        height: 20px;
+    }
+    :deep(.app-table) {
+        .el-table__header {
+            .el-table-column--selection {
+                .el-checkbox {
+                    display: none;
+                }
+            }
+        }
+        .el-table__row--level-0 {
+            .el-table-column--selection {
+                .el-checkbox {
+                    display: none;
+                }
+            }
+        }
+        tr.current-row > td.el-table__cell {
+            background-color: var(--el-color-primary-light-8);
+            color: var(--install-system-color1);
+        }
+    }
+    .table {
+        height: calc(100% - 49px);
+        overflow: hidden;
+        .recourse-app-info {
+            > h3 {
+                padding: 0;
+                margin: 0;
+                margin-bottom: 4px;
+                color: var(--ace-ace-text-color1);
+                font-size: 14px;
+            }
+        }
+        .table-app-name {
+            color: var(--ace-ace-text-color1);
+            font-size: 14px;
+        }
+    }
+    .toolbar {
+        display: flex;
+        padding: 8px 16px;
+        height: 49px;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 16px;
+        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);
+                // font-weight: bold;
+                margin-right: 16px;
+            }
+        }
+    }
+}
+</style>

package/ace-install-system-ui/src/components/AppsManage/EditAppMetaData.vue

@@ -0,0 +1,203 @@
+<template>
+    <CustomDialog v-model="visible" width="1000px" title="完善应用自述信息" @opened="init">
+        <div
+            style="height: 540px"
+            v-loading="state.loading"
+            element-loading-background="rgba(122, 122, 122, 0.8)"
+        >
+            <el-scrollbar ref="scrollbarRef" height="100%" always>
+                <div style="padding: 16px 32px" class="sfc-add-app">
+                    <AppForm
+                        v-if="state.appFormVisible"
+                        :fileName="props.fileName"
+                        :dependencies="state.dependencies"
+                        :apps="state.apps"
+                        :zipEntries="state.zipEntries"
+                        ref="appFormRef"
+                        v-model="state.formData"
+                    />
+                </div>
+            </el-scrollbar>
+        </div>
+
+        <template v-if="state.appFormVisible" #footer>
+            <el-button @click="visible = false">取消</el-button>
+            <el-button :loading="state.loading" type="primary" @click="submitHandle"
+                >提交</el-button
+            >
+        </template>
+    </CustomDialog>
+</template>
+
+<script setup lang="ts">
+import AppForm from "./AppForm.vue";
+import CustomDialog from "../CustomDialog.vue";
+import { useDeskTopAppApi } from "@/api/desktopAppApi";
+import { computed, reactive, ref } from "vue";
+import { ElScrollbar } from "element-plus";
+import { DesktopAppMetadata } from "@/model/DesktopApp";
+import { ElNotification } from "element-plus";
+import { clone } from "lodash-es";
+const appFormRef = ref<InstanceType<typeof AppForm> | null>(null);
+const { getZipEntries, startScan } = useDeskTopAppApi();
+
+const formData: DesktopAppMetadata = {
+    name: "",
+    /**
+     * 应用说明
+     */
+    caption: "",
+    version: "",
+    /**
+     * 支持的cpu类型，必填
+     */
+    cpu: "AMD64",
+    /**
+     * 支持的系统类型，必填
+     */
+    os: "LINUX",
+    /**
+     * 应用类别，必填
+     */
+    category: "EXECUTABLE",
+    /**
+     * 可执行文件路径，如果类别是EXECUTABLE就必填
+     */
+    exePath: "",
+    /**
+     * 应用图标文件路径，非必填
+     */
+    icoPath: "",
+    /**
+     * ini文件路径，非必填
+     */
+    iniPath: "",
+    /**
+     * 注册表导出文件路径，非必填
+     */
+    regPath: "",
+    /**
+     * 桌面快捷方式名称，非必填，如果类别是PLUGIN就是一定不能填
+     */
+    shortcutName: "",
+    /**
+     * 发布说明
+     */
+    releaseNote: "",
+    /**
+     * 依赖应用Id列表
+     */
+    dependencies: [],
+    /**
+     * 环境变量定义
+     */
+    env: [],
+    /**
+     * ini配置区域定义
+     */
+    iniSections: [],
+};
+const props = defineProps<{
+    fileName: string;
+    modelValue: boolean;
+}>();
+const visible = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit("update:modelValue", value);
+    },
+});
+const state = reactive<{
+    loading: boolean;
+    appFormVisible: boolean;
+    formData: DesktopAppMetadata;
+    dependencies: string[];
+    zipEntries: string[];
+    apps: [];
+}>({
+    appFormVisible: false,
+    loading: false,
+    formData: formData,
+    dependencies: [],
+    zipEntries: [],
+    apps: [],
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+function init() {
+    state.formData = clone(formData);
+    state.loading = true;
+    getEntries();
+}
+function submitHandle() {
+    state.loading = true;
+    appFormRef.value
+        ?.submit()
+        .then(() => {
+            state.loading = false;
+            visible.value = false;
+            ElNotification({
+                type: "success",
+                title: "自述文件已完善",
+            });
+
+            //调用一次安装包扫描
+            startScan();
+        })
+        .catch((err) => {
+            state.loading = false;
+            console.error("【完善自述文件提交】", err);
+            ElNotification({
+                type: "error",
+                title: err,
+            });
+            //调用一次安装包扫描
+            startScan();
+        });
+}
+function getEntries() {
+    state.appFormVisible = false;
+    getZipEntries(props.fileName).then((res) => {
+        //获取zip内文件信息
+        state.zipEntries = res;
+        state.appFormVisible = true;
+        state.loading = false;
+    });
+}
+
+defineExpose({
+    init,
+});
+</script>
+
+<style scoped lang="scss">
+.sfc-add-app {
+    .env-box {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        gap: 16px;
+        padding: 0 16px;
+        align-items: center;
+        border-radius: 3px;
+        overflow: hidden;
+        // border-bottom: 1px solid var(--el-border-color);
+        &:hover {
+            background-color: var(--el-color-primary-light-9);
+        }
+        .env-item {
+            display: flex;
+            flex: 1;
+            gap: 8px;
+            padding: 8px 0;
+
+            .env-item-content {
+                flex: 1;
+            }
+        }
+    }
+}
+</style>