次要有两大模块，一是贮存治理，二是我的文件治理
1.存储管理
治理主页这里次要就是两个列表，一个硬盘列表，一个存储池列表
<!--闲置硬盘列表 html--><div v-if="diskList.length" class="new-storage-box"> <p class="tip">{{ $t('storage.findTitle1') }}{{ diskList.length }}{{ $t('storage.findTitle2') }}</p> <div class="new-scroll"> <div v-for="(item, index) in diskList" :key="index" class="new-storage-item" :class="[`new-storage-item-${index % 4 + 1}`]"> <div class="disk-icon"></div> <h3 class="name one-line">{{ item.name }}</h3> <p class="many">{{ $methods.transformByte(item.capacity) }}</p> <van-button class="btn" :class="[`btn-${index % 4 + 1}`]" @click="handleAddDisk(item)">{{ $t('storage.addBtn') }}</van-button> </div> </div></div><!--存储池列表 html--><div class="storage-box"><p class="tip">{{ $t('storage.listTitle') }}</p><!-- 没有贮存池 --><div class="empty-box" v-if="isNoStorages"> <van-empty class="custom-image" :description="$t('global.noStorage')"> </van-empty></div><!-- 有贮存池 --><div class="storage-list" v-else> <div v-for="(item, index) in storageList" :key="index" class="storage-item" :class="{'blur': item.status==='TaskDelPool_0'}" @click="!item.status?toStorageDetail(item):''"> <div class="clearfix"> <div class="disk-icon float-l"></div> <div v-if="!item.status" class="more float-r"></div> <div class="status-type" v-if="item.status==='TaskDelPool_1'"><van-icon name="clock-o" /> <span class="one-line">{{$t('global.deleting')}}</span></div> </div> <h3 class="name two-line">{{ item.name }}</h3> <p class="many">{{ $methods.transformByte(item.capacity) }}</p> <div class="mask-cover" v-if="item.status==='TaskDelPool_0'"> <div class="warning-icon"><img src="../../../assets/icon-warning.png" alt=""></div> <div class="warning-text two-line">{{$t('storage.delStorage')}} ({{item.name}}) {{$t('global.fail')}}</div> <div class="btn-box"> <van-button type="info" color="#427AED" size="small" @click="retry(item)">{{ $t('global.retry') }}</van-button> </div> </div> </div></div></div>// 初始化数据列表methods: { // 获取闲置硬盘列表 getDiskList(params) { this.http.disksList(params).then((res) => { if (res.status !== 0) { return } const list = res.data.list || [] this.diskList = list }) }, // 获取存储池列表 getStorageList(params) { this.loading = true this.http.poolsList(params).then((res) => { this.loading = false if (res.status !== 0) { return } const list = res.data.list || [] list.forEach((item) => { item.checked = false }) this.storageList = list }).catch(() => { this.loading = false }) }, },created() { this.getDiskList() this.getStorageList() }- 闲置硬盘增加
能够抉择现有的存储池增加，或者新建一个贮存，新建胜利则默认已增加到新建的存储池中
// 确定增加贮存池beforeAdd(action, done) { if (action === 'confirm') { this.submitLoading = true this.http.addDisk({ pool_name: this.poolName, disk_name: this.diskName }).then((res) => { this.submitLoading = false if (res.status !== 0) { if (res.status === 205) { this.sureShow = true } return } this.$toast.success(this.$t('global.addSuccessfully')) this.show = false this.onClickLeft() }) } else { done() }}// 增加到新的存储池addStorage() { this.addStorageShow = true},<!--新的存储池组件 html--><StorageManage v-model="addStorageShow" :list="storageList"/>- 存储池详情
在权限容许的状况下，可进行编辑名称、删除、增加，批改分区，分区列表具备删除中、批改中、增加中、删除失败，批改失败，增加失败等状态，依据数据反馈做展现体现
- 分区新增/分区编辑
分区新增/分区详情编辑，如果是MB单位，那只能输出是4的倍数单位，GB和TB则以整数int类型单位,单位参数
<!-- 正则匹配输出--><input v-model="params.new_name" type="text" class="field-input" maxlength="50" oninput="value=value.replace(/[^A-Za-z0-9_.+-]/g,'')" :placeholder="$t('partition.enter')"/>// 获取大小跟单位transformByte(fileBytes) { let size = '' if (fileBytes < 1 * 1024) { // 如果小于1KB转化成B size = `${(fileBytes / (1024 * 1024)).toFixed(2)}MB` } else if (fileBytes < 1 * 1024 * 1024) { // 如果小于1MB转化成KB size = `${(fileBytes / (1024 * 1024)).toFixed(2)}MB` } else if (fileBytes < 1 * 1024 * 1024 * 1024) { // 如果小于1GB转化成MB size = `${(fileBytes / (1024 * 1024)).toFixed(2)}MB` } else if (fileBytes < 1 * 1024 * 1024 * 1024 * 1024) { // 其余转化成GB const number = (fileBytes / (1024 * 1024 * 1024)).toFixed(2) if (parseInt(number, 10) === parseFloat(number)) { size = `${(fileBytes / (1024 * 1024 * 1024)).toFixed(2)}GB` } else { size = `${(fileBytes / (1024 * 1024)).toFixed(2)}MB` } } else { // 其余转化成TB const number = (fileBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2) if (parseInt(number, 10) === parseFloat(number)) { size = `${(fileBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)}TB` } else { size = `${(fileBytes / (1024 * 1024 * 1024)).toFixed(2)}GB` } } const sizeStr = `${size}` const len = sizeStr.length const unit = sizeStr.substr(-2) const sizeNumber = Number(sizeStr.substr(0, len - 2)) if (unit === 'MB') { this.capacity = sizeNumber / 4 } else { this.capacity = sizeNumber } this.params.unit = unit}2.我的文件
- 文件夹
这是一个下拉加载更多来实现翻页的文件列表，下拉加载是调用 vant 组件 van-list
<div class="folder-list"> <van-list v-model="moreLoading" :finished="finished" :offset="10" :immediate-check="false" :finished-text="$t('global.noMore')" @load="moreLoad"> <div v-for="(item,index) in folderList" :key="index" class="folder-item" :class="{'blur': item.status==='TaskMovingFolder_0' || item.status==='TaskDelFolder_0'}" @click="!item.status?handleEdit(item):''"> <!-- 文件内容......--> </div> </van-list></div>// 加载更多解决moreLoad() { if (!this.pagerData.has_more) { this.moreLoading = false this.finished = true return } this.page += 1 const params = { page: this.page, page_size: this.page_size } this.moreLoading = true this.http.getFolderList(params).then((res) => { this.moreLoading = false if (res.status !== 0) { return } const { list } = res.data || [] list.forEach((item) => { item.showPopover = false }) this.pagerData = res.data.pager this.folderList = this.folderList.concat(list) // 是否加载完 if (!this.pagerData.has_more) { this.finished = true } }).catch(() => { this.finished = true this.moreLoading = false })}- 文件新增/文件编辑
依据url是否携带folder_id判断是否存在，进而判断是新增文件夹还是文件夹编辑；新建,编辑文件具备私人文件，共享文件，私人文件能够设置密码文件跟无密码文件
// 是否存在文件folder_idcreated() { const { query } = this.$route if (query.folder_id) { this.folderId = Number(query.folder_id) this.getFolderDetail(this.folderId) }},// 保留编辑相干逻辑save() { // 判断是否须要明码加密1须要，0不须要 if (!this.folderInfo.is_encrypt) { this.folderInfo.is_encrypt = 0 } // 判断是否已输出文件名称 if (!this.folderInfo.name) { this.$toast(this.$t('global.enterFile')) return } // 判断是否已抉择了分区 if (this.currentPartition === this.$t('folder.select')) { this.$toast(this.$t('partition.chosePartition')) return } // 判断1私人文件夹 2共享文件夹 if (!this.folderInfo.mode) { this.$toast(this.$t('folder.selectType')) return } // 判断明码长度 if (this.folderInfo.is_encrypt === 1 && !this.isHasId) { if (this.folderInfo.pwd.length < 6) { this.$toast(this.$t('folder.inputNoPassword')) return } // 判断确定明码长度并跟设置明码是否统一 if (this.folderInfo.confirm_pwd.length < 6) { this.$toast(this.$t('folder.inputNoPassword')) return } if (this.folderInfo.confirm_pwd !== this.folderInfo.pwd) { this.$toast(this.$t('folder.noSamePassword')) return } } else { delete this.folderInfo.pwd delete this.folderInfo.confirm_pwd } // 判断是否增加成员 if (this.folderInfo.auth.length === 0) { this.$toast(this.$t('folder.leastMember')) return } // 判断是否是私密文件并只能增加一名成员 if (this.folderInfo.mode === 1) { if (this.folderInfo.auth.length > 1) { this.$toast(this.$t('folder.privateLimit')) return } } // 判断是编辑文件还是新建文件 folderId 存在是编辑反之新建 if (this.folderId) { // 走编辑文件接口 if (this.partitionParams.history !== this.currentPartition) { this.transferShow = true this.partitionParams.name = this.folderInfo.name this.partitionParams.current = this.currentPartition } else { this.saveLoading = true this.http.folderEdit(this.folderId, this.folderInfo).then((res) => { this.saveLoading = false if (res.status !== 0) { this.$toast(res.reason) return } this.$toast.success(this.$t('global.savedSuccessfully')) this.$router.go(-1) }).catch(() => { this.saveLoading = false }) } } else { // 走新建文件接口 this.saveLoading = true this.http.folderAdd(this.folderInfo).then((res) => { this.saveLoading = false if (res.status !== 0) { return } this.$toast.success(this.$t('global.addSuccessfully')) this.$router.go(-1) }).catch(() => { this.saveLoading = false }) }}