FileManage/web/src/views/system/storage/index.vue

<script lang="ts">
export default {
    name: "project",//项目管理
};
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDict } from '@/api/dict'
import Page from '@/components/Pagination/page.vue'
import { storage, storagesPage, storage2, storagestorageId,storagesBytype } from "@/api/storage";
//定义表格数据
const tableData: any = ref([]);
// 查询数据
const queryParams: any = ref({
    current: 1,
    size: 20,
    name: '',
    type: '',
});
const total = ref(0);
// 表格加载
const loading = ref(false)
//获取表格数据
function getdata() {
    loading.value = true
    storagesPage(queryParams.value).then((res: any) => {
        // tableData.value = res.data
        tableData.value = res.data.records
        total.value = res.data.total
        loading.value = false
        queryParams.value.current = res.data.current
        queryParams.value.size = res.data.size
    })

}
//获取字典项目类型
const dictType = ref([])
function getDictOne() {
    getDict({ dictcode: 'storagePolicy' }).then((res: any) => {
        dictType.value = res.data
    })
}
//弹框命名
const title = ref("")
//控制弹框显隐
const frame = ref(false)
//新增项目弹框
function addproject() {
    frame.value = true
    title.value = "新增储存源"
    projectForme.value = {
        name: "",//存储源名称
        key: "",//存储源别名
        remark: "",//备注
        type: "",//存储源策略
        filePath: "",//文件路径
        accessKey: "",//AccessKey
        secretKey: "",//SecretKey
        bucketName: "",//存储空间名称
        endPoint: "",// 服务地址
    }
}
//修改项目弹框
function editproject(row: any) {
    storage2({ id: row.id }).then((res: any) => {
        projectForme.value.name = res.data.name
        projectForme.value.key = res.data.key
        projectForme.value.remark = res.data.remark
        projectForme.value.type = res.data.type
        projectForme.value.filePath = res.data.storageSourceAllParam.filePath
        projectForme.value.accessKey = res.data.storageSourceAllParam.accessKey
        projectForme.value.secretKey = res.data.storageSourceAllParam.secretKey
        projectForme.value.bucketName = res.data.storageSourceAllParam.bucketName
        projectForme.value.endPoint = res.data.storageSourceAllParam.endPoint
        projectForme.value.id = res.data.id
        title.value = "修改储存源"
        frame.value = true
    })


}
//删除项目弹框
function delproject(row: any) {
    ElMessageBox.confirm(
        '您确定要删除该项目及其中的节点和文件吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            loading.value = true
            storagestorageId(row.id).then((res: any) => {
                if (res.code == 0) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getdata()
                }
            })

        })

}
//表格多选
const tableIdarr = ref([])
function handleSelectionChange(val: any) {
    tableIdarr.value = val
}
//多选删除
function delprojectArr() {
    const ids = []
    tableIdarr.value.forEach((item: any) => {
        ids.push(item.id)
    })
    ElMessageBox.confirm(
        '您确定要删除这些项目及其中的节点和文件吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            loading.value = true
            getdata()
        })
}
//弹框关闭
function handleClose(formEl: any) {
    // if (!formEl) return
    // formEl.resetFields()
    frame.value = false
}
//表单数据
const ruleFormRef = ref()
const projectForme: any = ref({
    name: "",//存储源名称
    key: "",//存储源别名
    remark: "",//备注
    type: "",//存储源策略
    filePath: "",//文件路径
    accessKey: "",//AccessKey
    secretKey: "",//SecretKey
    bucketName: "",//存储空间名称
    endPoint: "",// 服务地址
})
//表单确定
async function submitForm(formEl: any) {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            let params: any = {
                name: projectForme.value.name,//存储源名称
                key: projectForme.value.key,//存储源别名
                remark: projectForme.value.remark,//备注
                type: projectForme.value.type,//存储源策略
                storageSourceAllParam: {
                    filePath: projectForme.value.filePath,//文件路径
                    accessKey: projectForme.value.accessKey,//AccessKey
                    secretKey: projectForme.value.secretKey,//SecretKey
                    bucketName: projectForme.value.bucketName,//存储空间名称
                    endPoint: projectForme.value.endPoint,// 服务地址
                }
            }
            if (projectForme.value.id) {
                params.id = projectForme.value.id
            }
            storage(params).then((res: any) => {
                if (res.code == 0) {
                    ElMessage.success('保存成功')
                    getdata()
                    frame.value = false
                }
            })
        }
    })
}
//用户弹窗规则定义
const moderules = ref({
    name: [{ required: true, message: "请输入存储源名称", trigger: "blur" }],
    key: [{ required: true, message: "请输入存储源别名", trigger: "blur" }],
    remark: [{ required: true, message: "请输入存储源备注", trigger: "blur" }],
    type: [{ required: true, message: "请输入存储源策略", trigger: "change" }],
    filePath: [{ required: true, message: "请输入文件路径", trigger: "blur" }],
    accessKey: [{ required: true, message: "请输入AccessKey", trigger: "blur" }],
    secretKey: [{ required: true, message: "请输入SecretKey", trigger: "blur" }],
    bucketName: [{ required: true, message: "请输入存储空间名称", trigger: "blur" }],
    endPoint: [{ required: true, message: "请输入 服务地址", trigger: "blur" }],
});
onMounted(() => {
    getdata()
    getDictOne()
});
//项目类型转换
function typeName(arr: any, itemCode: any) {
    let nameone: any
    arr.forEach((item: any) => {
        if (item.itemcode == itemCode) {
            nameone = item.dictname
        }
    });
    return nameone
}
const logqing = ref(false)
const logTxt = ref('')
function Loglist(row: any) {
    title.value = row.name+'_存储内容'
    logqing.value = true
    logTxt.value = row.storeContent
}
function handleClose1() {
    logqing.value = false
}

