Java的新项目学成在线笔记-day14（七）

2.4 前端开发 2.4.1 API方法 在media模块定义api方法如下：

[mw_shl_code=applescript,true]import http from './../../../base/api/public' import querystring from 'querystring' let sysConfig = require('@/../config/sysConfig') let apiUrl = sysConfig.xcApiUrlPre; /*页面列表*/ export const media_list = (page,size,params) => {
   //params为json格式 
  //使用querystring将json对象转成key/value串   let querys = querystring.stringify(params) 
  return http.requestQuickGet(apiUrl+'/media/file/list/'+page+'/'+size+'/?'+querys) } /*发送处理消息*/ export const media_process = (id) => {   return http.requestPost(apiUrl+'/media/file/process/'+id) }
[/mw_shl_code]

2.4.2 页面 在media模块创建media_list.vue，可参考cms系统的page_list.vue来编写此页面。 1、视图

[mw_shl_code=applescript,true]<template>  
<div>
     <!‐‐查询表单‐‐>  
   <el‐form :model="params">  
     标签：     
  <el‐input v‐model="params.tag" style="width:160px"></el‐input>  
     原始名称：     
  <el‐input v‐model="params.fileOriginalName" style="width:160px"></el‐input>  
     处理状态：    
   <el‐select v‐model="params.processStatus" placeholder="请选择处理状态">  
       <el‐option      
     v‐for="item in processStatusList"      
     :key="item.id"     
      :label="item.name"       
    :value="item.id">     
    </el‐option>  
     </el‐select>    
   <br/>    
   <el‐button type="primary" v‐on:click="query" size="small">查询</el‐button>  
     <router‐link class="mui‐tab‐item" :to="{path:'/media/upload'}">      
   <el‐button  type="primary" size="small" >上传文件</el‐button>   
    </router‐link>  
   </el‐form>   
  <!‐‐列表‐‐> 
    <el‐table :data="list" highlight‐current‐row v‐loading="listLoading" style="width: 100%;">
      <el‐table‐column type="index" width="30">
[/mw_shl_code]
[mw_shl_code=applescript,true]</el‐table‐column>     
  <el‐table‐column prop="fileOriginalName" label="原始文件名称" width="220">   
    </el‐table‐column>     
  <el‐table‐column prop="fileName" label="文件名称" width="220">    
   </el‐table‐column>    
   <el‐table‐column prop="fileUrl" label="访问url" width="260">   
    </el‐table‐column>   
    <el‐table‐column prop="tag" label="标签" width="100">   
    </el‐table‐column>    
   <el‐table‐column prop="fileSize" label="文件大小" width="120">   
    </el‐table‐column>    
   <el‐table‐column prop="processStatus" label="处理状态" width="100"  :formatter="formatProcessStatus">   
    </el‐table‐column>    
   <el‐table‐column prop="uploadTime" label="创建时间" width="110"  :formatter="formatCreatetime">    
   </el‐table‐column>    
   <el‐table‐column label="开始处理" width="100" >    
     <template slot‐scope="scope">  
         <el‐button       
      size="small" type="primary" plain @click="process(scope.row.fileId)">开始处理    
       </el‐button>   
      </template>   
    </el‐table‐column>
       </el‐table>  
   <!‐‐分页‐‐>   
  <el‐col :span="24" class="toolbar">  
       <el‐pagination background layout="prev, pager, next" @current‐change="changePage" :pagesize="this.params.size"         
             :total="total" :current‐page="this.params.page"         
             style="float:right;">    
   </el‐pagination> 
   </el‐col>  
</div> </template>[/mw_shl_code]
2、数据对象
[mw_shl_code=applescript,true]import * as mediaApi from '../api/media' import utilApi from '@/common/utils'; export default{ 
  data(){   
  return {    
   params:{   
      page:1,//页码   
      size:2,//每页显示个数  
       tag:'',//标签   
      fileName:'',//文件名称
        processStatus:''//处理状态
},      
listLoading:false,  
     list:[],   
    total:0,   
    processStatusList:[]    
}  
}   。。。
[/mw_shl_code]
3、方法

[mw_shl_code=applescript,true]methods:{   
    formatCreatetime(row, column){     
    var createTime = new Date(row.uploadTime);    
     if (createTime) {       
    return utilApi.formatDate(createTime, 'yyyy‐MM‐dd hh:mm:ss');   
      }   
    },   
    formatProcessStatus(row,column){   
      var processStatus = row.processStatus;  
       if (processStatus) {    
         if(processStatus == '303001'){        
       return "处理中";        
     }else if(processStatus == '303002'){        
       return "处理成功";         
    }else if(processStatus == '303003'){    
           return "处理失败";    
        }else if(processStatus == '303004'){        
       return "无需处理";       
      }    
     }   
    }, 
        changePage(page){  
       this.params.page = page;  
       this.query()   
    },     
  process (id) { //    
    console.log(id)    
     mediaApi.media_process(id).then((res)=>{   
        console.log(res)       
   if(res.success){       
     this.$message.success('开始处理，请稍后查看处理结果');   
       }else{        
    this.$message.error('操作失败，请刷新页面重试');  
        }   
      })   
    },    
   query(){   
      mediaApi.media_list(this.params.page,this.params.size,this.params).then((res)=>{  
         console.log(res)     
      this.total = res.queryResult.total      
     this.list = res.queryResult.list[/mw_shl_code]
[mw_shl_code=applescript,true] }) 
      }  
   }    
...
[/mw_shl_code]