通過一個方法進行多條資料的檢視詳情+使用遞歸完成位址的關聯檢視詳情和修改操作+時間線使用方法

一、背景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();
   }