Add Batch Edit Modal

src/api/product/model/productModel.ts

@@ -108,4 +108,15 @@ export interface ProductStockResp {
     initStockQuantity: number;
     lowStockQuantity: number;
     highStockQuantity: number;
+}
+
+export interface UpdateBatchProductInfoReq {
+    productIds: number[];
+    productCategoryId: number | string;
+    productColor: string;
+    productWeight: number;
+    productExpiryNum: number;
+    enableSerialNumber: string;
+    enableBatchNumber: string;
+    remark: string;
 }

src/api/product/product.ts

@@ -1,6 +1,11 @@
 import {defHttp} from '/@/utils/http/axios';
 import {BaseDataResp, BaseResp} from "@/api/model/baseModel";
-import {AddProductReq, ProductInfoDetailResp, QueryProductReq} from "@/api/product/model/productModel";
+import {
+    AddProductReq,
+    ProductInfoDetailResp,
+    QueryProductReq,
+    UpdateBatchProductInfoReq
+} from "@/api/product/model/productModel";
 import {ErrorMessageMode} from "#/axios";
 
 enum Api {
@@ -10,6 +15,7 @@ enum Api {
     getProductInfoDetail = '/product/getProductInfoDetail',
     deleteProduct = '/product/deleteProduct',
     updateProductStatus = '/product/updateProductStatus',
+    updateBatchProductInfo = '/product/updateBatchProductInfo',
 }
 
 export function getBarCode() {
@@ -70,4 +76,15 @@ export function updateProductStatus(productIds: number[], status: number, mode:
             errorMessageMode: mode,
         }
     );
+}
+
+export function updateBatchProductInfo(params: UpdateBatchProductInfoReq, mode: ErrorMessageMode = 'notice') {
+    return defHttp.put<BaseResp>(
+        {
+            url: Api.updateBatchProductInfo,
+            params
+        },{
+            errorMessageMode: mode,
+        }
+    );
 }

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

@@ -0,0 +1,209 @@
+<template>
+  <div ref="container">
+    <a-modal
+        :title="title"
+        :width="700"
+        :confirm-loading="confirmLoading"
+        v-model:open="openBatchEditModal"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        style="top:20%;height: 45%;">
+      <a-spin :spinning="confirmLoading">
+        <a-form>
+          <a-row class="form-row" :gutter="24">
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="颜色">
+                <a-input placeholder="请输入颜色" v-model:value="color"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="基础重量">
+                <a-input-number placeholder="请输入基础重量(kg)" v-model:value="weight" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="保质期">
+                <a-input-number placeholder="请输入保质期(天)" v-model:value="expiryNum" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="类别">
+                <a-tree-select :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
+                               :tree-data="categoryTree" v-model:value="categoryId" placeholder="请选择类别">
+                </a-tree-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="序列号">
+                <a-select placeholder="有无序列号" v-model:value="enableSerialNumber">
+                  <a-select-option value="1">有</a-select-option>
+                  <a-select-option value="0">无</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="批号">
+                <a-select placeholder="有无批号" v-model:value="enableBatchNumber">
+                  <a-select-option value="1">有</a-select-option>
+                  <a-select-option value="0">无</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="备注">
+                <a-textarea :rows="1" placeholder="请输入备注" v-model:value="remark" style="margin-top:8px;"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, reactive } from 'vue';
+import {
+  Button,
+  Form,
+  FormItem,
+  InputNumber,
+  Modal, Popconfirm,
+  Select,
+  SelectOption,
+  Spin,
+  Textarea,
+  TreeSelect
+} from "ant-design-vue";
+import {getCategoryList} from "/@/api/product/productCategory"
+import {UpdateBatchProductInfoReq} from "/@/api/product/model/productModel"
+import {updateBatchProductInfo} from "/@/api/product/product"
+import {useMessage} from "@/hooks/web/useMessage";
+
+export default {
+  name: 'BatchEditModal',
+  components: {
+    'a-modal': Modal,
+    'a-button': Button,
+    'a-spin': Spin,
+    'a-form': Form,
+    'a-form-item': FormItem,
+    'a-input-number': InputNumber,
+    'a-textarea': Textarea,
+    'a-select': Select,
+    'a-select-option': SelectOption,
+    'a-tree-select': TreeSelect,
+    'a-popconfirm': Popconfirm,
+  },
+  setup(_, context) {
+    const title = ref('批量编辑商品信息');
+    const openBatchEditModal = ref(false);
+
+    const color = ref(null);
+    const weight = ref(null);
+    const expiryNum = ref(null);
+    const categoryId = ref(null);
+    const enableSerialNumber = ref(null);
+    const enableBatchNumber = ref(null);
+    const remark = ref(null);
+    const categoryTree = reactive([]);
+    const productIds = ref([])
+    const {createMessage} = useMessage();
+
+    const confirmLoading = ref(false);
+    const formRef = ref();
+
+    const labelCol = ref({
+      xs: { span: 24 },
+      sm: { span: 5 },
+    })
+
+    const wrapperCol = ref({
+      xs: { span: 24 },
+      sm: { span: 16 },
+    })
+
+    const open = (ids) => {
+      openBatchEditModal.value = true
+      loadCategoryTree()
+      productIds.value = ids
+    };
+
+    function loadCategoryTree() {
+      getCategoryList().then((res) => {
+        if (res.code === '00000') {
+          const data = res.data
+          const tree = data.filter((item) => !item.parentId).map((item) => {
+            return {
+              ...item,
+              label: item.categoryName,
+              value: item.id,
+              key: item.id,
+              children: data.filter((child) => child.parentId === item.id).map((child) => {
+                return {
+                  ...child,
+                  label: child.categoryName,
+                  value: child.id,
+                  key: child.id,
+                }
+              })
+            }
+          })
+          categoryTree.splice(0, categoryTree.length, ...tree)
+        }
+      })
+    }
+
+    const close = () => {
+      openBatchEditModal.value = false
+    };
+
+    const handleOk = () => {
+      const updateData: UpdateBatchProductInfoReq = {
+        productIds: productIds.value,
+        productCategoryId: categoryId.value,
+        productColor: color.value,
+        productWeight: weight.value,
+        productExpiryNum: expiryNum.value,
+        enableSerialNumber: enableSerialNumber.value,
+        enableBatchNumber: enableBatchNumber.value,
+        remark: remark.value,
+      }
+      updateBatchProductInfo(updateData).then((res) => {
+        if (res.code === 'P0014') {
+          createMessage.success('批量编辑成功')
+          close()
+          context.emit('success')
+        } else {
+          createMessage.error('批量编辑失败')
+        }
+      })
+    };
+
+    const handleCancel = () => {
+      close();
+    };
+
+    return {
+      title,
+      color,
+      weight,
+      expiryNum,
+      categoryId,
+      categoryTree,
+      enableSerialNumber,
+      enableBatchNumber,
+      remark,
+      confirmLoading,
+      formRef,
+      labelCol,
+      wrapperCol,
+      open,
+      close,
+      handleOk,
+      handleCancel,
+      openBatchEditModal,
+    };
+  }
+};
+</script>

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

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { ref, reactive, UnwrapRef } from 'vue';
+import { ref, reactive } from 'vue';
 import {Button, Form, FormItem, InputNumber, Modal, Spin} from "ant-design-vue";
 import {Rule} from 'ant-design-vue/es/form';
 

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

