vue-element-admin 之单个功能篇（三）

前面说完了登陆以及权限和利用tree进行动态更改权限的问题，下面撸一下单个的功能：

一：table功能

首先分析下table由三部分组成，搜索栏/table/分页栏

1.在钩子函数里调用获取table数据的函数来渲染table

// 获取活动列表
    async _fetchActivityList() {
      this.listLoading = true //加载动画
      try {
        const res = await fetchActivityList(val) //调用serve里封装好的asiox请求函数来获取数据，传的参数跟后端去协调
        const { data } = res
        this.listLoading = false
        this.list = data.list //list是table挂在的数据model
      } catch (e) {
        this.listLoading = false //请求不成功则关闭加载动画
      }
    },

2.下面是分页的制作：

<el-pagination :current-page="listQuery.page_no" :page-sizes="[10,20,30, 50]" :page-size="listQuery.page_size" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

上面是分页的html代码，其中current-page是“当前页数”；page-size是“每页显示条目个数”；total是“总条目数”；layout是显示哪些分页控件；size-change是page-size改变时触发的函数；current-change是current-page改变时触发的函数

下面是两个函数

//current-change触发的函数（当前页改变时触发）
handleCurrentChange(val) {
      this.listQuery.page_no = val //将当前页改变为改变后的页码
      this._fetchActivityList() //重新获取数据
    },
//size-change触发的函数（页码条数改变时触发）
handleSizeChange(size) {
      this.listQuery.page_size = size
      this._fetchActivityList()
    },

3.顶部搜索框查询功能，调用函数handleFilter

handleFilter() {
      this.listQuery.page_no = 1 //page_no归1
      this._fetchActivityList() //获取数据
    },

二：upload上传功能：这里用element的upload控件就好，然后根据需求自定义一下上传函数，这里是上传到七牛云的例子

//html部分
<el-form-item label="题目示例" label-width="100px">
          <el-upload
            :http-request="handleUpLoadTaksImg" //自定义上传函数
            :on-preview="handleTaskImgPreview"  //点击文件所触发的函数
            :limit="1"  //限制上传个数
            :action="domain" //上传地址
            :file-list="taskQFileList"  //上传文件列表
            list-type="picture-card"  //文件列表的类型
          >
            <el-button>上传示例</el-button>
          </el-upload>
          <el-dialog :visible.sync="dialogTaskImgVisible"> //点击放大查看
            <img :src="dialogTaskImageUrl" width="100%" alt="">
          </el-dialog>
        </el-form-item>

下面是js部分：

//图片展示函数
handleTaskImgPreview() {
      this.dialogTaskImageUrl = this.taskInfo.question_img  //把上传的图片地址赋值给展示的img的src
      this.dialogTaskImgVisible = true //展示的dialog显示
    },
//自定义上传函数
handleUpLoadTaksImg(req) {
      //const type = 'task'  //这里定义type用来复用，不复用可隐掉
      this._uploadQiNiu(req, type) //这个是自定义的可复用的上传七牛云函数
    },
//创建FileReader实例
    photoCompress(file,w,objDiv){
        let ready=new FileReader();
        ready.readAsDataURL(file);
        let that=this
        ready.onload=function(){
            let re=this.result;
            that.canvasDataURL(re,w,objDiv)
        }
    },
    //将以base64的图片url数据转换为Blob
    convertBase64UrlToBlob(urlData){
        let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    },
