sd-new-vue/src/components/makeGroupProduct/index.vue

<template>
  <div style="height: calc(100vh - 114px); overflow-y: auto; overflow-x: hidden">
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
      <template #skuClassifyId>
        <div style="width: 100%">
          <el-cascader
            v-model="formData.data.skuClassifyId"
            :options="classifyList"
            :props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
            clearable
            style="width: 100%" />
        </div>
      </template>
      <template #brand>
        <div style="width: 100%">{{ formData.data.brand }}</div>
      </template>
      <template #specification>
        <div style="width: 100%">
          <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"
            :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" size="small" @click="clickSelectCommonPacking(props.$index)">选择常用包装</el-button>
                        <el-button type="success" size="small" @click="clickSaveCommonPacking(props)">保存常用包装</el-button>
                        <el-button type="primary" size="small" @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" size="small" @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
                    class="avatar-uploader"
                    action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                    :data="uploadData"
                    :show-file-list="false"
                    :on-success="
                      (response, uploadFile) => {
                        return handleSuccess(uploadFile, $index);
                      }
                    "
                    :before-upload="uploadFile">
                    <el-image v-if="row.specImgUrl" :src="row.specImgUrl" fit="scale-down" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="设计图" align="center" width="80">
              <template #default="{ row, $index }">
                <el-form-item :prop="'skuSpecList.' + $index + '.designImgUrl'">
                  <el-image
                    v-if="row.designImgUrl"
                    :src="row.designImgUrl"
                    fit="scale-down"
                    style="width: 50px; height: 50px; cursor: pointer"
                    @click="openFile(row.designImgUrl)" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="品名" min-width="220">
              <template #default="{ row, $index }">
                <el-form-item :prop="'skuSpecList.' + $index + '.name'" :rules="rulesSpec.name" :inline-message="true" style="width: 100%">
                  <el-input v-model="row.name" placeholder="请输入品名" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="品号" width="160">
              <template #default="{ row, $index }">
                <el-form-item :prop="'skuSpecList.' + $index + '.code'" :rules="rulesSpec.code" :inline-message="true" style="width: 100%">
                  <el-input v-model="row.code" placeholder="请输入品号" />
                </el-form-item>
              </template>
            </el-table-column>
            <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; 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">
              <template #default="{ row, $index }">
                <el-form-item :prop="'skuSpecList.' + $index + '.machinedPanel'" style="width: 100%">
                  <el-select v-model="row.machinedPanel" placeholder="加工版面" clearable>
                    <el-option v-for="item in useUserStore().allDict['processing_layout']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="尺寸（长宽高，cm）" align="center" width="260">
              <template #default="{ row, $index }">
                <el-row>
                  <el-col :span="8">
                    <el-form-item :prop="'skuSpecList.' + $index + '.length'" :rules="rulesSpec.length" :inline-message="true" style="width: 100%">
                      <el-input-number
                        onmousewheel="return false;"
                        v-model="row.length"
                        placeholder="长"
                        style="width: 100%"
                        :controls="false"
                        :min="0"
                        :precision="2" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item :prop="'skuSpecList.' + $index + '.width'" :rules="rulesSpec.width" :inline-message="true" style="width: 100%">
                      <el-input-number
                        onmousewheel="return false;"
                        v-model="row.width"
                        placeholder="宽"
                        style="width: 100%"
                        :controls="false"
                        :min="0"
                        :precision="2" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item :prop="'skuSpecList.' + $index + '.height'" :rules="rulesSpec.height" :inline-message="true" style="width: 100%">
                      <el-input-number
                        onmousewheel="return false;"
                        v-model="row.height"
                        placeholder="高"
                        style="width: 100%"
                        :controls="false"
                        :min="0"
                        :precision="2" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="净重(g)" width="120">
              <template #default="{ row, $index }">
                <el-form-item :prop="'skuSpecList.' + $index + '.netWeight'" :rules="rulesSpec.netWeight" :inline-message="true" style="width: 100%">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.netWeight"
                    placeholder="净重"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="2" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="BOM" align="left" width="160">
              <template #default="{ row, $index }">
                <el-button
                  v-if="!row.bomSpecId"
                  type="primary"
                  size="small"
                  @click="handleOpen($index)"
                  style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
                  选择BOM
                </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.bomSpecCode }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="60">
              <template #default="{ $index }">
                <el-button type="danger" @click="clickDelete($index)" text>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template #mainImgUrl>
        <div style="width: 100%">
          <div style="color: #aaaaaa">图片不超过5M,支持JPEG、JPG、PNG格式;</div>
          <div style="color: #aaaaaa">建议主图大于640*640,主题鲜明、图片清晰、提升买家满意度;</div>
          <el-upload
            class="avatar-uploader-main"
            action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
            :data="uploadMainData"
            :show-file-list="false"
            :on-success="handleMainSuccess"
            :before-upload="uploadMainFile">
            <el-image v-if="formData.data.mainImgUrl" :src="formData.data.mainImgUrl" fit="scale-down" class="avatar" />
            <el-icon v-else class="avatar-uploader-main-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      </template>
      <template #detailText>
        <div style="width: 100%">
          <div v-if="props.detailStatus">
            <div v-html="getStyle(formData.data.detailText)"></div>
          </div>
          <Editor v-else :value="formData.data.detailText" @updateValue="updateValue" ref="editor" />
        </div>
      </template>
    </byForm>
    <div style="text-align: center; margin: 10px">
      <el-button v-if="props.detailStatus" @click="clickCancel()" size="large">关 闭</el-button>
      <el-button v-if="!props.detailStatus" @click="clickCancel()" size="large">取 消</el-button>
      <el-button type="primary" @click="submitForm()" v-if="!props.detailStatus" size="large" v-preReClick>确 定</el-button>
    </div>

    <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
      <SelectBOM :selectStatus="true" @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>

    <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>
      </template>
    </el-dialog>

    <el-dialog title="保存常用组合" v-if="openAssembly" v-model="openAssembly" width="500">
      <el-form :model="formShippingPackage.data" :rules="rulesAssembly" ref="assembly">
        <el-form-item label="组合名称" prop="name">
          <el-input v-model="formShippingPackage.data.name" placeholder="请输入组合名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="openAssembly = false">关 闭</el-button>
        <el-button type="primary" @click="submitAssembly" v-preReClick>保 存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="选择常用组合" v-if="openSelectAssembly" v-model="openSelectAssembly" width="80%">
      <CommonPacking @selectAssembly="selectAssembly"></CommonPacking>
      <template #footer>
        <el-button @click="openSelectAssembly = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { ElMessage } from "element-plus";
