外部订单商品配置优化

src/views/store/externalOrder/index.vue

@@ -214,58 +214,46 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="商品信息" prop="productList">
-          <el-input
-            v-model="productNameSearch"
-            placeholder="请输入商品名称搜索"
-            clearable
-            size="small"
-            style="width: 300px; margin-bottom: 10px;"
-            @keyup.enter.native="handleProductSearch"
-          />
-          <el-button type="primary" size="small" style="margin-left: 10px;" @click="handleProductSearch">搜索</el-button>
-          <el-table border width="100%" style="margin-top:5px;" :data="productJson" @selection-change="handleProductSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column label="商品图片" align="center" width="120">
+          <el-select v-model="selectedStoreId" placeholder="请选择店铺" clearable size="small" @change="handleStoreChange" style="width: 200px;">
+            <el-option
+              v-for="item in storeOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+          <div style="float: right;"><el-button plain type="primary" icon="el-icon-plus" @click="handleAddProduct">添加商品</el-button></div>
+          <el-table border width="100%" style="margin-top:5px;" :data="drugList">
+            <el-table-column label="商品图片" align="center" width="100">
               <template slot-scope="scope">
                 <el-popover placement="right" title="" trigger="hover">
-                  <img slot="reference" :src="scope.row.imgUrl" width="100">
-                  <img :src="scope.row.imgUrl" style="max-width: 150px;">
+                  <img slot="reference" :src="scope.row.imgUrl" width="50">
+                  <img :src="scope.row.imgUrl" style="max-width: 50px;">
                 </el-popover>
               </template>
             </el-table-column>
             <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
-            <el-table-column label="售价" align="center" prop="price" width="160">
+            <el-table-column label="数量" align="center" prop="count" width="150px">
+              <template slot-scope="scope">
+                <el-input-number v-model="scope.row.count" @change="handleProductCountChange(scope.row)" size="small" :min="1"></el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column label="售价" align="center" prop="price" width="150px">
               <template slot-scope="scope">
-                <el-input-number
-                  v-model="productPrices[scope.row.productId]"
-                  :min="0"
-                  :precision="2"
-                  :step="0.01"
-                  size="mini"
-                  @change="handleQuantityChange"
-                />
+                <el-input-number v-model="scope.row.price" @change="handleProductCountChange(scope.row)" size="small" :min="0" :precision="2"></el-input-number>
               </template>
             </el-table-column>
-            <el-table-column label="数量" align="center" width="160">
+            <el-table-column label="小计" align="center" prop="money">
               <template slot-scope="scope">