</script>

<template>
    <div>
        <div class="record-box">
            <div class="sou_title">
                <div class="sou_title_left">
                    <el-input style="margin-right: 10px ;" v-model="queryParams.name" clearable @change="getdata()"
                        placeholder="存储空间名称"></el-input>
                    <el-select v-model="queryParams.type" placeholder="存储策略" style="margin-right: 10px ;" clearable
                        @change="getdata()">
                        <el-option v-for="item in dictType" :key="item.itemcode" :label="item.dictname"
                            :value="item.itemcode" />
                    </el-select>
                    <el-button type="primary" @click="getdata()">搜索</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="addproject()">新增</el-button>
                    <!-- <el-button type="primary" @click="delprojectArr()" :disabled="tableIdarr.length == 0">删除</el-button> -->
                </div>
            </div>

            <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"
                :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }"
                style="width: 100%; height: calc(100vh - 275px);margin-bottom: 20px;" border>
                <el-table-column type="selection" width="40" />
                <!-- <el-table-column type="index" label="序号" width="70" align="center"></el-table-column> -->
                <el-table-column prop="name" label="存储空间名称" width="200"></el-table-column>
                <el-table-column prop="type" label="存储策略" width="100">
                    <template #default="scope">
                        <span>{{ typeName(dictType, scope.row.type) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="valueData" label="存储路径" width="200"></el-table-column>
                <el-table-column prop="storeContent" label="存储内容">
                    <template #default="scope">
                        <div class="ellipsis">
                            <span class="single-line-ellipsis">{{ scope.row.storeContent }}</span>
                            <img src="@/assets/MenuIcon/xqing.png" alt="" title="详情" @click="Loglist(scope.row)"
                                style="cursor: pointer;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="spaceOccupancyRatio" label="存储空间占用比例" width="140"></el-table-column>
                <el-table-column fixed="right" label="操作" width="80" align="center">
                    <template #default="scope">
                        <span
                            style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
                            <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" @click="editproject(scope.row)"
                                style="cursor: pointer;">
                            <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delproject(scope.row)"
                                style="cursor: pointer;">
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current"
                @pagination="getdata()">
            </Page>
        </div>
        <el-dialog :title="title" v-model="frame" width="40%" :before-close="handleClose" top="30px" draggable
            :close-on-click-modal="false" destroy-on-close>
            <el-form ref="ruleFormRef" :model="projectForme" :rules="moderules" label-width="auto" class="demo-ruleForm"
                status-icon>
                <el-form-item label=" 存储源名称" prop="name">
                    <el-input v-model="projectForme.name" />
                </el-form-item>
                <el-form-item label=" 存储源别名">
                    <el-input v-model="projectForme.key" />
                </el-form-item>
                <el-form-item label=" 存储源备注">
                    <el-input v-model="projectForme.remark" />
                </el-form-item>
                <el-form-item label=" 存储策略" prop="type">
                    <el-select v-model="projectForme.type" placeholder=" " clearable>
                        <el-option v-for="item in dictType" :key="item.itemcode" :label="item.dictname"
                            :value="item.itemcode" />
                    </el-select>
                </el-form-item>
                <el-form-item label=" 文件路径" prop="filePath" >
                    <el-input v-model="projectForme.filePath" />
                </el-form-item>
                <el-form-item label=" AccessKey" prop="accessKey" v-if="projectForme.type == 'minio'">
                    <el-input v-model="projectForme.accessKey" />
                </el-form-item>
                <el-form-item label=" SecretKey" prop="secretKey" v-if="projectForme.type == 'minio'">
                    <el-input v-model="projectForme.secretKey" />
                </el-form-item>
                <el-form-item label=" 存储空间名称" prop="bucketName" v-if="projectForme.type == 'minio'">
                    <el-input v-model="projectForme.bucketName" />
                </el-form-item>
                <el-form-item label=" 服务地址" prop="endPoint" v-if="projectForme.type == 'minio'">
                    <el-input v-model="projectForme.endPoint" />
                </el-form-item>
                <el-form-item>
                    <div style="width: 100%;display: flex;justify-content: end;margin-top: 20px;">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                        <el-button @click="handleClose(ruleFormRef)">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="title" v-model="logqing" width="60%" :before-close="handleClose1" top="30px" draggable
            :close-on-click-modal="false" destroy-on-close>
            <div class="texlog">
                <el-scrollbar height="80vh">
                    {{ logTxt }}
                </el-scrollbar>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.texlog {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.ellipsis {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.ellipsis1 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.single-line-ellipsis {
    width: 800px;
    /* 限制容器宽度 */
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 隐藏超出范围的内容 */
    text-overflow: ellipsis;
    /* 使用省略号 */
}

.record-box {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 3px;
    box-sizing: border-box;

    .sou_title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .sou_title_left {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    }
}
</style>