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

36次阅读

共计 7156 个字符，预计需要花费 18 分钟才能阅读完成。


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

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
2022-02-12
 0
关于web:Web优化之离线包
关于web:Web30热门领域NFT项目实战乱花渐欲迷人眼
关于web:web前端主流三大框架析
关于web:Go语言WEB框架使用说明使用拦截器验证用的户登录状态