记录一个简单的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>
记录一个简单的vue页面实现的更多相关文章
- 手把手教你从零写一个简单的 VUE
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...
- tkinter做一个简单的登陆页面
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- tkinter做一个简单的登陆页面(十六)
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
- 实现一个简单的Vue插件
我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...
- vue-cli3和element做一个简单的登陆页面
1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- bootstrap 一个简单的登陆页面
效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...
随机推荐
- 字符串匹配的kmp算法 及 python实现
一:背景 给定一个主串(以 S 代替)和模式串(以 P 代替),要求找出 P 在 S 中出现的位置,此即串的模式匹配问题. Knuth-Morris-Pratt 算法(简称 KMP)是解决这一问题的常 ...
- 【转载】Java与C++语言在作用域上的差异浅析
http://developer.51cto.com/art/200906/126199.htm 差异一:变量作用域的不同 如下面这段程序代码是符合C++语言的语法要求的.其可以在C语言下正常运行.但 ...
- 什么是Less、typescript与webpack?
前端常用技术概述--Less.typescript与webpack 前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Les ...
- 003.iSCSI客户端管理
一 启动器介绍 iSCSI启动器通常在软件中实施,也可以采用硬件启动器.软件启动器需要安装iSCSI-initiator-utils软件包.包含如下文件: /etc/iscsi/iscsid.conf ...
- MIT-6.824 Lab 3: Fault-tolerant Key/Value Service
概述 lab2中实现了raft协议,本lab将在raft之上实现一个可容错的k/v存储服务,第一部分是实现一个不带日志压缩的版本,第二部分是实现日志压缩.时间原因我只完成了第一部分. 设计思路 如上图 ...
- linux学习笔记-12.输入输出重定向及管道
1.新建一个文件 touch a.txt> b.txt 2.错误重定向:2> find /etc -name zhaoxing.txt 2> error.txt 3.将正确或错误的信 ...
- AngularJS之jeDate日期控件基本使用
业务背景: 初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键.时分秒等.鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDa ...
- JSP的几个页面指令
页面指令:向服务器说明页面自身的特征,以便服务器. 1,<%@page contentType="text/xml;charset=utf-8" %> 客户端---&g ...
- UICollectionView 常用操作
1 iOS开发 - UICollectionView点击展开收起
- UG中STP203和STP214的区别
UG转档STP203,STP214的区别:STP214转出的图档将保留原图属性,例如所在图层,曲面颜色,装配组件名称等.STP203没有上述功能.