变更

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>
+        <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)">
+          <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"></el-input>
+          <el-input v-model="editForm.inventory" style="width: 50px;"></el-input>
         </el-form-item>
         <el-form-item label="商品状态">
-        <el-select v-model="editForm.isShelves">
+          <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)">
+          <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"></el-input>
+          <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;" />

src/views/Orders/OrderList.vue

@@ -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>
@@ -72,39 +72,48 @@
                    :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 label-width="100px" size="default" :model="editForm" :disabled="disabled">
-        <el-form-item label="订单编号">
+      <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="快递单号">
+      </div>
+      <el-form-item label="快递单号" style="width: 300px">
         <!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
       </el-form-item>
-        <el-form-item label="创建时间">
+      <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>
+      </div>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -113,6 +122,21 @@
       </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>
@@ -122,8 +146,13 @@ import { ElMessage } from "element-plus";
 const tableData: any = ref([]);  //表单展示数据
 const total = ref(0);
 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, //当前页码
@@ -178,20 +207,29 @@ const showDetail = (index: number, row: any) => {
   console.log('editForm--->',editForm.value);
 };
 //发货方法
-const deliverGoods = async (row : any)=>{
+const currentId = ref<number | null>(null);
-  // console.log('status--->',row.id);
+const openShipmentDialog = (id: number) => {
+  shipments.value = true;
+  currentId.value = id;
+}
+
+const deliverGoods = async () => {
+  if (currentId.value) {
     const res = await myAxios.post('/order/update', {
-    id: row.id,
+      id: currentId.value,
-    orderStatus: "已发货"
+      trackingNumber: shipment.trackingNumber
     })
-  //发货要改的，要有弹窗填写快递单号
     if (res.data.code === 1) {
       ElMessage({
         type: 'success',
         message: '发货成功'
       })
-    getOrderList()
+      getOrderList();
     }
+  } else {
+    ElMessage.error('更新失败，请检查字段')
+  }
+  shipments.value = false;
 }
 const deleteOrder = async (row : any) => {  //取消订单+微信退款
   console.log('row-->',row.id)