[关闭]
@salen 2017-11-06T03:05:23.000000Z 字数 6840 阅读 277

查询

未分类

　模板

  1. <template>
  2. <div class="Search">
  3.   <el-form :model="searchInfo" class="demo-form-inline search_form" label-position="top" ref="searchForm">
  4.     <el-row :gutter="10">
  5.       <el-col :span="4">
  6.         <el-form-item label="运单号" class="grid-content break_line">
  7.           <el-col :span="9">
  8.             <el-form-item prop="params.order_three_code">
  9.               <el-input size="mini" v-model="searchInfo.params.order_three_code" placeholder="三字码"></el-input>
  10.             </el-form-item>
  11.           </el-col>
  12.           <el-col class="line" :span="1">-</el-col>
  13.           <el-col :span="14">
  14.             <el-form-item prop="params.order_num">
  15.               <el-input size="mini" v-model="searchInfo.params.order_num" placeholder="八位数字"></el-input>
  16.             </el-form-item>
  17.           </el-col>
  18.         </el-form-item>
  19.       </el-col>
  20.       <el-col :span="4">
  21.         <el-form-item label="单据类型" class="grid-content" prop="params.receipt_type">
  22.           <el-select size="mini" v-model="searchInfo.params.receipt_type" placeholder="">
  23.             <el-option label="全部" value=""></el-option>
  24.             <el-option label="及时" value="0"></el-option>
  25.             <el-option label="事后" value="1"></el-option>
  26.           </el-select>
  27.         </el-form-item>
  28.       </el-col>
  29.       <el-col :span="4">
  30.         <el-form-item label="制单类型" class="grid-content" prop="params.easy_flag">
  31.           <el-select size="mini" v-model="searchInfo.params.easy_flag" placeholder="">
  32.             <el-option label="全部" value=""></el-option>
  33.             <el-option label="正常制单" value="0"></el-option>
  34.             <el-option label="简易制单" value="1"></el-option>
  35.           </el-select>
  36.         </el-form-item>
  37.       </el-col>
  38.       <el-col :span="4">
  39.         <el-form-item label="出港状态" class="grid-content" prop="params.departure_status">
  40.           <el-select size="mini" v-model="searchInfo.params.departure_status" placeholder="">
  41.             <el-option label="全部" value=""></el-option>
  42.             <el-option label="未出港" value="0"></el-option>
  43.             <el-option label="部分出港" value="1"></el-option>
  44.             <el-option label="已出港" value="2"></el-option>
  45.           </el-select>
  46.         </el-form-item>
  47.       </el-col>
  48.       <el-col :span="4">
  49.         <el-form-item label="始发站" class="grid-content" prop="params.departure">
  50.           <el-input size="mini" v-model="searchInfo.params.departure" placeholder="始发站代码"></el-input>
  51.         </el-form-item>
  52.       </el-col>
  53.       <el-col :span="4">
  54.         <el-form-item label="目的站" class="grid-content" prop="params.destination">
  55.           <el-input size="mini" v-model="searchInfo.params.destination" placeholder="目的站代码"></el-input>
  56.         </el-form-item>
  57.       </el-col>
  58.       <el-col :span="4">
  59.         <el-form-item label="发货人" class="grid-content" prop="params.sender">
  60.           <el-input size="mini" v-model="searchInfo.params.sender" placeholder="发货人代码"></el-input>
  61.         </el-form-item>
  62.       </el-col>
  63.       <el-col :span="4">
  64.         <el-form-item label="收货人" class="grid-content" prop="params.receiver">
  65.           <el-input size="mini" v-model="searchInfo.params.receiver" placeholder="收货人代码"></el-input>
  66.         </el-form-item>
  67.       </el-col>
  68.       <el-col :span="8">
  69.         <el-form-item label="开票日期" class="grid-content" prop="timeValue">
  70.           <el-date-picker
  71.             size="mini"
  72.             v-model="searchInfo.timeValue"
  73.             type="datetimerange"
  74.             :picker-options="pickerOptions"
  75.             range-separator="至"
  76.             start-placeholder="开始日期"
  77.             end-placeholder="结束日期"
  78.             align="right"
  79.             value-format="yyyy-MM-dd HH:mm:ss"
  80.             style="width:100%;"
  81.           >
  82.           </el-date-picker>
  83.         </el-form-item>
  84.       </el-col>
  85.     </el-row>
  86.   </el-form>
  87.   <div class="btn_wrap">
  88.     <el-row>
  89.       <el-col :span="6" :offset="18">
  90.       <div class="grid-content bg-purple">
  91.         <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
  92.         <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
  93.         <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
  94.       </div>
  95.       </el-col>
  96.     </el-row>
  97.   </div>
  98.   <div class="receive_list">
  99.     <el-table :data="tableData" border style="width: 100%" height="370" size="small" :row-class-name="tableRowClassName">
  100.       <el-table-column fixed type="index" :index="indexMethod" label="序号"></el-table-column>
  101.       <el-table-column fixed label="操作">
  102.         <template slot-scope="scope">
  103.           <el-tooltip class="item" effect="dark" content="编辑" placement="left">
  104.             <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
  105.           </el-tooltip>
  106.         </template>
  107.       </el-table-column>
  108.       <el-table-column prop="order_no" label="运单号" width="100">></el-table-column>
  109.       <el-table-column prop="departure" label="始发站" width="100"></el-table-column>
  110.       <el-table-column prop="destination" label="目的站" width="100"></el-table-column>
  111.       <el-table-column prop="state" label="单号状态" :formatter="stateFormat"></el-table-column>
  112.       <el-table-column prop="sender_name" label="发货人名称" width="150"></el-table-column>
  113.       <el-table-column prop="receiver_name" label="收货人名称" width="150"></el-table-column>
  114.       <el-table-column prop="billing_time" label="开票时间" width="140" :formatter="timeFormat"></el-table-column>
  115.       <el-table-column prop="receiver_telephone" label="收货人电话" width="120"></el-table-column>
  116.       <el-table-column prop="departure_status" label="出港状态" :formatter="depStateFormat"></el-table-column>
  117.       <el-table-column prop="sender_telephone" label="发货人电话" width="120"></el-table-column>
  118.       <el-table-column prop="correspond_order_no" label="对应单号" width="200"></el-table-column>
  119.     </el-table>
  120.     <el-pagination
  121.       v-if="total"
  122.       @current-change="pageChange"
  123.       :current-page="searchInfo.params.currPage"
  124.       :page-size="10"
  125.       layout="total, prev, pager, next, jumper"
  126.       :total="total">
  127.     </el-pagination>
  128.   </div>
  129. </div>
  130. </template>