// 上传七牛云
    async _uploadQiNiu(req, type) {
      //console.log(req)
      this.is_progress=true //自定义的加载特效显示
      const config = {  //七牛云的请求config，进度也在这里算
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: progressEvent => {
          this.jindu=progressEvent.loaded / progressEvent.total * 100 | 0  //实时计算并显示进度
        }
      }
      const fileType = req.file.type.split('/')[1] //定义上传文件的类型
      // 重命名要上传的文件
      const keyname = 'top-team' + Date.now() + Math.floor(Math.random() * 100) + '.' + fileType //自定义上传文件名称
      const token = await this._fetchQiNiuToken() //定义七牛与请求token
      const formData = new FormData() //定义formdata对象
      formData.append('token', token) //向formdata中添加token
      formData.append('key', keyname) //向formdata中添加key
      let that=this
      if(req.file.size/1024 > 1025) { //大于1M，进行压缩上传
          if(req.file.type.indexOf("image/")==-1){  //判断是否是图片,这个表示不是
            formData.append('file', req.file) //向formdata中添加数据
            axios.post(this.domain, formData, config).then(res => {
              const url = this.qiniuAddress + '/' + res.data.key
              if (type === 'bgImg') {  //通过type来实现复用
                this.activityInfo.bgImgUrl = url
              }
              if (type === 'icon') {
                this.activityInfo.iconUrl = url
              }
              if (type === 'nine') {
                this.taskAFileList.push({
                  name: res.data.key.slice(0, 23),
                  url: url
                })
              }
              this.is_progress=false  //上传完成加载特效关闭
              this.jindu=0 //进度清零
            })
          } else { //是图片，并且大于1M进行压缩处理
            this.photoCompress(req.file, { //调用创建FileReader实例函数
                quality: 0.2
            }, function(base64){
                let bl = that.convertBase64UrlToBlob(base64);//调用将以base64的图片url数据转换为Blob函数
                bl.uid=req.file.uid //向自定义的图片添加数据
                bl.name=req.file.name
                bl.uid=req.file.uid
                bl.lastModified=req.file.lastModified
                bl.lastModifiedDate=req.file.lastModifiedDate
                bl.webkitRelativePath=req.file.webkitRelativePath
                formData.append('file', bl); // 向formdata添加data数据
                axios.post('http://upload.qiniup.com/', formData, config).then(res => { //请求并上传七牛云
                  const url = that.qiniuAddress + '/' + res.data.key //将七牛云获取到的地址进行拼接
                  if (type === 'bgImg') { //复用的方式将url地址赋值给html的img的src
                    that.activityInfo.bgImgUrl = url
                  }
                  if (type === 'icon') {
                    that.activityInfo.iconUrl = url
                  }
                  if (type === 'nine') {
                    that.taskAFileList.push({
                      name: res.data.key.slice(0, 23),
                      url: url
                    })
                  }
                  that.is_progress=false //关闭加载
                  that.jindu=0 //进度清零
                })
            });
          }
      }else{ //小于1M的话直接上传不进行压缩处理
        formData.append('file', req.file)
        axios.post(this.domain, formData, config).then(res => {
          const url = this.qiniuAddress + '/' + res.data.key
          if (type === 'bgImg') {
            this.activityInfo.bgImgUrl = url
          }
          if (type === 'icon') {
            this.activityInfo.iconUrl = url
          }
          if (type === 'nine') {
            this.taskAFileList.push({
              name: res.data.key.slice(0, 23),
              url: url
            })
          }
          this.is_progress=false
          this.jindu=0
        })
      }
    },

下面说一下多张上传的情况

//html部分
<div class="filePicker">
            <label>导入图片</label>
            <input
              id="ImgInput"
              type="file"
              name="file"
              multiple
              accept="image/*,vedio/*,audio/*"
              @change="handleImgChange">
          </div>
