BST_bigScreen/src/components/product/add/index.vue

<template>
  <div>
    <Modal
      :width="1400"
      class-name="vertical-center-modal"
      title="新增产品"
      :mask-closable="false"
      v-model="showAddProduct"
    >
      <div style="max-height: 800px; overflow: hidden; overflow-y: auto">
        <Tabs
          ref="tabsRef"
          @on-click="handleTabsPaneChange"
          type="card"
          closable
          @on-tab-remove="handleTabRemove"
        >
          <Button
            @click="handleAddProductCopy"
            size="small"
            type="primary"
            style="margin-right: 5px"
            slot="extra"
            >复制产品</Button
          >
          <Button
            @click="handleAddProductAdd"
            size="small"
            type="warning"
            style="margin-right: 5px"
            slot="extra"
            >添加</Button
          >
          <!-- <Button
            @click="handleAddProductDele"
            size="small"
            type="primary"
            slot="extra"
            >删除</Button
          > -->
          <TabPane
            :label="
              (addProductArray[index].position
                ? addProductArray[index].position
                : '位置') +
                '-' +
                item.type_name
            "
            v-for="(item, index) in addProductArray"
            :key="item.id"
            :name="item.index + ''"
          >
          </TabPane>
        </Tabs>
        <div class="modal_product_info">
          <div class="modal_product_info_title">产品信息</div>
          <div class="modal_product_info_content modal_product">
            <Form :model="currencyProduct" :label-width="100">
              <FormItem label="选择产品:">
                <Tooltip style="width: 120px" transfer>
                  <span slot="content">
                    <span
                      v-for="_item in productList"
                      :key="_item.id"
                      v-show="_item.id == currencyProduct.product_id"
                      >{{ _item.title }}</span
                    >
                  </span>
                  <Select
                    filterable
                    clearable
                    filter-by-label
                    transfer
                    label-in-value
                    size="small"
                    v-model="currencyProduct.product_id"
                    @on-change="handleAddProductSelect($event)"
                    style="width: 120px"
                  >
                    <Option
                      v-for="item of productList"
                      :tag="item.img_url"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    ></Option>
                  </Select>
                </Tooltip>
              </FormItem>
              <FormItem label="位置:">
                <Tooltip style="width: 120px" transfer>
                  <span slot="content">
                    {{ currencyProduct.position }}
                  </span>
                  <Input
                    size="small"
                    v-model="currencyProduct.position"
                    style="width: 120px"
                    placeholder="请输入位置"
                  />
                </Tooltip>
              </FormItem>
              <FormItem label="计量单位:">
                <Input
                  size="small"
                  disabled
                  style="width: 120px"
                  v-model="currencyProduct.unit"
                  placeholder="自动带出"
                />
              </FormItem>
              <!-- 工艺属性 -->
              <div v-for="(ele, idx) in currencyProduct.process" :key="idx">
                <FormItem
                  v-for="(_process, _idx) in process_list"
                  :key="_idx"
                  :label="_process.title + ':'"
                  v-show="ele.key == _process.id"
                >
                  <Tooltip style="width: 120px" transfer>
                    <span slot="content">
                      <span
                        v-for="_item in ele.cld"
                        :key="_item.id"
                        v-show="_item.id == ele.value"
                        >{{ _item.title }}</span
                      >
                    </span>
                    <Select
                      style="width: 120px"
                      filterable
                      clearable
                      filter-by-label
                      transfer
                      label-in-value
                      @on-open-change="
                        (e) =>
                          handleGetProductMeasure(e, idx, currencyProduct, ele)
                      "
                      @on-change="
                        (e) =>
                          handleProductProcessChange(
                            e,
                            idx,
                            currencyProduct,
                            ele
                          )
                      "
                      v-model="ele.value"
                      size="small"
                    >
                      <Option
                        v-for="option of ele.cld"
                        :key="option.id"
                        :disabled="option.isDisabled"
                        :label="option.title"
                        :value="option.id"
                      ></Option>
                    </Select>
                  </Tooltip>
                </FormItem>
              </div>
              <!-- 测量字段 -->
              <FormItem
                v-for="ele in currencyProduct.measure"
                :key="ele.id"
                :label="ele.title + ':'"
              >
                <Input
                  size="small"
                  type="text"
                  clearable
                  :placeholder="ele.e_title"
                  v-model="ele.value"
                  @on-blur="
                    (e) => handleProductMeasureBlur(e, currencyProduct, ele)
                  "
                  style="width: 120px"
                />
              </FormItem>
              <FormItem label="数量:">
                <Input
                  size="small"
                  @on-change="(e) => handleProductNumChange(e, currencyProduct)"
                  v-model="currencyProduct.total_num"
                  style="width: 120px"
                  placeholder="请输入产品数量"
                />
              </FormItem>
              <FormItem label="核算数量:">
                <Input
                  size="small"
                  v-model="currencyProduct.num"
                  disabled
                  style="width: 120px"
                  placeholder="自动带出"
                />
              </FormItem>
              <FormItem label="单价:">
                <Input
                  size="small"
                  v-model="currencyProduct.unit_price"
                  @on-change="
                    (e) => handleProductUnit_priceChange(e, currencyProduct)
                  "
                  style="width: 120px"
                  placeholder="自动带出"
                />
              </FormItem>
              <FormItem label="附加金额:">
                <Input
                  size="small"
                  v-model="currencyProduct.ext_price"
                  @on-change="
                    (e) => handleProductExt_priceChange(e, currencyProduct)
                  "
                  style="width: 120px"
                  placeholder="自动带出"
                />
              </FormItem>
              <FormItem label="超标金额:">
                <Input
                  size="small"
                  @on-change="
                    (e) => handleProductOver_priceChange(e, currencyProduct)
                  "
                  v-model="currencyProduct.over_price"
                  style="width: 120px"
                  placeholder="自动带出"
                />
              </FormItem>
              <FormItem label="金额:">
                <Input
                  size="small"
                  v-model="currencyProduct.price"
                  style="width: 120px"
                  placeholder="自动带出"
                />
              </FormItem>
              <FormItem label="图号:">
                <Input
                  size="small"
                  v-model="currencyProduct.url_number"
                  style="width: 120px"
                  placeholder="自动带出"
                />
              </FormItem>
              <FormItem
                v-for="(_customize, customize_key) in currencyProduct.customize"
                :label="_customize.style + ':'"
                :key="customize_key + 99"
              >
                <Input
                  v-show="_customize.type == 1"
                  size="small"
                  type="text"
                  v-model="_customize.value"
                  style="width: 120px"
                  placeholder="请输入"
                />

                <Select
                  v-show="_customize.type == 2"
                  style="width: 120px"
                  filterable
                  clearable
                  v-model="_customize.value"
                  size="small"
                >
                  <Option
                    v-for="option of _customize.explain"
                    :key="option.value"
                    :label="option.value"
                    :value="option.value"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem
                v-for="(outh, outh_key) in currencyProduct.outh"
                :label="outh.title"
                :key="outh_key + 21"
              >
                <img
                  v-if="outh.key == 'img' || outh.key == 'url'"
                  @click="showPreview(currencyProduct, outh.key)"
                  style="
                        max-width: 30px;
                        max-height: 30px;
                        top: 5px;
                        position: relative;
                        cursor: pointer;
                      "
                  :src="$store.state.ip + outh.value"
                />
                <Input
                  v-if="
                    outh.key != 'img' && outh.key != 'url' && outh.key != 'lock'
                  "
                  disabled
                  placeholder="自动生成"
                  style="width: 120px"
                  size="small"
                  v-model="outh.value"
                />
                <Select
                  label-in-value
                  @on-change="changeLock($event, currencyProduct, index)"
                  size="small"
                  clearable
                  style="width: 120px"
                  v-if="outh.key == 'lock'"
                  v-model="currencyProduct[outh.key]"
                >
                  <Option
                    v-for="luck of lock_list"
                    :key="luck.id"
                    :tag="luck.price"
                    :value="luck.id"
                    :label="luck.title"
                  ></Option>
                  <Option :value="0" label="无"></Option>
                </Select>
              </FormItem>
              <FormItem label="备注:">
                <Select
                  size="small"
                  clearable
                  filterable
                  allow-create
                  @on-create="handleRemarkCreate"
                  style="width: 120px"
                  v-model="currencyProduct.remark"
                >
                  <Option
                    v-for="_remark of support_remark"
                    :key="_remark"
                    :value="_remark"
                    :label="_remark"
                  ></Option>
                </Select>
                <!-- <Input
                      size="small"
                      type="textarea"
                      v-model="item.remark"
                      style="width: 120px"
                      placeholder="请输入备注"
                    /> -->
              </FormItem>
              <FormItem label="产品图:">
                <!-- v-show="modalData.url && modalData.url.length > 0" -->
                <div class="product-img">
                  <div class="product-add">
                    <div
                      class="items"
                      v-for="(item, index) of currencyProduct.url"
                      :key="index"
                    >
                      <img
                        @click="looks(item)"
                        :src="$store.state.ip + item"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </FormItem>
            </Form>
          </div>
        </div>
        <div class="modal_product_info">
          <div class="modal_product_info_title">部件信息</div>
          <div class="modal_product_info_content modal_parts">
            <Form
              :model="element"
              v-for="(element, idx) in currencyProduct.part"
              :key="element.id + '111' + idx"
              :label-width="50"
            >
              <FormItem
                :label-width="element.isBP ? 1 : 50"
                v-show="!element.is_metal"
              >
                <Radio
                  v-show="element.isBP"
                  @click.native.prevent="handleRadioClick(element)"
                  v-model="element.isChoosed"
                ></Radio>
                <!-- <span v-show="element.isBP">{{ element.part_title }} </span> -->
              </FormItem>
              <FormItem label="部件:" v-show="!element.is_metal">
                <Select
                  filterable
                  clearable
                  transfer
                  label-in-value
                  size="small"
                  @on-change="
                    handlePartChange(
                      $event,
                      element,
                      currencyProduct.measure,
                      currencyProduct.total_num
                    )
                  "
                  v-model="element.change_id"
                  style="width: 180px"
                >
                  <Option
                    v-for="item of element.change"
                    :key="item.id"
                    :label="item.part_title"
                    :value="item.id"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem
                label="高:"
                v-show="
                  !element.is_metal &&
                    element.hide_measure &&
                    !element.hide_measure.filter((v) => v == 'H').length > 0
                "
              >
                <Input
                  size="small"
                  clearable
                  v-model="element.long"
                  style="width: 50px"
                  placeholder="请输入厚"
                />
              </FormItem>
              <FormItem
                label="宽:"
                v-show="
                  !element.is_metal &&
                    element.hide_measure &&
                    !element.hide_measure.filter((v) => v == 'W').length > 0
                "
              >
                <Input
                  size="small"
                  clearable
                  v-model="element.wide"
                  style="width: 50px"
                  placeholder="请输入宽"
                />
              </FormItem>
              <FormItem
                label="厚:"
                v-show="
                  !element.is_metal &&
                    element.hide_measure &&
                    !element.hide_measure.filter((v) => v == 'T').length > 0
                "
              >
                <Input
                  size="small"
                  clearable
                  v-model="element.high"
                  style="width: 50px"
                  placeholder="请输入高"
                />
              </FormItem>
              <FormItem
                v-for="(process_detail, idx) in element.process"
                :key="process_detail.name + '222' + element.part_id"
                :label="process_detail.name + ':'"
                v-show="
                  !element.is_metal &&
                    element.hide_process &&
                    !element.hide_process.filter(
                      (v) => v == process_detail.process_id
                    ).length > 0
                "
              >
                <Tooltip style="width: 120px" transfer>
                  <span slot="content">
                    <span
                      v-for="_item in process_detail.cld"
                      :key="_item.id"
                      v-show="_item.id == process_detail.value"
                      >{{ _item.title }}</span
                    >
                  </span>
                  <Select
                    style="width: 120px"
                    filterable
                    clearable
                    transfer
                    label-in-value
                    @on-change="
                      (e) =>
                        handlePartProcessChange(e, idx, element, process_detail)
                    "
                    v-model="process_detail.value"
                    size="small"
                  >
                    <Option
                      v-for="option of process_detail.cld"
                      :key="option.id"
                      :label="option.title"
                      :value="option.id"
                    ></Option>
                  </Select>
                </Tooltip>
              </FormItem>
              <FormItem v-show="!element.is_metal">
                <Button
                  @click="handlePartsApart(element, idx, currencyProduct.part)"
                  type="primary"
                  v-if="element.isBP"
                  style="margin-right: 5px"
                  size="small"
                  >拆分</Button
                >
                <Button
                  @click="handlePartsDele(element, idx, currencyProduct.part)"
                  type="primary"
                  v-else
                  style="margin-right: 5px"
                  size="small"
                  >删除</Button
                >
                <Button
                  @click="handlePartDetailEdit(element, idx)"
                  type="primary"
                  style="margin-right: 5px"
                  size="small"
                  >{{
                    element.isShowPartDetail ? "收起" : "修改原材料"
                  }}</Button
                >
              </FormItem>
              <div
                :class="[
                  'part_detail_form',
                  element.isShowPartDetail ? '' : 'hide_part_detail',
                ]"
                :data-index="idx"
              >
                <FormItem>
                  <div v-for="ele in element.part_detail" :key="ele.id">
                    <Form :model="ele">
                      <FormItem>
                        <div style="width: 200px">
                          {{ ele.title || ele.part_detail_title }}
                        </div>
                      </FormItem>
                      <!-- 原材料 -->
                      <Form>
                        <FormItem>
                          <div style="width: 200px">
                            {{ ele.material_detail_title || "请选择" }}
                          </div>
                        </FormItem>
                        <FormItem label="高" :label-width="40">
                          <Select
                            style="width: 80px"
                            filterable
                            clearable
                            transfer
                            v-model="ele.material_detail_id"
                            @on-change="(e) => handleMaterialChange(e, ele)"
                            placeholder="请选择高"
                            size="small"
                          >
                            <Option
                              v-for="option of ele.material_detail_list"
                              :key="option.material_detail_id"
                              :label="option.long"
                              :value="option.material_detail_id"
                            ></Option>
                          </Select>
                        </FormItem>
                        <FormItem label="宽" :label-width="40">
                          <Select
                            style="width: 80px"
                            filterable
                            clearable
                            transfer
                            v-model="ele.material_detail_id"
                            placeholder="请选择宽"
                            size="small"
                          >
                            <Option
                              v-for="option of ele.material_detail_list"
                              :key="option.material_detail_id"
                              :label="option.wide"
                              :value="option.material_detail_id"
                            ></Option>
                          </Select>
                        </FormItem>
                        <FormItem label="厚" :label-width="40">
                          <Select
                            style="width: 80px"
                            filterable
                            clearable
                            transfer
                            v-model="ele.material_detail_id"
                            placeholder="请选择厚"
                            size="small"
                          >
                            <Option
                              v-for="option of ele.material_detail_list"
                              :key="option.material_detail_id"
                              :label="option.high"
                              :value="option.material_detail_id"
                            ></Option>
                          </Select>
                        </FormItem>
                        <FormItem label="数量" :label-width="40">
                          <Input
                            size="small"
                            v-model="ele.material_detail_num"
                            style="width: 80px"
                            placeholder="请输入数量"
                          />
                        </FormItem>
                      </Form>
                    </Form>
                  </div>
                </FormItem>
              </div>
            </Form>
          </div>
        </div>
        <div class="modal_product_info">
          <div class="modal_product_info_title">
            附加信息
            <Button
              @click="handleExtraAdd(currencyProduct.extArray, 2)"
              type="primary"
              size="small"
              >新增附加项目</Button
            >
          </div>
          <div class="modal_product_info_content modal_extra">
            <Form
              :model="element"
              v-for="(element, idx) in currencyProduct.extArray"
              :key="element.id"
              :label-width="80"
            >
              <FormItem label="附加项目:">
                <Select
                  filterable
                  clearable
                  transfer
                  label-in-value
                  size="small"
                  v-model="element.id"
                  @on-change="
                    (e) => handleExtChange(element, e, currencyProduct)
                  "
                  style="width: 100px"
                >
                  <Option
                    v-for="item of extList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  ></Option>
                </Select>
              </FormItem>
              <FormItem label="数量:">
                <Input
                  size="small"
                  v-model="element.num"
                  @on-change="handleTotalPriceCalc(element, currencyProduct)"
                  style="width: 100px"
                  placeholder="请输入数量"
                />
              </FormItem>
              <FormItem label="单价:">
                <Input
                  size="small"
                  v-model="element.price"
                  @on-change="handleTotalPriceCalc(element, currencyProduct)"
                  style="width: 100px"
                  placeholder="请输入单价"
                />
              </FormItem>
              <FormItem label="金额:">
                <Input
                  size="small"
                  @on-change="handleTotalPriceChange(element, currencyProduct)"
                  v-model="element.total_price"
                  style="width: 100px"
                  placeholder="请输入金额"
                />
              </FormItem>
              <FormItem label="备注:">
                <Input
                  size="small"
                  v-model="element.remark"
                  style="width: 100px"
                  placeholder="请输入备注"
                />
              </FormItem>
              <FormItem>
                <a
                  style="color: red"
                  @click="
                    handleExtraDele(
                      currencyProduct.extArray,
                      element,
                      idx,
                      currencyProduct
                    )
                  "
                  >删除</a
                >
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button @click="then" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      showAddProduct: false,
      subAddProductData: [],
      addProductArray: [
        {
          type_name: "产品1",
          num: 1,
          position: "位置",
          index: "0",
          extArray: [],
        },
      ], //新增产品列表
      pre_bp_id: "", //产品分类ID，添加多个产品时判断是否与前一个产品分类一致
      process_match_list: [], //当前产品所有工艺组合
      support_remark: [], //备注列表
      bpp_list: [], //工艺属性列表
      //   route_id_at_copy: "", //复制产品的工艺路线ID
      pre_process_obj: {}, //产品工艺属性，添加多个产品时判断是否与前一个工艺属性一致
      currentTabIndex: "0", //当前分页面
      productList: [], //产品列表
      metalList: [], //五金列表
      extList: [], //五金列表
      currencyProduct: {}, //当前展示数据
      process_list: [], //所有工艺属性
      tempExtArray: [], //临时附加信息，更换产品是否保留用
      isAdd: false, //判断产品是否为添加
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //   获取工艺属性
    this.axios({
      method: "get",
      url: "/api/bpp_list",
    }).then((res) => {
      if (res.code == 200) {
        this.bpp_list = res.data;
      }
    });
    // 获取产品列表
    this.axios("/api/product").then(
      (res) => (this.productList = res.data.data)
    );
    // 获取五金列表
    this.axios
      .get("/api/material", { params: { sub_type_id: 5 } })
      .then((res) => {
        if (res.code == 200) {
          this.metalList = res.data.data;
        }
      });
    // 获取附加列表
    this.axios.get("/api/project_ext_list").then((res) => {
      if (res.code == 200) {
        this.extList = res.data.data;
      }
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.currencyProduct = this.addProductArray[0];
  },
  methods: {
    handleAddProductCopy() {
      // this.addProductArray[this.currentTabIndex] = this.currencyProduct;
      let idx = this.$refs.tabsRef.activeKey;
      let obj = this.deepClone(this.addProductArray[idx]);
      obj.index = this.addProductArray.length;
      obj.position = "";
      this.addProductArray.push(obj);
    },
    handleAddProductDele() {
      let idx = this.$refs.tabsRef.activeKey;
      this.addProductArray.splice(idx, 1);
    },
    handleTabRemove(name) {
      this.addProductArray[name].isdeleted = true;
      this.currencyProduct = this.addProductArray[name - 1];
      // this["tab" + name] = false;
    },
    handleAddProductAdd() {
      this.isAdd = true;
      let index = this.addProductArray.length;
      this.addProductArray.push({
        type_name: "产品" + (this.addProductArray.length + 1),
        position: "",
        index,
        extArray: [],
      });
    },
    handleAddProductSelect(row) {
      if (row) {
        let product_id = row.value;
        this.currencyProduct.type_name = row.label;
        this.currencyProduct.title = row.label;
        this.axios("/api/order_get_product_detail_new", {
          params: { product_id, custom_id: this.custom_id },
        }).then((res) => {
          if (res.code == 200) {
            if (this.process_list.length == 0) {
              this.process_list = res.data.process_list;
            }
            if (this.addProductArray.length == 1) {
              let _temp_obj = {};
              if (res.data.process.list.length > 1) {
                for (const key in res.data.process.list[0].detail) {
                  res.data.process.list.reduce((pre, cur) => {
                    if (_temp_obj[key] == "") {
                      return pre;
                    } else {
                      if (pre.detail[key] == cur.detail[key]) {
                        _temp_obj[key] = pre.detail[key];
                        return pre;
                      } else {
                        _temp_obj[key] = "";
                        return pre;
                      }
                    }
                  });
                }
              } else {
                _temp_obj = res.data.process.list[0].detail;
              }
              this.pre_process_obj = this.deepClone(_temp_obj);
            }
            // this.process_match_list = res.data.process.list;
            this.support_remark = Array.from(
              new Set([...res.data.support_remark, ...this.support_remark])
            );
            let modalData = this.currencyProduct;
            modalData.url = res.data.url;
            modalData.total_num = res.data.total_num || 1;
            modalData.ext_price = res.data.ext_price || 0;
            modalData.unit_price = res.data.price || 0;
            modalData.num = res.data.num || 1;
            modalData.num_temp_save = modalData.num;
            modalData.over_price = res.data.over_price || 0;
            modalData.unit = res.data.unit || "";
            modalData.remark = res.data.remark || "";
            modalData.url_number = res.data.url_number || "";
            modalData.overdraft = res.data.overdraft;
            modalData.num_formula = res.data.num_formula;
            modalData.bp_id = res.data.bp_id;
            // 金额=（产品单价）*核算数量 +附加金额 + 超标金额
            modalData.price =
              (modalData.unit_price * 1 || 0) * (modalData.num * 1 || 1) +
              (modalData.over_price * 1 || 0) +
              (modalData.ext_price * 1 || 0);
            modalData.price = modalData.price.toFixed(2);
            modalData.selected_ids = [];
            modalData.part = res.data.part;
            modalData.part.forEach((element) => {
              // 选择不是附加项目的，
              if (!element.is_metal) {
                // 选择不是线条、或者基础档案中要默认为空的部件
                element.isBP = true;
                element.isChoosed = true;
                if (element.is_null == 1) {
                  element.change_id = "";
                  element.part_title = "";
                  element.title = "";
                } else {
                  element.change_id = element.change[0].id;
                }
                element.part_detail = element.sub_part;
                //展示非拆分部件
                // 默认替换部件
                //存计算公式
                element.long ? "" : (element.long = 0);
                element.wide ? "" : (element.wide = 0);
                element.high ? "" : (element.high = 0);
                element.longCalc = element.long;
                element.wideCalc = element.wide;
                element.highCalc = element.high;
                element.part_detail.forEach((elem) => {
                  elem.org_num = elem.num;
                  elem.material_detail_id = 0;
                  elem.material_detail_title =
                    elem.material_detail_list[0].title;
                  elem.material_detail_id =
                    elem.material_detail_list[0].material_detail_id;
                  elem.material_detail_num = elem.num || 0;
                  elem.material_detail_org_num = elem.num || 0;
                  elem.long ? "" : (elem.long = 0);
                  elem.wide ? "" : (elem.wide = 0);
                  elem.high ? "" : (elem.high = 0);
                  elem.longCalc = elem.long || "";
                  elem.wideCalc = elem.wide || "";
                  elem.highCalc = elem.high || "";
                  elem.material_detail_list.forEach((el) => {
                    el.long = el.long || "0";
                    el.wide = el.wide || "0";
                    el.high = el.high || "0";
                  });
                });
                element.part_detail.map((_part_detail) => {
                  _part_detail.material_detail_org_num = _part_detail.num || 0;
                  _part_detail.part_detail_option = [];
                  _part_detail.material_detail_list.map((v) => {
                    _part_detail.part_detail_option.push({
                      label: `${v.long}*${v.wide}*${v.high}`,
                      value: v.material_detail_id,
                    });
                  });
                });
              }
            });
            //测量字段
            modalData.measure = res.data.measure;
            modalData.measure.forEach((element) => {
              element.value = "";
              element.measureCalc = element.e_title;
            });
            //工艺属性
            modalData.process = [];
            this.bpp_list.map((element) => {
              for (const key in res.data.process.title) {
                const ele = res.data.process.title[key];
                if (element.name == ele) {
                  if (this.isAdd) {
                    modalData.process.push({
                      key: key,
                      id: key,
                      title: ele,
                      value: "",
                      cld: element.cld,
                    });
                  } else {
                    const compare = res.data.process.list.filter(
                      (item) => item.detail[key] == this.pre_process_obj[key]
                    );
                    if (compare.length > 0) {
                      modalData.procedure_properties = {};
                      modalData.procedure_properties[key] =
                        this.pre_process_obj[key] * 1;
                      modalData.process.push({
                        key: key,
                        id: key,
                        title: ele,
                        value: this.pre_process_obj[key] * 1,
                        cld: element.cld,
                      });
                    } else {
                      modalData.procedure_properties = {};
                      modalData.procedure_properties[key] = "";
                      modalData.process.push({
                        key: key,
                        id: key,
                        title: ele,
                        value: "",
                        cld: element.cld,
                      });
                    }
                  }
                }
              }
            });
            modalData.part.forEach((element) => {
              if (!element.is_metal) {
                //赋值默认工艺属性
                element.process = this.deepClone(this.bpp_list);
                element.process.forEach((elem, index) => {
                  for (const key in res.data.process.title) {
                    const ele = res.data.process.title[key];
                    if (elem.name == ele) {
                      elem.value = this.pre_process_obj[key] * 1;
                      elem.process_id = key;
                      if (!element.procedure_properties) {
                        element.procedure_properties = {};
                      }
                      element.procedure_properties[key] =
                        this.pre_process_obj[key] * 1;
                    }
                  }
                });
              }
            });
            if (res.data.bp_id == this.pre_bp_id) {
              modalData.extArray = this.deepClone(this.tempExtArray);
              if (modalData.extArray.length == 1) {
                modalData.ext_price =
                  modalData.extArray[0].num * 1 * modalData.extArray[0].price;
              } else {
                modalData.ext_price = modalData.extArray.reduce(
                  (pre, pur) => pre.total_price * 1 + pur.num * pur.price * 1
                );
              }
              modalData.price =
                (modalData.unit_price * 1 || 0) * (modalData.num * 1 || 1) +
                (modalData.over_price * 1 || 0) +
                (modalData.ext_price * 1 || 0);
              modalData.price = modalData.price.toFixed(2);
            } else {
              modalData.extArray = [];
            }
          }
        });
      }
    },
    handleGetProductMeasure(val, index, product, ele) {
      if (val) {
        let change = [];
        if (product.part.filter((v) => !v.change_id).length > 0) {
          ele.cld = [];
          this.$forceUpdate();
          return this.$Message.warning("请先选择部件！");
        }
        product.part.map((item) => {
          change.push({
            old_id: item.org_part_id || item.part_id,
            new_id: item.change.filter((v) => v.id == item.change_id)[0]
              .part_id,
          });
        });
        let list = product.process.map((item) => {
          return { type_id: item.key || item.id, value: item.value || "" };
        });
        ele.cld = [];
        this.axios({
          method: "post",
          url: "/api/order_get_product_process",
          data: {
            product_id: product.product_id,
            type_id: ele.key,
            list,
            change,
          },
        }).then((res) => {
          if (res.code == 200) {
            ele.cld = res.data;
          } else {
            ele.cld = [];
          }
          this.$forceUpdate();
        });
      }
    },
    //修改材质/颜色/工艺的 disabled
    handleProductProcessChange(e, n, modelData, ele) {
      if (e) {
        this.pre_process_obj[ele.id] = e.value;
        if (!modelData.procedure_properties_str) {
          modelData.procedure_properties_str = [];
        }
        modelData.procedure_properties_str[ele.id - 1] = e.label;
        if (!modelData.procedure_properties) {
          modelData.procedure_properties = {};
        }
        modelData.procedure_properties[ele.id] = e.value;
        let isStart = true;
        modelData.process.forEach((element) => {
          if (element.value == "") {
            isStart = false;
          }
        });
        //匹配工艺路线
        if (isStart) {
          let _target = [];
          let _sorce = this.deepClone(this.process_match_list);
          modelData.process.forEach((element) => {
            _target.push(element.value);
          });
          _sorce.forEach((element) => {
            let _str = [];
            for (const key in element.detail) {
              const item = element.detail[key];
              _str.push(item);
            }
            element.new_detail = _str.join(",");
          });
          let target = _target.join(",");
          _sorce.forEach((element) => {
            if (element.new_detail == target) {
              modelData.route_id = element.id;
            }
          });
        }
        // 产品 - 部件 工艺属性联动
        modelData.part.forEach((element) => {
          // 此处有错误，产品选择完工艺路线之后部件的展示跟着改了但是procedure_properties没有
          if (!element.is_metal) {
            element.process.forEach((elem) => {
              if (elem.name == ele.title) {
                elem.value = e.value;
                if (!element.procedure_properties) {
                  element.procedure_properties = {};
                }
                if (!element.procedure_properties_str) {
                  element.procedure_properties_str = [];
                }
                element.procedure_properties[ele.id] = e.value;
                element.procedure_properties_str[n] = e.label;
              }
            });
          }
        });
      } else {
        modelData.route_id = "";
        if (typeof modelData.procedure_properties == "string") {
          modelData.procedure_properties = modelData.procedure_properties.split(
            ","
          );
        }
        // modelData.procedure_properties = [];
        modelData.procedure_properties[ele.id] = "";
      }
      this.$forceUpdate();
    },
    handlePartProcessChange(val, n, row, process_detail) {
      if (!row.procedure_properties) {
        row.procedure_properties = {};
      }
      if (!row.procedure_properties_str) {
        row.procedure_properties_str = [];
      }
      if (val) {
        row.procedure_properties[process_detail.id] = val.value;
        row.procedure_properties_str[n] = val.label;
      } else {
        row.procedure_properties[process_detail.id] = "";
        row.procedure_properties_str[n] = "";
      }
      this.$forceUpdate();
    },
    handlePartsDele(element, index, array) {
      array.splice(index, 1);
      this.$forceUpdate();
    },
    handlePartDetailEdit(element, index) {
      element.isShowPartDetail = !element.isShowPartDetail;
      this.$forceUpdate();
    },
    handlePartsApart(element, index, array) {
      let obj = this.deepClone(element);
      obj.isBP = false;
      array.splice(index + 1, 0, obj);
      this.$forceUpdate();
    },
    handleExtraDele(array, row, index, modalData) {
      array.splice(index, 1);
      this.handleTotalPriceCalc(row, modalData);
      this.$forceUpdate();
    },
    handlePartChange($event, row, measure, product_num) {
      if ($event) {
        let cur = row.change.filter((item) => item.id == row.change_id);
        console.log("cur :>> ", cur);
        row.part_title = cur[0].part_title;
        row.org_part_id = row.part_id;
        row.part_id = cur[0].part_id;
        row.high = cur[0].high || 0;
        row.highCalc = row.high;
        row.long = cur[0].long || 0;
        row.longCalc = row.long;
        row.wide = cur[0].wide || 0;
        row.wideCalc = row.wide;
        row.part_detail = cur[0].sub_part;
        row.part_detail.forEach((elem) => {
          elem.longCalc = elem.long;
          elem.wideCalc = elem.wide;
          elem.highCalc = elem.high;
          elem.org_num = elem.num;
          elem.material_detail_org_num = elem.num || 0;
          elem.num =
            ((elem.material_detail_org_num || elem.num) * product_num) | 0;
          elem.material_detail_num = elem.material_detail_org_num * product_num;
        });
        console.log("row :>> ", row);
        measure.forEach((element) => {
          if ((row.long + "").indexOf(element.measureCalc) != -1) {
            if (typeof (element.value * 1) == "number") {
              row.long = row.long.replace(
                new RegExp(element.measureCalc, "g"),
                element.value | ""
              );
              row.long = eval(row.long);
              row.long += "";
            } else {
              row.long = "";
            }
          }
          if ((row.wide + "").indexOf(element.measureCalc) != -1) {
            if (typeof (element.value * 1) == "number") {
              row.wide = row.wide.replace(
                new RegExp(element.measureCalc, "g"),
                element.value | ""
              );
              row.wide = eval(row.wide);
              row.wide += "";
            } else {
              row.wide = "";
            }
          }
          if ((row.high + "").indexOf(element.measureCalc) != -1) {
            if (typeof (element.value * 1) == "number") {
              row.high = row.high.replace(
                new RegExp(element.measureCalc, "g"),
                element.value | ""
              );
              row.high = eval(row.high);
              row.high += "";
            } else {
              row.high = "";
            }
          }
          row.part_detail.forEach((item) => {
            item.num =
              row.material_detail_org_num || item.material_detail_org_num;
            if ((item.long || "").indexOf(element.measureCalc) != -1) {
              if (typeof (element.value * 1) == "number") {
                item.long = item.long.replace(
                  new RegExp(element.measureCalc, "g"),
                  element.value
                );
                try {
                  item.long = eval(item.long);
                  item.long += "";
                } catch (error) {
                  item.long = "";
                }
              }
            }
            if ((item.wide || "").indexOf(element.measureCalc) != -1) {
              if (typeof (element.value * 1) == "number") {
                item.wide = item.wide.replace(
                  new RegExp(element.measureCalc, "g"),
                  element.value
                );
                try {
                  item.wide = eval(item.wide);
                  item.wide += "";
                } catch (error) {
                  item.wide = "";
                }
              }
            }
            if ((item.high || "").indexOf(element.measureCalc) != -1) {
              if (typeof (element.value * 1) == "number") {
                item.high = item.high.replace(
                  new RegExp(element.measureCalc, "g"),
                  element.value
                );
                try {
                  item.high = eval(item.high);
                  item.high += "";
                } catch (error) {
                  item.high = "";
                }
              }
            }
            item.material_detail_list.forEach((it) => {
              it.long = it.long || "0";
              it.wide = it.wide || "0";
              it.high = it.high || "0";
            });
            item.long = item.long || "0";
            item.wide = item.wide || "0";
            item.high = item.high || "0";
            item.material_detail_title = item.material_detail_list[0].title;
            item.material_detail_id =
              item.material_detail_list[0].material_detail_id;
            item.material_detail_org_num = item.num || 0;
          });
        });
      } else {
        row.change_id = "";
      }
      this.$forceUpdate();
    },
    handleExtraAdd(array, type) {
      array.push({
        num: 0,
        price: 0,
        total_price: 0,
        type,
        remark: "",
        title: "",
        id: "",
        is_metal: true,
      });
      this.$forceUpdate();
    },
    handleRemarkCreate(val) {
      this.support_remark.push(val);
    },
    handleProductMeasureChange(e, product, measure_detail) {
      if (e.target.value) {
        let cur_measure = measure_detail.measureCalc;
        let cur_value = measure_detail.value;
        product.over_price = 0;
        //当前测量字段 L W H  修改部件测量字段
        product.part.forEach((element) => {
          console.log("element :>> ", element);
          if (!element.is_metal) {
            element.highCalc = element.highCalc + "";
            element.longCalc = element.longCalc + "";
            element.wideCalc = element.wideCalc + "";
            //处理公式
            if (element.highCalc.indexOf(cur_measure) != -1) {
              element.high = element.highCalc.replace(
                new RegExp(cur_measure, "g"),
                cur_value || ""
              );
            }
            if (element.longCalc.indexOf(cur_measure) != -1) {
              element.long = element.longCalc.replace(
                new RegExp(cur_measure, "g"),
                cur_value || ""
              );
            }
            if (element.wideCalc.indexOf(cur_measure) != -1) {
              element.wide = element.wideCalc.replace(
                new RegExp(cur_measure, "g"),
                cur_value || ""
              );
            }
            //判断测量字段公式中是否还含有字母
            let flag_high = false;
            let flag_long = false;
            let flag_wide = false;
            for (let index = 0; index < product.measure.length; index++) {
              const item = product.measure[index];
              if (element.high.indexOf(item.measureCalc) != -1) {
                flag_high = true;
              }
              if (element.long.indexOf(item.measureCalc) != -1) {
                flag_long = true;
              }
              if (element.wide.indexOf(item.measureCalc) != -1) {
                flag_wide = true;
              }
            }
            if (flag_high) {
            } else {
              element.high = eval(element.high);
              element.high += "";
            }
            if (flag_long) {
            } else {
              element.long = eval(element.long);
              element.long += "";
            }
            if (flag_wide) {
            } else {
              element.wide = eval(element.wide);
              element.wide += "";
            }
            element.part_detail.forEach((elem) => {
              if (!elem.high) {
              } else if (elem.highCalc.indexOf(cur_measure) != -1) {
                elem.high = elem.highCalc.replace(
                  new RegExp(cur_measure, "g"),
                  cur_value || ""
                );
              }
              if (!elem.long) {
              } else if (elem.longCalc.indexOf(cur_measure) != -1) {
                elem.long = elem.longCalc.replace(
                  new RegExp(cur_measure, "g"),
                  cur_value || ""
                );
              }
              if (!elem.wide) {
              } else if (elem.wideCalc.indexOf(cur_measure) != -1) {
                elem.wide = elem.wideCalc.replace(
                  new RegExp(cur_measure, "g"),
                  cur_value || ""
                );
              }
              //判断测量字段公式中是否还含有字母
              let _flag_high = false;
              let _flag_long = false;
              let _flag_wide = false;
              // Number类型无法使用indexOf
              elem.high += "";
              elem.long += "";
              elem.wide += "";
              for (let index = 0; index < product.measure.length; index++) {
                const item = product.measure[index];
                if (!elem.high) {
                } else if (elem.high.indexOf(item.measureCalc) != -1) {
                  _flag_high = true;
                }
                if (!elem.long) {
                } else if (elem.long.indexOf(item.measureCalc) != -1) {
                  _flag_long = true;
                }
                if (!elem.wide) {
                } else if (elem.wide.indexOf(item.measureCalc) != -1) {
                  _flag_wide = true;
                }
              }
              if (_flag_high) {
              } else {
                elem.high = eval(elem.high);
                elem.high += "";
                elem.high == "null" && (elem.high = 0);
              }
              if (_flag_long) {
              } else {
                elem.long = eval(elem.long);
                elem.long += "";
                elem.long == "null" && (elem.long = 0);
              }
              if (_flag_wide) {
              } else {
                elem.wide = eval(elem.wide);
                elem.wide += "";
                elem.wide == "null" && (elem.wide = 0);
              }
            });
          }
        });
        product.part.map((item) => {
          const cur_part = product.overdraft.filter(
            (v) => v.part_id == item.part_id
          );
          cur_part.length > 0 &&
            cur_part.map((element) => {
              // 1 高 2 宽 3 厚
              if (
                element.type == 1 &&
                item.long >= element.min &&
                item.long < element.max
              ) {
                item.formula_temp = element.formula;
                item.formula_temp = item.formula_temp.replace(/H/g, item.long);
                item.formula_temp = item.formula_temp.replace(/W/g, item.wide);
                item.formula_temp = item.formula_temp.replace(/T/g, item.high);
                item.formula_value = eval(item.formula_temp);
                product.over_price += item.formula_value * 1 || 0;
                product.over_price = product.over_price.toFixed(2);
              }
              if (
                element.type == 2 &&
                item.wide >= element.min &&
                item.wide < element.max
              ) {
                item.formula_temp = element.formula;
                item.formula_temp = item.formula_temp.replace(/H/g, item.long);
                item.formula_temp = item.formula_temp.replace(/W/g, item.wide);
                item.formula_temp = item.formula_temp.replace(/T/g, item.high);
                item.formula_value = eval(item.formula_temp);
                product.over_price += item.formula_value * 1 || 0;
                product.over_price = product.over_price.toFixed(2);
              }
              if (
                element.type == 3 &&
                item.high >= element.min &&
                item.high < element.max
              ) {
                item.formula_temp = element.formula;
                item.formula_temp = item.formula_temp.replace(/H/g, item.long);
                item.formula_temp = item.formula_temp.replace(/W/g, item.wide);
                item.formula_temp = item.formula_temp.replace(/T/g, item.high);
                item.formula_value = eval(item.formula_temp);
                product.over_price += item.formula_value * 1 || 0;
                product.over_price = product.over_price.toFixed(2);
              }
            });
        });
        //修改核算数量
        // 如果没有核算数量公式，核算数量取产品数量
        if (product.num_formula == "") {
          product.total_num = product.num;
        } else {
          product.num_formula_temp = product.num_formula;
          product.measure.forEach((element) => {
            if (product.num_formula.indexOf(element.e_title) != -1) {
              product.num_formula_temp = product.num_formula_temp.replace(
                new RegExp(element.e_title, "g"),
                element.value || 0
              );
            }
          });
          product.num = eval(product.num_formula_temp);
          product.num = product.num.toFixed(2);
          product.over_price = product.over_price.toFixed(2);
          product.num_temp_save = product.num;
          product.price =
            (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
            (product.over_price * 1 || 0) +
            (product.ext_price * 1 || 0);
          product.price = product.price.toFixed(2);
        }
        product = this.deepClone(product);
        this.$forceUpdate();
      }
    },
    handleProductMeasureBlur(e, product, measure_detail) {
      this.handleProductMeasureChange(e, product, measure_detail);
      try {
        measure_detail.value = eval(e.target.value);
      } catch (error) {
        console.log("error :>> ", error);
      }
      product.part.map((part) => {
        part.part_detail &&
          part.part_detail.length > 0 &&
          part.part_detail.map((part_detail) => {
            part_detail._longCalc = this.handleCalcPartDetailLong(
              part_detail,
              product
            );
            if (part_detail.material_detail_list.length > 1) {
              try {
                part_detail.longCalcFinal = eval(part_detail._longCalc);
                part_detail.material_detail_id = this.handleFindNearest(
                  part_detail.material_detail_list,
                  part_detail.longCalcFinal
                );
              } catch (error) {
                console.log("error :>> ", error);
              }
            }
          });
      });
      console.log('product.process :>> ', product.process);
      const process_ids = product.process.map((v) => {
        return v.value;
      });
      this.axios
        .post("/api/process_part_for_product", {
          product_id: product.product_id,
          process_ids,
        })
        .then((res) => {
          for (const key in res.data) {
            const element = res.data[key];
            // 找到部件
            const part_arr = product.part.filter((v) => v.part_id == key);
            if (part_arr.length > 0) {
              for (const k in element) {
                const elem = element[k];
                // 找到零部件
                const part_detail_arr = part_arr[part_arr.length - 1].filter(
                  (v) => v.part_detail_id == k
                );
                elem.map((match_item) => {
                  const matched_part_detail = part_detail_arr[
                    part_detail_arr.length - 1
                  ].material_detail_list.filter(
                    (v) => v.material_detail_id == match_item.material_detail_id
                  );
                  if (
                    match_item.max > product[match_item.e_title] &&
                    match_item.min <= product[match_item.e_title]
                  ) {
                    part_detail_arr[
                      part_detail_arr.length - 1
                    ].material_detail_id =
                      matched_part_detail[
                        matched_part_detail.length - 1
                      ].material_detail_id;
                  }
                });
              }
            }
          }
          console.log(res);
        });
      this.$forceUpdate();
    },
    handleMaterialChange(val, row) {
      if (val) {
        let tempRow = row.material_detail_list.filter(
          (item) => item.material_detail_id == val
        );
        row.material_detail_title = tempRow[0].title;
        this.$forceUpdate();
      }
    },
    handleProductExt_priceChange(e, product) {
      product.ext_price = e.target.value * 1;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.$forceUpdate();
    },
    handleProductOver_priceChange(e, product) {
      product.over_price = e.target.value;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.$forceUpdate();
    },
    handleRadioClick(row) {
      row.isChoosed = !row.isChoosed;
      this.$forceUpdate();
    },
    handleProductUnit_priceChange(e, product) {
      product.unit_price = e.target.value * 1;
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.$forceUpdate();
    },
    handleProductNumChange(e, product) {
      product.part.map((element) => {
        element.part_detail.map((elem) => {
          elem.material_detail_num =
            e.target.value * elem.material_detail_org_num;
        });
      });
      product.total_num = e.target.value;
      product.num = (product.total_num * product.num_temp_save).toFixed(2);
      product.price =
        (product.unit_price * 1 || 0) * (product.num * 1 || 1) +
        (product.over_price * 1 || 0) +
        (product.ext_price * 1 || 0);
      product.price = product.price.toFixed(2);
      this.$forceUpdate();
    },
    handleCalcPartDetailLong(part_detail, product) {
      for (const key in product.measure) {
        const element = product.measure[key];
        if (element.value) {
          part_detail._longCalc = part_detail.longCalc.replace(
            new RegExp(element.e_title, "g"),
            element.value || ""
          );
        }
      }
      try {
        eval(part_detail._longCalc);
      } catch (error) {
        for (const key in product.measure) {
          const element = product.measure[key];
          part_detail._longCalc = part_detail._longCalc.replace(
            new RegExp(element.e_title, "g"),
            element.value || ""
          );
        }
      }
      return part_detail._longCalc;
    },
    handleFindNearest(array, value) {
      const temp = this.deepClone(array);
      temp.sort((a, b) => {
        return Math.abs(a.long - value) - Math.abs(b.long - value);
      });
      return temp[0].material_detail_id;
    },
    handleMetalChange(e, row, n, arr) {
      arr[n].ext_id = e.value;
      arr[n].title = e.label;
    },
    looks(img) {
      const array = [{ img_url: img }];
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    handleExtChange(row, { value, label }, item) {
      row.ext_id = value;
      row.title = label;
      const element = this.extList.filter((item) => item.id == value);
      row.num = element[0].num;
      row.price = element[0].price;
      row.total_price = (row.num * row.price).toFixed(2);
      this.handleTotalPriceCalc(row, item);
    },
    handleTotalPriceCalc(row, item) {
      row.total_price = ((row.price || 0) * (row.num || 0)).toFixed(2);
      let sum2 = 0;
      item.extArray &&
        item.extArray.length > 0 &&
        item.extArray.forEach((element) => {
          sum2 += element.total_price * 1 || 0;
        });
      item.ext_price = sum2 * 1;
      item.price =
        (item.unit_price * 1 || 0) * (item.num * 1 || 1) +
        (item.over_price * 1 || 0) +
        (item.ext_price * 1 || 0);
      item.price = item.price.toFixed(2);
      this.$forceUpdate();
    },
    handleTabsPaneChange(name) {
      this.tempExtArray = this.deepClone(
        this.addProductArray[this.currentTabIndex].extArray
      );
      this.pre_bp_id = this.addProductArray[this.currentTabIndex].bp_id;
      this.currentTabIndex = this.$refs.tabsRef.activeKey;
      this.currencyProduct = this.addProductArray[this.currentTabIndex];
    },
    handleTotalPriceChange(row, item) {
      row.price = (row.total_price / (row.num == 0 ? 1 : row.num)).toFixed(2);
      let sum = 0;
      item.extArray.map((v) => {
        return (sum += v.total_price * 1);
      });
      item.ext_price = sum;
      item.price =
        (item.unit_price * 1 || 0) * (item.num * 1 || 1) +
        (item.over_price * 1 || 0) +
        (item.ext_price * 1 || 0);
      item.price = item.price.toFixed(2);
      this.$forceUpdate();
    },
    then() {
      this.addProductArray[this.currentTabIndex] = this.currencyProduct;
      this.subAddProductData = this.addProductArray.filter((v) => {
        return !v.isdeleted;
      });
      this.$emit("then");
    },
    cancel() {
      this.$emit("cancel");
    },
    deepClone(obj) {
      //定义对象来判断当前的参数是数组还是对象
      let objClone = Array.isArray(obj) ? [] : {};
      //如果obj存在并且为对象
      if (obj && typeof obj == "object") {
        for (let key in obj) {
          if (Object.hasOwnProperty.call(obj, key)) {
            //如果obj的子元素为对象，那么递归（层级遍历）
            if (obj[key] && typeof obj[key] == "object") {
              objClone[key] = this.deepClone(obj[key]);
            } else {
              //如果不是，直接赋值
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.modal_product_info {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  .modal_product_info_title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .modal_product_info_content {
    .part_detail_form {
      /deep/.ivu-form {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      /deep/ .ivu-form-item {
        display: inline-block;
        min-width: 150px;
      }
    }
  }
  .hide_part_detail {
    display: none;
  }
  .modal_product {
    /deep/.ivu-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      min-width: 200px;
    }
  }
  .modal_parts {
    /deep/.ivu-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      min-width: 30px;
    }
  }
  .modal_extra {
    /deep/.ivu-form {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      min-width: 100px;
    }
  }
}
.product-img {
  padding-top: 10px;
}
.product-add {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  .ipt {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: none;
    top: 0;
    left: 0;
  }
  .add-items {
    width: 80px;
    height: 80px;
    border: 1px dotted #e7e7e7;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    background: #f4f5f7;
    .item {
      width: 46px;
      height: 46px;
      background: #3764ff;
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #fff;
    }
  }
  .items {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e7e7e7;
    margin-right: 10px;
    border-radius: 5px;
    position: relative;
    img {
      max-width: 70px;
      max-height: 70px;
    }
  }
}
</style>