通过一个方法进行多条数据的查看详情+使用递归完成地址的联动查看详情和修改操作+时间线使用方法
一、后台Dal层多条数据的查看详情
创建一个ViewModel的类 放入需要查看详情的字段 方便调用
/// <summary> /// 订单详情 /// </summary> /// <param name="oId"></param> /// <returns></returns> public ViewModel OrderDetail(int oId) { ViewModel vm = new ViewModel(); //订单状态 var item = db.Orders.Where(u => u.OId == oId).FirstOrDefault(); vm.OId = item.OId; vm.OrderNumber = item.OrderNumber; //商品列表 var productList = from a in db.SubOrders join b in db.Products on a.PId equals b.PId where a.OId == oId select new ProductDto { PId = b.PId, PName =b.PName, Price= b.Price, Count = a.Counter //购买数量 }; vm.ProductList = productList.ToList(); //收货人信息 var query = from c in db.ShopAddress join d in db.Citys on c.ProvinceId equals d.CId join e in db.Citys on c.CityId equals e.CId select new { c.Phone, c.ShopName, Address = d.CName + e.CName + c.Address }; var itemAddress = query.FirstOrDefault(); vm.ShopName = itemAddress.ShopName; vm.Phone = itemAddress.Phone; vm.Address = itemAddress.Address; return vm; }
二、前台Vs Code多条数据的查看详情
通过主页面传过来的ID进行显示
<template> <div class="page"> <div class="status"> <h1>订单状态</h1> <table> <tr> <td>订单号：</td> <td>{{viewModel.OrderNumber}}</td> </tr> <tr> <td>订单状态：</td> <td>{{viewModel.IsPayment===1?"已支付":"未支付"}}</td> </tr> </table> </div> <div class="pruductlist"> <h1>商品列表</h1> <table> <thead> <tr> <td>商品名称</td> <td>商品价格</td> <td>购买数量</td> <td>小计</td> </tr> </thead> <tbody> <tr v-for="(item,index) in viewModel.ProductList" :key="index"> <td>{{item.PName}}</td> <td>{{item.Price}}</td> <td>{{item.Count}}</td> <td>{{item.Price*item.Count}}</td> </tr> <tr> <td colspan="4">商品总价：￥{{totalSum}}</td> </tr> </tbody> </table> </div> <div class="address"> <el-descriptions title="收货人信息"> <el-descriptions-item label="收货人姓名">{{viewModel.ShopName}}</el-descriptions-item> <el-descriptions-item label="收货人地址">{{viewModel.Address}}</el-descriptions-item> <el-descriptions-item label="电话">{{viewModel.Phone}}</el-descriptions-item> </el-descriptions> </div> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { viewModel: { OId: 0, OrderNumber: '', IsPayment: 0, ProductList: [], Address: '', ShopName: '', Phone: '', }, } }, components: {}, methods: { loadOrderDetail() { this.$axios .get( `http://localhost:63096/api/order/OrderDetail?oid=${this.$route.params.oid}` ) .then((res) => { this.viewModel = res.data console.log(this.viewModel) }) }, }, created() { this.loadOrderDetail() }, computed: { totalSum() { var total = 0 this.viewModel.ProductList.forEach((item) => { total += item.Price * item.Count }) return total }, }, } </script> <style scoped > table{ background-color: white; padding: 10; width: 100%; } td{ border: 1px solid #ccc; padding: 10px; } </style>
三、后台Dal递归地址联动显示修改操作
/// <summary> /// 返回级联数据 /// </summary> /// <returns></returns> public List<TsCity> GetCities() { return GetTsCities(db.Citys.ToList(), 0); } public List<TsCity> GetTsCities(List<City> list,int pid) { return list.Where(u => u.ParentId == pid).Select(t => new TsCity { CId = t.CId, CName = t.CName, ParentId = t.ParentId, Children = GetTsCities(list, t.CId).Count==0?null : GetTsCities(list, t.CId) }).ToList(); }
四、前台Vs Code递归地址联动显示修改操作
页面显示
/// <summary> /// 收货地址 /// </summary> /// <param name="sid"></param> /// <returns></returns> public ShopAddress GetShopAddressById(int sid) { return db.ShopAddress.Where(u => u.SId == sid).FirstOrDefault(); } /// <summary> /// 修改收货地址 /// </summary> /// <param name="shopAddress"></param> /// <returns></returns> public int EditShopAddress(ShopAddress shopAddress) { var item = db.ShopAddress.Find(shopAddress.SId); item.ProvinceId = shopAddress.ProvinceId; item.CityId = shopAddress.CityId; item.Address = shopAddress.Address; return db.SaveChanges(); } /// <summary> /// 返回级联数据 /// </summary> /// <returns></returns> public List<TsCity> GetCities() { return GetTsCities(db.Citys.ToList(), 0); } public List<TsCity> GetTsCities(List<City> list,int pid) { return list.Where(u => u.ParentId == pid).Select(t => new TsCity { CId = t.CId, CName = t.CName, ParentId = t.ParentId, Children = GetTsCities(list, t.CId).Count==0?null : GetTsCities(list, t.CId) }).ToList(); }
数据加载
data() { return { OrderNumber: '', //查询-订单编号 tableData: [], //表格数据 pageindex: 1, pagesize: 5, totalCount: 0, ids: [], //批量删除 dialogFormVisible: false, //模态框 是否隐藏 form: { //模态表单 sid:0, city:[], //获取级联后的数据 address:'' //详细地址 }, shopAddress:{ SId:0, ProvinceId:0, CityId:0, Address:'' }, formLabelWidth: '120px', options:[] , //级联 dialogVisible: false, //模态框 物流 activities:[] , //模态框 物流数据 reverse: true, //模态框 是否倒序 }
//加载级联数据 loadCascader(){ this.$axios.get('http://localhost:63096/api/order/GetCities').then(res=>{ this.options = res.data; }) }, //修改级联数据 EditAddrsss(){ this.dialogFormVisible = false this.shopAddress.SId = this.form.sid this.shopAddress.ProvinceId = this.form.city[0] this.shopAddress.CityId = this.form.city[1] this.shopAddress.Address = this.form.address this.$axios.post('http://localhost:63096/api/order/EditShopAddress',this.shopAddress).then(res=>{ if (res.data>0) { this.$message.success('修改成功'); this.loadDataTable(); }else{ this.$message.success('修改失败'); } }) //console.log(this.form); },
五、后台Dal时间线显示操作
/// <summary> /// 显示物流信息 /// </summary> /// <param name="oid"></param> /// <returns></returns> public List<Logistics> GetLogistics(int oid) { return db.Logistics.Where(u => u.OId == oid).ToList(); }
六、前台Vs Code时间线显示操作
页面显示
<el-dialog title="物流进度" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <el-timeline :reverse="reverse"> <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.ScheduleTime"> {{activity.Schedule}} </el-timeline-item> </el-timeline> </el-dialog>
数据加载
//行时间路程按钮 handleDelete( row) { this.dialogVisible = true; this.$axios(`http://localhost:63096/api/order/GetLogistics?oid=${row.OId}`).then(res=>{ this.activities = res.data; }) console.log(this.activities) }, //点击退出 handleClose(done) { done(); }
