sd-vue/src/components/MakeProduct/groupSKU/ProductMaterial.vue

<template>
  <div style="padding: 20px 10px 0 0">
    <el-form ref="ruleForm" :model="form" :rules="formRules" label-width="100px">
      <el-form-item label="品牌:">
        <span>{{ form.brandName }}</span>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="材质:" prop="materialChinese">
            <el-input v-model="form.materialChinese" placeholder="请输入材质" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号:" prop="productModelChinese">
            <el-input v-model="form.productModelChinese" placeholder="请输入型号" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="规格:" required class="color">
        <el-button size="mini" type="primary" @click="handleAddColor">添加规格</el-button>
      </el-form-item>
      <div style="padding-left: 80px">
        <el-table
          :data="form.colors"
          :cell-style="{ padding: '0' }"
          :row-style="{ height: '35px' }"
          v-loading="loading"
          header-row-class-name="tableHeader"
          :cell-class-name="cellClassName"
        >
          <el-table-column type="expand" v-if="form.id">
            <template slot-scope="props">
              <div style="padding: 8px 20px 0px">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div style="display: flex; margin-bottom: 10px">
                      <el-button size="mini" type="primary" @click="handleOpenOftenDialog(props.$index)">选择常用包材</el-button>
                      <el-button size="mini" type="primary" style="background: #20b2aa; border-color: #20b2aa" @click="openSaveOftenDialog(props.$index)"
                        >保存常用包材</el-button
                      >
                      <el-button size="mini" type="primary" @click="handleOpenTwoBOM(props.$index)">选择包材配件</el-button>
                    </div>
                    <el-table :data="props.row.mountingsList" size="small" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }" border ref="table">
                      <el-table-column label="数量" width="160">
                        <template slot-scope="scope">
                          <el-form-item
                            label-width="0px"
                            :prop="'colors.' + props.$index + '.mountingsList.' + scope.$index + '.quantity'"
                            :rules="formRules.quantity"
                            class="input"
                          >
                            <el-input-number
                              style="width: 100%"
                              size="mini"
                              v-model="scope.row.quantity"
                              :controls="false"
                              :min="1"
                              :max="10000000"
                              :precision="0"
                            />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="名称" prop="bomColorName" min-width="150" />
                      <el-table-column label="操作" align="center" width="80" fixed="right">
                        <template slot-scope="scope">
                          <span
                            class="el-icon-remove-outline"
                            style="font-size: 16px; cursor: pointer; color: #d9001b"
                            @click="removeTwoBOM(props.$index, scope.$index)"
                          ></span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="12">
                    <div style="display: flex; margin-bottom: 10px">
                      <el-button size="mini" type="primary" @click="clickSelectBOM(props.$index)">选择快递包装</el-button>
                    </div>
                    <el-table :data="props.row.exPackList" size="small" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }" border ref="table">
                      <el-table-column label="数量" width="130">
                        <template slot-scope="scope">
                          <el-form-item
                            label-width="0px"
                            :prop="'colors.' + props.$index + '.exPackList.' + scope.$index + '.quantity'"
                            :rules="formRules.quantity"
                            class="input"
                          >
                            <el-input-number
                              style="width: 100%"
                              size="mini"
                              v-model="scope.row.quantity"
                              :controls="false"
                              :min="1"
                              :max="10000000"
                              :precision="0"
                            />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="名称" prop="bomColorName" min-width="140" />
                      <el-table-column label="操作" align="center" width="80" fixed="right">
                        <template slot-scope="scope">
                          <span
                            class="el-icon-remove-outline"
                            style="font-size: 16px; cursor: pointer; color: #d9001b"
                            @click="removePackingBOM(props.$index, scope.$index)"
                          ></span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="规格图" align="center" width="70">
            <template slot-scope="scope">
              <el-upload
                class="avatar-uploader"
                :action="action"
                :headers="{ 'Blade-Auth': token }"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="
                  (response, file, fileList) => {
                    return uploadSuccess(response, file, fileList, scope.$index)
                  }
                "
                :on-error="
                  (err, file, fileList) => {
                    return uploadError(err, file, fileList, scope.$index)
                  }
                "
                :on-progress="
                  (event, file, fileList) => {
                    return uploadProgress(event, file, fileList, scope.$index)
                  }
                "
                :disabled="scope.row.loading"
                accept=".jpg, .png, .jpeg"
              >
                <div v-loading="scope.row.loading">
                  <div v-if="scope.row.colorAccessory">
                    <img
                      v-if="!scope.row.colorAccessory.includes('https')"
                      :src="pathPrefix + scope.row.colorAccessory"
                      class="productImg"
                      style="width: 50px; height: 50px"
                    />
                    <img v-else class="productImg" style="width: 50px; height: 50px" :src="scope.row.colorAccessory" />
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column label="设计图" align="center" width="70">
            <template slot-scope="scope">
              <el-upload
                class="avatar-uploader"
                :action="action"
                :headers="{ 'Blade-Auth': token }"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="
                  (response, file, fileList) => {
                    return uploadSuccess1(response, file, fileList, scope.$index)
                  }
                "
                :on-error="
                  (err, file, fileList) => {
                    return uploadError1(err, file, fileList, scope.$index)
                  }
                "
                :on-progress="
                  (event, file, fileList) => {
                    return uploadProgress1(event, file, fileList, scope.$index)
                  }
                "
                :disabled="scope.row.loading1"
                accept=".jpg, .png, .jpeg"
              >
                <div v-loading="scope.row.loading1">
                  <div v-if="scope.row.designSketch">
                    <img
                      v-if="!scope.row.designSketch.includes('https')"
                      :src="pathPrefix + scope.row.designSketch"
                      class="productImg"
                      style="width: 50px; height: 50px"
                    />
                    <img v-else class="productImg" style="width: 50px; height: 50px" :src="scope.row.designSketch" />
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column label="品号" align="left" width="170">
            <template slot-scope="scope">
              <el-form-item :prop="'colors.' + scope.$index + '.specCode'" :rules="formRules.specCode" label-width="0px">
                <el-input v-model="scope.row.specCode" placeholder="请输入" size="small" style="width: 100%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="品名" align="left" min-width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'colors.' + scope.$index + '.nameChinese'" :rules="formRules.nameChinese" label-width="0px">
                <el-input v-model="scope.row.nameChinese" placeholder="请输入" size="small" style="width: 100%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="加工版面" align="left" width="140">
            <template slot-scope="scope">
              <el-form-item label-width="0px">
                <el-select v-model="scope.row.processingLayout" placeholder="请选择加工版面" size="small" style="width: 100%">
                  <el-option v-for="item in processingLayout" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="尺寸（长宽高，cm）" align="left" width="240">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="8">
                  <el-form-item :prop="'colors.' + scope.$index + '.length'" :rules="formRules.length" label-width="0px">
                    <el-input v-model="scope.row.length" placeholder="长" size="small" style="width: 70%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :prop="'colors.' + scope.$index + '.width'" :rules="formRules.width" label-width="0px">
                    <el-input v-model="scope.row.width" placeholder="宽" size="small" style="width: 70%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :prop="'colors.' + scope.$index + '.height'" :rules="formRules.height" label-width="0px">
                    <el-input v-model="scope.row.height" placeholder="高" size="small" style="width: 70%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="净重（g）" align="left" width="100">
            <template slot-scope="scope">
              <el-form-item :prop="'colors.' + scope.$index + '.weight'" :rules="formRules.weight" label-width="0px">
                <el-input v-model="scope.row.weight" placeholder="净重" size="small" style="width: 90%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="共享文件夹" align="left" width="100">
            <template slot-scope="scope">
              <span style="color: #027db4; cursor: pointer" @click="handleClickUpload(scope.row.artworkDocument)">上传ez3/dxf</span>
            </template>
          </el-table-column>
          <el-table-column label="BOM" align="left" width="250">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="!scope.row.bomList.length > 0"
                  type="primary"
                  size="mini"
                  @click="handleOpen(scope.$index)"
                  style="margin: 5px 0; background-color: #43b214; border-color: #43b214"
                  >选择BOM</el-button
                >
                <div v-for="(item, index) in scope.row.bomList" :key="index" style="display: flex; align-items: center">
                  <span class="el-icon-remove-outline" style="font-size: 16px; cursor: pointer" @click="removeBOM(index, scope.$index)"></span>
                  <img
                    v-if="item.magPath"
                    :src="pathPrefix + item.magPath"
                    class="productImg"
                    style="margin: 0px 10px; width: 36px; height: 36px"
                    @click="openFile(pathPrefix + item.magPath)"
                  />
                  <span>{{ item.bomColorName }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <!-- 选择BOM -->
    <el-dialog title="选择BOM" v-if="openBOM" top="50px" :visible.sync="openBOM" width="90%" append-to-body center>
      <SelectBOM @selectBOM="handleSelectBOM" ref="SelectBOM"></SelectBOM>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openBOM = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog v-if="openOftenDialog" :visible.sync="openOftenDialog" title="选择常用包材" width="60%" append-to-body>
      <el-form :model="composeQuery" ref="composeForm" :inline="true">
        <el-form-item label="组合名称" prop="name">
          <el-input placeholder="请输入" v-model="composeQuery.name" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="handleQuery" class="searchBtn">搜索</el-button>
          <el-button size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="compose-table">
        <el-table :data="oftenTableList" size="small" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }" header-row-class-name="tableHeader">
          <el-table-column type="expand" align="left" width="50">
            <template slot-scope="scope">
              <div>
                <el-table :data="scope.row.bomCombinationDetailsList" size="small" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }">
                  <el-table-column label="主图" width="80" align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.magPath">
                        <img class="img" :src="pathPrefix + scope.row.magPath" @click="openFile(pathPrefix + scope.row.magPath)" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="品号" prop="bomColorspecCode" />
                  <el-table-column label="品名" prop="bomColorName" />
                  <el-table-column label="数量" prop="singleQuantity" width="80" />
                  <el-table-column label="单价￥" prop="price" width="80" align="right" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="组合名称" prop="name" align="left" />
          <el-table-column label="操作" align="center" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="removeCompose(scope.row.id)">删 除</el-button>
              <el-button type="text" @click="selectCompose(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row style="text-align: center; margin-top: 30px">
        <el-button size="small" @click="openOftenDialog = false">取 消</el-button>
      </el-row>
    </el-dialog>

    <el-dialog v-if="saveOftenDialog" :visible.sync="saveOftenDialog" title="保存常用包材" width="40%" append-to-body>
      <el-form label-width="120px" :model="saveForm" ref="saveForm" :rules="rules">
        <el-form-item label="常用包材名称：" prop="name">
          <el-input v-model="saveForm.name" placeholder="请输入"> </el-input>
        </el-form-item>
      </el-form>
      <el-row style="text-align: center; margin-top: 30px">
        <el-button size="small" @click="saveCancel">取 消</el-button>
        <el-button size="small" type="primary" @click="saveOften">保 存</el-button>
      </el-row>
    </el-dialog>

    <!-- 选择包材配件-->
    <el-dialog title="选择包材配件" v-if="openTwoBOM" top="50px" :visible.sync="openTwoBOM" width="90%" append-to-body center>
      <SelectBOM @selectBOM="handleSelectTwoBOM" showType="parts" ref="SelectBOM"></SelectBOM>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openTwoBOM = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择快递包装" v-if="openSelect" :visible.sync="openSelect" width="80%" append-to-body>
      <SelectPackingBOM @handleSelect="handlePackingSelect"></SelectPackingBOM>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectBOM from '@/components/shengde/SelectBOM/index'
