mayfly-go/frontend/src/views/ops/machine/file/FileConfList.vue

<template>
    <div class="file-manage">
        <el-dialog v-if="dialogVisible" :title="title" v-model="dialogVisible" :show-close="true" :before-close="handleClose" width="50%">
            <el-table :data="fileTable" stripe style="width: 100%" v-loading="loading">
                <el-table-column prop="name" label="名称" min-width="100px">
                    <template #header>
                        <el-button class="ml0" type="primary" circle size="small" icon="Plus" @click="add()"> </el-button>
                        <span class="ml10">名称</span>
                    </template>
                    <template #default="scope">
                        <el-input v-model="scope.row.name" :disabled="scope.row.id != null" clearable> </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="类型" width="130px">
                    <template #default="scope">
                        <el-select :disabled="scope.row.id != null" v-model="scope.row.type" style="width: 100px" placeholder="请选择">
                            <el-option v-for="item in FileTypeEnum as any" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="路径" min-width="180" show-overflow-tooltip>
                    <template #default="scope">
                        <el-input v-model="scope.row.path" :disabled="scope.row.id != null" clearable> </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="130">
                    <template #default="scope">
                        <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="success-filled" plain></el-button>
                        <el-button v-if="scope.row.id != null" @click="getConf(scope.row)" type="primary" icon="tickets" plain></el-button>
                        <el-button v-auth="'machine:file:del'" type="danger" @click="deleteRow(scope.$index, scope.row)" icon="delete" plain></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin-top: 10px" type="flex" justify="end">
                <el-pagination
                    style="text-align: center"
                    :total="total"
                    layout="prev, pager, next, total, jumper"
                    v-model:current-page="query.pageNum"
                    :page-size="query.pageSize"
                    @current-change="handlePageChange"
                >
                </el-pagination>
            </el-row>

            <el-dialog destroy-on-close :title="fileDialog.title" v-model="fileDialog.visible" :close-on-click-modal="false" width="70%">
                <machine-file
                    :title="fileDialog.title"
                    :machine-id="machineId"
                    :auth-cert-name="props.authCertName"
                    :file-id="fileDialog.fileId"
                    :path="fileDialog.path"
                    :protocol="protocol"
                />
            </el-dialog>

            <machine-file-content
                :title="fileContent.title"
                v-model:visible="fileContent.contentVisible"
                :machine-id="machineId"
                :auth-cert-name="props.authCertName"
                :file-id="fileContent.fileId"
                :path="fileContent.path"
            />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { machineApi } from '../api';
import { FileTypeEnum } from '../enums';
import MachineFile from './MachineFile.vue';
import MachineFileContent from './MachineFileContent.vue';

const props = defineProps({
    visible: { type: Boolean },
    protocol: { type: Number, default: 1 },
    machineId: { type: Number },
    authCertName: { type: String },
    title: { type: String },
});

const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']);

const addFile = machineApi.addConf;
const delFile = machineApi.delConf;
const files = machineApi.files;

const state = reactive({
    dialogVisible: false,
    query: {
        id: 0,
        pageNum: 1,
        pageSize: 8,
    },
    loading: false,
    form: {
        id: null,
        type: null,
        name: '',
        remark: '',
    },
    total: 0,
    fileTable: [] as any,
    fileDialog: {
        visible: false,
        protocol: 1,
        title: '',
        fileId: 0,
        path: '',
    },
    fileContent: {
        title: '',
        fileId: 0,
        contentVisible: false,
        path: '',
    },
});

const { dialogVisible, loading, query, total, fileTable, fileDialog, fileContent } = toRefs(state);

watch(props, async (newValue) => {
    state.dialogVisible = newValue.visible;
    if (newValue.machineId && newValue.visible) {
        await getFiles();
    }
});

const getFiles = async () => {
    try {
        state.loading = true;
        state.query.id = props.machineId as any;
        const res = await files.request(state.query);
        state.fileTable = res.list || [];
        state.total = res.total;
    } finally {
        state.loading = false;
    }
};

const handlePageChange = (curPage: number) => {
    state.query.pageNum = curPage;
    getFiles();
};

const add = () => {
    // 往数组头部添加元素
    state.fileTable = [{}].concat(state.fileTable);
};

const addFiles = async (row: any) => {
    row.machineId = props.machineId;
    await addFile.request(row);
    ElMessage.success('添加成功');
    getFiles();
};

const deleteRow = (idx: any, row: any) => {
    if (row.id) {
        ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            // 删除配置文件
            delFile
                .request({
                    machineId: props.machineId,
                    id: row.id,
                })
                .then(() => {
                    getFiles();
                });
        });
    } else {
        state.fileTable.splice(idx, 1);
    }
};

const getConf = async (row: any) => {
    if (row.type == 1) {
        state.fileDialog.fileId = row.id;
        state.fileDialog.title = row.name;
        state.fileDialog.path = row.path;
        state.fileDialog.title = `${props.title} => ${row.path}`;
        state.fileDialog.visible = true;
        return;
    }

    showFileContent(row.id, row.path);
};

const showFileContent = async (fileId: number, path: string) => {
    state.fileContent.fileId = fileId;
    state.fileContent.path = path;
    state.fileContent.title = `${props.title} => ${path}`;
    state.fileContent.contentVisible = true;
};

/**
 * 关闭取消按钮触发的事件
 */
const handleClose = () => {
    emit('update:visible', false);
    emit('update:machineId', null);
    emit('cancel');
    state.fileTable = [];
};
</script>
<style lang="scss">
.machine-file-upload-exec {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    text-decoration: none;
}
.inline-block {
    display: inline-block;
    margin-right: 10px;
}
.margin-change {
    display: inline-block;
    margin-left: 10px;
}
</style>