订单列表完善

src/views/Orders/OrderList.vue

@@ -21,9 +21,9 @@
     :header-cell-style="{ 'text-align': 'center' }">
     <el-table-column type="selection" width="55" fixed="left"></el-table-column>
     <el-table-column prop="id" label="订单编号" width="80"></el-table-column>
-    <el-table-column prop="userId" label="用户id"></el-table-column>
+    <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
-    <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
+    <el-table-column prop="userName" label="用户名" width="80"></el-table-column>
-    <el-table-column prop="orderNumber" label="订单编号" width="150"></el-table-column>
+    <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
     <el-table-column label="所购买的商品" width="100">
       <el-table-column label="展开所有商品" type="expand" width="100">
         <template #default="props">
@@ -47,9 +47,9 @@
     </el-table-column>
     <el-table-column label="地址信息快照" width="180">
       <el-table-column prop="addressSnapshot.name" label="收货人" />
-      <el-table-column prop="addressSnapshot.phone" label="手机号" />
+      <el-table-column prop="addressSnapshot.phone" label="手机号" width="180"/>
-      <el-table-column prop="addressSnapshot.region" label="地区" />
+      <el-table-column prop="addressSnapshot.region" label="地区" width="180"/>
-      <el-table-column prop="addressSnapshot.detailAddress" label="详细地址" />
+      <el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180"/>
     </el-table-column>
     <el-table-column label="优惠卷信息快照" width="50">
       <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />
@@ -60,13 +60,13 @@
     <el-table-column prop="orderStatus" label="快递单号"></el-table-column>
     <el-table-column label="操作" width="220px" fixed="right">
       <template #default="scope">
-        <el-button size="small" @click="showDetail(scope.$index, scope.row, 0)">
+        <el-button size="small" @click="showDetail(scope.$index, scope.row)">
           详情
         </el-button>
-        <el-button size="small" @click="">
+        <el-button size="small" @click="deliverGoods(scope.row)">
           发货
         </el-button>
-        <el-button size="small" @click="" type="warning" plain>
+        <el-button size="small" @click="deleteOrder(scope.row)" type="warning" plain>
           取消订单
         </el-button>
       </template>
@@ -78,55 +78,47 @@
       :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
       :total="total" />
   </div>
-  <!-- <el-dialog title="订单详情信息" v-model="orderList" width="60%">
+  <el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
-      <el-form label-width="100px" size="default">
+      <el-form label-width="100px" size="default" :model="editForm">
-        <el-form-item label="订单id">
+        <el-form-item label="订单编号">
-          <el-input v-model="orderList.id" autocomplete="off"></el-input>
+          <el-input v-model="editForm.addressSnapshot" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="用户id">
-          <el-input v-model="orderList.userId" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="用户名称">
-          <el-input v-model="orderList.addressSnapshot.name" autocomplete="off"></el-input>
+          <el-input v-model="editForm.addressSnapshot.name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="订单编号">
+        <el-form-item label="收货手机">
-          <el-input v-model="orderList.addressSnapshot" autocomplete="off"></el-input>
+          <el-input v-model="editForm.addressSnapshot.phone" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="收货地址">
-          <el-input v-model="orderList.addressSnapshot.region" autocomplete="off"></el-input>
+          <el-input v-model="editForm.addressSnapshot.region" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="详细地址">
+        <!-- 这里的商品明细就不放图片了 -->
-          <el-input v-model="orderList.addressSnapshot.detailAddress" autocomplete="off"></el-input>
+        <el-form-item label="商品明细">
-        </el-form-item>
+          <el-input v-model="editForm.addressSnapshot.detailAddress" autocomplete="off"></el-input>
-        <el-form-item label="电话">
-          <el-input v-model="orderList.addressSnapshot.phone" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="优惠券名称">
-          <el-input v-model="orderList.couponSnapshot.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="满减金额">
-          <el-input v-model="orderList.couponSnapshot.conditionAmount" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="订单总金额">
-          <el-input v-model="orderList.totalAmount" autocomplete="off"></el-input>
+          <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="订单状态">
-          <el-input v-model="orderList.orderStatus" autocomplete="off"></el-input>
+          <el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="快递单号">
+          <!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
         </el-form-item>
         <el-form-item label="创建时间">
-          <el-input v-model="orderList.createTime" autocomplete="off"></el-input>
+          <el-input v-model="editForm.createTime" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="更新时间">
-          <el-input v-model="orderList.updateTime" autocomplete="off"></el-input>
+          <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button style="height: 30px;" @click="dialogFormVisible = false">取消</el-button>
+          <el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
-          <el-button style="height: 30px" type="primary" @click=save>确认</el-button>
+          <el-button style="height: 30px" type="primary" @click="DialogVisible = false">确认</el-button>
         </div>
       </template>
-     </el-dialog> -->
+     </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -136,8 +128,8 @@ import { ElMessage } from "element-plus";
 const tableData: any = ref([]);  //表单展示数据
 const total = ref(0);
 const title = ref('') 
