替换包材

src/components/makeProduct/modification/subsidiary.vue

@@ -0,0 +1,198 @@
+<template>
+  <div style="height: calc(100vh - 114px); overflow-y: auto; overflow-x: hidden">
+    <byTable
+      :hideTable="true"
+      :hidePagination="true"
+      :source="sourceList.data"
+      :pagination="sourceList.pagination"
+      :config="config"
+      :loading="loading"
+      :searchConfig="searchConfig"
+      highlight-current-row
+      @get-list="getList"
+      @clickReset="clickReset">
+    </byTable>
+    <div style="margin-bottom: 10px; display: flex">
+      <div style="height: 30px; line-height: 30px; margin-right: 10px">
+        <el-button type="primary" @click="handleBOM()" v-preReClick>选择bom</el-button>
+      </div>
+      <div style="height: 30px; line-height: 30px; margin-right: 10px">
+        <el-button type="primary" @click="handleReset" text>重置</el-button>
+      </div>
+      <div style="height: 30px; line-height: 30px; margin-right: 10px">
+        <el-button type="primary" @click="handleReplace" text>一键替换</el-button>
+      </div>
+    </div>
+
+    <el-table :data="selectData" :cell-style="{ padding: '0' }" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" style="margin-bottom: 10px">
+      <el-table-column label="品号" prop="code" width="220" />
+      <el-table-column label="品名" prop="name" min-width="220" />
+      <el-table-column label="操作" align="center" width="120">
+        <template #default="{ row, $index }">
+          <el-button type="text" @click="handleDelete($index)">删 除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <br />
+
+    <el-table :data="sourceList.data" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
+      <el-table-column label="群组品号" prop="skuCode" width="120" />
+      <el-table-column label="SKU品号" prop="skuSpecCode" width="140" />
+      <el-table-column label="品名" prop="skuSpecName" min-width="240" />
+      <el-table-column label="彩纸" prop="colouredPaper" width="100" />
+      <el-table-column label="OPP膜" prop="oppMembrane" width="100" />
+      <el-table-column label="PE袋" prop="peBag" width="100" />
+      <el-table-column label="网包" prop="meshBag" width="100" />
+      <el-table-column label="纸箱" prop="paperBox" width="100" />
+      <el-table-column label="气泡袋" prop="bubblePack" width="100" />
+      <el-table-column label="快递包材" prop="logisticsPackagingMaterial" width="100" />
+      <el-table-column label="其他包材" prop="otherPackingMaterial" width="100" />
+      <el-table-column label="不干胶" prop="selfAdhesiveSticker" width="100" />
+      <el-table-column label="吊牌" prop="drop" width="100" />
+      <el-table-column label="背带" prop="suspenders" width="100" />
+      <el-table-column label="辅料" prop="accessory" width="100" />
+    </el-table>
+
+    <el-row style="padding: 10px 0" justify="end" type="flex">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="sourceList.pagination.pageNum"
+        :page-size="sourceList.pagination.pageSize"
+        :total="sourceList.pagination.total"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange" />
+    </el-row>
+
+    <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
+      <SelectBOM :selectStatus="true" :bomClassifyIdList="[2, 3]" @selectBOM="selectBOM"></SelectBOM>
+      <template #footer>
+        <el-button @click="openBOM = false" size="large">关 闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import byTable from "@/components/byTable/index";
+import SelectBOM from "@/views/group/BOM/management/index";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    skuCode: "",
+    skuSpecCode: "",
+    bomSpecCode: "",
+    length: "",
+    width: "",
+    height: "",
+  },
+});
+const loading = ref(false);
+const searchConfig = computed(() => {
+  return [
+    {
+      type: "input",
+      prop: "skuCode",
+      label: "群组品号",
+    },
+    {
+      type: "input",
+      prop: "skuSpecCode",
+      label: "SKU品号",
+    },
+    {
+      type: "input",
+      prop: "bomSpecCode",
+      label: "BOM品号",
+    },
+    {
+      type: "input",
+      prop: "length",
+      label: "长",
+    },
+    {
+      type: "input",
+      prop: "width",
+      label: "宽",
+    },
+    {
+      type: "input",
+      prop: "height",
+      label: "高",
+    },
+  ];
+});
+const config = computed(() => {
+  return [];
+});
+const getList = async (req, status) => {
+  if (status) {
+    sourceList.value.pagination = {
+      pageNum: sourceList.value.pagination.pageNum,
+      pageSize: sourceList.value.pagination.pageSize,
+    };
+  } else {
+    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  }
+  loading.value = true;
+  proxy.post("/sku/getReplacePackagingMaterialPage", sourceList.value.pagination).then((res) => {
+    sourceList.value.data = res.rows;
+    sourceList.value.pagination.total = res.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+getList();
+const clickReset = () => {
+  getList("", true);
+};
+const handlePageChange = (val) => {
+  getList({ pageNum: val });
+};
+const handleSizeChange = (val) => {
+  getList({ pageNum: 1, pageSize: val });
+};
+const openBOM = ref(false);
+const selectData = ref([]);
+const handleBOM = () => {
+  openBOM.value = true;
+};
+const selectBOM = (item) => {
+  selectData.value = [item];
+  ElMessage({ message: "选择完成", type: "success" });
+  openBOM.value = false;
+};
+const handleDelete = (index) => {
+  selectData.value.splice(index, 1);
+};
+const handleReset = () => {
+  selectData.value = [];
+};
+const handleReplace = () => {
+  if (selectData.value && selectData.value.length > 0) {
+    ElMessageBox.confirm("是否确认替换所有BOM", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+      .then(() => {
+        proxy.post("/sku/replacePackagingMaterial", { ...sourceList.value.pagination, replaceBomSpecId: selectData.value[0].id }).then(() => {
+          ElMessage({ message: "替换成功", type: "success" });
+          getList();
+        });
+      })
+      .catch(() => {});
+  } else {
+    return ElMessage("请选择BOM");
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/subsidiary/product/management/index.vue

@@ -8,6 +8,12 @@
         :loading="loading"
         :searchConfig="searchConfig"
         highlight-current-row
+        :action-list="[
+          {
+            text: '批量修改',
+            action: () => batchModification(),
+          },
+        ]"
         @get-list="getList"
         @clickReset="clickReset">
         <template #typeExpand="{ item }">
@@ -51,12 +57,17 @@
     <el-dialog :title="modalTitle" v-if="openDialog" v-model="openDialog" width="90%">
       <MakeSKU :rowData="rowData" :detailStatus="detailStatus" @clickCancel="clickCancel"></MakeSKU>
     </el-dialog>
+    
+    <el-dialog title="批量修改" v-if="openModification" v-model="openModification" width="96%">
+      <ModificationSubsidiary @clickCancel="clickModificationCancel"></ModificationSubsidiary>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import byTable from "@/components/byTable/index";
 import MakeSKU from "@/components/makeProduct/subsidiary/index";
+import ModificationSubsidiary from "@/components/makeProduct/modification/subsidiary";
 
 const { proxy } = getCurrentInstance();
 const sourceList = ref({
@@ -235,6 +246,16 @@ const clickName = (row) => {
   detailStatus.value = true;
   openDialog.value = true;
 };
+const openModification = ref(false);
+const batchModification = () => {
+  openModification.value = true;
+};
+const clickModificationCancel = (status) => {
+  openModification.value = false;
+  if (status) {
+    getList();
+  }
+};
 </script>
 
 <style lang="scss" scoped>