一个个功能记录太麻烦了,直接把一个完整页面贴上,做一个备份
<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