商城订单-销售订单-查看里可修改商品信息

src/api/hisStore/storeOrder.js

@@ -103,7 +103,13 @@ export function updateStoreOrder(data) {
     data: data
   })
 }
-
+// 修改订单ItemJson
+export function updateStoreOrderItemJson(id,backendEditProductType) {
+  return request({
+    url: '/store/store/storeOrder/updateStoreOrderItemJson/'+id + "/" + backendEditProductType,
+    method: 'get'
+  })
+}updateStoreOrderItemJson
 // 修改物流编号
 export function updateDeliveryId(data) {
   return request({

src/api/hisStore/storeOrderItem.js

@@ -51,3 +51,12 @@ export function exportStoreOrderItem(query) {
     params: query
   })
 }
+
+// 修改订单数量
+export function updateNumStoreOrderItem(data) {
+  return request({
+    url: '/store/store/storeOrderItem/updateNum',
+    method: 'put',
+    data: data
+  })
+}

src/views/hisStore/components/productOrder.vue

@@ -176,13 +176,34 @@
         </el-dialog>
       <div style="margin-top: 20px">
         <span class="font-small">商品信息</span>
+        <el-button
+          class="select-product-btn"
+          @click="openProductSelection"
+          icon="el-icon-shopping-cart-2"
+          size="small"
+          type="primary"
+          v-hasPermi="['store:storeOrderItem:add']" >
+          新增商品
+        </el-button>
+        <el-button
+          class="remove-product-btn"
+          @click="removeSelectedProduct"
+          icon="el-icon-delete"
+          size="small"
+          type="danger"
+          v-hasPermi="['store:storeOrderItem:remove']">
+          移除商品
+        </el-button>
       </div>
       <el-table
+        ref="itemsTable"
         border
         v-if="items!=null"
         :data="items"
         size="small"
-        style="width: 100%;margin-top: 20px" >
+        style="width: 100%;margin-top: 20px"
+        @selection-change="handleItemsSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="商品图片" width="150" align="center">
           <template slot-scope="scope">
             <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
@@ -215,9 +236,23 @@
         </el-table-column>
         <el-table-column label="数量" width="180" align="center">
           <template slot-scope="scope">
-            {{scope.row.num}}
+            <div class="quantity-cell">
+              <div class="quantity-display">
+                <span class="quantity-value">{{scope.row.num}}</span>
+              </div>
+              <el-button
+                size="mini"
+                type="default"
+                icon="el-icon-edit"
+                class="edit-quantity-btn"
+                @click="showQuantityEdit(scope)"
+                v-hasPermi="['store:storeOrderItem:updateNum']">
+                修改数量
+              </el-button>
+            </div>
           </template>
         </el-table-column>
+
         <el-table-column label="处方药" width="240" align="center">
           <template slot-scope="scope">
             {{scope.row.isPrescribe!=null&&scope.row.isPrescribe==1?'是':'否'}}
@@ -495,23 +530,286 @@
       </div>
     </el-dialog>
 
+    <!-- 数量修改弹窗 -->
+    <el-dialog :title="quantityDialog.title" :visible.sync="quantityDialog.open" width="500px" append-to-body>
+      <el-form ref="quantityForm" :model="quantityForm" :rules="quantityRules" label-width="100px">
+        <el-form-item label="商品名称">
+          <span class="dialog-product-name">{{quantityForm.productName}}</span>
+        </el-form-item>
+
+        <el-form-item label="当前单价">
+          <el-tag type="info" size="medium">￥{{ quantityForm.price ? quantityForm.price.toFixed(2) : '0.00' }}</el-tag>
+        </el-form-item>
+
+        <el-form-item label="当前数量">
+          <el-tag type="info" size="medium">{{ quantityForm.originalNum }}</el-tag>
+        </el-form-item>
+
+        <el-form-item label="新数量" prop="newNum">
+          <el-input-number
+            v-model="quantityForm.newNum"
+            :min="1"
+            :max="999999"
+            controls-position="right"
+            style="width: 200px">
+          </el-input-number>
+        </el-form-item>
+
+        <el-form-item label="总金额">
+          <el-tag type="danger" size="medium">
+            ￥{{ (quantityForm.newNum * quantityForm.price).toFixed(2) }}
+          </el-tag>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="quantityDialog.open = false">取 消</el-button>
+        <el-button type="primary" @click="submitQuantityForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 新增商品弹窗 -->
+    <el-dialog :title="productOrderDialog.title" :visible.sync="productOrderDialog.open" width="1800px" append-to-body>
+      <div class="app-container">
+        <el-form :model="productOrderQueryParams" ref="productOrderQueryForm" :inline="true" label-width="68px">
+          <el-form-item label="商品分类" prop="cateId">
+            <treeselect  v-model="productOrderQueryParams.cateId"  style="width:205.4px" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择分类" />
+          </el-form-item>
+          <el-form-item label="商品名称" prop="productName">
+            <el-input
+              v-model="productOrderQueryParams.productName"
+              placeholder="请输入商品名称"
+              clearable
+              size="small"
+              @keyup.enter.native="productOrderHandleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="商品编号" prop="barCode">
+            <el-input
+              v-model="productOrderQueryParams.barCode"
+              placeholder="请输入商品编号"
+              clearable
+              size="small"
+              @keyup.enter.native="productOrderHandleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="商品类型" prop="productType">
+            <el-select   v-model="productOrderQueryParams.productType" placeholder="请选择商品类型" clearable size="small" >
+              <el-option
+                v-for="item in productTypeOptions"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属公司">
+            <el-select style="width: 240px" v-model="companyId" multiple placeholder="请选择企业" clearable size="small" >
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.companyId"
+                :label="item.companyName"
+                :value="item.companyId"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属店铺" v-if="this.isStores">
+            <el-select style="width: 240px" v-model="productOrderQueryParams.storeIds" placeholder="请选择店铺" clearable size="small" >
+              <el-option
+                v-for="item in storeOptions"
+                :key="item.storeId"
+                :label="item.storeName"
+                :value="item.storeId"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="cyan" icon="el-icon-search" size="mini" @click="productOrderHandleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="productOrderResetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table
+          ref="productOrderTable"
+          height="500"
+          border
+          v-loading="productOrderLoading"
+          :data="storeProductList"
+          @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="ID" align="center" prop="productId" />
+        <el-table-column label="商品图片" align="center" width="120">
+          <template slot-scope="scope">
+            <el-popover
+              placement="right"
+              title=""
+              trigger="hover">
+              <img slot="reference" :src="scope.row.image" width="100">
+              <img :src="scope.row.image" style="max-width: 150px;">
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
+        <el-table-column label="分类" align="center" prop="cateName" />
+        <el-table-column label="所属公司" align="center" prop="companyName" />
+        <el-table-column label="所属店铺" align="center" prop="storeName" v-if="this.isStores"/>
+        <el-table-column label="售价" align="center" prop="price" >
+          <template slot-scope="scope" >
+            <span v-if="scope.row.price!=null">{{scope.row.price.toFixed(2)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="原价" align="center" prop="otPrice" >
+          <template slot-scope="scope" >
+            <span v-if="scope.row.otPrice!=null">{{scope.row.otPrice.toFixed(2)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="销量" align="center" prop="sales" />
+        <el-table-column label="库存" align="center" prop="stock" />
+        <el-table-column label="类型" align="center" prop="productType" >
+          <template slot-scope="scope">
+            <el-tag prop="productType" v-for="(item, index) in productTypeOptions"    v-if="scope.row.productType==item.dictValue">{{item.dictLabel}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="isShow" >
+          <template slot-scope="scope">
+            <el-tag :type="getStatusType(scope.row)" prop="status">
+              {{ getStatusText(scope.row) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="productOrderQueryParams.pageNum"
+        :limit.sync="productOrderQueryParams.pageSize"
+        @pagination="productOrderGetList"
+      />
+
+      <div style="text-align: center; margin-top: 20px;">
+        <el-button
+          type="primary"
+          size="medium"
+          icon="el-icon-plus"
+          @click="handleBatchAdd"
+          v-hasPermi="['store:storeOrderItem:add']"
+          :disabled="!ids || ids.length === 0">
+          批量添加商品
+        </el-button>
+      </div>
+    </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {auditPayRemain,addTuiMoney,syncExpress,updateExpress,getEroOrder,refundOrderMoney, editTuiMoney,getExpress,finishOrder,listStoreOrder, getStoreOrder, delStoreOrder, addStoreOrder, updateStoreOrder, exportStoreOrder,updateDeliveryId, createErpOrder,updateErp,getStoreOrderAddress,getStoreOrderPhone} from "@/api/hisStore/storeOrder";
-import { getTcmScheduleList } from "@/api/company/schedule";
+import {
+  addTuiMoney,
+  auditPayRemain,
+  createErpOrder,
+  editTuiMoney,
+  finishOrder,
+  getEroOrder,
+  getExpress,
+  getStoreOrder,
+  getStoreOrderAddress,
+  getStoreOrderPhone,
+  refundOrderMoney,
+  syncExpress,
+  updateDeliveryId,
+  updateErp,
+  updateExpress,
+  updateStoreOrder,
+  updateStoreOrderItemJson
+} from "@/api/hisStore/storeOrder";
+import {listStoreProduct} from "@/api/hisStore/storeProduct";
+import {getTcmScheduleList} from "@/api/company/schedule";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {getAllStoreProductCategory} from "@/api/hisStore/storeProductCategory";
+import Editor from '@/components/Editor/wang';
+import Material from '@/components/Material'
+import singleImg from '@/components/Material/single'
+import {getCompanyList} from "@/api/company/company";
+import {listStore} from '@/api/hisStore/store';
+import {addStoreOrderItem, delStoreOrderItem, updateNumStoreOrderItem} from "../../../api/hisStore/storeOrderItem";
+
+
 export default {
   name: "order",
+  components: {
+    Treeselect,
+    Editor,
+    Material,
+    singleImg,
+  },
   data() {
     return {
+      isMedicalMall: this.$store.state.user.medicalMallConfig.medicalMall,
       dialogVisibleImage: false,
       createTypeOptions:[],
       deliveryStatusOptions:[],
       deliveryTypeOptions:[],
       scheduleOptions:[],
       schedules:[],
+      // 遮罩层
+      productOrderLoading: true,
+      isStores: true,
+      companyId: null,
+      storeId: null,
+      isAudit: null,
+      storeForm: {isAudit:1,status:1},
+      // 总条数
+      total: 0,
+      // 商品表格数据
+      storeProductList: [],
+      productTypeOptions:[],
+      productTuiCateOptions:[],
+      isDisplayOptions:[],
+      isGoodOptions:[],
+      isNewOptions:[],
+      isBestOptions:[],
+      isHotOptions:[],
+      isShowOptions:[],
+      categoryOptions:[],
+      // 企业列表
+      companyOptions:[],
+      storeOptions:[],
       orderId:null,
+      // 选中的商品列表
+      selectedItems: [],
+      // 批量添加时选中的商品ID列表
+      ids: [],
+      // 是否单选
+      single: true,
+      // 是否多选
+      multiple: true,
+      // 查询参数
+      productOrderQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        productName: null,
+        productType: null,
+        isShow: "1",
+        barCode:null,
+        companyIds: null,
+        storeIds: null,
+        drugRegCertNo: null,
+        commonName: null,
+        dosageForm: null,
+        unitPrice: null,
+        batchNumber: null,
+        mah: null,
+        mahAddress: null,
+        manufacturer: null,
+        manufacturerAddress: null,
+        indications: null,
+        dosage: null,
+        adverseReactions: null,
+        contraindications: null,
+        precautions: null,
+        excludeProductIds:[],
+      },
       erpDialog:{
         title:"ERP订单信息",
         open:false,
@@ -528,6 +826,10 @@ export default {
         title:"修改物流单号",
         open:false,
       },
+      productOrderDialog:{
+        title:"商品选择",
+        open:false,
+      },
       editDyForm:{
         deliverySn:null,
         deliveryId:null,
@@ -536,7 +838,6 @@ export default {
         orderType:null,
         status:null,
         userAddress:null,
-        // extendOrderId:null,
         scheduleId:null,
         mark:"",
       },
@@ -570,6 +871,29 @@ export default {
       tuiMoneyLogs:[],
       erpOrder:null,
       auditLogs: [],
+      // 数量修改弹窗相关数据
+      quantityDialog: {
+        title: "修改商品数量",
+        open: false,
+      },
+      quantityForm: {
+        itemId: null,
+        productName: null,
+        price: null,
+        //新数量
+        newNum: null,
+        //原始数量
+        originalNum: null
+      },
+      quantityRules: {
+        newNum: [
+          { required: true, message: "数量不能为空", trigger: "blur" },
+          { type: 'number', min: 1, message: "数量至少为1", trigger: "blur" },
+          { type: 'number', max: 999999, message: "数量不能超过999999", trigger: "blur" }
+        ]
+      },
+      // 删除商品相关
+      removeProductLoading: false
     };
   },
   created() {
@@ -597,6 +921,277 @@ export default {
     });
   },
   methods: {
+    // 显示修改数量弹窗
+    showQuantityEdit(scope) {
+      this.quantityForm.itemId = scope.row.itemId;
+      // 解析商品信息并处理可能的错误
+      let parsedJsonInfo;
+      try {
+        parsedJsonInfo = JSON.parse(scope.row.jsonInfo);
+      } catch (error) {
+        console.error('解析商品信息失败:', error);
+        parsedJsonInfo = {};
+      }
+
+      this.quantityForm.productName = parsedJsonInfo.productName || '';
+      this.quantityForm.originalNum = scope.row.num || 0;
+      this.quantityForm.newNum = scope.row.num || 0;
+
+      // 处理价格，确保不会为null
+      const price = parsedJsonInfo.price || 0;
+      this.quantityForm.price = parseFloat(price) || 0;
+      this.quantityDialog.open = true;
+    },
+
+  // 提交数量修改
+    submitQuantityForm() {
+      this.$refs["quantityForm"].validate(valid => {
+        if (valid) {
+          // 验证数量是否发生变化
+          if (this.quantityForm.newNum === this.quantityForm.originalNum) {
+            this.msgInfo("数量未发生变化，无需修改");
+            return;
+          }
+
+          updateNumStoreOrderItem(this.quantityForm).then(response => {
+            if (response.code === 200) {
+              this.msgSuccess("数量修改成功");
+              updateStoreOrderItemJson(this.order.id,1);
+              this.quantityDialog.open = false;
+              this.getOrder(this.order.id);
+            }else{
+              this.msgError(response.message);
+            }
+          }).catch(error => {
+            this.$message.error('请求失败: ' + error.message)
+          });
+        }
+      });
+    },
+
+    openProductSelection(){
+      this.productOrderDialog.open=true;
+
+      // 将已有的productId存入查询参数，用于后端过滤 (返回数组格式)
+      this.productOrderQueryParams.excludeProductIds = this.items.map(item => item.productId).filter(productId => productId);
+
+      // 加载字典和其他数据
+      this.getDicts("store_product_tui_cate").then((response) => {
+        this.productTuiCateOptions = response.data;
+      });
+      this.getDicts("store_product_enable").then((response) => {
+        this.isNewOptions = response.data;
+        this.isBestOptions = response.data;
+        this.isHotOptions = response.data;
+        this.isGoodOptions=response.data;
+        this.isDisplayOptions=response.data;
+      });
+      this.getDicts("store_product_type").then((response) => {
+        this.productTypeOptions = response.data;
+        if(!this.isMedicalMall &&
+        this.productTypeOptions.length === 4){
+          //删除后两项
+          this.productTypeOptions.splice(2,2);
+        }
+      });
+      this.getDicts("store_product_is_show").then((response) => {
+        this.isShowOptions = response.data;
+      });
+      getCompanyList().then(response => {
+        this.companyOptions = response.data;
+      });
+
+      listStore(this.storeForm).then(response => {
+        this.storeOptions = response.rows;
+      });
+      this.getTreeselect();
+      this.productOrderGetList();
+    },
+
+    /** 商品表格选择变化 */
+    handleItemsSelectionChange(selection) {
+      this.selectedItems = selection;
+    },
+
+    /** 移除选中的商品 */
+    removeSelectedProduct() {
+      if (this.selectedItems.length === 0) {
+        this.warning("请先选择要移除的商品");
+        return;
+      }
+
+      const that = this;
+      this.$confirm('确定要移除选中的 ' + this.selectedItems.length + ' 个商品吗？', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        that.removeProductLoading = true;
+        // 收集所有要删除的商品ID
+        const deletePromises = that.selectedItems.map(item => {
+          return delStoreOrderItem(item.itemId);
+        });
+
+        // 并行删除所有选中的商品
+        Promise.all(deletePromises).then(responses => {
+          // 检查所有删除操作是否成功
+          const allSuccess = responses.every(response => response.code === 200);
+          if (allSuccess) {
+            that.msgSuccess("商品移除成功");
+            // 清除选择并刷新订单数据
+            that.selectedItems = [];
+            updateStoreOrderItemJson(this.order.id,1);
+            that.getOrder(that.order.id);
+          } else {
+            that.msgError("商品移除失败: " + (responses.message));
+          }
+        }).catch(error => {
+          that.msgError("移除商品失败: " + (error.message || "网络错误"));
+        })
+      }).catch(() => {
+        // 用户取消操作
+      });
+    },
+
+    /** 查询商品列表 */
+    productOrderGetList() {
+      this.productOrderLoading = true;
+      listStoreProduct(this.productOrderQueryParams).then(response => {
+        this.storeProductList = response.rows;
+        this.total = response.total;
+        this.productOrderLoading = false;
+      }).catch(error => {
+        console.error('获取商品列表失败:', error);
+        this.productOrderLoading = false;
+        this.storeProductList = [];
+        this.total = 0;
+      });
+    },
+
+    /** 批量添加商品到订单 */
+    handleBatchAdd() {
+      if (!this.order || !this.order.id) {
+        this.msgInfo("请先选择订单");
+        return;
+      }
+
+      if (!this.ids || this.ids.length === 0) {
+        this.msgInfo("请先选择要添加的商品");
+        return;
+      }
+
+      const that = this;
+      this.$confirm(`确定要将选中的 ${this.ids.length} 个商品添加到订单中吗？`, "确认添加", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "info"
+      }).then(() => {
+        // 获取选中的商品列表
+        const selectedProducts = this.storeProductList.filter(product =>
+          this.ids.includes(product.productId)
+        );
+
+        // 创建批量添加的订单项数据
+        const batchAddPromises = selectedProducts.map(product => {
+          const orderItemData = {
+            orderId: this.order.id,
+            orderCode: this.order.orderCode,
+            cartId: null,
+            productId: product.productId,
+            num: 1, // 默认数量为1
+            jsonInfo: JSON.stringify({
+              image: product.image,
+              productId: product.productId,
+              num: 1, // 默认数量为1
+              productName: product.productName,
+              barCode: product.barCode,
+              price: product.price,
+              sku: product.sku || '默认'
+            })
+          };
+          return addStoreOrderItem(orderItemData);
+        });
+
+        // 并行添加所有选中的商品
+        Promise.all(batchAddPromises)
+          .then(responses => {
+            // 检查所有添加操作是否成功
+            const allSuccess = responses.every(response => response.code === 200);
+            if (allSuccess) {
+              that.msgSuccess(`成功添加 ${responses.length} 个商品`);
+
+              // 更新过滤列表，包含新添加的商品ID
+              const newIds = selectedProducts.map(p => p.productId);
+              const currentIds = this.productOrderQueryParams.excludeProductIds || [];
+              const updatedIds = [...new Set([...currentIds, ...newIds])]; // 去重
+              this.productOrderQueryParams.excludeProductIds = updatedIds;
+              updateStoreOrderItemJson(this.order.id,1);
+              this.productOrderDialog.open = false;
+              that.getOrder(that.order.id);
+            } else {
+              const failedCount = responses.filter(r => r.code !== 200).length;
+              that.msgError(`添加失败 ${failedCount} 个商品`);
+            }
+          })
+          .catch(error => {
+            that.msgError("批量添加商品失败: " + (error.message || "网络错误"));
+          });
+      }).catch(() => {
+        // 用户取消操作
+      });
+    },
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.productId).filter(id => id); // 过滤空值
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length
+    },
+    /** 搜索按钮操作 */
+    productOrderHandleQuery() {
+      this.productOrderQueryParams.pageNum = 1;
+      this.productOrderQueryParams.isShow = 1;
+      this.productOrderQueryParams.companyIds = this.companyId +''
+      this.productOrderGetList();
+    },
+    /** 重置按钮操作 */
+    productOrderResetQuery() {
+      this.resetForm("productOrderQueryForm");
+      // 重置所属公司
+      this.companyId = null;
+      // 重置所属店铺
+      this.productOrderQueryParams.storeIds = null;
+      this.productOrderQueryParams.isShow = 1;
+      this.productOrderQueryParams.companyIds = null;
+      this.productOrderGetList();
+    },
+
+    /** 转换商品分类数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.cateId,
+        label: node.cateName,
+        children: node.children
+      };
+    },
+    getStatusType(row) {
+      if (row.isAudit == 0) {
+        return 'warning';
+      }
+      // 根据你的业务逻辑返回不同的类型，如：success, danger, info等
+      return row.isShow == 1 ? 'success' : 'info';
+    },
+    getStatusText(row) {
+      if (row.isAudit == 0) {
+        return '待审核';
+      }
+      const option = this.isShowOptions.find(item => item.dictValue == row.isShow);
+      return option ? option.dictLabel : '未知状态';
+    },
+
     handleAddress(){
         const id = this.order.id;
         getStoreOrderAddress(id).then(response =>{
@@ -678,6 +1273,12 @@ export default {
       });
 
     },
+    getTreeselect() {
+      getAllStoreProductCategory().then(response => {
+      this.categoryOptions = [];
+        this.categoryOptions=this.handleTree(response.data, "cateId", "pid");
+      });
+    },
     submitEditForm(){
         this.$refs["editForm"].validate(valid => {
         if (valid) {
@@ -861,4 +1462,149 @@ export default {
   float: right;
   margin-right: 20px
 }
+.container {
+  position: relative;
+}
+.select-product-btn {
+  float: right;
+  margin-top: -5px;
+  margin-right: 15px;
+  background: linear-gradient(135deg, #409EFF, #337AB7);
+  border: none;
+  color: white;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-weight: 500;
+  box-shadow: 0 3px 6px rgba(64, 158, 255, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.select-product-btn:hover {
+  background: linear-gradient(135deg, #66b1ff, #409EFF);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(64, 158, 255, 0.35);
+}
+
+.select-product-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
+}
+
+.select-product-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
+}
+
+.select-product-btn:disabled {
+  background: linear-gradient(135deg, #a0cfff, #b3d8ff);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.remove-product-btn {
+  float: right;
+  margin-top: -5px;
+  margin-right: 15px;
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+  border: none;
+  color: white;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-weight: 500;
+  box-shadow: 0 3px 6px rgba(255, 107, 107, 0.15);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.remove-product-btn:hover {
+  background: linear-gradient(135deg, #ff5252, #e74c3c);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(255, 107, 107, 0.25);
+}
+
+.remove-product-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
+}
+
+.remove-product-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
+}
+
+.remove-product-btn:disabled {
+  background: linear-gradient(135deg, #ffcccc, #f8d7da);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+
+
+.quantity-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 5px;
+}
+
+.quantity-display {
+  display: flex;
+  align-items: center;
+  gap: 4px; /* 缩小数量与按钮之间的间距 */
+}
+
+.quantity-value {
+  font-weight: 600;
+  color: #606266;
+  background-color: #f5f7fa;
+  padding: 4px 8px;
+  border-radius: 4px;
+  min-width: 40px;
+  text-align: center;
+}
+
+.edit-quantity-btn {
+  margin-left: 4px; /* 缩小左边距 */
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: #409eff;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.edit-quantity-btn:hover {
+  background-color: #ecf5ff;
+  border-color: #b3d8ff;
+  color: #66b1ff;
+  transform: translateY(-1px);
+}
+
+.edit-quantity-btn i {
+  margin-right: 2px;
+  font-size: 12px;
+}
+
+.edit-quantity-btn:hover {
+  background-color: #ecf5ff;
+  border-color: #b3d8ff;
+  color: #66b1ff;
+  transform: translateY(-1px);
+}
+
+.edit-quantity-btn i {
+  margin-right: 2px;
+  font-size: 12px;
+}
+.dialog-product-name {
+  font-weight: 500;
+  color: #303133;
+  word-break: break-all;
+  max-width: 350px;
+  display: inline-block;
+  vertical-align: middle;
+}
 </style>