一个基于vue.js表单页面，包含列表，查询，排序，分页等

一个个功能记录太麻烦了，直接把一个完整页面贴上，做一个备份

<template>
  <div style="height:850px"
       v-loading="loading"
       element-loading-text="正在提交..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
  <div class="allActive">
    <el-row class="head">
      <el-col :span="18" style="padding:20px 0;background: #33CCCC;">
        <el-col :span="8">
          {{ allConAmount }}<br>
          <span>合同总金额</span>
        </el-col>
        <el-col :span="8">
          {{ allConGetmoney }}<br>
          <span>已收款总金额</span>
        </el-col>
        <el-col :span="8" style="border: none;">
          {{ allConWaitmoney }}<br>
          <span>未收款总金额</span>
        </el-col>
      </el-col>

      <el-col :span="5" :offset="1" style="background:  #3091F2;padding:40px 0;">
        {{ allCount }}<br>
        <span>合同总数</span>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <h3>合同列表</h3>
      <el-row type="flex" align="middle" :gutter="20" style="padding:20px 0;">
        <el-col :span="2">
          条件查询:
        </el-col>
        <el-col :span="5" >
          <el-input placeholder="请输入合同编号或合同名称" size="large" v-model="saleconNoText"></el-input>
        </el-col>
        <el-col :span="5" style="width: 140px;">
          <el-select v-model="currentType">
            <el-option
              v-for="type in types"
              :value="type">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="13">
          <!--<el-button :plain="true" type="info">设置活动分类</el-button>-->
          <el-button :plain="true" @click.native="handleAdd" type="info">新增</el-button>
          <el-button :plain="true" @click.native="handleUpdate" type="info">修改</el-button>
          <el-button :plain="true" @click.native="handleRemove" type="danger">删除</el-button>
          <el-button :plain="true" @click.native="handleAuditing" type="info">审批</el-button>
        </el-col>

        <el-col :span="5" style="width: 160px;text-align: center;color: #20a0ff">
          已选择{{ activeNum }}条合同
        </el-col>
      </el-row>
      <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
        <el-tab-pane name="全部" label="全部"></el-tab-pane>
        <el-tab-pane name="5" label="已审批"></el-tab-pane>
        <el-tab-pane name=" " label="未审批"></el-tab-pane>
      </el-tabs>
      <el-table :data="filteredTableData"  style="width: 100%"
                @cell-click="handleSelect" @selection-change="selectionchange" @sort-change="onSortChange"
                >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column property="saleconNo" label="合同编号"></el-table-column>
        <el-table-column property="saleconName" label="合同名称" ></el-table-column>
        <el-table-column
            property="saleconTime"
            :formatter="formatDate"
            label="签订时间">
        </el-table-column>
        <el-table-column property="orgName" label="甲方名称"></el-table-column>
        <el-table-column
          property="conAmount"
          label="合同金额/元"
          sortable="custom"
          :sort-orders="['ascending','descending']">
        </el-table-column>
        <el-table-column property="conGetmoney" label="已收款金额/元" sortable="custom"
                         :sort-orders="['ascending','descending']"></el-table-column>
        <el-table-column property="conWaitmoney" label="待收款金额/元" sortable="custom"
                         :sort-orders="['ascending','descending']"></el-table-column>
        <el-table-column inline-template label="操作" align="center" property="id">
          <el-button type="text" size="mini" @click.native="">查看详情</el-button>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end" style="padding:20px 0; ">
        <el-pagination
            @size-change='handleSizeChange'
            background
            @current-change='handleCurrentChange'
            :current-page ='queryInfo.pagenum'
            :page-sizes='[5,10,15,20,50]'
            :page-size='queryInfo.pagesize'
            layout='total,sizes,prev,pager,next,jumper'
            :total='total'>
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <el-dialog title="填写审批意见"  v-model="dialogFormVisible" top="35%">
      <el-form :model="dialogForm">
        <el-form-item>
          <el-input  type="textarea" :rows="4" v-model="dialogForm.comment" auto-complete="off" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                    <el-button @click.native="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary"  @click.native="handleSave(dialogForm.name,dialogForm)">确定</el-button>
                </span>
    </el-dialog>

  </div>
  </div>