@@ -339,7 +339,7 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, Ref, ref, toRaw, toRef, UnwrapRef, watch} from 'vue';
+import {onMounted, reactive, ref, UnwrapRef, watch} from 'vue';
 import {UploadProps,} from 'ant-design-vue';
 import {
   Button,

src/views/product/info/index.vue

@@ -6,9 +6,9 @@
         <a-button type="primary" @click="handleBatchDelete"> 批量删除</a-button>
         <a-button type="primary" @click="handleOnStatus(0)"> 批量启用</a-button>
         <a-button type="primary" @click="handleOnStatus(1)"> 批量禁用</a-button>
-        <a-button type="primary" @click=""> 导入</a-button>
+        <a-button type="primary" @click="handleImport"> 导入</a-button>
         <a-button type="primary" @click=""> 导出</a-button>
-        <a-button type="primary" @click=""> 批量编辑</a-button>
+        <a-button type="primary" @click="handleBatchProductInfo"> 批量编辑</a-button>
         <a-button type="primary" @click=""> 修正库存</a-button>
       </template>
       <template #bodyCell="{ column, record }">
@@ -34,6 +34,8 @@
       </template>
     </BasicTable>
     <ProductInfoModal ref="productModalRef" @cancel="handleCancel" @success="handleOk"/>
+    <BatchEditModal ref="batchProductInfoModalRef" @cancel="handleCancel" @success="handleOk"/>
+    <ImportFileModal ref="importModalRef" @cancel="handleCancel"/>
   </div>
 </template>
 <div>
@@ -45,14 +47,18 @@ import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {useMessage} from "@/hooks/web/useMessage";
 import {columns, searchFormSchema} from "@/views/product/info/info.data";
 import ProductInfoModal from "@/views/product/info/components/ProductInfoModal.vue";
+import BatchEditModal from "@/views/product/info/components/BatchEditModal.vue";
 import {getProductInfo, deleteProduct, updateProductStatus} from "@/api/product/product";
+import ImportFileModal from "@/components/Tools/ImportFileModal.vue";
 
 export default defineComponent({
   name: 'ProductInfo',
-  components: {TableAction, BasicTable, ProductInfoModal },
+  components: {TableAction, BasicTable, ProductInfoModal, BatchEditModal, ImportFileModal},
   setup() {
     const { createMessage } = useMessage();
+    const importModalRef = ref(null);
     const productModalRef = ref(null);
+    const batchProductInfoModalRef = ref(null);
     const [registerTable, { reload, getSelectRows }] = useTable({
       title: '商品信息列表',
       rowKey: 'id',
@@ -125,11 +131,28 @@ export default defineComponent({
     }
 
     async function handleCancel() {
-      reload();
+      await reload();
     }
 
     async function handleOk() {
-      reload();
+      await reload();
+    }
+
+    function handleBatchProductInfo() {
+      const data = getSelectRows();
+      if (data.length === 0) {
+        createMessage.warn('请选择一条数据');
+        return;
+      }
+      const ids = data.map((item) => item.id);
+      batchProductInfoModalRef.value.open(ids)
+    }
+
+    function handleImport() {
+      const templateUrl  = 'https://wansen-1317413588.cos.ap-shanghai.myqcloud.com/%E4%BC%9A%E5%91%98%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xlsx'
+      const templateName  = '商品信息Excel模板[下载]'
+      importModalRef.value.initModal(templateUrl, templateName);
+      importModalRef.value.title = "商品信息数据导入";
     }
 
     return {
@@ -143,6 +166,10 @@ export default defineComponent({
       handleCancel,
       handleOk,
       productModalRef,
+      batchProductInfoModalRef,
+      handleBatchProductInfo,
+      handleImport,
+      importModalRef
     }
   }
 })