1.3 前端 1.3.1 頁面
1、增加查詢表單

<!‐‐查詢表單‐‐>
<el‐form :model="params">
  <el‐select v‐model="params.siteId" placeholder="請選擇站點">
    <el‐option  
     v‐for="item in siteList"  
    :key="item.siteId" 
     :label="item.siteName"
      :value="item.siteId">  
  </el‐option>
  </el‐select>
   頁面別名：<el‐input v‐model="params.pageAliase"  style="width: 100px"></el‐input>
  <el‐button type="primary" v‐on:click="query"  size="small">查詢</el‐button> </el‐form>
 

2、資料模型物件 增加siteList、pageAliase、siteId，如下：

data() {
 return {
    siteList:[],//站點列表  
   list:[], 
   total:50, 
   params:{ 
     siteId:'', 
     pageAliase:'', 
     page:1,//頁碼  
     size:2//每頁顯示個數 
    } 
 }

3、在鉤子方法中 構建siteList站點列表

mounted() {  
//預設查詢頁面  
 this.query()
  //初始化站點列表  
 this.siteList = [   
  {   
   siteId:'5a751fab6abb5044e0d19ea1',
      siteName:'門戶主站'  
   },  
  {  
    siteId:'102',    
  siteName:'測試站'
     }
  ] 
}
 

1.3.2 Api呼叫
1、向服務端傳遞查詢條件，修改 cms.js，如下：

//public是對axios的工具類封裝，定義了http請求方法
 import http from './../../../base/api/public' 
import querystring from '
querystring' let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre; 
  export const page_list = (page,size,params) => { 
 //將json物件轉成key/value對 
  let query = querystring.stringify(params) 
 return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'/?'+query) }
 

2、頁面呼叫api方法

//查詢 query:function () { 
 cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
    console.log(res)  
  this.total = res.queryResult.total   
  this.list = res.queryResult.list 
 })
 }

測試如下：