Add stock reactive data and views

src/views/product/info/components/ProductInfoModal.vue

@@ -212,8 +212,7 @@
                </span>
               </div>
               <div>
-                <a-table @change="onValueChange"
-                         :loading="meTable.loading"
+                <a-table :loading="meTable.loading"
                          :columns="meTable.columns"
                          :dataSource="meTable.dataSource"
                          :dataSource.sync="meTable.dataSource"
@@ -228,6 +227,7 @@
                   </template>
                 </a-table>
               </div>
+              <batch-set-price-modal ref="priceModalForm" @ok="batchSetPriceModalFormOk"></batch-set-price-modal>
             </div>
             <a-row class="form-row" :gutter="24">
               <a-col :lg="24" :md="24" :sm="24">
@@ -268,12 +268,30 @@
             </a-row>
           </a-tab-pane>
           <a-tab-pane key="3" tab="库存数量" forceRender>
-            <template>
+            <a-row class="form-row" :gutter="24">
               <a-button style="margin: 0px 0px 8px 0px" @click="batchSetStock('initStock')">期初库存-批量</a-button>
               <a-button style="margin-left: 8px" @click="batchSetStock('lowSafeStock')">最低安全库存-批量</a-button>
               <a-button style="margin-left: 8px" @click="batchSetStock('highSafeStock')">最高安全库存-批量</a-button>
-            </template>
-            <batch-set-price-modal ref="priceModalForm" @ok="batchSetPriceModalFormOk"></batch-set-price-modal>
+            </a-row>
+              <a-row class="form-row" :gutter="24">
+                <a-table :loading="stock.loading"
+                         :columns="stock.columns"
+                         :dataSource="stock.dataSource"
+                         :rowNumber="true"
+                         bordered
+                         :scroll="{ x: '100%', y: 300 }">
+                  <template #bodyCell="{ column, text, record }">
+                    <template v-if="column.key === 'warehouseName'">
+                      <a-input v-model:value="editStockData[record.key][column.key]" disabled />
+                    </template>
+                    <template v-else-if="editStockData[record.key]">
+                      <a-input v-model:value="editStockData[record.key][column.key]"
+                               :placeholder="`请输入${getColumnTitle(column)}`" />
+                    </template>
+                  </template>
+                </a-table>
+              </a-row>
+            <batch-set-stock-modal ref="stockModalForm" @ok="batchSetStokModalFormOk"></batch-set-stock-modal>
           </a-tab-pane>
           <a-tab-pane key="4" tab="图片信息" forceRender>
             <a-row class="form-row" :gutter="24">
@@ -313,7 +331,7 @@
 </template>
 
 <script lang="ts">
