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

深碍√TFBOYSˉ_ 2022-03-12 08:01 245阅读 0赞

前面说完了登陆以及权限和利用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
          })
        },

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