关于web:智汀云盘开发指南web业务功能我的

次要有两大模块，一是贮存治理，二是我的文件治理

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_id
created() {
    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
    })
  }
}

关于web:智汀云盘开发指南web业务功能我的

1.存储管理

2.我的文件

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于web:智汀云盘开发指南web业务功能我的

1.存储管理

2.我的文件

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复