模板

    <template>
 <div class="Search">
  <el-form :model="searchInfo" class="demo-form-inline search_form" label-position="top" ref="searchForm">
<el-row :gutter="10">
  <el-col :span="4">
    <el-form-item label="運單號" class="grid-content break_line">
      <el-col :span="9">
        <el-form-item prop="params.order_three_code">
          <el-input size="mini" v-model="searchInfo.params.order_three_code" placeholder="三字碼"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="1">-</el-col>
      <el-col :span="14">
        <el-form-item prop="params.order_num">
          <el-input size="mini" v-model="searchInfo.params.order_num" placeholder="八位數字"></el-input>
        </el-form-item>
      </el-col>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="單據類型" class="grid-content" prop="params.receipt_type">
      <el-select size="mini" v-model="searchInfo.params.receipt_type" placeholder="">
        <el-option label="全部" value=""></el-option>
        <el-option label="及時" value="0"></el-option>
        <el-option label="事后" value="1"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="制單類型" class="grid-content" prop="params.easy_flag">
      <el-select size="mini" v-model="searchInfo.params.easy_flag" placeholder="">
        <el-option label="全部" value=""></el-option>
        <el-option label="正常制單" value="0"></el-option>
        <el-option label="簡易制單" value="1"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="出港狀態" class="grid-content" prop="params.departure_status">
      <el-select size="mini" v-model="searchInfo.params.departure_status" placeholder="">
        <el-option label="全部" value=""></el-option>
        <el-option label="未出港" value="0"></el-option>
        <el-option label="部分出港" value="1"></el-option>
        <el-option label="已出港" value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="始發站" class="grid-content" prop="params.departure">
      <el-input size="mini" v-model="searchInfo.params.departure" placeholder="始發站代碼"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="目的站" class="grid-content" prop="params.destination">
      <el-input size="mini" v-model="searchInfo.params.destination" placeholder="目的站代碼"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="發貨人" class="grid-content" prop="params.sender">
      <el-input size="mini" v-model="searchInfo.params.sender" placeholder="發貨人代碼"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item label="收貨人" class="grid-content" prop="params.receiver">
      <el-input size="mini" v-model="searchInfo.params.receiver" placeholder="收貨人代碼"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item label="開票日期" class="grid-content" prop="timeValue">
      <el-date-picker
        size="mini"
        v-model="searchInfo.timeValue"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="結束日期"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width:100%;"
      >
      </el-date-picker>
    </el-form-item>
  </el-col>
</el-row>
 </el-form>
   <div class="btn_wrap">
<el-row>
  <el-col :span="6" :offset="18">
  <div class="grid-content bg-purple">
    <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查詢</el-button>
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
  </div>
  </el-col>
</el-row>
 </div>
   <div class="receive_list">
<el-table :data="tableData" border style="width: 100%" height="370" size="small" :row-class-name="tableRowClassName">
  <el-table-column fixed type="index" :index="indexMethod" label="序號"></el-table-column>
  <el-table-column fixed label="操作">
    <template slot-scope="scope">
      <el-tooltip class="item" effect="dark" content="編輯" placement="left">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
      </el-tooltip>
    </template>
  </el-table-column>
  <el-table-column prop="order_no" label="運單號" width="100">></el-table-column>
  <el-table-column prop="departure" label="始發站" width="100"></el-table-column>
  <el-table-column prop="destination" label="目的站" width="100"></el-table-column>
  <el-table-column prop="state" label="單號狀態" :formatter="stateFormat"></el-table-column>
  <el-table-column prop="sender_name" label="發貨人名稱" width="150"></el-table-column>
  <el-table-column prop="receiver_name" label="收貨人名稱" width="150"></el-table-column>
  <el-table-column prop="billing_time" label="開票時間" width="140" :formatter="timeFormat"></el-table-column>
  <el-table-column prop="receiver_telephone" label="收貨人電話" width="120"></el-table-column>
  <el-table-column prop="departure_status" label="出港狀態" :formatter="depStateFormat"></el-table-column>
  <el-table-column prop="sender_telephone" label="發貨人電話" width="120"></el-table-column>
  <el-table-column prop="correspond_order_no" label="對應單號" width="200"></el-table-column>
</el-table>
<el-pagination
  v-if="total"
  @current-change="pageChange"
  :current-page="searchInfo.params.currPage"
  :page-size="10"
  layout="total, prev, pager, next, jumper"
  :total="total">
</el-pagination>
 </div>
    </div>
</template>

交互

  <script>
 import {getReciveList} from "../../service"
 import {formatTime} from "../../utils/time.js"
  export default {
data() {
  return {
    type: '',
    title: '收貨主單',
    searchInfo: {
      params: {
        type: 0,
        order_three_code: '', // 單號三字碼
        order_num: '',  // 單號八位數字
        receipt_type: '', // 單據類型
        easy_flag: '', // 制單類型
        departure_status: '', // 出港狀態
        departure: '', // 始發站
        destination: '', // 目的站
        sender: '', // 發貨人,
        receiver: '', // 收貨人,
        billing_time_start: '', // 開始日期
        billing_time_end: '', // 結束日期
        currPage: 1,
      },
      timeValue: '',
    },
    pickerOptions: {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近一個月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近三個月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit('pick', [start, end]);
        }
      }]
    },
    tableData: [],
    total: '',
  }
},
watch: {
  '$route'() {
    this.load()
  }
},
mounted() {
  this.load()
},
methods: {
  load() {
    this.type = this.$route.params.type
    this.searchInfo.params.type = this.type === 'sub' ? 1 : 0
    this.title = this.type === 'sub' ? '收貨分單' : '收貨主單'
    this.search()
  },
  search() {
    this.searchInfo.params.billing_time_start = this.searchInfo.timeValue[0] || ''
    this.searchInfo.params.billing_time_end = this.searchInfo.timeValue[1] || ''
    getReciveList(this.searchInfo.params).then(res => {
      this.tableData = res.data.data[0].list
      this.total = res.data.data[0].total
    })
  },
  
  add() {
    this.$store.commit('CHANGE_TOPTITLE', this.title + '-添加')
    this.$router.push(`/receive/${this.type}/billing/detail`)
  },
  reset() {
    this.$refs['searchForm'].resetFields()
  },
  edit(item) {
    this.$store.commit('CHANGE_TOPTITLE', this.title + '-編輯')
    this.$router.push(`/receive/${this.type}/billing/detail/${item.order_no}`)
  },
  stateFormat(row, column, cellValue) {
    return cellValue ? '是' : '否'
  },
  depStateFormat(row, column, cellValue) {
    let stateArr = ['未出港','部分出港','已出港']
    return stateArr[cellValue]
  },
  timeFormat(row, column, cellValue) {
    return formatTime(cellValue)
  },
  pageChange(val) {
    this.searchInfo.params.currPage = val
    this.search()
  },
  indexMethod(index) {
    return (this.searchInfo.params.currPage - 1)*10 + index + 1
  },
  tableRowClassName({row}) {
    if(row.easy_flag) {
      return 'warning-row'
    }else {
      return 'success-row'
    }
  }
}
}
</script>