//js部分
async handleImgChange(e) {
      this.is_progress=true 
      const ImgObj = {}
      const ImgInput = document.querySelector('#ImgInput') //起到jq的作用
      const length = ImgInput.files.length
      this.img_nums = length
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      }
      let count = 0;
      for(let item of ImgInput.files) { //遍历上传的文件
        this.img_num = this.img_num + 1
        this.jindu = Math.floor(this.img_num / (length) * 100)
        if (this.img_num == this.img_nums) {
          this.is_progress = false
          this.jindu = 0
          this.img_num = 0
        }
        const fileType = item.type.split('/')[1] //获取文件名
        const keyname = 'top-team' + Date.now() + '' + (Math.random() * 100) + '.' + fileType //重命名上传文件
        const token = await this._fetchQiNiuToken() //获取七牛云token
        const formData = new FormData()
        formData.append('token', token)
        formData.append('key', keyname)
        let that=this
        if (/image\/\w+/.test(item.type) && item.size > 1024000) {
          this.photoCompress(item, {
              quality: 0.2
          }, function(base64){
              let bl = that.convertBase64UrlToBlob(base64);
              bl.uid=item.uid
              bl.name=item.name
              bl.uid=item.uid
              bl.lastModified=item.lastModified
              bl.lastModifiedDate=item.lastModifiedDate
              bl.webkitRelativePath=item.webkitRelativePath
              formData.append('file', bl); // 文件对象
              axios.post('http://upload.qiniup.com/', formData, config).then(res=>{
                const url = that.qiniuAddress + '/' + res.data.key
                const name = item.name.split('.')[0]
                ImgObj[name] = url
                console.log(Object.keys(ImgObj).length)
                if (Object.keys(ImgObj).length === length) { //将ImgObj这个对象的name属性枚举成数组的长度与文件个数对比，相等则说明上传完毕
                  axios.post( //将图片url传给后端去保存
                    '/i/topteam/admin/MatchTaskPic',
                    { activity_id: that.activityId, match_list: JSON.stringify(ImgObj) }
                  ).then(res=>{
                    if (!res.data.error_code) {
                      that.$message({ message: '上传成功', type: 'success' })
                      that._fetchTaskList(that.activityId)
                    } else {
                      that.$message({ message: res.data.error_msg, type: 'error' })
                    }
                    e.target.value = ''
                  })
                }
              })
          });
        }else{ //不到1M的话，不进行压缩处理
          formData.append('file', item)
          try {
            await axios.post('http://upload.qiniup.com/', formData, config).then(res=>{
              const url = this.qiniuAddress + '/' + res.data.key
              const name = item.name.split('.')[0]
              ImgObj[name] = url
              console.log(Object.keys(ImgObj).length)
              if (Object.keys(ImgObj).length === length) {
                axios.post(
                  '/i/topteam/admin/MatchTaskPic',
                  { activity_id: this.activityId, match_list: JSON.stringify(ImgObj) }
                ).then(res=>{
                  if (!res.data.error_code) {
                    this.$message({ message: '上传成功', type: 'success' })
                    this._fetchTaskList(this.activityId)
                  } else {
                    this.$message({ message: res.data.error_msg, type: 'error' })
                  }
                  e.target.value = ''
                })
              }
            })
          } catch (error) {
            console.log(error)
            e.target.value = ''
            this.$message({message: '有图片上传失败，请重新上传全部图片', type: 'error'})
          }
        }
      }
    },

再说一个上传excle文件的吧

//html部分
<div class="filePicker" style="float: right">
            <label>导入任务</label>
            <input
              id="fileInput"
              type="file"
              name="file"
              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              @change="handleFileChange">
          </div>
// 导入任务
    handleFileChange(e) {
      this.is_progress=true
      const fileInput = document.querySelector('#fileInput')
      const formData = new FormData()
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: progressEvent => {
          this.jindu=progressEvent.loaded / progressEvent.total * 100 | 0
        }
      }
      formData.append('file', fileInput.files[0])
      formData.append('activity_id', activityId)
      axios.post('/i/topteam/admin/importTask', formData, config).then(res => {
        const data = res.data
        if (data.error_code !== 0) {
          this.$message({ message: data.error_msg, type: 'error' })
          e.target.value = ''
        } else {
          this.$message({ message: '导入成功', type: 'success' })
          e.target.value = ''
          //做一些事情
        }
        this.is_progress=false
        this.jindu=0
      })
    },

好了，就这些吧，想起来再补