交互

  1. data() {
  2.   return {
  3.     type: '',
  4.     title: '收货主单',
  5.     searchInfo: {
  6.       params: { // 查询参数
  7.         type: 0,
  8.         order_three_code: '', // 单号三字码
  9.         order_num: '',  // 单号八位数字
  10.         receipt_type: '', // 单据类型
  11.         easy_flag: '', // 制单类型
  12.         departure_status: '', // 出港状态
  13.         departure: '', // 始发站
  14.         destination: '', // 目的站
  15.         sender: '', // 发货人,
  16.         receiver: '', // 收货人,
  17.         billing_time_start: '', // 开始日期
  18.         billing_time_end: '', // 结束日期
  19.         currPage: 1,
  20.       },
  21.       timeValue: '', // 绑定时间数据
  22.     },
  23.     pickerOptions: { // 时间选择组件参数
  24.       shortcuts: [{
  25.         text: '最近一周',
  26.         onClick(picker) {
  27.           const end = new Date();
  28.           const start = new Date();
  29.           start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  30.           picker.$emit('pick', [start, end]);
  31.         }
  32.       }, {
  33.         text: '最近一个月',
  34.         onClick(picker) {
  35.           const end = new Date();
  36.           const start = new Date();
  37.           start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  38.           picker.$emit('pick', [start, end]);
  39.         }
  40.       }, {
  41.         text: '最近三个月',
  42.         onClick(picker) {
  43.           const end = new Date();
  44.           const start = new Date();
  45.           start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  46.           picker.$emit('pick', [start, end]);
  47.         }
  48.       }]
  49.     },
  50.     tableData: [], // 表格数据
  51.     total: '', // 查询出总条数
  52.   }
  53. }
  55. methods: {
  56.   search() { // 查询
  57.     this.searchInfo.params.billing_time_start = this.searchInfo.timeValue[0] || ''
  58.     this.searchInfo.params.billing_time_end = this.searchInfo.timeValue[1] || ''
  59.     getReciveList(this.searchInfo.params).then(res => {
  60.       this.tableData = res.data.data[0].list
  61.       this.total = res.data.data[0].total
  62.     })
  63.   },
  64.   add() { // 跳到添加
  65.     this.$store.commit('CHANGE_TOPTITLE', this.title + '-添加')
  66.     this.$router.push(`/receive/${this.type}/billing/detail`)
  67.   },
  68.   reset() { //  重置查询项
  69.     this.$refs['searchForm'].resetFields()
  70.   },
  71.   edit(item) { // 跳到编辑
  72.     this.$store.commit('CHANGE_TOPTITLE', this.title + '-编辑')
  73.     this.$router.push(`/receive/${this.type}/billing/detail/${item.order_no}`)
  74.   },
  75.   stateFormat(row, column, cellValue) { // 处理表格显示项(格式单号状态)
  76.     return cellValue ? '已使用' : '未使用'
  77.   },
  78.   depStateFormat(row, column, cellValue) { // (格式出港状态)
  79.     let stateArr = ['未出港','部分出港','已出港']
  80.     return stateArr[cellValue]
  81.   },
  82.   timeFormat(row, column, cellValue) { // (格式开票时间)
  83.     return formatTime(cellValue)
  84.   },
  85.   pageChange(val) { // 跳转分页
  86.     this.searchInfo.params.currPage = val
  87.     this.search()
  88.   },
  89.   indexMethod(index) { // 格式表格序号
  90.     return (this.searchInfo.params.currPage - 1)*10 + index + 1
  91.   },
  92.   tableRowClassName({row}) { // 表格不同状态显示不同颜色
  93.     if(row.easy_flag) {
  94.       return 'warning-row'
  95.     }else {
  96.       return 'success-row'
  97.     }
  98.   }
  99. }

具体代码参考 src ->pages ->receive ->search

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注