SKU管理增加 选择包材配件 和快递包装

src/components/makeGroupProduct/index.vue

@@ -195,7 +195,7 @@
     </div>
 
     <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
-      <SelectBOM :selectStatus="true" :bomClassifyId="1" @selectBOM="selectBOM"></SelectBOM>
+      <SelectBOM :selectStatus="true" :bomClassifyIdList="[1]" @selectBOM="selectBOM"></SelectBOM>
       <template #footer>
         <el-button @click="openBOM = false" size="large">关 闭</el-button>
       </template>

src/components/makeProduct/index.vue

@@ -16,7 +16,83 @@
           <div>
             <el-icon style="cursor: pointer; transform: translateY(4px); font-size: 24px; margin-left: 10px" @click="addSpecification"><Plus /></el-icon>
           </div>
-          <el-table :data="formData.data.skuSpecList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
+          <el-table
+            :data="formData.data.skuSpecList"
+            :row-style="{ height: '35px' }"
+            header-row-class-name="tableHeader"
+            :row-key="
+              (row) => {
+                return row.id;
+              }
+            ">
+            <el-table-column type="expand">
+              <template #default="props">
+                <div style="padding: 10px 20px">
+                  <el-row :gutter="20">
+                    <el-col :span="12">
+                      <div style="margin-bottom: 10px">
+                        <el-button type="primary" @click="clickPackingFittings(props)">选择包材配件</el-button>
+                      </div>
+                      <el-table :data="props.row.packagingMaterialList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
+                        <el-table-column label="数量" width="120">
+                          <template #default="{ row, $index }">
+                            <el-form-item
+                              :prop="'skuSpecList.' + props.$index + '.packagingMaterialList.' + $index + '.quantity'"
+                              :rules="rulesSpec.quantity"
+                              :inline-message="true"
+                              style="width: 100%">
+                              <el-input-number
+                                onmousewheel="return false;"
+                                v-model="row.quantity"
+                                placeholder="数量"
+                                style="width: 100%"
+                                :controls="false"
+                                :min="0" />
+                            </el-form-item>
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="名称" prop="name" min-width="220" />
+                        <el-table-column label="操作" align="center" fixed="right" width="60">
+                          <template #default="{ $index }">
+                            <el-button type="danger" @click="clickDeletePackingFittings(props.$index, $index)" text>删除</el-button>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </el-col>
+                    <el-col :span="12">
+                      <div style="margin-bottom: 10px">
+                        <el-button type="primary" @click="clickExpressPacking(props)">选择快递包装</el-button>
+                      </div>
+                      <el-table :data="props.row.expressPackingList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
+                        <el-table-column label="数量" width="120">
+                          <template #default="{ row, $index }">
+                            <el-form-item
+                              :prop="'skuSpecList.' + props.$index + '.expressPackingList.' + $index + '.quantity'"
+                              :rules="rulesSpec.quantity"
+                              :inline-message="true"
+                              style="width: 100%">
+                              <el-input-number
+                                onmousewheel="return false;"
+                                v-model="row.quantity"
+                                placeholder="数量"
+                                style="width: 100%"
+                                :controls="false"
+                                :min="0" />
+                            </el-form-item>
+                          </template>
+                        </el-table-column>
+                        <el-table-column label="名称" prop="name" min-width="220" />
+                        <el-table-column label="操作" align="center" fixed="right" width="60">
+                          <template #default="{ $index }">
+                            <el-button type="danger" @click="clickDeleteExpressPacking(props.$index, $index)" text>删除</el-button>
+                          </template>
+                        </el-table-column>
+                      </el-table>
+                    </el-col>
+                  </el-row>
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column label="规格图" align="center" width="100">
               <template #default="{ row, $index }">
                 <el-form-item :prop="'skuSpecList.' + $index + '.specImgUrl'">
@@ -172,11 +248,25 @@
     </div>
 
     <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
-      <SelectBOM :selectStatus="true" :bomClassifyId="1" @selectBOM="selectBOM"></SelectBOM>
+      <SelectBOM :selectStatus="true" :bomClassifyIdList="[1]" @selectBOM="selectBOM"></SelectBOM>
       <template #footer>
         <el-button @click="openBOM = false" size="large">关 闭</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="选择包材配件" v-if="openPackingFittings" v-model="openPackingFittings" width="84%">
