集团SKU编辑包材配件

src/components/makeGroupProduct/index.vue

@@ -19,8 +19,86 @@
           <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-column label="规格图" align="center" width="100">
+          <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"
+                                :precision="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"
+                                :precision="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="80">
               <template #default="{ row, $index }">
                 <el-form-item :prop="'skuSpecList.' + $index + '.specImgUrl'">
                   <el-upload
@@ -40,28 +118,15 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="设计图" align="center" width="100">
+            <el-table-column label="设计图" align="center" width="80">
               <template #default="{ row, $index }">
                 <el-form-item :prop="'skuSpecList.' + $index + '.designImgUrl'">
-                  <!-- <el-upload
-                    class="avatar-uploader"
-                    action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
-                    :data="uploadDesignData"
-                    :show-file-list="false"
-                    :on-success="
-                      (response, uploadFile) => {
-                        return handleDesignSuccess(uploadFile, $index);
-                      }
-                    "
-                    :before-upload="uploadDesignFile"> -->
                   <el-image
                     v-if="row.designImgUrl"
                     :src="row.designImgUrl"
                     fit="scale-down"
                     style="width: 50px; height: 50px; cursor: pointer"
                     @click="openFile(row.designImgUrl)" />
-                  <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-                  </el-upload> -->
                 </el-form-item>
               </template>
             </el-table-column>
@@ -79,10 +144,15 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="图稿文件" align="center" width="160">
+            <el-table-column label="图稿文件" width="200">
               <template #default="{ row, $index }">
                 <el-button type="primary" @click="clickDrawingFile($index)" v-if="!row.sharedFolder" text>选择</el-button>
-                <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickDrawingFile($index)" v-else>{{ row.sharedFolder }}</a>
+                <a
+                  style="color: #409eff; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
+                  @click="clickDrawingFile($index)"
+                  v-else
+                  >{{ row.sharedFolder }}</a
+                >
               </template>
             </el-table-column>
             <el-table-column label="加工版面" width="140">
@@ -94,7 +164,7 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="尺寸（长宽高，cm）" align="center" width="280">
+            <el-table-column label="尺寸（长宽高，cm）" align="center" width="260">
               <template #default="{ row, $index }">
                 <el-row>
                   <el-col :span="8">
@@ -150,7 +220,7 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="BOM" align="left" width="250">
+            <el-table-column label="BOM" align="left" width="160">
               <template #default="{ row, $index }">
                 <el-button
                   v-if="!row.bomSpecId"
@@ -162,7 +232,7 @@
                 </el-button>
                 <div style="width: 100%; display: flex; align-items: center" v-else>
                   <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemoveBOM($index)"><Remove /></el-icon>
-                  <span>{{ row.bomSpecName }}</span>
+                  <span>{{ row.bomSpecCode }}</span>
                 </div>
               </template>
             </el-table-column>
@@ -212,7 +282,21 @@
       </template>
     </el-dialog>
 
-    <el-dialog title="选择图稿文件" v-if="openDrawingFile" v-model="openDrawingFile" width="70%">
+    <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>
+
+    <el-dialog title="选择图稿" v-if="openDrawingFile" v-model="openDrawingFile" width="70%">
       <SelectPicture @selectPic="selectPic"></SelectPicture>
       <template #footer>
         <el-button @click="openDrawingFile = false" size="large">关 闭</el-button>
@@ -378,6 +462,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 = () => {
@@ -441,18 +526,6 @@ const uploadFile = async (file) => {
 const handleSuccess = (uploadFile, index) => {
   formData.data.skuSpecList[index].specImgUrl = uploadFile.raw.fileUrl;
 };
-// const uploadDesignData = ref({});
-// const uploadDesignFile = async (file) => {
-//   const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
-//   uploadDesignData.value = res.uploadBody;
-//   file.id = res.id;
-//   file.fileName = res.fileName;
-//   file.fileUrl = res.fileUrl;
-//   return true;
-// };
-// const handleDesignSuccess = (uploadFile, index) => {
-//   formData.data.skuSpecList[index].designImgUrl = uploadFile.raw.fileUrl;
-// };
 const clickDelete = (index) => {
   formData.data.skuSpecList.splice(index, 1);
 };
@@ -527,7 +600,7 @@ const handleOpen = (index) => {
 const selectBOM = (item) => {
   if (item.id) {
     formData.data.skuSpecList[rowIndex.value].bomSpecId = item.id;
-    formData.data.skuSpecList[rowIndex.value].bomSpecName = item.name;
+    formData.data.skuSpecList[rowIndex.value].bomSpecCode = item.code;
     formData.data.skuSpecList[rowIndex.value].length = item.length;
     formData.data.skuSpecList[rowIndex.value].width = item.width;
     formData.data.skuSpecList[rowIndex.value].height = item.height;
@@ -540,6 +613,66 @@ const clickRemoveBOM = (index) => {
   formData.data.skuSpecList[index].bomSpecId = "";
   formData.data.skuSpecList[index].bomSpecName = "";
 };
+const openPackingFittings = ref(false);
+const clickPackingFittings = (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: 1,
+      name: data.name,
+    });
+  } else {
+    formData.data.skuSpecList[rowIndex.value].packagingMaterialList = [
+      {
+        bomSpecId: data.id,
+        quantity: 1,
+        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: 1,
+      name: data.name,
+    });
+  } else {
+    formData.data.skuSpecList[rowIndex.value].expressPackingList = [
+      {
+        bomSpecId: data.id,
+        quantity: 1,
+        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);
+};
 const drawingFileIndex = ref(0);
 const openDrawingFile = ref(false);
 const clickDrawingFile = (index) => {