import SelectPackingBOM from '@/views/shengde/productionSystem/production/order/selectBOM'
import { addColor, removeColor, addFolder } from '@/api/product/customProductLibrary'
import { list, del, save } from '@/api/shengde/subsidiary/compose/index.js'

export default {
  name: 'ProductMaterial',
  props: {
    form: Object,
  },
  components: { SelectBOM, SelectPackingBOM },
  data() {
    const checkRewardKey = (rule, value, callback) => {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback(new Error('不能输入汉字'))
      } else {
        callback()
      }
    }
    return {
      action: process.env.VUE_APP_ACTION_URL,
      pathPrefix: process.env.VUE_APP_IMG_URL,
      filePrefix: process.env.VUE_APP_FILE_PREFIX,
      formRules: {
        productModel: [{ required: true, message: '请输入型号（EN）', trigger: 'blur' }],
        productLong: [{ required: true, message: '请输入长（CM）', trigger: 'blur' }],
        productWide: [{ required: true, message: '请输入宽（CM）', trigger: 'blur' }],
        productHigh: [{ required: true, message: '请输入高（CM）', trigger: 'blur' }],
        length: [{ required: true, message: '长', trigger: 'blur' }],
        width: [{ required: true, message: '宽', trigger: 'blur' }],
        height: [{ required: true, message: '高', trigger: 'blur' }],
        weight: [{ required: true, message: '净重（g）', trigger: 'blur' }],
        code: [{ required: true, message: '请输入', trigger: 'blur' }],
        specCode: [
          { required: true, message: '请输入品号', trigger: 'blur' },
          { validator: checkRewardKey, trigger: 'blur' },
        ],
        nameChinese: [{ required: true, message: '请输入品名', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      loading: false,
      openBOM: false,
      rowIndex: null,
      oftenTableList: [],
      selectIndex: undefined,
      openOftenDialog: false,
      saveOftenList: [],
      saveOftenDialog: false,
      openTwoBOM: false,
      composeQuery: {
        name: '',
        pageSize: 999,
        pageNum: 1,
      },
      saveForm: {
        name: '',
        bomCombinationDetailsList: [],
      },
      rules: {
        name: [{ required: true, message: '请输入常用包材配组合名称', trigger: 'blur' }],
      },
      openSelect: false,
      selectPackingIndex: 0,
      processingLayout: [],
    }
  },
  created() {
    this.processingLayout = this.dictData.filter((item) => item.code === 'processing_layout')[0].children
  },
  mounted() {},
  computed: mapGetters(['token', 'dictData']),
  methods: {
    handleAddColor() {
      this.loading = true
      addColor().then(
        (res) => {
          let path = res.data.data.replace(/\//g, '\\')
          this.form.colors.push({
            productId: '',
            nameChinese: '',
            colorAccessory: '',
            loading: false,
            artworkDocument: path,
            length: '',
            width: '',
            height: '',
            bomList: [],
            designSketch: '',
            mountingsList: [],
            exPackList: [],
          })
          this.loading = false
        },
        (err) => {
          console.log('addColor:' + err)
          this.loading = false
        }
      )
    },
    handleDelete(row, index) {
      this.$confirm('确认删除该行数据？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        let path = row.artworkDocument.replace(/\\/g, '/')
        removeColor(path).then(
          () => {
            this.form.colors.splice(index, 1)
            this.msgSuccess('删除成功!')
            this.loading = false
          },
          (err) => {
            console.log('removeColor:' + err)
            this.loading = false
          }
        )
      })
    },
    validateForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.colors.length > 0) {
            for (let j = 0; j < this.form.colors.length; j++) {
              const jele = this.form.colors[j]
              jele.artworkDocument = jele.artworkDocument.replace(/\\/g, '/')
            }
            flag = true
          } else this.msgInfo('请添加规格！')
        } else {
          flag = false
        }
      })
      return flag
    },
    beforeAvatarUpload(file) {
      let fileType = this.getFileType(file.name)
      if (['jpg', 'png', 'jpeg'].includes(fileType)) {
        const isLt5kb = file.size / 1024 < 500
        if (!isLt5kb) {
          this.$message.error('上传图片大小不能超过 500kb!')
        }
        return isLt5kb
      } else {
        this.msgInfo('请上传jpg，png，jpeg格式的文件')
        return false
      }
    },
    uploadSuccess(response, file, fileList, index) {
      this.form.colors[index].loading = false
      this.form.colors[index].colorAccessory = response.data.details.path
    },
    uploadError(response, file, fileList, index) {
      this.form.colors[index].loading = false
    },
    uploadProgress(event, file, fileList, index) {
      this.form.colors[index].loading = true
    },
    uploadSuccess1(response, file, fileList, index) {
      this.form.colors[index].loading1 = false
      this.form.colors[index].designSketch = response.data.details.path
      this.form.colors[index].designSketchName = response.data.details.realName
    },
    uploadError1(response, file, fileList, index) {
      this.form.colors[index].loading1 = false
    },
    uploadProgress1(event, file, fileList, index) {
      this.form.colors[index].loading1 = true
    },
    openFile(path) {
      window.open(path)
    },
    handleOpen(index) {
      this.rowIndex = index
      this.openBOM = true
    },
    handleSelectBOM(row, index) {
      // 多个bom写法
      // let data = row.bomColors[index]
      // this.form.colors[this.rowIndex].bomList.push(data)
      // this.msgSuccess('选择成功!')
      // this.openBOM=false

      //单个bom写法
      let arr = []
      let data = row.bomColors[index]
      let submitData = {
        id: row.id,
        bomColorId: data.id,
        bomColorName: data.nameChinese,
        magPath: data.magPath,
      }
      arr.push(submitData)
      this.form.colors[this.rowIndex].bomList = arr
      this.msgSuccess('选择成功!')
      this.openBOM = false
    },
    removeBOM(index, parentIndex) {
      this.$confirm('确认删除该BOM？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.form.colors[parentIndex].bomList.splice(index, 1)
          this.msgSuccess('删除成功!')
        })
        .catch(() => {})
    },
    handleClickUpload(item) {
      let path = JSON.parse(JSON.stringify(item)).replace(/\\/g, '/')
      addFolder(path).then(
        () => {
          let a = document.createElement('a')
          a.href = 'printer://' + (this.filePrefix + path).replace(/\//g, '/') + '/'
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        },
        (err) => {
          console.log('addFolder:' + err)
        }
      )
    },
    removeTwoBOM(numOne, numTwo) {
      this.$confirm('确认删除该行包材配件？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.form.colors[numOne].mountingsList.splice(numTwo, 1)
        this.msgSuccess('删除成功!')
      })
    },
    handleOpenOftenDialog(index) {
      this.handleQuery()
      this.selectIndex = index
      this.openOftenDialog = true
    },
    openSaveOftenDialog(index) {
      this.saveOftenList = this.form.colors[index].mountingsList
      this.saveOftenDialog = true
    },
    handleOpenTwoBOM(index) {
      this.selectIndex = index
      this.openTwoBOM = true
    },
    handleQuery() {
      list({ name: '', pageSize: 9999, pageNum: 1 }).then((res) => {
        this.oftenTableList = res.data.data
      })
    },
    resetQuery() {
      this.resetForm('composeForm')
      this.handleQuery()
    },
    removeCompose(id) {
      this.$confirm('是否确认删除此条包材组合？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        del({ id }).then(() => {
          this.msgSuccess('删除成功！')
          this.handleQuery()
        })
      })
    },
    selectCompose(row) {
      const list = row.bomCombinationDetailsList
      let arr = list.map((item) => {
        return {
          bomColorName: item.bomColorName,
          bomColorId: item.bomColorId,
          quantity: Number(item.singleQuantity),
          id: item.bomId,
        }
      })
      this.form.colors[this.selectIndex].mountingsList = arr
      this.msgSuccess('选择完成')
    },
    saveCancel() {
      this.saveOftenDialog = false
      this.saveForm = {
        name: '',
        bomCombinationDetailsList: [],
      }
    },
    saveOften() {
      this.$refs['saveForm'].validate((valid) => {
        if (valid) {
          let arr = this.saveOftenList.map((item) => ({ bomColorId: item.bomColorId, singleQuantity: item.singleQuantity, price: item.price }))
          this.saveForm.bomCombinationDetailsList = arr
          save(this.saveForm).then(() => {
            this.msgSuccess('保存成功！')
            this.saveCancel()
          })
        }
      })
    },
    handleSelectTwoBOM(data, index) {
      let list = this.form.colors[this.selectIndex].mountingsList.filter((item) => item.categoryId === data.categoryId)
      if (list && list.length > 0) {
        return this.msgInfo('该类型包材配件已添加')
      }
      let row = data.bomColors[index]
      let item = {
        bomColorName: row.nameChinese,
        id: data.id,
        bomColorId: row.id,
        categoryId: data.categoryId,
        quantity: '',
      }
      this.form.colors[this.selectIndex].mountingsList.push(item)
      this.msgSuccess('添加完成')
    },
    clickSelectBOM(index) {
      this.selectPackingIndex = index
      this.openSelect = true
    },
    handlePackingSelect(row, rowParent) {
      let data = this.form.colors[this.selectPackingIndex].exPackList.filter((item) => item.bomColorId === row.id)
      if (data && data.length > 0) {
        return this.msgInfo('快递包装已选择')
      }
      this.form.colors[this.selectPackingIndex].exPackList.push({
        id: rowParent.id,
        bomColorId: row.id,
        quantity: undefined,
        bomColorName: row.nameChinese,
      })
      this.msgSuccess('选择完成')
    },
    removePackingBOM(index, indexTwo) {
      this.form.colors[index].exPackList.splice(indexTwo, 1)
    },
    cellClassName({ row, columnIndex }) {
      if (columnIndex === 0) {
        if (!row.id) {
          return 'hideClass'
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input-number {
    .el-input__inner {
      text-align: left !important;
    }
  }
  .el-button {
    border-radius: 0;
  }
  .tableHeader th {
    background-color: #edf0f5;
    height: 35px;
    padding: 0;
  }
  .color .el-form-item__content,
  .color .el-form-item__label {
    line-height: 32px !important;
  }
  .el-form-item__error {
    top: 90%;
  }
  .hideClass {
    .el-table__expand-icon {
      display: none;
    }
  }
}
.searchBtn {
  background: #20b2aa;
  color: #fff;
  border: 1px solid #20b2aa;
}
.productImg {
  width: 60px;
  height: 60px;
  cursor: pointer;
  object-fit: contain;
  vertical-align: middle;
  border: none;
}
.avatar-uploader-icon {
  margin: 4px 0;
  font-size: 28px;
  color: rgb(140, 147, 157);
  border: 1px dashed #d9d9d9;
  background-color: #fbfdff;
  border-radius: 2px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  &:hover {
    border-color: #409eff;
  }
}
</style>