From ca77a8dcce84d6b91878592f594b7f68ad3f2b91 Mon Sep 17 00:00:00 2001
From: sa_10_0 <2492740167@qq.com>
Date: Fri, 20 Dec 2024 15:58:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Commodity/MerchandiseCenter.vue |  57 +++++-----
 src/views/Orders/OrderList.vue            | 126 ++++++++++++++--------
 2 files changed, 113 insertions(+), 70 deletions(-)

diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue
index 38c5a30..bc665cc 100644
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@@ -94,7 +94,7 @@
   <el-dialog v-model="DialogVisible" :title="title">
     <el-form label-width="100px" :disabled="disabled">
       <el-form-item label="商品编号">
-        <el-input v-model="editForm.id" disabled></el-input>
+        <el-input v-model="editForm.id" disabled style="width: 60px;"></el-input>
       </el-form-item>
       <el-form-item label="商品图片">
         <el-upload 
@@ -114,35 +114,40 @@
         </el-upload>
       </el-form-item>
       <el-form-item label="商品名称">
-        <el-input v-model="editForm.name"></el-input>
+        <el-input v-model="editForm.name" style="width: 200px;"></el-input>
       </el-form-item>
       <el-form-item label="产品价格" prop="price">
         <el-input-number v-model="editForm.price" min="0.01" :precision="2" :step="0.5" />
-        <p>元</p>
-      </el-form-item>
-      <el-form-item label="产品类别" prop="type">
-        <el-select v-model="editForm.type" @change="(event: any) => loadForm(event, 1)">
-          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品数量">
-        <el-input v-model="editForm.inventory"></el-input>
-      </el-form-item>
-      <el-form-item label="商品状态">
-        <el-select v-model="editForm.isShelves">
-          <el-option label="上架" value="上架" />
-          <el-option label="下架" value="下架" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否为限定类产品" prop="festivalOrder">
-        <el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)">
-          <el-option label="是" value="1" />
-          <el-option label="否" value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品标签">
-        <el-input v-model="editForm.label"></el-input>
+        <p style="margin-left: 5px">元</p>
       </el-form-item>
+      <div style="display: flex;">
+        <el-form-item label="产品类别" prop="type">
+          <el-select v-model="editForm.type" @change="(event: any) => loadForm(event, 1)" style="width: 120px;">
+            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1"  />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品数量">
+          <el-input v-model="editForm.inventory" style="width: 50px;"></el-input>
+        </el-form-item>
+        <el-form-item label="商品状态">
+          <el-select v-model="editForm.isShelves" style="width: 50px;">
+            <el-option label="上架" value="上架" />
+            <el-option label="下架" value="下架" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+      <div style="display: flex;">
+        <el-form-item label="是否为限定类产品" prop="festivalOrder">
+          <el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)" style="width: 70px;">
+            <el-option label="是" value="1" />
+            <el-option label="否" value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品标签">
+          <el-input v-model="editForm.label" style="width: auto;"></el-input>
+        </el-form-item>
+      </div>
       <el-form-item label="商品图文">
         <div v-if="editForm.detailImg">
           <img :src="editForm.detailImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
diff --git a/src/views/Orders/OrderList.vue b/src/views/Orders/OrderList.vue
index 060bf46..ccba4e9 100644
--- a/src/views/Orders/OrderList.vue
+++ b/src/views/Orders/OrderList.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入订单编号"
-      v-model="name"></el-input>
+              v-model="name"></el-input>
     <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
     <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
   </div>
   <!-- 数据展示层 -->
   <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
-    :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
-    :header-cell-style="{ 'text-align': 'center' }">
+            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
+            :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">
       <template #default="{ $index }">
@@ -57,10 +57,10 @@
         <el-button size="small" @click="showDetail(scope.$index, scope.row)">
           详情
         </el-button>
-        <el-button size="small" @click="deliverGoods(scope.row)">
+     <el-button size="small" @click="openShipmentDialog(scope.row.id)"  > <!--   @click="deliverGoods(scope.row)"-->
           发货
         </el-button>
-        <el-button size="small" @click="deleteOrder(scope.row)" type="warning" plain>
+        <el-button      :disabled="!['待支付', '待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="warning" plain>
           取消订单
         </el-button>
       </template>
@@ -68,51 +68,75 @@
   </el-table>
   <div style="padding: 10px 0">
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-      :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
-      :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
-      :total="total" />
+                   :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
+                   :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
+                   :total="total" />
   </div>