import Editor from "/src/components/Editor/index.vue";
import SelectBOM from "/src/views/group/BOM/management/index";
import SelectPicture from "/src/components/select-picture/index.vue";
import CommonPacking from "/src/components/makeProduct/commonPacking/index.vue";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["clickCancel"]);
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    brand: "胜德科技",
    type: 1,
    source: 1,
    craftProductionLineId: "1",
    mainImgUrl: "",
    detailText: "",
    skuSpecList: [
      {
        specImgUrl: "",
        designImgUrl: "",
        name: "",
        code: "",
        barCode: "",
        machinedPanel: "",
        length: undefined,
        width: undefined,
        height: undefined,
        netWeight: undefined,
        sharedFolder: "",
        artworkLibraryId: "0",
        bomSpecId: "",
        remark: "",
        packagingMaterialList: [],
        expressPackingList: [],
      },
    ],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "基本信息",
      label: "",
    },
    {
      type: "slot",
      prop: "skuClassifyId",
      slotName: "skuClassifyId",
      label: "类目",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "barCode",
      label: "条码",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "groupItemNumber",
      label: "群组品号",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "code",
      label: "编码",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "name",
      label: "名称",
      itemType: "text",
    },
    {
      type: "title",
      title: "材质特征",
      label: "",
    },
    {
      type: "slot",
      slotName: "brand",
      label: "品牌",
    },
    {
      type: "input",
      prop: "modelNumber",
      label: "型号",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "material",
      label: "材质",
      itemType: "text",
      itemWidth: 50,
    },
    {
      type: "slot",
      slotName: "specification",
      label: "规格",
    },
    {
      type: "title",
      title: "工艺路线",
      label: "",
    },
    {
      type: "select",
      label: "工艺路线",
      prop: "craftProductionLineId",
      data: [],
      itemWidth: 50,
    },
    {
      type: "title",
      title: "图片介绍",
      label: "",
    },
    {
      type: "slot",
      slotName: "mainImgUrl",
      label: "主图",
    },
    {
      type: "slot",
      slotName: "detailText",
      label: "详情描述",
    },
  ];
});
const rules = ref({
  groupItemNumber: [{ required: true, message: "请输入群组品号", trigger: "blur" }],
  code: [{ required: true, message: "请输入编码", trigger: "blur" }],
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
const rulesSpec = ref({
  code: [{ required: true, message: "请输入品号", trigger: "blur" }],
  name: [{ required: true, message: "请输入品名", trigger: "blur" }],
  length: [{ required: true, message: "请输入长", trigger: "blur" }],
  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 = () => {
  proxy.post("/skuClassify/tree", {}).then((res) => {
    classifyList.value = res;
  });
};
getBomClassify();
const addSpecification = () => {
  if (!props.detailStatus) {
    if (formData.data.skuSpecList && formData.data.skuSpecList.length > 0) {
      formData.data.skuSpecList.push({
        specImgUrl: "",
        designImgUrl: "",
        name: "",
        code: "",
        barCode: "",
        machinedPanel: "",
        length: undefined,
        width: undefined,
        height: undefined,
        netWeight: undefined,
        sharedFolder: "",
        artworkLibraryId: "0",
        bomSpecId: "",
        remark: "",
        packagingMaterialList: [],
        expressPackingList: [],
      });
    } else {
      formData.data.skuSpecList = [
        {
          specImgUrl: "",
          designImgUrl: "",
          name: "",
          code: "",
          barCode: "",
          machinedPanel: "",
          length: undefined,
          width: undefined,
          height: undefined,
          netWeight: undefined,
          sharedFolder: "",
        artworkLibraryId: "0",
          bomSpecId: "",
          remark: "",
          packagingMaterialList: [],
          expressPackingList: [],
        },
      ];
    }
  }
};
const uploadData = ref({});
const uploadFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleSuccess = (uploadFile, index) => {
  formData.data.skuSpecList[index].specImgUrl = uploadFile.raw.fileUrl;
};
const clickDelete = (index) => {
  formData.data.skuSpecList.splice(index, 1);
};
const editor = ref(null);
const updateValue = (val) => {
  formData.data.detailText = val;
};
const uploadMainData = ref({});
const uploadMainFile = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadMainData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleMainSuccess = (response, uploadFile) => {
  formData.data.mainImgUrl = uploadFile.raw.fileUrl;
};
const submitForm = () => {
  submit.value.handleSubmit(() => {
    if (formData.data.skuSpecList && formData.data.skuSpecList.length > 0) {
      let type = "add";
      if (formData.data.id) {
        type = "edit";
      }
      proxy.post("/sku/" + type, formData.data).then(() => {
        ElMessage({
          message: type == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        emit("clickCancel", true);
      });
    } else {
      return ElMessage("请添加规格");
    }
  });
};
const clickCancel = () => {
  emit("clickCancel", false);
};
const props = defineProps({
  rowData: Object,
  detailStatus: Boolean,
});
onMounted(() => {
  formOption.disabled = props.detailStatus;
  if (props.rowData && props.rowData.id) {
    proxy.post("/sku/detail", { id: props.rowData.id }).then((res) => {
      for (var text in res) {
        formData.data[text] = res[text];
      }
      if (!props.detailStatus) {
        editor.value.changeHtml(formData.data.detailText);
      }
    });
  }
});
const getStyle = (text) => {
  if (text) {
    return text.replace(/\n|\r\n/g, "<br>");
  } else {
    return "";
  }
};
const rowIndex = ref(null);
const openBOM = ref(false);
const handleOpen = (index) => {
  rowIndex.value = index;
  openBOM.value = true;
};
const selectBOM = (item) => {
  if (item.id) {
    formData.data.skuSpecList[rowIndex.value].bomSpecId = item.id;
    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;
    formData.data.skuSpecList[rowIndex.value].netWeight = item.netWeight;
    ElMessage({ message: "选择完成", type: "success" });
    openBOM.value = false;
    proxy.post("/skuDefaultPackageSpec/getPackList", { skuId: formData.data.id, spec: item.length + "*" + item.width + "*" + item.height }).then((res) => {
      if (res && res.length > 0) {
        formData.data.skuSpecList[rowIndex.value].packagingMaterialList = res.map((val) => {
          return {
            bomSpecId: val.bomSpecId,
            quantity: 1,
            name: val.bomSpecName,
          };
        });
      } else {
        formData.data.skuSpecList[rowIndex.value].packagingMaterialList = [];
      }
      ElMessage({ message: "根据规格尺寸替换包材配件完成", type: "success" });
    });
  }
};
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) => {
  drawingFileIndex.value = index;
  openDrawingFile.value = true;
};
const selectPic = (row) => {
  formData.data.skuSpecList[drawingFileIndex.value].sharedFolder = row.fileUrl;
  formData.data.skuSpecList[drawingFileIndex.value].designImgUrl = row.imgUrl;
  formData.data.skuSpecList[drawingFileIndex.value].artworkLibraryId = row.id;
  ElMessage({ message: "选择完成", type: "success" });
  openDrawingFile.value = false;
};
const openFile = (path) => {
  window.open(path);
};
const packingIndex = ref(0);
const openSelectAssembly = ref(false);
const clickSelectCommonPacking = (index) => {
  packingIndex.value = index;
  openSelectAssembly.value = true;
};
const selectAssembly = (item) => {
  if (item.packagingMaterialList && item.packagingMaterialList.length > 0) {
    formData.data.skuSpecList[packingIndex.value].packagingMaterialList = item.packagingMaterialList.map((row) => {
      return {
        bomSpecId: row.bomSpecId,
        quantity: row.quantity,
        name: row.bomSpecName,
      };
    });
  } else {
    formData.data.skuSpecList[packingIndex.value].packagingMaterialList = [];
  }
  if (item.expressPackingList && item.expressPackingList.length > 0) {
    formData.data.skuSpecList[packingIndex.value].expressPackingList = item.expressPackingList.map((row) => {
      return {
        bomSpecId: row.bomSpecId,
        quantity: row.quantity,
        name: row.bomSpecName,
      };
    });
  } else {
    formData.data.skuSpecList[packingIndex.value].expressPackingList = [];
  }
  ElMessage({ message: "选择完成", type: "success" });
  openSelectAssembly.value = false;
};
const openAssembly = ref(false);
const rulesAssembly = ref({
  name: [{ required: true, message: "请输入组合名称", trigger: "blur" }],
});
const formShippingPackage = reactive({
  data: {
    name: "",
    commonPackingBomDetailList: [],
  },
});
const clickSaveCommonPacking = (item) => {
  formShippingPackage.data = {
    name: "",
    commonPackingBomDetailList: [],
  };
  if (item.row.packagingMaterialList && item.row.packagingMaterialList.length > 0) {
    formShippingPackage.data.commonPackingBomDetailList = formShippingPackage.data.commonPackingBomDetailList.concat(
      item.row.packagingMaterialList.map((row) => {
        return {
          bomSpecId: row.bomSpecId,
          quantity: row.quantity,
          type: 1,
        };
      })
    );
  }
  if (item.row.expressPackingList && item.row.expressPackingList.length > 0) {
    formShippingPackage.data.commonPackingBomDetailList = formShippingPackage.data.commonPackingBomDetailList.concat(
      item.row.expressPackingList.map((row) => {
        return {
          bomSpecId: row.bomSpecId,
          quantity: row.quantity,
          type: 2,
        };
      })
    );
  }
  if (formShippingPackage.data.commonPackingBomDetailList && formShippingPackage.data.commonPackingBomDetailList.length > 0) {
    for (let i = 0; i < formShippingPackage.data.commonPackingBomDetailList.length; i++) {
      const element = formShippingPackage.data.commonPackingBomDetailList[i];
      if (!element.quantity) {
        return ElMessage("请填写数量");
      }
    }
  } else {
    return ElMessage("请先添加包材配件和快递包装");
  }
  openAssembly.value = true;
};
const submitAssembly = () => {
  proxy.$refs.assembly.validate((valid) => {
    if (valid) {
      proxy.post("/commonPackingBom/add", formShippingPackage.data).then(() => {
        ElMessage({ message: "保存成功!", type: "success" });
        openAssembly.value = false;
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
  background-color: black;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.avatar-uploader-main .avatar {
  width: 148px;
  height: 148px;
  display: block;
  background-color: black;
}
.avatar-uploader-main .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader-main .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-main-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
</style>