</template>
<script>
  import {CR02query} from "../../iplat/user";
  import {CR02toUpdate} from "../../iplat/user";
  import {CR02delete} from "../../iplat/user";
  import {CR02toWorkflowSave} from "../../iplat/user";
  import debounce from "lodash.debounce";

  export default {
    name: 'allActive',
    data: function () {
      return {
        queryInfo:{
          pagenum:1,//当前页数
          pagesize:10//每页条数
        },
        total:0,//总条目数
        dialogForm:{comment:''},
        pkTcr02Id:'',
        allConAmount: 0,
        allConGetmoney: 0,
        allConWaitmoney: 0,
        allCount: 0,
        totalSignUp: 204,
        auditNum: 15,
        activeNum: 0,
        currentType: '全部',
        selectItems:[],
        types: ['全部','陆军','空军','海军'],
        tableData: [],
        saleconNoText:'',
        queryData: [],
        pageData: [],
        activeName: '全部',
        ascending:null,
        descending:null,
        dialogFormVisible: false,
        loading:false,
      }
    },
    mounted: function () {
      var _this = this;
      //随便传，可以不传，仅做get方法传值示例
        CR02query(1,999999).then(response=>{
          debugger;
          if(response.data){
            _this.total = response.data.length;
            _this.pageData = response.data;
            _this.queryData = response.data;
            var num1 = 0;
            var num2 = 0;
            var num3 = 0;
            for(var i=0;i<response.data.length;i++){
              num1 = num1 + response.data[i].conAmount;
              num2 = num2 + response.data[i].conGetmoney;
              num3 = num3 + response.data[i].conWaitmoney;
              response.data[i].conAmount = response.data[i].conAmount.toFixed(2);
              response.data[i].conGetmoney = response.data[i].conGetmoney.toFixed(2);
              response.data[i].conWaitmoney = response.data[i].conWaitmoney.toFixed(2);
            }
            _this.allConAmount = num1.toFixed(2);
            _this.allConGetmoney = num2.toFixed(2);
            _this.allConWaitmoney = num3.toFixed(2);
            _this.allCount = response.data.length;
            var tab = {};
            tab.name = "全部";
            this.tabClick(tab,null);
          //  this.queryInfo.pagenum,this.queryInfo.pagesize
            var list = _this.pagehandle(response.data);
            _this.tableData = list;

          }else{
            alert("数据获取失败");
          }
        })
    },
    computed:{
      //下拉框查询
        filteredTableData: function () {
          var type = this.currentType;
          var _this = this;
          var list = [];
          if (type == '全部'|| type == ''){
            _this.total = _this.queryData.length;
            return _this.pagehandle(_this.queryData);
          }

          for (var i=0;i<_this.queryData.length;i++){
            if (_this.queryData[i].orgName==type){
              list.push(_this.queryData[i]);
            }
          }
          _this.tableData = list;
          _this.total = list.length;
          return _this.pagehandle(_this.tableData);
        }
    },
    methods: {
      //分页公共方法
      pagehandle(list){
        var pageList = [];
        var num =parseInt(this.queryInfo.pagenum)*parseInt(this.queryInfo.pagesize)-parseInt(this.queryInfo.pagesize);
        if(list.length<parseInt(this.queryInfo.pagenum)*parseInt(this.queryInfo.pagesize)){
          for(var i=num;i<list.length;i++){
            pageList.push(list[i]);
          }
        }else{
          for(var i=num;i<num+parseInt(this.queryInfo.pagesize);i++){
            pageList.push(list[i]);
          }
        }
        return pageList;
      },
      //切换分页单页展示条数主方法
      async getCateList(){
        debugger;
        var _this = this;
        var list = _this.pagehandle(_this.queryData);
        _this.tableData = list;
      },
      //单页条数
      handleSizeChange(val){
        this.queryInfo.pagesize = val;
        this.getCateList()
      },
      //第几页
      handleCurrentChange(val){
        this.queryInfo.pagenum = val;
        this.getCateList()
      },
      //提交流程方法
      handleSave: function (tag,form) {
        debugger;
        var _this = this;
        if(form.comment&&form.comment!=""){
          _this.loading=true;
          this.selectItems.forEach(function (id) {
            debugger;
            _this.dialogFormVisible = false;
            CR02toWorkflowSave(id,form.comment).then(response=>{
              debugger;
              _this.loading=false;
              _this.$message.success('提交成功!');
              _this.$router.go(0);
            })
          })
        }else{
          this.$message({
            message: '审批意见不能为空',
            type: 'warning'
          });
        }
      },
      //列表三角排序点击事件入口
      onSortChange({ prop, order }) {
        debugger;
        var _this = this;
        var list = this.queryData.sort(this.compare(prop,order));
        _this.tableData = _this.pagehandle(list);
      },

      /**
       * 排序比较 重写el标签自带排序
       * @param {string} propertyName 排序的属性名
       * @param {string} sort ascending(升序)/descending(降序)
       * @return {function}
       */
      compare (saleconName, conAmount) {
        return function (obj1, obj2) {
          var value1 = obj1[saleconName]
          var value2 = obj2[saleconName]
          if (parseFloat(value1) <= parseFloat(value2)) {
            return conAmount === 'ascending' ? -1 : 1
          } else if (parseFloat(value1) > parseFloat(value2)) {
            return conAmount === 'ascending' ? 1 : -1
          }
          // if (typeof value1 === 'string' && typeof value2 === 'string') {
          //   const res = value1.localeCompare(value2, 'zh')
          //   return conAmount === 'ascending' ? res : -res
          // } else {
          //   if (value1 <= value2) {
          //     return conAmount === 'ascending' ? -1 : 1
          //   } else if (value1 > value2) {
          //     return conAmount === 'ascending' ? 1 : -1
          //   }
          // }
        }
      },
      //转日期方法
      formatDate:function(row, column){
        let data = row[column.property]
        if(data == null) {
          return null
        }
        let date = new Date(data);
        var o = {
          "M+" : date.getMonth()+1,                 //月份
          "d+" : date.getDate(),                    //日
          "h+" : date.getHours(),                   //小时
          "m+" : date.getMinutes(),                 //分
          "s+" : date.getSeconds(),                 //秒
          "q+" : Math.floor((date.getMonth()+3)/3), //季度
          "S"  : date.getMilliseconds()             //毫秒
        };
        var fmt = "yyyy-MM-dd hh:mm:ss";
        if(/(y+)/.test(fmt)) {
          fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
          if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
          }
        }
        return fmt ;
      },
      //查看详情
      handleSelect: function (row, column, cell, event) {
        debugger;
       if (column.label == '操作') {
         var _this = this;
           debugger;
           CR02toUpdate(row.pkTcr02Id).then(response=>{
             debugger;
             response.data.by1='preview';
             _this.$router.push({path:'/activeManage/detail/page1',query:response.data})
           })
        } else if(column.type == 'selection'){
            row.$info = !row.$selected;
       }else{
            row.$selected = !row.$selected;
            row.$info = row.$selected;
       }
      },
      //勾选框赋值
      selectionchange: function (val) {
        var arr = [];
        val.forEach(function (item) {
            arr.push(item.pkTcr02Id);
        });
        this.selectItems = arr;
        this.activeNum = this.selectItems.length;
      },
      //新增方法
      handleAdd:function(){
        var _data = {name:"121212",saleconName:"2",saleconTime:"3",orgName:"4"};
        this.$router.push({path:'/activeManage/detail/page1',query:_data})
      },
      //修改方法
      handleUpdate:function(){
        if(this.selectItems.length!=1){
          alert("请选择一条数据！");
          return;
        }
        var _this = this;
        this.selectItems.forEach(function (id) {
          debugger;
          CR02toUpdate(id).then(response=>{
            debugger;
            _this.$router.push({path:'/activeManage/detail/page1',query:response.data})
          })
        })
      },
      //删除方法
      handleRemove:function(){
        if(this.selectItems.length==0){
          alert("请选择数据！");
          return;
        }
        var _this = this;
        var tableData = this.tableData;
        this.selectItems.forEach(function (id) {
          tableData.forEach(function (data) {
            debugger;
              if(id == data.pkTcr02Id){
                tableData.splice(tableData.indexOf(data),1);
                CR02delete(data.pkTcr02Id).then(response=>{
                  _this.allCount = _this.allCount-1;
                  _this.$router.go(0);
                })
              }
          })
        });
        this.$message.success('操作成功!');
        this.selectItems = [];
      },
      //流程弹出框方法
      handleAuditing:function(){
        if(this.selectItems.length!=1){
          alert("请选择一条数据！");
          return;
        }
        var _this = this;
        this.selectItems.forEach(function (id) {
          debugger;
          CR02toUpdate(id).then(response=>{
            debugger;
            if(response.data.by5){
              if(response.data.by5=="5"){
                alert("流程已经结束！");
                return;
              }else{
                _this.dialogFormVisible = true;
                _this.dialogForm = {};
              }
            }else{
              _this.dialogFormVisible = true;
              _this.dialogForm = {};
            }
          })
        })

      },
      //模糊查询框方法
      filterBySearchText: function (val,data) {
        debugger;
        return data.filter(function (item) {
          return item.saleconName.toLowerCase().match(val.toLowerCase()) || item.saleconNo.match(val)
        })
      },
      //tab查询方法
      filterByStatus: function (status,data) {
        debugger;
        return data.filter(function (item) {
          return (status=="全部") ? true : (item.by5 == status);
        })
      },
      //查询公共方法
      filterByVal: function () {
        debugger;
        var _this = this;
        var data = this.filterByStatus(this.by5, _this.pageData);
        _this.queryData = this.saleconNoText ? this.filterBySearchText(this.saleconNoText,data):data;
        _this.total = (this.saleconNoText ? this.filterBySearchText(this.saleconNoText,data):data).length;
        this.tableData = _this.pagehandle(this.saleconNoText ? this.filterBySearchText(this.saleconNoText,data):data);
      },
      //tab切换方法
      tabClick: function (tab, event) {
        debugger;
        this.by5 = tab.name;
        this.filterByVal();
      },
    },
    watch: {
      //模糊查询入口
      saleconNoText: debounce(function (val, oldVal) {
        debugger;
        this.filterByVal();
      }, 500)
    },
    filters: {
      //数字两位小数
      rounding (value) {
        debugger;
        return value.toFixed(2);
      }
    },
  }
</script>
<style>
  .allActive > .head > .el-col > .el-col {
    padding: 20px 0;
    border-right: solid 1px #fff;
  }

  .allActive .head {
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 50px;
  }

  .allActive .head span {
    font-size: 16px;
  }
</style>

页面最终样式

end