记录一个简单的vue页面实现
Posted Mr_伍先生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记录一个简单的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页面实现的主要内容,如果未能解决你的问题,请参考以下文章