order-ui-pc/src/views/goodStore/dealGoodsPool/addEdit.vue

<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="8vh"
    width="1040px"
    @close="closeModel"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-card>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-col :span="10" :offset="7">
            <div style="margin: -5px 0 10px 0">
              <el-steps
                :active="step"
                simple
                process-status="finish"
                finish-status="success"
              >
                <el-step
                  v-for="(item, index) in stepList"
                  :key="index"
                  :title="item"
                />
              </el-steps>
            </div>
          </el-col>
          <el-row :gutter="10" v-if="step === 0">
            <el-form
              :model="baseForm"
              status-icon
              :rules="baseRules"
              ref="baseForm"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-col :span="24">
                <el-form-item label="商品名称" prop="good_name">
                  <el-input
                    placeholder="请输入商品名称"
                    v-model="baseForm.good_name"
                    maxlength="100"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商联系人" prop="supplier">
                  <el-select
                    v-model="baseForm.supplier"
                    filterable
                    clearable
                    style="width: 100%"
                    placeholder="请选择供应商联系人"
                  >
                    <el-option
                      v-for="group in supplierOptions"
                      :key="group.id"
                      :label="group.name"
                      :value="group.id"
                    >
                      <span>{{ group.name }}</span
                      ><span class="fr">{{ group.company }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品单位" prop="unit">
                  <el-input
                    placeholder="请输入单位"
                    v-model="baseForm.unit"
                    maxlength="10"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品分类" prop="catid">
                  <el-cascader
                    v-model="baseForm.catid"
                    style="width: 100%"
                    filterable
                    placeholder="请选择商品分类"
                    clearable
                    :options="catOptions"
                    :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="商品品牌" prop="brandid">
                  <el-select
                    style="width: 100%"
                    v-model="baseForm.brandid"
                    clearable
                    placeholder="请选择商品品牌"
                  >
                    <el-option
                      v-for="item in brandidOptions"
                      :key="item.id"
                      :label="item.brand_name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="商品主图"
                  prop="image"
                  class="activity-upload"
                >
                  <div class="img-list-main clearfix">
                    <div
                      class="img-item"
                      v-for="(item, index) in baseForm.image"
                      :key="item + index"
                    >
                      <img :src="item" class="avatar" />
                      <i class="el-icon-close" @click="closeImg(index)"></i>
                    </div>
                    <div
                      class="btnupload"
                      v-if="baseForm.image.length < 5"
                      style="position: relative"
                    >
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <file-upload
                        class="Upload"
                        :accept="'.jpg,.png,.jpeg'"
                        :multiple="true"
                        :uploadcondition="beforeAvatarUpload"
                        @UploadErrorEvent="UploadErrorEvent"
                        @UploadSuccessEvent="UploadSuccessEvent"
                      ></file-upload>
                    </div>
                  </div>
                  <div class="txt-tips fl">
                    <p>
                      <span sty>大小：小于1M；</span><span>尺寸：100*100；</span
                      ><span>类型：jpg.png.jpeg</span>
                    </p>
                  </div>
                </el-form-item>
              </el-col>
            </el-form>

            <el-col :span="24" style="text-align: right">
              <el-tag type="warning" class="fl" style="margin-left: 100px"
                >更换商品分类，会影响规格与价格，请慎重修改</el-tag
              >
              <el-button type="primary" @click="baseSubmitForm"
                >下一步
              </el-button>
              <el-button @click="showModelThis = false">{{
                isDetail ? "关 闭" : "取 消"
              }}</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10" v-else>
            <el-col :span="24" style="max-height: 560px; overflow-y: scroll">
              <el-form
                :model="ruleForm"
                status-icon
                ref="ruleForm"
                label-width="60px"
                class="demo-dealGoodsPool-ruleForm"
              >
                <el-form-item label="规格" required>
                  <div class="mack-mian clearfix">
                    <div
                      class="mock-item-div clearfix"
                      v-for="(item, index) in mock"
                      :key="'specItem' + index"
                    >
                      <div class="mock-title clearfix">
                        <el-input
                          :size="size"
                          class="fr"
                          style="width: 250px"
                          maxlength="40"
                          placeholder="新增规格值，如红色"
                          v-model="item.value"
                        >
                          <el-button
                            slot="append"
                            @click="specinfoadd(item.spec_id, item.value)"
                            >提交</el-button
                          >
                        </el-input>
                        <span class="fl">{{ item.spec_name }}</span>
                      </div>
                      <div v-if="item.child && item.child.length > 0">
                        <el-checkbox-group
                          v-model="item.change"
                          @change="groupChange($event, index, item)"
                        >
                          <el-checkbox
                            v-for="(sub, i) in item.child"
                            :key="'sub' + i"
                            :label="sub.id"
                            >{{ sub.spec_value }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </div>
                      <div v-else style="padding: 0 0 12px 0">
                        <el-tag type="info">暂无规格值</el-tag>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <div class="tips-error">{{ ruleForm.spec }}</div>
                <el-form-item label="价格" required style="padding: 0 0 12px 0">
                  <div
                    class="ladder-table clearfix"
                    v-if="left && left.header && left && left.header.length > 0"
                  >
                    <div class="left" :style="{ width: leftS }">
                      <div class="ladder-header" v-if="left && left.header">
                        <ul class="header-spec clearfix">
                          <li
                            v-for="(h, hi) in left.header"
                            :key="'leftHeader' + hi"
                          >
                            <span>{{ h.spec_name }}</span>
                          </li>
                        </ul>
                      </div>
                      <div class="ladder-body" v-if="left.specList">
                        <ul
                          v-for="(item, index) in left.specList"
                          :key="'item' + index"
                        >
                          <li
                            class="clearfix"
                            v-for="(sub, subi) in item"
                            :key="'sub' + subi"
                          >
                            <span>
                              {{ sub.spec_value }}
                            </span>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="right" :style="{ paddingLeft: leftS }">
                      <div class="ladder-header" v-if="right && right.header">
                        <ul class="header-spec clearfix">
                          <li
                            v-for="(h, hi) in right.header"
                            :key="'rightHeader' + hi"
                          >
                            <div class="all">
                              <div class="title">
                                <span> 阶梯{{ hi + 1 }}</span>
                                <i
                                  class="el-icon-close"
                                  @click="closeImg(index)"
                                ></i>
                              </div>
                              <div class="main">
                                <span>{{ h.num }}</span>
                                <span>{{ h.price }}</span>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="ladder-body" v-if="right && right.specList">
                        <ul
                          v-for="(h, hi) in right.specList"
                          :key="'rightspec' + hi"
                        >
                          <li v-for="(s, si) in h" :key="'rightspecsi' + si">
                            <div
                              class="input-main"
                              v-for="(n, ni) in s.limit"
                              :key="'rightni' + ni"
                            >
                              <el-input-number
                                style="width: 50%"
                                v-model="n.num"
                                :step="1"
                                :min="0"
                                :max="99999999"
                                :precision="0"
                                placeholder="起订量"
                                step-strictly
                                :controls="false"
                              ></el-input-number>
                              <el-input-number
                                style="width: 50%"
                                v-model="n.price"
                                :step="0.01"
                                :min="0"
                                :max="99999999"
                                :precision="2"
                                step-strictly
                                placeholder="成本价"
                                :controls="false"
                              ></el-input-number>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <el-tag type="warning">请选择规格值</el-tag>
                  </div>
                </el-form-item>
                <div class="tips-error">{{ ruleForm.table }}</div>
              </el-form>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-button type="primary" @click="step--" v-if="!isDetail"
                >上一步
              </el-button>
              <el-button type="primary" @click="submitForm" v-if="!isDetail"
                >保 存
              </el-button>
              <el-button @click="showModelThis = false">{{
                isDetail ? "关 闭" : "取 消"
              }}</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/dealGoodsPool";

export default {
  name: "dealGoodsPool",
  props: ["showModel", "id", "isDetail"],
  data() {
    return {
      leftS: "0px",
      size: "small",
      mock: [],
      ladderNum: 5, //阶梯数
      left: {
        header: [],
        middle: [],
        specList: [],
      },
      right: {
        header: [],
        specList: [],
      },
      headLadder: {
        num: "起订量≥",
        price: "成本价",
      },

      catOptions: [],
      brandidOptions: [],
      supplierOptions: [],
      oldcatid: [],
      stepList: ["基础信息", "规格与价格"],
      step: 0,
      loading: false,
      title: "添加商品",
      showModelThis: this.showModel,
      baseForm: {
        id: this.id,
        catid: [],
        good_name: "",
        unit: "",
        supplier: "",
        brandid: "",
        image: [],
      },

      baseRules: {
        supplier: [
          {
            required: true,
            message: "请选择供应商联系人",
            trigger: "change",
          },
        ],
        image: [
          {
            required: true,
            message: "请选择商品主图",
            trigger: "change",
          },
        ],
        catid: [
          {
            required: true,
            message: "请选择商品分类",
            trigger: "change",
          },
        ],
        brandid: [
          {
            required: true,
            message: "请选择商品品牌",
            trigger: "change",
          },
        ],
        good_name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        unit: [
          {
            required: true,
            message: "请输入商品单位",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      ruleForm: {
        spec: "",
        table: "",
      },
    };
  },
  methods: {
    closeModel() {
      this.showModelThis = false;
    },
    async initForm() {
      this.mock = [];
      this.left = {
        header: [],
        middle: [],
        specList: [],
      };
      this.right = {
        header: [],
        specList: [],
      };
      this.step = 0;
      this.loading = true;
      // brandidOptions
      await this.getAllbrandid();
      await this.getAllCat();
      await this.getAllSupplier();

      if (this.id === "add") {
        this.title = "添加商品";
        // this.ruleForm.isAdmin = 0;

        await this.resetForm();
      } else {
        if (this.isDetail) {
          this.title = "商品详情";
        } else {
          this.title = "修改商品";
        }
        await this.resetForm();
        await this.initData();
      }
      this.loading = false;
    },
    async initData() {
      this.loading = true;
      let res = await asyncRequest.detail({ id: this.id });
      this.loading = false;
      if (res.code === 0) {
        await this.resetForm(res.data);
      }
    },
    async resetForm(data) {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.baseForm) {
          this.$refs.baseForm.resetFields();
          this.$refs.baseForm.clearValidate();
          if (data) {
            this.baseForm = {
              id: this.id,
              catid: data.good_cat.split(","),
              good_name: data.good_name,
              unit: data.good_unit,
              supplier: data.supplier,
              brandid: data.brand_id,
              image: data.galley.split(","),
            };
            this.oldcatid = this.baseForm.catid;
            await this.specByCat(false);
            this.dealWithEditMock(data.attr);
          } else {
            this.baseForm = {
              id: this.id,
              catid: ["1", "2", "3"],
              good_name:
                "2018春秋新款V领修身丝绒西装女 双排扣复古极简中长款工装外套",
              unit: "件",
              supplier: "8",
              brandid: "3",
              image: [
                "http://cum.sit.wanyuhengtong.com/20210425/1edfa0da4eee9b24d1f35d52b6a0ec0a.jpg",
                "http://cum.sit.wanyuhengtong.com/20210425/cc70a4c06c83d9d8ac27ae35b118a23f.jpg",
                "http://cum.sit.wanyuhengtong.com/20210425/a5e05dc1c5c75030bcc95f1da1d2d9cb.jpg",
                "http://cum.sit.wanyuhengtong.com/20210425/9d505e7632891459a29f2fafe28d6705.jpg",
                "http://cum.sit.wanyuhengtong.com/20210425/714914d7545184e99e240b3affeada07.jpg",
              ],
            };
          }

          this.ruleForm = {
            spec: "",
            table: "",
          };
        }
      });
    },
    dealWithEditMock(attr) {
      console.log(this.mock);
      attr.forEach((v1) => {
        if (v1 && v1.spec && v1.spec.length > 0) {
          v1.spec.forEach((v2) => {
            this.mock.forEach((v3, i) => {
              if (v2.spec_id === v3.spec_id) {
                console.log(v2.spec_info_id);
                console.log(v3);
                let index = v3.change.findIndex((v4) => {
                  v4 === v2.spec_info_id;
                });
                if (index === -1) {
                  v3.change.push(v2.spec_info_id);
                }
              }
              this.$set(this.mock, i, v3);
            });
          });
        }
      });
      // console.log(attr);
      console.log(this.mock);
      this.groupChange();
      this.resume(attr);
    },
    resume(attr) {
      this.right.specList.forEach((v1) => {
        v1.forEach((v2) => {
          attr.forEach((v3) => {
            let is = true;
            v3.spec.forEach((v4) => {
              let index = v2.specid.findIndex((v5) => v5 === v4.spec_info_id);
              if (index === -1) {
                is = false;
              }
            });
            if (is) {
              v2.limit.forEach((v6, i) => {
                if (v3.limit[i]) {
                  v6.num = v3.limit[i].begin_num;
                  v6.price = v3.limit[i].shop_price;
                }
              });
            }
          });
        });
      });
      console.log(attr);
      console.log(this.right.specList);
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let change = false;
          this.mock.forEach((v1) => {
            if (v1.change && v1.change.length > 0) {
              change = true;
            }
          });
          if (!change) {
            this.ruleForm.spec = "请选择规格！";
            return;
          } else {
            this.ruleForm.spec = "";
            let table = false;
            let hasnot = false;
            let stock = [];
            this.right.specList.forEach((v1) => {
              if (v1) {
                v1.forEach((v2) => {
                  if (v2 && v2.limit && v2.limit.length > 0) {
                    let list = [];
                    v2.limit.forEach((v3) => {
                      if (v3.num != 0 && v3.price != 0) {
                        table = true;
                        list.push(v3);
                      }
                      if (
                        (v3.num != 0 && v3.price == 0) ||
                        (v3.num == 0 && v3.price !== 0)
                      ) {
                        hasnot = true;
                      }
                    });
                    if (list.length > 0) {
                      let model = Object.assign({}, v2);
                      model.limit = list;
                      stock.push(model);
                    }
                  }
                });
              }
            });

            if (hasnot) {
              this.ruleForm.table =
                "请选择起订量与成本价需成对填写，未成对请设为零！";
            } else {
              if (!table) {
                this.ruleForm.table = "至少填写一堆起订量与成本价！";
              } else {
                this.ruleForm.table = "";
                this.loading = true;
                let obj = JSON.parse(JSON.stringify(this.baseForm));
                obj.stock = stock;
                obj.catid = obj.catid[obj.catid.length - 1];
                obj.image = obj.image.join();
                //split(",");
                console.log(obj);
                let res = {};
                if (this.id === "add") {
                  delete obj["id"];
                  res = await asyncRequest.add(obj);
                } else {
                  res = await asyncRequest.update(obj);
                }
                this.loading = false;
                if (res.code === 0) {
                  let title = this.id === "add" ? "添加成功" : "修改成功";
                  this.$notify.success({
                    title,
                    message: "",
                  });
                  this.showModelThis = false;
                  // 刷新
                  this.$emit("refresh");
                }
              }
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async baseSubmitForm() {
      await this.$refs.baseForm.validate(async (valid) => {
        if (valid) {
          await this.handleChange();
        }
      });
    },
    groupChange($event, index, item) {
      this.$set(this.mock, index, item);
      this.actionSpecList();
    },
    actionSpecList() {
      // this.leftS = "0px";
      this.left.header = [];
      this.left.middle = [];
      this.left.specList = [];
      console.log(this.mock);
      console.log(this.right.specList);
      this.mock.forEach((v1) => {
        if (
          v1.change &&
          v1.change.length > 0 &&
          v1.child &&
          v1.child.length > 0
        ) {
          this.left.header.push({
            spec_id: v1.spec_id,
            spec_name: v1.spec_name,
          });
          let arr = [];
          let changeList = v1.change;
          changeList.forEach((v2) => {
            let index = v1.child.findIndex((v3) => v2 === v3.id);
            if (index !== -1) {
              let x = {
                spec_id: v1.spec_id,
                spec_name: v1.spec_name,
                id: v1.child[index].id,
                spec_value: v1.child[index].spec_value,
              };
              arr.push(x);
            }
          });
          this.left.middle.push(arr);
        }
      });
      let lang = this.left.header.length;
      this.leftS = lang * 70 + "px";
      if (this.left.middle.length > 1) {
        this.left.specList = this.doExchange(this.left.middle);
      } else if (this.left.middle.length === 0) {
        this.left.specList = [];
      } else {
        let list1 = [];
        this.left.middle.forEach((v1) => {
          if (v1) {
            v1.forEach((v2) => {
              let list2 = [];
              list2.push(v2);
              list1.push(list2);
            });
          }
        });
        this.left.specList = list1;
      }
      this.right.header = [];
      for (let i = 0; i < this.ladderNum; i++) {
        this.right.header.push(this.headLadder);
      }
      this.right.specList = [];
      this.left.specList.forEach((v1) => {
        let arr = [];
        let model = {
          specid: [],
          limit: [],
        };
        v1.forEach((v2) => {
          model.specid.push(v2.id);
        });
        for (let i = 0; i < this.ladderNum; i++) {
          let bodyLadder = {
            num: 0,
            price: 0,
          };
          model.limit.push(bodyLadder);
        }
        arr.push(model);
        this.right.specList.push(arr);
      });
      console.log(this.right.specList);
    },

    closeLadder(index) {
      console.log(index);
    },
    async handleChange(type) {
      if (this.baseForm.catid !== this.oldcatid && this.oldcatid.length === 0) {
        await this.specByCat();

        if (this.step === 0 && !type) {
          this.step = 1;
        }
      } else if (
        this.baseForm.catid !== this.oldcatid &&
        this.oldcatid.length > 0
      ) {
        await this.$confirm(
          "分类修改会影响该商品规格与价格！",
          "确定要修改？",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            await this.specByCat();
            if (this.step === 0) {
              this.step = 1;
            }
          })
          .catch(() => {
            this.baseForm.catid = this.oldcatid;
          });
      } else {
        if (this.step === 0 && !type) {
          this.step = 1;
        }
      }
    },
    //  商品种类ID换取规格值
    async specByCat(type) {
      console.log("准备拉取！");
      this.mock = [];
      this.$set(this.mock);
      let list = this.baseForm.catid;
      let res = await asyncRequest.specByCat({ catid: list[list.length - 1] });
      if (res.code === 0) {
        this.dealWitHInitMock(res.data, type);
        this.oldcatid = list;
      } else if (res.code !== 101 && res.code !== 102) {
        this.baseForm.catid = this.oldcatid;
      }
    },
    //  规格属性值新建
    async specinfoadd(id, value) {
      console.log(id, value);
      let list = this.baseForm.catid;
      let model = {
        catid: list[list.length - 1],
        specid: id,
        spec_value: value,
      };
      let res = await asyncRequest.specinfoadd(model);
      if (res.code === 0) {
        await this.specByCat(true);
      }
    },
    dealWitHInitMock(list, type) {
      console.log(list, type);
      if (!type) {
        this.mock = [];
        console.log("12345678");
        console.log(this.mock);

        this.left.header = [];
        this.left.specList = [];
        this.right.header = [];
        this.right.specList = [];
        list.map((v1) => {
          v1.value = "";
          v1.change = [];
          return v1;
        });
        this.mock = list;
        console.log(this.mock);
        this.mock.forEach((v3, i) => {
          this.$set(this.mock, i, v3);
        });
      } else {
        let arr = JSON.parse(JSON.stringify(this.mock));
        list.map((v1) => {
          v1.value = "";
          let index = arr.findIndex((v2) => v2.spec_id === v1.spec_id);
          if (index !== -1) {
            v1.change = arr[index].change;
          }
          return v1;
        });
        this.mock = list;
        this.mock.forEach((v3, i) => {
          this.$set(this.mock, i, v3);
        });
      }
    },
    async getAllbrandid() {
      const res = await asyncRequest.brandAll({});
      if (res.code === 0 && res.data) {
        this.brandidOptions = res.data;
      }
    },
    async getAllCat() {
      const res = await asyncRequest.catAll({});
      if (res.code === 0 && res.data) {
        let list = res.data;
        list.map((v1) => {
          v1.value = v1.id;
          v1.label = v1.cat_name;
          if (v1.child && v1.child.length > 0) {
            v1.child.map((v2) => {
              v2.value = v2.id;
              v2.label = v2.cat_name;
              if (v2.child && v2.child.length > 0) {
                v2.child.map((v3) => {
                  v3.value = v3.id;
                  v3.label = v3.cat_name;
                  return v3;
                });
                v2.children = v2.child;
              }
              return v2;
            });
            v1.children = v1.child;
          }

          return v1;
        });
        this.catOptions = list;
      }
    },
    async getAllSupplier() {
      const res = await asyncRequest.supplierAll({});
      if (res.code === 0 && res.data) {
        let list = res.data;
        this.supplierOptions = list;
      }
    },
    //图片上传失败
    UploadErrorEvent(res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField("image");
      }
    },
    closeImg(index) {
      this.baseForm.image.splice(index, 1);
      this.$refs.baseForm.validateField("image");
    },
    //图片上传成功
    async UploadSuccessEvent(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.baseForm.image.push(url);
        this.$message.success("图片上传成功!");
        this.$refs.baseForm.validateField("image");
      }
    },
    //判断图片规格
    beforeAvatarUpload(file) {
      console.log(file);
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    doExchange(arr) {
      let len = arr.length;
      // 当数组大于等于2个的时候
      if (len >= 2) {
        // 第一个数组的长度
        let len1 = arr[0].length;
        // 第二个数组的长度
        let len2 = arr[1].length;
        // 2个数组产生的组合数
        let lenBoth = len1 * len2;
        //  申明一个新数组
        let items = new Array(lenBoth);
        // 申明新数组的索引
        let index = 0;
        for (let i = 0; i < len1; i++) {
          for (let j = 0; j < len2; j++) {
            if (arr[0][i] instanceof Array) {
              items[index] = arr[0][i].concat(arr[1][j]);
            } else {
              items[index] = [arr[0][i]].concat(arr[1][j]);
            }
            index++;
          }
        }
        let newArr = new Array(len - 1);
        for (let i = 2; i < arr.length; i++) {
          newArr[i - 1] = arr[i];
        }
        newArr[0] = items;
        return this.doExchange(newArr);
      } else {
        return arr[0];
      }
    },
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.dealGoodsPool {
  $dealGoodsPoolBoderColor: #dfe6ec;
  .tips-error {
    color: #ff8888;
    font-size: 12px;
    height: 22px;
    line-height: 20px;
    padding-left: 60px;
  }
  .ladder-table {
    position: relative;

    width: 100%;
    border: 1px solid $dealGoodsPoolBoderColor;

    .left {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      background: #fff;
      // width: 140px;
      .ladder-header {
        position: relative;
        width: 100%;
        .header-spec {
          position: relative;
          // border-bottom: 1px solid $dealGoodsPoolBoderColor;
          li {
            float: left;
            width: 70px;
            height: 50px;
            line-height: 50px;
            overflow: hidden;
            padding: 0 10px;
            font-size: 12px;
            color: #909399;
            border-right: 1px solid $dealGoodsPoolBoderColor;
            span {
              height: 25px;
              line-height: 25px;
              min-height: 50px;
              overflow: hidden;
            }
          }
        }
      }
      .ladder-body {
        position: relative;
        width: 100%;
        ul {
          width: 100%;
          display: flex;
          li {
            flex: 1;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            // border-top: 1px solid $dealGoodsPoolBoderColor;
            // border-right: 1px solid $goodsBoderColor;
            span {
              display: block;
              height: 40px;
              width: 49px;
              overflow: hidden;
              line-height: 40px;
              color: #606266;
              font-size: 12px;
              text-overflow: ellipsis;
              white-space: normal;
              word-break: break-all;
              //               overflow: hidden;
              // text-overflow:ellipsis;
              // white-space: nowrap;
            }
          }
        }
      }
    }
    .right {
      position: relative;
      // padding-left: 140px;
      width: 100%;
      overflow-x: scroll;
      background: #fff;
      .ladder-header {
        position: relative;
        width: 100%;
        .header-spec {
          display: flex;
          li {
            min-width: 240px;
            flex: 1;
            .all {
              width: 100%;
              .title {
                width: 100%;
                height: 25px;
                padding: 0 10px;
                font-size: 12px;
                color: #909399;
                line-height: 25px;
                text-align: center;
                position: relative;
                // border-right: 1px solid $goodsBoderColor;
                // border-bottom: 1px solid $goodsBoderColor;
                i {
                  position: absolute;
                  top: 2px;
                  right: 2px;
                  z-index: 2;
                  &:hover {
                    cursor: pointer;
                  }
                }
              }
              .main {
                width: 100%;
                height: 25px;
                span {
                  vertical-align: top;
                  width: 50%;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  padding: 0 10px;
                  font-size: 12px;
                  color: #909399;
                  line-height: 25px;
                  display: inline-block;
                  // border-right: 1px solid $goodsBoderColor;
                  // border-bottom: 1px solid $goodsBoderColor;
                }
              }
            }
          }
        }
      }
      .ladder-body {
        position: relative;
        width: 100%;
        ul {
          width: 100%;
          position: relative;
          li {
            width: 100%;
            display: flex;
            .input-main {
              flex: 1;
              min-width: 240px;
              .el-input-number {
                .el-input {
                  input.el-input_inner {
                    border-radius: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .mack-mian {
    position: relative;
    width: 100%;
    .mock-item-div {
      width: 100%;
      background: rgba(246, 247, 248, 1);
      padding: 12px 12px 0 12px;
      margin: 0 0 10px 0;
      .mock-title {
        width: 100%;
        padding: 0 0 5px 0;
        border-bottom: 1px solid rgba(226, 226, 226, 1);
      }
    }
  }
}
</style>