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
  };
  },
 }