-import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {ref, reactive, onMounted, watch, computed, readonly} from 'vue';
 import {
   Modal,
   Upload,
@@ -337,11 +355,11 @@ import {getCategoryList} from "/@/api/product/productCategory"
 import {ProductUnitQueryReq} from "/@/api/product/model/productUnitModel"
 import {DefaultOptionType} from "ant-design-vue/es/vc-tree-select/TreeSelect";
 import {ProductAttributeListReq} from "@/api/product/model/productAttributeModel"
-import {getBarCode} from "@/api/product/product"
+import {getBarCode, getStock} from "@/api/product/product"
 import {getAttributeList, getAttributeById} from "@/api/product/productAttribute"
 import {useMessage} from "@/hooks/web/useMessage";
 import BatchSetPriceModal from "@/views/product/info/components/BatchSetPriceModal.vue";
-
+import BatchSetStockModal from "@/views/product/info/components/BatchSetStockModal.vue";
 export default {
   name: 'ProductInfoModal',
   emits: ['success', 'cancel'],
@@ -365,6 +383,7 @@ export default {
     'a-tab-pane': TabPane,
     'a-table': Table,
     BatchSetPriceModal,
+    BatchSetStockModal
   },
   setup(_, context) {
     const { createMessage } = useMessage();
@@ -393,6 +412,7 @@ export default {
     const skuThree = reactive([]);
 
     const priceModalForm = ref(null);
+    const stockModalForm = ref(null);
 
     onMounted(() => {
       // 在组件初始化加载时调用请求接口的方法
@@ -503,6 +523,35 @@ export default {
       ]
     });
 
+    const stock = reactive({
+      loading: false,
+      dataSource: [],
+      columns: [
+        {
+          title: '仓库',
+          key: 'warehouseName',
+          type: 'input',
+        },
+        {
+          title: '期初库存数量',
+          key: 'initStockQuantity',
+          type: 'inputNumber',
+          placeholder: '请输入${title}'
+        },
+        {
+          title: '最低安全库存数量',
+          key: 'lowStockQuantity',
+          type: 'inputNumber',
+          placeholder: '请输入${title}'
+        },
+        {
+          title: '最高安全库存数量',
+          key: 'highStockQuantity',
+          type: 'inputNumber',
+          placeholder: '请输入${title}'
+        }
+      ]
+    });
 
     const productInfo = reactive({
       mfrs: '制造商',
@@ -530,6 +579,7 @@ export default {
       loadUnitListData();
       loadCategoryTreeData();
       loadAttributeTreeData();
+      loadStock();
     }
 
     function unitOnChange(event) {
@@ -569,7 +619,6 @@ export default {
       editableData[record.key][dataIndex] = value;
     };
 
-
     async function loadUnitListData() {
       const unitObject: ProductUnitQueryReq = {
         page: 1,
@@ -727,6 +776,32 @@ export default {
       })
     }
 
+    function loadStock() {
+      getStock().then(res => {
+        if (res && res.code==='00000') {
+          let stockList = res.data
+          if (stockList.length > 0) {
+            stock.dataSource.splice(0);
+            console.info(stockList)
+            for (let i = 0; i < stockList.length; i++) {
+              const rowData = {
+                key: stockList[i].id,
+                warehouseName: stockList[i].warehouseName,
+                initStockQuantity: stockList[i].initStockQuantity,
+                lowStockQuantity: stockList[i].lowStockQuantity,
+                highStockQuantity: stockList[i].highStockQuantity
+              }
+              stock.dataSource.push(rowData);
+            }
+            console.info(stock.dataSource)
+            stock.dataSource.forEach(row => {
+              editStock(row.key);
+            });
+          }
+        }
+      })
+    }
+
     watch(manySkuSelected, (value) => {
       // 控制多属性下拉框中选择项的状态
       // 1.如果value < 3 则将所有的多属性下拉框中的选项都设置为可选，但是可以取消勾选 2.如果value >= 3 则将所有的多属性下拉框中的选项都设置为不可选
@@ -791,6 +866,8 @@ export default {
     }
 
     function batchSetStock(type) {
+      stockModalForm.value.add(type);
+      stockModalForm.value.openStockModal = true;
     }
 
     function batchSetPriceModalFormOk(price, batchType) {
@@ -818,6 +895,25 @@ export default {
       meTable.dataSource.forEach(row => {
         edit(row.key);
       });
+    }
+
+    function batchSetStokModalFormOk(stockNumber, batchType) {
+      if (batchType === 'initStock') {
+        for (let i = 0; i < stock.dataSource.length; i++) {
+          stock.dataSource[i].initStockQuantity = stockNumber
+        }
+      } else if (batchType === 'lowSafeStock') {
+        for (let i = 0; i < stock.dataSource.length; i++) {
+          stock.dataSource[i].lowStockQuantity = stockNumber
+        }
+      } else if (batchType === 'highSafeStock') {
+        for (let i = 0; i < stock.dataSource.length; i++) {
+          stock.dataSource[i].highStockQuantity = stockNumber
+        }
+      }
+      stock.dataSource.forEach(row => {
+        editStock(row.key);
+      });
 
     }
 
@@ -848,6 +944,13 @@ export default {
       }
     };
 
+    const editStock = (key) => {
+      const rowData = stock.dataSource.find(item => item.key === key);
+      if (rowData) {
+        editStockData[key] = cloneDeep(rowData);
+      }
+    };
+
     const rowSelection = ref({
       selectedRowKeys: [],
       onChange: (selectedRowKeys) => {
@@ -861,6 +964,9 @@ export default {
       rowSelection.value.selectedRowKeys = [];
     }
 
+    const editStockData = reactive([])
+
+
     function getBase64(file: File) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -937,7 +1043,11 @@ export default {
       unit,
       batchSetPrice,
       priceModalForm,
-      batchSetPriceModalFormOk
+      batchSetPriceModalFormOk,
+      stock,
+      editStockData,
+      stockModalForm,
+      batchSetStokModalFormOk
     };
   },
 }