-                <el-input-number
-                  v-model="productQuantities[scope.row.productId]"
-                  :min="1"
-                  :max="getProductMax(scope.row)"
-                  size="mini"
-                  style="width: 140px;"
-                  @change="handleQuantityChange"
-                />
+                <div v-if="scope.row.money != null">{{ scope.row.money.toFixed(2) }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="100px" fixed="right">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleProductDelete(scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
-          <pagination
-            v-show="productTotal > 0"
-            :total="productTotal"
-            :page.sync="productQueryParams.pageNum"
-            :limit.sync="productQueryParams.pageSize"
-            @pagination="getProductList"
-          />
         </el-form-item>
         <el-form-item label="支付方式" prop="payType">
           <el-select v-model="form.payType" placeholder="请选择支付方式" clearable size="small">
@@ -372,6 +360,33 @@
         <el-button type="primary" @click="submitApprove">确 定</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="选择商品" :visible.sync="productDialogVisible" width="900px" append-to-body>
+      <el-row style="margin-bottom: 10px;">
+        <el-input v-model="productSearchKeyword" placeholder="请输入商品名称搜索" clearable size="small" style="width: 300px;" @keyup.enter.native="searchProductDialog" />
+        <el-button type="primary" size="small" style="margin-left: 10px;" @click="searchProductDialog">搜索</el-button>
+      </el-row>
+      <el-table border :data="productDialogList" @row-click="selectProduct" highlight-current-row style="cursor: pointer;">
+        <el-table-column label="商品图片" align="center" width="100">
+          <template slot-scope="scope">
+            <el-popover placement="right" title="" trigger="hover">
+              <img slot="reference" :src="scope.row.imgUrl" width="50">
+              <img :src="scope.row.imgUrl" 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="price" width="120" />
+        <el-table-column label="库存" align="center" prop="stock" width="100" />
+      </el-table>
+      <pagination
+        v-show="productDialogTotal > 0"
+        :total="productDialogTotal"
+        :page.sync="productDialogPage.pageNum"
+        :limit.sync="productDialogPage.pageSize"
+        @pagination="getProductDialogList"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -379,7 +394,7 @@
 import { listExternalOrder, createExternalOrder, getExternalOrder, auditExternalOrder, cancelExternalOrder, approveExternalOrder, exportExternalOrder } from "@/api/store/externalOrder";
 import { getCompanyList } from "@/api/company/company";
 import { listUserAddress } from "@/api/store/userAddress";
-import { listStoreProduct } from "@/api/store/storeProduct";
+import { listStoreProduct, listStore } from "@/api/store/storeProduct";
 import addExternalUserAddress from "@/views/store/components/addExternalUserAddress.vue";
 import addExternalUser from "@/views/store/components/addExternalUser.vue";
 import request from '@/utils/request';
@@ -406,13 +421,16 @@ export default {
       users: [],
       address: [],
       addressloading: false,
-      productJson: [],
-      productTotal: 0,
-      productNameSearch: null,
-      productQueryParams: {
+      drugList: [],
+      storeOptions: [],
+      selectedStoreId: null,
+      productDialogVisible: false,
+      productSearchKeyword: null,
+      productDialogList: [],
+      productDialogTotal: 0,
+      productDialogPage: {
         pageNum: 1,
-        pageSize: 10,
-        productName: null
+        pageSize: 10
       },
       user: {
         open: false,
@@ -443,9 +461,6 @@ export default {
         payMoney: null,
         products: []
       },
-      productQuantities: {},
-      productPrices: {},
-      selectedProducts: [],
       rules: {
         addressId: [{ required: true, message: "请选择收货地址", trigger: "change" }],
         userId: [{ required: true, message: "请选择会员", trigger: "change" }],
@@ -546,17 +561,12 @@ export default {
       this.phone = null;
       this.users = [];
       this.address = [];
-      this.productJson = [];
-      this.productTotal = 0;
-      this.productNameSearch = null;
-      this.productQueryParams.pageNum = 1;
-      this.productQueryParams.productName = null;
-      this.productQuantities = {};
-      this.productPrices = {};
-      this.selectedProducts = [];
+      this.drugList = [];
+      this.selectedStoreId = null;
+      this.storeOptions = [];
+      this.loadStoreList();
       this.open = true;
       this.title = "创建外部订单";
-      this.getProductList();
     },
     reset() {
       this.form = {
@@ -567,9 +577,8 @@ export default {
         payMoney: null,
         products: []
       };
-      this.productQuantities = {};
-      this.productPrices = {};
-      this.selectedProducts = [];
+      this.drugList = [];
+      this.selectedStoreId = null;
       this.resetForm("form");
     },
     cancel() {
@@ -641,66 +650,68 @@ export default {
         this.addressloading = false;
       });
     },
-    handleProductSearch() {
-      this.productQueryParams.pageNum = 1;
-      this.productQueryParams.productName = this.productNameSearch;
-      this.getProductList();
+    handleAddProduct() {
+      if (!this.selectedStoreId) {
+        this.$message({ message: '请先选择店铺', type: 'warning' });
+        return;
+      }
+      this.productSearchKeyword = null;
+      this.productDialogPage.pageNum = 1;
+      this.getProductDialogList();
+      this.productDialogVisible = true;
+    },
+    searchProductDialog() {
+      this.productDialogPage.pageNum = 1;
+      this.getProductDialogList();
     },
-    getProductList() {
+    getProductDialogList() {
       var data = {
-        pageNum: this.productQueryParams.pageNum,
-        pageSize: this.productQueryParams.pageSize,
-        productName: this.productNameSearch
+        pageNum: this.productDialogPage.pageNum,
+        pageSize: this.productDialogPage.pageSize,
+        productName: this.productSearchKeyword,
+        storeId: this.selectedStoreId
       };
       listStoreProduct(data).then(response => {
-        this.productJson = response.rows || [];
-        this.productJson.forEach(item => {
-          if (this.productPrices[item.productId] == null && item.price != null) {
-            this.$set(this.productPrices, item.productId, Number(item.price));
-          }
-          if (this.productQuantities[item.productId] == null) {
-            this.$set(this.productQuantities, item.productId, 1);
-          }
-        });
-        this.productTotal = response.total || 0;
+        this.productDialogList = response.rows || [];
+        this.productDialogTotal = response.total || 0;
       });
     },
-    getDisplayProductPrice(product) {
-      const customPrice = this.productPrices[product.productId];
-      if (customPrice !== undefined && customPrice !== null && customPrice !== "") {
-        return Number(customPrice);
-      }
-      return Number(product.price || 0);
+    loadStoreList() {
+      listStore().then(response => {
+        this.storeOptions = response.rows || [];
+      });
     },
-    getProductMax(product) {
-      const stock = Number(product.stock);
-      if (Number.isFinite(stock) && stock > 0) {
-        return stock;
-      }
-      return 999;
-    },
-    handleProductSelectionChange(selection) {
-      this.selectedProducts = selection;
-      // 初始化未设置数量的商品默认值为1
-      selection.forEach(item => {
-        if (this.productQuantities[item.productId] == null) {
-          this.$set(this.productQuantities, item.productId, 1);
-        }
-        if (this.productPrices[item.productId] == null) {
-          this.$set(this.productPrices, item.productId, this.getDisplayProductPrice(item));
+    handleStoreChange() {
+      this.drugList = [];
+      this.form.totalPrice = null;
+    },
+    selectProduct(row) {
+      for (var i = 0; i < this.drugList.length; i++) {
+        if (this.drugList[i].productId == row.productId) {
+          this.$message({ message: '该商品已添加', type: 'warning' });
+          return;
         }
-      });
-      this.handleQuantityChange();
+      }
+      row.count = 1;
+      row.price = Number(row.price) || 0;
+      row.money = row.count * row.price;
+      this.drugList.push({ ...row });
+      this.compute();
+      this.$message({ message: '添加成功', type: 'success' });
+    },
+    handleProductDelete(row) {
+      this.drugList.splice(this.drugList.findIndex(item => item.productId === row.productId), 1);
+      this.compute();
     },
-    isProductSelected(productId) {
-      return this.selectedProducts.some(item => item.productId === productId);
+    handleProductCountChange(row) {
+      row.money = row.count * row.price;
+      this.$forceUpdate();
+      this.compute();
     },
-    handleQuantityChange() {
-      let total = 0;
-      this.selectedProducts.forEach(item => {
-        const quantity = this.productQuantities[item.productId] || 1;
-        const price = this.getDisplayProductPrice(item);
-        total += price * quantity;
+    compute() {
+      var total = 0;
+      this.drugList.forEach(function(value) {
+        total += value.money;
       });
       this.form.totalPrice = total.toFixed(2);
     },
@@ -711,15 +722,14 @@ export default {
             this.msgError("请选择会员");
             return;
           }
-          if (this.selectedProducts.length === 0) {
-            this.msgError("请选择至少一个商品");
+          if (this.drugList.length === 0) {
+            this.msgError("请添加至少一个商品");
             return;
           }
-          // 构建商品列表 [{productId, num}]
-          const products = this.selectedProducts.map(item => ({
+          const products = this.drugList.map(item => ({
             productId: item.productId,
-            num: this.productQuantities[item.productId] || 1,
-            price: this.getDisplayProductPrice(item)
+            num: item.count || 1,
+            price: item.price
           }));
           var submitData = {
             addressId: this.form.addressId,