記錄一個簡單的vue頁面實現

<template>
  <div class="userView">
    <!-- 頁眉顏色統一 -->
    <div class="buttonTop"></div>
    <div class="main">
      <!--工具欄-->
      <div class="center" style="overflow: hidden;">
        <el-button @click="updateOrderInvoiceBatch" type="success">批量設置揀貨中</el-button>
        <div class="input" style="float:right">
          <span>發貨單狀態：</span>
          <el-select clearable style="width:100px;" v-model="data.sts" placeholder="發貨單狀態" size="small">
            <el-option label="取消" value="0"></el-option>
            <el-option label="未支付" value="1"></el-option>
            <el-option label="已支付" value="2"></el-option>
            <el-option label="揀貨中" value="3"></el-option>
            <el-option label="已發貨" value="4"></el-option>
          </el-select>
          <el-input placeholder="請輸入名稱" v-model="data.name" clearable size="small"></el-input>
          <el-button @click="select" type="success">檢索</el-button>
          <el-button @click="emptyData"  type="info">清空</el-button>
        </div>
      </div>

      <!--列表table展示-->
      <el-table
        :data="orderInvoiceList.rows"
        @selection-change="changeTable"
        border
        style="width: 100%; margin-top: 10px">
        <el-table-column type="selection" min-width="35"></el-table-column>
        <el-table-column prop="price" label="貨價" min-width="50"></el-table-column>
        <el-table-column prop="postFee" label="運費"  min-width="50"></el-table-column>
        <el-table-column prop="totalPrice" label="總價"  min-width="50"></el-table-column>
        <el-table-column prop="isCanceled" label="是否取消"  min-width="60" :formatter="booleanMsgFun"></el-table-column>
        <el-table-column prop="isSettled" label="費用是否結清"  min-width="80" :formatter="booleanMsgFun"></el-table-column>
        <el-table-column prop="isSettledFee" label="運費是否結清"  min-width="80" :formatter="booleanMsgFun"></el-table-column>
        <el-table-column prop="isPost" label="是否發貨"  min-width="60" :formatter="booleanMsgFun"></el-table-column>
        <el-table-column prop="customerAddress" label="地址"  min-width="220"></el-table-column>
        <el-table-column prop="customerPhone" label="電話"  min-width="85"></el-table-column>
        <el-table-column prop="customerName" label="名稱"  min-width="60"></el-table-column>
        <el-table-column prop="waybillNo" label="運單號"  min-width="110"></el-table-column>
        <el-table-column prop="carrier" label="承運人"  min-width="60"></el-table-column>
        <el-table-column prop="startPickTime" label="開始揀貨時間"  min-width="100"></el-table-column>
        <el-table-column prop="postTime" label="發貨時間"  min-width="100"></el-table-column>
        <el-table-column label="操作"  min-width="60">
          <template slot-scope="scope">
            <el-button size="mini" @click.native="editOrderInvoice(scope.$index, scope.row)">發貨</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="updateOrderInvoice(scope.$index,scope.row)">揀貨中</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分頁 -->
      <div class="page">
        <el-pagination
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40 , 50, 100]"
          :page-size="rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderInvoiceList.total">
        </el-pagination>
      </div>

      <!-- 編輯dialog對象 -->
      <el-dialog  :visible.sync="dialogVisible" :close-on-click-modal="false" size="tiny">
            <span slot="title"  class="el-dialog__title">
                  {{'發貨'}}
            </span>
        <el-form ref="dialogData" :model="dialogData" label-width="150px">
         <!-- <el-form-item label="地址">
              <el-input v-model="dialogData.customerAddress"></el-input>
          </el-form-item>
          <el-form-item label="電話" >
            <el-input v-model="dialogData.customerPhone"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="dialogData.customerName"></el-input>
          </el-form-item>-->
          <el-form-item label="運單號">
            <el-input v-model="dialogData.waybillNo"></el-input>
          </el-form-item>
          <el-form-item label="承運人">
            <el-input v-model="dialogData.carrier"></el-input>
          </el-form-item>
          <!--<el-form-item label="開始揀貨時間" >
            <el-col :span="10">
              <el-date-picker type="datetime" placeholder="選擇時間" v-model="dialogData.startPickTime" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="發貨時間" >
            <el-col :span="10">
              <el-date-picker type="datetime" placeholder="選擇時間" v-model="dialogData.postTime" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="是否取消" label-width="150px">
            <el-col :span="4">
              <el-switch
                v-model="canceled"
                on-color="#13ce66"
                on-text="是"
                off-text="否"
                off-color="#666666"
                @change='changeIsCanceledStatus($event)'>
              </el-switch>
            </el-col>
          </el-form-item>
          <el-form-item label="費用是否結清" label-width="150px">
            <el-col :span="4">
              <el-switch
                v-model="settled"
                on-color="#13ce66"
                on-text="是"
                off-text="否"
                off-color="#666666"
                @change='changeIsSettledStatus($event)'>
              </el-switch>
            </el-col>
          </el-form-item>
          <el-form-item label="運費是否結清" label-width="150px">
            <el-col :span="4">
              <el-switch
                v-model="settledFee"
                on-color="#13ce66"
                on-text="是"
                off-text="否"
                off-color="#666666"
                @change='changeIsSettledFeeStatus($event)'>
              </el-switch>
            </el-col>
          </el-form-item>
          <el-form-item label="是否發貨" label-width="150px">
            <el-col :span="4">
              <el-switch
                v-model="post"
                on-color="#13ce66"
                on-text="是"
                off-text="否"
                off-color="#666666"
                @change='changeIsPostStatus($event)'>
              </el-switch>
            </el-col>
          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editOrderInvoiceSubmit">保存並關閉</el-button>
          <el-button @click.native="dialogVisible = false">取消</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import util from '../../common/js/util'
  import NProgress from 'nprogress'
  import http from '../../api/http'

  export default {
    data(){
      return{
        page:1,
        rows:10,
        data:{
          id:"",
          name:"",
          sts:null
        },
        // 彈出框的數據
        dialogData:{
          id:'',
          /*customerAddress:'',
          customerPhone:'',
          customerName:'',*/
          waybillNo:'',
          carrier:'',
         /* startPickTime:"",
          postTime:"",
          canceled:false,
          settled:false,
          settledFee:false,
          post:false*/
        },
        multipleSelection:[],
        orderInvoiceList:{},
        /*canceled:false,
        settled:false,
        settledFee:false,
        post:false,*/
        dialogVisible: false
      }
    },
    methods:{
      loadOrderInvoiceList(){
        let obj = {
          page : this.page,
          rows : this.rows,
          name : this.data.name,
          sts : this.data.sts
        }
        this.apiPost('/order/invoiceList',obj).then(res=>{
          this.handelResponse(res, (data) => {
            this.orderInvoiceList = data
          })
        })
      },
      handleSizeChange(val) {
        this.rows = val
        this.loadOrderInvoiceList();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.loadOrderInvoiceList();
      },
      clearable(){
        this.data.name = '';
        this.data.sts = null;
        this.loadOrderInvoiceList();
      },
      changeTable(val){
        this.multipleSelection = val;
      },
      // 檢索
      select(){
        this.loadOrderInvoiceList()
      },
      //清空按鈕操作
      emptyData(){
        this.data.name = "";
        this.data.sts = null;
        this.select()
      },
      //布爾類型數據格式化顯示
      booleanMsgFun(row, column,value){
          if(value){
              return "是";
          }else{
              return "否";
          }
      },
      //主要功能打開編輯頁面，回顯當前行信息,包括圖片
      editOrderInvoice(index,row) {
        this.apiPost('/order/orderInvoice/'+row.id+'/get',{}).then((res) => {
          this.handelResponse(res, (data) => {
            this.dialogData=data
            /*if(data.startPickTime){
              this.dialogData.startPickTime=new Date(data.startPickTime);
            }else{
              this.dialogData.startPickTime=null;
            }
            if(data.postTime){
              this.dialogData.postTime=new Date(data.postTime);
            }else{
              this.dialogData.postTime=null;
            }
            this.canceled=data.isCanceled;
            this.settled=data.isSettled;
            this.settledFee=data.isSettledFee;
            this.post=data.isPost;*/
            this.dialogVisible=true;
          })
        });
      },
      //發貨單編輯頁面的保存方法
      editOrderInvoiceSubmit() {
        /*this.dialogData.canceled=this.canceled;
        this.dialogData.settled=this.settled;
        this.dialogData.settledFee=this.settledFee;
        this.dialogData.post=this.post;*/
        this.apiPost('/order/orderInvoice/'+this.dialogData.id+'/updateIsPost',this.dialogData).then((res) => {
          this.handelResponse(res, (data) => {
            this.dialogVisible=false;
            _g.toastMsg('success','提交成功');
            this.loadOrderInvoiceList();
          })
        });
      },
      //清空表單的回顯值問題
      newData(){
        this.dialogData.id="",
        /*this.dialogData.customerAddress="",
        this.dialogData.customerPhone="",
        this.dialogData.customerName="",*/
        this.dialogData.waybillNo="",
        this.dialogData.carrier=""
        /*this.dialogData.startPickTime=null,
        this.dialogData.postTime=null,
        this.dialogData.canceled=false,
        this.dialogData.settled=false,
        this.dialogData.settledFee=false,
        this.dialogData.post=false*/
      },
      /*changeIsCanceledStatus($event){
        this.canceled=$event;
      },
      changeIsSettledStatus($event){
        this.settled=$event;
      },
      changeIsSettledFeeStatus($event){
        this.settledFee=$event;
      },
      changeIsPostStatus($event){
        this.post=$event;
      }*/
      //修改當前記錄狀態為揀貨中
      updateOrderInvoice(index,row) {
        this.$confirm('確認修改當前選中記錄狀態為揀貨中嗎？', '提示', {
          type: 'warning'
        }).then(() => {
          this.apiPost('/order/orderInvoice/'+row.id+'/updateStartPick',{}).then((res) => {
            this.handelResponse(res, (data) => {
              _g.toastMsg('success','修改成功');
              this.loadOrderInvoiceList();
            })
          });
        }).catch(() => {
        });
      },
      //批量修改當前記錄狀態為揀貨中
      updateOrderInvoiceBatch(){
        if(this.multipleSelection.length == 0){
          this.$message.error('請至少選中一行數據');
          return
        }
        let id = []
        for(let i = 0;i < this.multipleSelection.length;i ++){
          id[i] = this.multipleSelection[i].id
        }
        let obj = {
          ids : id
        }
        console.log("aaabbb:"+JSON.stringify(obj));
        this.$confirm('確認修改當前選中記錄狀態為揀貨中嗎？', '提示', {
          type: 'warning'
        }).then(() => {
          this.apiPost('/order/orderInvoice/updateStartPickBatch',obj).then(res=>{
            this.handelResponse(res, (data) => {
              _g.toastMsg('success','修改成功');
              this.loadOrderInvoiceList();
            })
          });
        }).catch(() => {
        });
      },
    },
    mounted(){
      this.loadOrderInvoiceList();
    },
    mixins: [http],
  }
</script>

<style lang="scss" scoped>
  .userView{
    .buttonTop{
      padding: 6px 10px 0;
      background: #545c64;
      height: 56px;
      overflow: hidden;
      border-bottom: 1px solid rgb(255, 208, 75);
      color: #fff;
    }
    .main{
      padding: 0 15px;
    .center{
      margin-top: 10px;
      margin-bottom: 20px;
    }
    }
    .input{
      float: left;
      margin: 8px 0;
      margin-right: 32px;
    }
  }
  .page {
    /* width: 600px; */
    margin: 10px auto 10px;
  }
</style>