From 0871aa5078beedbc05121d6c02c607658c6397cf Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Mon, 23 Oct 2023 23:26:28 +0800
Subject: [PATCH 1/4] Add Batch Edit Modal

---
 .../info/components/BatchEditModal.vue        | 209 ++++++++++++++++++
 1 file changed, 209 insertions(+)
 create mode 100644 src/views/product/info/components/BatchEditModal.vue

diff --git a/src/views/product/info/components/BatchEditModal.vue b/src/views/product/info/components/BatchEditModal.vue
new file mode 100644
index 0000000..0acff51
--- /dev/null
+++ b/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>
\ No newline at end of file

From b6a141f744b58343f12d90fe693c3d79124f9930 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Mon, 23 Oct 2023 23:26:55 +0800
Subject: [PATCH 2/4] Add UpdateBatchProductInfo request object and add
 updateBatchProductInfo api

---
 src/api/product/model/productModel.ts | 11 +++++++++++
 src/api/product/product.ts            | 19 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/api/product/model/productModel.ts b/src/api/product/model/productModel.ts
index ddbaca5..edc7db4 100644
--- a/src/api/product/model/productModel.ts
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/api/product/product.ts b/src/api/product/product.ts
index f5b2c27..ff48768 100644
--- a/src/api/product/product.ts
+++ b/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,
+        }
+    );
 }
\ No newline at end of file

From 0c15fa9ede48e1257ca52ece72d27d2d94cda5c4 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Mon, 23 Oct 2023 23:27:21 +0800
Subject: [PATCH 3/4] remove not use UnwrapRef Ref toRaw

---
 src/views/product/info/components/BatchSetPriceModal.vue | 2 +-
 src/views/product/info/components/ProductInfoModal.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/product/info/components/BatchSetPriceModal.vue b/src/views/product/info/components/BatchSetPriceModal.vue
index c468905..ea8c5dc 100644
--- a/src/views/product/info/components/BatchSetPriceModal.vue
+++ b/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';
 
diff --git a/src/views/product/info/components/ProductInfoModal.vue b/src/views/product/info/components/ProductInfoModal.vue
index 99a5902..3717761 100644
--- a/src/views/product/info/components/ProductInfoModal.vue
+++ b/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,

From f4ae56cb516a42e5389ea767f6a2b0a2503f0be4 Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Mon, 23 Oct 2023 23:27:36 +0800
Subject: [PATCH 4/4] Add handleBatchProductInfo and handleImport method

---
 src/views/product/info/index.vue | 37 +++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
index 0e6af90..379e60c 100644
--- a/src/views/product/info/index.vue
+++ b/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
     }
   }
 })