+      <SelectBOM :selectStatus="true" :bomClassifyIdList="[2, 3]" @selectBOM="selectPackingFittings"></SelectBOM>
+      <template #footer>
+        <el-button @click="openPackingFittings = false" size="large">关 闭</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="选择快递包装" v-if="openExpressPacking" v-model="openExpressPacking" width="84%">
+      <SelectBOM :selectStatus="true" :expressStatus="true" @selectBOM="selectExpressPacking"></SelectBOM>
+      <template #footer>
+        <el-button @click="openExpressPacking = false" size="large">关 闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -337,6 +427,7 @@ const rulesSpec = ref({
   width: [{ required: true, message: "请输入宽", trigger: "blur" }],
   height: [{ required: true, message: "请输入高", trigger: "blur" }],
   netWeight: [{ required: true, message: "请输入净重", trigger: "blur" }],
+  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
 });
 const classifyList = ref([]);
 const getBomClassify = () => {
@@ -495,6 +586,67 @@ const clickRemoveBOM = (index) => {
   formData.data.skuSpecList[index].bomSpecId = "";
   formData.data.skuSpecList[index].bomSpecName = "";
 };
+const openPackingFittings = ref(false);
+const clickPackingFittings = (item) => {
+  console.log(item);
+  rowIndex.value = item.$index;
+  openPackingFittings.value = true;
+};
+const openExpressPacking = ref(false);
+const clickExpressPacking = (item) => {
+  rowIndex.value = item.$index;
+  openExpressPacking.value = true;
+};
+const selectPackingFittings = (data) => {
+  if (formData.data.skuSpecList[rowIndex.value].packagingMaterialList && formData.data.skuSpecList[rowIndex.value].packagingMaterialList.length > 0) {
+    let list = formData.data.skuSpecList[rowIndex.value].packagingMaterialList.filter((item) => item.bomSpecId === data.id);
+    if (list && list.length > 0) {
+      return ElMessage("包材配件已添加");
+    }
+    formData.data.skuSpecList[rowIndex.value].packagingMaterialList.push({
+      bomSpecId: data.id,
+      quantity: undefined,
+      name: data.name,
+    });
+  } else {
+    formData.data.skuSpecList[rowIndex.value].packagingMaterialList = [
+      {
+        bomSpecId: data.id,
+        quantity: undefined,
+        name: data.name,
+      },
+    ];
+  }
+  ElMessage({ message: "添加成功", type: "success" });
+};
+const selectExpressPacking = (data) => {
+  if (formData.data.skuSpecList[rowIndex.value].expressPackingList && formData.data.skuSpecList[rowIndex.value].expressPackingList.length > 0) {
+    let list = formData.data.skuSpecList[rowIndex.value].expressPackingList.filter((item) => item.bomSpecId === data.id);
+    if (list && list.length > 0) {
+      return ElMessage("快递包材已添加");
+    }
+    formData.data.skuSpecList[rowIndex.value].expressPackingList.push({
+      bomSpecId: data.id,
+      quantity: undefined,
+      name: data.name,
+    });
+  } else {
+    formData.data.skuSpecList[rowIndex.value].expressPackingList = [
+      {
+        bomSpecId: data.id,
+        quantity: undefined,
+        name: data.name,
+      },
+    ];
+  }
+  ElMessage({ message: "添加成功", type: "success" });
+};
+const clickDeletePackingFittings = (index, indexTwo) => {
+  formData.data.skuSpecList[index].packagingMaterialList.splice(indexTwo, 1);
+};
+const clickDeleteExpressPacking = (index, indexTwo) => {
+  formData.data.skuSpecList[index].expressPackingList.splice(indexTwo, 1);
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="10">
-      <el-col :span="4">
+      <el-col :span="4" v-if="!props.expressStatus">
         <el-card :class="props.selectStatus ? 'select-card' : 'box-card'">
           <el-input v-model="filterTree" placeholder="请输入BOM分类" />
           <el-tree
@@ -16,7 +16,7 @@
             @node-click="handleNodeClick" />
         </el-card>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="props.expressStatus ? 24 : 20">
         <el-card :class="props.selectStatus ? 'select-card' : 'box-card'">
           <byTable
             :source="sourceList.data"
@@ -114,7 +114,8 @@ import MakeBOM from "@/components/makeBOM/index";
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   selectStatus: Boolean,
-  bomClassifyId: Number,
+  bomClassifyIdList: Array,
+  expressStatus: Boolean,
 });
 const filterTree = ref("");
 const treeCategory = ref(null);
@@ -122,8 +123,8 @@ const categoryTreeData = ref([]);
 const getTreeList = () => {
   proxy.post("/bomClassify/tree", {}).then((res) => {
     if (res && res.length > 0) {
-      if (props.bomClassifyId) {
-        categoryTreeData.value = res.filter((item) => item.id === props.bomClassifyId);
+      if (props.bomClassifyIdList) {
+        categoryTreeData.value = res.filter((item) => props.bomClassifyIdList.includes(item.id));
       } else {
         categoryTreeData.value = res;
       }
@@ -155,6 +156,7 @@ const sourceList = ref({
     reverseGrain: "",
     colour: "",
     bomClassifyId: "",
+    bomClassifyIdList: [],
   },
 });
 const loading = ref(false);
@@ -333,8 +335,11 @@ const getList = async (req, status) => {
   } else {
     sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   }
-  if (!sourceList.value.pagination.bomClassifyId && props.bomClassifyId) {
-    sourceList.value.pagination.bomClassifyId = props.bomClassifyId;
+  if (props.bomClassifyIdList) {
+    sourceList.value.pagination.bomClassifyIdList = props.bomClassifyIdList;
+  }
+  if (props.expressStatus) {
+    sourceList.value.pagination.bomClassifyId = "1682221528948760578";
   }
   loading.value = true;
   proxy.post("/bom/page", sourceList.value.pagination).then((res) => {

src/views/group/order/management/add.vue

@@ -177,7 +177,7 @@
     </el-card>
     
     <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
-      <SelectBOM :selectStatus="true" :bomClassifyId="1" @selectBOM="selectBOM"></SelectBOM>
+      <!-- <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM> -->
       <template #footer>
         <el-button @click="openBOM = false" size="large">关 闭</el-button>
       </template>
@@ -189,7 +189,7 @@
 import byForm from "@/components/byForm/index";
 import { ElMessage } from "element-plus";
 import Editor from "@/components/Editor/index.vue";
-import SelectBOM from "@/views/group/BOM/management/index";
+// import SelectBOM from "@/views/group/BOM/management/index";
 
 const { proxy } = getCurrentInstance();
 const emit = defineEmits(["clickCancel"]);