+  <!--  弹窗-->
   <el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
-      <el-form label-width="100px" size="default" :model="editForm">
-        <el-form-item label="订单编号">
+    <el-form label-width="100px" size="default" :model="editForm" :disabled="disabled">
+      <div style="display: flex">
+        <el-form-item label="订单编号" style="width: 200px">
           <el-input v-model="editForm.addressSnapshot" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="用户名称">
+        <el-form-item label="用户名称" style="width: 300px">
           <el-input v-model="editForm.addressSnapshot.name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="收货手机">
+      </div>
+      <div style="display: flex">
+        <el-form-item label="收货手机" style="width: 200px">
           <el-input v-model="editForm.addressSnapshot.phone" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="收货地址">
+        <el-form-item label="收货地址" style="width: 400px">
           <el-input v-model="editForm.addressSnapshot.region" autocomplete="off"></el-input>
         </el-form-item>
-        <!-- 这里的商品明细就不放图片了 -->
+      </div>
+      <!-- 这里的商品明细就不放图片了 -->
+      <div style="display: flex">
         <el-form-item label="商品明细">
           <el-input v-model="editForm.addressSnapshot.detailAddress" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="订单总金额">
+        <el-form-item label="订单总金额" style="width: 250px">
           <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="订单状态">
+        <el-form-item label="订单状态" style="width: 250px">
           <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="创建时间">
+      </div>
+      <el-form-item label="快递单号" style="width: 300px">
+        <!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
+      </el-form-item>
+      <div style="display: flex">
+        <el-form-item label="创建时间"  style="width: 300px;">
           <el-input v-model="editForm.createTime" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="更新时间">
+        <el-form-item label="更新时间" style="width: 300px;">
           <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="DialogVisible = false">取消</el-button>
-          <el-button style="height: 30px" type="primary" @click="DialogVisible = false">确认</el-button>
-        </div>
-      </template>
-     </el-dialog>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
+        <el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+<!--  发货弹窗-->
+  <el-dialog title="发货" v-model="shipments" width="60%">
+    <el-form label-width="100px" size="default"  >
+      <el-form-item label="快递单号" style="width: 300px;">
+        <el-input v-model="shipment.trackingNumber" autocomplete="off"></el-input>
+      </el-form-item>
+
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="height: 30px;" @click=" shipments = false">取消</el-button>
+        <el-button style="height: 30px" type="primary" @click="deliverGoods ">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -121,9 +145,14 @@ import myAxios from "@/api/myAxios";
 import { ElMessage } from "element-plus";
 const tableData: any = ref([]);  //表单展示数据
 const total = ref(0);
-const title = ref('') 
-const editForm: any = ref({});  //编辑表单
+const title = ref('')
+const disabled = ref(true)
+const editForm: any = ref({});//编辑表单
+const shipment:any = ref({
+  trackingNumber:''
+})//物流单号
 const DialogVisible = ref(false); //详情展示
+const shipments = ref(false)
 const name = ref('')
 const searchParams: any = ref({ //封装分页
   current: 1, //当前页码
@@ -148,7 +177,7 @@ const handleCurrentChange = (Current: any) => {
   getOrderList()
 }
 const handleSelectionChange = (row: any) => {
-  // id.value = JSON.parse(JSON.stringify(row)); 
+  // id.value = JSON.parse(JSON.stringify(row));
 }
 //获取订单列表
 const getOrderList = async () => {
@@ -178,20 +207,29 @@ const showDetail = (index: number, row: any) => {
   console.log('editForm--->',editForm.value);
 };
 //发货方法
-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: '发货成功'
+const currentId = ref<number | null>(null);
+const openShipmentDialog = (id: number) => {
+  shipments.value = true;
+  currentId.value = id;
+}
+
+const deliverGoods = async () => {
+  if (currentId.value) {
+    const res = await myAxios.post('/order/update', {
+      id: currentId.value,
+      trackingNumber: shipment.trackingNumber
     })
-    getOrderList()
+    if (res.data.code === 1) {
+      ElMessage({
+        type: 'success',
+        message: '发货成功'
+      })
+      getOrderList();
+    }
+  } else {
+    ElMessage.error('更新失败，请检查字段')
   }
+  shipments.value = false;
 }
 const deleteOrder = async (row : any) => {  //取消订单+微信退款
   console.log('row-->',row.id)