记录一个简单的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 ...
随机推荐
- Angular快速学习笔记(4) -- Observable与RxJS
介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持在应用中的发布者和订阅者之间传递消息. 可观察对象可以发送多个任意类型的值 -- 字面量.消息.事件. 基 ...
- 【LOJ】#2523. 「HAOI2018」奇怪的背包
题解 复杂度怎么算也要2s的题怎么0.5s就跑完了,迷啊 这个题简直算完复杂度不敢写,写了就赚飞了好吧 根据裴蜀定理,显然选出的数和P的gcd是w的约数 我们考虑枚举\(P\)的约数,上限当然是\(\ ...
- 002 @RequestMapping的说明
一:修饰方法 1.举例 2.效果 二:修饰类 1.测试类 2.index.jsp 3.效果 ---------------- 三:映射请求请求方法 1.使用语法 分别是method 2.Method的 ...
- RN Android全面屏适配
像现在市面上新出的手机,例如华为P30 pro,小米9,iPhone XS MAX,屏占比都惊人的达到90%以上,这些手机具备了以下几个特点 大,屏占比高,长宽比都不再是16:9,都达到了19.5:9 ...
- 初识thinkphp(2)
thinkphp的url路径的表示格式为 http://ip/tp/public/index.php/模块/控制器/操作 这里url最后的操作就是类里面的函数. 0x01:url访问格式 官方文档中有 ...
- ViewPager 无限循环
Overview 我们在使用ViewPager来制作图片轮播的时候,常常为ViewPager不能一直无限循环的问题所苦恼.对于这个问题,目前从网上找到了两个思路来解决: 将 ViewPager 的Co ...
- swiper实例应用
1.手机竖屏单页滑 为了防止图压缩,单独切图,背景用纯色 2.自由滑 很长的图,自由切割
- [HDU2874]Connections between cities
思路:LCA裸题.本来是帮pechpo调错,结果自己写了半天… 设$dis_x$是点$x$到根结点距离,不难想到两点$u$.$v$之间最短距离等于$dis_u+dis_v-dis_{LCA(u,v)} ...
- 【转载】VC IME 通信
文本输入框作为一个最基本的UI控件,被众多UI框架默认支持.Windows下最简单的就是CEdit(WTL封装),也有更为复杂的CRichEdit(WTL封装).文本输入框是基本控件中最难实现的控件之 ...
- Serial Wire Debugging the STM32 via the Bus Pirate
Serial Wire Debugging the STM32 via the Bus Pirate 2 October 2010 Step 1 - The Bus Pirate Step 2 - D ...