批量替换主材

src/components/makeProduct/modification/index.vue

@@ -0,0 +1,205 @@
+<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 style="margin-left: 32px">
+        <el-form :model="specCode" :inline="true" @submit.native.prevent>
+          <el-form-item label="BOM品号">
+            <el-input v-model="specCode" placeholder="请输入BOM品号" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="height: 30px; line-height: 30px; margin-right: 10px">
+        <el-button type="primary" @click="handleRemove" 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="140" />
+      <el-table-column label="SKU品号" prop="skuSpecCode" width="160" />
+      <el-table-column label="品名" prop="skuSpecName" min-width="260" />
+      <el-table-column label="裸垫品号" prop="bomSpecCode" width="180" />
+    </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="[1]" @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 byForm from "@/components/byForm/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/getReplacePrincipalMaterialPage", 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 specCode = ref("");
+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/replacePrincipalMaterial", { ...sourceList.value.pagination, replaceBomSpecId: selectData.value[0].id }).then(() => {
+        ElMessage({ message: "替换成功", type: "success" });
+        getList();
+      });
+    })
+    .catch(() => {});
+  } else {
+    return ElMessage("请选择BOM");
+  }
+};
+const handleRemove = () => {};
+// ``````````````````````````````````````````````````````
+const emit = defineEmits(["clickCancel"]);
+const clickCancel = () => {
+  emit("clickCancel", false);
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -16,6 +16,12 @@
                 text: '添加产品',
                 action: () => clickModal(),
               },
+          props.selectStatus
+            ? {}
+            : {
+                text: '批量修改',
+                action: () => batchModification(),
+              },
           // {
           //   text: '操作日志',
           //   action: () => viewLogs(),
@@ -81,12 +87,17 @@
         <el-button @click="openLogs = false" size="large">关 闭</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="批量修改" v-if="openModification" v-model="openModification" width="96%">
+      <Modification @clickCancel="clickModificationCancel"></Modification>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import byTable from "@/components/byTable/index";
 import MakeSKU from "@/components/makeProduct/index";
+import Modification from "@/components/makeProduct/modification/index";
 
 const { proxy } = getCurrentInstance();
 const props = defineProps({
@@ -338,6 +349,16 @@ const emit = defineEmits(["selectProduct"]);
 const selectProduct = (spec, item) => {
   emit("selectProduct", spec, item);
 };
+const openModification = ref(false);
+const batchModification = () => {
+  openModification.value = true;
+};
+const clickModificationCancel = (status) => {
+  openModification.value = false;
+  if (status) {
+    getList();
+  }
+};
 </script>
 
 <style lang="scss" scoped>