-const editForm: any = ref({});
+const editForm: any = ref({});  //编辑表单
-const DialogVisible = ref(true);
+const DialogVisible = ref(false); //详情展示
 const name = ref('')
 const searchParams: any = ref({ //封装分页
   current: 1, //当前页码
@@ -165,11 +157,11 @@ const handleSelectionChange = (row: any) => {
 const getOrderList = async () => {
   try {
     const res = await myAxios.post('/order/list/page', { ...searchParams.value });
-    console.log('订单信息--->', res.data.data);
+    // console.log('订单信息--->', res.data.data);
     if (res.data.code === 1) {
       tableData.value = res.data.data.records;
       total.value = parseInt(res.data.data.total)
-      console.log('表单信息--->', tableData.value[0].orderItemList);
+      // console.log('表单信息--->', tableData.value);
     } else {
       ElMessage({
         message: '获取数据失败',
@@ -184,14 +176,33 @@ const getOrderList = async () => {
 const delBatch = () => {
   //批量删除
 }
-const showDetail = (index: number, row: any, flag: number) => {
+//查看订单详情
+const showDetail = (index: number, row: any) => {
   title.value = "订单详情"
   DialogVisible.value = true;
   editForm.value = row;
+  console.log('editForm--->',editForm.value);
 };
-const deleteProduct = async (index: number) => {
+//发货方法
+const deliverGoods = async (row : any)=>{
+  // console.log('status--->',row.id);
+  const res = await myAxios.post('/order/update',{
+    id: row.id,
+    orderStatus: "已发货"
+  })
+  //发货要改的，要有弹窗填写快递单号
+  if(res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '发货成功'
+    })
+    getOrderList()
+  }
+}
+//取消订单
+const deleteOrder = async (row : any) => {
   // console.log(typeof index)
-  const res = await myAxios.post('/goods/delete', { id: index })
+  const res = await myAxios.post('/goods/delete', { id: row.id })
   console.log(res)
   if (res.data.code === 1) {
     ElMessage({
@@ -206,6 +217,10 @@ const reset = () => {
 
 };
 const load = () => { }
+//保存订单状态
+const save =()=>{
+
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/test.vue

@@ -1,252 +1,41 @@
 <template>
-  switch parent border: <el-switch v-model="parentBorder" /> switch child
+  <div>
-  border: <el-switch v-model="childBorder" />
+    <span 
-  <el-table :data="tableData" :border="parentBorder" style="width: 100%">
+      :style="getStyle(1)" 
-    <el-table-column type="expand">
+      @click="selectText(1)"
-      <template #default="props">
+    >
-        <div m="4">
+      文字1
-          <p m="t-0 b-2">State: {{ props.row.state }}</p>
+    </span>
-          <p m="t-0 b-2">City: {{ props.row.city }}</p>
+    <span 
-          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
+      :style="getStyle(2)" 
-          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
+      @click="selectText(2)"
-          <h3>Family</h3>
+    >
-          <el-table :data="props.row.family" :border="childBorder">
+      文字2
-            <el-table-column label="Name" prop="name" />
+    </span>
-            <el-table-column label="State" prop="state" />
-            <el-table-column label="City" prop="city" />
-            <el-table-column label="Address" prop="address" />
-            <el-table-column label="Zip" prop="zip" />
-          </el-table>
   </div>
 </template>
-    </el-table-column>
-    <el-table-column label="Date" prop="date" />
-    <el-table-column label="Name" prop="name" />
-  </el-table>
-</template>
 
-<script lang="ts" setup>
+<script setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
-const parentBorder = ref(false)
+const selectedText = ref(1); // 用来存储选中的文字
-const childBorder = ref(false)
+
-const tableData = [
+// 根据选中状态动态返回样式
-  {
+const getStyle = (textNum) => {
-    date: '2016-05-03',
+  return {
-    name: 'Tom',
+    'border-bottom': selectedText.value === textNum ? '2px solid black' : 'none',
-    state: 'California',
+    'cursor': 'pointer'
-    city: 'San Francisco',
+  };
-    address: '3650 21st St, San Francisco',
+};
-    zip: 'CA 94114',
+
-    family: [
+const selectText = (textNum) => {
-      {
+  selectedText.value = textNum; // 更新选中的文字
-        name: 'Jerry',
+};
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    state: 'California',
-    city: 'San Francisco',
-    address: '3650 21st St, San Francisco',
-    zip: 'CA 94114',
-    family: [
-      {
-        name: 'Jerry',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    state: 'California',
-    city: 'San Francisco',
-    address: '3650 21st St, San Francisco',
-    zip: 'CA 94114',
-    family: [
-      {
-        name: 'Jerry',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    state: 'California',
-    city: 'San Francisco',
-    address: '3650 21st St, San Francisco',
-    zip: 'CA 94114',
-    family: [
-      {
-        name: 'Jerry',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    state: 'California',
-    city: 'San Francisco',
-    address: '3650 21st St, San Francisco',
-    zip: 'CA 94114',
-    family: [
-      {
-        name: 'Jerry',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    state: 'California',
-    city: 'San Francisco',
-    address: '3650 21st St, San Francisco',
-    zip: 'CA 94114',
-    family: [
-      {
-        name: 'Jerry',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    state: 'California',
-    city: 'San Francisco',
-    address: '3650 21st St, San Francisco',
-    zip: 'CA 94114',
-    family: [
-      {
-        name: 'Jerry',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Spike',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-      {
-        name: 'Tyke',
-        state: 'California',
-        city: 'San Francisco',
-        address: '3650 21st St, San Francisco',
-        zip: 'CA 94114',
-      },
-    ],
-  },
-]
 </script>
+
+<style scoped>
+span {
+  margin-right: 10px;
+  padding-bottom: 5px;
+}
+</style>